Firebase Genkit ile verilerinizle desteklenen üretken yapay zeka özellikleri oluşturun

1. Başlamadan önce

Bu codelab'de, üretken yapay zekayı uygulamanıza entegre etmek için Firebase Genkit'i kullanmayı öğreneceksiniz. Firebase Genkit, üretime hazır yapay zeka destekli uygulamalar geliştirmenize, dağıtmanıza ve izlemenize yardımcı olan açık kaynak bir çerçevedir.

Uygulama geliştiriciler için tasarlanan Genkit, güçlü yapay zeka özelliklerini uygulamalarınıza tanıdık kalıplar ve paradigmalar ile kolayca entegre etmenize yardımcı olur. Firebase ekibi tarafından geliştirilmiştir ve dünya çapında milyonlarca geliştiricinin kullandığı araçları oluşturma konusundaki deneyimimizden faydalanmaktadır.

Ön koşullar

  • Firestore, Node.js ve TypeScript hakkında bilgi sahibi olmanız gerekir.

Neler öğreneceksiniz?

  • Firestore'un gelişmiş vektör benzerliği arama özellikleriyle daha akıllı uygulamalar oluşturma.
  • Firebase Genkit'i kullanarak üretken yapay zekayı uygulamalarınıza pratik bir şekilde uygulama.
  • Çözümünüzü dağıtım ve entegrasyon için hazırlayın.

Gerekenler

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

2. Kullanılan web uygulamasını ve bulut hizmetlerini inceleme

Bu bölümde, bu codelab ile oluşturacağınız web uygulamasını inceleyecek ve kullanacağınız bulut hizmetleri hakkında bilgi edineceksiniz.

Web uygulaması

Bu codelab'de, tatil planlama uygulaması olan Compass adlı uygulamanın kod tabanında çalışacaksınız. Kullanıcılar, varış noktası seçebilir, varış noktasındaki etkinliklere göz atabilir ve seyahatleri için seyahat planı oluşturabilir.

Bu codelab'de, kullanıcıların uygulamanın ana sayfasıyla etkileşimini iyileştirmeyi amaçlayan iki yeni özellik uygulayacaksınız. Her iki özellik de üretken yapay zeka tarafından desteklenir:

  • Uygulama şu anda hedeflerin statik bir listesini gösteriyor. Bu özelliği dinamik olarak değiştireceksiniz.
  • Bağlılık oranını artırmak için otomatik olarak doldurulan bir seyahat planı uygulayabilirsiniz.

d54f2043af908fb.png

Kullanılan hizmetler

Bu codelab'de, birçok Firebase ve Cloud hizmeti ile özelliğini kullanacaksınız. Bunlarla ilgili başlangıç kodunun büyük kısmı sizin için sağlanmaktadır. Aşağıdaki tabloda, kullanacağınız hizmetler ve bunları kullanma nedenleri yer almaktadır.

Hizmet

Kullanım nedeni

Firebase Genkit

Üretken yapay zekayı Node.js/Next.js uygulamasına dahil etmek için Genkit'i kullanırsınız.

Cloud Firestore

Verileri Cloud Firestore'da depolarsınız. Bu veriler daha sonra vektör benzerliği araması için kullanılır.

Google Cloud'un Vertex AI

Yapay zeka özelliklerinizi desteklemek için Vertex AI'daki temel modelleri (Gemini gibi) kullanırsınız.

Firebase Uygulama Barındırma

İsterseniz dinamik Next.js web uygulamanızı (GitHub kod deposuna bağlı) sunmak için yeni, basitleştirilmiş Firebase App Hosting'i kullanabilirsiniz.

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

Node.js sürümünüzü doğrulayın

  1. Terminalinizde Node.js 20.0.0 veya sonraki bir sürümünün yüklü olduğunu doğrulayın:
    node -v
    
  2. Node.js 20.0.0 veya sonraki bir sürümüne sahip değilseniz 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-ai-genkit-rag65ef006167d600ab.png adresindeki şablonumuzu kullanarak yeni bir depo oluşturun.
  2. Az önce oluşturduğunuz kod deposunun yerel bir kopyasını oluşturun:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
    

Git yüklü değilse veya yeni bir depo oluşturmak istemiyorsanız:

GitHub deposunu zip dosyası olarak indirin.

Klasör yapısını inceleme

Yerel makinenizde, klonlanan depoyu bulun ve klasör yapısını inceleyin:

Klasör

