หน้านี้ได้รับการแปลโดย Cloud Translation API

สร้างเครื่องมือสรุป YouTube ที่ทำงานด้วย Gemini

1. บทนำ

ในโลกดิจิทัลที่เปลี่ยนแปลงอย่างรวดเร็วในปัจจุบัน เวลาถือเป็นทรัพยากรที่มีค่า YouTube เป็นคลังข้อมูลที่กว้างใหญ่ แต่วิดีโอที่มีความยาวอาจต้องใช้เวลาในการรับชมมาก ด้วยเหตุนี้ วิดีโอสรุปของ YouTube จึงมีคุณค่าอย่างยิ่ง เครื่องมือเหล่านี้จะย่อวิดีโอที่ยาวๆ ให้สั้นกระชับได้อย่างรวดเร็ว ซึ่งช่วยให้ผู้ใช้เข้าใจเนื้อหาหลักได้อย่างรวดเร็วโดยไม่ต้องดูวิดีโอทั้งเรื่อง ซึ่งมีประโยชน์อย่างยิ่งสำหรับนักเรียน ผู้เชี่ยวชาญ และทุกคนที่ต้องการดึงข้อมูลสำคัญจากเนื้อหาวิดีโอออนไลน์อย่างมีประสิทธิภาพ โดยสรุปแล้ว เครื่องมือสรุปของ YouTube ช่วยให้ผู้ใช้ได้รับความรู้และข้อมูลสูงสุดในขณะที่ลดเวลาที่ต้องเสียไป

เมื่อจบการทดลองนี้ คุณจะมีเว็บแอปพลิเคชันที่ใช้งานได้ซึ่งสร้างสรุปจากวิดีโอ YouTube ได้ นอกจากนี้ คุณยังจะได้เข้าใจวิธีใช้ Gemini API, Google Gen AI SDK และผสานรวมเข้าด้วยกันเพื่อสร้างเว็บแอปพลิเคชันได้ดียิ่งขึ้น

เว็บแอปพลิเคชันจะมีลักษณะดังนี้

คุณเพียงต้องระบุลิงก์ไปยังวิดีโอ YouTube แล้ว Gemini จะดำเนินการที่เหลือ

2. ก่อนเริ่มต้น

โค้ดแล็บนี้ถือว่าคุณมีโปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงินอยู่แล้ว หากยังไม่มีบัญชี ให้ทำตามวิธีการด้านล่างเพื่อเริ่มต้นใช้งาน

ในคอนโซล Google Cloud ให้เลือกหรือสร้างโปรเจ็กต์ 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>

ตรวจสอบว่าได้เปิดใช้ API ต่อไปนี้

Cloud Run
Vertex AI

วิธีอื่นนอกเหนือจากการใช้คําสั่ง gcloud คือไปที่คอนโซลโดยใช้ลิงก์นี้ โปรดดูคำสั่งและการใช้งาน gcloud ในเอกสารประกอบ

ข้อกำหนดเบื้องต้น

สามารถอ่านและเขียนโค้ด Python และ HTML
ถนัดใช้งาน Gemini API และ Google Gen AI SDK
ความเข้าใจพื้นฐานเกี่ยวกับการพัฒนาแบบ Full Stack

สิ่งที่คุณจะได้เรียนรู้

วิธีสร้าง API แบ็กเอนด์ที่ทำงานด้วย Gemini โดยใช้ไลบรารี Flask API
วิธีสร้างแอป GenAI ที่ลิงก์ส่วนหน้าและส่วนหลังเข้าด้วยกัน
วิธีทำให้แอปพลิเคชัน GenAI ที่พัฒนาแล้วใช้งานได้ใน Cloud Run

สิ่งที่ต้องมี

คอมพิวเตอร์ที่ใช้งานได้และ Wi-Fi ที่เชื่อถือได้
จิตใจที่ใฝ่รู้

3. สร้างแอป Flask ของ Python ใน Cloud Run

เราจะสร้างแอป Flask ของ Python ใน Cloud Run โดยใช้เทมเพลตที่สร้างขึ้นโดยอัตโนมัติจาก Cloud Shell ก่อน

ไปที่ Cloud Shell Terminal แล้วคลิกปุ่มเปิดเครื่องมือแก้ไข

ตรวจสอบว่าได้ตั้งค่าโปรเจ็กต์ Cloud Code ที่มุมล่างซ้าย (แถบสถานะ) ของเครื่องมือแก้ไข Cloud Shell ดังที่ไฮไลต์ในภาพด้านล่าง และตั้งค่าเป็นโปรเจ็กต์ Google Cloud ที่ใช้งานอยู่ซึ่งคุณเปิดใช้การเรียกเก็บเงินไว้ ให้สิทธิ์หากได้รับข้อความแจ้ง

คลิกโปรเจ็กต์ที่ใช้งานอยู่ในแถบสถานะ แล้วรอให้ป๊อปอัป Cloud Code เปิดขึ้น ในป๊อปอัป ให้เลือก "แอปพลิเคชันใหม่"

จากรายการแอปพลิเคชัน ให้เลือกแอปพลิเคชัน Cloud Run

สำหรับหน้า 2/2 ให้เลือกเทมเพลต Python Flask

ตั้งชื่อโปรเจ็กต์ตามต้องการ (เช่น "amazing-gemini-app") แล้วคลิกตกลง

