Создавайте веб-приложения на базе искусственного интеллекта с помощью расширений Firebase для API Gemini.

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

Расширения Firebase позволяют добавлять в ваши приложения готовые функции с минимальным количеством кода — включая функции, основанные на искусственном интеллекте. В этом практическом занятии показано, как интегрировать два расширения Firebase в веб-приложение, чтобы использовать API Gemini для генерации описаний изображений, кратких обзоров и даже персонализированных рекомендаций на основе предоставленного контекста и ввода конечного пользователя.

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

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

• Знание Node.js, Next.js и TypeScript.

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

• Как использовать расширения Firebase для API Gemini для обработки языка.
• Как использовать Cloud Functions для Firebase для создания расширенного контекста для вашей языковой модели.
• Как использовать JavaScript для доступа к результатам работы расширений Firebase.

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

• Любой браузер на ваш выбор, например, Google Chrome.
• Среда разработки с редактором кода и терминалом.
• Учетная запись Google для создания и управления вашим проектом Firebase.

2. Проверьте веб-приложение, сервисы Firebase и расширения.

В этом разделе вы рассмотрите веб-приложение, которое создадите в рамках этого практического занятия, а также узнаете о сервисах Firebase и расширениях Firebase, которые будете использовать.

Веб-приложение

В этом практическом занятии вы создадите веб-приложение под названием Friendly Conf .

Организаторы Friendly Conference решили использовать искусственный интеллект для создания приятного и персонализированного пользовательского опыта для участников конференции. Готовое приложение для конференции предоставляет участникам чат-бота с разговорным ИИ, работающего на основе многомодальной генеративной модели ИИ (также известной как большая языковая модель или LLM), который может отвечать на вопросы по общим темам, адаптированным к расписанию и темам конференции. Чат-бот обладает историческим контекстом и знаниями о текущей дате/времени, а также о темах и расписании Friendly Conf, поэтому его ответы учитывают весь этот контекст.

Сервисы Firebase

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

Расширения Firebase

В этом практическом занятии вы будете использовать следующие расширения Firebase:

• Создайте чат-бота с помощью API Gemini.
• Мультимодальные задачи с использованием API Gemini

Расширения полезны, потому что они реагируют на события, происходящие в вашем проекте Firebase. Оба расширения, используемые в этом практическом занятии, реагируют на создание новых документов в предварительно настроенных коллекциях в Cloud Firestore.

3. Настройте среду разработки.

Проверьте версию Node.js.

1. В терминале убедитесь, что у вас установлена ​​версия Node.js 20.0.0 или выше:

   node -v
   

2. Если у вас установлена ​​версия Node.js ниже 20.0.0, скачайте последнюю версию LTS и установите её .

Получите исходный код для Codelab.

Если у вас есть аккаунт на GitHub:

1. Создайте новый репозиторий, используя наш шаблон с github.com/FirebaseExtended/codelab-gemini-api-extensions
2. Скопируйте созданный вами репозиторий codelab на GitHub:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

Если у вас не установлен Git или вы предпочитаете не создавать новый репозиторий:

Скачайте репозиторий GitHub в виде ZIP-файла .

Проверьте структуру папок.

В корневой папке находится файл README.md , который предлагает быстрое начало работы с веб-приложением, используя упрощенные инструкции. Однако, если вы новичок, вам следует выполнить это практическое задание (вместо быстрого начала), поскольку практическое задание содержит наиболее полный набор инструкций.

Если вы не уверены, правильно ли вы применили код в соответствии с инструкциями в этом практическом задании, вы можете найти решение в end ветке Git.

Установите Firebase CLI.

1. Убедитесь, что у вас установлен Firebase CLI версии 13.6 или выше:

   firebase --version
   

2. Если у вас установлен Firebase CLI, но версия не 13.6, обновите его:

   npm update -g firebase-tools
   

3. Если у вас не установлен Firebase CLI, установите его:

   npm install -g firebase-tools
   

