برنامه های وب مبتنی بر هوش مصنوعی را با افزونه های Firebase بسازید

1. قبل از شروع

در این کد لبه، می‌آموزید که چگونه برنامه‌های وب مبتنی بر هوش مصنوعی بسازید که تجربه‌های جذابی را برای کاربر با افزونه‌های Firebase فراهم می‌کنند.

پیش نیازها

• آشنایی با Node.js و جاوا اسکریپت

چیزی که یاد خواهید گرفت

• نحوه استفاده از برنامه‌های افزودنی مرتبط با هوش مصنوعی برای پردازش زبان و ورودی ویدیو.
• نحوه استفاده از Cloud Functions برای Firebase برای ایجاد خط لوله بین Extension ها.
• نحوه استفاده از جاوا اسکریپت برای دسترسی به خروجی تولید شده توسط Extensions.

آنچه شما نیاز دارید

• مرورگر دلخواه شما، مانند گوگل کروم
• یک محیط توسعه با ویرایشگر کد و ترمینال
• یک حساب Google برای ایجاد و مدیریت پروژه Firebase شما

2. برنامه های وب و خدمات Firebase آنها را بررسی کنید

این بخش برنامه‌های وب را که در این کد لبه می‌سازید و از Firebase برای ساخت آنها توضیح می‌دهد.

برنامه بررسی

یک شرکت تولید تی شرت غرق در بررسی های طولانی درباره یکی از تی شرت های خود شده و از رتبه بندی کلی آن مطمئن نیست. برنامه وب تکمیل‌شده Reviewly هر بررسی را خلاصه می‌کند، برای هر مرور یک امتیاز ستاره ارائه می‌کند و از هر بررسی برای استنتاج یک رتبه کلی برای محصول استفاده می‌کند. کاربران همچنین می توانند هر بررسی خلاصه شده را برای دیدن بررسی اصلی گسترش دهند.

برنامه چت بات

کارکنان آموزشی یک مدرسه با سؤالات تکراری در مورد موضوعات عمومی غرق شده اند، بنابراین آنها می خواهند پاسخ ها را خودکار کنند. برنامه تکمیل شده Chatbot یک ربات گفتگوی مکالمه را در اختیار دانش‌آموزان قرار می‌دهد که توسط یک مدل زبان بزرگ (LLM) ارائه می‌شود و می‌تواند به سؤالات درباره موضوعات کلی پاسخ دهد. ربات چت دارای زمینه تاریخی است، بنابراین پاسخ‌های آن می‌تواند به سؤالات قبلی که دانش‌آموزان در همان مکالمه پرسیده‌اند، تأثیر بگذارد.

برنامه راهنمای ویدیو

یک اداره دولتی می‌خواهد ویدیوهایش توضیحات صوتی را برای بهبود دسترسی ارائه کنند، اما آنها صدها ویدیو برای حاشیه‌نویسی دارند و به رویکردی ساده نیاز دارند. برنامه تکمیل شده Video Hint یک نمونه اولیه است که بخش برای ارزیابی اثربخشی آن بررسی خواهد کرد.

اینها پسوندهای مورد استفاده در برنامه Video Hint هستند:

• برچسب‌گذاری ویدیوها با پسوند Cloud Video AI - برچسب‌ها را از هر ویدیوی آپلود شده در فضای ذخیره‌سازی استخراج کنید.
• وظایف زبان با پسوند PalM API - برچسب ها را در یک توضیح متنی خلاصه کنید.
• تبدیل متن به گفتار پسوند — یک نسخه صوتی از توضیحات ویدیو ایجاد کنید.

3. محیط توسعه خود را تنظیم کنید

نسخه Node.js خود را تأیید کنید

1. در ترمینال خود، تأیید کنید که Node.js نسخه 20.0.0 یا بالاتر را نصب کرده اید:

   node -v
   

2. اگر Node.js نسخه 20.0.0 یا بالاتر را ندارید، آن را دانلود و نصب کنید .

مخزن را دانلود کنید

1. اگر git را نصب کرده‌اید، مخزن GitHub Codelab را شبیه‌سازی کنید:

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

2. اگر git را نصب نکرده اید، مخزن GitHub را به صورت یک فایل فشرده دانلود کنید .

ساختار پوشه را مرور کنید

در دستگاه محلی خود، مخزن کلون شده را پیدا کنید و ساختار پوشه را بررسی کنید. جدول زیر شامل پوشه ها و توضیحات آنها است:

هر پوشه شامل یک فایل readme.md است که با استفاده از دستورالعمل های ساده، شروع سریعی برای اجرای برنامه وب مربوطه ارائه می دهد. با این حال، اگر برای اولین بار یاد می‌گیرید، باید این نرم‌افزار را تکمیل کنید، زیرا حاوی جامع‌ترین مجموعه دستورالعمل‌ها است.

اگر مطمئن نیستید که به درستی کد را مطابق دستورالعمل در سراسر این Codelab اعمال کرده‌اید، می‌توانید کد راه‌حل برنامه‌های مربوطه را در پوشه‌های reviewly-end ، chatbot-end و video-hint-end پیدا کنید.

Firebase CLI را نصب کنید

دستور زیر را اجرا کنید تا بررسی کنید که Firebase CLI را نصب کرده اید و نسخه 12.5.4 یا بالاتر است:

firebase --version

• اگر Firebase CLI را نصب کرده اید، اما نسخه 12.5.4 یا بالاتر نیست، آن را به روز کنید:

  npm update -g firebase-tools
  

• اگر Firebase CLI را نصب نکرده‌اید، آن را نصب کنید:

  npm install -g firebase-tools
  

اگر به دلیل خطاهای مجوز نمی توانید Firebase CLI را نصب کنید، اسناد npm را ببینید یا از گزینه نصب دیگری استفاده کنید.

وارد Firebase شوید

1. در ترمینال خود، به پوشه ai-extensions-codelab بروید و وارد Firebase شوید:

   cd ai-extensions-codelab
   firebase login
   

2. اگر ترمینال شما می گوید که قبلاً به Firebase وارد شده اید، به بخش Set up your Firebase project در این Codelab بروید.
3. بسته به اینکه می خواهید Firebase داده ها را جمع آوری کند، Y یا N وارد کنید.
4. در مرورگر خود، حساب Google خود را انتخاب کنید و سپس روی Allow کلیک کنید.

4. پروژه Firebase خود را راه اندازی کنید

در این بخش، یک پروژه Firebase را راه‌اندازی کرده و یک برنامه وب Firebase را با آن مرتبط می‌کنید. همچنین خدمات Firebase را که توسط برنامه‌های وب نمونه استفاده می‌شود، فعال می‌کنید.

یک پروژه Firebase ایجاد کنید

1. در کنسول Firebase ، روی ایجاد پروژه کلیک کنید.
2. در کادر متنی Enter your project name ، AI Extensions Codelab (یا نام پروژه دلخواه خود) را وارد کنید و سپس روی Continue کلیک کنید.
3. برای این کد لبه، شما نیازی به Google Analytics ندارید، بنابراین گزینه Enable Google Analytics for this project را غیرفعال کنید.
4. روی ایجاد پروژه کلیک کنید.
5. منتظر بمانید تا پروژه شما ارائه شود و سپس روی Continue کلیک کنید.
6. در پروژه Firebase خود، به تنظیمات پروژه بروید. شناسه پروژه خود را یادداشت کنید زیرا بعداً به آن نیاز دارید. این شناسه منحصر به فرد نحوه شناسایی پروژه شما است (به عنوان مثال، در Firebase CLI).

