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

۱. قبل از شروع

افزونه‌های فایربیس به شما این امکان را می‌دهند که با حداقل کد، قابلیت‌های از پیش آماده‌شده‌ای را به برنامه‌های خود اضافه کنید - حتی قابلیت‌های مبتنی بر هوش مصنوعی. این آزمایشگاه کد به شما نشان می‌دهد که چگونه دو افزونه فایربیس را در یک برنامه وب ادغام کنید تا بتوانید از API Gemini برای تولید توضیحات تصویر، خلاصه‌سازی‌ها و حتی توصیه‌های شخصی‌سازی‌شده بر اساس زمینه ارائه شده و ورودی کاربر نهایی استفاده کنید.

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

پیش‌نیازها

• آشنایی با Node.js، Next.js و TypeScript.

آنچه یاد خواهید گرفت

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

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

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

۲. برنامه وب، سرویس‌های فایربیس و افزونه‌ها را بررسی کنید

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

برنامه وب

در این آزمایشگاه کد، شما یک برنامه وب به نام Friendly Conf خواهید ساخت.

کارکنان کنفرانس دوستانه تصمیم گرفتند از هوش مصنوعی برای ایجاد یک تجربه کاربری لذت‌بخش و شخصی‌سازی‌شده برای شرکت‌کنندگان خود استفاده کنند. اپلیکیشن کنفرانس تکمیل‌شده، یک چت‌بات هوش مصنوعی مکالمه‌ای را در اختیار شرکت‌کنندگان قرار می‌دهد که توسط یک مدل هوش مصنوعی مولد چندوجهی (که به عنوان مدل زبان بزرگ یا LLM نیز شناخته می‌شود) پشتیبانی می‌شود و می‌تواند به سؤالات مربوط به موضوعات کلی، متناسب با برنامه و مباحث کنفرانس، پاسخ دهد. این چت‌بات دارای پیشینه و دانش در مورد تاریخ/زمان فعلی و موضوعات و برنامه کنفرانس دوستانه است، بنابراین پاسخ‌های آن می‌تواند در تمام این زمینه‌ها لحاظ شود.

سرویس‌های فایربیس

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

افزونه‌های فایربیس

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

• ساخت چت‌بات با Gemini API
• وظایف چندوجهی با API Gemini

افزونه‌ها مفید هستند زیرا به رویدادهایی که در پروژه Firebase شما اتفاق می‌افتد واکنش نشان می‌دهند. هر دو افزونه‌ای که در این آزمایشگاه کد استفاده شده‌اند، هنگام ایجاد اسناد جدید در مجموعه‌های از پیش تنظیم شده در Cloud Firestore واکنش نشان می‌دهند.

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

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

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

   node -v
   

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

کد منبع codelab را دریافت کنید

اگر حساب گیت‌هاب دارید:

1. با استفاده از الگوی ما از github.com/FirebaseExtended/codelab-gemini-api-extensions یک مخزن جدید ایجاد کنید
2. مخزن گیت‌هاب codelab که تازه ایجاد کرده‌اید را کلون کنید:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

اگر گیت را نصب ندارید یا ترجیح می‌دهید مخزن جدیدی ایجاد نکنید:

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

بررسی ساختار پوشه‌ها

پوشه ریشه شامل یک فایل README.md است که با استفاده از دستورالعمل‌های ساده، شروع سریعی برای اجرای برنامه وب ارائه می‌دهد. با این حال، اگر شما یک یادگیرنده تازه‌کار هستید، باید این codelab (به جای quickstart) را تکمیل کنید زیرا codelab شامل جامع‌ترین مجموعه دستورالعمل‌ها است.

اگر مطمئن نیستید که کد را به درستی طبق دستورالعمل‌های این آزمایشگاه کد اعمال کرده‌اید یا خیر، می‌توانید کد راه‌حل را در شاخه end git پیدا کنید.

نصب رابط خط فرمان فایربیس

1. تأیید کنید که Firebase CLI نصب شده است و نسخه آن ۱۳.۶ یا بالاتر است:

   firebase --version
   

2. اگر Firebase CLI را نصب کرده‌اید، اما نسخه ۱۳.۶ یا بالاتر نیست، آن را به‌روزرسانی کنید:

   npm update -g firebase-tools
   