Açıklama

genkit-functions

Arka Uç Genkit kodu

load-firestore-data

Firestore koleksiyonunuzu hızlı bir şekilde önceden doldurmak için yardımcı komut satırı aracı

*her şey

Next.js web uygulaması kodu

Kök klasörde, basitleştirilmiş talimatları kullanarak web uygulamasını çalıştırmaya hızlı başlangıç yapmanızı sağlayan bir README.md dosyası bulunur. Ancak ilk kez öğreniyorsanız codelab en kapsamlı talimat grubunu içerdiği için bu codelab'i (hızlı başlangıç yerine) tamamlamanız gerekir.

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

Firebase CLI'ı yükleme

  1. Firebase CLI'nin yüklü olduğunu ve sürümünün 13.6 veya üzeri olduğunu doğrulayın:
    firebase --version
    
  2. Firebase CLI yüklüyse ancak sürüm 13.6 veya sonraki 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'yı güncelleyemiyor veya yükleyemiyorsanız npm belgelerine bakın veya başka bir yükleme seçeneği kullanın.

Firebase'e giriş yapın

  1. Terminalinizde Firebase'e giriş yapın:
    firebase login
    
    Terminaliniz Firebase'e zaten giriş yaptığınızı söylüyorsa bu codelab'in Firebase projenizi oluşturma 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.

Google Cloud'un gcloud KSA'sını yükleme

  1. gcloud KSA'yı yükleyin.
  2. Terminalinizde Google Cloud'a giriş yapın:
    gcloud auth login
    

4. Firebase projenizi oluşturun

Bu bölümde bir Firebase projesi hazırlayacak ve bu projede bir Firebase Web Uygulaması kaydedeceksiniz. Ayrıca, bu codelab'in ilerleyen bölümlerinde örnek web uygulaması tarafından kullanılan birkaç hizmeti de etkinleştireceksiniz.

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

Firebase projesi oluşturma

  1. Bir önceki adımda kullandığınız Google Hesabı'nı kullanarak Firebase konsolunda oturum açın.
  2. Proje oluştur'u tıklayın ve ardından bir proje adı girin (örneğin, Compass 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). Daha sonra Firebase CLI'de Firebase projenizi tanımlamak için bu kimliğe ihtiyacınız olacaktır. Kimliğinizi unutursanız istediğiniz zaman 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. Create project'i (Proje oluştur) tıklayın, projenizin temel hazırlığının tamamlanmasını bekleyin ve ardından Continue'yu (Devam) tıklayın.

Firebase projenize web uygulaması ekleyin

  1. Firebase projenizdeki Projeye Genel Bakış ekranına gidin ve ardından Web uygulamasını temsil eden açılış açılı açısı, eğik çizgi ve kapanış açılı açısı içeren bir simge Web'i tıklayın.Firebase konsolundaki Projeye Genel Bakış&#39;ın üst kısmındaki Web düğmesi
  2. Uygulama takma adı metin kutusuna My Compass Codelab App gibi akılda kalıcı bir uygulama takma adı girin. Bu codelab'in son adımında barındırma hizmeti isteğe bağlı olarak ayarlayacağınızdan, Firebase Hosting'i ayarlama onay kutusunu işaretlemeden bırakabilirsiniz.
    Web uygulamasını kaydetme
  3. Uygulamayı kaydet > Konsola devam et'i tıklayın.

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

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

Firebase Genkit ve Vertex AI'ı (ve bunların temel bulut hizmetlerini) kullanmak için Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planı kapsamında olması, yani bir Cloud Faturalandırma hesabına bağlı olması gerekir.

  • Cloud Billing hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
  • Firebase ve Google Cloud'u kullanmaya yeni başladıysanız 300 ABD doları kredi ve Ücretsiz Deneme Cloud Faturalandırma Hesabı için 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.

Vertex AI'ın fiyatlandırması hakkında daha fazla bilgi

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.