اکانت سرویس Firebase را دانلود کنید

برخی از برنامه‌های وب که در این لبه کد می‌سازید از رندر سمت سرور با Next.js استفاده می‌کنند.

Firebase Admin SDK برای Node.js برای اطمینان از عملکرد قوانین امنیتی از کد سمت سرور استفاده می شود. برای استفاده از APIها در Firebase Admin، باید یک حساب سرویس Firebase را از کنسول Firebase دانلود کنید.

1. در کنسول Firebase، به صفحه حساب‌های سرویس در تنظیمات پروژه خود بروید.
2. روی ایجاد کلید خصوصی جدید > ایجاد کلید کلیک کنید.
3. پس از دانلود فایل در سیستم فایل شما، مسیر کامل آن فایل را دریافت کنید.
   برای مثال، اگر فایل را در پوشه Downloads خود دانلود کرده باشید، مسیر کامل ممکن است به این صورت باشد: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. در ترمینال خود، متغیر محیطی GOOGLE_APPLICATION_CREDENTIALS را روی مسیر کلید خصوصی دانلود شده خود تنظیم کنید. در یک محیط یونیکس، دستور ممکن است به این صورت باشد:

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

5. این ترمینال را باز نگه دارید و از آن برای باقیمانده این کد لبه استفاده کنید، زیرا در صورت شروع جلسه ترمینال جدید ممکن است متغیر محیطی شما از بین برود.
   اگر جلسه ترمینال جدیدی را باز کنید، باید دستور قبلی را دوباره اجرا کنید.

طرح قیمت گذاری Firebase خود را ارتقا دهید

برای استفاده از توابع Cloud و برنامه‌های افزودنی Firebase، پروژه Firebase شما باید در طرح قیمت‌گذاری Blaze باشد، به این معنی که با حساب Cloud Billing مرتبط است.

• حساب Cloud Billing به یک روش پرداخت مانند کارت اعتباری نیاز دارد.
• اگر تازه وارد Firebase و Google Cloud هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار 300 دلاری و یک حساب آزمایشی رایگان Cloud Billing هستید یا خیر.

با این حال، توجه داشته باشید که تکمیل این کد لبه نباید هزینه واقعی را متحمل شود.

برای ارتقای پروژه خود به پلن Blaze، مراحل زیر را دنبال کنید:

1. در کنسول Firebase، برنامه خود را ارتقا دهید .
2. در گفتگو، طرح Blaze را انتخاب کنید، و سپس دستورالعمل های روی صفحه را دنبال کنید تا پروژه خود را با یک حساب Cloud Billing مرتبط کنید.
   اگر نیاز به ایجاد حساب Cloud Billing داشتید، ممکن است لازم باشد برای تکمیل ارتقا به جریان ارتقا در کنسول Firebase برگردید.

سرویس های Firebase را در کنسول Firebase تنظیم کنید

در این بخش، چندین سرویس Firebase را که توسط برنامه‌های وب در این کد لبه استفاده می‌شود، ارائه و راه‌اندازی می‌کنید. توجه داشته باشید که همه این سرویس‌ها در هر برنامه وب استفاده نمی‌شوند، اما راه‌اندازی همه این سرویس‌ها در حال حاضر یک راحتی برای کار از طریق این نرم‌افزار است.

احراز هویت را تنظیم کنید

شما هم با برنامه Chatbot و هم با برنامه Video Hint از احراز هویت استفاده خواهید کرد. با این حال، به یاد داشته باشید، اگر در حال ساخت یک برنامه واقعی بودید، هر برنامه باید پروژه Firebase خود را داشته باشد .

1. در کنسول Firebase، به Authentication بروید.
2. روی Get start کلیک کنید.
3. در ستون ارائه دهندگان اضافی ، روی Google > فعال کردن کلیک کنید.

4. در کادر متنی نام عمومی برای پروژه ، یک نام به یاد ماندنی مانند My AI Extensions Codelab وارد کنید.
5. از ایمیل کشویی پشتیبانی برای پروژه ، آدرس ایمیل خود را انتخاب کنید.
6. روی ذخیره کلیک کنید.
   

Cloud Firestore را راه اندازی کنید

شما از Firestore با هر سه برنامه استفاده خواهید کرد. با این حال، به یاد داشته باشید، اگر در حال ساخت یک برنامه واقعی بودید، هر برنامه باید پروژه Firebase خود را داشته باشد .

1. در کنسول Firebase، به Firestore بروید.
2. روی ایجاد پایگاه داده > شروع در حالت آزمایشی > بعدی کلیک کنید.
   بعداً در این کد، قوانین امنیتی را برای ایمن سازی داده های خود اضافه خواهید کرد. بدون افزودن قوانین امنیتی برای پایگاه داده خود، یک برنامه را به صورت عمومی توزیع یا افشا نکنید .
3. از مکان پیش فرض استفاده کنید یا مکان مورد نظر خود را انتخاب کنید.
   برای یک برنامه واقعی، می خواهید مکانی را انتخاب کنید که به کاربران شما نزدیک باشد. توجه داشته باشید که این مکان بعداً قابل تغییر نیست و همچنین به طور خودکار مکان سطل ذخیره سازی ابری پیش فرض شما خواهد بود (مرحله بعدی).
4. روی Done کلیک کنید.

Cloud Storage را برای Firebase تنظیم کنید

شما از فضای ذخیره سازی ابری با برنامه Video Hint و برای امتحان پسوند تبدیل متن به گفتار (مرحله بعدی از نرم افزار کد) استفاده خواهید کرد.

1. در کنسول Firebase، به Storage بروید.
2. روی شروع > شروع در حالت آزمایش > بعدی کلیک کنید.
   بعداً در این کد، قوانین امنیتی را برای ایمن سازی داده های خود اضافه خواهید کرد. بدون افزودن قوانین امنیتی برای سطل ذخیره‌سازی خود ، برنامه‌ای را به صورت عمومی توزیع یا افشا نکنید .
3. محل سطل شما باید از قبل انتخاب شده باشد (به دلیل راه اندازی Firestore در مرحله قبل).
4. روی Done کلیک کنید.

در بخش‌های بعدی این کد لبه، افزونه‌ها را نصب می‌کنید و پایگاه‌های کد هر برنامه نمونه را در این کد لبه تغییر می‌دهید تا سه برنامه وب متفاوت کار کنند.

5. برنامه افزودنی «Language Tasks with PalM API» را برای برنامه Reviewly تنظیم کنید

زبان Tasks را با پسوند Palm API نصب کنید

1. با پسوند PalM API به زبان Tasks بروید.
2. روی Install در کنسول Firebase کلیک کنید.
3. پروژه Firebase خود را انتخاب کنید.
4. در بخش Review APIs enabled and sources ایجاد شده ، روی Enable در کنار هر سرویسی که به شما پیشنهاد می شود کلیک کنید:

5. روی Next > Next کلیک کنید.
6. در کادر متنی مسیر مجموعه ، bot وارد کنید.
7. در کادر متن درخواست ، را وارد کنید.
8. در کادر متنی Variable fields ، input وارد کنید.
9. در کادر متنی فیلد پاسخ ، text وارد کنید.
10. از منوی کشویی Cloud Functions ، آیووا (us-central1) یا مکانی را که قبلاً برای Firestore و Cloud Storage انتخاب کرده بودید، انتخاب کنید.
11. از منوی کشویی Language Model ، text-bison-001 را انتخاب کنید.
12. تمام مقادیر دیگر را به عنوان پیش فرض خود بگذارید.
13. روی Install extension کلیک کنید و منتظر بمانید تا افزونه نصب شود.

