إنشاء أداة تلخيص فيديوهات YouTube باستخدام Gemini

1. مقدمة

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

بنهاية هذا الدرس التطبيقي، سيكون لديك تطبيق ويب يعمل ويمكنه إنشاء ملخّص من فيديوهات YouTube. ستتعرّف أيضًا على كيفية استخدام Gemini API وGoogle Gen AI SDK ودمجهما معًا لإنشاء تطبيق ويب.

سيظهر تطبيق الويب على النحو التالي:

ما عليك سوى تقديم رابط إلى فيديو على YouTube وسيتولّى Gemini الباقي.

2. قبل البدء

يفترض هذا الدرس العملي أنّ لديك مشروعًا على Google Cloud تم تفعيل الفوترة فيه. إذا لم تكن هذه الميزة متاحة لك بعد، يمكنك اتّباع التعليمات أدناه للبدء.

في Google Cloud Console، في صفحة اختيار المشروع، اختَر أو أنشِئ مشروعًا على Google Cloud.
تأكَّد من تفعيل الفوترة لمشروعك على Google Cloud. تعرَّف على كيفية التحقّق مما إذا كانت الفوترة مفعَّلة في مشروع.
ستستخدم Cloud Shell، وهي بيئة سطر أوامر تعمل في Google Cloud. للوصول إليها، انقر على "تفعيل Cloud Shell" في أعلى "وحدة تحكّم Google Cloud".

بعد الاتصال بـ Cloud Shell، يمكنك التأكّد من أنّك قد تم التحقّق من هويتك وأنّه تم ضبط المشروع على رقم تعريف مشروعك باستخدام الأمر التالي:

gcloud auth list

نفِّذ الأمر التالي في Cloud Shell للتأكّد من أنّ أمر gcloud يعرف مشروعك.

gcloud config list project

إذا لم يتم ضبط مشروعك، استخدِم الأمر التالي لضبطه:

gcloud config set project <YOUR_PROJECT_ID>

بدلاً من ذلك، يمكنك أيضًا الاطّلاع على معرّف PROJECT_ID في وحدة التحكّم.

انقر عليه وسيظهر لك كل مشروعك ورقم تعريف المشروع على الجانب الأيسر

تأكَّد من تفعيل واجهات برمجة التطبيقات التالية، واستخدِم الأمر التالي لضبطها:

Vertex AI API
Cloud Run Admin API
واجهة برمجة تطبيقات Cloud Build
Cloud Resource Manager API

gcloud services enable aiplatform.googleapis.com \
                           run.googleapis.com \
                           cloudbuild.googleapis.com \
                           cloudresourcemanager.googleapis.com

البديل عن استخدام أمر gcloud هو الانتقال إلى وحدة التحكّم باستخدام هذا الرابط. يُرجى الرجوع إلى المستندات لمعرفة أوامر gcloud وطريقة استخدامها.

المتطلبات الأساسية

القدرة على قراءة رموز Python وHTML وكتابتها
لديك خبرة في استخدام Gemini API وGoogle Gen AI SDK
فهم أساسي لتطوير التطبيقات المتكاملة

ما ستتعلمه

كيفية إنشاء واجهة برمجة تطبيقات خلفية مستندة إلى Gemini باستخدام مكتبة Flask API
كيفية إنشاء رابط لتطبيق يعمل بالذكاء الاصطناعي التوليدي يربط بين الواجهة الأمامية والخلفية
كيفية نشر تطبيق الذكاء الاصطناعي التوليدي الذي تم تطويره على Cloud Run

المتطلبات

جهاز كمبيوتر يعمل وشبكة Wi-Fi موثوقة
عقل فضولي

3- إنشاء تطبيق Python Flask على Cloud Run

سننشئ تطبيق Python Flask على Cloud Run باستخدام النموذج الذي يتم إنشاؤه تلقائيًا أولاً من Cloud Shell.

انتقِل إلى وحدة طرفية Cloud Shell وانقر على الزر "فتح المحرّر".

تأكَّد من ضبط مشروع Cloud Code في أسفل يمين (شريط الحالة) محرر Cloud Shell، كما هو موضّح في الصورة أدناه، ومن ضبطه على مشروع Google Cloud النشط الذي تم تفعيل الفوترة فيه. انقر على تفويض إذا طُلب منك ذلك.

ملاحظات: قد يستغرق الأمر بعض الوقت بعد تهيئة محرر Cloud Shell وتحميل جميع المكوّنات الإضافية المطلوبة

Cloud Code - Sign In

سيظهر الزر، يُرجى الانتظار

انقر على هذا المشروع النشط في شريط الحالة وانتظِر إلى أن تفتح النافذة المنبثقة Cloud Code. في النافذة المنبثقة، اختَر "تطبيق جديد".

من قائمة التطبيقات، اختَر تطبيق Cloud Run:

في الصفحة 2/2، اختَر نموذج Python Flask:

أدخِل اسم المشروع الذي تريده (مثل amazing-gemini-app) وانقر على حسنًا:

سيؤدي ذلك إلى فتح نموذج المشروع الجديد الذي أعددته للتو.

