Gemini API için Firebase Extensions ile yapay zeka destekli web uygulamaları derleme

1. Başlamadan önce

Firebase Extensions, uygulamalarınıza önceden paketlenmiş işlevleri minimum kodla (hatta yapay zeka destekli işlevler) eklemenize olanak tanır. Bu kod laboratuvarında, Gemini API'den yararlanarak sağlanan bağlama ve son kullanıcı girişine göre resim açıklamaları, özetler ve hatta kişiselleştirilmiş öneriler oluşturmak için bir web uygulamasına iki Firebase uzantısının nasıl entegre edileceği gösterilmektedir.

Bu codelab'de, Firebase Extensions ile ilgi çekici kullanıcı deneyimleri sunan yapay zeka destekli bir web uygulaması oluşturmayı öğreneceksiniz.

Ön koşullar

• Node.js, Next.js ve TypeScript hakkında bilgi sahibi olma

Neler öğreneceksiniz?

• Gemini API için Firebase uzantılarını kullanarak dili işleme
• Dil modeliniz için artırılmış bir bağlam oluşturmak üzere Cloud Functions for Firebase'i kullanma
• Firebase Extensions tarafından üretilen çıkışa erişmek için JavaScript'i kullanma.

Gerekenler

• Google Chrome gibi tercih ettiğiniz bir tarayıcı
• Kod düzenleyici ve terminal içeren bir geliştirme ortamı
• Firebase projenizi oluşturmak ve yönetmek için bir Google Hesabı

2. Web uygulamasını, Firebase hizmetlerini ve uzantıları inceleme

Bu bölümde, bu codelab ile oluşturacağınız web uygulamasını inceleyecek ve kullanacağınız Firebase hizmetleri ile Firebase uzantılarını öğreneceksiniz.

Web uygulaması

Bu codelab'de Friendly Conf adlı bir web uygulaması oluşturacaksınız.

Friendly Conference ekibi, katılımcılarına keyifli ve kişiselleştirilmiş bir kullanıcı deneyimi sunmak için yapay zekayı kullanmaya karar verdi. Tamamlanan konferans uygulaması, katılımcılara çok modlu üretken yapay zeka modeli (büyük dil modeli veya LLM olarak da bilinir) tarafından desteklenen bir sohbet yapay zeka botu sunar. Bu bot, konferans programına ve konularına göre uyarlanmış genel konularla ilgili soruları yanıtlayabilir. Chatbot, geçmiş bağlam ve mevcut tarih/saat, Friendly Conf konuları ve programı hakkında bilgi sahibi olduğundan yanıtları tüm bu bağlamı hesaba katabilir.

Firebase hizmetleri

Bu codelab'de birçok Firebase hizmetini ve özelliğini kullanacaksınız. Bu hizmetler ve özelliklerle ilgili başlangıç kodunun çoğu sizin için sağlanmıştır. Aşağıdaki tabloda, kullanacağınız hizmetler ve bunları kullanma nedenleriniz yer almaktadır.

Firebase Extensions

Bu codelab'de kullanacağınız Firebase uzantıları şunlardır:

• Gemini API ile Chatbot oluşturma
• Gemini API ile Çoklu Formatlı Görevler

Uzantıların yararlı olmasının nedeni, Firebase projenizde gerçekleşen etkinliklere tepki vermesidir. Bu kod laboratuvarının iki uzantısı da Cloud Firestore'da önceden yapılandırılmış koleksiyonlarda yeni dokümanlar oluşturduğunuzda yanıt verir.

3. Geliştirme ortamınızı kurma

Node.js sürümünüzü doğrulama

1. Terminalinizde, Node.js 20.0.0 veya sonraki bir sürümün yüklü olduğunu doğrulayın:

   node -v
   

2. Node.js 20.0.0 veya daha yeni bir sürümünüz yoksa en son LTS sürümünü indirip yükleyin.

Codelab'in kaynak kodunu alma

GitHub hesabınız varsa:

1. github.com/FirebaseExtended/codelab-gemini-api-extensions adresindeki şablonumuzu kullanarak yeni bir depo oluşturun
2. Az önce oluşturduğunuz kod alanının GitHub deposunu kopyalayın:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

