یک جمع‌بندی کننده YouTube-Powered Gemini بسازید

۱. مقدمه

در دنیای دیجیتال پرشتاب امروز، زمان کالایی گرانبهاست. یوتیوب مخزن عظیمی از اطلاعات است، اما ویدیوهای طولانی می‌توانند سرمایه‌گذاری زمانی قابل توجهی باشند. اینجاست که خلاصه‌سازهای یوتیوب بسیار ارزشمند می‌شوند. این ابزارها به طور مؤثر ویدیوهای طولانی را به خلاصه‌های مختصر تبدیل می‌کنند و به کاربران این امکان را می‌دهند که بدون تماشای کل ویدیو، به سرعت محتوای اصلی را درک کنند. این امر به ویژه برای دانشجویان، متخصصان و هر کسی که به دنبال استخراج کارآمد اطلاعات کلیدی از محتوای ویدیویی آنلاین است، مفید است. اساساً، خلاصه‌سازهای یوتیوب کاربران را قادر می‌سازند تا ضمن به حداقل رساندن زمان صرف شده، یادگیری و دریافت اطلاعات خود را به حداکثر برسانند.

در پایان این آزمایش، شما یک برنامه وب کارآمد خواهید داشت که می‌تواند خلاصه‌ای از ویدیوهای یوتیوب تولید کند. همچنین درک بهتری از نحوه استفاده از Gemini API و Google Gen AI SDK و ادغام آنها برای ساخت یک برنامه وب خواهید داشت.

برنامه وب شما به این شکل خواهد بود:

تنها کاری که باید انجام دهید این است که لینک ویدیوی یوتیوب را وارد کنید و Gemini بقیه کارها را انجام خواهد داد.

۲. قبل از شروع

این آزمایشگاه کد فرض می‌کند که شما از قبل یک پروژه Google Cloud با قابلیت پرداخت فعال دارید. اگر هنوز آن را ندارید، می‌توانید دستورالعمل‌های زیر را برای شروع دنبال کنید.

1. در کنسول گوگل کلود ، در صفحه انتخاب پروژه، یک پروژه گوگل کلود را انتخاب یا ایجاد کنید.
2. مطمئن شوید که صورتحساب برای پروژه Google Cloud شما فعال است. یاد بگیرید که چگونه بررسی کنید که آیا صورتحساب در یک پروژه فعال است یا خیر .
3. شما از Cloud Shell ، یک محیط خط فرمان که در Google Cloud اجرا می‌شود، استفاده خواهید کرد. برای دسترسی به آن، روی Activate Cloud Shell در بالای کنسول Google Cloud کلیک کنید.

4. پس از اتصال به Cloud Shell، با استفاده از دستور زیر بررسی می‌کنید که آیا از قبل احراز هویت شده‌اید و پروژه روی شناسه پروژه شما تنظیم شده است یا خیر:

gcloud auth list

5. دستور زیر را در Cloud Shell اجرا کنید تا تأیید شود که دستور gcloud از پروژه شما اطلاع دارد.

gcloud config list project

6. اگر پروژه شما تنظیم نشده است، از دستور زیر برای تنظیم آن استفاده کنید:

gcloud config set project <YOUR_PROJECT_ID>

از طرف دیگر، می‌توانید شناسه PROJECT_ID را در کنسول نیز مشاهده کنید.

روی آن کلیک کنید تا تمام پروژه و شناسه پروژه در سمت راست نمایش داده شود.

7. مطمئن شوید که API های زیر فعال هستند، برای تنظیم آنها از دستور زیر استفاده کنید:

• رابط برنامه‌نویسی کاربردی هوش مصنوعی ورتکس
• رابط برنامه‌نویسی کاربردی مدیریت ابری
• API ساخت ابری
• رابط برنامه‌نویسی کاربردی (API) مدیریت منابع ابری

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

جایگزین استفاده از دستور gcloud، استفاده از کنسول با استفاده از این لینک است. برای دستورات و نحوه استفاده از gcloud به مستندات مراجعه کنید.

پیش‌نیازها

