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.

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ştirilen bu araç, 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.

Neler öğreneceksiniz?

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

Gerekenler

  • Tercih ettiğiniz bir tarayıcı (ör. Google Chrome)
  • Kod düzenleyici ve terminal bulunan geliştirme ortamı
  • Firebase projenizin oluşturulması ve yönetilmesi için bir Google Hesabı

2. Web uygulamasını ve kullanılan bulut hizmetlerini inceleyin

Bu bölümde, bu codelab ile derlediğiniz 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 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 ile desteklenir:

  • Uygulama şu anda hedeflerin statik bir listesini görüntülemektedir. Bunu dinamik olacak şekilde değiştireceksiniz.
  • Marka bağlılığını artırmak için otomatik olarak doldurulan bir seyahat planı uygularsınız.

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 taşımak için Genkit'i kullanıyorsunuz.

Cloud Firestore

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

Google Cloud Vertex AI

Yapay zeka özelliklerinizi desteklemek için Vertex AI'ın temel modellerini (ör. Gemini) kullanıyorsunuz.

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ı ayarlama

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. Codelab'in az önce oluşturduğunuz GitHub deposunun yerel bir klonunu 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ı

*diğer 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 codelab'de belirtilen şekilde 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 geçebilirsiniz.
  2. Terminalinizde, Firebase'in veri toplamasını isteyip istemediğinize bağlı olarak Y veya N yazın. (iki seçenek de bu codelab'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 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 adımların tümü 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. Create a project'i (Proje oluştur) tıklayın ve 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 belirlemek 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, ardından Devam'ı tıklayın.
  5. Bu codelab 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 Bir web uygulamasını temsil eden; açılış köşeli parantezleri, eğik çizgi ve açılı ayraçların yer aldığı bir simge Web'i tıklayın.Firebase konsolundaki Projeye Genel Bakış bölümünü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 isteğe bağlı olarak barındırma hizmeti 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 faturalandırma planınızı yükseltin

Firebase Genkit ve Vertex AI'ı (ve bunların temel bulut hizmetlerini) kullanmak için, faturalandırmayı etkinleştirmek üzere Firebase projenizi yükseltmeniz gerekir.

Projenizin faturalandırma planını yükseltmek için aşağıdaki adımları uygulayın:

  1. Firebase projenizde Firebase Faturalandırma Planları'na gidin.
  2. Firebase faturalandırma planları iletişim kutusunda Blaze planını seçin ve satın alın.

Cloud Firestore'u etkinleştirin

  1. Derleme > Firestore Database'i kullanarak sol gezinme bölmesini kullanabilirsiniz.
  2. Create database'i (Veritabanı oluştur) tıklayın.
  3. Veritabanı Kimliği değerini (default) olarak bırakın.
  4. Tercih ettiğiniz Cloud Firestore konumunu seçin (veya varsayılan konum olarak bırakın).
  5. İleri'yi tıklayın.
  6. Test modunda başlat'ı seçin.
  7. Oluştur'u tıklayın.

Vertex AI'ı etkinleştir

Vertex AI'ı ayarlamak için gcloud KSA'yı 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
    
  4. Hizmet hesabınıza izinler verin:
    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"
    

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 komutlar için YOUR_PROJECT_ID yerine Firebase projenizin kimliğini girdiğinizden 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 aktarın

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
    
    Bunu yaptığınızda tarayıcınızda yeni bir sekme açılır. Ö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 konsolunda pusula örnek verileri

Web uygulamanızı Firebase projenize bağlama

Web uygulamanızın hizmetlerinden (ör. veritabanı) kullanılabilmesi için uygulamanızın kod tabanının 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 taraftaki panelde Projeye Genel Bakış'ın yanındaki dişli simgesini tıklayın ve Proje ayarları'nı seçin.
    3. "Uygulamalarınız" bölümünde kartında web uygulamanızı seçin.
    4. "SDK kurulumu ve yapılandırması" bölümünde 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 önizleyin

  1. Terminalinizde bağımlılıkları yükleyin, 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 http://localhost:3000/ veya benzer bir URL olur.

Pusula uygulaması ana ekranı

Pusula, React Server Bileşenleri'ni kullanan bir Next.js uygulamasıdır ve ana sayfadır.