3. اگر Firebase CLI را نصب ندارید، آن را نصب کنید:

   npm install -g firebase-tools
   

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

وارد فایربیس شوید

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

   cd codelab-gemini-api-extensions
   firebase login
   

   اگر ترمینال شما می‌گوید که قبلاً به Firebase وارد شده‌اید، می‌توانید از بخش «راه‌اندازی پروژه Firebase» در این آزمایشگاه کد عبور کنید.
2. در ترمینال خود، بسته به اینکه می‌خواهید Firebase داده‌ها را جمع‌آوری کند یا خیر، Y یا N را وارد کنید. (هر دو گزینه برای این codelab کار می‌کند)
3. در مرورگر خود، حساب گوگل خود را انتخاب کرده و روی «مجاز» کلیک کنید.

۴. پروژه فایربیس خود را راه‌اندازی کنید

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

تمام مراحل این بخش در کنسول Firebase انجام می‌شود.

ایجاد یک پروژه فایربیس

1. با استفاده از همان حساب گوگلی که در مرحله قبل استفاده کردید، وارد کنسول Firebase شوید.
2. برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (برای مثال، AI Extensions Codelab ).
   
3. روی ادامه کلیک کنید.
4. در صورت درخواست، شرایط Firebase را مرور و قبول کنید و سپس روی ادامه کلیک کنید.
5. (اختیاری) دستیار هوش مصنوعی را در کنسول Firebase (با نام "Gemini در Firebase") فعال کنید.
6. برای این codelab، به گوگل آنالیتیکس نیاز ندارید ، بنابراین گزینه گوگل آنالیتیکس را غیرفعال کنید .
7. روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما آماده شود و سپس روی ادامه کلیک کنید.

طرح قیمت‌گذاری فایربیس خود را ارتقا دهید

برای استفاده از افزونه‌های فایربیس (و سرویس‌های ابری زیربنایی آنها) و همچنین فضای ذخیره‌سازی ابری برای فایربیس، پروژه فایربیس شما باید در طرح قیمت‌گذاری پرداخت در محل (Blaze) باشد، به این معنی که به یک حساب پرداخت ابری متصل باشد.

• یک حساب Cloud Billing به یک روش پرداخت، مانند کارت اعتباری، نیاز دارد.
• اگر در استفاده از فایربیس و گوگل کلود تازه‌کار هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار ۳۰۰ دلاری و یک حساب کاربری رایگان ابری هستید یا خیر.
• اگر این codelab را به عنوان بخشی از یک رویداد انجام می‌دهید، از برگزارکننده خود بپرسید که آیا امکان استفاده از فضای ابری (Cloud credits) وجود دارد یا خیر.

همچنین توجه داشته باشید که با فعال بودن قابلیت پرداخت در پروژه Firebase خود، هزینه تماس‌هایی که افزونه با API Gemini برقرار می‌کند از شما دریافت خواهد شد (صرف نظر از اینکه کدام ارائه‌دهنده را انتخاب کنید، Google AI یا Vertex AI). درباره قیمت‌گذاری Google AI و Vertex AI بیشتر بدانید.

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

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

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

1. به صفحه نمای کلی پروژه در پروژه Firebase خود بروید و سپس کلیک کنید وب .
2. در کادر متنی «نام مستعار برنامه» ، یک نام مستعار به یاد ماندنی برای برنامه وارد کنید، مانند My AI Extensions
3. روی ثبت برنامه > بعدی > بعدی > ادامه برای کنسول کلیک کنید.
   شما می‌توانید از تمام مراحل مربوط به «میزبانی» در جریان برنامه وب صرف نظر کنید، زیرا بعداً در این آزمایشگاه کد، به صورت اختیاری یک سرویس میزبانی راه‌اندازی خواهید کرد.

عالی! شما اکنون یک برنامه وب را در پروژه جدید Firebase خود ثبت کرده‌اید.

راه اندازی احراز هویت فایربیس

