استخدام Gemini Code Assist لاستكشاف وتحسين حلول Jump Start Solution في تلخيص الذكاء الاصطناعي

1. مقدمة

في هذا الدرس التطبيقي حول الترميز، سنلقي نظرة على "حلول البدء السريع" الجاهزة، وهي "تلخيص باستخدام الذكاء الاصطناعي"، والتي تستخدم نماذج الذكاء الاصطناعي Vertex AI لتلخيص مستندات PDF التي تم تحميلها إلى Google Cloud Storage.

سنستخدم بعد ذلك Gemini Code Assist لإجراء ما يلي:

• فهم رمز Python البرمجي الذي يشغّل Cloud Function التي تنفّذ مهمة استخراج النص من مستند PDF وتلخيصه وكتابة النتائج في BigQuery
• سنستعين بـ Gemini Code Assist خلال العملية للمساعدة في كتابة وظائف جديدة. سنطوّر تطبيق ويب (تطبيق Python Flask) ونشغّله محليًا للتحقّق من الرمز البرمجي.
• يمكننا أيضًا، إذا أردت، إلقاء نظرة على تفعيل هذا التطبيق على Cloud Run وتحسين تصميم تطبيق الويب (الجماليات) باستخدام التصميم المتعدد الأبعاد.

المهام التي ستنفذها...

• ستقوم بنشر حلول Jump Start Solution الخاصة بالتلخيص المستند إلى الذكاء الاصطناعي (AI) وتفعيل مسار العملية لفهم طريقة عملها.
• بعد ذلك، ستستخدم بيئة التطوير المتكاملة في Cloud Shell لتنزيل الرمز الحالي لحلّ Jump Start واستخدام Gemini Code Assist لفهم الرمز.
• ستستخدم بيئة تطوير متكاملة (IDE) في Gemini Code Assist Cloud Shell لإنشاء رمز لوظيفة جديدة.

ما ستتعلمه...

• طريقة عمل حلّ AI Summarization Jump Start Solution
• كيفية استخدام Gemini Code Assist في العديد من مهام المطوّرين، مثل إنشاء الرموز البرمجية وإكمالها وتلخيصها

المتطلبات...

• متصفّح الويب Chrome
• حساب Gmail
• مشروع على السحابة الإلكترونية تم تفعيل الفوترة فيه
• تفعيل Gemini Code Assist لمشروعك على Google Cloud

هذا المختبر مخصّص للمطوّرين من جميع المستويات، بما في ذلك المبتدئين. على الرغم من أنّ التطبيق النموذجي مكتوب بلغة Python، ليس عليك أن تكون على دراية ببرمجة Python لفهم ما يحدث. سنركّز على التعرّف على إمكانات Gemini Code Assist للمطوّرين.

2. الإعداد

يغطّي هذا القسم كل ما عليك فعله لبدء هذا الدرس التطبيقي.

تفعيل "Gemini في Cloud" في مشروع Google Cloud

سنفعّل الآن "Gemini في Cloud" في مشروعنا على Google Cloud. يُرجى اتّباع الخطوات التالية:

1. انتقِل إلى https://console.cloud.google.com وتأكَّد من أنّك اخترت مشروع Google Cloud الذي تخطّط لاستخدامه في هذا المختبر. انقر على رمز "فتح Gemini" الذي يظهر في أعلى يسار الصفحة.

2. ستفتح نافذة محادثة "Gemini في Cloud" على الجانب الأيسر من وحدة التحكّم. انقر على الزر "تفعيل" كما هو موضّح أدناه. إذا لم يظهر لك الزر تفعيل وظهرت بدلاً منه واجهة Chat، من المحتمل أنّك فعّلت Gemini for Cloud للمشروع ويمكنك الانتقال مباشرةً إلى الخطوة التالية.

3. بعد تفعيلها، يمكنك تجربة "Gemini في السحابة" من خلال طرح استفسار أو استفسارين. يتم عرض بعض طلبات البحث النموذجية، ولكن يمكنك تجربة طلب بحث مثل What is Cloud Run?