هذه هي الطريقة البسيطة لإنشاء تطبيق Python Flask على Cloud Run باستخدام Google Cloud Shell.

4. إنشاء الواجهة الأمامية

كما ذكرنا سابقًا، هذا هو الشكل النهائي لتطبيق الويب:

يحتوي على حقل إدخال لتلقّي رابط YouTube من المستخدم، وخيار لاختيار مجموعة نماذج مختلفة، ومساحة نصية لتقديم طلب إضافي إذا لزم الأمر، وزر لإرسال النموذج.

إذا كنت تحب التحدي، يمكنك تصميم نموذجك الخاص أو تعديل خصائص CSS. يمكنك أيضًا نسخ الرمز من الأسفل واستبدال المحتوى من ملف index.html في مجلد النماذج به.

<!DOCTYPE html>
<html>
 <head>
   <title>YouTube Summarizer</title>
   <style>
     body {
       font-family: sans-serif;
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       background-color: #f4f4f4;
     }
     .container {
       background-color: white;
       padding: 30px;
       border-radius: 8px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       text-align: center;
     }
     h2 {
       text-align: center;
       margin-bottom: 20px;
     }
     input[type="text"], textarea, select {
       width: 100%;
       padding: 10px;
       margin-bottom: 15px;
       border: 1px solid #ccc;
       border-radius: 4px;
       box-sizing: border-box;
     }
     button {
       background-color: #4CAF50;
       color: white;
       padding: 12px 20px;
       border: none;
       border-radius: 4px;
       cursor: pointer;
     }
   </style>
 </head>
 <body>
   <div class="container">
     <h2>YouTube Summarizer</h2>
     <form action="/summarize" target="_blank" method="post">
       <input type="text" name="youtube_link" placeholder="Enter YouTube Link">
       <select name="model">
         <option value="gemini-2.0-flash-001">Gemini 2.0 Flash</option>
       </select>
       <textarea name="additional_prompt" placeholder="Write your additional prompt here. For example: 'explain to me like I am five years old'"></textarea>
       <button type="submit">Summarize</button>
     </form>
   </div>
 </body>
</html>

لاختبار ما إذا كنت قد نفّذت هذه الخطوة بشكلٍ صحيح، انقر بزر الماوس الأيمن على app.py واختَر تشغيل ملف Python في الوحدة الطرفية (Run Python File in Terminal).

إذا سارت الأمور على ما يرام، يجب أن تتمكّن من الوصول إلى تطبيق الويب من خلال النقر على الزر Web Preview في أعلى يسار "محرّر السحابة الإلكترونية"، ثم اختيار Preview on port 8080.

5- إنشاء الواجهة الخلفية

بعد إعداد الواجهة الأمامية، عليك إنشاء خدمة خلفية تستخدم نموذج Gemini لتلخيص فيديو على YouTube الذي يقدّمه المستخدم. يُرجى العِلم أنّك ستستبدل محتوى الملف app.py لإكمال هذه المهمة.

قبل تغيير الرمز، عليك إنشاء بيئة افتراضية وتثبيت المكتبات اللازمة لتشغيل مكوّنات Gemini.

أولاً، عليك إضافة مكتبة Google Gen AI SDK إلى ملف requirements.txt. يجب أن يظهر على النحو التالي:

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0

ثانيًا، عليك إنشاء بيئة افتراضية وتثبيت الحِزم من requirements.txt حتى تتمكّن من تشغيل رمز الخلفية بنجاح.

انقر على الأشرطة في أعلى يمين الصفحة واختَر النافذة الطرفية > نافذة طرفية جديدة ( يمكنك بدلاً من ذلك الضغط على Ctrl + Shift + C لفتح نافذة طرفية جديدة).

2. أنشئ بيئة افتراضية عن طريق الكتابة في الوحدة الطرفية وانتظِر إلى أن يتم تثبيتها بنجاح

python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

يمكنك أيضًا تجربة إنشاء نقطة نهاية Gemini باستخدام واجهة برمجة التطبيقات Flask API بنفسك. يجب أن يكون الرمز البرمجي في app.py مشابهًا لما هو موضّح أدناه.

import os

from flask import Flask, render_template, request
from google import genai
from google.genai import types

app = Flask(__name__)

PROJECT_ID = "REPLACE_WITH_YOUR_PROJECT_ID"

client = genai.Client(
   vertexai=True,
   project=PROJECT_ID,
   location="us-central1",
)

# Define the home page route.
@app.route('/', methods=['GET'])
def index():
   '''
   Renders the home page.
   Returns:The rendered template.
   '''
   return render_template('index.html')


def generate(youtube_link, model, additional_prompt):

   # Prepare youtube video using the provided link
   youtube_video = types.Part.from_uri(
       file_uri=youtube_link,
       mime_type="video/*",
   )

   # If addtional prompt is not provided, just append a space
   if not additional_prompt:
       additional_prompt = " "

   # Prepare content to send to the model
   contents = [
       youtube_video,
       types.Part.from_text(text="""Provide a summary of the video."""),
       additional_prompt,
   ]

   # Define content configuration
   generate_content_config = types.GenerateContentConfig(
       temperature = 1,
       top_p = 0.95,
       max_output_tokens = 8192,
       response_modalities = ["TEXT"],
   )

   return client.models.generate_content(
       model = model,
       contents = contents,
       config = generate_content_config,
   ).text

