كيفية استخدام Gemini لاستكشاف تطبيق حالي وتحسينه

1. نظرة عامة

ستوضّح هذه التجربة العملية كيفية استخدام Gemini لإنشاء تطبيق عميل إلى جانب خلفية واجهة برمجة تطبيقات (API) قائمة.

ما ستتعلمه

يهدف هذا المختبر إلى توضيح كيفية استخدام Gemini مع تطبيق حالي. في هذه الميزة الاختبارية، ستتعرّف على كيفية تنفيذ ما يلي:

نشر حلول Jump Start Solution لمعالجة الصور باستخدام نماذج تعلُّم الآلة أو الذكاء الاصطناعي (AI)
استخدام Gemini لاستكشاف تطبيق واجهة برمجة التطبيقات
استخدام Gemini لإنشاء عميل لتطبيق واجهة برمجة التطبيقات

الإعداد - إنشاء مشروع جديد

استنادًا إلى سياسات مؤسستك، قد لا تتمكّن من نشر هذا الحلّ بشكل صحيح.

اقتراح: استخدِم حسابًا لديك فيه أذونات كاملة (مثل حساب شخصي) بدلاً من حساب شركة أو حساب تديره المؤسسة التعليمية.

ملاحظة: إذا أنشأت مؤخرًا مشروعًا لديك فيه أذونات كاملة وسبق لك تفعيل Gemini API فيه، يمكنك مواصلة استخدام هذا المشروع وتخطّي هذه الخطوة. على سبيل المثال، إذا أكملت مؤخرًا درسًا تطبيقيًا آخر حول الترميز من Gemini، يمكنك تخطّي هذه الخطوة.

انتقِل إلى Google Cloud Console.
انقر على القائمة المنسدلة للمشروع الحالي.
انقر على مشروع جديد
أضِف اسم مشروع وانقر على إنشاء
- اقتراح: استخدِم اسم مشروع فريدًا لكي تكون قيمتا Project name وProject ID متطابقتَين

2. نشر حل Jump Start Solution

"حلول البداية السريعة" هي نماذج حلول معدّة مسبقًا من Google Cloud. يستخدم هذا المختبر "حلّاً سريعًا" لتوضيح كيف يمكن أن يساعد Gemini في تحسين تطبيق حالي.

الانتقال إلى صفحة تفاصيل حلول Jump Start Solution لمعالجة الصور باستخدام نماذج تعلُّم الآلة أو الذكاء الاصطناعي (AI)
- انقر على قائمة الهامبرغر
- في القائمة الفرعية المنتجات والحلول، انقر على حلول Jump Start
- انقر على معالجة الصور باستخدام الذكاء الاصطناعي وتعلُّم الآلة على Cloud Functions
انقر على نشر
- إذا لم يتم تفعيل الفوترة لمشروعك، عليك تفعيلها.
- أكِّد اسم المشروع وانقر على متابعة.
- اختَر us-central1 (Iowa) كمنطقة.
- إذا طُلب منك إدخال بيانات أخرى، اقبل الإعدادات التلقائية.
- انقر على نشر.
- قد تستغرق هذه العملية مدة تصل إلى 15 دقيقة.
- ليس عليك إجراء أي تغييرات، ولكن يمكنك استكشاف عملية نشر "حلّ البداية السريعة".

تحديد المشاكل وحلّها

المشكلة: هل تظهر لك رسالة خطأ تفيد بأنّ Partial deployment.؟
- الحلّ: يعني ذلك على الأرجح أنّه عليك حذف عملية النشر والبدء من جديد. يجب أن يظهر زر حذف عملية النشر. انقر على هذا الزر ثم أعِد نشر "حلّ البداية السريعة".

3- تفعيل Gemini

إعداد بيئة تعديل الرموز البرمجية وتفعيل Gemini

انتقِل إلى "محرِّر Cloud Shell"
- الرجوع إلى Google Cloud Console
- اكتب Cloud Shell Editor في شريط البحث وانقر على محرِّر Cloud Shell من القائمة المنسدلة.
- انقر على تجربة المحرّر الجديد إذا كنت تستخدم "المحرّر القديم".
  - ملاحظة: إذا لم يظهر لك الزر تجربة "المحرّر" الجديد، من المحتمل أنّك تستخدم "المحرّر" الجديد حاليًا. سيعمل "محرّر الخرائط القديم"، ولكن ستختلف طرق العرض قليلاً.