Hayalimdeki seyahati bul'u tıklayın. Şu anda bazı sabit hedefler için bazı sabit kodlu verilerin görüntülendiğ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 zekanın ayrıntılarını öğrenin

Artık uygulamanızda üretken yapay zekanın gücünden yararlanmaya hazırsınız. Codelab'in bu bölümü, kullanıcı tarafından sağlanan ilham kaynaklarına göre varış noktaları öneren bir özelliği uygulama konusunda size yol gösterecektir. Üretken modelin sağlayıcısı olarak Firebase Genkit'i ve Google Cloud'un Vertex AI'ını kullanacaksınız (Gemini'ı 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, hizmetlerinden (ö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 taraftaki panelde Projeye Genel Bakış'ın yanındaki dişli simgesini tıklayın ve Proje ayarları'nı seçin.
    3. "Uygulamalarınız" bölümünde kartında web uygulamanızı seçin.
    4. "SDK kurulumu ve yapılandırması" bölümünde bölümünde Yapılandırma'yı 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; büyük dil modelleri, Genkit akışları, alıcılar ve diğer yapay zeka bileşenleri ile etkileşim kurmanıza olanak tanıyan web tabanlı bir kullanıcı arayüzüne sahiptir.

  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'sine gidin. Çoğu durumda bu, http://localhost:4000/ şeklindedir.

Gemini ile etkileşime geçin

Artık Genkit'in geliştirici kullanıcı arayüzünü kullanarak desteklenen modellerle veya istemler, retriever'lar ve Genkit akışları gibi diğer yapay zeka bileşenleriyle etkileşim kurabilirsiniz.

Ö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 not edin. Bu, sistem talimatlarını yerel olarak desteklemeyen modeller için de geçerlidir.

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önetilmesini kolaylaştırmak için tasarlanmış bir eklenti ve metin biçimi olan Dotprompt'ı kullanıma sunar. 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ış verilerle zenginleştirin

Genkit, düz metin oluşturmanın yanı sıra çıktınızı uygulamanızın kullanıcı arayüzünde gelişmiş sunum ve entegrasyon için yapılandırmanıza da 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

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ımlanan giriş ve çıkış şemalarını inceleyin.
  2. Kullanıcı arayüzüyle etkileşim kurun:
    1. Genkit Developer kullanıcı arayüzünde dotprompt/2-simple-itinerary bölümüne gidin.
    2. place ve interests alanlarını örnek verilerle doldurarak giriş sağlayın:
      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      
    3. Çalıştır'ı tıklayın.

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

Şemaya dayalı çıkışı anlama

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

Ayrıca, Genkit'i yeniden deneyecek veya şemayla eşleşmezse çıkışı 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ğrulama: Oluşturulan çıktının doğruluğunu ve tutarlılığını sağlayın.
  • 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 kurun:
    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 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 alma özelliğini uygulama

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

Bu codelab'de destinasyonlardan (yerler ve etkinlikler) oluşan bir veritabanınız vardır ve Gemini modelinin sunduğu önerilerin yalnızca bu veritabanındaki girişlere referans verdiğinden emin olmayı amaçlar.

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.
  • Model Yerleştirme: Bu özel yapay zeka modelleri, metin gibi giriş verilerini yüksek boyutlu vektörlere dönüştürür. İşin ilginç tarafı, benzer girişlerin, bu yüksek boyutlu uzayda birbirine yakın olan vektörlerle eşlenmesi.
  • Vektör Benzerliği Araması: Bu teknikte, alakalı veri noktalarını belirlemek için vektör yerleştirme yakınlığı kullanılır. Bir giriş sorgusunda, veritabanındaki benzer yerleştirme vektörlerine sahip girişleri bulur ve anlamsal alaka düzeyini gösterir.

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

  1. Sorguyu yerleştirme: Kullanıcınızın girdisi (örneğin, "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 (örneğin, kosinüs benzerliği) kullanılarak veritabanındaki her bir yerleştirme vektörü ile karşılaştırılır.
  4. Alma: Sorgu vektörüne 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 bağlamsal olarak alakalı ve veritabanınızdaki bilgilerle uyumlu kalması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, kendine özgü özelliklerini açıklayan bir knownFor metin alanı ile birlikte, bu açıklamanın vektör gösterimini içeren karşılık gelen bir embedding alanı içerir.

Bu yerleştirilmiş öğelerde 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 belirten yer tutucu metinle iskeletli 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',
    });
    