Если вам не удаётся обновить или установить Firebase CLI из-за ошибок доступа, обратитесь к документации npm или воспользуйтесь другим вариантом установки .

Войдите в Firebase

1. В терминале перейдите в папку codelab-gemini-api-extensions и войдите в Firebase:

   cd codelab-gemini-api-extensions
   firebase login
   

   Если в терминале отображается сообщение о том, что вы уже вошли в Firebase, вы можете перейти к разделу «Настройка проекта Firebase» этого практического занятия.
2. В терминале, в зависимости от того, хотите ли вы, чтобы Firebase собирал данные, введите Y или N (для этого практического занятия подойдет любой из вариантов).
3. В браузере выберите свой аккаунт Google и нажмите «Разрешить» .

4. Настройте свой проект Firebase.

В этом разделе вы создадите проект Firebase и зарегистрируете в нем веб-приложение Firebase. Также вы включите несколько сервисов Firebase, используемых в примере веб-приложения, позже в этом практическом занятии.

Все шаги в этом разделе выполняются в консоли Firebase.

Создайте проект Firebase.

1. Войдите в консоль Firebase, используя ту же учетную запись Google, которую вы использовали на предыдущем шаге.
2. Нажмите кнопку, чтобы создать новый проект, а затем введите название проекта (например, AI Extensions Codelab ).
   
3. Нажмите «Продолжить» .
4. Если появится запрос, ознакомьтесь с условиями использования Firebase и примите их, после чего нажмите «Продолжить» .
5. (Необязательно) Включите помощь ИИ в консоли Firebase (в Firebase она называется "Gemini").
6. Для этого практического занятия вам не понадобится Google Analytics, поэтому отключите эту опцию.
7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

Обновите свой тарифный план Firebase.

Для использования расширений Firebase (и лежащих в их основе облачных сервисов), а также Cloud Storage for Firebase, ваш проект Firebase должен быть привязан к тарифному плану с оплатой по мере использования (Blaze) , то есть к учетной записи Cloud Billing .

• Для использования учетной записи Cloud Billing требуется способ оплаты, например, кредитная карта.
• Если вы новичок в Firebase и Google Cloud, проверьте, имеете ли вы право на получение кредита в размере 300 долларов США и бесплатной пробной версии учетной записи Cloud Billing .
• Если вы выполняете этот практический семинар в рамках мероприятия, уточните у организатора, есть ли возможность получить облачные кредиты.

Также обратите внимание, что при включенной оплате в вашем проекте Firebase с вас будет взиматься плата за вызовы, которые расширение совершает к API Gemini (независимо от того, какого поставщика вы выберете, Google AI или Vertex AI). Подробнее о ценах на Google AI и Vertex AI можно узнать здесь.

Чтобы перейти на тарифный план Blaze для вашего проекта, выполните следующие шаги:

1. В консоли Firebase выберите вариант обновления вашего тарифного плана .
2. Выберите тарифный план Blaze. Следуйте инструкциям на экране, чтобы связать учетную запись Cloud Billing с вашим проектом.
   Если в рамках этого обновления вам потребовалось создать учетную запись Cloud Billing, возможно, вам нужно будет вернуться к процессу обновления в консоли Firebase, чтобы завершить обновление.

Добавьте веб-приложение в свой проект Firebase.

1. Перейдите на экран «Обзор проекта» в вашем проекте Firebase, а затем нажмите Веб .
2. В текстовом поле «Псевдоним приложения» введите запоминающийся псевдоним приложения, например, My AI Extensions
3. Нажмите «Зарегистрировать приложение» > «Далее» > «Далее» > «Перейти в консоль» .
   В процессе разработки веб-приложения вы можете пропустить все шаги, связанные с «хостингом», поскольку настройку хостинга вы дополнительно выполните позже в этом практическом занятии.

Отлично! Теперь вы зарегистрировали веб-приложение в своем новом проекте Firebase.

Настройка аутентификации Firebase

