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 を作成する方法
- フロントエンドとバックエンドをリンクして GenAI アプリを構築する方法
- 開発した生成 AI アプリケーションを Cloud Run にデプロイする方法
必要なもの
- 動作するパソコンと安定した Wi-Fi 接続
- 好奇心旺盛な人
3. Cloud Run で Python Flask アプリを作成する
まず、Cloud Shell から自動生成されたテンプレートを使用して、Cloud Run に Python Flask アプリを作成します。
Cloud Shell ターミナルに移動し、[エディタを開く] ボタン 
をクリックします。
下の図でハイライト表示されているように、Cloud Shell エディタの左下（ステータスバー）に Cloud Code プロジェクトが設定され、請求が有効になっているアクティブな Google Cloud プロジェクトに設定されていることを確認します。プロンプトが表示されたら、[Authorize] をクリックします。
注: Cloud Shell エディタが初期化され、必要なプラグインがすべて読み込まれるまでに時間がかかることがあります。
Cloud Code - Sign In
ボタンが表示されるまでしばらくお待ちください
ステータスバーでアクティブなプロジェクトをクリックし、Cloud Code のポップアップが開くまで待ちます。ポップアップで [New Application] を選択します。
アプリケーションのリストから、[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 を右クリックして、[Run Python File in Terminal] を選択します。
すべてがうまくいけば、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 リンク、モデル、プロンプトを取得し、生成関数を呼び出して要約を取得し、result.html テンプレートに要約を表示します。
アプリケーションを実行する:
- 環境変数からサーバーポートを取得し、Flask ウェブサーバーを起動します。
ターミナルから app.py を実行して、コードをテストできます。フロントエンドのテストと同じ方法です。app.py を右クリックして、[Run Python File in Terminal] を選択します。
アプリケーションをテストします。これで想定どおりに動作するはずです。
6. ウェブ アプリケーションをデプロイする
これで、動作する生成 AI アプリケーションが完成しました。このアプリを 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 アカウントに課金されないようにするには、次の手順を行います。