Создавайте веб-приложения на базе искусственного интеллекта с помощью расширений 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) и может отвечать на вопросы по общим темам, адаптированным к расписанию и темам конференции. Чат-бот обладает историческим контекстом и знаниями о текущей дате/времени, а также темах и расписании Дружеской конференции, поэтому его ответы могут учитывать весь этот контекст.

5364a56a230ff075.png

Сервисы Firebase

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

Услуга

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

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

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

Облачный пожарный магазин

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

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

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

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

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

Расширения Firebase

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

Бонус: пакет локального эмулятора Firebase

При желании вы можете использовать Local Emulator Suite для локального запуска приложения вместо подключения ко многим действующим сервисам Firebase в облаке.

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

При желании вы можете использовать хостинг Firebase для обслуживания своего веб-приложения (без репозитория 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 и установите ее .

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

Если у вас есть учетная запись 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

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

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

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

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

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

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

Чтобы использовать расширения Firebase и их базовые облачные сервисы, вам необходимо обновить проект Firebase, чтобы включить выставление счетов.

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

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

  1. Перейдите к тарифным планам Firebase в своем проекте Firebase.
  2. В диалоговом окне тарифных планов Firebase выберите план Blaze и приобретите его.

Включить аутентификацию Firebase

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

37e54f32f8133be3.png

Включить Cloud Firestore

  1. Перейдите в Firestore, используя левую панель навигации.
  2. Нажмите Создать базу данных > Запустить в тестовом режиме > Далее . Позже в этой лабораторной работе вы развернете более надежные правила безопасности Firebase.
  3. Выберите предпочитаемое местоположение Cloud Firestore (или просто оставьте его по умолчанию).
  4. Нажмите Включить .

Включить облачное хранилище для Firebase

  1. Перейдите к «Хранилищу» , используя левую панель навигации.
  2. Нажмите «Начало работы» > «Начать в тестовом режиме» > «Далее» . Позже в этой лабораторной работе вы развернете более надежные правила безопасности Firebase.
  3. Поскольку вы сначала настроили Firestore в своем проекте, местоположение корзины Cloud Storage по умолчанию уже установлено.
  4. Нажмите Готово .

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

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

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

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

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

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

Расширение запускается всякий раз, когда документ Firestore создается в коллекции users/{uid}/discussion/{discussionId}/messages , что вы можете сделать в консоли 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 для работы с вашим проектом 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. Подождите несколько секунд, пока чат-бот ответит.

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

1929b9f465053ae7.png

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

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

  1. В веб-приложении в браузере очистите разговор, нажав красную кнопку «x» (рядом с сообщением в истории чата).
  2. В редакторе кода откройте файл src/app/page.tsx .
  3. Прокрутите вниз и замените код в строке 77 или рядом с ней, в которой говорится 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.

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

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

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

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

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

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

В своем приложении всякий раз, когда вы загружаете изображение в корзину Cloud Storage, вы можете создать URL-адрес и добавить этот URL-адрес в новый документ Cloud Firestore, тем самым запуская расширение для создания мультимодального приглашения и вызова Gemini API. В исходном коде этой лаборатории кода мы уже предоставили код для загрузки изображения и записи 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. Нажмите 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 . В поле «Значение» введите URL- адрес места хранения только что загруженного изображения. 3af50c4266c2a735.png
  5. Нажмите «Добавить поле» .
  6. В текстовом поле Поле введите: published . В поле Тип выберите логическое значение . В поле Значение выберите true . 9cacd855ff370a9f.png
  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» для автоматического создания описаний изображений для загруженных изображений.

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