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 oluşturmanıza, dağıtmanıza ve izlemenize yardımcı olan açık kaynaklı bir çerçevedir.

Genkit, güçlü yapay zeka özelliklerini tanıdık kalıplar ve paradigmalarla uygulamalarınıza kolayca entegre etmenize yardımcı olmak için uygulama geliştiriciler için tasarlanmıştır. Firebase ekibi tarafından geliştirilen bu araç, dünya genelinde milyonlarca geliştirici tarafından kullanılan araçları oluşturma konusundaki deneyimimizden yararlanı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ıma ve entegrasyona 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 projenizi oluşturmak ve yönetmek 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ı bir uygulamanın kod tabanında çalışacaksınız. Kullanıcılar bir varış noktası seçebilir, varış noktasındaki etkinliklere göz atabilir ve seyahatleri için bir 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 hizmetini ve özelliğini kullanacaksınız. Bu hizmetler ve özellikler için 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.

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 App Hosting

İsteğe bağlı olarak, dinamik Next.js web uygulamanızı (GitHub deposuna bağlı) yayınlamak 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ğ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-ai-genkit-rag adresindeki şablonumuzu kullanarak yeni bir depo oluşturun65ef006167d600ab.png
  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şturmayı tercih etmiyorsanız:

GitHub deposunu zip dosyası olarak indirin.

Klasör yapısını inceleme

Yerel makinenizde klonlanmış deposu bulun ve klasör yapısını inceleyin:

Klasör

Açıklama

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ı 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 daha yeni 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 Firebase'e giriş yapın:
    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 kullanılabilir)
  3. Tarayıcınızda Google Hesabınızı seçin ve İzin ver'i tıklayın.

Google Cloud'un gcloud CLI'sini yükleme

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

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ç hizmeti de etkinleştireceksiniz.

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

Firebase projesi oluşturma

  1. Önceki adımda kullandığınız Google Hesabı ile 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). 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 projenize web uygulaması ekleme

  1. Firebase projenizdeki Projeye Genel Bakış ekranına gidin ve ardından Web uygulamasını temsil eden açılış açılış köşeli parantezleri, eğik çizgi ve kapanış açılış köşeli parantezleri 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 kod laboratuvarının son adımında isteğe bağlı olarak bir barındırma hizmeti ayarlayacağınız için Firebase Hosting ayarlama onay kutusunu işaretli bırakabilirsiniz.
    Web uygulamasını kaydetme
  3. Uygulamayı kaydet > Konsola devam et'i tıklayın.

Güzel! Yeni Firebase projenize bir web uygulaması kaydettiniz.

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

Firebase Genkit ve Vertex AI'ı (ve temel bulut hizmetlerini) kullanmak için Firebase projenizin kullan-öde (Blaze) fiyatlandırma planında olması gerekir. Yani projeniz bir Cloud Billing 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.

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.

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.
    Veritabanınıza Güvenlik Kuralları eklemedenbir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
  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 komutlarda YOUR_PROJECT_ID yerine Firebase projenizin kimliğini yazdığınızdan 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 beklenmedik kota sorunlarına neden olabilir." mesajını görürseniz 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ı ayarlama

Web uygulamasını çalıştırmak için terminalinizde komutlar ç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'yi projenizi hedefleyecek şekilde yapılandırma

  1. Terminalinizde, codelab projenizin kök dizinine gidin.
  2. Firebase CLI'nin tüm komutları Firebase projeniz üzerinde 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

Bu codelab'de, hızlı bir başlangıç yapabilmeniz için 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ı ile 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ını 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. Bunu yapmak 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şim kurmasını sağlayan diğer değerleri içerir.

  1. Uygulamanızın Firebase yapılandırmasını edinin:
    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ırma'yı 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:next
    
  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.

Pusula uygulamasının 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 seyahat ekranını bulma

Dilediğiniz zaman bu sayfayı inceleyebilirsiniz. Devam etmeye hazır olduğunuzda sağ üst köşedeki Ana Sayfa ana sayfa düğmesini 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.

Genkit, izleme ve akış durumunu saklayabilir (bu sayede Genkit akışlarının yürütülmesinin sonucunu inceleyebilirsiniz). Bu codelab'de, bu izlemeleri depolamak için Firestore'u kullanacaksınız.