1. با استفاده از پنل ناوبری سمت چپ، به بخش احراز هویت (Authentication) بروید.
2. روی شروع به کار کلیک کنید.
3. در ستون ارائه دهندگان اضافی ، روی Google > Enable کلیک کنید.
4. در کادر متن «نام پروژه برای عموم» ، یک نام مفید مانند My AI Extensions Codelab وارد کنید.
5. در منوی ایمیل پشتیبانی برای پروژه ، آدرس ایمیل خود را انتخاب کنید.
6. روی ذخیره کلیک کنید.

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

1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Firestore database را انتخاب کنید.
2. روی ایجاد پایگاه داده کلیک کنید.
3. شناسه پایگاه داده را روی (default) تنظیم کنید.
4. مکانی را برای پایگاه داده خود انتخاب کنید، سپس روی Next کلیک کنید.
   برای یک اپلیکیشن واقعی، شما می‌خواهید مکانی را انتخاب کنید که به کاربرانتان نزدیک باشد.
5. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
   بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای پایگاه داده خود، برنامه را به صورت عمومی توزیع یا افشا نکنید .
6. روی ایجاد کلیک کنید.

راه‌اندازی فضای ذخیره‌سازی ابری برای فایربیس

1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Storage را انتخاب کنید.
2. روی شروع به کار کلیک کنید.
3. مکانی را برای سطل ذخیره‌سازی پیش‌فرض خود انتخاب کنید.
   کاربران در US-WEST1 ، US-CENTRAL1 و US-EAST1 می‌توانند از ردیف «همیشه رایگان» برای Google Cloud Storage بهره‌مند شوند. کاربران در سایر مناطق ، از قیمت‌ها و میزان استفاده از Google Cloud Storage پیروی می‌کنند.
4. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
   بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای مخزن ذخیره‌سازی خود، برنامه را به صورت عمومی توزیع یا در معرض نمایش قرار ندهید .
5. روی ایجاد کلیک کنید.

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

۵. افزونه‌ی «ساخت چت‌بات با رابط برنامه‌نویسی Gemini» را راه‌اندازی کنید

افزونه‌ی «ساخت چت‌بات با Gemini API» را نصب کنید.

1. به افزونه‌ی «ساخت چت‌بات با استفاده از رابط برنامه‌نویسی Gemini» بروید.
2. روی نصب در کنسول Firebase کلیک کنید.
3. پروژه Firebase خود را انتخاب کنید و سپس روی Next کلیک کنید.
4. در بخش «بررسی APIهای فعال‌شده و منابع ایجادشده» ، روی «فعال کردن» در کنار هر سرویسی که به شما پیشنهاد می‌شود کلیک کنید و سپس روی «بعدی» کلیک کنید.
5. برای هر مجوزی که به شما پیشنهاد می‌شود، «اعطای مجوز» را انتخاب کنید و سپس روی «بعدی» کلیک کنید.
6. افزونه را پیکربندی کنید:
   1. در منوی Gemini API Provider ، انتخاب کنید که آیا می‌خواهید از Gemini API از Google AI یا Vertex AI استفاده کنید. برای توسعه‌دهندگانی که از Firebase استفاده می‌کنند، توصیه می‌کنیم از Vertex AI استفاده کنند.
   2. در کادر متن مسیر مجموعه Firestore ، users/{uid}/discussion/{discussionId}/messages را وارد کنید.
      در مراحل بعدی این آزمایشگاه کد، اضافه کردن اسناد به این مجموعه، افزونه را وادار به فراخوانی رابط برنامه‌نویسی Gemini خواهد کرد.
   3. در منوی موقعیت مکانی Cloud Functions ، مکان مورد نظر خود را انتخاب کنید (مانند Iowa (us-central1) یا مکانی که قبلاً برای پایگاه داده Firestore خود مشخص کرده‌اید).
   4. تمام مقادیر دیگر را به صورت پیش‌فرض باقی بگذارید.
7. روی نصب افزونه کلیک کنید و منتظر بمانید تا افزونه نصب شود.

افزونه‌ی «ساخت چت‌بات با Gemini API» را امتحان کنید

اگرچه هدف این آزمایشگاه کد، تعامل با افزونه‌ی «ساخت چت‌بات با رابط برنامه‌نویسی Gemini» از طریق یک برنامه‌ی وب است، اما بهتر است ابتدا با امتحان کردن این افزونه در کنسول Firebase، نحوه‌ی کار آن را بیاموزید.