1. Перейдите в раздел «Аутентификация» с помощью левой панели навигации.
2. Нажмите « Начать» .
3. В столбце «Дополнительные поставщики» нажмите Google > Включить .
4. В текстовом поле «Общедоступное название проекта» введите подходящее название, например, My AI Extensions Codelab .
5. В меню «Электронная почта службы поддержки для проекта» выберите свой адрес электронной почты.
6. Нажмите « Сохранить ».

Настройка Cloud Firestore

1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите базу данных Firestore .
2. Нажмите «Создать базу данных» .
3. Оставьте значение параметра " Идентификатор базы данных" равным (default) .
4. Выберите местоположение для вашей базы данных, затем нажмите «Далее» .
   Для создания настоящего приложения вам следует выбрать местоположение, расположенное недалеко от ваших пользователей.
5. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
   В дальнейшем в этом практическом занятии вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению, не добавив правила безопасности для вашей базы данных.
6. Нажмите «Создать» .

Настройка облачного хранилища для Firebase

1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите «Хранилище» .
2. Нажмите « Начать» .
3. Выберите местоположение для вашего хранилища по умолчанию.
   Для регионов US-WEST1 , US-CENTRAL1 и US-EAST1 доступен тариф "Всегда бесплатно" от Google Cloud Storage. Для регионов во всех остальных регионах действуют тарифные планы и правила использования Google Cloud Storage .
4. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
   В дальнейшем в этом практическом занятии вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению без добавления правил безопасности для вашего хранилища.
5. Нажмите «Создать» .

В следующем разделе этого практического занятия вы установите и настроите два расширения Firebase, которые будете использовать в веб-приложении на протяжении всего занятия.

5. Настройте расширение "Создайте чат-бота с помощью API Gemini".

Установите расширение "Создайте чат-бота с помощью API Gemini".

1. Перейдите к расширению "Создайте чат-бота с помощью API Gemini" .
2. В консоли Firebase нажмите кнопку «Установить» .
3. Выберите свой проект Firebase и нажмите «Далее» .
4. В разделе «Проверка включенных API и созданных ресурсов» нажмите «Включить» рядом с любыми предложенными вам сервисами, а затем нажмите «Далее» .
5. Для всех предложенных вам разрешений выберите «Предоставить» , а затем нажмите «Далее» .
6. Настройте расширение:
   1. В меню «Поставщик API Gemini» выберите, хотите ли вы использовать API Gemini от Google AI или Vertex AI. Разработчикам, использующим Firebase, мы рекомендуем использовать Vertex AI .
   2. В текстовом поле «Путь к коллекции Firestore» введите: users/{uid}/discussion/{discussionId}/messages .
      На последующих этапах этого практического занятия добавление документов в эту коллекцию приведет к тому, что расширение вызовет API Gemini.
   3. В меню выбора местоположения Cloud Functions выберите предпочтительное местоположение (например, Iowa (us-central1) или местоположение, которое вы ранее указали для своей базы данных Firestore).
   4. Оставьте все остальные значения по умолчанию.
7. Нажмите «Установить расширение» и дождитесь завершения установки.

Попробуйте расширение "Создайте чат-бота с помощью API Gemini".

Хотя цель этого практического занятия — взаимодействие с расширением "Создание чат-бота с помощью API Gemini" через веб-приложение, полезно сначала изучить, как работает расширение, попробовав его в консоли Firebase.

Расширение срабатывает всякий раз, когда создается документ Firestore в коллекции users/{uid}/discussion/{discussionId}/messages , что можно сделать в консоли Firebase.

1. В консоли Firebase перейдите в раздел Firestore , а затем нажмите Начните сбор данных в первом столбце.
2. В текстовом поле «Идентификатор коллекции» введите users , а затем нажмите «Далее» .
3. В текстовом поле «Идентификатор документа» выберите «Автоматическая идентификация» , а затем нажмите «Сохранить» .
4. В коллекции users нажмите Начать сбор .
5. В текстовом поле «Идентификатор коллекции» введите messages , а затем нажмите «Далее» .
   1. В текстовом поле «Идентификатор документа» нажмите «Автоматическая идентификация» .
   2. В текстовом поле «Поле» введите prompt
   3. В текстовом поле «Значение» введите: Tell me 5 random fruits
