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

1. مقدمة

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

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

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

13a0825947f9892b.png

ما عليك سوى تقديم رابط يؤدي إلى فيديو YouTube وسيتولى Gemini تنفيذ الخطوات الأخرى.

2. قبل البدء

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

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

1829c3759227c19b.png

  1. بعد الاتصال بخدمة Cloud Shell، تأكَّد من أنّك سبق أن تم مصادقة حسابك وأنّ المشروع تم ضبطه على معرّف مشروعك باستخدام الأمر التالي:
gcloud auth list
  1. شغِّل الأمر التالي في Cloud Shell للتأكّد من أنّ الأمر gcloud يعرف مشروعك.
gcloud config list project
  1. إذا لم يتم ضبط مشروعك، استخدِم الأمر التالي لضبطه:
gcloud config set project <YOUR_PROJECT_ID>
  1. تأكَّد من تفعيل واجهات برمجة التطبيقات التالية:
  • Cloud Run
  • Vertex AI

بدلاً من استخدام الأمر 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 Terminal وانقر على الزر Open Editor (فتح المحرِّر). b16d56e4979ec951.png

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

f5003b9c38b43262.png

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

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

39abad102a72ae74.png

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

a78b3a0311403ad.png

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

4d8f77279d9509cb.png

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

e85a020a20d38e17.png

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

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

كما ذكرنا سابقًا، سيظهر تطبيق الويب النهائي على النحو التالي:

13a0825947f9892b.png

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

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

<!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 واختَر Run Python File in Terminal (تشغيل ملف Python في Terminal).

690765473f94db9c.png

إذا سارت الأمور على ما يرام، من المفترض أن تتمكّن من الوصول إلى تطبيق الويب على http://127.0.0.1:8080.

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

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

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

أولاً، عليك إضافة مكتبة حزمة تطوير البرامج (SDK) لتكنولوجيات الذكاء الاصطناعي العامة من Google إلى ملف requirements.txt. من المفترض أن يظهر الرمز على النحو التالي:

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

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

  1. انقر على الأشرطة في أعلى يمين الشاشة واختَر وحدة التحكّم > وحدة تحكّم جديدة.

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

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

مرة أخرى، يمكنك اختبار قدراتك وإنشاء نقطة نهاية Gemini باستخدام Flask API بنفسك. من المفترض أن يكون الرمز مشابهًا لما هو معروض أدناه.

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 Client:

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

تحديد دالة الإنشاء:

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

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

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

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

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

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

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

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

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

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

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

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

gcloud config set project [PROJECT_ID]

لا تنسَ استبدال [PROJECT_ID] برقم تعريف مشروعك. بعد ذلك، أدخِل الأوامر التالية بالترتيب واحدًا تلو الآخر:

cd amazing-gemini-app
gcloud run deploy --source .

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

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

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

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

7- التحدي

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

8. تَنظيم

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

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