این افزونه هر زمان که یک سند Firestore در مجموعه users/{uid}/discussion/{discussionId}/messages ایجاد شود، فعال می‌شود، که می‌توانید این کار را در کنسول Firebase انجام دهید.

1. در کنسول Firebase، به Firestore بروید و سپس کلیک کنید جمع‌آوری را از ستون اول شروع کنید .
2. در کادر متنی شناسه مجموعه ، نام users را وارد کنید و سپس روی بعدی کلیک کنید.
3. در کادر متنی شناسه سند ، روی شناسه خودکار کلیک کنید و سپس روی ذخیره کلیک کنید.
4. در مجموعه users ، کلیک کنید شروع جمع‌آوری .
5. در کادر متنی شناسه مجموعه ، messages را وارد کنید و سپس روی بعدی کلیک کنید.
   1. در کادر متنی شناسه سند ، روی شناسه خودکار کلیک کنید.
   2. در کادر متن فیلد ، prompt را وارد کنید
   3. در کادر متنی Value ، Tell me 5 random fruits را وارد کنید.
6. روی ذخیره کلیک کنید و چند ثانیه صبر کنید.

وقتی این سند را اضافه کردید، افزونه باعث شد تا API مربوط به Gemini را فراخوانی کند. سندی که به مجموعه messages اضافه کردید، اکنون نه تنها شامل prompt شما، بلکه شامل response مدل به درخواست شما نیز می‌شود.

با اضافه کردن یک سند دیگر به مجموعه messages ، افزونه را دوباره فعال کنید:

1. در مجموعه messages ، کلیک کنید سند اضافه کنید .
2. در کادر متنی شناسه سند ، روی شناسه خودکار کلیک کنید.
3. در کادر متن فیلد ، prompt را وارد کنید
4. در کادر متنی Value ، عبارت And now, vegetables را وارد کنید.
5. روی ذخیره کلیک کنید و چند ثانیه صبر کنید. سندی که به مجموعه messages اضافه کرده‌اید، اکنون شامل response به درخواست شما است.
   
   هنگام تولید این پاسخ، مدل Gemini از دانش تاریخی حاصل از پرس‌وجوی قبلی شما استفاده کرد.

۶. برنامه وب را تنظیم کنید

برای اجرای برنامه وب، باید دستورات را در ترمینال خود اجرا کنید و کد را در ویرایشگر کد خود اضافه کنید.

رابط خط فرمان فایربیس را برای اجرا در پروژه فایربیس خود تنظیم کنید

در ترمینال خود، با اجرای دستور زیر به CLI بگویید که از پروژه Firebase شما استفاده کند:

firebase use YOUR_PROJECT_ID

استقرار قوانین امنیتی برای Firestore و Cloud Storage

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

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

   firebase deploy --only firestore:rules,storage
   

2. اگر از شما پرسیده شد که آیا می‌خواهید به Cloud Storage نقش IAM برای استفاده از قوانین بین سرویسی را بدهید، Y یا N را وارد کنید. (هر دو گزینه برای این codelab کار می‌کند)

برنامه وب خود را به پروژه Firebase خود وصل کنید

کدبیس برنامه وب شما باید بداند که از کدام پروژه Firebase برای پایگاه داده، فضای ذخیره‌سازی و غیره استفاده کند. شما این کار را با اضافه کردن پیکربندی Firebase خود به کدبیس برنامه خود انجام می‌دهید.

1. پیکربندی Firebase خود را دریافت کنید:
   1. در کنسول فایربیس، به تنظیمات پروژه در پروژه فایربیس خود بروید.
   2. به بخش «برنامه‌های شما» (Your apps) بروید و برنامه وب ثبت‌شده خود را انتخاب کنید.
   3. در پنل تنظیمات و پیکربندی SDK ، کد کامل initializeApp شامل const مربوط به firebaseConfig را کپی کنید.
2. پیکربندی Firebase خود را به کدبیس برنامه وب خود اضافه کنید:
   1. در ویرایشگر کد خود، فایل src/lib/firebase/firebase.config.js را باز کنید.
   2. همه موارد موجود در فایل را انتخاب کنید و کدی را که کپی کرده‌اید جایگزین کنید.
   3. فایل را ذخیره کنید.

