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>
- 次の API が有効になっていることを確認します。
- Cloud Run
- Vertex AI
gcloud コマンドを使用する代わりに、このリンクを使用してコンソールから操作することもできます。gcloud コマンドとその使用方法については、ドキュメントをご覧ください。
前提条件
- Python コードと HTML コードの読み取りと書き込みができる
- Gemini API と Google Gen AI SDK の使用に慣れている
- 基本的なフルスタック開発に関する理解
学習内容
- Flask API ライブラリを使用して Gemini を活用したバックエンド API を作成する方法
- フロントエンドとバックエンドをリンクする GenAI アプリを作成する方法
- 開発した 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 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 を右クリックして、[Run Python File in Terminal] を選択します。
問題がなければ、http://127.0.0.1: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 からパッケージをインストールする必要があります。
- 左上のバーをタップして、[Terminal > New Terminal] を選択します。
2. ターミナルで入力して仮想環境を作成し、正常にインストールされるまで待ちます。
python -m venv venv source venv/bin/activate pip install -r requirements.txt
ぜひ、Flask API を使用して Gemini エンドポイントを作成してみてください。コードは以下のようになります。
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 に置き換えてください。次に、次のコマンドを順番に 1 つずつ入力します。
cd amazing-gemini-app
gcloud run deploy --source .
サービスの名前（「youtube-summarizer」など）を入力するよう求められます。リージョン「us-central1」に対応する番号を選択します。未認証の呼び出しを許可するかどうかを尋ねられたら、「y」と話しかけます。これはデモ用アプリケーションであるため、未認証のアクセスを許可しています。エンタープライズ アプリケーションと本番環境のアプリケーションには、適切な認証を使用することをおすすめします。
デプロイが完了すると、次のようなリンクが表示されます。
https://amazing-gemini-app-*******.a.run.app/
シークレット ウィンドウまたはモバイル デバイスからアプリを使用してください。すでに公開されているはずです。
7. 課題
あなたの腕の見せどころです。パソコンから直接動画をアップロードできるようにコードを変更する知識はありますか？
8. クリーンアップ
この Codelab で使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の操作を行います。