Bu codelab'in son adımında, Genkit uygulamanızı Firebase App Hosting'e dağıtacaksınız.

Genkit uygulamanızı Firebase projenize bağlama

Önceki adımda src/lib/genkit/genkit.config.ts öğesini düzenleyerek Genkit'i projenize zaten bağladık.

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

Genkit, LLM'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.

Terminalinizde şu komutu çalıştırın:

npm run dev:genkit

Tarayıcınızda yerel olarak barındırılan Genkit URL'sine gidin. Çoğu durumda bu URL 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'in Geliştirici kullanıcı arayüzünü kullanabilirsiniz.

Örneğin, Gemini'den tatil önerisi istemeyi deneyin. 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 temel fikri, istemleri kod olarak ele almaktır. Bu sayede, uygulama kodunuzla birlikte istemleri yazıp bakımını yapabilir ve sürüm kontrolünü yapabilirsiniz.

Dotprompt'ı kullanmak için "Merhaba Dünya" ile başlayın:

  1. Kod düzenleyicinizde prompts/1-hello-world.prompt dosyasını açın.
  2. Genkit geliştirici kullanıcı arayüzünde prompts/1-hello-world öğesini açın.
  3. Aşina olduğunuz herhangi bir dil adını veya kodunu kullanın ya da alanı boş 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, bu 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. Bir şema tanımlayarak LLM'ye istediğiniz biçime uygun yapılandırılmış veriler üretmesini talimat 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. prompts/2-simple-itinerary.prompt dosyasını açın.
    2. Tanımlanmış giriş ve çıkış şemalarını inceleyin.
  2. Kullanıcı arayüzüyle etkileşim kurma:
    1. Genkit geliştirici kullanıcı arayüzünde prompts/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 uyduğunu fark 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ı gidermek için mekanizmalar uygulayın.

Çıkış şemalarından yararlanmak, Genkit deneyiminizi iyileştirir ve daha zengin ve dinamik kullanıcı deneyimleri için özelleştirilmiş, yapılandırılmış veriler oluşturmanıza olanak tanır.

Çok modlu girişten yararlanma

Uygulamanızın, kullanıcılarınızın ilham verici bulduğu resimlere göre kişiselleştirilmiş tatil destinasyonları önerdiğini hayal edin. Genkit, çok formatlı bir üretken modelle birlikte bu vizyonu hayata geçirmenize olanak tanır.

  1. Kod düzenleyicinizde istem dosyasını inceleyin:
    1. prompts/imgDescription.prompt dosyasını açın.
    2. Resimlerinizi isteminize eklemeyi kolaylaştıran bir Handlebars söz dizimi öğesi olan {{media url=this}}'ün dahil edildiğine dikkat edin.
  2. Kullanıcı arayüzüyle etkileşim kurma:
    1. Genkit geliştirici kullanıcı arayüzünde prompts/imgDescription istemini açın.
    2. Bir resmin URL'sini yapıştırarak imageUrls alanına bir resim URL'si girin. Örneğin, Wikipedia'dan Eyfel Kulesi'ni gösteren bir küçük resim 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 doldurmak için oluşturulan yerleştirmelerde vektör benzerliği arama özelliğinden yararlanabilirsiniz.

Yerleştirmeleri ve vektör benzerliğini anlama

  • Vektörler: Vektörler, genellikle metin veya resim gibi karmaşık bilgileri modellemek için kullanılan veri noktalarının sayısal gösterimlerinden oluşur. 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.

Alma sürecinin işleyiş şeklini 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, her giriş için yerleştirme vektörleri oluşturarak hedef veritabanınızı önceden işlemiş olursunuz.
  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. Alma: Sorgu vektörüne olan yakınlıklarına göre veritabanındaki en benzer girişler alakalı öneriler olarak alınır.

Bu getirme mekanizmasını uygulamanıza dahil ederek, hem yaratıcı hem de belirli veri kümenize dayalı öneriler oluşturmak için Gemini modelinden yararlanabilirsiniz. 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ştirme

