Firebase Uzantıları ile yapay zeka destekli web uygulamaları oluşturun

1. Başlamadan önce

Bu codelab'de Firebase Uzantıları ile ilgi çekici kullanıcı deneyimleri sağlayan yapay zeka destekli web uygulamalarının nasıl oluşturulacağını öğreneceksiniz.

Önkoşullar

• Node.js ve JavaScript bilgisi

Ne öğreneceksin

• Dil ve video girişini işlemek için AI ile ilgili Uzantılar nasıl kullanılır?
• Uzantılar arasında bir ardışık düzen oluşturmak için Firebase için Cloud Functions nasıl kullanılır?
• Uzantılar tarafından üretilen çıktıya erişmek için JavaScript nasıl kullanılır?

İhtiyacınız olan şey

• Google Chrome gibi seçtiğiniz bir tarayıcı
• Kod düzenleyicisi ve terminali olan bir geliştirme ortamı
• Firebase projenizin oluşturulması ve yönetilmesi için bir Google Hesabı

2. Web uygulamalarını ve Firebase hizmetlerini inceleyin

Bu bölümde, bu codelab'de oluşturacağınız web uygulamaları ve bunları oluşturmak için hangi Firebase'i kullanacağınız açıklanmaktadır.

Uygulamayı inceleyin

Bir tişört şirketi, tişörtlerinden biri hakkındaki uzun incelemelerden bunalmış durumda ve genel derecelendirmesinden emin değil. Tamamlanan Reviewly web uygulaması her incelemeyi özetler, her inceleme için bir yıldız derecelendirmesi sağlar ve her incelemeyi ürün için genel bir derecelendirme çıkarmak için kullanır. Kullanıcılar ayrıca orijinal incelemeyi görmek için özetlenen her incelemeyi genişletebilir.

Sohbet robotu uygulaması

Bir okulun öğretim kadrosu, genel konularla ilgili tekrarlanan sorulardan bunalıyor, bu nedenle yanıtları otomatikleştirmek istiyorlar. Tamamlanan Chatbot uygulaması, öğrencilere büyük bir dil modeli (LLM) tarafından desteklenen ve genel konularla ilgili soruları yanıtlayabilen bir konuşma sohbet robotu sağlar. Chatbot'un tarihsel bir bağlamı var, dolayısıyla verdiği yanıtlar, öğrencilerin aynı konuşmada sorduğu önceki soruları da hesaba katabilir.

Video İpucu uygulaması

Bir devlet dairesi, erişilebilirliği artırmak için videolarının sesli açıklamalar içermesini istiyor, ancak açıklama eklenecek yüzlerce video var ve kolaylaştırılmış bir yaklaşıma ihtiyaç duyuyorlar. Tamamlanan Video İpucu uygulaması, departmanın etkinliğini değerlendirmek için inceleyeceği bir prototiptir.

Video İpucu uygulamasında kullanılan uzantılar şunlardır:

• Cloud Video AI uzantısıyla Videoları Etiketleyin — Depolamaya yüklenen her videodan etiketleri çıkarın.
• PaLM API uzantılı Dil Görevleri — etiketleri bir metin açıklamasında özetleyin.
• Metni Konuşmaya Dönüştür uzantısı — videonun açıklamasının sesli versiyonunu oluşturun.

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

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

1. Terminalinizde Node.js v20.0.0 veya üzerinin yüklü olduğunu doğrulayın:

   node -v
   

2. Node.js v20.0.0 veya üzeri sürüme sahip değilseniz, indirip yükleyin .

Depoyu indirin

1. Git yüklüyse codelab'in GitHub deposunu kopyalayın:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. Git yüklü değilse GitHub deposunu zip dosyası olarak indirin .

Klasör yapısını gözden geçirin

Yerel makinenizde klonlanmış depoyu bulun ve klasör yapısını inceleyin. Aşağıdaki tabloda klasörler ve açıklamaları yer almaktadır:

Her klasör, basitleştirilmiş talimatları kullanarak ilgili web uygulamasını çalıştırmak için hızlı bir başlangıç ​​sunan bir readme.md dosyası içerir. Ancak, ilk kez öğreniyorsanız bu codelab'i tamamlamalısınız çünkü en kapsamlı talimatları içermektedir.

Kodu, bu codelab'de belirtildiği şekilde doğru bir şekilde uygulayıp uygulamadığınızdan emin değilseniz, ilgili uygulamaların çözüm kodunu reviewly-end , chatbot-end ve video-hint-end klasörlerinde bulabilirsiniz.

Firebase CLI'yi yükleyin

Firebase CLI'nin yüklü olduğunu ve v12.5.4 veya üzeri olduğunu doğrulamak için aşağıdaki komutu çalıştırın:

firebase --version

• Firebase CLI yüklüyse ancak v12.5.4 veya üzeri değilse güncelleyin:

  npm update -g firebase-tools
  

• Firebase CLI yüklü değilse şunu yükleyin:

  npm install -g firebase-tools
  

İzin hataları nedeniyle Firebase CLI'yi 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 ai-extensions-codelab klasörüne gidin ve Firebase'de oturum açın:

   cd ai-extensions-codelab
   firebase login
   

2. Terminaliniz Firebase'de zaten oturum açtığınızı söylüyorsa bu codelab'in Firebase projenizi ayarlayın bölümüne ilerleyin.
3. Firebase'in veri toplamasını isteyip istemediğinize bağlı olarak Y veya N girin.
4. Tarayıcınızda Google hesabınızı seçin ve ardından İzin Ver 'i tıklayın.

4. Firebase projenizi kurun

Bu bölümde bir Firebase projesi oluşturacak ve onunla bir Firebase web uygulamasını ilişkilendireceksiniz. Ayrıca örnek web uygulamaları tarafından kullanılan Firebase hizmetlerini de etkinleştireceksiniz.

Firebase projesi oluşturma

1. Firebase konsolunda Proje oluştur'u tıklayın.
2. Proje adınızı girin metin kutusuna AI Extensions Codelab (veya seçtiğiniz bir proje adını) girin ve ardından Devam'a tıklayın.
3. Bu codelab için Google Analytics'e ihtiyacınız olmadığından Bu proje için Google Analytics'i etkinleştir seçeneğini devre dışı bırakın.
4. Proje oluştur'u tıklayın.
5. Projenizin sağlanmasını bekleyin ve ardından Devam'a tıklayın.
6. Firebase projenizde Proje Ayarları'na gidin. Daha sonra ihtiyacınız olacağı için proje kimliğinizi not edin. Bu benzersiz tanımlayıcı, projenizin nasıl tanımlandığını gösterir (örneğin, Firebase CLI'de).

Firebase hizmet hesabını indirin

Bu codelab'de oluşturacağınız web uygulamalarından bazıları, Next.js ile sunucu tarafı oluşturmayı kullanır.