Cloud Firestore'u kurma

  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 değerini (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.
    Veritabanınıza Güvenlik Kuralları eklemeden bir uygulamayı herkese açık şekilde dağıtmayın veya kullanıma sunmayın.
  6. Oluştur'u tıklayın.

Vertex AI'ı etkinleştirme

Vertex AI'ı kurmak için gcloud CLI'yi kullanın. Bu sayfadaki tüm komutlar için YOUR_PROJECT_ID yerine Firebase projenizin kimliğini girdiğinizden emin olun.

  1. Terminalinizde, Google Cloud SDK için varsayılan projeyi ayarlayın:
    gcloud config set project YOUR_PROJECT_ID
    
  2. "UYARI: Etkin projeniz, yerel Uygulama Varsayılan Kimlik Bilgileri dosyanızdaki kota projesiyle eşleşmiyor. Bu durum, beklenmeyen kota sorunlarına neden olabilir." mesajını görüyorsanız kota projesini ayarlamak için aşağıdaki komutu çalıştırın:
    gcloud auth application-default set-quota-project YOUR_PROJECT_ID
    
  3. Projenizde Vertex AI hizmetini etkinleştirin:
    gcloud services enable aiplatform.googleapis.com
    

5. Web uygulamasını kurma

Web uygulamasını çalıştırmak için terminalinizde komut çalıştırmanız ve kod düzenleyicinize kod eklemeniz gerekir. Bu sayfadaki tüm komutlarda YOUR_PROJECT_ID yerine Firebase projenizin kimliğini yazdığınızdan emin olun.

Firebase CLI'ı projenizi hedefleyecek şekilde yapılandırın

  1. Terminalinizde, codelab projenizin kök dizinine gidin.
  2. Firebase CLI'nin Firebase projenize yönelik tüm komutları yürütmesini sağlamak için aşağıdaki komutu çalıştırın:
    firebase use YOUR_PROJECT_ID
    

Örnek verileri Firestore'a aktarma

Hemen işe koyulabilmeniz amacıyla bu codelab'de, Firestore için önceden oluşturulmuş örnek veriler sağlanmaktadır.

  1. Yerel kod tabanının normalde bir hizmet hesabı kullanacak kodu çalıştırmasına izin vermek için terminalinizde aşağıdaki komutu çalıştırın:
    gcloud auth application-default login
    
    Bu işlem tarayıcınızda yeni bir sekme açar. Önceki adımlarda kullandığınız Google Hesabı'nı kullanarak giriş yapın.
  2. Örnek Firestore verilerini içe aktarmak için aşağıdaki komutları çalıştırın:
    cd load-firestore-data
    npm ci
    node index.js YOUR_PROJECT_ID
    cd ..
    
  3. Firebase konsolunda Firebase projenizin Firestore bölümüne giderek verilerin veritabanınıza başarıyla eklendiğini doğrulayın.İçe aktarılan veri şeması ve içeriğini görürsünüz.Firebase konsolundaki pusula örnek verileri

Web uygulamanızı Firebase projenize bağlama

Web uygulamanızın kod tabanının, veritabanı gibi hizmetlerini kullanabilmesi için doğru Firebase projesiyle ilişkilendirilmesi gerekir. Bunun için Firebase yapılandırmanızı uygulamanızın kod tabanına eklemeniz gerekir. Bu yapılandırma; proje kimliğiniz, uygulamanızın API anahtarı ve uygulama kimliği gibi temel değerlerin yanı sıra uygulamanızın Firebase ile etkileşime geçmesini sağlayan diğer değerleri içerir.

  1. Uygulamanızın Firebase yapılandırmasını alın:
    1. Firebase konsolunda Firebase projenize gidin.
    2. Sol panelde Projeye Genel Bakış'ın yanındaki dişli simgesini tıklayın ve Proje ayarları'nı seçin.
    3. "Uygulamalarınız" kartında web uygulamanızı seçin.
    4. "SDK kurulumu ve yapılandırması" bölümünde Yapılandır'ı seçin.
    5. Snippet'i kopyalayın. const firebaseConfig ... ile başlar.
  2. Firebase yapılandırmanızı web uygulamanızın kod tabanına ekleyin:
    1. Kod düzenleyicinizde src/lib/genkit/genkit.config.ts dosyasını açın.
    2. İlgili bölümü 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 Hosting URL'sine gidin. Örneğin, çoğu durumda URL http://localhost:3000/ veya benzer bir URL'dir.

Pusula uygulaması ana ekranı

Compass, React Sunucu Bileşenleri kullanan bir Next.js uygulamasıdır ve bu, ana sayfasıdır.

Hayalimdeki seyahati bul'u tıklayın. Şu anda bazı sabit hedefler için bazı sabit kodlanmış verileri görüntülediğini görebilirsiniz:

Hayalimdeki geziyi bul ekranı

Dilediğiniz zaman keşfedebilirsiniz. Devam etmeye hazır olduğunuzda Ana Sayfa ana sayfa düğmesini (sağ üst köşede) tıklayın.

6. Genkit ile üretken yapay zekayı keşfedin

Artık uygulamanızda üretken yapay zekanın gücünden yararlanmaya hazırsınız. Codelab'in bu bölümünde, kullanıcı tarafından sağlanan ilhamlara göre varış noktaları öneren bir özelliğin uygulanmasında size yol gösterilecektir. Üretken modelin sağlayıcısı olarak Firebase Genkit ve Google Cloud'un Vertex AI'sını (Gemini'yi kullanacaksınız) kullanacaksınız.

