Создайте сумматор YouTube на базе Gemini

1. Введение

В современном быстро меняющемся цифровом мире время — бесценный ресурс. YouTube — это огромное хранилище информации, но просмотр длинных видеороликов может занимать значительное количество времени. Именно здесь на помощь приходят инструменты для создания кратких обзоров на YouTube. Эти инструменты эффективно сжимают длинные видео в лаконичные резюме, позволяя пользователям быстро усвоить основную информацию, не просматривая видео целиком. Это особенно полезно для студентов, специалистов и всех, кто стремится эффективно извлекать ключевую информацию из онлайн-видеоконтента. По сути, инструменты для создания кратких обзоров на YouTube позволяют пользователям максимально эффективно усваивать информацию и минимизировать затраты времени.

По завершении этой лабораторной работы у вас будет работающее веб-приложение, способное генерировать краткие обзоры из видеороликов YouTube. Вы также лучше поймете, как использовать API Gemini, SDK Google Gen AI и интегрировать их для создания веб-приложения.

Ваше веб-приложение будет выглядеть следующим образом:

13a0825947f9892b.png

Вам нужно всего лишь указать ссылку на видео на YouTube, и Gemini сделает все остальное.

2. Прежде чем начать

В этом практическом задании предполагается, что у вас уже есть проект Google Cloud с включенной оплатой. Если у вас его еще нет, вы можете следовать инструкциям ниже, чтобы начать работу.

  1. В консоли Google Cloud на странице выбора проекта выберите или создайте проект Google Cloud.
  2. Убедитесь, что для вашего проекта Google Cloud включена функция выставления счетов. Узнайте, как проверить, включена ли функция выставления счетов для проекта .
  3. Вы будете использовать Cloud Shell — среду командной строки, работающую в Google Cloud. Чтобы получить к ней доступ, нажмите «Активировать Cloud Shell» в верхней части консоли Google Cloud.

1829c3759227c19b.png

  1. После подключения к Cloud Shell необходимо проверить, прошли ли вы аутентификацию и установлен ли идентификатор вашего проекта, используя следующую команду: 
gcloud auth list
  1. Выполните следующую команду в Cloud Shell, чтобы убедиться, что команда gcloud знает о вашем проекте. 
gcloud config list project
  1. Если ваш проект не задан, используйте следующую команду для его установки: 
gcloud config set project <YOUR_PROJECT_ID>

В качестве альтернативы, вы также можете увидеть идентификатор PROJECT_ID в консоли.

4032c45803813f30.jpeg

Нажмите на него, и справа отобразятся все ваши проекты и их идентификаторы.

2b4c041c426d8b29.jpeg

  1. Убедитесь, что следующие API включены; для этого используйте следующую команду:
  • API Vertex AI
  • API администратора Cloud Run
  • API Cloud Build
  • API Cloud Resource Manager 
gcloud services enable aiplatform.googleapis.com \
                           run.googleapis.com \
                           cloudbuild.googleapis.com \
                           cloudresourcemanager.googleapis.com

Альтернативой использованию команды gcloud является работа через консоль по этой ссылке . Для получения информации о командах и использовании gcloud обратитесь к документации .

Предварительные требования

  • Умение читать и писать код на Python и HTML.
  • Уверенное владение API Gemini и SDK Google Gen AI.
  • Понимание основ разработки полного стека.

Что вы узнаете

  • Как создать бэкэнд API на базе Gemini с использованием библиотеки Flask API
  • Как создать приложение GenAI, которое свяжет фронтенд и бэкенд?
  • Как развернуть разработанное приложение GenAI в Cloud Run

Что вам понадобится

  • Рабочий компьютер и надежный Wi-Fi.
  • Любознательный ум

3. Создайте приложение Python Flask в Cloud Run.

Сначала мы создадим приложение Python Flask в Cloud Run, используя автоматически сгенерированный шаблон из Cloud Shell.

Перейдите в терминал Cloud Shell и нажмите кнопку «Открыть редактор». b16d56e4979ec951.png

Убедитесь, что в левом нижнем углу (строке состояния) редактора Cloud Shell указан проект Cloud Code, как показано на изображении ниже, и что он соответствует активному проекту Google Cloud, в котором включена оплата. При появлении запроса авторизуйтесь .

ПРИМЕЧАНИЯ: После инициализации редактора Cloud Shell и загрузки всех необходимых плагинов может потребоваться некоторое время.

Cloud Code - Sign In

Кнопка появится, пожалуйста, подождите.

f5003b9c38b43262.png

Щелкните по активному проекту в строке состояния и дождитесь открытия всплывающего окна Cloud Code. Во всплывающем окне выберите «Новое приложение». 70f80078e01a02d8.png

Из списка приложений выберите Cloud Run Application :

39abad102a72ae74.png

На странице 2/2 выберите шаблон Python Flask:

a78b3a0311403ad.png

Укажите желаемое название проекта (например, "amazing-gemini-app") и нажмите ОК :

4d8f77279d9509cb.png

Это откроет шаблон для только что созданного вами нового проекта.