Git yüklü değilse veya yeni bir depo oluşturmayı tercih etmiyorsanız:

GitHub deposunu zip dosyası olarak indirin.

Klasör yapısını inceleme

Kök klasörde, basitleştirilmiş talimatlar kullanarak web uygulamasını hızlı bir şekilde çalıştırma olanağı sunan bir README.md dosyası bulunur. Ancak ilk kez öğreniyorsanız en kapsamlı talimatları içeren bu kod laboratuvarını (hızlı başlangıç yerine) tamamlamanız gerekir.

Bu kod laboratuvarındaki talimatlara uygun şekilde kodu doğru şekilde uygulayıp uygulamadığınızdan emin değilseniz çözüm kodunu end git dalında bulabilirsiniz.

Firebase CLI'yi yükleme

1. Firebase CLI'nin yüklü olduğunu ve 13.6 veya sonraki bir sürüm olduğunu doğrulayın:

   firebase --version
   

2. Firebase CLI yüklüyse ancak 13.6 veya daha yeni bir sürüm değilse güncelleyin:

   npm update -g firebase-tools
   

3. Firebase CLI yüklü değilse yükleyin:

   npm install -g firebase-tools
   

İzin hataları nedeniyle Firebase CLI'yi güncelleyemiyorsanız veya yükleyemiyorsanız npm belgelerine göz atın ya da başka bir yükleme seçeneği kullanın.

Firebase'e giriş yapma

1. Terminalinizde codelab-gemini-api-extensions klasörüne gidin ve Firebase'e giriş yapın:

   cd codelab-gemini-api-extensions
   firebase login
   

   Terminalinizde Firebase'e zaten giriş yaptığınız belirtiliyorsa bu codelab'in Firebase projenizi ayarlama bölümüne atlayabilirsiniz.
2. Terminalinizde, Firebase'in veri toplamasını isteyip istemediğinize bağlı olarak Y veya N yazın. (bu codelab için her iki seçenek de işe yarar)
3. Tarayıcınızda Google Hesabınızı seçin ve İzin ver'i tıklayın.

4. Firebase projenizi ayarlama

Bu bölümde, bir Firebase projesi oluşturacak ve bu projeye bir Firebase web uygulaması kaydedeceksiniz. Ayrıca, bu codelab'in ilerleyen bölümlerinde örnek web uygulaması tarafından kullanılan birkaç Firebase hizmetini de etkinleştireceksiniz.

Bu bölümdeki tüm adımlar Firebase konsolunda gerçekleştirilir.

Firebase projesi oluşturma

1. Google Hesabı kullanarak Firebase konsolunda oturum açın.
2. Proje oluştur'u tıklayın ve ardından bir proje adı girin (örneğin, AI Extensions Codelab).
   Firebase projeniz için otomatik olarak atanan proje kimliğini unutmayın (veya tercih ettiğiniz proje kimliğini ayarlamak için Düzenle simgesini tıklayın). Firebase CLI'de Firebase projenizi tanımlamak için bu kimliğe daha sonra ihtiyacınız olacak. Kimliğinizi unutursanız daha sonra Proje Ayarları'nda bulabilirsiniz.
3. Devam'ı tıklayın.
4. İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
5. Bu kod laboratuvarının çalışması için Google Analytics'e ihtiyacınız yoktur. Bu nedenle Google Analytics seçeneğini devre dışı bırakın.
6. Proje oluştur'u tıklayın, projenizin temel hazırlığını yapılmasını bekleyin ve ardından Devam'ı tıklayın.

Firebase fiyatlandırma planınızı yükseltme

Firebase Extensions'i (ve temel bulut hizmetlerini) ve Firebase için Cloud Storage'ı kullanmak istiyorsanız Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planında olması gerekir. Yani projeniz bir Cloud Faturalandırma hesabına bağlı olmalıdır.

• Cloud Billing hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
• Firebase ve Google Cloud'da yeniyseniz 300 ABD doları kredi ve Ücretsiz Deneme Cloud Faturalandırma hesabı almaya uygun olup olmadığınızı kontrol edin.
• Bu kod laboratuvarını bir etkinlik kapsamında yapıyorsanız düzenleyen kişiye Cloud kredisi olup olmadığını sorun.

