نحوه استفاده از Gemini برای کاوش و بهبود یک برنامه موجود

1. بررسی اجمالی

این Codelab نحوه استفاده از Gemini را برای ساختن یک برنامه کلاینت در بالای پشتیبان API موجود نشان می دهد.

آنچه خواهید آموخت

این آزمایشگاه برای نشان دادن استفاده از Gemini با یک برنامه موجود در نظر گرفته شده است. در این آزمایشگاه با نحوه انجام کارهای زیر آشنا می شوید:

  • راه حل Jump Start Processing Image AI/ML را اجرا کنید
  • از Gemini برای کاوش در برنامه API استفاده کنید
  • از Gemini برای ایجاد یک کلاینت برای برنامه API استفاده کنید

راه اندازی - ایجاد یک پروژه جدید

بسته به سیاست های سازمان خود، ممکن است توانایی اجرای صحیح این راه حل را نداشته باشید.

توصیه: از حسابی استفاده کنید که در آن مجوزهای کامل دارید (مانند حساب شخصی) به جای حساب شرکت یا مدرسه

توجه: اگر اخیراً پروژه ای ایجاد کرده اید که در آن مجوزهای کامل دارید و قبلاً Gemini API را در آن پروژه فعال کرده اید، می توانید به استفاده از آن پروژه ادامه دهید و از این مرحله رد شوید. به عنوان مثال، اگر اخیراً یکی دیگر از کدهای Gemini را تکمیل کرده اید، می توانید از این مرحله صرف نظر کنید.

  1. به Google Cloud Console بروید
  2. روی منوی کشویی پروژه فعلی کلیک کنید.
  3. روی New Project کلیک کنید دکمه پروژه جدید
  4. یک نام پروژه اضافه کنید و روی CREATE کلیک کنید
    • توصیه: از یک نام پروژه منحصر به فرد استفاده کنید تا Project name و Project ID یکسان باشد ایجاد فرم پروژه

2. راه حل Jump Start را اجرا کنید

Jump Start Solutions الگوهای راه حل از پیش ساخته شده از Google Cloud هستند. این آزمایشگاه از یک راه حل شروع پرش استفاده می کند تا نشان دهد که چگونه Gemini می تواند به بهبود یک برنامه از قبل موجود کمک کند.

  1. به صفحه جزئیات راه حل شروع پرش پردازش تصویر AI/ML بروید
    • روی منوی همبرگر کلیک کنید
    • در منوی فرعی محصولات و راهکارها ، روی Jump Start Solutions کلیک کنید مراحل ناوبری راه حل های پرش
    • روی AI/ML Image Processing در Cloud Functions کلیک کنید AI ML پردازش تصویر ناوبری راه حل شروع پرش
  2. روی DEPLOY کلیک کنید
    • اگر پروژه شما صورتحساب را فعال نکرده است، صورتحساب را فعال کنید .
    • نام پروژه را تایید کنید و روی ادامه کلیک کنید
    • us-central1 (Iowa) به عنوان منطقه انتخاب کنید.
    • اگر ورودی دیگری از شما خواسته شد، پیش فرض ها را بپذیرید.
    • روی DEPLOY کلیک کنید.
    • این می تواند تا 15 دقیقه طول بکشد.
    • نیازی به ایجاد هیچ تغییری ندارید، اما با خیال راحت راه حل Jump Start را بررسی کنید.

عیب یابی

  1. مشکل: آیا خطایی می بینید که می گوید Partial deployment. ?
    • راه حل: متأسفانه، این بدان معناست که احتمالاً باید استقرار را حذف کرده و دوباره شروع کنید. باید دکمه ای وجود داشته باشد که می گوید DELETE DEPLOYMENT . روی آن دکمه کلیک کنید و سپس راه حل Jump Start را مجدداً نصب کنید.

3. Gemini را فعال کنید