Node.js için Firebase Yönetici SDK'sı, Güvenlik Kurallarının sunucu tarafı kodundan işlevsel olmasını sağlamak için kullanılır. API'leri Firebase Admin'de kullanmak için Firebase konsolundan bir Firebase hizmet hesabı indirmeniz gerekir.

1. Firebase konsolunda Proje ayarlarınızdaki Hizmet Hesapları sayfasına gidin.
2. Yeni özel anahtar oluştur > Anahtar Oluştur'u tıklayın.
3. Dosya dosya sisteminize indirildikten sonra o dosyanın tam yolunu alın.
   Örneğin, dosyayı İndirilenler klasörünüze indirdiyseniz tam yol şu şekilde görünebilir: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. Terminalinizde GOOGLE_APPLICATION_CREDENTIALS ortam değişkenini indirdiğiniz özel anahtarınızın yoluna ayarlayın. Unix ortamında komut şu şekilde görünebilir:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. Yeni bir terminal oturumu başlatırsanız ortam değişkeniniz kaybolabileceğinden, bu terminali açık tutun ve bu codelab'in geri kalanında kullanın.
   Yeni bir terminal oturumu açarsanız önceki komutu yeniden çalıştırmanız gerekir.

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

Cloud Functions ve Firebase Extensions'ı kullanmak için Firebase projenizin Blaze fiyatlandırma planında olması gerekir; bu, bir Cloud Billing hesabıyla ilişkili olduğu anlamına gelir.

• Bulut Faturalandırma hesabı, kredi kartı gibi bir ödeme yöntemi gerektirir.
• Firebase ve Google Cloud'da yeniyseniz 300 ABD doları tutarında krediye ve Ücretsiz Deneme Bulut Faturalandırma hesabına uygun olup olmadığınızı kontrol edin.

Ancak bu codelab'in tamamlanmasının herhangi bir gerçek ücrete tabi olmaması gerektiğini unutmayın.

Projenizi Blaze planına yükseltmek için şu adımları izleyin:

1. Firebase konsolunda planınızı yükseltmeyi seçin.
2. İletişim kutusunda Blaze planını seçin ve ardından projenizi bir Bulut Faturalandırma hesabıyla ilişkilendirmek için ekrandaki talimatları izleyin.
   Bulut Faturalandırma hesabı oluşturmanız gerekiyorsa yükseltme işlemini tamamlamak için Firebase konsolundaki yükseltme akışına geri dönmeniz gerekebilir.

Firebase konsolunda Firebase hizmetlerini kurma

Bu bölümde, bu codelab'deki web uygulamaları tarafından kullanılan çeşitli Firebase hizmetlerini sağlayacak ve kuracaksınız. Bu hizmetlerin tamamının her web uygulamasında kullanılmadığını ancak tüm bu hizmetlerin şu anda ayarlanmasının, bu codelab üzerinde çalışmak için kolaylık sağladığını unutmayın.

Kimlik Doğrulamayı Ayarla

Kimlik Doğrulamayı hem Chatbot uygulaması hem de Video İpucu uygulamasıyla kullanacaksınız. Ancak gerçek bir uygulama geliştiriyorsanız her uygulamanın kendi Firebase projesine sahip olması gerektiğini unutmayın.

1. Firebase konsolunda Kimlik Doğrulama'ya gidin.
2. Başlayın'ı tıklayın.
3. Ek sağlayıcılar sütununda Google > Etkinleştir'i tıklayın.

4. Proje için herkese açık ad metin kutusuna My AI Extensions Codelab gibi unutulmaz bir ad girin.
5. Proje için destek e-postası açılır menüsünden e-posta adresinizi seçin.
6. Kaydet'i tıklayın.
   

Cloud Firestore'u kurun

Firestore'u her üç uygulamayla da kullanacaksınız. Ancak gerçek bir uygulama geliştiriyorsanız her uygulamanın kendi Firebase projesine sahip olması gerektiğini unutmayın.

1. Firebase konsolunda Firestore'a gidin.
2. Veritabanı oluştur > Test modunda başlat > İleri'ye tıklayın.
   Bu codelab'in ilerleyen bölümlerinde verilerinizin güvenliğini sağlamak için Güvenlik Kuralları ekleyeceksiniz. Veritabanınız için Güvenlik Kuralları eklemeden bir uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın .
3. Varsayılan konumu kullanın veya istediğiniz bir konumu seçin.
   Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmek istersiniz. Bu konumun daha sonra değiştirilemeyeceğini ve aynı zamanda otomatik olarak varsayılan Cloud Storage paketinizin konumu olacağını unutmayın (sonraki adım).
4. Bitti'yi tıklayın.

Firebase için Cloud Storage'ı kurma

Cloud Storage'ı Video İpucu uygulamasıyla birlikte kullanacak ve Metni Konuşmaya Dönüştür uzantısını (codelab'in bir sonraki adımı) deneyeceksiniz.

1. Firebase konsolunda Depolama'ya gidin.
2. Başlarken > Test modunda başlat > İleri'yi tıklayın.
   Bu codelab'in ilerleyen bölümlerinde verilerinizin güvenliğini sağlamak için Güvenlik Kuralları ekleyeceksiniz. Depolama grubunuz için Güvenlik Kuralları eklemeden bir uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın .
3. Paketinizin konumu zaten seçilmiş olmalıdır (önceki adımda Firestore kurulumu nedeniyle).
4. Bitti'yi tıklayın.

Bu codelab'in sonraki bölümlerinde, üç farklı web uygulamasının çalışmasını sağlamak için bu codelab'deki her örnek uygulamanın uzantılarını yükleyecek ve kod tabanlarını değiştireceksiniz.

5. Reviewly uygulaması için "PaLM API ile Dil Görevleri" uzantısını ayarlayın

Dil Görevlerini PaLM API uzantısıyla yükleyin

1. PaLM API uzantısıyla Dil Görevleri'ne gidin.
2. Firebase konsolunda Yükle'yi tıklayın.
3. Firebase projenizi seçin.
4. Etkinleştirilen API'leri ve oluşturulan kaynakları inceleyin bölümünde, size önerilen hizmetlerin yanındaki Etkinleştir'e tıklayın:

5. İleri > İleri'ye tıklayın.
6. Koleksiyon yolu metin kutusuna bot yazın.
7. Bilgi İstemi metin kutusuna girin.
8. Değişken alanlar metin kutusuna input yazın.
9. Yanıt alanı metin kutusuna text girin.
10. Cloud Functions konumu açılır menüsünden Iowa'yı (us-central1) veya daha önce Firestore ve Cloud Storage için seçtiğiniz konumu seçin.
11. Dil modeli açılır menüsünden text-bison-001 öğesini seçin.
12. Diğer tüm değerleri varsayılan olarak bırakın.
13. Uzantıyı yükle'ye tıklayın ve uzantının yüklenmesini bekleyin.

PaLM API uzantısıyla Dil Görevlerini deneyin

