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

1. บทนำ

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

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

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

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

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

Codelab นี้ถือว่าคุณมีโปรเจ็กต์ 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>

หรือคุณจะดู PROJECT_ID id ในคอนโซลก็ได้

คลิก แล้วคุณจะเห็นโปรเจ็กต์ทั้งหมดและรหัสโปรเจ็กต์ทางด้านขวา

ตรวจสอบว่าได้เปิดใช้ API ต่อไปนี้แล้ว หากต้องการตั้งค่า ให้ใช้คำสั่งต่อไปนี้

Vertex AI API
Cloud Run Admin API
Cloud Build API
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
ความเข้าใจในการพัฒนาแบบฟูลสแต็กขั้นพื้นฐาน

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

วิธีสร้างแบ็กเอนด์ API ที่ทำงานด้วย Gemini โดยใช้ไลบรารี Flask API
วิธีสร้างลิงก์แอป GenAI ที่เชื่อมต่อส่วนหน้าและส่วนหลังเข้าด้วยกัน
วิธีติดตั้งใช้งานแอปพลิเคชัน GenAI ที่พัฒนาแล้วใน 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 ในโฟลเดอร์ 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 ในเทอร์มินัล

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

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

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

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

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

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

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

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

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