Retriever'ı test etme

  1. Genkit Developer kullanıcı arayüzünde placesRetriever retriever'ı açın.
  2. Aşağıdaki Sorguyu girin:
    {
        "content": [
            {
                "text": "UNESCO"
            }
        ]
    }
    
  3. Seçenekler de sunabilirsiniz. Örneğin, alıcını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 artırılmış nesil (RAG) alma

Ö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 sıra bu bileşenleri uyumlu almalı bir artırılmış nesil (RAG) akışı içinde düzenlemeye geldi.

Bu bölümde, akışlar adı verilen önemli bir Genkit kavramı tanıtılmaktadır. Akışlar, tam gözlemlenebilirlikle hem yerel olarak hem de uzaktan çağrılabilen, güçlü bir şekilde yazılan, akışa uygun 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ündeki genkit-functions/src/lib/itineraryFlow.ts dosyasında Genkit akışını görüntüleyin.
    İpucu: Hata ayıklamayı kolaylaştırmak için uzun akışları daha küçük ve yönetilebilir adımlara bölebilirsiniz.
  3. "Resim açıklaması" ekleyerek akışı iyileştirin adım:
    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 adresine 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. Dream Your Tatil web uygulaması sayfasına (http://localhost:3000/gemini) göz atın.
  4. Next.js entegrasyon örneği için kaynak kodunu (src/app/gemini/page.tsx) görüntüleyin.

1e626124e09e04e9.png b059decb53c249a1.png e31f6acf87a98cb2.png 19c0c9459d5e1601.png

9. Uygulamanızı Firebase App Hosting ile dağıtın

Bu yolculuğun son adımı web uygulamanızın dağıtımıdı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'ı tıklayın > GitHub'a bağlanın.
  4. GitHub hesabınızı ve Repository'i seçin. İleri'yi tıklayın.
  5. Dağıtım ayarı > Kök dizin, varsayılan değeri koruyun.
  6. Live Bra (Canlı dal) için GitHub deponuzun main (ana) dalını seçin. İleri'yi tıklayın.
  7. Arka ucunuz için bir kimlik girin (örneğin, compass).
  8. Firebase web uygulaması oluşturma veya ilişkilendirme ile ilgili sorulduğunda Mevcut bir Firebase web uygulamasını seçin'i belirleyin ve bu codelab'in önceki adımlarından birinde 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. İş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 gelişmiş bir "akış" oluşturdunuz kullanıcı tercihlerine ve ilham kaynaklarına göre kişiselleştirilmiş tatil önerileri oluşturur.

Bu yolculuk boyunca, güçlü üretken yapay zeka uygulamaları derlemek için son derece önemli olan temel yazılım mühendisliği kalıpları konusunda uygulamalı deneyim kazandınız. Bu kalıplar şunları içerir:

  • İstem yönetimi: Daha iyi ortak çalışma ve sürüm kontrolü için istemleri kod olarak düzenleme ve sürdürme.
  • Çok modlu içerik: Yapay zeka etkileşimlerini iyileştirmek için resimler ve metinler 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 Mağazaları: Verimli benzerlik araması yapmak ve alakalı bilgileri almak için vektör yerleştirmelerden yararlanma.
  • Veri Alma: Veritabanlarındaki verileri getirip yapay zeka tarafından üretilen içeriğe dahil etmek için mekanizmalar uygulama.
  • Alma ile artırılmış oluşturma (RAG): Bağlamsal olarak alakalı ve doğru çıktılar için alma tekniklerini üretken yapay zeka ile birleştirme.
  • Akış Enstrümanı: Sorunsuz ve gözlemlenebilir yürütme için karmaşık AI iş akışları oluşturma ve düzenleme.

Bu kavramları iyice öğrenip Firebase ekosisteminde uygulayarak üretken yapay zekayla ilgili maceralara atılın. 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, belirli ihtiyaçlarınıza uygun çeşitli dağıtım seçenekleri sunar. Bunlardan bazıları:

(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