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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сервисы Firebase

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

Расширения Firebase

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

• Создайте чат-бота с помощью Gemini API
• Мультимодальные задачи с 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. Клонируйте только что созданный репозиторий GitHub кодовой лаборатории:

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

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

Загрузите репозиторий GitHub в виде zip-файла .

Просмотрите структуру папок

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

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

Установите интерфейс командной строки Firebase

1. Убедитесь, что у вас установлен интерфейс командной строки Firebase и его версия 13.6 или выше:

   firebase --version
   

2. Если у вас установлен интерфейс командной строки Firebase, но он не версии 13.6 или выше, обновите его:

   npm update -g firebase-tools
   

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

   npm install -g firebase-tools
   

Если вам не удается обновить или установить интерфейс командной строки Firebase из-за ошибок разрешений, обратитесь к документации 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 ).
   Запомните автоматически назначенный идентификатор проекта для вашего проекта Firebase (или щелкните значок «Изменить», чтобы установить предпочтительный идентификатор проекта). Этот идентификатор понадобится вам позже, чтобы идентифицировать ваш проект Firebase в интерфейсе командной строки Firebase. Если вы забудете свой идентификатор, вы всегда сможете найти его позже в настройках проекта .
3. Нажмите Продолжить .
4. При появлении запроса прочтите и примите условия Firebase , а затем нажмите «Продолжить» .
5. Для этой лаборатории вам не нужен Google Analytics, поэтому отключите опцию Google Analytics.
6. Нажмите «Создать проект» , дождитесь подготовки проекта и нажмите «Продолжить» .

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

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

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

Также обратите внимание, что если в вашем проекте Firebase включена оплата, с вас будет взиматься плата за вызовы, которые расширение выполняет к Gemini API (независимо от того, какого поставщика вы выберете: 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. Настройте расширение «Создать чат-бот с помощью Gemini API».

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

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

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

Хотя целью этой лаборатории кода является взаимодействие с расширением «Создать чат-бот с помощью Gemini API» через веб-приложение, полезно узнать, как работает расширение, сначала опробовав его в консоли 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 для работы с вашим проектом 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 const.
2. Добавьте конфигурацию Firebase в кодовую базу вашего веб-приложения:
   1. В редакторе кода откройте файл src/app/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. Прокрутите вниз и замените код в строке 77 или рядом с ней, в которой говорится 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.

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

Бонус: запустите веб-приложение с помощью пакета локального эмулятора Firebase.

Пакет локального эмулятора Firebase позволяет вам локально тестировать большинство функций веб-приложения.

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

   firebase init emulators
   firebase emulators:start
   

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

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

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

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

1. Перейдите к разделу «Мультимодальные задачи с расширением Gemini API» .
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. В меню местоположения облачных функций выберите предпочитаемое местоположение (например, Iowa (us-central1) или местоположение, которое вы ранее указали для своей базы данных Firestore).
   6. Все остальные значения оставьте по умолчанию.
5. Нажмите «Установить расширение» и дождитесь установки расширения.

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

Хотя целью этой лаборатории кода является взаимодействие с расширением «Мультимодальные задачи с 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 . В поле «Значение» введите URL -адрес места хранения только что загруженного изображения.
5. Нажмите «Добавить поле» .
6. В текстовом поле Поле введите: published . В поле Тип выберите логическое значение . В поле Значение выберите true .
7. Нажмите «Сохранить» и подождите несколько секунд.

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

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

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

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

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

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

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

Вариант 1. Развертывание с помощью хостинга Firebase.

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

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

   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 соберут и повторно развернут ваше приложение.

Вариант 2. Развертывание с помощью хостинга приложений Firebase.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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