Ayrıca, Firebase projenizde faturalandırma etkinleştirildiğinde, uzantının Gemini API'ye yaptığı çağrılar için ücretlendirileceğinizi unutmayın (Google Yapay Zeka veya Vertex AI'yı seçmeniz fark etmez). Google Yapay Zeka ve Vertex AI fiyatlandırması hakkında daha fazla bilgi edinin.

Projenizi Blaze planına yükseltmek için aşağıdaki adımları uygulayın:

1. Firebase konsolunda planınızı yükseltmeyi seçin.
2. Blaze planını seçin. Projenize bir Cloud Faturalandırma hesabı bağlamak için ekrandaki talimatları uygulayın.
   Bu yükseltme kapsamında bir Cloud Faturalandırma hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase Console'daki yükseltme akışına geri dönmeniz gerekebilir.

Firebase projenize web uygulaması ekleme

1. Firebase projenizdeki Projeye Genel Bakış ekranına gidin ve ardından Web'i tıklayın.
2. Uygulama takma adı metin kutusuna akılda kalıcı bir uygulama takma adı (ör. My AI Extensions) girin.
3. Uygulamayı kaydet > İleri > İleri > Konsola devam et'i tıklayın.
   Bu codelab'in ilerleyen bölümlerinde isteğe bağlı olarak bir barındırma hizmeti ayarlayacağınız için web uygulaması akışında"barındırma" ile ilgili tüm adımları atlayabilirsiniz.

Güzel! Artık yeni Firebase projenize bir web uygulaması kaydettiniz.

Firebase Authentication'ı ayarlama

1. Sol gezinme bölmesini kullanarak Kimlik doğrulama'ya gidin.
2. Başlayın'ı tıklayın.
3. Ek sağlayıcılar sütununda Google > Etkinleştir'i tıklayın.
4. Projenin herkese açık adı metin kutusuna My AI Extensions Codelab gibi yararlı bir ad girin.
5. Proje için destek e-postası menüsünde e-posta adresinizi seçin.
6. Kaydet'i tıklayın.

Cloud Firestore'u ayarlama

1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Firestore veritabanı'nı seçin.
2. Create database'i (Veritabanı oluştur) tıklayın.
3. Veritabanı Kimliği'ni (default) olarak bırakın.
4. Veritabanı için bir konum seçin ve Sonraki'yi tıklayın.
   Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
5. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu kod laboratuvarının ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza Güvenlik Kuralları eklemeden bir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
6. Oluştur'u tıklayın.

Cloud Storage for Firebase'ı ayarlama

1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Depolama'yı seçin.
2. Başlayın'ı tıklayın.
3. Varsayılan Storage paketiniz için bir konum seçin.
   US-WEST1, US-CENTRAL1 ve US-EAST1'deki paketler, Google Cloud Storage'ın "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler için Google Cloud Storage fiyatlandırması ve kullanımı geçerlidir.
4. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu kod laboratuvarının ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Depolama alanı paketiniz için Güvenlik Kuralları eklemedenbir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
5. Oluştur'u tıklayın.

Bu codelab'in sonraki bölümünde, bu codelab boyunca web uygulamasında kullanacağınız iki Firebase uzantısını yükleyip yapılandıracaksınız.

5. "Chatbot with the Gemini API" uzantısını ayarlama

"Gemini API ile Chatbot oluşturma" uzantısını yükleme

1. "Gemini API ile Chatbot oluşturma" uzantısına gidin.
2. Firebase konsoluna yükle'yi tıklayın.
3. Firebase projenizi seçin ve İleri'yi tıklayın.
4. Etkinleştirilen API'leri ve oluşturulan kaynakları inceleyin bölümünde, size önerilen hizmetlerin yanındaki Etkinleştir'i ve ardından İleri'yi tıklayın.
5. Size önerilen tüm izinler için Ver'i seçip Sonraki'yi tıklayın.
6. Uzantıyı yapılandırın:
   1. Gemini API Sağlayıcısı menüsünde, Google AI'ın mı yoksa Vertex AI'ın mı Gemini API'sini kullanmak istediğinizi seçin. Firebase kullanan geliştiricilerin Vertex AI kullanmalarını öneririz.
   2. Firestore Koleksiyon Yolu metin kutusuna users/{uid}/messages yazın.
      Bu codelab'in sonraki adımlarında, bu koleksiyona belge eklemek uzantının Gemini API'yi çağırmasını tetikler.
   3. Cloud Functions konumu menüsünde tercih ettiğiniz konumu (ör. Iowa (us-central1) veya Firestore veritabanınız için daha önce belirttiğiniz konum) seçin.
   4. Diğer tüm değerleri varsayılan değerlerinde bırakın.