زبان Tasks را با پسوند PalM API امتحان کنید

در حالی که هدف این کد لبه تعامل با زبان Tasks با برنامه افزودنی PalM API از طریق یک برنامه وب است، درک نحوه عملکرد برنامه افزودنی با فعال کردن برنامه افزودنی با استفاده از کنسول Firebase مفید است. برنامه افزودنی زمانی فعال می شود که یک سند Cloud Firestore به مجموعه bot اضافه شود.

برای مشاهده نحوه عملکرد برنامه افزودنی با استفاده از کنسول Firebase، این مراحل را دنبال کنید:

1. در کنسول Firebase، به Firestore بروید.
2. در مجموعه bot ، کلیک کنید سند اضافه کنید .
3. در کادر متنی Document ID ، روی Auto-ID کلیک کنید.
4. در کادر متن فیلد ، input وارد کنید.
5. در کادر متنی Value ، Tell me about the moon وارد کنید.
6. روی ذخیره کلیک کنید و چند ثانیه صبر کنید. سند شما در مجموعه bot اکنون پاسخی به درخواست شما دارد.

6. برنامه Reviewly را برای استفاده از Firebase تنظیم کنید

برای اجرای برنامه Reviewly ، باید کد برنامه و Firebase CLI را برای تعامل با پروژه Firebase خود تنظیم کنید.

خدمات و پیکربندی Firebase را به کد برنامه خود اضافه کنید

برای استفاده از Firebase، پایگاه کد برنامه شما به SDK های Firebase برای سرویس هایی که می خواهید استفاده کنید و پیکربندی Firebase نیاز دارد که به آن SDK ها می گوید از کدام پروژه Firebase استفاده کنند.

برنامه نمونه این Codelab قبلاً شامل همه کدهای وارد کردن و مقداردهی اولیه برای SDK ها است (به reviewly-start/js/reviews.js مراجعه کنید)، بنابراین نیازی به اضافه کردن آنها ندارید. با این حال، برنامه نمونه فقط دارای مقادیر متغیری برای پیکربندی Firebase است ( reviewly-start/js/firebase-config.js )، بنابراین باید برنامه خود را در پروژه Firebase خود ثبت کنید تا مقادیر پیکربندی Firebase منحصر به فرد را برای برنامه خود دریافت کنید.

1. در کنسول Firebase، در پروژه Firebase خود، به نمای کلی پروژه بروید و سپس کلیک کنید وب
   
2. در کادر متنی نام مستعار برنامه ، یک نام مستعار برنامه به یاد ماندنی، مانند My Reviewly app وارد کنید.
3. کادر همچنین تنظیم Firebase Hosting برای این برنامه را انتخاب نکنید . این مراحل را بعداً در کد لبه انجام خواهید داد.
4. روی ثبت برنامه کلیک کنید.
5. کنسول یک قطعه کد را برای افزودن و مقداردهی اولیه Firebase SDK با یک شی پیکربندی Firebase مخصوص برنامه نمایش می دهد. تمام خصوصیات موجود در شی پیکربندی Firebase را کپی کنید.
6. در ویرایشگر کد خود، فایل reviewly-start/js/firebase-config.js باز کنید.
7. مقادیر جایگیر را با مقادیری که به تازگی کپی کرده اید جایگزین کنید. اگر ویژگی‌ها و مقادیری برای سرویس‌های Firebase دارید که در برنامه Reviewly استفاده نمی‌کنید، اشکالی ندارد.
8. فایل را ذخیره کنید.
9. در کنسول Firebase، روی Continue to console کلیک کنید.

ترمینال خود را برای اجرای دستورات Firebase CLI در برابر پروژه Firebase خود تنظیم کنید

1. در ترمینال خود، به پوشه ai-extensions-codelab که قبلا دانلود کرده اید بروید.
2. به پوشه reviewly-start برنامه وب بروید:

   cd reviewly-start
   

3. دستورات Firebase CLI را در برابر یک پروژه خاص Firebase اجرا کنید:

   firebase use YOUR_PROJECT_ID
   

برنامه وب Reviewly را اجرا و مشاهده کنید

برای اجرا و مشاهده برنامه وب، مراحل زیر را دنبال کنید:

1. در ترمینال خود، وابستگی ها را نصب کنید و سپس برنامه وب را اجرا کنید:

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

2. در مرورگر خود، به URL نشان داده شده در ترمینال خود بروید. به عنوان مثال: http://localhost:8080 .

صفحه باید بارگیری شود، اما متوجه خواهید شد که ویژگی‌های مختلفی وجود ندارد. ما اینها را در مراحل بعدی این کد لبه اضافه خواهیم کرد.

7. قابلیت را به برنامه Reviewly اضافه کنید

در آخرین مرحله از این کد لبه، اپلیکیشن Reviewly را به صورت محلی اجرا کردید، اما عملکرد چندانی نداشت و هنوز از پسوند نصب شده استفاده نکرده بود. در این مرحله از Codelab، این قابلیت را اضافه کرده و از برنامه وب برای فعال کردن برنامه افزودنی استفاده می‌کنید.

استقرار قوانین امنیتی

برنامه نمونه این Codelab شامل مجموعه‌ای از قوانین امنیتی برای Firestore و برای ذخیره‌سازی ابری برای Firebase است. پس از استقرار این قوانین امنیتی در پروژه Firebase، داده های موجود در پایگاه داده و سطل شما بهتر از سوء استفاده محافظت می شوند.

می توانید این قوانین را در فایل های firestore.rules و storage.rules مشاهده کنید.

1. برای استقرار این قوانین امنیتی، این دستور را در ترمینال خود اجرا کنید:

   firebase deploy --only firestore:rules,storage
   

2. اگر از شما پرسیده شود: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ، بله را انتخاب کنید.

کد برنامه را به‌روزرسانی کنید تا برنامه افزودنی فعال شود

در برنامه Reviewly ، یک بررسی جدید که به Firestore اضافه شده است، برنامه افزودنی را برای خلاصه کردن بررسی فعال می کند.

1. در ویرایشگر کد خود، فایل functions/add-mock-reviews.js را باز کنید.
2. متغیر reviewWithPrompt را با کد زیر جایگزین کنید، که مدل زبان را برای بررسی کوتاه‌تر می‌خواهد.

   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 ، کد زیر را جایگزین متغیر reviewDocument کنید که یک سند بررسی ایجاد می کند تا بتوان آن را به Firestore اضافه کرد.

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

4. فایل را ذخیره کنید.
5. در فایل js/reviews.js ، پس از Insert code below, to import your Firebase Callable Cloud Function ، تابع فراخوانی Firebase HTTP خود را با کمک httpsCallable وارد کنید:

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

6. پس از Insert code below, to invoke your Firebase Callable Cloud Function ، تابع فراخوانی Firebase HTTP خود را فراخوانی کنید:

   await addMockReviews();
   

7. فایل را ذخیره کنید.

یک تابع برای افزودن بررسی های جدید مستقر کنید

برنامه وب Reviewly از یک تابع Cloud برای افزودن نظرات استفاده می کند. اما در حال حاضر، Cloud Function مستقر نشده است.

برای استقرار تابع خود با Firebase CLI، مراحل زیر را دنبال کنید:

1. در ترمینال خود در حالی که هنوز در پوشه reviewly-start هستید، Control+C فشار دهید تا سرور متوقف شود.
2. تابع خود را مستقر کنید:

   firebase deploy --only functions
   