- انقر على رمز "الفتح في نافذة جديدة"
سجِّل الدخول إلى حسابك أو امنحه الإذن إذا طُلب منك ذلك.
- استنادًا إلى إعداداتك، قد يُطلب منك منح الإذن لحسابك عدة مرات خلال هذه التجربة، لذا يُرجى النقر على "منح الإذن" في كل مرة يُطلب منك ذلك.
انقر على الزر رمز السحابة الإلكترونية - تسجيل الدخول في شريط الحالة أسفل الصفحة كما هو موضّح. امنح المصادقة للمكوّن الإضافي حسب التعليمات.
إذا طُلب منك ذلك، انقر على اختيار مشروع Google Cloud، ثم اختَر المشروع الذي تستخدمه
تفعيل Gemini
- انقر على Cloud Code
  - ملاحظة: قد تستغرق العملية خطوة واحدة أو خطوتَين حسب حجم شاشتك.
- انقر على تغيير الإعدادات في قسم المساعدة والملاحظات.
- النوع Gemini: Enable
- ضَع علامة في مربّع الاختيار (إذا لم يكن محدّدًا بعد)
- أعِد تحميل بيئة التطوير المتكاملة.
- يؤدي ذلك إلى تفعيل Gemini في Cloud Code، ويظهر شريط الحالة Gemini في بيئة التطوير المتكاملة.
انقر على زر Gemini في أسفل يسار الصفحة كما هو موضّح، واختَر مشروع Google Cloud الصحيح.
- إذا ظهر لك خطأ Gemini has not been enabled for your selected project. انقر على تفعيل Gemini API
تأكَّد من أنّ بإمكانك رؤية مشروع Google Cloud الصحيح على اليمين (سيظهر اسم مشروعك) وأنّ Gemini مفعّل على اليسار، في شريط الحالة كما هو موضّح أدناه:

4. تنزيل رمز Cloud Function

نزِّل الرمز البرمجي واستخدِم Gemini لمعرفة المزيد عن "حلول البداية السريعة" والرمز البرمجي الذي نشرته.

إذا انتقلت إلى صفحة أخرى، انقر على Cloud Code
انقر على Cloud Functions
- إذا ظهر لك الزر اختيار مشروع، انقر عليه واختَر المشروع الذي تعمل عليه.
- انقر على الدالة annotate-http
- انقر على رمز التنزيل إلى مساحة عمل جديدة .
استخدِم annotate-http-1 كاسم لمساحة العمل (يجب أن يكون الاسم التلقائي) وانقر على حسنًا.
افتح ملف main.py
- انقر على رمز "المستكشف"
- انقر على ملف main.py لفتحه
انقر على رمز Gemini Chat
- ملاحظة: قد تستغرق العملية خطوة واحدة أو خطوتَين حسب حجم شاشتك.
جرِّب طرح سؤال على Gemini. أدخِل طلبًا، مثل:
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

إعادة ضبط Gemini Chat

تؤثّر الطلبات على الطلبات المستقبلية. على سبيل المثال، إذا أخطأت في كتابة رقم تعريف المشروع أو المنطقة، سيتم نقل هذه المعلومات إلى الطلبات والردود المستقبلية، ما قد يؤثر سلبًا في تجربتك. إذا أخطأت في الكتابة أو أردت محو السجلّ لأي سبب آخر، يمكنك استخدام رمز سلة المهملات لإعادة ضبط المحادثة.

إعادة ضبط ميزة "المهملات" في محادثة "ثنائي"

5- طلب نقطة نهاية دالة Cloud الحالية

استكشِف الرمز البرمجي واستدعِ نقطة النهاية التي نشرتها في "حلّ البداية السريعة".

أدخِل الطلب:
- ملاحظة مهمة استبدِل 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 هذا لاستخدامه في الخطوة التالية.
جرِّب الأمر في وحدة طرفية جديدة
- انقر على قائمة الهامبرغر
- انقر على Terminal.
- انقر على نافذة طرفية جديدة.
- ألصِق أمر curl من الخطوة السابقة في الوحدة الطرفية واضغط على Enter لتنفيذ الأمر.
- من المفترض أن تتلقّى ردًا يبدأ على النحو التالي:
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(اختياري) يمكنك إجراء ذلك باستخدام صورة أخرى من الإنترنت العام من خلال الطلب من 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، إليك بعض الأمور التي يجب التحقّق منها:

المشكلة: هل تتضمّن نقطة نهاية عنوان URL الرمز .a.run.app؟
- الحل: قد يعتقد Duet أنّك بصدد النشر على Cloud Run. استبدِل my-project-with-duet بمعرّف مشروعك في https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate للحصول على نقطة نهاية Cloud Functions الصحيحة واستخدِمها في أمر curl.
المشكلة: هل تتضمّن نقطة نهاية عنوان URL الرمز my-project-with-duet؟
- الحلّ: استبدِل my-project-with-duet برقم تعريف مشروعك.
المشكلة: هل نقطة نهاية عنوان URL مفقودة us-central1؟
- الحلّ: تأكَّد من أنّ عنوان URL يبدأ بـ us-central1، مثل: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate مع رقم تعريف مشروعك.
المشكلة: استنادًا إلى الطلب المستخدَم، قد يبدو نقطة النهاية التي تم إنشاؤها أحيانًا على النحو التالي: cloudfunctions.net/annotate-http أو cloudfunctions.net/annotate. هل نقطة نهاية عنوان URL لا تتضمّن /annotate-http/annotate في النهاية؟
- الحلّ: تأكَّد من أنّ نقطة نهاية عنوان URL تنتهي بمسار تطبيق واجهة برمجة التطبيقات الكامل cloudfunctions.net/annotate-http/annotate
المشكلة: يعمل طلب cURL، ولكن لا يتم استرداد الكثير من المعلومات. هل يتضمّن الطلب ميزات؟
- الحل: هذه ليست مشكلة كبيرة. إذا واصلت استخدام التطبيق بدون تغيير أي شيء، سيظل بإمكانك استخدام بقية الميزات التجريبية. إذا أردت الحصول على المزيد من المعلومات، يمكنك أن تطلب من Duet إضافة ميزات إلى طلب cURL.
المشكلة: تبدو الإجابات غير صحيحة أو لا تتضمّن سياقًا خاصًا بالرمز. هل تستخدم Gemini Chat داخل Cloud Shell Editor؟
- الحلّ: جرِّب فتح ملف main.py وتمييز الرمز البرمجي المرتبط بطلبك أثناء استخدام Gemini Chat في Cloud Shell Editor. يختلف سياق Gemini Assistant في جميع أنحاء Google Cloud، ما يؤدي إلى اختلاف الإجابات.
المشكلة: لا يزال الردّ على الطلب غير صحيح تمامًا.
- الحلّ: جرِّب طلبًا مختلفًا تقدّم فيه لـ Gemini المزيد من التوجيهات بشأن ما تريد أن ينشئه. احرص على استبدال 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" }
```
المشكلة: بعد اتّباع جميع خطوات تحديد المشاكل وحلّها، لا يزال التطبيق لا يعمل.
- الحل: بسبب الطبيعة غير الحتمية للنماذج اللغوية الكبيرة، من المحتمل أن يكون Duet قد أنشأ ردًا لن ينجح. في حال حدوث ذلك، انسخ مثال أمر curl أعلاه وحاوِل تنفيذه في الوحدة الطرفية. احرص على استبدال my-project-with-duet برقم تعريف مشروعك.

6. إنشاء عميل تطبيق ويب لواجهة برمجة التطبيقات

استخدِم Gemini لإنشاء ملف index.html يستدعي نقطة نهاية دالة Jump Start Solution Cloud. بعد ذلك، يمكنك نشر ملف index.html إلى استضافة Firebase لمشاهدة الرمز أثناء التنفيذ.

إنشاء الرمز البرمجي من جهة العميل
- في مربّع محادثة 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.
إنشاء دليل frontend جديد
- يمكنك أن تطلب من Gemini ما يلي:
  - 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
تأكَّد من أنك مُسجِّل الدخول إلى المشروع الصحيح في نافذة Cloud Shell
- يمكنك أن تطلب من Gemini ما يلي:
  - What is the gcloud command to set my project?
- من المفترض أن تظهر لك نتيجة مثل gcloud config set project my-project-with-duet
  - تأكَّد من صحة رقم تعريف المشروع، ثم نفِّذ الأمر في نافذة Cloud Shell الطرفية.
تفعيل Firebase
- في علامة تبويب جديدة (اترك "محرِّر Cloud Shell" مفتوحًا)، انتقِل إلى https://console.firebase.google.com/
- انقر على إضافة مشروع.
- اكتب رقم تعريف مشروعك وانتظِر إلى أن يظهر في القائمة المنسدلة.
- انقر على رقم تعريف مشروعك
- انقر على متابعة.
- انقر على تأكيد الخطة.
- انقر على متابعة.
- ألغِ اختيار تفعيل "إحصاءات Google" لهذا المشروع
  - لا تنصح Firebase باستخدام "إحصاءات Google"، ولن يتم استخدامها في هذا التطبيق.
- انقر على متابعة.
- أغلِق علامة التبويب هذه وعُد إلى Cloud Shell Editor
- ملاحظة: لا يلزم اتّباع هذه الخطوات إلا للمستخدمين الذين لم يسبق لهم استخدام Firebase، ولكنّها تتيح للجميع اتّباع المسار نفسه. إذا نفّذت هذه الخطوة مرة أخرى في المستقبل، يمكنك تخطّيها.
تسجيل الدخول إلى Firebase في Cloud Shell
- في وحدة Cloud Shell Editor الطرفية، شغِّل الأمر firebase login --no-localhost
- انتقِل إلى عنوان URL المقدَّم
  - انقر على نعم، نفّذتُ هذا الأمر للتو.
  - انقر على نعم، هذا هو معرّف الجلسة.
  - انقر على نسخ.
- الرجوع إلى نافذة Cloud Shell Editor الطرفية
- ألصِق القيمة المنسوخة في نافذة الوحدة الطرفية حيث يظهر النص التالي: Enter authorization code:
- اضغط على Enter.
نشر موقع إلكتروني جديد على "استضافة Firebase"
- بدء مشروع جديد على Firebase
  - يمكنك أن تطلب من Gemini ما يلي:
    - 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
أعِد نشر تطبيقك من خلال طلب بيانات من نقطة نهاية Cloud Functions API
- من المفترض أن تنشئ الأوامر السابقة الدليل public الذي يحتوي على الملف index.html داخل الدليل frontend الذي أنشأته سابقًا. يجب إجراء التغييرات القليلة التالية في ملف ~/annotate-http-1/frontend/public/index.html.
- افتح ملف index.html.
  - انقر على رمز "المستكشف"
  - انقر على مجلد frontend
  - انقر على مجلد public
  - انقر على الملف في index.html
- أفرِغ ملف index.html الحالي.
- الصِق الرمز الذي نسخته سابقًا في ملف index.html
- تشغيل firebase deploy لنشر التطبيق الجديد
- انتقِل إلى عنوان URL الخاص بخدمة Firebase Hosting لمعرفة ما إذا كان يعمل.
  - ملاحظة: من المحتمل أن تحتاج إلى إعادة تحميل الموقع الإلكتروني بشكل كامل للاطّلاع على التحديثات.

تحديد المشاكل وحلّها

يجب أن يبدو ملف 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>

إذا كان الموقع الإلكتروني لا يعمل لديك، إليك بعض الأمور التي يجب التحقّق منها:

المشكلة: 404 (لم يتم العثور على الصفحة) هل يتضمّن عنوان URL المستخدَم في طريقة fetch السلسلة my-project-with-duet؟
- الحلّ: استبدِل my-project-with-duet برقم تعريف مشروعك.
المشكلة: 404 (لم يتم العثور على الصفحة) هل عنوان URL المستخدَم في طريقة fetch لا يتضمّن عنوان URL الكامل؟
- الحلّ: احرص على تضمين عنوان URL الكامل في طريقة fetch. من المفترض أن يظهر العنصر بتنسيق يشبه التنسيق التالي: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
المشكلة: لا يزال الردّ على الطلب غير صحيح تمامًا.
- الحلّ: جرِّب طلبًا مختلفًا تقدّم فيه لـ Gemini المزيد من التوجيهات بشأن ما تريد أن ينشئه. احرص على استبدال 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.
المشكلة: هل تم نشر موقعك الإلكتروني، ولكنّه لا يعمل؟
- الحل: بسبب الطبيعة غير الحتمية للنماذج اللغوية الكبيرة، من المحتمل أن يكون Duet قد أنشأ ردًا لن ينجح. في حال حدوث ذلك، انسخ المثال index.html أعلاه وحاوِل إعادة نشره باستخدام firebase deploy. احرص على استبدال my-project-with-duet برقم تعريف مشروعك.

7. (اختياري) الاستكشاف المفتوح

استخدِم Gemini والمساعد داخل المحرّر لإضافة أنماط CSS إلى تطبيقك وإعادة نشره عند الانتهاء. إذا كنت تبحث عن أفكار ملهمة، إليك مثال على طلب يمكنك تجربته:
- Make this index.html file use material design.
اقتراحات أخرى يمكنك تجربتها:
- يجب أن يعمل الموقع الإلكتروني الذي تم إنشاؤه مع أي http صورة عامة. استخدِم Duet لعرض الصورة على الصفحة.

8. (اختياري) حذف المشروع

إذا أردت تجنُّب تحصيل رسوم منك مقابل الموارد التي أنشأتها اليوم، يمكنك أن تسأل Duet عن كيفية إجراء ذلك.

أدخِل الطلب:
- How can I delete my project?
- من المفترض أن تظهر لك نتيجة مثل gcloud projects delete my-project-with-duet.
- ملاحظة مهمة: استبدِل my-project-with-duet في الأمر السابق برقم تعريف مشروعك.
نفِّذ الأمر gcloud projects delete لإزالة جميع الموارد التي أنشأتها اليوم.