7. Uzantıyı yükle'yi tıklayın ve uzantının yüklenmesini bekleyin.

"Chatbot with the Gemini API" uzantısını deneyin

Bu codelab'in amacı, "Chatbot with the Gemini API" uzantısını bir web uygulaması üzerinden etkileşime geçirmek olsa da uzantıyı önce Firebase Konsolu'nda deneyerek nasıl çalıştığını öğrenmek faydalı olacaktır.

Uzantı, users/{uid}/discussion/{discussionId}/messages koleksiyonu altında bir Firestore belgesi oluşturulduğunda tetiklenir. Bu işlemi Firebase konsolunda yapabilirsiniz.

1. Firebase konsolunda Firestore'a gidin ve ilk sütunda Koleksiyonu başlat'ı tıklayın.
2. Koleksiyon kimliği metin kutusuna users yazın ve Sonraki'yi tıklayın.
3. Doküman kimliği metin kutusunda Otomatik kimlik'i ve ardından Kaydet'i tıklayın.
4. users koleksiyonunda Koleksiyonu başlat'ı tıklayın.
5. Koleksiyon kimliği metin kutusuna messages yazın ve Sonraki'yi tıklayın.
   1. Doküman Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
   2. Alan metin kutusuna prompt yazın
   3. Değer metin kutusuna Tell me 5 random fruits yazın
6. Kaydet'i tıklayın ve birkaç saniye bekleyin.

Bu dokümanı eklediğinizde uzantı, Gemini API'yi çağırmaya başladı. messages koleksiyonuna eklediğiniz doküman artık yalnızca prompt'ınızı değil, sorgunuza modelin response'ini de içeriyor.

messages koleksiyonuna başka bir doküman ekleyerek uzantıyı tekrar tetikleyin:

1. messages koleksiyonunda Doküman ekle'yi tıklayın.
2. Doküman Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
3. Alan metin kutusuna prompt yazın
4. Değer metin kutusuna And now, vegetables yazın
5. Kaydet'i tıklayın ve birkaç saniye bekleyin. messages koleksiyonuna eklediğiniz belge artık sorgunuza bir response içeriyor.
   
   Bu yanıtı oluştururken temel alınan Gemini modeli, önceki sorgunuzdaki geçmiş bilgileri kullandı.

6. Web uygulamasını ayarlama

Web uygulamasını çalıştırmak için terminalinizde komutlar çalıştırmanız ve kod düzenleyicinize kod eklemeniz gerekir.

Firebase CLI'yi Firebase projenizle çalışacak şekilde ayarlama

Terminalinizde aşağıdaki komutu çalıştırarak CLI'ye Firebase projenizi kullanmasını söyleyin:

firebase use YOUR_PROJECT_ID

Firestore ve Cloud Storage için güvenlik kuralları dağıtma

Bu kod laboratuvarının kod tabanında, sizin için yazılmış bir dizi Firestore Güvenlik Kuralı ve Cloud Storage Güvenlik Kuralı bulunmaktadır. Bu güvenlik kurallarını dağıttıktan sonra, Firebase projenizdeki Firebase hizmetleriniz kötüye kullanıma karşı daha iyi korunur.

1. Güvenlik kurallarını dağıtmak için terminalinizde şu komutu çalıştırın:

   firebase deploy --only firestore:rules,storage
   

2. Hizmetler arası kuralları kullanmak için Cloud Storage'a IAM rolü verilip verilmeyeceği sorulduğunda Y veya N yazın. (bu codelab için her iki seçenek de işe yarar)

Web uygulamanızı Firebase projenize bağlama