3. اگر Permission denied while using the Eventarc Service Agent ، چند دقیقه صبر کنید و سپس دستور را دوباره امتحان کنید.

شما به تازگی اولین عملکرد سفارشی خود را با توابع ابری به کار گرفتید. کنسول Firebase داشبوردی را ارائه می دهد که در آن می توانید تمام عملکردهایی را که در پروژه Firebase خود به کار می برید مشاهده کنید.

برنامه وب Reviewly را دوباره اجرا و مشاهده کنید (اکنون با قابلیت)

برای اجرا و مشاهده برنامه وب در حال حاضر کاربردی، این مراحل را دنبال کنید:

1. در ترمینال خود، سرور را دوباره اجرا کنید:

   npm run dev
   

2. در مرورگر خود، به URL نشان داده شده در ترمینال خود بروید. به عنوان مثال: http://localhost:8080 .
3. در برنامه، روی افزودن چند بررسی ساختگی کلیک کنید و چند ثانیه صبر کنید تا چند بررسی طولانی ظاهر شود.
   در پس‌زمینه، زبان Tasks با پسوند PalM API به سند جدیدی که بازبینی جدید را نشان می‌دهد، واکنش نشان می‌دهد. درخواستی که قبلا اضافه کردید، خلاصه‌ای کوتاه‌تر از مدل زبان درخواست می‌کند.
4. برای مشاهده کل یک بررسی و درخواست استفاده شده برای بررسی، روی یکی از نظرات کلیک کنید و سپس Show PalM prompt را انتخاب کنید.

8. پسوند «Chatbot with PalM API» را برای برنامه Chatbot تنظیم کنید

چت بات را با پسوند PalM API نصب کنید

1. به Chatbot با پسوند PalM API بروید.
2. روی Install در کنسول Firebase کلیک کنید.
3. پروژه Firebase خود را انتخاب کنید.
4. روی Next > Next > Next کلیک کنید تا به بخش Configure extension برسید.
5. در کادر متن مسیر مجموعه ، users/{uid}/discussion/{discussionId}/messages وارد کنید.
6. از منوی کشویی Cloud Functions ، آیووا (us-central1) یا مکانی را که قبلاً برای Firestore و Cloud Storage انتخاب کرده بودید، انتخاب کنید.
7. از منوی کشویی Language model ، chat-bison را انتخاب کنید.
8. تمام مقادیر دیگر را به عنوان پیش فرض خود بگذارید.
9. روی Install extension کلیک کنید و منتظر بمانید تا افزونه نصب شود.

Chatbot را با پسوند PalM API امتحان کنید

در حالی که هدف این کد لبه تعامل با Chatbot با پسوند API PalM از طریق یک برنامه وب است، درک نحوه عملکرد برنامه افزودنی با فعال کردن برنامه افزودنی با استفاده از کنسول Firebase مفید است. برنامه افزودنی زمانی فعال می شود که یک سند Cloud Firestore در مجموعه users/{uid}/discussion/{discussionId}/messages ایجاد شود.

1. در کنسول Firebase، به Firestore بروید.
2. کلیک شروع مجموعه
   1. در کادر متنی Collection ID ، users وارد کنید و سپس روی Next کلیک کنید.
   2. در کادر متنی Document ID ، روی Auto-ID کلیک کنید و سپس روی Save کلیک کنید.
3. در مجموعه users ، کلیک کنید شروع مجموعه
   
   1. در کادر متنی Collection ID ، discussion وارد کنید و سپس روی Next کلیک کنید.
   2. در کادر متنی Document ID ، روی Auto-ID کلیک کنید و سپس روی Save کلیک کنید.
4. در مجموعه discussion کلیک کنید شروع مجموعه
   
   1. در کادر متنی Collection ID ، messages وارد کنید و سپس روی Next کلیک کنید.
   2. در کادر متنی Document ID ، روی Auto-ID کلیک کنید.
   3. در کادر متن فیلد ، prompt وارد کنید.
   4. در کادر متن Value ، Tell me 5 random fruits .
   5. روی ذخیره کلیک کنید و چند ثانیه صبر کنید. مجموعه messages اکنون شامل یک سند است که حاوی پاسخی به درخواست شما است.

5. در مجموعه messages کلیک کنید سند اضافه کنید .
   1. در کادر متنی Document ID ، روی Auto-ID کلیک کنید.
   2. در کادر متن فیلد ، prompt وارد کنید.
   3. در کادر متنی Value ، And now, vegetables وارد کنید.
   4. روی ذخیره کلیک کنید و چند ثانیه صبر کنید. مجموعه messages اکنون شامل یک سند است که حاوی پاسخی به درخواست شما است.

9. برنامه Chatbot را برای استفاده از Firebase تنظیم کنید

برای اجرای برنامه Chatbot ، باید کد برنامه و Firebase CLI را برای تعامل با پروژه Firebase خود تنظیم کنید.

خدمات و پیکربندی Firebase را به کد برنامه خود اضافه کنید

برای استفاده از Firebase، پایگاه کد برنامه شما به SDK های Firebase برای سرویس هایی که می خواهید استفاده کنید و پیکربندی Firebase نیاز دارد که به آن SDK ها می گوید از کدام پروژه Firebase استفاده کنند.

برنامه نمونه این کد لبه قبلاً شامل همه کدهای وارد کردن و مقداردهی اولیه برای SDK ها است (به chatbot-start/lib/firebase/firebase.js مراجعه کنید)، بنابراین نیازی به اضافه کردن آنها ندارید. با این حال، برنامه نمونه فقط دارای مقادیر متغیرهایی برای پیکربندی Firebase است (به chatbot-start/lib/firebase/firebase-config.js )، بنابراین باید برنامه خود را در پروژه Firebase خود ثبت کنید تا مقادیر پیکربندی Firebase منحصر به فرد را برای خود دریافت کنید. برنامه

1. در کنسول Firebase، در پروژه Firebase خود، به نمای کلی پروژه بروید و سپس کلیک کنید وب (یا اگر قبلاً برنامه ای را در پروژه ثبت کرده اید، روی افزودن برنامه کلیک کنید).
2. در کادر متن نام مستعار برنامه ، یک نام مستعار برنامه به یاد ماندنی، مانند My Chatbot app وارد کنید.
3. کادر همچنین تنظیم Firebase Hosting برای این برنامه را انتخاب نکنید . این مراحل را بعداً در کد لبه انجام خواهید داد.
4. روی ثبت برنامه کلیک کنید.
5. کنسول یک قطعه کد را برای افزودن و مقداردهی اولیه Firebase SDK با یک شی پیکربندی Firebase مخصوص برنامه نمایش می دهد. تمام خصوصیات موجود در شی پیکربندی Firebase را کپی کنید.
6. در ویرایشگر کد خود، فایل chatbot-start/lib/firebase/firebase-config.js را باز کنید.
7. مقادیر جایگیر را با مقادیری که به تازگی کپی کرده اید جایگزین کنید. اگر ویژگی‌ها و مقادیری برای سرویس‌های Firebase دارید که در برنامه Chatbot استفاده نمی‌کنید، اشکالی ندارد.
8. فایل را ذخیره کنید.
9. در کنسول Firebase، روی Continue to console کلیک کنید.

ترمینال خود را برای اجرای دستورات Firebase CLI در برابر پروژه Firebase خود تنظیم کنید

1. در ترمینال خود، Control+C فشار دهید تا سرور از اجرای برنامه وب قبلی جلوگیری کند.
2. در ترمینال خود، به پوشه chatbot-start web app بروید:

   cd ../chatbot-start
   