ซึ่งจะเปิดเทมเพลตสําหรับโปรเจ็กต์ใหม่ที่เพิ่งตั้งค่า

การสร้างแอป Flask ของ Python ใน Cloud Run ด้วย Google Cloud Shell นั้นง่ายดายเพียงใด

4. สร้างฟรอนต์เอนด์

ดังที่ได้กล่าวไว้ก่อนหน้านี้ เว็บแอปพลิเคชันเวอร์ชันสุดท้ายจะมีลักษณะดังนี้

โดยจะมีช่องป้อนข้อมูลเพื่อรับลิงก์ 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 แล้วเลือกเรียกใช้ไฟล์ Python ในเทอร์มินัล

หากทุกอย่างเรียบร้อยดี คุณควรเข้าถึงเว็บแอปพลิเคชันได้ที่ http://127.0.0.1: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

ประการที่ 2 คุณต้องสร้างสภาพแวดล้อมเสมือนและติดตั้งแพ็กเกจจาก requirements.txt เพื่อให้เรียกใช้โค้ดแบ็กเอนด์ได้สําเร็จ

คลิกแถบตรงมุมบนซ้าย แล้วเลือก Terminal > New Terminal

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: สําหรับการโต้ตอบกับ AI Gemini ของ Google
google.genai.types: สําหรับการกําหนดโครงสร้างข้อมูลสําหรับ Gemini

การเริ่มต้นใช้งานไคลเอ็นต์ Gemini:

โดยจะสร้างการเชื่อมต่อกับ Vertex AI ของ Google ซึ่งช่วยให้แอปใช้โมเดล AI ของ Gemini ได้ อย่าลืมแทนที่ "REPLACE_WITH_YOUR_PROJECT_ID" ด้วยรหัสโปรเจ็กต์ของคุณ

การกําหนดฟังก์ชัน generate:

ฟังก์ชันนี้จะรับลิงก์วิดีโอ YouTube, รหัสรุ่น Gemini และพรอมต์เพิ่มเติมเป็นอินพุต จากนั้นระบบจะส่งวิดีโอและพรอมต์ไปยัง Gemini และแสดงผลข้อความสรุปที่สร้างขึ้น

การกําหนดเส้นทางหน้าแรก (/):

ฟังก์ชันนี้จะแสดงผลเทมเพลต index.html ซึ่งจะแสดงแบบฟอร์มให้ผู้ใช้ป้อนลิงก์ YouTube

การกําหนดเส้นทางการสรุป (/summarize):

ฟังก์ชันนี้จะจัดการการส่งแบบฟอร์ม โดยจะดึงข้อมูลลิงก์ YouTube, โมเดล และพรอมต์จากแบบฟอร์ม เรียกใช้ฟังก์ชัน generate เพื่อรับข้อมูลสรุป แล้วแสดงข้อมูลสรุปในเทมเพลต result.html

การเรียกใช้แอปพลิเคชัน:

ซึ่งจะดึงข้อมูลพอร์ตเซิร์ฟเวอร์จากตัวแปรสภาพแวดล้อมและเริ่มเว็บเซิร์ฟเวอร์ Flask

คุณสามารถทดสอบโค้ดได้โดยเรียกใช้ app.py จากเทอร์มินัล วิธีเดียวกับการทดสอบส่วนหน้า คลิกขวาที่ app.py แล้วเลือกเรียกใช้ไฟล์ Python ในเทอร์มินัล

ไปทดสอบแอปพลิเคชันได้เลย การดำเนินการนี้ควรทำงานตามที่คาดไว้

6. ทำให้เว็บแอปพลิเคชันใช้งานได้

เมื่อคุณมีแอปพลิเคชัน GenAI ที่ใช้งานได้แล้ว มาทำให้แอปใช้งานได้ใน 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" เมื่อระบบถามว่าคุณต้องการอนุญาตการเรียกใช้ที่ไม่ผ่านการตรวจสอบสิทธิ์หรือไม่ โปรดทราบว่าเราอนุญาตให้เข้าถึงแบบไม่ตรวจสอบสิทธิ์ที่นี่เนื่องจากเป็นแอปพลิเคชันสาธิต เราขอแนะนำให้ใช้การตรวจสอบสิทธิ์ที่เหมาะสมสำหรับแอปพลิเคชันเวอร์ชัน Enterprise และเวอร์ชันที่ใช้งานจริง

เมื่อการทําให้ใช้งานได้เสร็จสมบูรณ์แล้ว คุณจะได้รับลิงก์ที่คล้ายกับด้านล่างนี้

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

โปรดใช้แอปพลิเคชันจากหน้าต่างที่ไม่ระบุตัวตนหรืออุปกรณ์เคลื่อนที่ วิดีโอควรเผยแพร่แล้ว

7. ความท้าทาย

ถึงเวลาเฉิดฉายแล้ว คุณมีทักษะในการเปลี่ยนโค้ดเพื่อให้อัปโหลดวิดีโอจากคอมพิวเตอร์ได้โดยตรงไหม

8. ล้างข้อมูล

โปรดทำตามขั้นตอนต่อไปนี้เพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในโค้ดแล็บนี้

ในคอนโซล Google Cloud ให้ไปที่หน้าจัดการทรัพยากร
ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบโปรเจ็กต์
หรือไปที่ Cloud Run ในคอนโซล เลือกบริการที่เพิ่งทำให้ใช้งานได้ แล้วลบ