Web uygulamanızın kod tabanının, veritabanı, depolama alanı vb. için hangi Firebase projesini kullanması gerektiğini bilmesi gerekir. Bunu, Firebase yapılandırmanızı uygulamanızın kod tabanına ekleyerek yaparsınız.

1. Firebase yapılandırmanızı alın:
   1. Firebase konsolunda, Firebase projenizdeki Proje ayarları'na gidin.
   2. Uygulamalarınız bölümüne gidip kayıtlı web uygulamanızı seçin.
   3. SDK kurulumu ve yapılandırması bölmesinde, firebaseConfig const dahil olmak üzere initializeApp kodunun tamamını kopyalayın.
2. Firebase yapılandırmanızı web uygulamanızın kod tabanına ekleyin:
   1. Kod düzenleyicinizde src/app/lib/firebase/firebase.config.js dosyasını açın.
   2. Dosyadaki her şeyi seçin ve kopyaladığınız kodla değiştirin.
   3. Dosyayı kaydedin.

Web uygulamasını tarayıcınızda önizleme

1. Terminalinizde bağımlılıkları yükleyin ve ardından web uygulamasını çalıştırın:

   npm install
   npm run dev
   

2. Web uygulamasını görüntülemek için tarayıcınızda yerel olarak barındırılan barındırma URL'sine gidin. Örneğin, çoğu durumda URL http://localhost:3000/ veya benzer bir URL'dir.

Web uygulamasının chatbot'unu kullanma

1. Tarayıcınızda, yerel olarak çalışan Friendly Conf web uygulamasının bulunduğu sekmeye dönün.
2. Google ile oturum aç'ı tıklayın ve gerekirse Google Hesabınızı seçin.
3. Oturum açtıktan sonra boş bir sohbet penceresi görürsünüz.
4. Bir karşılama mesajı yazın (ör. hi) ve Gönder'i tıklayın.
5. Sohbet robotunun yanıt vermesi için birkaç saniye bekleyin.

Uygulamadaki chatbot, genel bir yanıtla yanıt verir.

Chatbot'u uygulama için özelleştirme

Model, uygulamayı kullanan katılımcılar için yanıtlar oluştururken konferansa özgü ayrıntıları öğrenmek için web uygulamanızın sohbet robotu tarafından kullanılan temel Gemini modeline ihtiyacınız vardır. Bu yanıtları kontrol etmenin ve yönlendirmenin birçok yolu vardır. Bu kod laboratuvarının alt bölümünde, ilk istemde yalnızca web uygulaması kullanıcısından gelen giriş yerine "bağlam" sağlayarak size çok temel bir yöntem gösteriyoruz.

1. Tarayıcınızdaki web uygulamasında, kırmızı "x" düğmesini (sohbet geçmişindeki mesajın yanında) tıklayarak ileti dizisini temizleyin.
2. Kod düzenleyicinizde src/app/page.tsx dosyasını açın.
3. Sayfayı aşağı kaydırın ve 77. satırda veya yakınında bulunan prompt: userMsg ifadesini aşağıdaki kodla değiştirin:
   prompt: preparePrompt(userMsg, messages),
4. Dosyayı kaydedin.
5. Tarayıcınızda çalışan web uygulamasına geri dönün.
6. Tekrar bir selamlama yazın (ör. hi) ve Gönder'i tıklayın.
7. Sohbet robotunun yanıt vermesi için birkaç saniye bekleyin.

Chatbot, src/app/lib/context.md içinde sağlanan bağlama göre bilgi vererek yanıt verir. Belirli bir istek girmemiş olsanız bile temel alınan Gemini modeli, bu bağlama ve mevcut tarih/saate göre kişiselleştirilmiş bir öneri oluşturur. Artık takip soruları belirleyebilir ve daha ayrıntılı bilgi edinebilirsiniz.

Bu genişletilmiş bağlam, chatbot için önemlidir ancak web uygulamasının kullanıcısına gösterilmemelidir. Bu bağlamı gizlemek için:

1. Kod düzenleyicinizde src/app/page.tsx dosyasını açın.
2. Sayfayı aşağı kaydırın ve 56. satırda veya yakınında bulunan ...doc.data(), kodunun yerine aşağıdaki kodu yazın:
   ...prepareMessage(doc.data()),