3. دستورات Firebase CLI را در برابر یک پروژه Firebase خاص اجرا کنید:

   firebase use YOUR_PROJECT_ID
   

پایگاه کد برنامه خود را برای استفاده از میزبانی Firebase آگاه از چارچوب تنظیم کنید

این کد لبه از چارچوب های وب با میزبانی (پیش نمایش) با برنامه وب Chatbot استفاده می کند.

1. در ترمینال خود، چارچوب های وب را با میزبانی Firebase فعال کنید:

   firebase experiments:enable webframeworks
   

2. میزبانی Firebase را راه اندازی کنید:

   firebase init hosting
   

3. وقتی از شما خواسته شد که Detected an existing پایگاه کد Next.js موجود codebase in your current directory, should we use this? ، Y را فشار دهید.
4. هنگامی که In which region would you like to host server-side content, if applicable? ، منطقه پیش‌فرض یا مکانی را که قبلاً برای Firestore و Cloud Storage انتخاب کرده‌اید انتخاب کنید و سپس Enter (یا return در macOS) را فشار دهید.
5. وقتی از شما خواسته می‌شود که Set up automatic builds and deploys with GitHub? N فشار دهید.

برنامه وب Chatbot را اجرا و مشاهده کنید

1. در ترمینال خود، وابستگی ها را نصب کنید و سپس برنامه وب را اجرا کنید:

   npm install
   firebase emulators:start --only hosting
   

2. در مرورگر خود، به URL میزبانی محلی بروید. در بیشتر موارد، http://localhost:5000/ یا چیزی مشابه است.

صفحه باید بارگیری شود، اما متوجه خواهید شد که ویژگی‌های مختلفی وجود ندارد. ما اینها را در مراحل بعدی این کد لبه اضافه خواهیم کرد.

عیب یابی اجرای برنامه وب

اگر این خطا را در صفحه وب مشاهده کردید که به این صورت شروع می شود: Error: Firebase session cookie has incorrect... ، باید تمام کوکی های خود را در محیط لوکال هاست خود حذف کنید. برای انجام این کار، دستورالعمل‌های حذف کوکی‌ها | اسناد DevTools. .

10. قابلیت هایی را به برنامه Chatbot اضافه کنید

در آخرین مرحله از این کد لبه، برنامه Chatbot را به صورت محلی اجرا کردید، اما این برنامه کاربردی چندانی نداشت و هنوز از پسوند نصب شده استفاده نکرده بود. در این مرحله از Codelab، این قابلیت را اضافه کرده و از برنامه وب برای فعال کردن برنامه افزودنی استفاده می‌کنید.

استقرار قوانین امنیتی

برنامه نمونه این Codelab شامل مجموعه‌ای از قوانین امنیتی برای Firestore و برای ذخیره‌سازی ابری برای Firebase است. پس از استقرار این قوانین امنیتی در پروژه Firebase، داده های موجود در پایگاه داده و سطل شما بهتر از سوء استفاده محافظت می شوند.

می توانید این قوانین را در فایل های firestore.rules و storage.rules مشاهده کنید.

1. برای استقرار این قوانین امنیتی، این دستور را در ترمینال خود اجرا کنید:

   firebase deploy --only firestore:rules,storage
   

2. اگر از شما پرسیده شود: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ، بله را انتخاب کنید.

کد را برای افزودن پیام به Cloud Firestore به روز کنید

در برنامه Chatbot ، پیام جدیدی از یک کاربر به Firestore اضافه می‌شود و برنامه افزودنی را برای ایجاد پاسخ فعال می‌کند.

1. در ویرایشگر کد خود، فایل lib/firebase/firestore.js را باز کنید.
2. در نزدیکی انتهای فایل، تابع addNewMessage را پیدا کنید، که اضافه کردن پیام‌های جدید را کنترل می‌کند.
   تابع قبلاً ویژگی های شی زیر را می گیرد:
   

   پارامتر	شرح
   userId	شناسه کاربری که وارد شده است
   discussionId	شناسه بحث که پیام به آن اضافه شده است
   message	محتوای متن پیام
   db	یک نمونه پایگاه داده Firestore

   با آماده بودن این متغیرها، می توانید یک سند Cloud Firestore برای نمایش پیام جدید اضافه کنید.
3. در بدنه تابع addNewMessage بعد از // Insert your code below ⬇️ کد زیر را اضافه کنید:

   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(),
   });
   

کد را برای ایجاد یک پرس و جو برای دریافت پیام ها به روز کنید

1. هنوز در فایل lib/firebase/firestore.js ، تابع getMessagesQuery را پیدا کنید، که باید یک عبارت Cloud Firestore را بازگرداند که پیام‌های ذخیره شده در مسیر جمع‌آوری users/{uid}/discussion/{discussionId}/messages پیدا کند.
2. کل تابع getMessagesQuery را با کد زیر جایگزین کنید:

   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 به روز کنید

1. هنوز در فایل lib/firebase/firestore.js ، تابع handleMessageDoc پیدا کنید، که یک سند Cloud Firestore را دریافت می کند که نشان دهنده یک پیام واحد است.
   این تابع باید داده ها را به گونه ای قالب بندی و ساختار دهد که برای رابط کاربری برنامه Chatbot منطقی باشد.
2. کل تابع handleMessageDoc را با کد زیر جایگزین کنید:

   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. فایل را ذخیره کنید.

دوباره برنامه وب Chatbot را اجرا و مشاهده کنید (اکنون با قابلیت)

برای اجرا و مشاهده برنامه وب در حال حاضر کاربردی، این مراحل را دنبال کنید:

1. در مرورگر خود، با برنامه وب Chatbot به برگه بازگردید و صفحه را دوباره بارگیری کنید.
2. روی Sign in with Google کلیک کنید.
3. در صورت لزوم، حساب Google خود را انتخاب کنید.
4. پس از ورود به سیستم، صفحه را مجدداً بارگیری کنید.
5. در کادر نوشتاری پیام خود را وارد کنید ، پیامی مانند Tell me about space را وارد کنید.
6. روی ارسال کلیک کنید و چند ثانیه صبر کنید تا برنامه وب Chatbot پاسخ دهد.

یکی دیگر از مزایای Chatbot با پسوند PalM API تاریخچه مکالمه آن است.

برای مشاهده نمونه ای از توانایی آن در گفتگو با بافت تاریخی، مراحل زیر را دنبال کنید:

1. در کادر متن پیام خود را وارد کنید ، یک سوال بپرسید، مانند What are five random fruits? .
2. در کادر متن پیام خود را وارد کنید ، یک سوال بعدی بپرسید که مربوط به سوال قبلی است، مانند And what about vegetables? .

برنامه وب Chatbot با دانش تاریخی پاسخ می دهد. حتی اگر آخرین سوال شما پنج سبزی تصادفی را مشخص نکرده باشد، چت بات با پسوند API PaLM سؤالات بعدی را درک می کند.

11. برنامه افزودنی «تبدیل متن به گفتار» را برای برنامه Video Hint تنظیم کنید

پسوند تبدیل متن به گفتار را نصب کنید

1. به پسوند تبدیل متن به گفتار بروید.
2. روی Install در کنسول Firebase کلیک کنید.
3. پروژه Firebase خود را انتخاب کنید.
4. روی Next کلیک کنید.
5. در بخش Review APIs enabled and sources ایجاد شده ، روی Enable در کنار هر سرویسی که به شما پیشنهاد می شود کلیک کنید:

6. روی Next کلیک کنید و سپس در کنار هر مجوزی که به شما پیشنهاد می شود، Grant را انتخاب کنید.

7. روی Next کلیک کنید.
8. در کادر متنی مسیر مجموعه ، bot وارد کنید.
9. در کادر متنی مسیر ذخیره سازی ، tts وارد کنید.
10. تمام مقادیر دیگر را به عنوان گزینه های پیش فرض آنها بگذارید.
11. روی Install extension کلیک کنید و منتظر بمانید تا افزونه نصب شود.

پسوند تبدیل متن به گفتار را امتحان کنید

در حالی که هدف این کد لبه تعامل با پسوند تبدیل متن به گفتار از طریق یک برنامه وب است، درک نحوه عملکرد برنامه افزودنی با فعال کردن برنامه افزودنی با استفاده از کنسول Firebase مفید است. برنامه افزودنی زمانی فعال می شود که یک سند Cloud Firestore در مجموعه bot ایجاد شود.

برای مشاهده نحوه عملکرد برنامه افزودنی با استفاده از کنسول Firebase، این مراحل را دنبال کنید:

1. در کنسول Firebase، به Firestore بروید
2. کلیک شروع مجموعه
3. در کادر متنی Collection ID ، bot وارد کنید.
4. روی Next کلیک کنید.

5. در کادر متنی Document ID ، روی Auto-ID کلیک کنید.
6. در کادر متن فیلد ، text وارد کنید.
7. در کادر متن Value ، The quick brown fox jumps over the lazy dog وارد کنید.
8. روی ذخیره کلیک کنید.

برای دیدن و شنیدن فایل MP3 که ایجاد کرده اید، این مراحل را دنبال کنید:

1. در کنسول Firebase، به Storage بروید.
2. در قسمتی که می‌توانید فایل‌ها را آپلود کنید، نام سطل خود را بعد از مقدار gs:// یادداشت کنید. این نام سطل پیش فرض شما برای این پروژه است. شما به آن در کارهای مختلف در سراسر این کد لبه نیاز دارید.

3. در Google Cloud Console، به Cloud Storage بروید.
4. پروژه خود را انتخاب کنید
   اگر پروژه خود را در لیست اخیر پروژه ها نمی بینید، روی Select Project کلیک کنید تا پروژه خود را در انتخابگر پروژه قرار دهید.

5. سطل ذخیره سازی پیش فرض خود را انتخاب کنید.
6. به پوشه tts/ بروید.
7. روی فایل MP3 کلیک کنید.
8. در انتهای فایل MP3 کلیک کنید و توجه کنید که متن شما به گفتار تبدیل شده است.

12. برنامه افزودنی «Label Videos with Cloud Video AI» را برای برنامه Video Hint تنظیم کنید

Label Videos با پسوند Cloud Video AI را نصب کنید

1. به برچسب ویدیوها با پسوند Cloud Video AI بروید.
2. روی Install در کنسول Firebase کلیک کنید.
3. پروژه Firebase خود را انتخاب کنید.
4. روی Next > Next > Next کلیک کنید تا به بخش Configure extension برسید.
5. از منوی کشویی Cloud Functions ، یک مکان پشتیبانی شده را انتخاب کنید (مکانی که قبلاً برای Firestore و Cloud Storage انتخاب کرده اید یا نزدیکترین مکان به آن). برای مکان‌های پشتیبانی‌شده، به بخش location_id در AnnotateVideoRequest مراجعه کنید.
6. از منوی کشویی مدل ، آخرین را انتخاب کنید.
7. از منوی کشویی Stationary camera ، No را انتخاب کنید.
8. تمام مقادیر دیگر را به عنوان پیش فرض خود بگذارید.
9. روی Install extension کلیک کنید و منتظر بمانید تا افزونه نصب شود.

Label Videos with Cloud Video AI را امتحان کنید

در حالی که هدف این کد لبه تعامل با Label Videos با افزونه Cloud Video AI از طریق یک برنامه وب است، درک نحوه عملکرد برنامه افزودنی با فعال کردن برنامه افزودنی با استفاده از کنسول Firebase مفید است. پسوند زمانی فعال می شود که یک فایل ویدیویی در سطل ذخیره سازی شما آپلود شود.

برای مشاهده نحوه عملکرد برنامه افزودنی با استفاده از کنسول Firebase، این مراحل را دنبال کنید:

1. در پروژه Firebase خود به Storage بروید > پرونده بساز .
2. در کادر متنی نام پوشه، video_annotation_input وارد کنید.

3. روی افزودن پوشه کلیک کنید.
4. در پوشه video_annotation_input ، روی آپلود فایل کلیک کنید.
5. در پوشه ai-extensions-codelab/video-hint-start/public/videos که قبلاً شبیه سازی یا دانلود کرده اید، اولین فایل ویدیویی را انتخاب کنید.
6. در مرورگر خود، در Google Cloud Console، به Cloud Storage بروید.
7. سطل ذخیره سازی پیش فرض خود را که قبلاً به آن اشاره کردید انتخاب کنید.
8. روی پوشه video_annotation_output کلیک کنید.
   اگر پوشه video_annotation_output را نمی‌بینید، چند ثانیه صبر کنید و صفحه را بازخوانی کنید زیرا ممکن است API هوش مصنوعی همچنان در حال پردازش ویدیو باشد.

9. توجه داشته باشید که یک فایل JSON وجود دارد که از نامی مشابه با فایلی که قبلا آپلود کردید پیروی می کند.
10. کلیک FILENAME را دانلود کنید .
11. فایل JSON دانلود شده را در ویرایشگر کد خود باز کنید. این شامل خروجی خام از Video Intelligence API است که شامل برچسب های شناسایی شده ویدیویی است که آپلود کرده اید.

13. برنامه Video Hint را برای استفاده از Firebase تنظیم کنید

برای اجرای برنامه Video Hint ، باید کد برنامه و Firebase CLI را برای تعامل با پروژه Firebase خود تنظیم کنید.

خدمات و پیکربندی Firebase را به کد برنامه خود اضافه کنید

برای استفاده از Firebase ، کد برنامه شما برای سرویس هایی که می خواهید از آنها استفاده کنید و پیکربندی Firebase که به آن SDK ها می گوید که از پروژه Firebase استفاده می کند ، به SDK های Firebase نیاز دارد.

این برنامه نمونه CodeLab در حال حاضر شامل کلیه کد واردات و اولیه سازی لازم برای SDK ها است (به video-hint-start/lib/firebase/firebase.js مراجعه کنید) ، بنابراین نیازی به اضافه کردن این موارد نیست. با این حال ، برنامه نمونه فقط دارای مقادیر نگهدارنده مکان برای پیکربندی Firebase است (به video-hint-start/lib/firebase/firebase-config.js مراجعه کنید) ، بنابراین شما باید برنامه خود را در پروژه Firebase خود ثبت کنید تا مقادیر پیکربندی منحصر به فرد Firebase را بدست آورید برای برنامه شما