@app.route('/summarize', methods=['GET', 'POST'])
def summarize():
   '''
   Summarize the user provided YouTube video.
   Returns: Summary.
   '''

   # If the request is a POST request, process the form data.
   if request.method == 'POST':
       youtube_link = request.form['youtube_link']
       model = request.form['model']
       additional_prompt = request.form['additional_prompt']
     
       # Generate the summary.
       try:
           summary = generate(youtube_link, model, additional_prompt)
           return summary

       except ValueError as e:
           raise e
 
   # If the request is a GET request, redirect to the home page.
   else:
       return redirect('/')


if __name__ == '__main__':
   server_port = os.environ.get('PORT', '8080')
   app.run(debug=False, port=server_port, host='0.0.0.0')

في الأساس، تنفّذ التعليمة البرمجية ما يلي:

استيراد المكتبات الضرورية:

‫Flask: لإنشاء تطبيق الويب
os: للوصول إلى متغيّر البيئة
‫google.genai: للتفاعل مع الذكاء الاصطناعي من Gemini من Google
‫google.genai.types: لتحديد بنى البيانات في Gemini

تهيئة عميل Gemini:

يتم إعداد اتصال بمنصة Vertex AI من Google، ما يتيح للتطبيق استخدام نموذج الذكاء الاصطناعي من Gemini. احرص على استبدال "REPLACE_WITH_YOUR_PROJECT_ID" برقم تعريف مشروعك.

تحديد الدالة generate:

تتلقّى هذه الدالة رابط فيديو على YouTube ومعرّف نموذج Gemini وطلبًا إضافيًا كمدخلات. بعد ذلك، يرسل الفيديو والطلب إلى Gemini ويعرض نص الملخّص الذي تم إنشاؤه.

تحديد مسار الصفحة الرئيسية (/):

تعرض هذه الدالة نموذج index.html، الذي يعرض نموذجًا للمستخدم لإدخال رابط YouTube.

تحديد مسار التلخيص (/summarize):

تتعامل هذه الدالة مع عمليات إرسال النماذج. يستردّ الرابط والنموذج والطلب من النموذج، ويستدعي الدالة generate للحصول على الملخّص، ثم يعرض الملخّص في نموذج result.html.

تشغيل التطبيق:

يسترد منفذ الخادم من متغيرات البيئة ويبدأ خادم الويب Flask.

يمكنك اختبار الرمز البرمجي من خلال تشغيل app.py من الجهاز. الطريقة نفسها المستخدَمة في اختبار الواجهة الأمامية انقر بزر الماوس الأيمن على app.py واختَر تشغيل ملف Python في الوحدة الطرفية (Run Python File in Terminal).

يمكنك الآن اختبار تطبيقك. من المفترض أن تعمل على النحو المتوقّع.

6. نشر تطبيق الويب

بعد أن أصبح لديك تطبيق GenAI جاهز للعمل، لننشره على Cloud Run لتتمكّن من مشاركته مع أصدقائك وزملائك لتجربته.

انتقِل إلى وحدة طرفية Cloud Shell وتأكَّد من ضبط المشروع الحالي على مشروعك النشط. وإذا لم يكن كذلك، عليك استخدام الأمر gcloud configure لضبط رقم تعريف المشروع:

gcloud config set project [PROJECT_ID]

لا تنسَ استبدال [PROJECT_ID] برقم تعريف مشروعك. تأكَّد من أنّ دليل العمل الحالي في الوحدة الطرفية هو **amazing-gemini-app**، ثم أدخِل الأوامر التالية بهذا الترتيب واحدًا تلو الآخر:

gcloud run deploy --source .

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

بعد اكتمال عملية النشر، من المفترض أن تحصل على رابط مشابه لما يلي:

https://amazing-gemini-app-*******.a.run.app/

يمكنك المتابعة واستخدام التطبيق من نافذة التصفح المتخفي أو جهازك الجوّال. من المفترض أن يكون قد تم نشره.

7. التحدي

حان الوقت لتتألق. هل لديك المهارات اللازمة لتغيير الرمز البرمجي كي تتمكّن من تحميل الفيديوهات مباشرةً من جهاز الكمبيوتر؟

8. تَنظيم

لتجنُّب تحمّل رسوم في حسابك على Google Cloud مقابل الموارد المستخدَمة في هذا الدرس التطبيقي حول الترميز، اتّبِع الخطوات التالية:

في Google Cloud Console، انتقِل إلى صفحة إدارة الموارد.
في قائمة المشاريع، اختَر المشروع الذي تريد حذفه، ثم انقر على حذف.
في مربّع الحوار، اكتب رقم تعريف المشروع، ثم انقر على إيقاف لحذف المشروع.
بدلاً من ذلك، يمكنك الانتقال إلى Cloud Run في وحدة التحكّم، واختيار الخدمة التي نشرتها للتو وحذفها.