6. Нажмите «Сохранить» и подождите несколько секунд.

Добавление этого документа активировало вызов API Gemini расширением. Теперь документ, который вы только что добавили в коллекцию messages , включает не только ваш prompt , но и response модели на ваш запрос.

Чтобы повторно активировать расширение, добавьте еще один документ в коллекцию messages :

1. В коллекции messages нажмите Добавить документ .
2. В текстовом поле «Идентификатор документа» нажмите «Автоматическая идентификация» .
3. В текстовом поле «Поле» введите prompt
4. В текстовое поле «Значение» введите: And now, vegetables
5. Нажмите «Сохранить» и подождите несколько секунд. Документ, который вы только что добавили в коллекцию messages , теперь содержит response на ваш запрос.
   
   При формировании этого ответа базовая модель Gemini использовала исторические данные из вашего предыдущего запроса.

6. Настройка веб-приложения

Для запуска веб-приложения вам потребуется выполнять команды в терминале и добавлять код в редакторе кода.

Настройте Firebase CLI для работы с вашим проектом Firebase.

В терминале укажите CLI использовать ваш проект Firebase, выполнив следующую команду:

firebase use YOUR_PROJECT_ID

Внедрите правила безопасности для Firestore и облачного хранилища.

В коде этого практического занятия уже есть набор правил безопасности Firestore и Cloud Storage. После развертывания этих правил безопасности ваши сервисы Firebase в вашем проекте Firebase будут лучше защищены от неправомерного использования.

1. Для развертывания правил безопасности выполните следующую команду в терминале:

   firebase deploy --only firestore:rules,storage
   

2. Если вас спросят, следует ли предоставить Cloud Storage роль IAM для использования правил межсервисного взаимодействия, введите Y или N (для данного практического задания подойдет любой из вариантов).

Подключите ваше веб-приложение к вашему проекту Firebase.

Коду вашего веб-приложения необходимо знать, какой проект Firebase следует использовать для базы данных, хранилища и т. д. Для этого добавьте конфигурацию Firebase в код приложения.

1. Получите конфигурацию Firebase:
   1. В консоли Firebase перейдите в раздел «Настройки проекта» в вашем проекте Firebase.
   2. Прокрутите страницу вниз до раздела «Ваши приложения» и выберите зарегистрированное веб-приложение.
   3. В панели настройки и конфигурации SDK скопируйте весь код initializeApp , включая константу firebaseConfig .
2. Добавьте конфигурацию Firebase в код вашего веб-приложения:
   1. В редакторе кода откройте файл src/lib/firebase/firebase.config.js .
   2. Выделите весь файл и замените его скопированным кодом.
   3. Сохраните файл.

Предварительный просмотр веб-приложения в вашем браузере

1. В терминале установите зависимости, а затем запустите веб-приложение:

   npm install
   npm run dev
   

2. В браузере перейдите по локальному URL-адресу хостинга, чтобы просмотреть веб-приложение. Например, в большинстве случаев URL-адрес выглядит так : http://localhost:3000/ или что-то подобное.

Воспользуйтесь чат-ботом веб-приложения.

1. В браузере вернитесь на вкладку с локально запущенным веб-приложением Friendly Conf .
2. Нажмите «Войти через Google» и, при необходимости, выберите свою учетную запись Google.
3. После входа в систему вы увидите пустое окно чата.
4. Введите приветствие (например hi ), а затем нажмите «Отправить» .
5. Подождите несколько секунд, пока чат-бот ответит.

Чат-бот в приложении отвечает стандартным сообщением.

Специализируйте чат-бота для приложения.