پیش‌نمایش برنامه وب را در مرورگر خود مشاهده کنید

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

   npm install
   npm run dev
   

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

از چت‌بات برنامه وب استفاده کنید

1. در مرورگر خود، به تبی که برنامه وب Friendly Conf به صورت محلی در آن اجرا می‌شود، برگردید.
2. روی «ورود با گوگل» کلیک کنید و در صورت لزوم، حساب گوگل خود را انتخاب کنید.
3. پس از ورود به سیستم، یک پنجره چت خالی مشاهده خواهید کرد.
4. یک عبارت خوشامدگویی (مثل hi ) تایپ کنید و سپس روی ارسال کلیک کنید.
5. چند ثانیه صبر کنید تا ربات چت پاسخ دهد.

چت‌بات موجود در برنامه با یک پاسخ عمومی پاسخ می‌دهد.

چت‌بات را برای اپلیکیشن اختصاصی کنید

شما به مدل Gemini زیربنایی که توسط چت‌بات برنامه وب شما استفاده می‌شود نیاز دارید تا جزئیات مربوط به کنفرانس را هنگام تولید پاسخ برای شرکت‌کنندگان با استفاده از برنامه، بداند. روش‌های زیادی برای کنترل و هدایت این پاسخ‌ها وجود دارد و در این بخش از codelab، ما با ارائه "زمینه" در اعلان اولیه (به جای فقط ورودی از کاربر برنامه وب) یک روش بسیار اساسی را به شما نشان می‌دهیم.

1. در برنامه وب مرورگر خود، با کلیک روی دکمه قرمز "x" (کنار پیام در تاریخچه چت) مکالمه را پاک کنید.
2. در ویرایشگر کد خود، فایل src/app/page.tsx را باز کنید.
3. به پایین اسکرول کنید و کد موجود در خط ۹۳ یا نزدیک به آن که prompt: userMsg نشان می‌دهد، با کد زیر جایگزین کنید:
   prompt: preparePrompt(userMsg, messages),
4. فایل را ذخیره کنید.
5. به برنامه وب که در مرورگر شما اجرا می‌شود، برگردید.
6. دوباره، یک عبارت خوشامدگویی (مثل hi ) تایپ کنید و سپس روی ارسال کلیک کنید.
7. چند ثانیه صبر کنید تا ربات چت پاسخ دهد.

چت‌بات با دانشی که از زمینه ارائه شده در src/app/lib/context.md هدایت می‌شود، پاسخ می‌دهد. حتی اگر شما درخواست خاصی را تایپ نکرده باشید، مدل Gemini بر اساس این زمینه و همچنین تاریخ/زمان فعلی، یک توصیه شخصی‌سازی شده تولید می‌کند. اکنون می‌توانید سوالات تکمیلی را مشخص کنید و عمیق‌تر بررسی کنید.

این زمینه‌ی گسترش‌یافته برای چت‌بات مهم است، اما نباید آن را به کاربر برنامه‌ی وب نشان دهید. در اینجا نحوه‌ی پنهان کردن آن آمده است:

1. در ویرایشگر کد خود، فایل src/app/page.tsx را باز کنید.
2. به پایین اسکرول کنید و کد موجود در خط ۵۶ یا نزدیک به آن که می‌گوید ...doc.data(), با کد زیر جایگزین کنید:
   ...prepareMessage(doc.data()),
3. فایل را ذخیره کنید.
4. به برنامه وب که در مرورگر شما اجرا می‌شود، برگردید.
5. صفحه را دوباره بارگذاری کنید.

همچنین می‌توانید قابلیت مکالمه با چت‌بات با استفاده از پیشینه‌ی تاریخی را امتحان کنید:

1. در کادر متن «نوشتن پیام» ، سوالی مانند این بپرسید: Any other interesting talks about AI? ربات چت پاسخی را برمی‌گرداند.
2. در کادر متنی «نوشتن پیام» ، یک سؤال تکمیلی مرتبط با سؤال قبلی بپرسید: Give me a few more details about the last one.

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