e85a020a20d38e17.png

Вот как просто создать приложение Python Flask на Cloud Run с помощью Google Cloud Shell.

4. Создайте фронтенд.

Как уже говорилось, вот как будет выглядеть финальное веб-приложение:

13a0825947f9892b.png

Он содержит поле ввода для ссылки на YouTube от пользователя, возможность выбора другого семейства моделей, текстовое поле для добавления дополнительной информации при необходимости и кнопку для отправки формы.

Если вам нравится решать сложные задачи, вы можете создать свою собственную форму или отредактировать свойства CSS. Вы также можете скопировать приведенный ниже код и заменить им содержимое файла index.html в папке templates .

<!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 в терминале».

690765473f94db9c.png

Если все прошло успешно, вы сможете получить доступ к своему веб-приложению, нажав кнопку « Web Preview в правом верхнем углу облачного редактора и выбрав Preview on port 8080

49cbdfdf77964065.jpeg

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 , чтобы успешно запустить код бэкэнда.

  1. Нажмите на полоски в верхнем левом углу и выберите Терминал > Новый терминал (или нажмите Ctrl + Shift + C чтобы открыть новый терминал).

2cda225f0cd71e7e.png 2. Создайте виртуальное окружение, введя команду в терминале, и дождитесь успешной установки.

python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Попробуйте еще раз проверить свои силы и создать собственную конечную точку Gemini, используя API Flask. Ваш код в файле 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: Для создания веб-приложения.
  • ОС: Для доступа к переменным среды.
  • google.genai: Для взаимодействия с искусственным интеллектом Gemini от Google.
  • google.genai.types: Для определения структур данных для Gemini.

Инициализация клиента Gemini:

  • Это устанавливает соединение с Google Vertex AI, позволяя приложению использовать модель Gemini AI. Обязательно замените " REPLACE_WITH_YOUR_PROJECT_ID " на идентификатор вашего проекта.

Определение функции генерации:

  • Эта функция принимает в качестве входных данных ссылку на видео с YouTube, идентификатор модели Gemini и дополнительный запрос. Затем она отправляет видео и запрос в Gemini и возвращает сгенерированный сводный текст.

Определение маршрута главной страницы (/):

  • Эта функция отображает шаблон index.html, в котором выводится форма, в которую пользователь может ввести ссылку на YouTube.

Определение маршрута суммирования (/summarize):

  • Эта функция обрабатывает отправленные формы. Она извлекает из формы ссылку на YouTube, модель и подсказку, вызывает функцию generate для получения сводки, а затем отображает сводку в шаблоне result.html .

Запуск приложения:

  • Программа получает порт сервера из переменных окружения и запускает веб-сервер Flask.

Вы можете протестировать код, запустив файл app.py из терминала. Метод тот же, что и при тестировании интерфейса. Щелкните правой кнопкой мыши на файле app.py и выберите «Запустить файл Python в терминале».

Протестируйте своё приложение. Оно должно работать как положено.

6. Развертывание веб-приложения

Теперь, когда у вас есть работающее приложение GenAI, давайте развернем его в Cloud Run, чтобы вы могли поделиться им со своими друзьями и коллегами для тестирования.

Перейдите в терминал Cloud Shell и убедитесь, что текущий проект настроен на ваш активный проект. Если это не так, используйте команду gcloud configure для установки идентификатора проекта:

gcloud config set project [PROJECT_ID]

Не забудьте заменить [PROJECT_ID] на идентификатор вашего проекта. Убедитесь, что в терминале у вас сейчас находится **amazing-gemini-app** Затем введите следующие команды в указанном порядке по очереди: 

gcloud run deploy --source .

Вам будет предложено ввести имя для вашего сервиса, например, « youtube-summarizer ». Выберите соответствующий номер региона « us-central1 ». Ответьте « y », когда система спросит, хотите ли вы разрешить неаутентифицированные вызовы . Обратите внимание, что мы разрешаем неаутентифицированный доступ, поскольку это демонстрационное приложение. Рекомендуется использовать соответствующую аутентификацию для ваших корпоративных и производственных приложений.

После завершения развертывания вы должны получить ссылку, похожую на приведенную ниже:

https://amazing-gemini-app-*******.a.run.app/

Смело используйте приложение в режиме инкогнито или на мобильном устройстве. Оно уже должно быть запущено.

7. Вызов

Настал ваш звёздный час. Сможете ли вы изменить код, чтобы загружать видео прямо со своего компьютера?

8. Уборка

Чтобы избежать списания средств с вашего аккаунта Google Cloud за ресурсы, использованные в этом практическом задании, выполните следующие действия:

  1. В консоли Google Cloud перейдите на страницу «Управление ресурсами» .
  2. В списке проектов выберите проект, который хотите удалить, и нажмите кнопку «Удалить» .
  3. В диалоговом окне введите идентификатор проекта, а затем нажмите «Завершить» , чтобы удалить проект.
  4. В качестве альтернативы вы можете перейти в Cloud Run в консоли, выбрать только что развернутую службу и удалить ее.