Bu codelab'in amacı, bir web uygulaması aracılığıyla Dil Görevleri ile PaLM API uzantısıyla etkileşim kurmak olsa da, Firebase konsolunu kullanarak uzantıyı tetikleyerek uzantının nasıl çalıştığını anlamak faydalı olacaktır. Uzantı, bot koleksiyonuna bir Cloud Firestore belgesi eklendiğinde tetiklenir.

Firebase konsolunu kullanarak uzantının nasıl çalıştığını görmek için şu adımları izleyin:

1. Firebase konsolunda Firestore'a gidin.
2. bot koleksiyonunda, tıklayın Belge ekle .
3. Belge Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
4. Alan metin kutusuna input girin.
5. Değer metin kutusuna Tell me about the moon yazın.
6. Kaydet'e tıklayın ve birkaç saniye bekleyin. bot koleksiyonundaki belgeniz artık sorgunuza bir yanıt içeriyor.

6. Firebase'i kullanmak için Reviewy uygulamasını kurun

Reviewly uygulamasını çalıştırmak için uygulamanızın kodunu ve Firebase CLI'yi Firebase projenizle etkileşim kuracak şekilde ayarlamanız gerekir.

Firebase hizmetlerini ve yapılandırmasını uygulamanızın koduna ekleyin

Firebase'i kullanmak için uygulamanızın kod tabanının, kullanmak istediğiniz hizmetlere ilişkin Firebase SDK'larına ve bu SDK'lara hangi Firebase projesinin kullanılacağını bildiren Firebase yapılandırmasına ihtiyacı vardır.

Bu codelab'in örnek uygulaması, SDK'lar için gerekli tüm içe aktarma ve başlatma kodlarını zaten içermektedir (bkz reviewly-start/js/reviews.js ), dolayısıyla bunları eklemenize gerek yoktur. Ancak örnek uygulamada yalnızca Firebase yapılandırması için yer tutucu değerler bulunur (bkz reviewly-start/js/firebase-config.js ), dolayısıyla uygulamanıza yönelik benzersiz Firebase yapılandırma değerlerini almak için uygulamanızı Firebase projenize kaydetmeniz gerekir.

1. Firebase konsolunda, Firebase projenizde Projeye genel bakış bölümüne gidin ve ardından Ağ .
   
2. Uygulama takma adı metin kutusuna My Reviewly app gibi unutulmaz bir uygulama takma adı girin.
3. Bu uygulama için Firebase Hosting'i de kur onay kutusunu işaretlemeyin . Bu adımları daha sonra codelab'de gerçekleştireceksiniz.
4. Uygulamayı kaydet'i tıklayın.
5. Konsol, Firebase SDK'sını uygulamaya özel bir Firebase yapılandırma nesnesiyle eklemek ve başlatmak için bir kod pasajı görüntüler. Firebase yapılandırma nesnesindeki tüm özellikleri kopyalayın.
6. Kod düzenleyicinizde reviewly-start/js/firebase-config.js dosyasını açın.
7. Yer tutucu değerlerini az önce kopyaladığınız değerlerle değiştirin. Firebase hizmetlerine yönelik, Reviewly uygulamasında kullanmadığınız özelliklere ve değerlere sahip olmanız sorun değil.
8. Dosya 'yı kaydet.
9. Firebase konsoluna döndüğünüzde Konsola devam et 'i tıklayın.

Terminalinizi, Firebase projenizde Firebase CLI komutlarını çalıştıracak şekilde ayarlayın

1. Terminalinizde daha önce indirdiğiniz ai-extensions-codelab klasörüne gidin.
2. reviewly-start web uygulaması klasörüne gidin:

   cd reviewly-start
   

3. Firebase CLI'nin belirli bir Firebase projesine karşı komutları çalıştırmasını sağlayın:

   firebase use YOUR_PROJECT_ID
   

Reviewly web uygulamasını çalıştırın ve görüntüleyin

Web uygulamasını çalıştırmak ve görüntülemek için şu adımları izleyin:

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

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. Tarayıcınızda terminalinizde gösterilen URL'ye gidin. Örneğin: http://localhost:8080 .

Sayfa yüklenmelidir ancak çeşitli özelliklerin eksik olduğunu fark edeceksiniz. Bunları bu codelab'in sonraki adımlarında ekleyeceğiz.

7. Reviewy uygulamasına işlevsellik ekleyin

Bu codelab'in son adımında Reviewly uygulamasını yerel olarak çalıştırdınız ancak uygulamanın pek fazla işlevi yoktu ve yüklü uzantıyı henüz kullanmamıştı. Codelab'in bu adımında bu işlevi ekleyecek ve uzantıyı tetiklemek için web uygulamasını kullanacaksınız.

Güvenlik Kurallarını Dağıtın

Bu codelab'in örnek uygulaması, Firestore ve Firebase için Cloud Storage'a yönelik Güvenlik Kuralları kümelerini içerir. Bu Güvenlik Kurallarını Firebase projenize dağıttıktan sonra veritabanınızdaki ve grubunuzdaki veriler kötüye kullanıma karşı daha iyi korunur.

Bu kuralları firestore.rules ve storage.rules dosyalarında görüntüleyebilirsiniz.

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

   firebase deploy --only firestore:rules,storage
   

2. "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" sorulursa , Evet'i seçin.

Uzantıyı tetiklemek için uygulamanın kodunu güncelleyin

Reviewly uygulamasında, Firestore'a eklenen yeni bir inceleme, incelemeyi özetlemek için uzantıyı tetikler.

1. Kod düzenleyicinizde, functions/add-mock-reviews.js dosyasını açın.
2. reviewWithPrompt değişkenini, dil modelinin daha kısa bir inceleme yapmasını isteyen aşağıdaki kodla değiştirin.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. reviewWithPrompt değişkeninden sonra, reviewDocument değişkenini aşağıdaki kodla değiştirin; bu, Firestore'a eklenebilmesi için bir inceleme belgesi oluşturur.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. Dosya 'yı kaydet.
5. Insert code below, to import your Firebase Callable Cloud Function js/reviews.js dosyasında aşağıdaki Ekle kodundan sonra, Firebase HTTP çağrılabilir işlevinizi httpsCallable yardımcısıyla içe aktarın:

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Insert code below, to invoke your Firebase Callable Cloud Function Firebase HTTP çağrılabilir işlevinizi çağırın:

   await addMockReviews();
   

7. Dosya 'yı kaydet.

Yeni incelemeler eklemek için bir işlev dağıtın

Reviewly web uygulaması, incelemeleri eklemek için bir Bulut İşlevi kullanır. Ancak şu anda Bulut İşlevi konuşlandırılmıyor.

İşlevinizi Firebase CLI ile dağıtmak için şu adımları izleyin:

1. Terminalinizde hâlâ reviewly-start klasöründeyken sunucuyu durdurmak için Control+C tuşlarına basın.
2. İşlevinizi dağıtın:

   firebase deploy --only functions
   

