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을 사용합니다. 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를 만드는 방법
- 프런트엔드와 백엔드를 함께 연결하는 생성형 AI 앱을 빌드하는 방법
- 개발된 생성형 AI 애플리케이션을 Cloud Run에 배포하는 방법
필요한 항목
- 작동하는 컴퓨터와 안정적인 Wi-Fi
- 호기심 많은 마음
3. Cloud Run에서 Python Flask 앱 만들기
먼저 Cloud Shell에서 자동 생성된 템플릿을 사용하여 Cloud Run에서 Python Flask 앱을 만듭니다.
Cloud Shell 터미널로 이동하여 편집기 열기 버튼을 클릭합니다. 
Cloud Code 프로젝트가 아래 이미지에서 강조 표시된 것처럼 Cloud Shell 편집기의 왼쪽 하단 (상태 표시줄)에 설정되어 있고 결제가 사용 설정된 활성 Google Cloud 프로젝트로 설정되어 있는지 확인합니다. 메시지가 표시되면 승인을 클릭합니다.
상태 표시줄에서 활성 프로젝트를 클릭하고 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를 마우스 오른쪽 버튼으로 클릭하고 터미널에서 Python 파일 실행을 선택합니다.
문제가 없다면 http://127.0.0.1:8080에서 웹 애플리케이션에 액세스할 수 있습니다.
5. 백엔드 빌드
프런트엔드가 설정되면 Gemini 모델을 사용하여 사용자가 제공한 YouTube 동영상을 요약하는 백엔드 서비스를 만들어야 합니다. 이 작업을 완료하려면 app.py를 덮어씁니다.
코드를 변경하기 전에 가상 환경을 만들고 Gemini 구성요소를 실행하는 데 필요한 라이브러리를 설치해야 합니다.
먼저 requirements.txt 파일에 Google Gen AI SDK 라이브러리를 추가해야 합니다. 다음과 같이 표시됩니다.
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
두 번째로 백엔드 코드를 실행할 수 있도록 가상 환경을 만들고 requirements.txt에서 패키지를 설치해야 합니다.
- 왼쪽 상단의 막대를 클릭하고 터미널 > 새 터미널을 선택합니다.
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와 상호작용하기 위한 API입니다.
- 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 링크, 모델, 프롬프트를 가져오고 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로 바꿔야 합니다. 그런 다음 다음 명령어를 순서대로 하나씩 입력합니다.
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 계정에 청구되지 않도록 하려면 다음 단계를 따르세요.