1. در کنسول Firebase ، در پروژه Firebase خود ، به نمای کلی پروژه بروید و سپس کلیک کنید وب (یا اگر برنامه ای را با پروژه ثبت کرده اید ، روی افزودن برنامه کلیک کنید).
2. در کادر متن نام مستعار برنامه ، یک نام مستعار برنامه به یاد ماندنی مانند My Video Hint app را وارد کنید.
3. همچنین میزبان تنظیمات Firebase را برای این کادر انتخاب برنامه انتخاب نکنید . شما این مراحل را بعداً در CodeLab انجام خواهید داد.
4. روی ثبت برنامه کلیک کنید.
5. کنسول یک قطعه کد را برای افزودن و اولیه سازی Firebase SDK با یک شیء پیکربندی Firebase خاص برنامه نشان می دهد. تمام خصوصیات موجود در شیء پیکربندی Firebase را کپی کنید.
6. در ویرایشگر کد خود ، پرونده video-hint-start/lib/firebase/firebase-config.js باز کنید.
7. مقادیر نگهدارنده مکان را با مقادیری که فقط کپی کرده اید جایگزین کنید. اگر خواص و مقادیری برای خدمات Firebase دارید که در برنامه Video Hint استفاده نمی کنید ، اشکالی ندارد.
8. فایل را ذخیره کنید.
9. دوباره در کنسول Firebase ، روی Contole ادامه دهید .

ترمینال خود را برای اجرای دستورات Firebase CLI در برابر پروژه Firebase خود تنظیم کنید

1. در ترمینال خود ، Control+C فشار دهید تا سرور از اجرای برنامه وب قبلی متوقف شود.
2. در ترمینال خود ، به پوشه برنامه وب video-hint-start کنید:

   cd ../video-hint-start
   

3. دستورات Run Firebase CLI را در برابر یک پروژه خاص Firebase انجام دهید:

   firebase use YOUR_PROJECT_ID
   

پایگاه کد برنامه خود را برای استفاده از میزبانی Firebase آگاه از چارچوب تنظیم کنید

این CodeLab از چارچوب های وب با میزبانی (پیش نمایش) با برنامه وب ویدیویی استفاده می کند.

1. در ترمینال خود ، چارچوب های وب را با میزبانی Firebase فعال کنید:

   firebase experiments:enable webframeworks
   

2. میزبانی Firebase را اولیه کنید:

   firebase init hosting
   

3. هنگامی که با شناسایی یک پایگاه Next.js Detected an existing codebase in your current directory, should we use this? ، Y. را فشار دهید.
4. در صورت درخواست ، In which region would you like to host server-side content, if applicable? ، منطقه پیش فرض یا مکانی را که قبلاً برای Firestore و Cloud Storage انتخاب کرده اید انتخاب کرده و سپس Enter (یا return MACOS) را فشار دهید.
5. هنگامی که از Set up automatic builds and deploys with GitHub? ، N فشار دهید.

برنامه وب Video Hint را اجرا و مشاهده کنید

1. در ترمینال خود ، وابستگی ها را در پوشه های video-hint-start و functions نصب کنید ، و سپس برنامه را اجرا کنید:

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

2. در مرورگر خود ، به URL میزبان میزبان محلی بروید. در بیشتر موارد ، این http: // localhost: 5000/ یا چیزی مشابه است.

این صفحه باید بارگیری شود ، اما متوجه خواهید شد که ویژگی های مختلفی از دست رفته است. ما این موارد را در مراحل بعدی این CodeLab اضافه خواهیم کرد.

عیب یابی در حال اجرا برنامه وب

اگر یک پیام خطا مانند Error: The query requires an index. You can create it here: https://console.firebase.google.com در صفحه کنسول DevTools ، این مراحل را دنبال کنید:

1. به URL ارائه شده بروید.

2. روی ذخیره کلیک کنید و منتظر تغییر وضعیت از ساختمان به فعال باشید.

14. عملکرد را به برنامه ویدیویی اضافه کنید

در آخرین مرحله از این CodeLab ، شما برنامه ویدیویی را به صورت محلی اجرا کردید ، اما عملکرد زیادی نداشت و هنوز از پسوند نصب شده استفاده نکرد. در این مرحله از CodeLab ، این قابلیت را اضافه می کنید و از برنامه وب برای ایجاد پسوند استفاده می کنید.

استقرار قوانین امنیتی

این برنامه نمونه CodeLab شامل مجموعه ای از قوانین امنیتی برای Firestore و ذخیره سازی ابری برای Firebase است. پس از استقرار این قوانین امنیتی در پروژه Firebase خود ، داده های موجود در پایگاه داده و سطل شما از سوء استفاده بهتر محافظت می شوند.

شما می توانید این قوانین را در پرونده های firestore.rules و storage.rules مشاهده کنید.

1. برای استقرار این قوانین امنیتی ، این دستور را در ترمینال خود اجرا کنید:

   firebase deploy --only firestore:rules,storage
   

2. اگر از شما سؤال شده است: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ، بله را انتخاب کنید.

کد را برای ترکیب توابع به روز کنید

1. در ویرایشگر کد خود ، پوشه functions را گسترش دهید.
   این پوشه شامل چندین کارکرد است که برای تشکیل یک خط لوله پسوند ترکیب می شوند. جدول زیر هر عملکرد را لیست و توصیف می کند:

   تابع	شرح
   functions/01-handle-video-upload.js	اولین قدم در خط لوله پسوند. این پرونده ویدیویی بارگذاری شده کاربر را پردازش می کند.
   functions/02-handle-video-labels.js	مرحله دوم در خط لوله پسوند. این فایل برچسب های ویدیویی را که توسط storage-label-videos ساخته شده است ، پردازش می کند.
   functions/03-handle-audio-file.js	مرحله سوم در خط لوله پسوند. این پرونده صوتی رونویسی شده را کنترل می کند.

   با این حال ، شما هنوز هم باید پرونده ای اضافه کنید که این توابع را با هم گروه بندی کند.
2. در پرونده functions/index.js ، کد زیر را اضافه کنید:

   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();
   

این کد از ماژول های JavaScript برای وارد کردن و صادرات توابع از پرونده index.js استفاده می کند تا یک مکان متمرکز برای همه توابع وجود داشته باشد.

برای مدیریت آپلود ویدیو، کد را به روز کنید

1. در ویرایشگر کد خود ، پرونده lib/firebase/storage.js را باز کنید.
2. عملکرد uploadVideo را پیدا کنید.
   این تابع پارامترهای userId ، filePath و file را دریافت می کند. این داده ها برای بارگذاری پرونده در ذخیره سازی ابری کافی است.
3. در بدنه عملکرد uploadVideo ، کد زیر را اضافه کنید:

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

توابع خود را مستقر کنید

برای استقرار کارکردهای خود با Firebase CLI ، این مراحل را دنبال کنید:

1. در ترمینال خود در حالی که هنوز در پوشه video-hint-start ، Control+C فشار دهید تا روند فعلی متوقف شود.
2. توابع خود را مستقر کنید:

   firebase deploy --only functions
   

   اگر از شما در مورد حذف هرگونه عملکرد ابر قبلی سؤال می شود ، No انتخاب کنید.
3. اگر پیامی مشابه Permission denied while using the Eventarc Service Agent مشاهده می کنید ، چند دقیقه صبر کنید و سپس دستور را امتحان کنید.
4. پس از اتمام دستور ، دوباره برنامه را به صورت محلی اجرا کنید:

   firebase emulators:start --only hosting
   

برنامه وب Video Hint را دوباره اجرا و مشاهده کنید (اکنون با قابلیت)

برای اجرای و مشاهده برنامه وب کاربردی اکنون ، این مراحل را دنبال کنید:

1. در مرورگر خود ، زبانه ای را که در آن به http: // localhost: 5000 حرکت کرده اید ، پیدا کنید.
2. در صورت لزوم ، روی ورود به سیستم با Google کلیک کنید و حساب Google خود را انتخاب کنید.
3. برای دیدن نتایج خلاصه ویدیو ، بارگذاری ویدیوی شماره 1 را بارگذاری کنید و چند دقیقه صبر کنید.
4. اگر پس از بارگذاری ویدیو نتیجه ای نمی بینید ، خطاهای عیب یابی را با توابع ابر در پیوست این CodeLab مشاهده کنید.