سيردّ "Gemini في Cloud" بالإجابة عن سؤالك. يمكنك النقر على رمز في أعلى يسار الصفحة لإغلاق نافذة محادثة "Gemini في Cloud".

تفعيل Gemini Code Assist في بيئة تطوير متكاملة (IDE) في Cloud Shell

سنستخدم بيئة تطوير متكاملة (IDE) في Cloud Shell، وهي بيئة تطوير مُدارة بالكامل تستند إلى Code OSS، لبقية الدرس التطبيقي حول الترميز. علينا تفعيل ميزة "مساعد الترميز" وضبطها في بيئة التطوير المتكاملة (IDE) في Cloud Shell، وفي ما يلي الخطوات:

1. انتقِل إلى ide.cloud.google.com. قد يستغرق ظهور بيئة التطوير المتكاملة بعض الوقت، لذا يُرجى الانتظار.
2. انقر على الزر رمز السحابة الإلكترونية - تسجيل الدخول في شريط الحالة أسفل الصفحة كما هو موضّح. امنح المصادقة للمكوّن الإضافي حسب التعليمات. إذا ظهرت لك الرسالة "Cloud Code - no project" في شريط الحالة، اختَرها ثم اختَر مشروع Google Cloud المحدّد من قائمة المشاريع التي تخطّط للعمل عليها.

3. انقر على زر Gemini في أسفل يسار الصفحة كما هو موضّح، واختَر مشروع على السحابة الإلكترونية الصحيح لآخر مرة. إذا طُلب منك تفعيل Cloud AI Companion API، يُرجى إجراء ذلك والمتابعة.
4. بعد اختيار مشروعك على Google Cloud، تأكَّد من إمكانية رؤيته في رسالة حالة Cloud Code في شريط الحالة، ومن تفعيل Code Assist على يسار شريط الحالة كما هو موضّح أدناه:

أصبح Gemini Code Assist جاهزًا للاستخدام.

يتوفّر Gemini Code Assist أيضًا في بيئات التطوير المتكاملة المحلية، مثل Visual Studio Code أو JetBrains IntelliJ. تتوفّر أيضًا في Google Cloud Workstations. يركّز هذا الدرس التطبيقي حول الترميز على بيئة التطوير المتكاملة في Cloud Shell كطريقة لإتاحة استخدام البيئة نفسها للجميع، ولكن يمكنك تجربة الإعداد المفضّل لديك والاطّلاع على هذا الرابط لمزيد من التفاصيل.

اختياري: إذا لم يظهر لك Gemini في شريط الحالة في أسفل يسار الشاشة، عليك تفعيل Gemini في Cloud Code. قبل إجراء ذلك، تأكَّد من تفعيل Gemini في بيئة التطوير المتكاملة (IDE) من خلال الانتقال إلى إضافة Cloud Code → الإعدادات ثم إدخال النص Gemini كما هو موضّح أدناه. تأكَّد من وضع علامة في مربّع الاختيار. عليك إعادة تحميل بيئة التطوير المتكاملة (IDE). سيؤدي ذلك إلى تفعيل Gemini في Cloud Code، وسيظهر رمز Gemini في شريط الحالة في بيئة التطوير المتكاملة (IDE).

3- نشر حلّ Jump Start Solution لتلخيص المحتوى باستخدام الذكاء الاصطناعي

1. الانتقال إلى حلّ تلخيص المستندات باستخدام الذكاء الاصطناعي التوليدي
2. انقر على "نشر".

• إذا لم يتم تفعيل الفوترة لمشروعك، فعِّلها.
• اختَر us-central1 كمنطقة.
• انقر على "نشر".
• قد تستغرق هذه العملية مدة تصل إلى 15 دقيقة.
• ليس عليك إجراء أي تغييرات، ولكن يمكنك استكشاف عملية نشر "حلّ البداية السريعة" من خلال النقر على الزر استكشاف هذا الحلّ في صفحة تفاصيل عملية نشر الحلّ.