Bu kod laboratuvarının önceki bir 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, yer imleme vektörlerinin belirli bir sorguyla olan benzerliğine göre yerlerin verimli bir şekilde alınmasını sağlar.

  1. En son alpha bileşenini yüklemek için terminalinizde aşağıdaki komutu çalıştırın. 2024.05.03 veya sonraki bir sürüme ihtiyacınız vardır:
    gcloud components install alpha
    
  2. YOUR_PROJECT_ID yerine projenizin kimliğini yazarak dizini oluşturun.
    gcloud firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'
    
  3. Genkit geliştirici kullanıcı arayüzünde retrievers/placesRetriever öğesini açın.
  4. Çalıştır'ı tıklayın. Yer tutucu metin içeren iskelet nesneyi inceleyin. Bu metin, alıcı mantığını nerede uygulayacağınızı belirtir.
  5. Kod düzenleyicinizde src/lib/genkit/placesRetriever.ts dosyasını açın.
  6. Sayfayı en alta kaydırın ve placesRetriever yer tutucusunu aşağıdakiyle 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 retrievers/placesRetriever alıcısını açın.
  2. Aşağıdaki sorguyu sağlayın:
    {
        "content": [
            {
                "text": "UNESCO"
            }
        ]
    }
    
  3. Seçenekler'i de belirtebilirsiniz. Örneğin, alıcı aracının kaç belge döndüreceğini nasıl belirteceğiniz aşağıda açıklanmıştır:
    {
        "limit": 4
    }
    
  4. Çalıştır'ı tıklayın.

Seçenekler'e where yan tümceleri ekleyerek verilerde benzerlik dışında ek filtreleme yapabilirsiniz.

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

Önceki bölümlerde, metin, JSON ve resimleri işleyebilen, kullanıcılarınız için tatil destinasyonları ve ilgi çekici diğer içerikler oluşturan bağımsız istemler oluşturdunuz. Ayrıca, Firestore veritabanınızdan alakalı 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 adlı ö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. prompts/itineraryGen.prompt dosyasını açın.
    2. İstem, özellikle de alıcıdan alınan etkinlikler verilerini kabul edecek şekilde genişletilmiştir.
  2. Genkit Geliştirici kullanıcı arayüzünde, src/lib/genkit/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 (81. satırın civarında). Bu, akışınızı geliştireceğiniz noktayı gösterir.
    2. Boş imgDescription yer tutucusunu, imgDescription istem çağrısı tarafından oluşturulan çıktıyla değiştirin.
  4. Akışları test edin:
    1. flows/itineraryFlow'a gidin.
    2. Yeni eklenen adımınızla itineraryFlow işlevinin başarılı ş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. Bu çıkışta, resim açıklaması seyahat planı önerisine dahil edilmelidir.
  5. Herhangi bir hatayla veya beklenmedik bir davranışla karşılaşırsanız ayrıntılar için İncele sekmesini kontrol edin. Trace Store'daki yürütme geçmişini incelemek için de bu sekmeyi 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 deponuza kaydedin ve ardından GitHub'a aktarın.
  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 varsayılan değeri bırakın.
  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. Sonlandır 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 web uygulamanız kullanıcıların erişimine açılır.

Otomatik yeniden dağıtım

Firebase App Hosting, gelecekteki güncellemeleri kolaylaştırır. GitHub deponuzun ana dalına değişiklik aktardığınızda Firebase App Hosting, uygulamanızı otomatik olarak yeniden oluşturur ve dağıtır. Böylece kullanıcılarınız her zaman en son sürümü deneyimleyebilir.

10. Sonuç

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

Kullanıcı tercihlerine ve ilham kaynaklarına göre kişiselleştirilmiş tatil önerileri oluşturan ve önerileri uygulamanızın verilerine dayandıran sofistike bir "akış" oluşturmak için Firebase Genkit, Firestore ve Vertex AI'ın gücünden başarıyla yararlandınız.

Bu yolculuk boyunca, sağlam ü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 birleştirir.
  • 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. Üretken yapay zekanın sunduğu sınırsız olasılıkları keşfedin, yenilikçi uygulamalar oluşturun ve üretken yapay zekayla neler yapabileceğinizin sınırlarını zorlamaya devam edin.

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

Genkit, aşağıdakiler gibi ö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 sizin için en uygun olanı seçmeniz yeterlidir:

npx genkit init

Sonraki adımlar