• قادر به خواندن و نوشتن کدهای پایتون و HTML
• کار راحت با Gemini API و Google Gen AI SDK
• درک مفاهیم اولیه توسعه فول استک

آنچه یاد خواهید گرفت

• نحوه ایجاد یک API بک‌اند مبتنی بر Gemini با استفاده از کتابخانه Flask API
• چگونه یک برنامه GenAI بسازیم که front-end و back-end را به هم متصل کند؟
• نحوه استقرار برنامه توسعه‌یافته GenAI در Cloud Run

آنچه نیاز دارید

• یک کامپیوتر سالم و وای فای قابل اعتماد
• یک ذهن کنجکاو

۳. یک برنامه پایتون فلاسک روی Cloud Run ایجاد کنید

ما برنامه پایتون فلاسک را روی Cloud Run با استفاده از الگوی تولید شده خودکار از Cloud Shell ایجاد خواهیم کرد.

به ترمینال Cloud Shell بروید و روی دکمه Open Editor کلیک کنید.

مطمئن شوید که پروژه Cloud Code در گوشه پایین سمت چپ (نوار وضعیت) ویرایشگر Cloud Shell، همانطور که در تصویر زیر مشخص شده است، تنظیم شده باشد و روی پروژه فعال Google Cloud که در آن صورتحساب را فعال کرده‌اید، تنظیم شده باشد. در صورت درخواست، تأیید کنید .

یادداشت‌ها: ممکن است مدتی طول بکشد تا ویرایشگر Cloud Shell مقداردهی اولیه شود و تمام افزونه‌های مورد نیاز بارگیری شوند تا

Cloud Code - Sign In

دکمه ظاهر خواهد شد، لطفا صبور باشید

روی پروژه فعال در نوار وضعیت کلیک کنید و منتظر بمانید تا پنجره Cloud Code باز شود. در پنجره باز شده، "New Application" را انتخاب کنید.

از لیست برنامه‌ها، برنامه Cloud Run را انتخاب کنید:

برای صفحه ۲/۲، الگوی پایتون فلسک را انتخاب کنید:

نام پروژه را به دلخواه خود وارد کنید (مثلاً "amazing-gemini-app") و روی تأیید کلیک کنید:

این کار قالب پروژه جدیدی را که تازه راه‌اندازی کرده‌اید، باز می‌کند.

به همین سادگی می‌توان یک برنامه پایتون فلاسک را روی Cloud Run با Google Cloud Shell ایجاد کرد.

۴. ساخت رابط کاربری (front-end)

همانطور که قبلاً گفته شد، برنامه وب نهایی به این شکل خواهد بود:

این شامل یک فیلد ورودی برای دریافت لینک یوتیوب از کاربر، گزینه‌ای برای انتخاب یک خانواده مدل متفاوت، یک ناحیه متنی برای ارائه اعلان اضافی در صورت نیاز و یک دکمه برای ارسال فرم است.

اگر این چالش را دوست دارید، می‌توانید فرم خودتان را طراحی کنید یا ویژگی‌های 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 را انتخاب کنید.

اگر همه چیز خوب پیش رفته باشد، باید بتوانید با کلیک روی دکمه Web Preview در سمت راست بالای ویرایشگر ابری، به برنامه وب خود دسترسی پیدا کنید و Preview on port 8080 انتخاب کنید.

۵. بک‌اند را بسازید

پس از راه‌اندازی front-end، باید یک سرویس back-end ایجاد کنید که از مدل Gemini برای خلاصه‌سازی ویدیوی یوتیوب ارائه شده توسط کاربر استفاده کند. توجه داشته باشید که برای انجام این کار، 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 نصب کنید تا بتوانید کد back-end را با موفقیت اجرا کنید.

1. روی میله‌های گوشه بالا سمت چپ کلیک کنید و ترمینال > ترمینال جدید را انتخاب کنید (به عنوان جایگزین، می‌توانید Ctrl + Shift + C را برای باز کردن ترمینال جدید فشار دهید)

۲. با تایپ کردن در ترمینال، یک محیط مجازی ایجاد کنید و منتظر بمانید تا با موفقیت نصب شود.

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