Genkit, iz ve akış durumunu depolayabilir (Genkit akışlarını yürütmenin sonucunu incelemenize olanak tanır). Bu codelab'de, bu izleri depolamak için Firestore'u kullanacaksınız.

Bu codelab'deki son adımda Genkit uygulamanızı Firebase App Hosting'e dağıtacaksınız.

Genkit uygulamanızı Firebase projenize bağlama

Genkit'i başlatabilmeniz için öncelikle kod tabanınızın, sunduğu hizmetlerden (ör. veritabanı) kullanılabilmesi için doğru Firebase projesiyle ilişkilendirilmesi gerekir. Bunun için Firebase yapılandırmanızı Genkit uygulamanızın kod tabanına eklemeniz gerekir. Bu yapılandırma; proje kimliğiniz, uygulamanızın API anahtarı ve uygulama kimliği gibi temel değerlerin yanı sıra uygulamanızın Firebase ile etkileşime geçmesini sağlayan diğer değerleri içerir.

  1. Uygulamanızın Firebase yapılandırmasını alın:
    1. Firebase konsolunda Firebase projenize gidin.
    2. Sol panelde Projeye Genel Bakış'ın yanındaki dişli simgesini tıklayın ve Proje ayarları'nı seçin.
    3. "Uygulamalarınız" kartında web uygulamanızı seçin.
    4. "SDK kurulumu ve yapılandırması" bölümünde Yapılandır'ı seçin.
    5. Snippet'i kopyalayın. const firebaseConfig ... ile başlar.
  2. Uygulamanızın Firebase yapılandırmasını Genkit uygulamanızın kod tabanına ekleyin:
    1. Kod düzenleyicinizde genkit-functions/src/lib/genkit.config.ts dosyasını açın.
    2. İlgili bölümü kopyaladığınız kodla değiştirin.
    3. Dosyayı kaydedin.

Genkit geliştirici kullanıcı arayüzünü başlatma

Genkit, LLM&#39;ler, Genkit akışları, alıcılarla ve diğer yapay zeka bileşenleriyle etkileşim kurmanıza olanak tanıyan web tabanlı bir kullanıcı arayüzü ile birlikte gelir.

  1. Genkit Geliştirici Kullanıcı Arayüzünü başlatın:
    1. Yeni bir terminal penceresi açın.
    2. genkit-functions dizininizin köküne gidin.
    3. Genkit geliştirici kullanıcı arayüzünü başlatmak için aşağıdaki komutu çalıştırın:
      cd genkit-functions
      npx genkit start
      
  2. Tarayıcınızda yerel olarak barındırılan Genkit URL&#39;sine gidin. Çoğu durumda bu, http://localhost:4000/ şeklindedir.

Gemini ile etkileşim kurma

Artık desteklenen modellerden veya diğer yapay zeka bileşenlerinden (ör. istemler, alıcı ve Genkit akışları) herhangi biriyle etkileşimde bulunmak için Genkit&#39;in Geliştirici kullanıcı arayüzünü kullanabilirsiniz.

Örneğin, Gemini'dan tatil için tatil önermesini isteyebilirsiniz. Modelin davranışını belirli ihtiyaçlarınıza göre yönlendirmek için sistem talimatlarını nasıl kullanabileceğinizi öğrenin. Bu yöntem, sistem talimatlarını doğal olarak desteklemeyen modeller için de işe yarar.

Genkit geliştirici kullanıcı arayüzünde Gemini modeliyle etkileşim kurma

İstemleri yönetme

Firebase Genkit, üretken yapay zeka istemlerinizin oluşturulmasını ve yönetimini kolaylaştırmak için tasarlanmış bir eklenti ve metin biçimi olan Dotprompt'ı kullanıma sundu. Dotprompt'ın arkasındaki temel fikir, istemleri kod olarak ele almak ve bunları uygulama kodunuzla birlikte yazmanıza, sürdürmenize ve sürüm kontrolü yapmanıza olanak tanımaktır.