محیط ویرایش کد خود را تنظیم کنید و Gemini را فعال کنید

  1. به ویرایشگر پوسته ابری بروید
    • به Google Cloud Console برگردید
    • Cloud Shell Editor را در نوار جستجو تایپ کنید و از منوی بازشو روی Cloud Shell Editor کلیک کنید. مراحل باز کردن Cloud Shell Editor
    • اگر از ویرایشگر قدیمی استفاده می کنید، روی گزینه Try the new Editor کلیک کنید.
      • توجه: اگر دکمه Try the new Editor را نمی‌بینید، احتمالاً قبلاً از ویرایشگر جدید استفاده می‌کنید. ویرایشگر Legacy کار خواهد کرد، اما نماها کمی متفاوت به نظر می رسند.
    • روی نماد Open in New Window کلیک کنید باز کردن در نماد پنجره جدیدمراحل باز کردن در پنجره جدید
  2. در صورت درخواست، وارد حساب کاربری خود شوید یا مجوز دهید.
    • بسته به تنظیمات شما، ممکن است چندین بار در طول این آزمایشگاه از شما خواسته شود تا حساب خود را تأیید کنید، هنگامی که از شما خواسته شد، هر بار مجوز را انتخاب کنید.
  3. همانطور که نشان داده شده است، روی دکمه Cloud Code - Sign in در نوار وضعیت پایین کلیک کنید. پلاگین را طبق دستورالعمل مجاز کنید. دکمه ورود به سیستم برای کد ابر
  4. اگر از شما خواسته شد، روی انتخاب پروژه Google Cloud کلیک کنید و سپس پروژه مورد استفاده خود را انتخاب کنید روی انتخاب پروژه ابری گوگل کلیک کنید
  5. Gemini را فعال کنید
    • روی Cloud Code کلیک کنید لوگو کد ابری
      • توجه: بسته به اندازه صفحه نمایش شما، ممکن است یک یا دو مرحله طول بکشد. باز کردن کد ابری
    • در بخش HELP AND Feedback روی Change Settings کلیک کنید
    • Gemini: Enable
    • کادر را انتخاب کنید (اگر قبلاً انتخاب نشده باشد) تنظیمات Duet را در Cloud Shell Editor فعال کنید
    • IDE خود را دوباره بارگیری کنید.
    • این گزینه Gemini را در Cloud Code فعال می کند و نوار وضعیت Gemini در IDE شما ظاهر می شود. نوار وضعیت Gemini در دسترس است.
  6. مطابق تصویر روی دکمه Gemini در گوشه سمت راست پایین کلیک کنید و پروژه صحیح Google Cloud را انتخاب کنید. پروژه Gemini را انتخاب کنید
    • اگر خطایی مشاهده کردید که Gemini has not been enabled for your selected project . روی Enable Gemini API کلیک کنید پروژه Gemini را انتخاب کنید
  7. تأیید کنید که می‌توانید پروژه صحیح Google Cloud را در سمت چپ ببینید (نام پروژه خود را خواهید دید) و Gemini را در سمت راست، در نوار وضعیت، مطابق شکل زیر، فعال کنید: مشاهده نمای صحیح Gemini در صورت فعال شدن

4. کد Cloud Function را دانلود کنید

کد را دانلود کنید و از Gemini استفاده کنید تا درباره راه حل های Jump Start و کدی که به کار گرفته اید بیشتر بدانید.

  1. اگر دور شده اید، روی Cloud Code کلیک کنید لوگو کد ابری
  2. روی Cloud Functions کلیک کنید
    • اگر دکمه انتخاب پروژه را مشاهده کردید، روی آن کلیک کنید و پروژه ای را که با آن کار می کنید انتخاب کنید.
    • روی تابع annotate-http کلیک کنید
    • روی نماد دانلود به فضای کاری جدید کلیک کنید نماد دانلودنماد دانلود در پنل کد ابری
  3. از annotate-http-1 به عنوان نام فضای کاری استفاده کنید (باید پیش فرض باشد) و روی OK کلیک کنید
  4. فایل main.py را باز کنید
    • روی نماد Explorer کلیک کنید نماد ناوبری کاوشگر
    • برای باز کردن فایل main.py کلیک کنید فایل Explorer را با کلیک کردن روی لوگوی Gemini باز کنید
  5. روی نماد Gemini Chat کلیک کنید لوگوی جمینی
    • توجه: بسته به اندازه صفحه نمایش شما، ممکن است یک یا دو مرحله طول بکشد. جمینی را باز کنید
  6. سعی کنید از جوزا سوال بپرسید. اعلانی مانند:
    • What is a Jump Start Solution in Google Cloud?
    • Explain this code.

بازنشانی چت Gemini

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

سطل زباله چت دونفره را بازنشانی کنید

5. فراخوانی نقطه پایانی Cloud Function موجود