3. Permission denied while using the Eventarc Service Agent veya benzeri bir hata görürseniz, birkaç dakika bekleyin ve ardından komutu yeniden deneyin.

Cloud Functions ile ilk özel işlevinizi dağıttınız. Firebase konsolu, Firebase projenize dağıttığınız tüm işlevleri görebileceğiniz bir kontrol paneli sunar.

Reviewly web uygulamasını tekrar çalıştırın ve görüntüleyin (artık işlevsellik var)

Artık işlevsel olan web uygulamasını çalıştırmak ve görüntülemek için şu adımları izleyin:

1. Terminalinizde sunucuyu tekrar çalıştırın:

   npm run dev
   

2. Tarayıcınızda terminalinizde gösterilen URL'ye gidin. Örneğin: http://localhost:8080 .
3. Uygulamada, Sahte incelemeler ekle'yi tıklayın ve birkaç uzun incelemenin görünmesi için birkaç saniye bekleyin.
   Arka planda, PaLM API uzantılı Dil Görevleri, yeni incelemeyi temsil eden yeni belgeye tepki verir. Daha önce eklediğiniz bilgi istemi, dil modelinden daha kısa bir özet ister.
4. İncelemenin tamamını ve inceleme için kullanılan istemi görüntülemek için incelemelerden birine tıklayın ve ardından PaLM istemini göster öğesini seçin.

8. Chatbot uygulaması için "PaLM API'li Chatbot" uzantısını kurun

Chatbot'u PaLM API uzantısıyla yükleyin

1. PaLM API uzantılı Chatbot'a gidin.
2. Firebase konsolunda Yükle'yi tıklayın.
3. Firebase projenizi seçin.
4. Uzantıyı yapılandır bölümüne ulaşana kadar İleri > İleri > İleri'yi tıklayın.
5. Koleksiyon yolu metin kutusuna, users/{uid}/discussion/{discussionId}/messages girin.
6. Cloud Functions konumu açılır menüsünden Iowa'yı (us-central1) veya daha önce Firestore ve Cloud Storage için seçtiğiniz konumu seçin.
7. Dil modeli açılır menüsünden chat-bison'u seçin.
8. Diğer tüm değerleri varsayılan olarak bırakın.
9. Uzantıyı yükle'ye tıklayın ve uzantının yüklenmesini bekleyin.

PaLM API uzantılı Chatbot'u deneyin

Bu codelab'in amacı bir web uygulaması aracılığıyla Chatbot with PaLM API uzantısıyla etkileşim kurmak olsa da, Firebase konsolunu kullanarak uzantıyı tetikleyerek uzantının nasıl çalıştığını anlamak faydalı olacaktır. Uzantı users/{uid}/discussion/{discussionId}/messages koleksiyonunda bir Cloud Firestore belgesi oluşturulduğunda tetiklenir.

1. Firebase konsolunda Firestore'a gidin.
2. Tıklamak Koleksiyonu başlatın .
   1. Koleksiyon Kimliği metin kutusuna, users girin ve ardından İleri'ye tıklayın.
   2. Belge Kimliği metin kutusunda Otomatik Kimlik'e ve ardından Kaydet'e tıklayın.
3. users koleksiyonunda, tıklayın Koleksiyonu başlatın .
   
   1. Koleksiyon Kimliği metin kutusuna discussion girin ve ardından İleri'ye tıklayın.
   2. Belge Kimliği metin kutusunda Otomatik Kimlik'e ve ardından Kaydet'e tıklayın.
4. discussion koleksiyonunda, Koleksiyonu başlatın .
   
   1. Koleksiyon Kimliği metin kutusuna messages girin ve ardından İleri'ye tıklayın.
   2. Belge Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
   3. Alan metin kutusuna prompt yazın.
   4. Değer metin kutusuna Bana Tell me 5 random fruits .
   5. Kaydet'e tıklayın ve birkaç saniye bekleyin. messages koleksiyonu artık sorgunuzun yanıtını içeren bir belge içeriyor.

5. messages koleksiyonunda, Belge ekle .
   1. Belge Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
   2. Alan metin kutusuna prompt yazın.
   3. Değer metin kutusuna And now, vegetables yazın.
   4. Kaydet'e tıklayın ve birkaç saniye bekleyin. messages koleksiyonu artık sorgunuzun yanıtını içeren bir belge içeriyor.

9. Firebase'i kullanmak için Chatbot uygulamasını kurun

Chatbot uygulamasını çalıştırmak için uygulamanızın kodunu ve Firebase CLI'yi Firebase projenizle etkileşim kuracak şekilde ayarlamanız gerekir.

Firebase hizmetlerini ve yapılandırmasını uygulamanızın koduna ekleyin

Firebase'i kullanmak için uygulamanızın kod tabanının, kullanmak istediğiniz hizmetlere ilişkin Firebase SDK'larına ve bu SDK'lara hangi Firebase projesinin kullanılacağını bildiren Firebase yapılandırmasına ihtiyacı vardır.

Bu codelab'in örnek uygulaması, SDK'lar için gerekli tüm içe aktarma ve başlatma kodlarını zaten içermektedir (bkz. chatbot-start/lib/firebase/firebase.js ), dolayısıyla bunları eklemenize gerek yoktur. Ancak örnek uygulamada yalnızca Firebase yapılandırması için yer tutucu değerler bulunur (bkz chatbot-start/lib/firebase/firebase-config.js ), dolayısıyla benzersiz Firebase yapılandırma değerlerini almak için uygulamanızı Firebase projenize kaydetmeniz gerekir. uygulama.

1. Firebase konsolunda, Firebase projenizde Projeye genel bakış bölümüne gidin ve ardından Web'e gidin (veya projeye zaten bir uygulama kaydettiyseniz Uygulama ekle'ye tıklayın).
2. Uygulama takma adı metin kutusuna, My Chatbot app gibi unutulmaz bir uygulama takma adı girin.
3. Bu uygulama için Firebase Hosting'i de kur onay kutusunu işaretlemeyin . Bu adımları daha sonra codelab'de gerçekleştireceksiniz.
4. Uygulamayı kaydet'i tıklayın.
5. Konsol, Firebase SDK'sını uygulamaya özel bir Firebase yapılandırma nesnesiyle eklemek ve başlatmak için bir kod pasajı görüntüler. Firebase yapılandırma nesnesindeki tüm özellikleri kopyalayın.
6. Kod düzenleyicinizde chatbot-start/lib/firebase/firebase-config.js dosyasını açın.
7. Yer tutucu değerlerini az önce kopyaladığınız değerlerle değiştirin. Firebase hizmetlerine yönelik, Chatbot uygulamasında kullanmadığınız özelliklere ve değerlere sahipseniz bunda bir sakınca yoktur.
8. Dosya 'yı kaydet.
9. Firebase konsoluna döndüğünüzde Konsola devam et 'i tıklayın.

Terminalinizi, Firebase projenizde Firebase CLI komutlarını çalıştıracak şekilde ayarlayın