3. Dosyayı kaydedin.
4. Tarayıcınızda çalışan web uygulamasına geri dönün.
5. Sayfayı yeniden yükleyin.

Geçmiş bağlamla chatbot ile sohbet etme özelliğini de deneyebilirsiniz:

1. Mesaj yazın metin kutusuna aşağıdaki gibi bir soru sorun: Any other interesting talks about AI?Chatbot bir yanıt verir.
2. Mesaj yazın metin kutusuna, önceki soruyla ilgili bir takip sorusu yazın: Give me a few more details about the last one.

Chatbot, geçmiş bilgilerle yanıt verir. Sohbet geçmişi artık bağlamın bir parçası olduğundan chatbot, takip sorularına yanıt verebilir.

Bonus: Firebase Local Emulator Suite'i kullanarak web uygulamasını çalıştırma

Firebase Local Emulator Suite, web uygulamasının özelliklerinin çoğunu yerel olarak test etmenize olanak tanır.

1. Terminalinizde, web uygulamasının kökünde olduğunuzdan emin olun.
2. Firebase Local Emulator Suite'i yükleyip çalıştırmak için aşağıdaki komutu çalıştırın:

   firebase init emulators
   firebase emulators:start
   

7. "Gemini API ile Çoklu Modlu Görevler" uzantısını ayarlama

"Gemini API ile Çoklu Modlu Görevler" uzantısı, Gemini API'yi bir metin istemi ve desteklenen bir dosya URL'si veya Cloud Storage URL'si içeren çoklu modlu istemlerle çağırır (Google AI Gemini API'nin bile temel dosya URL'si altyapısı olarak bir Cloud Storage URL'si kullandığını unutmayın). Uzatma, metin istemini özelleştirmek için Cloud Firestore belgesindeki değerlerin yerine geçmesi amacıyla handlebars değişkenlerini de destekler.

Uygulamanızda, bir Cloud Storage paketine resim yüklediğinizde bir URL oluşturabilir ve bu URL'yi yeni bir Cloud Firestore belgesine ekleyebilirsiniz. Böylece, uzantıyı tetikleyerek çoklu modal istem oluşturabilir ve Gemini API'yi çağırabilirsiniz. Bu kod laboratuvarının kaynak kodunda, resim yükleme ve URL'yi bir Firestore belgesine yazma kodunu zaten sağladık.

"Gemini API ile Çoklu Formatlı Görevler" uzantısını yükleme

1. "Gemini API ile Çoklu Modlu Görevler" uzantısına gidin.
2. Firebase konsoluna yükle'yi tıklayın.
3. Firebase projenizi seçin.
4. Uzantıyı yapılandır bölümüne ulaşana kadar İleri > İleri > İleri'yi tıklayın.
   1. Gemini API Sağlayıcısı menüsünde, Google AI'ın mı yoksa Vertex AI'ın mı Gemini API'sini kullanmak istediğinizi seçin. Firebase kullanan geliştiricilerin Vertex AI kullanmalarını öneririz.
   2. Firestore Koleksiyon Yolu metin kutusuna şunları girin: gallery
   3. İstem metin kutusuna şunları girin: Please describe the provided image; if there is no image, say "no image"
   4. Resim alanı metin kutusuna şunu girin: image
   5. Cloud Functions konumu menüsünde tercih ettiğiniz konumu (ör. Iowa (us-central1) veya Firestore veritabanınız için daha önce belirttiğiniz konum) seçin.
   6. Diğer tüm değerleri varsayılan değerlerinde bırakın.
5. Uzantıyı yükle'yi tıklayın ve uzantının yüklenmesini bekleyin.

"Gemini API ile Çoklu Formatlı Görevler" uzantısını deneyin

Bu codelab'in amacı, "Gemini API ile Çoklu Modlu Görevler" uzantısını bir web uygulaması üzerinden etkileşime geçirmek olsa da uzantıyı önce Firebase konsolunda deneyerek nasıl çalıştığını öğrenmek faydalı olacaktır.

Uzantı, users/{uid}/gallery koleksiyonu altında bir Firestore belgesi oluşturulduğunda tetiklenir. Bu işlemi Firebase konsolunda yapabilirsiniz. Ardından uzantı, Cloud Firestore belgesindeki Cloud Storage resim URL'sini alır ve Gemini API'ye yapılan bir çağrıda çoklu modal istemin bir parçası olarak iletir.