Dotprompt'ı kullanmak için bir hello-world ile başlayın:

  1. Kod düzenleyicinizde genkit-functions/prompts/1-hello-world.prompt dosyasını açın.
  2. Genkit geliştirici kullanıcı arayüzünde dotprompt/1-hello-world sayfasını açın.
  3. Bildiğiniz herhangi bir dil adını veya kodunu kullanın ya da boş dize olarak bırakın.
  4. Çalıştır'ı tıklayın.İsveççe bir karşılama mesajı oluşturmak için Dotprompt&#39;ı kullanma
  5. Birkaç farklı değer deneyin. Büyük dil modelleri, bunun gibi basit sorgulardaki kısaltılmış, yanlış yazılmış veya eksik istemleri anlama konusunda başarılıdır.

Çıkışınızı yapılandırılmış veri ile zenginleştirme

Genkit, düz metin oluşturmanın ötesinde, çıktınızı uygulamanızın kullanıcı arayüzünde daha iyi bir sunum ve entegrasyon için yapılandırmanıza olanak tanır. Şema tanımlayarak LLM'ye istediğiniz biçimle uyumlu yapılandırılmış veriler üretmesi talimatını verebilirsiniz.

Çıkış şemalarını keşfetme

Ayrıca bir LLM çağrısının çıkış şemasını da belirtebilirsiniz.

  1. Kod düzenleyicinizde, istem dosyasını inceleyin:
    1. dotprompt/2-simple-itinerary dosyasını açın.
    2. Tanımlanmış giriş ve çıkış şemalarını inceleyin.
  2. Kullanıcı arayüzüyle etkileşim kurun:
    1. Genkit geliştirici kullanıcı arayüzünde dotprompt/2-simple-itinerary bölümüne gidin.
    2. place ve interests alanlarını örnek verileriyle doldurarak giriş yapın:
      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      
    3. Çalıştır'ı tıklayın.

Çıkış şemasını belirtmek için Dotprompt&#39;ı kullanma

Şema odaklı çıkışı anlama

Oluşturulan çıktının tanımlanan şemaya nasıl uygun olduğuna dikkat edin. İstediğiniz yapıyı belirterek LLM'ye kolayca ayrıştırılan ve uygulamanıza entegre edilen veriler üretmesini talimat vermiş olursunuz. Genkit, çıkışı şemaya göre otomatik olarak doğrulayarak veri bütünlüğünü sağlar.

Ayrıca, Genkit'i, şemayla eşleşmeyen çıkışı yeniden deneyecek veya onarmaya çalışacak şekilde yapılandırabilirsiniz.

Çıkış şemalarının temel avantajları

  • Basitleştirilmiş entegrasyon: Yapılandırılmış verileri uygulamanızın kullanıcı arayüzü öğelerine kolayca dahil edin.
  • Veri doğrulaması: Oluşturulan çıktının doğruluğundan ve tutarlılığından emin olun.
  • Hata işleme: Şema uyuşmazlıklarını giderecek mekanizmalar uygulayın.

Çıkış şemalarından yararlanmak Genkit deneyiminizi geliştirerek daha zengin ve daha dinamik kullanıcı deneyimleri için özelleştirilmiş, yapılandırılmış veriler oluşturmanızı sağlar.

Çok modlu girişleri kullanın

Uygulamanızın, kullanıcılarınıza ilham veren resimlere göre kişiselleştirilmiş tatil yerleri önerdiğini hayal edin. Genkit, çok modlu üretken modelle birlikte bu vizyonu hayata geçirmenize yardımcı olur.

  1. Kod düzenleyicinizde, istem dosyasını inceleyin:
    1. genkit-functions/prompts/imgDescription.prompt dosyasını açın.
    2. İsteminize resim eklemenizi kolaylaştıran, tutma çubuğu söz dizimi öğesi olan {{media url=this}} öğesinin eklendiğini unutmayın.
  2. Kullanıcı arayüzüyle etkileşim kurma:
    1. Genkit Geliştirici kullanıcı arayüzünde dotprompt/imgDescription istemini açın.
    2. Bir resmin URL'sini yapıştırarak imageUrls alanına bir resim URL'si girin. Örneğin, Vikipedi'den Eyfel Kulesi'ni gösteren bir küçük resmi kullanabilirsiniz:
      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      
    3. Çalıştır'ı tıklayın.