4. تحدَّث إلى Gemini

سنبدأ بالتعرّف على كيفية الدردشة مع Gemini. يتوفّر Gemini كمساعد للدردشة ضمن بيئة التطوير المتكاملة في Cloud Shell كجزء من إضافة Cloud Code في VS Code. يمكنك إظهارها من خلال النقر على زر Gemini في شريط التنقّل الأيمن. ابحث عن رمز Gemini في شريط أدوات التنقّل الأيمن وانقر عليه.

سيؤدي ذلك إلى فتح اللوحة Chat: GeminiI داخل بيئة التطوير المتكاملة في Cloud Shell، ويمكنك الدردشة مع Gemini للحصول على مساعدة بشأن Google Cloud.

لنستخدم لوحة محادثة Gemini لإدخال طلب وعرض الردّ من Gemini. أدخِل الطلب التالي:

What is Cloud Run? 

من المفترض أن يردّ Gemini بتفاصيل حول Cloud Run. الطلبات هي أسئلة أو عبارات تصف المساعدة التي تحتاج إليها. يمكن أن تتضمّن الطلبات سياقًا من الرمز البرمجي الحالي الذي تحلّله Google Cloud لتقديم ردود أكثر فائدة أو اكتمالاً. لمزيد من المعلومات حول كتابة الطلبات لإنشاء ردود جيدة، يُرجى الاطّلاع على مقالة كتابة طلبات أفضل في "Gemini في Google Cloud".

جرِّب الطلبات النموذجية التالية أو أي طلبات أخرى من اختيارك لطرح أسئلة حول Google Cloud:

• What is the difference between Cloud Run and Cloud Functions?
• What services are available on Google Cloud to run containerized workloads?
• What are the best practices to optimize costs while working with Google Cloud Storage?

لاحظ رمز سلة المهملات في أعلى الصفحة، فهو يتيح لك إعادة ضبط سياق سجلّ محادثات Code Assist. يُرجى العِلم أيضًا أنّ هذه المحادثة مرتبطة بسياق الملفات التي تعمل عليها في بيئة التطوير المتكاملة.

5- تنزيل دالة Jump Start Solution Cloud في Cloud Code

بافتراض أنّك تستخدم Cloud Shell Editor، اتّبِع الخطوات التالية:

• انقر على Cloud Code
• ملاحظة: قد تستغرق العملية خطوة واحدة أو خطوتَين حسب حجم شاشتك.

أو

• انقر على "وظائف السحابة الإلكترونية".
• سجِّل الدخول إلى حسابك أو امنحه الإذن إذا طُلب منك ذلك.
• انقر على دالة Webhook.
• انقر على رمز "التنزيل إلى مساحة عمل جديدة"
• 
• استخدِم webhook-1 كاسم لمساحة العمل (يجب أن يكون الاسم التلقائي) أو أي اسم آخر وانقر على "حسنًا".
• سيؤدي ذلك إلى فتح الرمز في بيئة التطوير المتكاملة (IDE) في Cloud Shell.

6. مراجعة المشروع الحالي

يظهر حلّ Jump Start هذا أدناه:

راجِع مسار العملية من وظيفة "تحميل ملف PDF" إلى Cloud Storage. يتم توفير Cloud Function التي سيتم استدعاؤها في حال تحميل ملف PDF في ملف main.py.

انقر على هذا الملف. نقطة الدخول إلى دالة السحابة الإلكترونية هي الدالة entrypoint التي تستدعي في النهاية الدالة cloud_event_entrypoint التي تستخرج النص من ملف PDF، ثم تستدعي الدالة summarization_entrypoint التي تستخدم نماذج Vertex AI لتلخيص النتائج وكتابتها في GCS وBigQuery على التوالي.