Öncelikle bir Cloud Storage paketine resim yükleyin:

1. Firebase projenizde Depolama'ya gidin.
2. Klasör oluştur'u tıklayın.
3. Klasör adı metin kutusuna gallery yazın
4. Klasör ekle'yi tıklayın.
5. gallery klasöründe Dosya yükle'yi tıklayın.
6. Yüklemek için bir JPEG resim dosyası seçin.

Ardından, resmin Cloud Storage URL'sini bir Firestore dokümanına ekleyin (uzantı için tetikleyici budur):

1. Firebase projenizde Firestore'a gidin
2. İlk sütunda Koleksiyonu başlat'ı tıklayın.
3. Koleksiyon kimliği metin kutusuna gallery yazın ve Sonraki'yi tıklayın.
4. Koleksiyona doküman ekleme:
   1. Doküman Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
   2. Alan metin kutusuna: image yazın. Değer kutusuna, yüklediğiniz resmin Depolama konumu URI'sini girin.
5. Alan Ekle'yi tıklayın.
6. Alan metin kutusuna: published yazın. Tür kutusunda boolean'u seçin. Değer kutusunda true'yi seçin.
7. Kaydet'i tıklayın ve birkaç saniye bekleyin.

gallery koleksiyonuna sorgunuza yanıt içeren bir doküman eklendi.

Web uygulamasının resim galerisini kullanma

1. Tarayıcınızda, yerel olarak çalışan Friendly Conf web uygulamasının bulunduğu sekmeye dönün.
2. Galeri gezinme sekmesini tıklayın.
3. Yüklenen resimlerin ve yapay zeka tarafından üretilen açıklamaların yer aldığı bir galeri görürsünüz. Bu klasörde, daha önce Storage paketinizdeki gallery klasörüne yüklediğiniz resim yer alır.
4. "Yükle" düğmesini tıklayın ve başka bir JPEG resim seçin.
5. Resmin galeride gösterilmesi için birkaç saniye bekleyin. Birkaç dakika sonra, yeni yüklenen resim için yapay zeka tarafından üretilen açıklama da gösterilir.

Bu özelliğin nasıl uygulandığını anlamak için web uygulamasının kod tabanında src/app/gallery/page.tsx bölümüne bakın.

8. Bonus: Uygulamanızı dağıtma

Firebase, web uygulamalarını dağıtmanın çeşitli yollarını sunar. Bu kod laboratuvarının çalışması için aşağıdaki seçeneklerden birini belirleyin:

• 1. seçenek: Firebase Hosting: Kendi GitHub deponuzu oluşturmamaya karar verirseniz (ve kaynak kodunuzu yalnızca makinenizde yerel olarak depolamak istiyorsanız) bu seçeneği kullanın.
• 2. seçenek: Firebase Uygulama Barındırma: Kendi GitHub deponuza değişiklik gönderdiğinizde otomatik dağıtım yapmak istiyorsanız bu seçeneği kullanın. Bu yeni Firebase hizmeti, dinamik Next.js ve Angular uygulamalarının ihtiyaçlarına özel olarak tasarlanmıştır.

1. Seçenek: Firebase Hosting'i kullanarak dağıtma

Kendi GitHub deponuzu oluşturmamaya (ve kaynak kodunuzun yalnızca makinenizde yerel olarak depolanmasına) karar verirseniz bu seçeneği kullanın.

1. Terminalinizde şu komutları çalıştırarak Firebase Hosting'i başlatın:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. Detected an existing Next.js codebase in your current directory, should we use this? istemi için Y tuşuna basın.
3. In which region would you like to host server-side content, if applicable? istemi için varsayılan konumu veya bu codelab'de daha önce kullandığınız konumu seçin. Ardından Enter (veya macOS'te return) tuşuna basın.
4. Set up automatic builds and deploys with GitHub? istemi için N tuşuna basın.
5. Web uygulamanızı barındırmaya dağıtmak için şu komutu çalıştırın:

   firebase deploy --only hosting
   

