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 アプリを作成する方法
- 開発した 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 を右クリックして、[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 からパッケージをインストールする必要があります。
- 左上のバーをクリックし、[Terminal > New Terminal] を選択します（または、
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 アカウントに課金されないようにするには、次の操作を行います。