1. はじめに
目まぐるしく進化するデジタル環境において、時間は貴重なリソースです。YouTube は膨大な情報のリポジトリですが、長い動画は視聴するのに時間がかかります。そこで役立つのが YouTube の要約ツールです。これらのツールは、長い動画を簡潔な要約に効率的にまとめるため、ユーザーは動画全体を視聴しなくてもコア コンテンツをすばやく把握できます。これは、学生、専門家、オンライン動画コンテンツから重要な情報を効率的に抽出したいと考えている人にとって特に便利です。つまり、YouTube の要約ツールを使用すると、ユーザーは学習と情報収集を最大限に活用しながら、費やす時間を最小限に抑えることができます。
このラボを修了すると、YouTube 動画から要約を生成できるウェブ アプリケーションが完成します。また、Gemini API と Google Gen AI SDK を使用して、それらを統合してウェブ アプリケーションを構築する方法についても理解を深めることができます。
ウェブ アプリケーションは次のようになります。
YouTube 動画へのリンクを指定するだけで、あとは Gemini がすべて処理します。
2. 始める前に
この Codelab では、課金が有効になっている Google Cloud プロジェクトがすでにあることを前提としています。まだお持ちでない場合は、以下の手順に沿って開始してください。
- Google Cloud コンソールのプロジェクト選択ページで、Google Cloud プロジェクトを選択または作成します。
- Google Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。
- Google Cloud 上で動作するコマンドライン環境の Cloud Shell を使用します。アクセスするには、Google Cloud コンソールの上部にある [Cloud Shell をアクティブにする] をクリックします。
- Cloud Shell に接続したら、次のコマンドを使用して、すでに認証済みであることと、プロジェクトがプロジェクト ID に設定されていることを確認します。
gcloud auth list
- Cloud Shell で次のコマンドを実行して、gcloud コマンドがプロジェクトを認識していることを確認します。
gcloud config list project
- プロジェクトが設定されていない場合は、次のコマンドを使用して設定します。
gcloud config set project <YOUR_PROJECT_ID>
または、コンソールで PROJECT_ID 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 を使用した作業に慣れている
- 基本的なフルスタック開発の知識がある
学習内容
- Flask API ライブラリを使用して Gemini を活用したバックエンド API を作成する方法
- 生成 AI アプリを構築してフロントエンドとバックエンドをリンクする方法
- 開発した GenAI アプリケーションを Cloud Run にデプロイする方法
必要なもの
- 動作するパソコンと安定した Wi-Fi 接続
- 好奇心
3. Cloud Run で Python Flask アプリを作成する
まず、Cloud Shell から自動生成されたテンプレートを使用して、 Cloud Run に Python Flask アプリを作成します。
[Cloud Shell ターミナル] に移動し、[エディタを開く] ボタンをクリックします。
下の図に示すように、Cloud Shell エディタの左下（ステータスバー）に Cloud Code プロジェクトが設定され、課金が有効になっているアクティブな Google Cloud プロジェクトに設定されていることを確認します。プロンプトが表示されたら、[承認] をクリックします。
注: Cloud Shell エディタが初期化され、必要なプラグインがすべて読み込まれるまで時間がかかることがあります。
Cloud Code - Sign In
ボタンが表示されるまでお待ちください。
ステータスバーでアクティブなプロジェクトをクリックし、Cloud Code ポップアップが開くまで待ちます。ポップアップで [新しいアプリケーション] を選択します。 
アプリケーションのリストから、[Cloud Run アプリケーション] を選択します。
2/2 ページで、Python Flask テンプレートを選択します。
プロジェクトの名前を入力し（例: 「amazing-gemini-app」）、[OK] をクリックします。
これで、設定した新しいプロジェクトのテンプレートが開きます。
Google Cloud Shell を使用すると、Cloud Run で Python Flask アプリを簡単に作成できます。
4. フロントエンドを構築する
前述のとおり、完成したウェブ アプリケーションは次のようになります。
ユーザーから YouTube リンクを受け取る入力フィールド、別のモデル ファミリーを選択するオプション、必要に応じて追加のプロンプトを入力するテキスト エリア、フォームを送信するボタンが含まれています。
チャレンジしたい場合は、独自のフォームを設計したり、CSS プロパティを編集したりできます。また、以下のコードをコピーして、templates フォルダの index.html ファイルの内容を置き換えることもできます。
<!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 ファイルを実行] を選択します。
すべてがうまくいけば、Cloud エディタの右上にある [Web Preview] ボタンをクリックしてウェブ アプリケーションにアクセスし、[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
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')
このコードは次の処理を行います。
必要なライブラリをインポートする:
- Flask: ウェブ アプリケーションを作成します。
- os: 環境変数にアクセスします。
- google.genai: Google の Gemini AI とやり取りします。
- google.genai.types: Gemini のデータ構造を定義します。
Gemini クライアントを初期化する:
- Google の Vertex AI への接続を設定し、アプリで Gemini AI モデルを使用できるようにします。「REPLACE_WITH_YOUR_PROJECT_ID」は実際のプロジェクト ID に置き換えてください。
generate 関数を定義する:
- この関数は、YouTube 動画リンク、Gemini モデル ID、追加のプロンプトを入力として受け取ります。次に、動画とプロンプトを Gemini に送信し、生成された要約テキストを返します。
ホームページ ルート（/）を定義する:
- この関数は index.html テンプレートをレンダリングします。このテンプレートには、ユーザーが YouTube リンクを入力するためのフォームが表示されます。
要約ルート（/summarize）を定義する:
- この関数はフォームの送信を処理します。フォームから YouTube リンク、モデル、プロンプトを取得し、generate 関数を呼び出して要約を取得し、result.html テンプレートに要約を表示します。
アプリケーションを実行する:
- 環境変数からサーバーポートを取得し、Flask ウェブサーバーを起動します。
ターミナルから app.py を実行して、コードをテストできます。フロントエンドのテストと同じ方法です。[app.py] を右クリックして [ターミナルで Python ファイルを実行] を選択します。
アプリケーションをテストします。想定どおりに動作するはずです。
6. ウェブ アプリケーションをデプロイする
動作する GenAI アプリケーションが完成したので、Cloud Run にアプリをデプロイして、友人や同僚と共有して試してみましょう。
Cloud Shell ターミナルに移動し、現在のプロジェクトがアクティブなプロジェクトに構成されていることを確認します。構成されていない場合は、gcloud configure コマンドを使用してプロジェクト ID を設定します。
gcloud config set project [PROJECT_ID]
[PROJECT_ID] は実際のプロジェクト ID に置き換えてください。ターミナルの現在の作業ディレクトリが **amazing-gemini-app** であることを確認します。次に、次のコマンドを順番に 1 つずつ入力します。
gcloud run deploy --source .
サービスの名前を入力するように求められます。たとえば、「youtube-summarizer」と入力します。リージョン「us-central1」に対応する番号を選択します。**未認証の呼び出し** を許可するかどうかを尋ねられたら、「y」と答えます。これはデモ アプリケーションであるため、未認証のアクセスを許可しています。エンタープライズ アプリケーションと本番環境アプリケーションには、適切な認証を使用することをおすすめします。
デプロイが完了すると、次のようなリンクが表示されます。
https://amazing-gemini-app-*******.a.run.app/
シークレット ウィンドウまたはモバイル デバイスからアプリケーションを使用します。すでに公開されているはずです。
7. チャレンジ
あなたの腕の見せ所です。パソコンから直接動画をアップロードできるようにコードを変更できますか？
8. クリーンアップ
この Codelab で使用したリソースについて、Google Cloud アカウントに課金されないようにする手順は、次のとおりです。