۷. افزونه‌ی «وظایف چندوجهی با رابط برنامه‌نویسی Gemini» را راه‌اندازی کنید

افزونه‌ی «وظایف چندوجهی با رابط برنامه‌نویسی Gemini» رابط برنامه‌نویسی Gemini را با پیام‌های چندوجهی فراخوانی می‌کند که شامل یک پیام متنی و همچنین یک URL فایل پشتیبانی‌شده یا URL ذخیره‌سازی ابری هستند (توجه داشته باشید که حتی API هوش مصنوعی Gemini گوگل نیز از یک URL ذخیره‌سازی ابری به عنوان زیرساخت URL فایل زیربنایی خود استفاده می‌کند). این افزونه همچنین از متغیرهای handlebars برای جایگزینی مقادیر از سند Cloud Firestore برای سفارشی‌سازی پیام متنی پشتیبانی می‌کند.

در برنامه خود، هر زمان که تصویری را در یک مخزن ذخیره‌سازی ابری آپلود می‌کنید، می‌توانید یک URL ایجاد کنید و آن URL را به یک سند جدید Cloud Firestore اضافه کنید - به این ترتیب افزونه را برای ایجاد یک اعلان چندوجهی و فراخوانی Gemini API فعال می‌کند. در کد منبع این codelab، ما قبلاً کد لازم برای آپلود تصویر و نوشتن URL در یک سند Firestore را ارائه داده‌ایم.

افزونه‌ی «وظایف چندوجهی با رابط برنامه‌نویسی Gemini» را نصب کنید.

1. به افزونه‌ی «وظایف چندوجهی با رابط برنامه‌نویسی نرم‌افزار Gemini» بروید.
2. روی نصب در کنسول Firebase کلیک کنید.
3. پروژه فایربیس خود را انتخاب کنید.
4. روی بعدی > بعدی > بعدی کلیک کنید تا به بخش پیکربندی افزونه برسید.
   1. در منوی Gemini API Provider ، انتخاب کنید که آیا می‌خواهید از Gemini API از Google AI یا Vertex AI استفاده کنید. برای توسعه‌دهندگانی که از Firebase استفاده می‌کنند، توصیه می‌کنیم از Vertex AI استفاده کنند.
   2. در کادر متن مسیر مجموعه Firestore ، gallery را وارد کنید.
   3. در کادر متن درخواست ، عبارت زیر را وارد کنید: Please describe the provided image; if there is no image, say "no image"
   4. در کادر متن فیلد تصویر ، image را وارد کنید.
   5. در منوی موقعیت مکانی Cloud Functions ، مکان مورد نظر خود را انتخاب کنید (مانند Iowa (us-central1) یا مکانی که قبلاً برای پایگاه داده Firestore خود مشخص کرده‌اید).
   6. تمام مقادیر دیگر را به صورت پیش‌فرض باقی بگذارید.
5. روی نصب افزونه کلیک کنید و منتظر بمانید تا افزونه نصب شود.

افزونه‌ی «وظایف چندوجهی با رابط برنامه‌نویسی نرم‌افزار Gemini» را امتحان کنید

اگرچه هدف این آزمایشگاه کد، تعامل با افزونه‌ی «وظایف چندوجهی با رابط برنامه‌نویسی Gemini» از طریق یک برنامه‌ی وب است، اما بهتر است ابتدا با امتحان کردن این افزونه در کنسول Firebase، نحوه‌ی کار آن را بیاموزید.

این افزونه هر زمان که یک سند Firestore در مجموعه users/{uid}/gallery ایجاد شود، فعال می‌شود، که می‌توانید این کار را در کنسول Firebase انجام دهید. سپس این افزونه، آدرس اینترنتی تصویر Cloud Storage را در سند Cloud Firestore دریافت کرده و آن را به عنوان بخشی از اعلان چندوجهی در فراخوانی به API Gemini ارسال می‌کند.

ابتدا، یک تصویر را در یک فضای ذخیره‌سازی ابری آپلود کنید:

1. به بخش Storage در پروژه Firebase خود بروید.
2. کلیک ایجاد پوشه .
3. در کادر متن نام پوشه ، gallery را وارد کنید
4. روی افزودن پوشه کلیک کنید.
5. در پوشه gallery ، روی «بارگذاری فایل» کلیک کنید.
6. یک فایل تصویری JPEG برای آپلود انتخاب کنید.

در مرحله بعد، آدرس اینترنتی فضای ذخیره‌سازی ابری (Cloud Storage URL) تصویر را به یک سند Firestore اضافه کنید (که محرک افزونه است):

1. در پروژه Firebase خود به Firestore بروید
2. کلیک جمع‌آوری را از ستون اول شروع کنید .
3. در کادر متن شناسه مجموعه ، gallery را وارد کنید و سپس روی Next کلیک کنید.
4. یک سند به مجموعه اضافه کنید:
   1. در کادر متنی شناسه سند ، روی شناسه خودکار کلیک کنید.
   2. در کادر متنی فیلد ، image را وارد کنید. در کادر مقدار، آدرس مکانی ذخیره‌سازی تصویری که آپلود کرده‌اید را وارد کنید.
5. روی افزودن فیلد کلیک کنید.
6. در کادر متن Field ، published وارد کنید. در کادر Type، مقدار boolean را انتخاب کنید. در کادر Value، true انتخاب کنید.
7. روی ذخیره کلیک کنید و چند ثانیه صبر کنید.

مجموعه gallery اکنون شامل سندی است که حاوی پاسخی به درخواست شما است.

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

1. در مرورگر خود، به تبی که برنامه وب Friendly Conf به صورت محلی در آن اجرا می‌شود، برگردید.
2. روی برگه ناوبری گالری کلیک کنید.
3. شما یک گالری از تصاویر آپلود شده و توضیحات تولید شده توسط هوش مصنوعی را مشاهده خواهید کرد. این گالری باید شامل تصویری باشد که قبلاً در پوشه gallery در بخش ذخیره‌سازی خود آپلود کرده‌اید.
4. برای آپلود روی دکمه « آپلود » کلیک کنید و یک تصویر JPEG دیگر انتخاب کنید.
5. چند ثانیه صبر کنید تا تصویر در گالری نمایش داده شود. چند لحظه بعد، توضیحات تولید شده توسط هوش مصنوعی برای تصویر تازه آپلود شده نیز نمایش داده می‌شود.

اگر می‌خواهید کد مربوط به نحوه‌ی پیاده‌سازی این مورد را درک کنید، به src/app/gallery/page.tsx در کدبیس برنامه‌ی وب مراجعه کنید.

۸. مزیت: اپلیکیشن خود را مستقر کنید

فایربیس روش‌های مختلفی برای استقرار یک برنامه وب ارائه می‌دهد. برای این آزمایشگاه کد، یکی از گزینه‌های زیر را انتخاب کنید:

• گزینه ۱: میزبانی فایربیس - اگر تصمیم دارید مخزن گیت‌هاب خودتان را ایجاد نکنید (و فقط کد منبع خود را به صورت محلی روی دستگاه خود ذخیره کنید) از این گزینه استفاده کنید.
• گزینه ۲: میزبانی برنامه Firebase - اگر می‌خواهید هر زمان که تغییرات را به مخزن GitHub خود اعمال می‌کنید، به‌طور خودکار مستقر شود، از این گزینه استفاده کنید. این سرویس جدید Firebase به‌طور خاص برای پاسخگویی به نیازهای برنامه‌های پویای Next.js و Angular ساخته شده است.

گزینه ۱: استقرار با استفاده از میزبانی فایربیس

اگر تصمیم دارید مخزن گیت‌هاب خودتان را ایجاد نکنید (و فقط کد منبع خود را به صورت محلی روی دستگاه خود ذخیره کنید) از این گزینه استفاده کنید.

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

   firebase experiments:enable webframeworks
   firebase init hosting
   

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

   firebase deploy --only hosting
   

کار تمام است! اگر برنامه خود را به‌روزرسانی کردید و می‌خواهید آن نسخه جدید را مستقر کنید، کافیست firebase deploy --only hosting دوباره اجرا کنید و Firebase Hosting برنامه شما را می‌سازد و دوباره مستقر می‌کند.

گزینه ۲: استقرار با استفاده از میزبانی برنامه Firebase

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

