1. 소개
오늘날 빠르게 변화하는 디지털 세상에서 시간은 소중한 자원입니다. YouTube는 방대한 정보를 제공하지만 긴 동영상은 상당한 시간을 투자해야 합니다. 이때 YouTube 요약 도구가 유용합니다. 이러한 도구는 긴 동영상을 간결한 요약으로 효율적으로 압축하여 사용자가 전체 동영상을 시청하지 않고도 핵심 콘텐츠를 빠르게 파악할 수 있도록 지원합니다. 이 기능은 학생, 전문가, 온라인 동영상 콘텐츠에서 핵심 정보를 효율적으로 추출하려는 모든 사용자에게 특히 유용합니다. 기본적으로 YouTube 요약 도구를 사용하면 학습 및 정보 습득을 극대화하면서 소요 시간을 최소화할 수 있습니다.
이 실습을 마치면 YouTube 동영상에서 요약을 생성할 수 있는 작동하는 웹 애플리케이션이 완성됩니다. 또한 Gemini API와 Google 생성형 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 생성형 AI SDK를 사용하는 데 능숙함
- 기본적인 풀 스택 개발에 대한 이해
학습할 내용
- Flask API 라이브러리를 사용하여 Gemini 기반 백엔드 API를 만드는 방법
- 프런트엔드와 백엔드를 함께 연결하여 생성형 AI 앱을 빌드하는 방법
- 개발된 생성형 AI 애플리케이션을 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') 확인을 클릭합니다.
그러면 방금 설정한 새 프로젝트의 템플릿이 열립니다.
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 Editor의 오른쪽 상단에 있는 Web Preview 버튼을 클릭하고 Preview on port 8080을 선택하여 웹 애플리케이션에 액세스할 수 있습니다.
5. 백엔드 빌드
프런트엔드를 설정한 후에는 Gemini 모델을 사용하여 사용자가 제공한 YouTube 동영상을 요약하는 백엔드 서비스를 만들어야 합니다. 이 작업을 완료하면 app.py가 덮어쓰여집니다.
코드를 변경하기 전에 가상 환경을 만들고 Gemini 구성요소를 실행하는 데 필요한 라이브러리를 설치해야 합니다.
먼저 requirements.txt 파일에 Google 생성형 AI SDK 라이브러리를 추가해야 합니다. 다음과 같이 표시됩니다.
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에 전송하고 생성된 요약 텍스트를 반환합니다.
홈페이지 경로 (/) 정의:
- 이 함수는 사용자가 YouTube 링크를 입력할 수 있는 양식을 표시하는 index.html 템플릿을 렌더링합니다.
요약 경로 정의 (/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**인지 확인한 후 다음 명령어를 순서대로 하나씩 입력합니다.
gcloud run deploy --source .
서비스 이름을 입력하라는 메시지가 표시됩니다. 'youtube-summarizer'라고 입력해 보겠습니다. 'us-central1' 리전에 해당하는 번호를 선택합니다. 인증되지 않은 호출을 허용할지 묻는 메시지가 표시되면 'y'라고 말합니다. 데모 애플리케이션이므로 여기서는 인증되지 않은 액세스를 허용합니다. 엔터프라이즈 및 프로덕션 애플리케이션에 적절한 인증을 사용하는 것이 좋습니다.
배포가 완료되면 다음과 비슷한 링크가 표시됩니다.
https://amazing-gemini-app-*******.a.run.app/
시크릿 모드 창이나 휴대기기에서 애플리케이션을 사용하세요. 이미 게시되었을 것입니다.
7. 도전과제
이제 빛을 발할 때입니다. 컴퓨터에서 직접 동영상을 업로드할 수 있도록 코드를 변경할 수 있나요?
8. 삭제
이 Codelab에서 사용한 리소스의 비용이 Google Cloud 계정에 청구되지 않도록 하려면 다음 단계를 따르세요.