1. Pengantar
Di dunia digital yang serba cepat saat ini, waktu adalah komoditas yang berharga. YouTube adalah repositori informasi yang luas, tetapi video yang panjang dapat memerlukan investasi waktu yang signifikan. Di sinilah alat perangkum YouTube menjadi sangat berharga. Alat ini secara efisien meringkas video panjang menjadi ringkasan yang singkat, sehingga pengguna dapat dengan cepat memahami konten inti tanpa menonton seluruh video. Fitur ini sangat berguna bagi siswa, profesional, dan siapa pun yang ingin mengekstrak informasi penting dari konten video online secara efisien. Pada dasarnya, alat perangkum YouTube memungkinkan pengguna memaksimalkan pembelajaran dan penyerapan informasi sekaligus meminimalkan waktu yang dihabiskan.
Di akhir lab ini, Anda akan memiliki aplikasi web yang berfungsi dan dapat membuat ringkasan dari video YouTube. Anda juga akan lebih memahami cara menggunakan Gemini API, Google Gen AI SDK, dan mengintegrasikannya untuk membangun 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 telah 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 Activate Cloud Shell di bagian atas Konsol Google Cloud.
- Setelah terhubung ke Cloud Shell, Anda dapat memeriksa bahwa Anda sudah diautentikasi dan project sudah 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>
Atau, Anda juga dapat melihat ID PROJECT_ID di konsol
Klik project tersebut dan Anda akan melihat semua project dan project ID di sisi kanan
- Pastikan API berikut diaktifkan, gunakan perintah berikut untuk menyetelnya:
- 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
Alternatif untuk menggunakan perintah gcloud adalah membuka konsol menggunakan link ini. Baca dokumentasi untuk mempelajari perintah gcloud dan penggunaannya.
Prasyarat
- Dapat membaca dan menulis kode Python dan HTML
- Nyaman bekerja dengan 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 API Flask
- Cara membuat link aplikasi GenAI yang menghubungkan front-end dan back-end
- Cara men-deploy aplikasi AI generatif 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 Cloud Shell Terminal, lalu klik tombol Open Editor. 
Pastikan project Cloud Code ditetapkan di pojok kiri bawah (status bar) editor Cloud Shell, seperti yang ditandai dalam gambar di bawah dan ditetapkan ke project Google Cloud aktif tempat Anda mengaktifkan penagihan. Authorize jika diminta.
CATATAN: Mungkin perlu waktu beberapa saat setelah editor Cloud Shell diinisialisasi dan memuat semua plugin yang diperlukan agar
Cloud Code - Sign In
tombol akan muncul, harap bersabar
Klik project aktif tersebut di status bar dan tunggu hingga 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"), lalu klik OK:
Langkah ini akan membuka template untuk project baru yang baru saja Anda siapkan.
Semudah itulah cara membuat Aplikasi Python Flask di Cloud Run dengan Google Cloud Shell.
4. Membangun frontend
Seperti yang dinyatakan sebelumnya, seperti inilah tampilan akhir aplikasi web:
Bagian ini berisi kolom input untuk memasukkan link YouTube dari pengguna, opsi untuk memilih keluarga model yang berbeda, area teks untuk memberikan perintah tambahan jika diperlukan, dan tombol untuk mengirimkan formulir.
Jika Anda menyukai tantangan, 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 dan pilih Run Python File in Terminal.
Jika semuanya berjalan lancar, Anda akan dapat mengakses aplikasi web dengan mengklik tombol Web Preview di sisi kanan atas Cloud Editor, lalu memilih Preview on port 8080
5. Membangun backend
Setelah front-end disiapkan, Anda harus membuat layanan back-end yang menggunakan model Gemini untuk meringkas video YouTube yang diberikan oleh pengguna. Perhatikan bahwa Anda akan mengganti 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 berhasil.
- Klik tiga garis di pojok kiri atas dan pilih Terminal > New Terminal ( Atau, Anda dapat melakukan
Ctrl + Shift + Cuntuk membuka terminal baru)
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 sendiri dan membuat endpoint Gemini menggunakan Flask API sendiri. Kode Anda di app.py akan serupa dengan yang diberikan di bawah.
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.
Menginisialisasi Klien Gemini:
- Hal ini menyiapkan koneksi ke Vertex AI Google, sehingga memungkinkan aplikasi 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, video dan perintah dikirim ke Gemini dan teks ringkasan yang dihasilkan akan ditampilkan.
Menentukan Rute Halaman Beranda (/):
- Fungsi ini merender template index.html, yang menampilkan formulir bagi pengguna untuk memasukkan link YouTube.
Menentukan Rute Pembuatan Ringkasan (/summarize):
- Fungsi ini menangani pengiriman formulir. File ini mengambil link YouTube, model, dan perintah 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 front-end. Klik kanan app.py, lalu pilih Run Python File in Terminal.
Lanjutkan dan uji aplikasi Anda. Aplikasi tersebut akan berfungsi seperti yang diharapkan.
6. Men-deploy Aplikasi Web
Setelah memiliki aplikasi GenAI yang berfungsi, mari kita deploy aplikasi di Cloud Run agar Anda dapat membagikannya kepada teman dan kolega untuk dicoba.
Buka Cloud Shell Terminal dan pastikan project saat ini dikonfigurasi ke project aktif Anda. Jika tidak, Anda harus menggunakan perintah gcloud configure untuk menyetel project ID:
gcloud config set project [PROJECT_ID]
Jangan lupa untuk mengganti [PROJECT_ID] dengan project ID Anda sendiri. Pastikan direktori kerja Anda saat ini di terminal adalah **amazing-gemini-app** Kemudian, masukkan perintah berikut secara berurutan satu per satu:
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 ditanya apakah Anda ingin mengizinkan pemanggilan yang tidak diautentikasi. Perhatikan bahwa kami mengizinkan akses tanpa autentikasi di sini karena ini adalah aplikasi demo. Sebaiknya gunakan autentikasi yang sesuai untuk aplikasi perusahaan dan produksi Anda.
Setelah deployment selesai, Anda akan mendapatkan link yang mirip dengan di bawah ini:
https://amazing-gemini-app-*******.a.run.app/
Lanjutkan dan gunakan aplikasi Anda dari jendela Samaran atau perangkat seluler Anda. Produk tersebut seharusnya sudah ditampilkan.
7. Tantangan
Sekarang adalah saatnya Anda bersinar. Apakah Anda memiliki kemampuan untuk mengubah kode sehingga Anda 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 Anda deploy, lalu menghapusnya.