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!
İlk adım oldukça basit. Web sitesini açmamız gerekiyor
Şablon Seçin: Gemini API şablonunu seçeceğim.
Projenize Ad Verin: Ben buna "test 2024" diyeceğim.
Ortamı Seçin: Bir JavaScript web uygulama ortamı olan "Vite"ı seçeceğim.
Projeyi Oluşturun: Oluştur düğmesine basın.
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.
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.
Gördüğünüz gibi uygulama başlangıçta çalışmıyor çünkü önce bir API anahtarı almamız gerekiyor. Web sitesine git
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.
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.
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.
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.
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:
Uygulama Adını Değiştirin: Buna "AI Image Analizer" adını vereceğim.
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>
<input type="file" id="fileInput" name="file">
Ortaya çıkan HTML aşağıdaki resme benzemelidir.
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:
// 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)));
// 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.
Sonucu kontrol edelim. Bir görsel yükleyin, görselde ne olduğunu sorun ve "Git"e basın.
Resim örneğim.
Sonuç:
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!
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! :)