15. نتیجه گیری

تبریک می گویم! شما در این CodeLab به چیزهای زیادی رسیدید!

افزونه های Firebase را نصب و پیکربندی کرد

شما از کنسول Firebase برای پیکربندی و نصب پسوندهای مختلف هوش مصنوعی استفاده کردید. استفاده از برنامه های افزودنی راحت است زیرا نیازی به نوشتن کد دیگهای بخار زیادی نیست که با تأیید اعتبار با Google Cloud Services ، خواندن و نوشتن از Firestore و تعامل با Google Cloud Services - و ظرافت های مختلفی که درگیر این کارها هستند ، بنویسید.

با استفاده از کنسول Firebase با برنامه های افزودنی کار کرد

به جای پریدن مستقیم به کد ، شما وقت خود را گرفتید تا درک کنید که چگونه پسوندهای AI کار می کنند ، بر اساس ورودی که از طریق کنسول به Firestore یا Cloud Storage تهیه کرده اید. در صورت نیاز به اشکال زدایی خروجی پسوند ، این نوع تعامل می تواند به ویژه مفید باشد.

ساخت سه برنامه وب مبتنی بر هوش مصنوعی که از افزونه های Firebase استفاده می کنند

بصورت عام

در برنامه Webly Web ، شما از وظایف زبانی با پسوند API PALM استفاده کردید تا بررسی های طولانی را که کاربران برای یک محصول تی شرت ترک کرده اند ، خلاصه کنید. شما همچنین درخواست کردید که مدل زبان پاسخ JSON را به پرس و جو شما ارائه دهد ، جایی که JSON یک امتیاز ستاره و یک بررسی خلاصه از بررسی اصلی طولانی را ارائه داد.

ورزش اختیاری : شرکت تی شرت از بررسی های خلاصه شده خوشحال است ، اما آنها خلاصه ای از ماهیت این نقص را خواسته اند. آیا می توانید سریعاً برای بازگشت خلاصه ای از نقص تنظیم کنید و سپس آن خلاصه را در رابط کاربری برنامه وب قرار دهید؟

چت بات

در برنامه وب Chatbot ، شما از chatbot با پسوند Palm API استفاده کرده اید تا رابط چت تعاملی را در اختیار کاربر قرار دهید ، که شامل زمینه تاریخی در مکالمات است - جایی که هر پیام در یک سند firestore ذخیره می شود که به یک کاربر خاص منتقل می شود.

ورزش اختیاری : دانش آموزان از Chatbot راضی بوده اند ، اما کارکنان چند پیشرفت را دوست دارند. پس از ارائه پاسخ آنها ، باید به دانش آموزان سؤالات تحریک آمیز داده شود. مثلا:

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?

نکته: برای دستیابی به این هدف می توانید از یک گزینه زمینه قابل تنظیم استفاده کنید.

تذکر

در برنامه وب ویدیویی ، شما از متن تبدیل به گفتار ، وظایف زبانی با Palm API و فیلم های برچسب با پسوندهای ویدئویی ابری استفاده کرده اید تا یک خط لوله پسوند ایجاد شود که منجر به توصیف متن و صوتی یک فیلم می شود.

تمرین اختیاری : وزارت امور خارجه نمونه اولیه را جالب دانست ، و اکنون آنها همچنین دوست دارند که یک کاربر بتواند روی یک برچسب مبتنی بر متن کلیک کند تا به نقطه ای از ویدئویی که برچسب در آن تشخیص داده می شود ، پرش کند.

16. ضمیمه: عیب یابی خطاها با توابع ابری

اگر برنامه وب شما آنطور که انتظار می رود کار نمی کند و فکر می کنید ممکن است به دلیل عملکرد باشد، مراحل این صفحه عیب یابی را دنبال کنید.

اجازه دسترسی بدون احراز هویت عمومی

اگر در پانل کنسول Chrome DevTools خطاهای مرتبط با مجوز دریافت کردید، این مراحل را دنبال کنید:

1. مرور کلی احراز هویت | صفحه Cloud Run
2. برای مشاهده و تکمیل وظایف مورد نیاز برای اجازه دسترسی غیرقانونی عمومی به عملکرد، روی پیوند کلیک کنید.

3. به برنامه Reviewly برگردید. به عنوان مثال: http://localhost:8080.
4. روی افزودن چند بررسی ساختگی کلیک کنید و چند ثانیه صبر کنید.
   • اگر نظرات ظاهر شوند: نیازی نیست این مراحل عیب‌یابی را ادامه دهید، و می‌توانید مستقیماً به تنظیمات بخش برنامه وب Chatbot در این کد لبه بروید.
   • اگر نظرات ظاهر نشدند: با این بخش عیب‌یابی ادامه دهید.

خطاهای مجوز ناکافی را مدیریت کنید

1. در کنسول Firebase، به Functions بروید.
2. روی عملکرد addMockReviews حرکت کنید و سپس کلیک کنید > مشاهده سیاهههای مربوط .

3. از طریق سیاههها حرکت کنید تا زمانی که خطایی مشابه یکی از موارد زیر پیدا کنید:

   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 Cloud Console، به صفحه مجوزهای IAM بروید و سپس پروژه خود را انتخاب کنید.
5. در جدول، ستون Name را پیدا کنید.
   در صفحه IAM & Admin جدولی از کاربران و نقش ها وجود دارد. ستون نام در جدول توضیح می دهد که کاربر یا اصل برای چه چیزی است. ممکن است یک اصل با نام حساب پیش فرض خدمات محاسباتی داشته باشید.

اگر حساب پیش فرض سرویس محاسباتی را مشاهده کردید، این مراحل را دنبال کنید:

1. کلیک ویرایش اصلی .

2. با قسمت Add roles to Default compute service account در این Codelab ادامه دهید.

اگر حساب پیش‌فرض سرویس محاسباتی را نمی‌بینید، این مراحل را دنبال کنید:

1. روی Grant Access کلیک کنید.
2. در کادر متن جدید Principals ، compute وارد کنید.
3. در منوی پیشنهادات خودکار که ظاهر می‌شود، حساب خدمات محاسبه پیش‌فرض را انتخاب کنید.

نقش ها را به حساب پیش فرض سرویس محاسباتی اضافه کنید

در بخش Assign roles از حساب پیش فرض سرویس محاسباتی :

1. منوی Select a role را باز کنید.
2. در کادر متن فیلتر ، Cloud Datastore User وارد کنید.
3. در منوی پیشنهادات خودکار که ظاهر می‌شود، Cloud Datastore user را انتخاب کنید.
4. کلیک نقش دیگری را اضافه کنید .
   1. منوی Select a role را باز کنید.
   2. در کادر متن فیلتر ، Cloud Storage for Firebase Admin شوید.
   3. در منوی پیشنهادات خودکار که ظاهر می‌شود، Cloud Storage for Firebase Admin را انتخاب کنید.
5. کلیک نقش دیگری را اضافه کنید .
   1. منوی Select a role را باز کنید.
   2. در جعبه متن فیلتر ، Cloud Storage for Firebase Service Agent شوید.
   3. در منوی پیشنهادات خودکار که ظاهر می‌شود، Cloud Storage for Firebase Service Agent را انتخاب کنید.
6. روی ذخیره کلیک کنید.