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! https://youtu.be/kBNwTIoYwr8?si=x1eco-nEqgurQ13r&embedable=true YouTube Kanalımı ziyaret edin Project IDX'e Başlarken İlk adım oldukça basit. Web sitesini açmamız gerekiyor . Henüz kayıt olmadıysanız öncelikle kayıt olmanız gerekmektedir, ardından aşağıdaki ekranı görebilirsiniz. idx.google.com Ş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. Ş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. 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 ve anahtarınızı oradan alın. ilişkin ayrıntılı talimatlar istiyorsanız lütfen Project IDX ile ilgili başka bir video izleyin. , https://aistudio.google.com/app/apikey API anahtarının nasıl alınacağına Anahtarınızı aldıktan sonra kopyalayın ve ardından dosyasına gidin. Yer tutucuyu API anahtarınızla değiştirin. main.js 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. 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. 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: 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> Görüntüleri yüklemek için bir giriş alanı ekleyin. 15. satır <input type="file" id="fileInput" name="file"> 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. JavaScript'i güncelleme Dosyamızı okuyabilmek için JavaScript kodunu tanımlamamız gerekiyor. dosyasını açın ve aşağıdaki değişiklikleri yapın: Main.js 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))); 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. Son Test 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! Çö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! :)