ميِّز كل الرمز في ملف main.py أو أي مقتطف محدّد من الرمز. انقر على Gemini Chat وأدخِل الطلب التالي: Explain this.

من المفترض أن يقدّم لك ذلك شرحًا للرمز.

7. تنفيذ عملية تشغيل نموذجية

وفقًا لمخطط البنية، سنحمّل ملفًا إلى الحزمة <PROJECT_ID>_uploads ليتم استدعاء Cloud Function.

تأكَّد من توفّر ملف PDF نموذجي جاهز يمكنك تحميله وتريد الحصول على ملخّص له.

• انتقِل إلى Google Cloud Storage في Cloud Console.
• انتقِل إلى الحزمة <PROJECT_ID>_uploads. انقر على الرابط تحميل الملفات وحمِّل نموذجًا لملف PDF.

إذا لم يكن لديك ملف PDF نموذجي، يمكنك استخدام أحد النماذج التي أنشأناها. من Cloud Shell، شغِّل الأمر التالي:

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

بعد تحميل الملف بنجاح، سيتم استدعاء وظيفة السحابة الإلكترونية webhook، وستلخّص النص الوارد في المستند. ستتم كتابة الناتج في مجموعة بيانات BigQuery باسم summary_dataset وفي الجدول summary_table.

استخدِم طلب بحث في الجدول للاطّلاع على نتائج الملخّص.

8. إنشاء تطبيق ويب عميل للتطبيق

العملية المذكورة أعلاه هي عملية يدوية تفصيلية لتحميل ملف PDF الذي نريد تلخيصه. ماذا عن إنشاء واجهة أمامية للتطبيق على الويب؟

متطلبات واجهة الويب الأمامية بسيطة:

1. نموذج HTML أساسي يتيح لنا اختيار الملف الذي يجب تلخيصه وتحميله.
2. عند تحميل الملف بنجاح، يجب كتابته في الحزمة <PROJECT_ID>_uploads، لكي تعمل بقية الوظائف كما هي.

سنستخدم لغة Python وإطار عمل Flask لتطبيقات الويب من أجل إنشاء هذا التطبيق بمساعدة Duet AI.

لنبدأ سنفترض أنّ مساحة العمل نفسها لا تزال مفتوحة في بيئة التطوير المتكاملة Cloud Shell.

أغلِق جميع الملفات وأدخِل الطلب التالي في نافذة Gemini Chat:

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

من المفترض أن يؤدي ذلك إلى إنشاء الرمز على النحو التالي:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

احفظ الرمز أعلاه باسم app.py في جذر مساحة عمل بيئة التطوير المتكاملة.

نريد أن يتم تشغيل التطبيق على المنفذ 8080 واستخدام عنوان المضيف 0.0.0.0، لذا لنطلب من Gemini تعديل عبارة app.run.

أدخِل الطلب التالي:

Modify the app.py to run on port 8080 and host address 0.0.0.0

يجب أن تبدو التعليمات البرمجية على النحو التالي الآن:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

بعد ذلك، نريد إنشاء ملف index.html أيضًا. أدخِل الطلب التالي في نافذة Gemini Chat:

Provide the index.html file

من المفترض أن يقدّم لك الرمز على النحو الموضّح أدناه لملف index.html.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

يمكننا أن نطلب من Gemini أن يخبرنا بمكان حفظ ملف index.html. أدخِل الطلب التالي:

Since this is using the render_template framework, where should this file be saved?

من المفترض أن تقدّم إجابة مشابهة لما يلي:

لننشئ مجلدًا باسم templates في المجلد الجذر ونحفظ ملف index.html فيه.

نريد بعض معالجة الأخطاء في ملف app.py في حال تعذّر حفظ الملف في حزمة Google Cloud Storage. اترك ملف app.py مفتوحًا وقدِّم الطلب التالي في نافذة Gemini Chat.

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

من المفترض أن يؤدي ذلك إلى إضافة بعض معالجة الاستثناءات كما هو موضّح أدناه:

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