1. تغییرات خود را در گیت‌هاب ثبت کنید.
2. در کنسول فایربیس، در پروژه فایربیس خود به بخش App Hosting بروید.
3. روی شروع > اتصال به گیت‌هاب کلیک کنید.
4. حساب کاربری و مخزن گیت‌هاب خود را انتخاب کنید. روی «بعدی» کلیک کنید.
5. در Deployment setting > Root directory ، نام پوشه‌ای که کد منبع شما در آن قرار دارد را وارد کنید (اگر package.json شما در دایرکتوری ریشه مخزن شما نیست).
6. برای شاخه‌ی Live ، شاخه‌ی اصلی مخزن GitHub خود را انتخاب کنید. روی Next کلیک کنید.
7. یک شناسه برای بک‌اند خود وارد کنید (برای مثال، chatbot ).
8. روی «پایان» و «استقرار» کلیک کنید.

آماده شدن استقرار جدید شما چند دقیقه طول خواهد کشید. می‌توانید وضعیت استقرار را در بخش میزبانی برنامه (App Hosting ) کنسول Firebase بررسی کنید.

از این نقطه به بعد، هر بار که تغییری را به مخزن گیت‌هاب خود ارسال می‌کنید، Firebase App Hosting به طور خودکار برنامه شما را می‌سازد و مستقر می‌کند.

۹. نتیجه‌گیری

تبریک می‌گویم! شما در این آزمایشگاه کد به موفقیت‌های زیادی دست یافتید!

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

شما از کنسول Firebase برای پیکربندی و نصب افزونه‌های مختلف Firebase که از هوش مصنوعی مولد استفاده می‌کنند، استفاده کردید. استفاده از افزونه‌های Firebase راحت است زیرا نیازی به یادگیری و نوشتن تعداد زیادی کد تکراری برای مدیریت احراز هویت با سرویس‌های Google Cloud یا منطق توابع Cloud بک‌اند برای گوش دادن و تعامل با سرویس‌ها و APIهای Firestore و Google Cloud ندارید.

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

به جای اینکه مستقیماً به سراغ کدنویسی بروید، بر اساس ورودی که از طریق Firestore یا Cloud Storage ارائه داده‌اید، زمانی را صرف درک نحوه کار این افزونه‌های genAI کرده‌اید. این امر می‌تواند به ویژه هنگام اشکال‌زدایی خروجی یک افزونه مفید باشد.

ساخت یک اپلیکیشن وب مبتنی بر هوش مصنوعی

شما یک برنامه وب مبتنی بر هوش مصنوعی ساخته‌اید که از افزونه‌های فایربیس برای دسترسی به تنها چند قابلیت مدل جمینی استفاده می‌کند.

در برنامه وب، شما از افزونه «Chatbot with Gemini API» برای ارائه یک رابط چت تعاملی به کاربر استفاده می‌کنید که شامل زمینه‌های خاص برنامه و تاریخی در مکالمات است - جایی که هر پیام در یک سند Firestore که به یک کاربر خاص محدود شده است، ذخیره می‌شود.

این برنامه وب همچنین از افزونه «وظایف چندوجهی با رابط برنامه‌نویسی Gemini» برای تولید خودکار توضیحات تصویر برای تصاویر آپلود شده استفاده می‌کرد.

مراحل بعدی

• با دستورالعمل‌ها آزمایش کنید و از پنجره بزرگ زمینه در Google AI Studio یا Vertex AI Studio بهره ببرید.
• درباره جستجوی نسل افزوده بازیابی هوش مصنوعی (RAG) اطلاعات کسب کنید.
• یک آزمایشگاه کدنویسی خودآموز را امتحان کنید که نحوه اضافه کردن یک چت‌بات به یک برنامه Firebase موجود با استفاده از Genkit (که یک سرویس چارچوب هوش مصنوعی جدید است) را نشان می‌دهد.
• درباره قابلیت‌های جستجوی شباهت در Firestore و Cloud SQL برای PostgreSQL اطلاعات کسب کنید.
• به چت‌بات خود آموزش دهید که با فراخوانی تابع ، برنامه‌ی موجود شما را فراخوانی کند.