paint-brush
5 Dakikada Sıfırdan Yapay Zeka Görüntü Analiz Cihazına: Yeni Başlayanlar İçin Kılavuzile@proflead
554 okumalar
554 okumalar

5 Dakikada Sıfırdan Yapay Zeka Görüntü Analiz Cihazına: Yeni Başlayanlar İçin Kılavuz

ile Vladislav Guzey4m2024/07/01
Read on Terminal Reader

Çok uzun; Okumak

Bu makale size bir AI görüntü analizcisinin nasıl oluşturulacağını gösterir. Project IDX ve Gemini API'sini kullanacağız. Yapacağımız her şey bulut üzerinde olduğundan hiçbir şey ayarlamanıza gerek yok. API anahtarı almamız gerektiğinden uygulama başlangıçta çalışmıyor.
featured image - 5 Dakikada Sıfırdan Yapay Zeka Görüntü Analiz Cihazına: Yeni Başlayanlar İçin Kılavuz
Vladislav Guzey HackerNoon profile picture

Bir yapay zeka görüntü analizörünün nasıl oluşturulacağını bilmek ister misiniz? O halde bu makaleyi sonuna kadar okuyun! Size AI analiz araçlarının nasıl gerçekten basit bir şekilde oluşturulacağını göstereceğim, böylece neredeyse hiçbir ön bilgiye sahip olmanıza gerek kalmayacak. Sizi adım adım anlatacağım ve Project IDX ile Gemini API'sini kullanacağız. Bu, hiçbir şey ayarlamanıza gerek olmadığı anlamına gelir; yapacağımız her şey bulutta. Hazırsanız haydi başlayalım!

YouTube Kanalımı ziyaret edin

Project IDX'e Başlarken

İlk adım oldukça basit. Web sitesini açmamız gerekiyor idx.google.com . Henüz kayıt olmadıysanız öncelikle kayıt olmanız gerekmektedir, ardından aşağıdaki ekranı görebilirsiniz.


Getting Started with Project IDX


  1. Şablon Seçin: Gemini API şablonunu seçeceğim.


  2. Projenize Ad Verin: Ben buna "test 2024" diyeceğim.


  3. Ortamı Seçin: Bir JavaScript web uygulama ortamı olan "Vite"ı seçeceğim.


  4. Projeyi Oluşturun: Oluştur düğmesine basın.


    Getting Started with Project IDX


Birkaç dakika sonra IDX bizim için her şeyi oluşturacak ve istediğimiz gibi değiştirebileceğimiz şablon dosyalarımızı göreceğiz.

Şablonu Değiştirme

Bu bizim index.html dosyamızdır. İstediğimiz gibi değiştirebiliriz ama önce ona bakalım. İlk şablon ihtiyacımız olan hemen hemen her şeyi içerir. Bu şablon Gemini 1,5 flash modelini kullanıyor, bu yüzden bizim için fazlasıyla yeterli.

Modifying the Template


API Anahtarı Alma

Gördüğünüz gibi uygulama başlangıçta çalışmıyor çünkü önce bir API anahtarı almamız gerekiyor. Web sitesine git https://aistudio.google.com/app/apikey , ve anahtarınızı oradan alın. API anahtarının nasıl alınacağına ilişkin ayrıntılı talimatlar istiyorsanız lütfen Project IDX ile ilgili başka bir video izleyin.


Anahtarınızı aldıktan sonra kopyalayın ve ardından main.js dosyasına gidin. Yer tutucuyu API anahtarınızla değiştirin.

Getting an API Key


Uygulamayı Test Etme

Uygulamamızın çalışıp çalışmadığını kontrol edelim. "Git"e basın ve Gemini'nin bize ne döndürdüğünü görün.

Testing the Application



Gördüğünüz gibi İkizler resmin içinde ne olduğunu anlıyor ve bu tür fırınları pişirmek için bazı tarifler öneriyor. Bu uygulama zaten sunucuda olduğundan, bağlantıyı paylaşabilecek veya bu uygulamayı tarayıcınızda açabileceksiniz.

Testing the Application


URL henüz güzel değil; ancak her şeyin çalıştığını görebileceksiniz ve bu bağlantıyı ortaklarınız veya iş arkadaşlarınızla paylaşabilirsiniz.

Resim Yükleme İşlevselliği Ekleme

Yapay zeka görüntü analizörümüzü tamamlamak için kendi görüntümüzü ekleyebilmemiz gerekiyor. Şablonda bazı ayarlamalar yapalım; ilki index.html dosyasıdır:


  1. Uygulama Adını Değiştirin: Buna "AI Image Analizer" adını vereceğim.


  2. HTML'yi Sil: Önceden tanımlanmış görselleri silin. 14'ten 27'ye kadar olan satırlar.

 <div class="image-picker"> <label class="image-choice"> <input type="radio" checked name="chosen-image" value="/baked_goods_1.jpg"> <img src="/baked_goods_1.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_2.jpg"> <img src="/baked_goods_2.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_3.jpg"> <img src="/baked_goods_3.jpg"> </label> </div>


  1. Görüntüleri yüklemek için bir giriş alanı ekleyin. 15. satır
 <input type="file" id="fileInput" name="file">
  1. Giriş adı istemi değerini "Bu resim hakkında istediğiniz her şeyi sorun" olarak değiştirin.


Ortaya çıkan HTML aşağıdaki resme benzemelidir.

The resulting HTML

JavaScript'i güncelleme

Dosyamızı okuyabilmek için JavaScript kodunu tanımlamamız gerekiyor. Main.js dosyasını açın ve aşağıdaki değişiklikleri yapın:


  1. Kodu 22. satırdan 26. satıra kadar kaldırın.
 // Load the image as a base64 string let imageUrl = form.elements.namedItem('chosen-image').value; let imageBase64 = await fetch(imageUrl) .then(r => r.arrayBuffer()) .then(a => Base64.fromByteArray(new Uint8Array(a)));


  1. 22. satırdan başlayarak yeni bir kod ekleyin.
 // Load the image as a base64 string const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const imageBase64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const base64String = reader.result.split(',')[1]; // Extract base64 part resolve(base64String); }; reader.onerror = reject; });


Uygulamanız aşağıdaki ekran görüntüsündeki gibi görünecektir.

AI Image Analyzer


Son Test

Sonucu kontrol edelim. Bir görsel yükleyin, görselde ne olduğunu sorun ve "Git"e basın.


Resim örneğim.


My image example


Sonuç:

Final Testing


Gördüğünüz gibi Gemini API görselle ilgili her şeyi açıklıyor. Yapay zeka görüntü analizörümüz çalışıyor!

Çözüm

Bu kadar! Gördüğünüz gibi Project IDX ve Gemini API'yi kullanarak bir yapay zeka görüntü analizörü oluşturmak gerçekten çok basit. Bir sürü farklı uygulama yapabilirsiniz. Bu sadece bir örnek. Umarım bu makaleyi yararlı ve bilgilendirici bulursunuz. Lütfen görüşlerinizi aşağıdaki yorumlarda paylaşmayı unutmayın.


Teşekkür ederim, sonraki yazılarımda görüşmek üzere! :)