1. Sunucunun önceki web uygulamasını çalıştırmasını durdurmak için terminalinizde Control+C tuşlarına basın.
2. Terminalinizde chatbot-start web uygulaması klasörüne gidin:

   cd ../chatbot-start
   

3. Firebase CLI'nin belirli bir Firebase projesine karşı komutları çalıştırmasını sağlayın:

   firebase use YOUR_PROJECT_ID
   

Çerçeve uyumlu Firebase Hosting'i kullanmak için uygulamanızın kod tabanını ayarlayın

Bu codelab, Chatbot web uygulamasıyla Barındırma (önizleme) içeren web çerçevelerini kullanır.

1. Terminalinizde Firebase Hosting ile web çerçevelerini etkinleştirin:

   firebase experiments:enable webframeworks
   

2. Firebase Hosting'i başlatın:

   firebase init hosting
   

3. codebase in your current directory, should we use this? Detected an existing Next.js kod tabanı algılandı mesajı görüntülendiğinde bunu kullanmalı mıyız? , Y tuşuna basın.
4. Varsa In which region would you like to host server-side content, if applicable? , varsayılan bölgeyi veya önceden Firestore ve Cloud Storage için seçtiğiniz konumu seçin ve ardından Enter tuşuna basın (veya macOS'ta return ).
5. Set up automatic builds and deploys with GitHub? sorusu sorulduğunda , N basın.

Chatbot web uygulamasını çalıştırın ve görüntüleyin

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

   npm install
   firebase emulators:start --only hosting
   

2. Tarayıcınızda yerel olarak barındırılan Barındırma URL'sine gidin. Çoğu durumda http://localhost:5000/ veya benzeri bir şeydir.

Sayfa yüklenmelidir ancak çeşitli özelliklerin eksik olduğunu fark edeceksiniz. Bunları bu codelab'in sonraki adımlarında ekleyeceğiz.

Web uygulamasını çalıştırmayla ilgili sorunları giderme

Web sayfasında şu şekilde başlayan hatayı görürseniz: Error: Firebase session cookie has incorrect... , localhost ortamınızdaki tüm çerezlerinizi silmeniz gerekir. Bunu yapmak için çerezleri silme | Geliştirici Araçları Belgeleri. .

10. Chatbot uygulamasına işlevsellik ekleyin

Bu codelab'in son adımında, Chatbot uygulamasını yerel olarak çalıştırdınız ancak uygulamanın pek fazla işlevi yoktu ve yüklü uzantıyı henüz kullanmamıştı. Codelab'in bu adımında bu işlevi ekleyecek ve uzantıyı tetiklemek için web uygulamasını kullanacaksınız.

Güvenlik Kurallarını Dağıtın

Bu codelab'in örnek uygulaması, Firestore ve Firebase için Cloud Storage'a yönelik Güvenlik Kuralları kümelerini içerir. Bu Güvenlik Kurallarını Firebase projenize dağıttıktan sonra veritabanınızdaki ve grubunuzdaki veriler kötüye kullanıma karşı daha iyi korunur.

Bu kuralları firestore.rules ve storage.rules dosyalarında görüntüleyebilirsiniz.

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

   firebase deploy --only firestore:rules,storage
   

2. "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" sorulursa , Evet'i seçin.

Cloud Firestore'a mesaj eklemek için kodu güncelleyin

Chatbot uygulamasında, bir kullanıcıdan gelen yeni bir mesaj Firestore'a eklenir ve bu, uzantının bir yanıt oluşturmasını tetikler.

1. Kod düzenleyicinizde lib/firebase/firestore.js dosyasını açın.
2. Dosyanın sonuna doğru, yeni mesajların eklenmesini sağlayan addNewMessage işlevini bulun.
   İşlev zaten aşağıdaki nesne özelliklerini alıyor:
   

   Parametre	Tanım
   userId	Oturum açan kullanıcının kimliği
   discussionId	İletinin eklendiği tartışma kimliği
   message	Mesaj metni içeriği
   db	Bir Firestore veritabanı örneği

   Bu değişkenler hazır olduğunda yeni mesajı temsil edecek bir Cloud Firestore belgesi ekleyebilirsiniz.
3. addNewMessage fonksiyonunun gövdesinde // Insert your code below ⬇️ yorumundan sonra şu kodu ekleyin:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

İletileri almak üzere bir sorgu oluşturmak için kodu güncelleyin

1. Hala lib/firebase/firestore.js dosyasında, users/{uid}/discussion/{discussionId}/messages toplama yolunda depolanan mesajları bulan bir Cloud Firestore sorgusu döndürmesi gereken getMessagesQuery işlevini bulun.
2. getMessagesQuery işlevinin tamamını aşağıdaki kodla değiştirin:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Cloud Firestore mesaj belgelerini işlemek için kodu güncelleyin

1. Hala lib/firebase/firestore.js dosyasında, tek bir mesajı temsil eden Cloud Firestore belgesini handleMessageDoc işlevini bulun.
   Bu işlevin, verileri Chatbot uygulamasının kullanıcı arayüzüne uygun olacak şekilde biçimlendirmesi ve yapılandırması gerekir.
2. handleMessageDoc işlevinin tamamını aşağıdaki kodla değiştirin:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. Dosya 'yı kaydet.

Chatbot web uygulamasını tekrar çalıştırın ve görüntüleyin (artık işlevsellik var)

Artık işlevsel olan web uygulamasını çalıştırmak ve görüntülemek için şu adımları izleyin:

1. Tarayıcınızda Chatbot web uygulamasını içeren sekmeye dönün ve sayfayı yeniden yükleyin.
2. Google ile Oturum Aç'ı tıklayın.
3. Gerekirse Google hesabınızı seçin.
4. Giriş yaptıktan sonra sayfayı yeniden yükleyin.
5. Mesajınızı girin metin kutusuna Tell me about space gibi bir mesaj girin.
6. Gönder'e tıklayın ve Chatbot web uygulamasının yanıt vermesi için birkaç saniye bekleyin.

Chatbot with PaLM API eklentisinin bir diğer avantajı da konuşma geçmişidir.

Tarihsel bağlamla iletişim kurma becerisinin bir örneğini görmek için şu adımları izleyin:

1. Mesajınızı girin metin kutusuna, What are five random fruits? gibi bir soru sorun. .
2. İletinizi girin metin kutusunda, önceki soruyla ilgili bir takip sorusu sorun: And what about vegetables? .

Chatbot web uygulaması tarihsel bilgilerle yanıt verir. Son sorunuz beş rastgele sebze belirtmemiş olsa da, PaLM API uzantılı Chatbot, takip eden soruları anlıyor.

11. Video İpucu uygulaması için "Metni Konuşmaya Dönüştür" uzantısını ayarlayın

Dönüştürme metni konuşma uzantısına yükleyin

1. Metni konuşma uzantısına dönüştürün .
2. Firebase konsoluna yükleyin .
3. Firebase projenizi seçin.
4. Sonrakine tıkla .
5. İnceleme API'leri Etkin ve Kaynaklar Oluşturulan Bölümde, size önerilen hizmetlerin yanındaki etkinleştirmeyi tıklayın:

6. İleri tıklayın ve ardından size önerilen izinlerin yanındaki Grant'i seçin.

7. Sonrakine tıkla .
8. Koleksiyon Yolu Metin Kutusuna bot girin.
9. Depolama Yolu metin kutusuna tts girin.
10. Varsayılan seçenekleri olarak diğer tüm değerleri bırakın.
11. Uzantıyı yükleyin ve uzantının yüklenmesini bekleyin.

Metni Konuşma Uzantısına Dönüştürün

Bu codelab'ın amacı, bir web uygulaması aracılığıyla metni konuşma uzantısına dönüştürmekle etkileşim kurmak olsa da, uzantının Firebase konsolunu kullanarak uzantıyı tetikleyerek nasıl çalıştığını anlamak yararlıdır. bot koleksiyonunda bir bulut firestore belgesi oluşturulduğunda uzantı tetiklenir.

Uzantının Firebase konsolunu kullanarak nasıl çalıştığını görmek için şu adımları izleyin:

1. Firebase konsolunda Firestore'a gidin
2. Tıklamak Koleksiyona başlayın .
3. Koleksiyon Kimliği metin kutusuna bot girin.
4. Sonrakine tıkla .

5. Belge Kimliği Metin Kutusu'nda Otomatik ID'yi tıklatın.
6. Alan metin kutusuna text girin.
7. Değer metin kutusuna, The quick brown fox jumps over the lazy dog .
8. Kaydet'i tıklayın.

Oluşturduğunuz MP3 dosyasını görmek ve duymak için şu adımları izleyin:

1. Firebase konsolunda depolamaya gidin.
2. Dosya yükleyebileceğiniz bölmede, gs:// Value'dan sonra kova adınızı not edin. Bu, bu proje için varsayılan kovanızın adıdır. Bu codelab boyunca çeşitli görevlerde buna ihtiyacınız var.

3. Google Bulut Konsolu'nda bulut depolama alanına gidin.
4. Projenizi seçin.
   Projenizi son projeler listesinde görmüyorsanız, projenizi proje seçicisinde bulmak için proje seçin.

5. Varsayılan depolama kovanızı seçin.
6. tts/ klasöre gidin.
7. MP3 dosyasını tıklayın.
8. MP3 dosyasının sonunda tıklayın ve metninizin konuşmaya dönüştürüldüğüne dikkat edin.

12. Video İpucu Uygulaması için "Bulut Video AI ile Etiket Videoları" uzantısı kurun

Etiket videolarını bulut video AI uzantısıyla yükleyin

1. Bulut Video AI uzantısı ile etiket videolarına gidin.
2. Firebase konsoluna yükleyin .
3. Firebase projenizi seçin.
4. Uzatma Yapılandırma bölümüne ulaşana kadar İleri> İleri> İleri'yi tıklayın.
5. Bulut işlevleri konumu açılır menüsünden, desteklenen bir konum seçin (daha önce Firestore ve Bulut Depolama için seçtiğiniz konum veya en yakın olan yer). Desteklenen konumlar için, AnnotateVideoRequest location_id bölümüne bakın.
6. Model açılır menüsünden en son seçin.
7. Sabit kamera açılır menüsünden hayır seçin.
8. Diğer tüm değerleri varsayılan olarak bırakın.
9. Uzantıyı yükleyin ve uzantının yüklenmesini bekleyin.

Cloud Video AI uzantısıyla etiket videolarını deneyin

Bu codelab'ın amacı, bir web uygulaması aracılığıyla bulut video AI uzantısı ile etiket videolarıyla etkileşim kurmak olsa da, uzantının Firebase konsolunu kullanarak uzantıyı tetikleyerek nasıl çalıştığını anlamak yararlıdır. Uzatma, depolama kovanıza bir video dosyası yüklendiğinde tetiklenir.

Uzantının Firebase konsolunu kullanarak nasıl çalıştığını görmek için şu adımları izleyin:

1. Firebase projenizde depolamaya gidin > Klasör oluşturun .
2. Klasör adı metin kutusuna video_annotation_input girin.

3. Klasör Ekle'yi tıklayın.
4. video_annotation_input klasöründe dosyayı yükle tıklayın.
5. Daha önce klonladığınız veya indirdiğiniz ai-extensions-codelab/video-hint-start/public/videos klasöründe, ilk video dosyasını seçin.
6. Tarayıcınıza geri dönün, Google Bulut Konsolunda bulut depolama alanına gidin.
7. Daha önce belirttiğiniz varsayılan depolama kovanızı seçin.
8. video_annotation_output klasörünü tıklayın.
   video_annotation_output klasörünü görmüyorsanız, birkaç saniye bekleyin ve sayfayı yenileyin, çünkü Video Zekası API'sı hala videoyu işliyor olabilir.

9. Daha önce yüklediğiniz dosyaya benzer bir adı izleyen bir JSON dosyası var.
10. Tıklamak Dosya adını indirin .
11. İndirilen JSON dosyasını kod düzenleyicinize açın. Yüklediğiniz videonun algılanan etiketlerini içeren Video İstihbarat API'sinden ham çıktı içerir.

13. Firebase kullanmak için video ipucu uygulamasını ayarlayın

Video ipucu uygulamasını çalıştırmak için, Firebase projenizle etkileşim kurmak için uygulamanızın kodunu ve Firebase CLI'sini ayarlamanız gerekir.

Uygulamanızın koduna Firebase Hizmetleri ve Yapılandırması ekleyin

Firebase'i kullanmak için, uygulamanızın kod tabanının, kullanmak istediğiniz hizmetler için Firebase SDK'larına ve bu SDK'lara hangi Firebase projesinin kullanılacağını söyleyen Firebase yapılandırmasına ihtiyacı vardır.

Bu Codelab'ın örnek uygulaması zaten SDK'lar için gerekli tüm içe aktarma ve başlatma kodunu içerir (bkz video-hint-start/lib/firebase/firebase.js ), böylece bunları eklemeniz gerekmez. Bununla birlikte, örnek uygulamanın yalnızca Firebase yapılandırması için yer tutucu değerleri vardır (bkz video-hint-start/lib/firebase/firebase-config.js ), bu nedenle benzersiz Firebase Yapılandırma Değerleri almak için uygulamanızı Firebase Projenizle kaydetmeniz gerekir. Uygulamanız için.

1. Firebase konsolunda, Firebase projenizde projeye genel bakışta gidin ve ardından tıklayın Web (veya proje ile bir uygulama kaydettiyseniz Uygulama Ekle'yi tıklayın).
2. Uygulama takma adı metin kutusuna, My Video Hint app gibi unutulmaz bir uygulama takma ad girin.
3. Bu uygulama onay kutusu için Firebase barındırma da ayarlayın . Bu adımları daha sonra Codelab'da yapacaksınız.
4. Uygulamayı kaydet'i tıklayın.
5. Konsol, Firebase SDK'yı uygulamaya özgü bir Firebase yapılandırma nesnesiyle eklemek ve başlatmak için bir kod snippet'i görüntüler. Firebase yapılandırma nesnesindeki tüm özellikleri kopyalayın.
6. Kod Düzenleyicinizde video-hint-start/lib/firebase/firebase-config.js dosyasını açın.
7. Yer tutucu değerlerini yeni kopyaladığınız değerlerle değiştirin. Video ipucu uygulamasında kullanmadığınız Firebase hizmetleri için özellikleriniz ve değerleriniz varsa sorun değil.
8. Dosya 'yı kaydet.
9. Firebase konsoluna geri dönün, konsola devam et'i tıklayın.

Firebase projenize karşı Firebase CLI komutlarını çalıştırmak için terminalinizi ayarlayın

1. Terminalinizde, sunucunun önceki web uygulamasını çalıştırmasını önlemek için Control+C tuşuna basın.
2. Terminalinizde, video-hint-start Web Uygulaması klasörüne gidin:

   cd ../video-hint-start
   

3. Firebase CLI'nin belirli bir Firebase projesine karşı komutlarını yapın:

   firebase use YOUR_PROJECT_ID
   

Framework-Firebase Hosting'i kullanmak için uygulamanızın kod tabanını ayarlayın

Bu codelab , video ipucu web uygulamasıyla barındırma (önizleme) ile web çerçevelerini kullanır.

1. Terminalinizde, Firebase Barındırma:

   firebase experiments:enable webframeworks
   

   ile web çerçevelerini etkinleştirin
2. Firebase Hosting'i başlatın:

   firebase init hosting
   

3. codebase in your current directory, should we use this? Detected an existing Next.js kod tabanıyla tespit edildiğinde, bunu kullanmalı mıyız? , Y'ye basın.
4. In which region would you like to host server-side content, if applicable? , Firestore ve Cloud depolama için daha önce seçtiğiniz varsayılan bölgeyi veya daha önce seçtiğiniz konumu seçin ve ardından Enter (veya MacOS'a return ) tuşuna basın.
5. Set up automatic builds and deploys with GitHub? , tuş N .

Çalıştırın ve video ipucu web uygulamasını görüntüleyin

1. Terminalinizde, video-hint-start ve functions Klasörlerine bağımlılıkları yükleyin ve ardından uygulamayı çalıştırın:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. Tarayıcınızda, yerel olarak barındırılan barındırma URL'sine gidin. Çoğu durumda, http: // localhost: 5000/ veya benzer bir şey.

Sayfa yüklenmeli, ancak çeşitli özelliklerin eksik olduğunu fark edeceksiniz. Bunları bu codelab'ın sonraki adımlarına ekleyeceğiz.

Web uygulamasını çalıştırma sorun giderme

Error: The query requires an index. You can create it here: https://console.firebase.google.com Devtools konsol bölmesinde şu adımları izleyin:

1. Verilen URL'ye gidin.

2. Kaydet'i tıklayın ve durumun binadan etkinliğe geçmesini bekleyin.

14. Video İpucu Uygulamasına işlevsellik ekleyin

Bu codelab'ın son adımında, video ipucu uygulamasını yerel olarak çalıştırdınız, ancak çok fazla işlevselliği yoktu ve henüz yüklü uzantıyı kullanmadı. Codelab'ın bu adımında, bu işlevi ekleyecek ve uzantıyı tetiklemek için web uygulamasını kullanacaksınız.

Güvenlik Kuralları Dağıtım

Bu Codelab'ın örnek uygulaması, Firestore ve Firebase için bulut depolama için güvenlik kuralları kümeleri içerir. Bu güvenlik kurallarını Firebase projenize dağıttıktan sonra, veritabanınızdaki veriler ve kovanız yanlış kullanımdan daha iyi korunur.

Bu kuralları firestore.rules ve storage.rules dosyalarında görüntüleyebilirsiniz.

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

   firebase deploy --only firestore:rules,storage
   

2. "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , Evet'i seçin.

İşlevleri birleştirmek için kodu güncelleyin

1. Kod Düzenleyicinizde functions klasörünü genişletin.
   Bu klasör, bir uzantı boru hattı oluşturmak için birleştirilen çeşitli işlevler içerir. Aşağıdaki tabloda her bir işlevi listeler ve açıklar:

   İşlev	Tanım
   functions/01-handle-video-upload.js	Uzatma boru hattındaki ilk adım. Kullanıcının yüklenen video dosyasını işler.
   functions/02-handle-video-labels.js	Uzatma boru hattındaki ikinci adım. storage-label-videos uzantısı tarafından oluşturulan video labels dosyasını işler.
   functions/03-handle-audio-file.js	Uzatma boru hattındaki üçüncü adım. Çekilen ses dosyasını işler.

   Ancak, yine de bu işlevleri bir araya getiren bir dosya eklemeniz gerekir.
2. functions/index.js dosyasında aşağıdaki kodu ekleyin:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

Bu kod, tüm işlevler için bir merkezi konum olması için işlevleri index.js dosyasından içe aktarmak ve dışa aktarmak için JavaScript modüllerini kullanır.

Video yüklemesini işlemek için kodu güncelleyin

1. Kod düzenleyicinizde lib/firebase/storage.js dosyasını açın.
2. uploadVideo işlevini bulun.
   Bu işlev userId , filePath ve file parametreleri alır. Bu veriler bulut depolama alanına bir dosya yüklemek için yeterlidir.
3. uploadVideo işlevinin gövdesinde, aşağıdaki kodu ekleyin:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

İşlevlerinizi dağıtın

İşlevlerinizi Firebase CLI ile dağıtmak için şu adımları izleyin:

1. Terminalinizde video-hint-start klasöründeyken, geçerli işlemi durdurmak için Control+C tuşuna basın.
2. İşlevlerinizi dağıtın:

   firebase deploy --only functions
   

   Önceki bulut işlevlerini silmeniz istenirse, No seçin.
3. Permission denied while using the Eventarc Service Agent benzer bir mesaj görürseniz, birkaç dakika bekleyin ve komutu yeniden deneyin.
4. Komut bittikten sonra uygulamayı yerel olarak tekrar çalıştırın:

   firebase emulators:start --only hosting
   

Çalıştırın ve video ipucu web uygulamasını tekrar görüntüle (şimdi işlevsellikle)

Şimdi işlevsel web uygulamasını çalıştırmak ve görüntülemek için şu adımları izleyin:

1. Tarayıcınızda, http: // localhost: 5000'e gittiğiniz sekmeyi bulun.
2. Gerekirse, Google ile oturum açın ve Google hesabınızı seçin.
3. Video #1'i yükleyin ve video özetinin sonuçlarını görmek için birkaç dakika bekleyin.
4. Videoyu yükledikten sonra herhangi bir sonuç görmüyorsanız, bu Codelab'ın ekindeki bulut işlevleriyle ilgili hataları gidermeye bakın.

15. Sonuç

Tebrikler! Bu codelab'da çok şey başardın!

Firebase uzantıları kurulu ve yapılandırılmış

Firebase konsolunu çeşitli AI uzantılarını yapılandırmak ve kurmak için kullandınız. Uzantıları kullanmak uygundur, çünkü Google Cloud Hizmetleri ile kimlik doğrulaması, Firestore'dan okuma ve yazma ve Google Cloud hizmetleriyle etkileşime girme ve bu görevlerle ilgili çeşitli nüanslar ile ilgili çok sayıda Bolarplate kodu yazmanız gerekmez.

Firebase konsolunu kullanarak uzantılarla çalıştı

Doğrudan koda atlamak yerine, konsol üzerinden sağladığınız bir girişe dayanarak AI uzantılarının nasıl çalıştığını anlamak için zaman ayırdınız. Bu tür etkileşim, uzatma çıkışının hata ayıklamanız gerekiyorsa özellikle yararlı olabilir.

Firebase uzantıları kullanan üç AI destekli web uygulaması oluşturdu

İnceleme ile

İnceleme web uygulamasında, kullanıcıların bir tişört ürünü için bıraktığı uzun incelemeleri özetlemek için Palm API uzantısı olan dil görevlerini kullandınız. Ayrıca, dil modelinin sorgunuza bir JSON yanıtı sağlamasını istediniz; burada JSON, bir yıldız derecesi ve orijinal uzun biçimli incelemenin özetlenmiş bir incelemesi sağladı.

İsteğe bağlı egzersiz : T-shirt şirketi özetlenmiş incelemelerden memnundur, ancak kusurun doğasının ek bir özeti istediler. Arızanın bir özetini döndürme isteğini ayarlayabilir ve ardından bu özeti web uygulamasının kullanıcı arayüzüne dahil edebilir misiniz?

Sohbet robotu

Chatbot Web uygulamasında, kullanıcıya, her bir mesajın belirli bir kullanıcıya kapsamlı bir Firestore belgesinde saklandığı konuşmalarda geçmiş bağlamı içeren, kullanıcıya etkileşimli bir sohbet arayüzü sağlamak için Palm API uzantılı Chatbot'u kullandınız.

İsteğe bağlı egzersiz : Öğrenciler sohbet botundan memnun kaldılar, ancak personel birkaç geliştirme istiyor. Öğrencilere cevap verildikten sonra düşündürücü sorular verilmelidir. Örneğin:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

İpucu: Bunu başarmak için yapılandırılabilir bir bağlam seçeneği kullanabilirsiniz.

Video ipucu

Video İpucu Web uygulamasında, metni konuşmaya , Palm API ile dil görevlerini ve bir videonun bir metin ve ses açıklamasıyla sonuçlanan bir uzantı boru hattı oluşturmak için bulut video uzantılarına sahip etiket videolarını kullandınız.

İsteğe bağlı egzersiz : Devlet departmanı prototipi ilginç buldu ve şimdi bir kullanıcının, etiketin algılandığı noktaya atlamak için metin tabanlı bir etikete tıklayabilmesini istiyorlar.

16. Ek: Bulut işlevleriyle sorun giderme

Web uygulamanız beklendiği gibi çalışmıyorsa ve bunun işlevlerden kaynaklanabileceğini düşünüyorsanız, bu sorun giderme sayfasındaki adımları izleyin.

Kamuoyu doğrulanmamış erişime izin verin

Chrome Devtools'un konsol panelinde izinle ilgili herhangi bir hata alırsanız, şu adımları izleyin:

1. Kimlik Doğrulama Genel Bakış | Bulut Çalışma Sayfası
2. Halkın işleve yetkilendirilmemiş erişimine izin vermek için gerekli görevleri görüntülemek ve tamamlamak için bağlantıyı tıklayın.

3. İnceleme uygulamasına geri dönün. Örneğin: http: // localhost: 8080.
4. Bazı sahte incelemeler ekleyin ve birkaç saniye bekleyin.
   • İncelemeler ortaya çıkıyorsa: Bu sorun giderme adımlarına devam etmenize gerek yoktur ve bu codelab'da Chatbot Web Uygulaması bölümünü kurmak için doğrudan atlayabilirsiniz.
   • İncelemeler görünmüyorsa: Bu sorun giderme bölümüne devam edin.

Yetersiz izin hatalarını kullanın

1. Firebase konsolunda işlevlere gidin.
2. addMockReviews işlevinin üzerine gelin ve ardından tıklayın > Günlükleri görüntüle .

3. Aşağıdakilerden birine benzer bir hata bulana kadar günlükleri gezdirin:

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. Google Bulut Konsolu'nda IAM İzinleri sayfasına gidin ve ardından projenizi seçin.
5. Tabloda ad sütunu bulun.
   IAM & Admin sayfasında bir kullanıcı ve rol tablosuna sahiptir. Tablodaki ad sütunu kullanıcının veya müdürün ne için olduğunu açıklar. Varsayılan hesaplama hizmeti hesabı adına sahip bir müdürünüz olabilir.

Varsayılan hesaplama hizmeti hesabını görürseniz, şu adımları izleyin:

1. Tıklamak Müdürü Düzenle .

2. Bu Codelab'daki Varsayılan Bilgiler Hizmet Hesabı bölümünde rolleri ekleyin .

Varsayılan hesaplama hizmeti hesabını görmüyorsanız, şu adımları izleyin:

1. Hibe Erişimine tıklayın.
2. Yeni Prensipler Metin Kutusuna compute girin.
3. Görüntülenen Otomatik Kesimler menüsünde Varsayılan Bilgi Hizmet Hizmeti Hesabı'nı seçin.

Varsayılan hesaplama hizmeti hesabına rol ekleyin

Varsayılan hesaplama hizmeti hesabının atama rolleri bölümünde:

1. A Rol Seç menüsünü genişletin.
2. Filtre metin kutusuna Cloud Datastore User girin.
3. Görünen AutoSuggestions menüsünde Cloud Datastore kullanıcısını seçin.
4. Tıklamak Başka bir rol ekleyin .
   1. A Rol Seç menüsünü genişletin.
   2. Filtre metin kutusuna Cloud Storage for Firebase Admin girin.
   3. Görünen AutoSuggestions menüsünde Firebase Yöneticisi için Bulut Depolama'yı seçin.
5. Tıklamak Başka bir rol ekleyin .
   1. A Rol Seç menüsünü genişletin.
   2. Filtre Metin Kutusuna Cloud Storage for Firebase Service Agent Girin.
   3. Görünen AutoSuggestions menüsünde Firebase Service Agent için Bulut Depolama Alanı'nı seçin.
6. Kaydet'i tıklayın.