بما أنّنا بحاجة إلى عرض رسالة الخطأ في ملف index.html، علينا تعديل هذا الملف أيضًا. لنطلب من Gemini إجراء ذلك من خلال الطلب أدناه:

update the index.html to display the error message

من المفترض أن يؤدي ذلك إلى إنشاء ملف index.html معدَّل كما هو موضّح أدناه:

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

تأكَّد من حفظ التغييرات في ملف app.py وملف index.html على التوالي في كل خطوة من الخطوات المذكورة أعلاه.

لا يحتوي app.py على اسم الحزمة الصحيح، وبالتالي يمكننا تقديم هذه المعلومات إلى Gemini وطلب إجراء التغييرات. بالإضافة إلى ذلك، علينا تقديم رقم تعريف المشروع لمثيل storage.Client(). لذلك، قدِّم الطلبين التاليين (استبدِل <PROJECT_ID> برقم تعريف مشروع Google Cloud) في نافذة Gemini Chat وأدرِج التغييرات:

الطلب 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

الطلب 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

يبدو ملف app.py النهائي على النحو التالي (يظهر معرّف مشروعي أدناه، ولكن من المفترض أن يكون المعرّف الذي تعمل عليه والذي قدّمته في الطلب أعلاه):

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9- تشغيل تطبيق الويب محليًا

أنشئ بيئة Python مع التبعيات المحدّدة في ملف requirements.txt. انتقِل إلى "لوحة الأوامر" في Cloud Shell IDE كما هو موضّح أدناه:

اكتب Python: Create Environment ثم اتّبِع الخطوات لإنشاء بيئة افتراضية باستخدام (venv)، ثم مفسّر Python 3.x وملف requirements.txt. سيؤدي ذلك إلى إنشاء البيئة المطلوبة.

شغِّل "الوحدة الطرفية" الآن، كما هو موضّح أدناه:

أدخِل الأمر التالي في الوحدة الطرفية:

python app.py

يجب أن يتم تشغيل تطبيق Flask وأن يظهر لك ما يلي:

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

انتقِل إلى عنوان URL http://127.0.0.1:8080، ومن المفترض أن يعرض صفحة index.html.

حمِّل ملفًا من جهازك المحلي، وسيتمّ معالجته بنجاح.

يمكنك التحقّق من التلخيص من خلال الانتقال إلى مجموعة بيانات وجدول BigQuery اللذين رأيناهما سابقًا في المختبر. بدلاً من ذلك، يمكنك الاطّلاع على حزمة Cloud Storage‏ (<PROJECT_ID>_output).

10. (اختياري) فتح "الاستكشاف" - النشر على Cloud Run

• يمكنك نشر التطبيق على Cloud Run.
• اطرح السؤال التالي على Gemini Code Assist (قد تحتاج إلى تجربة بعض الصيغ المختلفة للطلب أعلاه):

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. (اختياري) فتح "الاستكشاف" - إضافة أنماط CSS

• استخدِم Gemini Code Assist والمساعد داخل المحرّر لإضافة أنماط CSS إلى تطبيقك وإعادة نشره عند الانتهاء.
• افتح ملف index.html وأدخِل الطلب التالي في Gemini Chat: Can you apply material design styles to this index.html?
• تحقَّق من الرمز لمعرفة ما إذا كان يعمل.

12. تهانينا!

تهانينا، لقد عملت بنجاح مع Gemini Code Assist على مشروع نموذجي لفهم كيفية المساعدة في إنشاء الرموز البرمجية وإكمالها وتلخيصها، بالإضافة إلى مساعدتك في الحصول على إجابات عن أسئلة حول Google Cloud.

13. المستندات المرجعية

• الصفحة الرئيسية في Gemini Code Assist
• استخدام Gemini للحصول على المساعدة والتطوير باستخدام الذكاء الاصطناعي - المستندات
• حالات استخدام Gemini