کد را کاوش کنید و با نقطه پایانی که در راه حل Jump Start مستقر کرده اید تماس بگیرید.

  1. اعلان را وارد کنید:
    • مهم، my-project-with-duet را در اعلان زیر با شناسه پروژه خود جایگزین کنید.
    • The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
    • شما باید پاسخی دریافت کنید که شامل دستور curl مانند این است:
      curl -X POST \
          -H "Authorization: Bearer $(gcloud auth print-access-token)" \
      ...
      
    • این دستور curl را برای استفاده در مرحله بعد کپی کنید
  2. دستور را در ترمینال جدید تست کنید
    • روی منوی همبرگر کلیک کنید
    • روی ترمینال کلیک کنید
    • روی New Terminal کلیک کنید مراحل باز کردن ترمینال جدید Cloud Shell Editor
    • دستور curl را از مرحله قبل در ترمینال قرار دهید و Enter فشار دهید تا دستور اجرا شود
    • شما باید پاسخی دریافت کنید که اینگونه شروع می شود:
      {
          "labelAnnotations": [
          {
          "mid": "/m/0csby",
          "description": "Cloud",
          "score": 0.97885925,
          "topicality": 0.97885925,
      ...
      
  3. (اختیاری) این کار را با تصویر دیگری از اینترنت عمومی با درخواست Duet با چیزی مانند:
    • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

عیب یابی

نکته در مورد عدم قطعیت: Gemini و سایر محصولاتی که توسط مدل‌های زبان بزرگ (LLM) ارائه می‌شوند، غیر قطعی هستند: به این معنی که با توجه به ورودی یکسان، ممکن است خروجی‌های متفاوتی دریافت کنید. حتی اگر مراحل را به خوبی دنبال کنید، ممکن است دستورات عملکردی را دریافت نکنید. این مراحل عیب‌یابی باید به رفع آن‌ها کمک کند.

دستور curl تولید شده باید چیزی شبیه به این باشد:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini از TEST_IMAGE در فایل main.py استفاده می کند که تصویری از برج ایفل است.

اگر دستور curl برای شما کار نمی کند، در اینجا چند چیز وجود دارد که باید بررسی کنید:

  1. مشکل: آیا نقطه پایانی URL شامل .a.run.app است؟
    • راه حل: ممکن است Duet فکر کند که در حال استقرار در Cloud Run هستید. شناسه پروژه خود را در https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate جایگزین my-project-with-duet کنید تا نقطه پایانی صحیح Cloud Functions را بدست آورید و از آن برای دستور curl
  2. مشکل: آیا نقطه پایانی URL شامل my-project-with-duet است؟
    • راه حل: my-project-with-duet را با شناسه پروژه خود جایگزین کنید.
  3. مشکل: آیا نقطه پایانی URL فاقد us-central1 است؟
    • راه حل: مطمئن شوید که URL با us-central1 شروع می شود مانند: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate با شناسه پروژه شما.
  4. مشکل: بسته به درخواست استفاده شده، گاهی اوقات نقطه پایانی ایجاد شده شبیه به cloudfunctions.net/annotate-http یا cloudfunctions.net/annotate خواهد بود. آیا نقطه پایانی URL در پایان وجود ندارد /annotate-http/annotate ؟
    • راه حل: مطمئن شوید که نقطه پایانی URL به مسیر کامل برنامه API cloudfunctions.net/annotate-http/annotate ختم شود.
  5. مشکل: درخواست cURL کار می کند، اما اطلاعات زیادی دریافت نمی کند. آیا درخواست شامل ویژگی هایی است؟
    • راه حل: این یک مشکل اساسی نیست. اگر بدون تغییر چیزی ادامه دهید، بقیه آزمایشگاه همچنان کار خواهد کرد. اگر می‌خواهید اطلاعات بیشتری دریافت کنید، می‌توانید از Duet بخواهید ویژگی‌هایی را به درخواست cURL اضافه کند.
  6. مشکل: به نظر می رسد پاسخ ها نادرست هستند یا به نظر می رسد فاقد زمینه خاص کد هستند. آیا از Gemini Chat در ویرایشگر Cloud Shell استفاده می کنید؟
    • راه حل: زمانی که از Gemini Chat در ویرایشگر پوسته ابری استفاده می کنید، فایل main.py را باز کنید و کد مربوط به درخواست خود را برجسته کنید. دستیار Gemini در سرتاسر Google Cloud زمینه متفاوتی دارد که به پاسخ‌های متفاوتی منجر می‌شود.
  7. مشکل: پاسخ سریع هنوز کاملاً درست نیست.
    • راه‌حل: یک اعلان دیگر را امتحان کنید که در آن به جمینی جهت بیشتری در مورد آنچه می‌خواهید تولید کند، بدهید. حتماً شناسه پروژه خود را جایگزین my-project-with-duet کنید. در اینجا یک مثال است:
      Give me the curl command for:
      
      1- Cloud Function running in us-central1 and project my-project-with-duet
      2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
      3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
      
  8. مشکل: بعد از تمام این مراحل عیب یابی، هنوز کار نمی کند.
    • راه حل: به دلیل ماهیت غیر قطعی LLM ها، این امکان وجود دارد که Duet پاسخی ایجاد کند که کارساز نباشد. اگر این اتفاق افتاد، دستور curl مثال بالا را کپی کنید و آن را در ترمینال اجرا کنید. حتماً شناسه پروژه خود را جایگزین my-project-with-duet کنید.

6. یک کلاینت اپلیکیشن وب برای API بسازید

از Gemini برای ایجاد یک فایل index.html که نقطه پایانی عملکرد ابری راه حل Jump Start را فراخوانی می کند، استفاده کنید. سپس فایل index.html را در میزبانی Firebase قرار دهید تا کد را در عمل مشاهده کنید.

  1. کد سمت مشتری را ایجاد کنید
    • در کادر چت Gemini، عبارت زیر را وارد کنید:
      • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
    • فایل index.html ایجاد شده در پاسخ را کپی کنید.
      • توجه: بعداً به این کد نیاز خواهید داشت، بنابراین اگر نگران از دست دادن آن هستید، آن را در جایی ذخیره کنید.
    • main.py را ببندید.
  2. یک دایرکتوری frontend جدید ایجاد کنید
    • می‌توانید از جوزا چیزی شبیه این بپرسید:
      • What are the console commands to create and navigate to a new frontend directory?
    • شما باید نتایجی مانند mkdir frontend و cd frontend را ببینید.
    • از ترمینال Cloud Shell استفاده کنید تا تأیید کنید هنوز در فهرست annotate-http-1 هستید و این دستورات را اجرا کنید:
      • cd ~/annotate-http-1
      • mkdir frontend
      • cd frontend
  3. تأیید کنید که به پروژه صحیح در ترمینال Cloud Shell وارد شده اید
    • می‌توانید از جوزا چیزی شبیه این بپرسید:
      • What is the gcloud command to set my project?
    • شما باید نتیجه ای مانند gcloud config set project my-project-with-duet را ببینید
      • تأیید کنید که شناسه پروژه درست است، سپس دستور را در ترمینال Cloud Shell اجرا کنید.
  4. Firebase را فعال کنید
    • در یک برگه جدید (ویرایشگر Cloud Shell فعلی خود را باز بگذارید)، از https://console.firebase.google.com/ دیدن کنید
    • روی افزودن پروژه کلیک کنید
    • شناسه پروژه خود را تایپ کرده و منتظر بمانید تا در منوی بازشو ظاهر شود
    • روی شناسه پروژه خود کلیک کنید
    • روی Continue کلیک کنید
    • روی تأیید طرح کلیک کنید
    • روی Continue کلیک کنید
    • فعال کردن Google Analytics را برای این پروژه از حالت انتخاب خارج کنید
      • Firebase استفاده از Google Analytics را توصیه می کند، اما از آنها در این برنامه استفاده نمی شود.
    • روی Continue کلیک کنید
    • این تب را ببندید و به Cloud Shell Editor برگردید
    • توجه: این مراحل فقط برای کاربرانی لازم است که قبلاً از Firebase استفاده نکرده‌اند، اما این امکان را به همه می‌دهد تا مسیر مشابهی را دنبال کنند. اگر در آینده دوباره این کار را انجام دهید، می توانید این مرحله را رد کنید.
  5. وارد Firebase در Cloud Shell شوید
    • در ترمینال Cloud Shell Editor، دستور firebase login --no-localhost اجرا کنید
    • از URL ارائه شده بازدید کنید
      • روی Yes کلیک کنید، من فقط این دستور را اجرا کردم
      • روی بله، این شناسه جلسه من است کلیک کنید
      • روی Copy کلیک کنید
    • به ترمینال Cloud Shell Editor برگردید
    • مقدار کپی شده را در ترمینال جایگذاری کنید، جایی که می گوید: Enter authorization code:
    • Enter فشار دهید
  6. یک وب سایت جدید برای میزبانی Firebase مستقر کنید
    • یک پروژه firebase جدید را راه اندازی کنید
      • می‌توانید از جوزا چیزی شبیه این بپرسید:
        • What are the commands to initialize and deploy a new firebase application?
      • شما باید نتایجی مانند firebase init و firebase deploy با دستورالعمل ها ببینید.
      • از آنجایی که راه‌های زیادی برای انجام این کار وجود دارد که Gemini ممکن است بسته به ترجیحات شما توصیه کند، در اینجا یک توصیه خاص برای شما وجود دارد که باید دنبال کنید:
        • firebase init
          • پیکان پایین به سمت Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
            • نوار Space را فشار دهید
            • Enter فشار دهید
          • برای Use an existing project پیکان رو به پایین بزنید
            • Enter فشار دهید
          • اگر فهرستی از پروژه‌ها را می‌بینید، به پروژه‌ای که امروز از آن استفاده می‌کنید پیکان کنید
            • Enter فشار دهید
          • اگر از شما خواسته شد Please input the ID of the Google Cloud Project you would like to add Firebase:
            • شناسه پروژه را برای پروژه خود تایپ کنید.
            • Enter فشار دهید
          • برای همه اعلان های باقی مانده، Enter فشار دهید
        • firebase deploy
  7. برنامه خود را با تماس با نقطه پایانی Cloud Functions API مجدداً مستقر کنید
    • دستورات قبلی باید یک دایرکتوری public با یک فایل index.html در داخل دایرکتوری frontend که قبلا ایجاد کردید ایجاد کنند. فایل ~/annotate-http-1/frontend/public/index.html جایی است که باید تغییرات بعدی را اعمال کنید.
    • فایل index.html باز کنید.
      • روی نماد Explorer کلیک کنید نماد ناوبری کاوشگر
      • روی پوشه frontend کلیک کنید
      • روی پوشه public کلیک کنید
      • روی فایل index.html کلیک کنید به فایل index.html پیمایش کنید
    • فایل index.html موجود را خالی کنید.
    • کدی را که قبلاً کپی کرده اید در فایل index.html قرار دهید
    • برای استقرار برنامه جدید firebase deploy را اجرا کنید
    • از نشانی اینترنتی میزبانی firebase دیدن کنید تا ببینید آیا کار می کند یا خیر!
      • توجه: احتمالاً برای مشاهده به‌روزرسانی‌های خود، باید وب‌سایت را به‌روزرسانی سختی انجام دهید.

عیب یابی

فایل index.html باید چیزی شبیه به این باشد:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

اگر وب سایت برای شما کار نمی کند، در اینجا چند نکته وجود دارد که باید بررسی کنید:

  1. مشکل: 404 (یافت نشد) آیا URL مورد استفاده در روش fetch شامل my-project-with-duet است؟
    • راه حل: my-project-with-duet را با شناسه پروژه خود جایگزین کنید.
  2. مشکل: 404 (یافت نشد) آیا URL مورد استفاده در روش fetch URL کامل را ندارد؟
    • راه حل: حتما URL کامل را در روش fetch قرار دهید. باید چیزی شبیه https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate باشد
  3. مشکل: پاسخ سریع هنوز کاملاً درست نیست.
    • راه‌حل: یک اعلان دیگر را امتحان کنید که در آن به جمینی جهت بیشتری در مورد آنچه می‌خواهید تولید کند، بدهید. حتماً شناسه پروژه خود را جایگزین my-project-with-duet کنید. در اینجا یک مثال است:
      • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
  4. مشکل: آیا سایت شما مستقر است، اما کار نمی کند؟
    • راه حل: به دلیل ماهیت غیر قطعی LLM ها، این امکان وجود دارد که Duet پاسخی ایجاد کند که کارساز نباشد. اگر این اتفاق افتاد، مثال index.html بالا را کپی کنید و سعی کنید آن را با firebase deploy دوباره اجرا کنید. حتماً شناسه پروژه خود را جایگزین my-project-with-duet کنید.

7. (اختیاری) کاوش را باز کنید

  1. از Gemini و دستیار ویرایشگر استفاده کنید تا سبک های CSS را به برنامه خود اضافه کنید و پس از اتمام دوباره برنامه را اجرا کنید! اگر به دنبال الهام گرفتن هستید، در اینجا یک مثال پیشنهادی وجود دارد که می توانید امتحان کنید:
    • Make this index.html file use material design. عکس سایت با طراحی متریال
  2. چیزهای دیگری که باید امتحان کنید:
    • وب سایت تولید شده باید با هر تصویر عمومی http کار کند. برای نمایش تصویر در صفحه با Duet کار کنید.

8. (اختیاری) پروژه را حذف کنید

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

  1. اعلان را وارد کنید:
    • How can I delete my project?
    • باید نتیجه ای مانند gcloud projects delete my-project-with-duet مشاهده کنید.
    • مهم، my-project-with-duet را در دستور قبلی با شناسه پروژه خود جایگزین کنید.
  2. دستور gcloud projects delete اجرا کنید تا تمام منابعی که امروز ایجاد کرده اید حذف شود.