7. Vektör benzerliği aramasıyla getirmeyi uygulama

Yapay zeka modelleriyle yaratıcı içerik üretmek etkileyici olsa da pratik uygulamalar genellikle çıktının belirli bir bağlama oturtulmasını gerektirir.

Bu codelab'de, varış noktaları (yerler ve etkinlikler) veritabanınız var ve Gemini modelinin oluşturduğu önerilerin yalnızca bu veritabanındaki girişlere referans vermesini sağlamayı amaçlıyorsunuz.

Yapılandırılmamış sorgular ile alakalı içerik arasındaki boşluğu kapatmak için, oluşturulan yerleştirmelerde vektör benzerliği aramasının gücünden yararlanabilirsiniz.

Yerleştirmeleri ve vektör benzerliğini anlama

  • Vektörler: Vektörler, veri noktalarının sayısal gösterimleridir ve genellikle metin veya görüntüler gibi karmaşık bilgileri modellemek için kullanılır. Bir vektördeki her boyut, verilerin belirli bir özelliğine karşılık gelir.
  • Yerleştirme Modelleri: Bu özel yapay zeka modelleri, metin gibi giriş verilerini yüksek boyutlu vektörlere dönüştürür. En etkileyici yönü, benzer girişlerin bu yüksek boyutlu alanda birbirine yakın vektörlerle eşlenmesidir.
  • Vektör Benzerliği Arama: Bu teknik, alakalı veri noktalarını belirlemek için gömme vektörlerinin yakınlığından yararlanır. Bir giriş sorgusu verildiğinde, veritabanında benzer yerleştirme vektörlerine sahip girişleri bulur ve bu da semantik alaka düzeyini gösterir.

Bilgi alma sürecinin nasıl işlediğini anlama

  1. Sorguyu yerleştirme: Kullanıcınızın girişi (ör. "Paris'te romantik akşam yemeği") bir yerleştirme modelinden geçirilerek sorgu vektörü oluşturulur.
  2. Veritabanı yerleştirmeleri: İdeal olarak, hedef veritabanınızı önceden işleyip her giriş için yerleştirme vektörleri oluşturmuş olmanız gerekir.
  3. Benzerlik hesaplaması: Sorgu vektörü, bir benzerlik metriği (ör. kosinüs benzerliği) kullanılarak veritabanındaki her yerleştirme vektörüyle karşılaştırılır.
  4. Getirme: Sorgu vektörüne olan yakınlıklarına göre veritabanındaki en benzer girişler alakalı öneriler olarak alınır.

Bu alma mekanizmasını uygulamanıza dahil ederek Gemini modelinden yararlanarak yalnızca yaratıcı değil, aynı zamanda belirli veri kümenize dayanan öneriler de üretirsiniz. Bu yaklaşım, oluşturulan çıktının içeriğe uygun ve veritabanınızdaki bilgilerle uyumlu olmasını sağlar.

Firestore'da vektör benzerliği aramasını etkinleştir

Bu codelab'in önceki adımında Firestore veritabanınızı örnek yerler ve etkinliklerle doldurdunuz. Her yer girişi, önemli özelliklerini açıklayan bir knownFor metin alanı ve bu açıklamanın vektör gösterimini içeren karşılık gelen bir embedding alanı içerir.

Bu gömmelerde vektör benzerliği aramasının gücünden yararlanmak için bir Firestore dizini oluşturmanız gerekir. Bu dizin, yerleştirme vektörlerinin belirli bir sorguyla benzerliğine dayalı olarak yerlerin verimli bir şekilde alınmasını sağlar.

  1. Terminalinizde en son alpha bileşenini yüklemek için aşağıdaki komutu çalıştırın. 2024.05.03 veya sonraki bir sürüme ihtiyacınız var:
    gcloud components install alpha
    
  2. YOUR_PROJECT_ID yerine projenizin kimliğini girerek dizini oluşturun.
    gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
    
  3. Genkit Geliştirici kullanıcı arayüzünde placesRetriever uygulamasını açın.
  4. Çalıştır'ı tıklayın. Alıcı mantığını uygulayacağınız yeri gösteren yer tutucu metinle iskeleli nesneyi gözlemleyin.
  5. Kod düzenleyicinizde genkit-functions/src/lib/placesRetriever.ts dosyasını açın.
  6. En alta kaydırın ve placesRetriever yer tutucusunu şununla değiştirin:
    export const placesRetriever = defineFirestoreRetriever({
      name: 'placesRetriever',
      firestore,
      collection: 'places',
      contentField: 'knownFor',
      vectorField: 'embedding',
      embedder: textEmbeddingGecko,
      distanceMeasure: 'COSINE',
    });
    

