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

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

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

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

Предпосылки

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

Чему вы научитесь

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

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

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

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

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

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

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

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

5364a56a230ff075.png

Службы Firebase

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

Услуга

Причина использования

Аутентификация Firebase

Для веб-приложения вы используете функцию входа через Google.

Cloud Firestore

Текстовые данные хранятся в Cloud Firestore, а затем обрабатываются расширениями Firebase.

Облачное хранилище для Firebase

Вы можете читать и писать из облачного хранилища для отображения галерей изображений в веб-приложении.

Правила безопасности Firebase

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

Расширения Firebase

Вы настраиваете и устанавливаете расширения Firebase, связанные с ИИ, и отображаете результаты в веб-приложении.

Бонус: хостинг Firebase

При желании вы можете использовать Firebase Hosting для обслуживания своего веб-приложения (без репозитория GitHub).

Бонус: хостинг приложений Firebase

При желании вы можете использовать новый оптимизированный хостинг приложений Firebase для обслуживания вашего динамического веб-приложения Next.js (подключенного к репозиторию GitHub).

Расширения Firebase

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

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

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

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

  1. В терминале убедитесь, что у вас установлен Node.js версии 20.0.0 или выше: 
    node -v
  2. Если у вас нет Node.js версии 20.0.0 или выше, загрузите последнюю версию LTS и установите ее .

Получить исходный код для лабораторной работы

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

  1. Создайте новый репозиторий, используя наш шаблон с github.com/FirebaseExtended/codelab-gemini-api-extensions 65ef006167d600ab.png
  2. Клонируйте только что созданный вами репозиторий 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 (так называемая «Gemini в Firebase»).
  6. Для этой лабораторной работы вам не понадобится Google Analytics, поэтому отключите опцию Google Analytics.
  7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

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

Чтобы использовать Firebase Extensions (и их базовые облачные сервисы), а также Cloud Storage для Firebase, ваш проект Firebase должен быть включен в тарифный план с оплатой по мере использования (Blaze) , что означает, что он должен быть связан с учетной записью 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 и нажмите af10a034ec77938d.png Веб . Кнопка «Web» в верхней части проекта Firebase
  2. В текстовом поле «Псевдоним приложения» введите запоминающееся имя приложения, например, My AI Extensions
  3. Нажмите «Зарегистрировать приложение» > «Далее» > «Далее» > «Перейти к консоли» .
    Вы можете пропустить все шаги, связанные с «хостингом» в потоке веб-приложения, поскольку вы дополнительно настроите службу хостинга позже в этой лабораторной работе.

Созданное веб-приложение в проекте Firebase

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

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

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

37e54f32f8133be3.png

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

Попробуйте расширение «Создать чат-бот с API Gemini»

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

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

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

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

Ответ языковой модели в документе Firestore

Снова активируйте расширение, добавив еще один документ в коллекцию messages :

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

    При формировании этого ответа базовая модель Gemini использовала исторические знания из вашего предыдущего запроса.

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

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

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

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

firebase use YOUR_PROJECT_ID

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

В кодовой базе этой лабораторной работы уже есть набор правил безопасности Firestore и правил безопасности облачного хранилища, написанных специально для вас. После внедрения этих правил безопасности ваши сервисы 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. Подождите несколько секунд, пока чат-бот ответит.

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

1929b9f465053ae7.png

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

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

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

6fbe972296fcb4d8.png

Чат-бот отвечает, основываясь на информации, предоставленной в 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»

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

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

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

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

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

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

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

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

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

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

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

  • Вариант 1: хостинг Firebase . Используйте этот вариант, если вы решили не создавать собственный репозиторий GitHub (а хранить исходный код локально на своем компьютере).
  • Вариант 2: Хостинг приложений Firebase . Используйте этот вариант, если хотите, чтобы приложения автоматически разворачивались при каждой отправке изменений в ваш репозиторий 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 перейдите в раздел App Hosting в вашем проекте 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 для прослушивания и взаимодействия с сервисами Firestore и Google Cloud и API.

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

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

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

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

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

Веб-приложение также использовало расширение «Мультимодальные задачи с API Gemini» для автоматической генерации описаний загруженных изображений.

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