Для того чтобы модель генерировала ответы для участников, использующих приложение, вам необходима базовая модель Gemini, используемая чат-ботом вашего веб-приложения. Существует множество способов контролировать и направлять эти ответы, и в этом подразделе практического занятия мы покажем вам очень простой способ, предоставляя «контекст» в первоначальном запросе (а не только ввод от пользователя веб-приложения).

1. В веб-приложении в вашем браузере завершите переписку, нажав на красную кнопку «x» (рядом с сообщением в истории чата).
2. Откройте файл src/app/page.tsx в редакторе кода.
3. Прокрутите вниз и замените код в строке 93 или около нее, содержащий prompt: userMsg , следующим:
   prompt: preparePrompt(userMsg, messages),
4. Сохраните файл.
5. Вернитесь к веб-приложению, запущенному в вашем браузере.
6. Снова введите приветствие (например, hi "), а затем нажмите "Отправить" .
7. Подождите несколько секунд, пока чат-бот ответит.

Чат-бот отвечает, опираясь на контекст, предоставленный в src/app/lib/context.md . Даже если вы не вводили конкретный запрос, базовая модель Gemini генерирует персонализированные рекомендации на основе этого контекста, а также текущей даты и времени. Теперь вы можете задать дополнительные вопросы и углубиться в тему.

Этот расширенный контекст важен для чат-бота, но его не следует показывать пользователю веб-приложения. Вот как его скрыть:

1. Откройте файл src/app/page.tsx в редакторе кода.
2. Прокрутите вниз и замените код в строке 56 или около нее, содержащий ...doc.data(), следующим:
   ...prepareMessage(doc.data()),
3. Сохраните файл.
4. Вернитесь к веб-приложению, запущенному в вашем браузере.
5. Перезагрузите страницу.

Вы также можете попробовать возможность общения с чат-ботом, используя исторический контекст:

1. В текстовом поле «Введите сообщение» задайте вопрос, например: Any other interesting talks about AI? Чат-бот вернет ответ.
2. В текстовом поле «Введите сообщение» задайте уточняющий вопрос, связанный с предыдущим: Give me a few more details about the last one.

Чат-бот отвечает, используя исторические данные. Поскольку история чата теперь является частью контекста, чат-бот понимает последующие вопросы.

7. Настройте расширение "Мультимодальные задачи с использованием API Gemini".

Расширение "Мультимодальные задачи с использованием API Gemini" вызывает API Gemini с многомодальными подсказками, содержащими текстовую подсказку, а также поддерживаемый URL-адрес файла или URL-адрес облачного хранилища (обратите внимание, что даже API Google AI Gemini использует URL-адрес облачного хранилища в качестве базовой инфраструктуры URL-адресов файлов). Расширение также поддерживает переменные Handlebars для подстановки значений из документа Cloud Firestore для настройки текстовой подсказки.

В вашем приложении при каждой загрузке изображения в хранилище Cloud Storage вы можете сгенерировать URL-адрес и добавить его в новый документ Cloud Firestore — таким образом, расширение создаст многомодальное окно запроса и вызовет API Gemini. В исходном коде этого практического занятия мы уже предоставили код для загрузки изображения и записи URL-адреса в документ Firestore.

Установите расширение "Мультимодальные задачи с использованием API Gemini".

1. Перейдите к расширению "Мультимодальные задачи с использованием API Gemini" .
2. В консоли Firebase нажмите кнопку «Установить» .
3. Выберите свой проект Firebase.
4. Нажимайте «Далее» > «Далее» > «Далее» , пока не дойдете до раздела «Настройка расширения» .
   1. В меню «Поставщик API Gemini» выберите, хотите ли вы использовать API Gemini от Google AI или Vertex AI. Разработчикам, использующим Firebase, мы рекомендуем использовать Vertex AI .
   2. В текстовом поле «Путь к коллекции Firestore» введите: gallery
   3. В текстовом поле «Подсказка» введите: Please describe the provided image; if there is no image, say "no image"
   4. В текстовое поле «Изображение» введите: image
   5. В меню выбора местоположения Cloud Functions выберите предпочтительное местоположение (например, Iowa (us-central1) или местоположение, которое вы ранее указали для своей базы данных Firestore).
   6. Оставьте все остальные значения по умолчанию.
5. Нажмите «Установить расширение» и дождитесь завершения установки.

Попробуйте расширение "Мультимодальные задачи с использованием API Gemini".

Хотя цель этого практического занятия — взаимодействие с расширением "Multimodal Tasks with the Gemini API" через веб-приложение, полезно сначала изучить, как работает это расширение, попробовав его в консоли Firebase.

Расширение запускается всякий раз, когда создается документ Firestore в коллекции users/{uid}/gallery , что можно сделать в консоли Firebase. Затем расширение принимает URL-адрес изображения из Cloud Storage в документе Cloud Firestore и передает его в качестве части многомодального запроса при вызове API Gemini.

Сначала загрузите изображение в хранилище Cloud Storage:

1. Перейдите в раздел «Хранилище» в вашем проекте Firebase.
2. Нажмите Создать папку .
3. В текстовом поле «Название папки» введите gallery
4. Нажмите «Добавить папку» .
5. В папке gallery нажмите «Загрузить файл» .
6. Выберите файл изображения в формате JPEG для загрузки.

Далее добавьте URL-адрес изображения в облачное хранилище в документ Firestore (это будет триггером для расширения):

1. Перейдите в раздел Firestore в вашем проекте Firebase.
2. Нажмите Начните сбор данных в первом столбце.
3. В текстовом поле «Идентификатор коллекции» введите: gallery , а затем нажмите «Далее» .
4. Добавить документ в коллекцию:
   1. В текстовом поле «Идентификатор документа» нажмите «Автоматическая идентификация» .
   2. В текстовом поле «Поле» введите: image . В поле «Значение» введите URI места хранения загруженного изображения.
5. Нажмите «Добавить поле» .
6. В текстовом поле «Поле» введите: published . В поле «Тип» выберите boolean . В поле «Значение» выберите true .
7. Нажмите «Сохранить» и подождите несколько секунд.

В коллекцию gallery теперь входит документ, содержащий ответ на ваш запрос.

Воспользуйтесь галереей изображений веб-приложения.

1. В браузере вернитесь на вкладку с локально запущенным веб-приложением Friendly Conf .
2. Перейдите на вкладку «Галерея» .
3. Вы увидите галерею загруженных изображений и сгенерированных ИИ описаний. В ней должно быть изображение, которое вы загрузили ранее в папку gallery в вашем хранилище.
4. Нажмите кнопку « Загрузить » и выберите другое изображение в формате JPEG.
5. Подождите несколько секунд, пока изображение отобразится в галерее. Через несколько мгновений также отобразится сгенерированное искусственным интеллектом описание для только что загруженного изображения.

Если вы хотите понять, как это было реализовано, посмотрите файл src/app/gallery/page.tsx в кодовой базе веб-приложения.

8. Бонус: Разверните ваше приложение

Firebase предлагает несколько способов развертывания веб-приложения. Для этого практического занятия выберите один из следующих вариантов:

• Вариант 1: Firebase Hosting — используйте этот вариант, если вы решили не создавать собственный репозиторий GitHub (и хранить исходный код только локально на своем компьютере).
• Вариант 2: Firebase App Hosting — используйте этот вариант, если вам нужно автоматическое развертывание при каждом изменении, внесенном в ваш собственный репозиторий GitHub. Этот новый сервис Firebase создан специально для удовлетворения потребностей динамических приложений Next.js и Angular.

Вариант 1: Развертывание с использованием Firebase Hosting

Используйте этот вариант, если вы решили не создавать собственный репозиторий GitHub (и хранить исходный код только локально на своем компьютере).

1. В терминале инициализируйте Firebase Hosting, выполнив следующие команды:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. В ответ на запрос: Detected an existing Next.js codebase in your current directory, should we use this? , нажмите Y
3. В ответ на вопрос: In which region would you like to host server-side content, if applicable? выберите либо местоположение по умолчанию, либо местоположение, которое вы использовали ранее в этом практическом задании. Затем нажмите Enter (или return в macOS).
4. Для ответа на вопрос: Set up automatic builds and deploys with GitHub? нажмите N
5. Разверните ваше веб-приложение на хостинге, выполнив следующую команду:

   firebase deploy --only hosting
   

Готово! Если вы обновите приложение и захотите развернуть новую версию, просто повторно запустите firebase deploy --only hosting , и Firebase Hosting выполнит сборку и повторное развертывание вашего приложения.

Вариант 2: Развертывание с использованием Firebase App Hosting

Используйте этот параметр, если хотите, чтобы развертывание происходило автоматически каждый раз, когда вы отправляете изменения в свой собственный репозиторий GitHub.

1. Зафиксируйте изменения в GitHub.
2. В консоли Firebase перейдите в раздел «Размещение приложений» в вашем проекте Firebase.
3. Нажмите «Начать» > «Подключиться к GitHub» .
4. Выберите свою учетную запись GitHub и репозиторий . Нажмите «Далее» .
5. В разделе «Настройки развертывания» > «Корневой каталог» введите имя папки с исходным кодом (если ваш package.json находится не в корневом каталоге репозитория).
6. Для выбора ветки Live выберите основную ветку вашего репозитория GitHub. Нажмите «Далее» .
7. Введите идентификатор для вашей серверной части (например, chatbot ).
8. Нажмите «Готово» и «Развернуть» .

Подготовка нового развертывания займет несколько минут. Вы можете проверить статус развертывания в разделе «Размещение приложений» консоли Firebase.

С этого момента каждый раз, когда вы отправляете изменения в свой репозиторий GitHub, Firebase App Hosting будет автоматически собирать и развертывать ваше приложение.

9. Заключение

Поздравляем! Вы многого добились в этом практическом занятии!

Установка и настройка расширений

Вы использовали консоль Firebase для настройки и установки различных расширений Firebase, использующих генеративный искусственный интеллект . Использование расширений Firebase удобно, поскольку вам не нужно изучать и писать много шаблонного кода для обработки аутентификации в сервисах Google Cloud или логики бэкэнда Cloud Functions для прослушивания и взаимодействия с сервисами и API Firestore и Google Cloud.

Тестирование расширений с помощью консоли Firebase.

Вместо того чтобы сразу переходить к коду, вы потратили время на понимание того, как работают эти расширения genAI, основываясь на входных данных, предоставленных вами через Firestore или Cloud Storage. Это может быть особенно полезно при отладке выходных данных расширения.

Создание веб-приложения на основе искусственного интеллекта

Вы создали веб-приложение с поддержкой искусственного интеллекта, которое использует расширения Firebase для доступа лишь к некоторым возможностям модели Gemini.

В веб-приложении используется расширение "Chatbot with Gemini API", предоставляющее пользователю интерактивный интерфейс чата, включающий контекст, специфичный для приложения, и историю переписки. Каждое сообщение хранится в документе Firestore, привязанном к конкретному пользователю.

Веб-приложение также использовало расширение "Multimodal Tasks with the Gemini API" для автоматического создания описаний к загруженным изображениям.

Следующие шаги

• Поэкспериментируйте с подсказками и воспользуйтесь преимуществами большого контекстного окна в Google AI Studio или Vertex AI Studio .
• Узнайте о поиске с использованием дополненной генерации на основе искусственного интеллекта (RAG) .
• Попробуйте пройти самостоятельный практический урок, демонстрирующий, как добавить чат-бота в существующее приложение Firebase с помощью Genkit (нового сервиса на основе фреймворка для искусственного интеллекта).
• Узнайте о возможностях поиска по сходству в Firestore и Cloud SQL для PostgreSQL .
• Научите своего чат-бота обращаться к существующему приложению с помощью вызова функций .