Alıcıyı test etme

  1. Genkit geliştirici kullanıcı arayüzünde placesRetriever alıcısını açın.
  2. Aşağıdaki Sorguyu girin:
    {
        "content": [
            {
                "text": "UNESCO"
            }
        ]
    }
    
  3. Seçenekler'i de belirtebilirsiniz. Örneğin, retriever'ın kaç doküman döndürmesi gerektiğini şu şekilde belirtebilirsiniz:
    {
        "limit": 4
    }
    
  4. Çalıştır'ı tıklayın.

Seçenekler'e where ifadeleri ekleyerek verilerde benzerliğin ötesinde ek filtrelemeler yapabilirsiniz.

8. Genkit ile almayla artırılmış üretim (RAG)

Önceki bölümlerde, metin, JSON ve resimleri işleyerek kullanıcılarınız için tatil yerleri ve ilgi çekici başka içerikler oluşturabilen bağımsız istemler oluşturdunuz. Ayrıca, Firestore veritabanınızdan ilgili hedefleri alan bir istem de uyguladınız. Şimdi bu bileşenleri tutarlı bir almayla artırılmış üretim (RAG) akışında düzenleyin.

Bu bölümde, akışlar adı verilen önemli bir Genkit kavramı tanıtılmaktadır. Akışlar, tam gözlemlenebilirlikle hem yerel hem de uzaktan çağrılabilecek güçlü şekilde yazılmış, aktarılabilir işlevlerdir. Akışları hem Genkit'in KSA'sından hem de Genkit Geliştirici kullanıcı arayüzünden yönetebilir ve çağırabilirsiniz.

  1. Kod düzenleyicinizde seyahat planı istemini inceleyin:
    1. genkit-functions/prompts/itineraryGen.prompt dosyasını açın.
    2. İstemin, özellikle de alıcıdan gelen etkinlikler verilerini, ek girişleri kabul edecek şekilde nasıl genişletildiğine dikkat edin.
  2. Genkit Geliştirici kullanıcı arayüzünde, genkit-functions/src/lib/itineraryFlow.ts dosyasında bir Genkit akışını görüntüleyin.
    İpucu: Hata ayıklama işlemini kolaylaştırmak için uzun akışları daha küçük ve yönetilebilir adımlara ayırabilirsiniz.
  3. "Resim açıklaması" adımı ekleyerek akışı iyileştirin:
    1. TODO: 2 yorumunu bulun (70. satır civarında). Bu, akışınızı iyileştireceğiniz noktadır.
    2. Boş imgDescription yer tutucusunu imgDescription istem çağrısı tarafından oluşturulan çıkışla değiştirin.
  4. Akışı test edin:
    1. itineraryFlow'a gidin.
    2. Yeni eklediğiniz adımla itineraryFlow işleminin başarılı bir şekilde yürütüldüğünü test etmek için aşağıdaki girişi kullanın:
      {
          "request": "Sightseeing in Paris",
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      
    3. Çalıştır'ı tıklayın.
    4. Oluşturulan çıkışı inceleyin. Resim açıklamasını seyahat planı önerisine dahil etmeniz gerekir.
  5. Hatalarla veya beklenmedik davranışlarla karşılaşırsanız ayrıntılar için İncele sekmesini kontrol edin. Bu sekmeyi, Trace Store'daki yürütme geçmişini incelemek için de kullanabilirsiniz.

Web uygulamanız için RAG

  1. Tarayıcınızda http://localhost:3000/ adresini ziyaret ederek web uygulamasının hâlâ çalıştığından emin olun.
  2. Web uygulaması artık çalışmıyorsa terminalinizde şu komutları çalıştırın:
    npm install
    npm run dev
    
  3. Hayalinizdeki Tatil web uygulaması sayfasını (http://localhost:3000/gemini) inceleyin.
  4. Next.js entegrasyon örneği için kaynak kodunu (src/app/gemini/page.tsx) görüntüleyin.

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

9. Uygulamanızı Firebase App Hosting ile dağıtma

Bu yolculuğun son adımı web uygulamanızı dağıtmaktır. Next.js ve Angular uygulamalarının sunucusuz bir arka uca dağıtımını basitleştirmek için tasarlanmış, çerçeveye duyarlı bir barındırma çözümü olan Firebase App Hosting'den yararlanacaksınız.

  1. Değişikliklerinizi yerel git deponuzda kaydedin ve ardından GitHub'a aktarın.
  2. Firebase konsolunda, Firebase projenizdeki Uygulama Barındırma bölümüne 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. Dağıtım ayarı > Kök dizin bölümündeki varsayılan değeri değiştirmeyin.
  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, compass).
  8. Firebase web uygulaması oluşturma veya ilişkilendirme seçeneği sunulur. Mevcut bir Firebase web uygulaması seçin'i belirleyin ve bu kod laboratuvarının önceki bir adımında oluşturduğunuz uygulamayı seçin.
  9. Finish and Deploy'u (Bitir ve Dağıt) tıklayın.

Dağıtım durumunu izleme

Dağıtım işlemi birkaç dakika sürer. İlerleme durumunu Firebase konsolunun Uygulama Barındırma bölümünde takip edebilirsiniz.

Hizmet hesabınıza izin verme

Node.js arka uç sunucunuzun Vertex AI kaynaklarına erişebilmesi için uygulamanızın hizmet hesabına aiplatform.user rolünü atamanız gerekir:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

İşlem tamamlandığında kullanıcılar web uygulamanıza erişebilir.

Otomatik yeniden dağıtım

Firebase App Hosting gelecekteki güncellemeleri basitleştirir. GitHub deponuzun ana dalında değişiklik yaptığınızda Firebase App Hosting, uygulamanızı otomatik olarak yeniden derleyip yeniden dağıtarak kullanıcılarınıza her zaman en yeni sürümü sunar.

10. Sonuç

Bu kapsamlı codelab'i tamamladığınız için tebrikler.

Firebase Genkit, Firestore ve Vertex AI'ın gücünden başarıyla yararlanarak kullanıcı tercihlerine ve ilham verici fikirlere göre kişiselleştirilmiş tatil önerileri oluşturan gelişmiş bir "akış" oluşturdunuz ve tüm bunları, önerileri uygulamanızın verilerine dayalı olarak topladınız.

Bu yolculuk boyunca, üretken yapay zeka uygulamaları oluşturmak için önemli olan temel yazılım mühendisliği kalıplarıyla ilgili uygulamalı deneyim kazandınız. Bu kalıplar arasında şunlar bulunur:

  • İstem yönetimi: Daha iyi ortak çalışma ve sürüm kontrolü için istemleri kod olarak düzenleme ve sürdürme.
  • Çoklu formatlı içerik: Yapay zeka etkileşimlerini iyileştirmek için resim ve metin gibi çeşitli veri türlerini entegre etme.
  • Giriş/Çıkış Şemaları: Uygulamanızda sorunsuz entegrasyon ve doğrulama için verileri yapılandırma.
  • Vektör Depoları: Benzerlik arama ve alakalı bilgilerin etkili bir şekilde alınması için vektör gömmelerinden yararlanır.
  • Veri Alma: Veritabanlarında bulunan verileri alıp yapay zeka tarafından oluşturulan içeriğe dahil etmek için mekanizmalar uygulama.
  • Almayla Artırılmış Üretim (RAG): Bağlamsal açıdan alakalı ve doğru sonuçlar elde etmek için alma tekniklerini üretken yapay zeka ile bir araya getirir.
  • Akış Enstrümantasyonu: Sorunsuz ve gözlemlenebilir yürütme için karmaşık yapay zeka iş akışları oluşturma ve düzenleme.

Bu kavramları öğrenerek ve Firebase ekosisteminde uygulayarak kendi üretken yapay zeka maceralarınıza atılmak için gereken tüm bilgilere sahip olursunuz. Uçsuz bucaksız olasılıkları keşfedin, yenilikçi uygulamalar oluşturun ve üretken yapay zekayla ulaşabileceğiniz sınırları zorlamaya devam edin.

Alternatif dağıtım seçeneklerini keşfetme

Genkit, aşağıdakiler de dahil olmak üzere özel ihtiyaçlarınıza uygun çeşitli dağıtım seçenekleri sunar:

(package.json) düğüm klasörünüzde aşağıdaki komutu çalıştırarak size en uygun seçeneği belirlemeniz yeterlidir:

npx genkit init

Sonraki adımlar