باز هم می‌توانید خودتان را به چالش بکشید و با استفاده از Flask API یک نقطه پایانی Gemini ایجاد کنید. کد شما در 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')

در اصل، کد زیر کارهای زیر را انجام می‌دهد:

کتابخانه‌های لازم را وارد می‌کند:

• فلسک: برای ایجاد برنامه وب.
• os: برای دسترسی به متغیرهای محیطی.
• google.genai: برای تعامل با هوش مصنوعی Gemini گوگل.
• google.genai.types: برای تعریف ساختارهای داده برای Gemini.

مقداردهی اولیه کلاینت Gemini:

• این یک اتصال به هوش مصنوعی Vertex گوگل برقرار می‌کند و برنامه را قادر می‌سازد از مدل هوش مصنوعی Gemini استفاده کند. مطمئن شوید که " REPLACE_WITH_YOUR_PROJECT_ID " را با شناسه پروژه خود جایگزین کنید.

تعریف تابع تولید:

• این تابع یک لینک ویدیوی یوتیوب، یک شناسه مدل Gemini و یک اعلان اضافی را به عنوان ورودی دریافت می‌کند. سپس ویدیو و اعلان را به Gemini ارسال می‌کند و متن خلاصه تولید شده را برمی‌گرداند.

تعریف مسیر صفحه اصلی (/):

• این تابع، قالب index.html را رندر می‌کند که فرمی را برای کاربر نمایش می‌دهد تا لینک یوتیوب را وارد کند.

تعریف مسیر خلاصه‌سازی (/summarize):

• این تابع، ارسال فرم را مدیریت می‌کند. لینک یوتیوب، مدل و اعلان را از فرم بازیابی می‌کند، تابع generate را برای دریافت خلاصه فراخوانی می‌کند و سپس خلاصه را در قالب result.html نمایش می‌دهد.

اجرای برنامه:

• پورت سرور را از متغیرهای محیطی بازیابی می‌کند و وب سرور Flask را اجرا می‌کند.

شما می‌توانید کد را با اجرای app.py از ترمینال تست کنید. همان روش تست front-end. روی app.py کلیک راست کرده و گزینه Run Python File in Terminal را انتخاب کنید.

ادامه دهید و برنامه خود را آزمایش کنید. باید مطابق انتظار کار کند.

۶. برنامه وب را مستقر کنید

حالا که برنامه 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 » انتخاب کنید. وقتی از شما پرسیده می‌شود که آیا می‌خواهید فراخوانی‌های احراز هویت نشده را مجاز کنید، « y » بگویید. توجه داشته باشید که ما در اینجا دسترسی غیرمجاز را مجاز می‌دانیم زیرا این یک برنامه آزمایشی است. توصیه می‌شود از احراز هویت مناسب برای برنامه‌های سازمانی و تولیدی خود استفاده کنید.

پس از اتمام نصب، باید لینکی مشابه لینک زیر دریافت کنید:

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

می‌توانید از برنامه‌ی خود در حالت ناشناس یا در دستگاه همراهتان استفاده کنید. باید از قبل فعال باشد.

۷. چالش

حالا وقت درخشیدن شماست. آیا می‌دانید برای تغییر کد و آپلود مستقیم ویدیوها از کامپیوترتان چه باید کرد؟

۸. تمیز کردن

برای جلوگیری از تحمیل هزینه به حساب Google Cloud خود برای منابع استفاده شده در این codelab، این مراحل را دنبال کنید:

1. در کنسول گوگل کلود، به صفحه مدیریت منابع بروید.
2. در لیست پروژه‌ها، پروژه‌ای را که می‌خواهید حذف کنید انتخاب کنید و سپس روی «حذف» کلیک کنید.
3. در کادر محاوره‌ای، شناسه پروژه را تایپ کنید و سپس برای حذف پروژه، روی خاموش کردن کلیک کنید.
4. روش دیگر این است که به Cloud Run در کنسول بروید، سرویسی را که اخیراً مستقر کرده‌اید انتخاب کرده و حذف کنید.