Hepsi bu kadar. Uygulamanızı güncelleyip yeni sürümü dağıtmak istiyorsanız firebase deploy --only hosting komutunu yeniden çalıştırmanız yeterlidir. Firebase Hosting, uygulamanızı oluşturup yeniden dağıtır.

2. Seçenek: Firebase App Hosting'i kullanarak dağıtma

Kendi GitHub deponuza değişiklik aktardığınızda otomatik dağıtım yapmak istiyorsanız bu seçeneği kullanın.

1. Değişikliklerinizi GitHub'a kaydedin.
2. Firebase konsolunda, Firebase projenizde Uygulama Barındırma'ya gidin.
3. Başlayın > GitHub'a bağlan'ı tıklayın.
4. GitHub hesabınızı ve kod deponuzu seçin. İleri'yi tıklayın.
5. Yayınlama ayarı > Kök dizin bölümünde, kaynak kodunuzun bulunduğu klasörün adını girin (package.json, deponuzun kök dizininde değilse).
6. Canlı şube için GitHub depolarınızın main şubesini seçin. İleri'yi tıklayın.
7. Arka uçunuz için bir kimlik girin (örneğin, chatbot).
8. Sonlandır ve Dağıt'ı tıklayın.

Yeni dağıtımınızın hazır olması birkaç dakika sürer. Dağıtım durumunu Firebase konsolunun Uygulama Barındırma bölümünden kontrol edebilirsiniz.

Bu andan itibaren, GitHub deponuza her değişiklik gönderdiğinizde Firebase App Hosting, uygulamanızı otomatik olarak oluşturup dağıtır.

9. Sonuç

Tebrikler! Bu codelab'de çok şey başardınız.

Uzantıları yükleme ve yapılandırma

Üretken yapay zekayı kullanan çeşitli Firebase uzantılarını yapılandırmak ve yüklemek için Firebase konsolunu kullandınız. Firebase uzantılarını kullanmak, Google Cloud hizmetleriyle kimlik doğrulamayı veya Firestore ve Google Cloud hizmetleri ve API'leriyle etkileşime geçmek için arka uç Cloud Functions mantığını öğrenmeniz ve çok fazla standart kod yazmanız gerekmediğinden kullanışlıdır.

Firebase konsolunu kullanarak uzantıları deneme

Doğrudan koda atlamak yerine, Firestore veya Cloud Storage üzerinden sağladığınız bir girişe göre bu yapay zeka uzantılarının nasıl çalıştığını anlamak için zaman ayırdınız. Bu, özellikle bir uzantının çıkışında hata ayıklama yaparken yararlı olabilir.

Yapay zeka destekli web uygulaması oluşturma

Gemini modelinin yalnızca birkaç özelliğine erişmek için Firebase Extensions'i kullanan yapay zeka destekli bir web uygulaması oluşturdunuz.

Web uygulamasında, kullanıcıya sohbetlerde uygulamaya özgü ve geçmiş bağlamı içeren etkileşimli bir sohbet arayüzü sunmak için "Gemini API ile Chatbot" uzantısını kullanırsınız. Bu uzantı, her mesajın belirli bir kullanıcıya yönelik kapsama sahip bir Firestore belgesinde depolandığı sohbetlerde uygulamaya özgü ve geçmiş bağlamı içeren etkileşimli bir sohbet arayüzü sunar.

Web uygulaması, yüklenen resimlerin açıklamalarını otomatik olarak oluşturmak için "Gemini API ile Çoklu Modlu Görevler" uzantısını da kullandı.

Sonraki adımlar

• Google AI Studio veya Vertex AI Studio'da istemleri deneyebilir ve büyük bağlam penceresinden yararlanabilirsiniz.
• Yapay zeka ile almayla artırılmış üretim (RAG) araması hakkında bilgi edinin.
• Yeni bir yapay zeka çerçevesi hizmeti olan Firebase Genkit'i kullanarak mevcut bir Firebase uygulamasına nasıl chatbot ekleneceğini gösteren kendi kendine ilerleyen bir codelab'i deneyin.
• Firestore'daki benzerlik arama özellikleri ve PostgreSQL için Cloud SQL hakkında bilgi edinin.
• İşlev çağrısı özelliğini kullanarak chatbot'unuza mevcut uygulamanızı aramasını öğretin.