1. Pengantar
Di dunia digital yang serba cepat saat ini, waktu adalah komoditas yang berharga. YouTube adalah repositori informasi yang sangat luas, tetapi video berdurasi panjang dapat menjadi investasi waktu yang signifikan. Di sinilah pembuat ringkasan YouTube menjadi sangat berharga. Alat ini meringkas video panjang menjadi ringkasan yang ringkas secara efisien, sehingga pengguna dapat dengan cepat memahami konten inti tanpa menonton seluruh video. Hal ini sangat berguna bagi siswa, profesional, dan siapa saja yang ingin mengekstrak informasi penting dari konten video online secara efisien. Pada dasarnya, pembuat ringkasan YouTube memungkinkan pengguna memaksimalkan proses belajar dan menyerap informasi sekaligus meminimalkan waktu yang terbuang.
Di akhir lab ini, Anda akan memiliki aplikasi web yang berfungsi dan dapat membuat ringkasan dari video YouTube. Anda juga akan memiliki pemahaman yang lebih baik tentang cara menggunakan Gemini API, Google Gen AI SDK, dan mengintegrasikannya untuk membuat aplikasi web.
Aplikasi web Anda akan terlihat seperti ini:
Anda hanya perlu memberikan link ke video YouTube dan Gemini akan melakukan sisanya.
2. Sebelum memulai
Codelab ini mengasumsikan bahwa Anda sudah memiliki project Google Cloud dengan penagihan yang diaktifkan. Jika belum memilikinya, Anda dapat mengikuti petunjuk di bawah untuk memulai.
- Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
- Pastikan penagihan diaktifkan untuk project Google Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project.
- Anda akan menggunakan Cloud Shell, lingkungan command line yang berjalan di Google Cloud. Untuk mengaksesnya, klik Aktifkan Cloud Shell di bagian atas konsol Google Cloud.
- Setelah terhubung ke Cloud Shell, Anda akan memeriksa apakah Anda sudah diautentikasi dan project ditetapkan ke project ID Anda menggunakan perintah berikut:
gcloud auth list
- Jalankan perintah berikut di Cloud Shell untuk mengonfirmasi bahwa perintah gcloud mengetahui project Anda.
gcloud config list project
- Jika project Anda belum ditetapkan, gunakan perintah berikut untuk menetapkannya:
gcloud config set project <YOUR_PROJECT_ID>
- Pastikan API berikut diaktifkan:
- Cloud Run
- Vertex AI
Alternatif untuk menggunakan perintah gcloud adalah melalui konsol menggunakan link ini. Lihat dokumentasi untuk mempelajari perintah gcloud dan penggunaannya.
Prasyarat
- Dapat membaca dan menulis kode Python dan HTML
- Merasa nyaman menggunakan Gemini API dan Google Gen AI SDK
- Pemahaman tentang pengembangan full-stack dasar
Yang akan Anda pelajari
- Cara membuat API backend yang didukung Gemini menggunakan library Flask API
- Cara mem-build aplikasi GenAI yang menautkan frontend dan backend
- Cara men-deploy aplikasi GenAI yang dikembangkan di Cloud Run
Yang Anda butuhkan
- Komputer dan Wi-Fi yang berfungsi dengan baik
- Pikiran yang ingin tahu
3. Membuat Aplikasi Flask Python di Cloud Run
Kita akan membuat Aplikasi Flask Python di Cloud Run menggunakan template yang dibuat otomatis terlebih dahulu dari Cloud Shell.
Buka Terminal Cloud Shell, lalu klik tombol Open Editor. 
Pastikan project Cloud Code ditetapkan di pojok kiri bawah (status bar) editor Cloud Shell, seperti yang ditandai pada gambar di bawah dan ditetapkan ke project Google Cloud aktif tempat Anda mengaktifkan penagihan. Authorize jika diminta.
Klik project aktif tersebut di status bar dan tunggu pop-up Cloud Code terbuka. Di pop-up, pilih "Aplikasi Baru". 
Dari daftar aplikasi, pilih Cloud Run Application:
Untuk halaman 2/2, pilih template Python Flask:
Berikan nama project sesuai keinginan Anda (misalnya "amazing-gemini-app") dan klik OK:
Tindakan ini akan membuka template untuk project baru yang baru saja Anda siapkan.
Begitulah mudahnya membuat Aplikasi Python Flask di Cloud Run dengan Google Cloud Shell.
4. Mem-build frontend
Seperti yang dinyatakan sebelumnya, tampilan akhir aplikasi web akan terlihat seperti ini:
Halaman ini berisi kolom input untuk memasukkan link YouTube dari pengguna, opsi untuk memilih keluarga model yang berbeda, textarea untuk memberikan perintah tambahan jika diperlukan, dan tombol untuk mengirimkan formulir.
Jika Anda menyukai tantangan ini, silakan desain formulir Anda sendiri atau edit properti CSS. Anda juga dapat menyalin kode dari bawah dan mengganti konten dari file index.html di folder templates dengan kode tersebut.
<!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>
Untuk menguji apakah Anda telah melakukan langkah ini dengan benar, klik kanan app.py, lalu pilih Run Python File in Terminal.
Jika semuanya berjalan lancar, Anda akan dapat mengakses aplikasi web di http://127.0.0.1:8080.
5. Membuat backend
Setelah frontend disiapkan, Anda harus membuat layanan backend yang menggunakan model Gemini untuk meringkas video YouTube yang diberikan oleh pengguna. Perhatikan bahwa Anda akan menimpa app.py untuk menyelesaikan tugas ini.
Sebelum mengubah kode, Anda harus membuat lingkungan virtual dan menginstal library yang diperlukan untuk menjalankan komponen Gemini.
Pertama, Anda harus menambahkan library Google Gen AI SDK ke file requirements.txt. Tampilannya akan terlihat seperti ini:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
Kedua, Anda perlu membuat lingkungan virtual dan menginstal paket dari requirements.txt agar dapat menjalankan kode backend dengan sukses.
- Klik garis di pojok kiri atas dan pilih Terminal > New Terminal
2. Buat lingkungan virtual dengan mengetik di terminal dan tunggu hingga berhasil diinstal
python -m venv venv source venv/bin/activate pip install -r requirements.txt
Sekali lagi, jangan ragu untuk menantang diri Anda dan membuat endpoint Gemini menggunakan Flask API sendiri. Kode Anda akan terlihat mirip dengan yang diberikan di bawah ini.
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')
Pada dasarnya, kode melakukan hal berikut:
Mengimpor library yang diperlukan:
- Flask: Untuk membuat aplikasi web.
- os: Untuk akses variabel lingkungan.
- google.genai: Untuk berinteraksi dengan AI Gemini Google.
- google.genai.types: Untuk menentukan struktur data untuk Gemini.
Melakukan inisialisasi pada Klien Gemini:
- Library ini menyiapkan koneksi ke Vertex AI Google, sehingga aplikasi dapat menggunakan model AI Gemini. Pastikan untuk mengganti "REPLACE_WITH_YOUR_PROJECT_ID" dengan project ID Anda.
Menentukan Fungsi generate:
- Fungsi ini menggunakan link video YouTube, ID model Gemini, dan perintah tambahan sebagai input. Kemudian, perintah ini akan mengirim video dan perintah ke Gemini dan menampilkan teks ringkasan yang dihasilkan.
Menentukan Rute Halaman Beranda (/):
- Fungsi ini merender template index.html, yang menampilkan formulir bagi pengguna untuk memasukkan link YouTube.
Menentukan Rute Ringkasan (/summarize):
- Fungsi ini menangani pengiriman formulir. Fungsi ini mengambil link, model, dan perintah YouTube dari formulir, memanggil fungsi generate untuk mendapatkan ringkasan, lalu menampilkan ringkasan dalam template result.html.
Menjalankan Aplikasi:
- Kode ini mengambil port server dari variabel lingkungan dan memulai server web Flask.
Anda dapat menguji kode dengan menjalankan app.py dari terminal. Metode yang sama seperti menguji frontend. Klik kanan app.py, lalu pilih Run Python File in Terminal.
Silakan uji aplikasi Anda. Aplikasi tersebut seharusnya berfungsi seperti yang diharapkan.
6. Men-deploy Aplikasi Web
Setelah Anda memiliki aplikasi GenAI yang berfungsi, mari kita deploy aplikasi di Cloud Run agar Anda dapat membagikannya kepada teman dan kolega untuk dicoba.
Buka Terminal Cloud Shell dan pastikan project saat ini dikonfigurasi ke project aktif Anda. Jika tidak, Anda harus menggunakan perintah gcloud configure untuk menetapkan project ID:
gcloud config set project [PROJECT_ID]
Jangan lupa untuk mengganti [PROJECT_ID] dengan project ID Anda sendiri. Kemudian, masukkan perintah berikut dalam urutan tersebut satu per satu:
cd amazing-gemini-app
gcloud run deploy --source .
Anda akan diminta untuk memasukkan nama layanan, misalnya "youtube-summarizer". Pilih nomor yang sesuai untuk region "us-central1". Ucapkan "y" saat diminta apakah Anda ingin mengizinkan pemanggilan yang tidak diautentikasi. Perhatikan bahwa kami mengizinkan akses yang tidak diautentikasi di sini karena ini adalah aplikasi demo. Rekomendasinya adalah menggunakan autentikasi yang sesuai untuk aplikasi perusahaan dan produksi Anda.
Setelah deployment selesai, Anda akan mendapatkan link yang mirip dengan link di bawah ini:
https://amazing-gemini-app-*******.a.run.app/
Gunakan aplikasi Anda dari jendela Samaran atau perangkat seluler. Halaman tersebut seharusnya sudah aktif.
7. Tantangan
Sekarang saatnya Anda bersinar. Apakah Anda memiliki kemampuan untuk mengubah kode agar dapat mengupload video langsung dari komputer?
8. Pembersihan
Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam codelab ini, ikuti langkah-langkah berikut:
- Di konsol Google Cloud, buka halaman Manage resources.
- Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
- Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.
- Atau, Anda dapat membuka Cloud Run di konsol, memilih layanan yang baru saja di-deploy, lalu menghapusnya.