Как использовать Gemini для изучения и улучшения существующего приложения

1. Обзор

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

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

Данная лабораторная работа призвана продемонстрировать использование Gemini в существующем приложении. В этой работе вы научитесь выполнять следующие действия:

Настройка - Создать новый проект

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

Рекомендация: Используйте учетную запись с полными правами доступа (например, личную учетную запись) вместо корпоративной или школьной учетной записи.

Примечание: Если вы недавно создали проект с полными правами доступа и у вас уже включен API Gemini для этого проекта, вы можете продолжить работу с этим проектом и пропустить этот шаг. Например, если вы недавно завершили другой код-лабораторию Gemini, вы можете пропустить этот шаг.

  1. Перейдите в консоль Google Cloud.
  2. Нажмите на выпадающее меню текущего проекта.
  3. Нажмите «Новый проект». Кнопка «Новый проект»
  4. Добавьте название проекта и нажмите СОЗДАТЬ.
    • Рекомендация: Используйте уникальное название проекта, чтобы Project name и Project ID совпадали. создать форму проекта

2. Внедрите решение для быстрого запуска двигателя.

Готовые решения Jump Start Solutions — это шаблоны решений от Google Cloud. В этом практическом занятии используется решение Jump Start Solution, чтобы продемонстрировать, как Gemini может помочь улучшить уже существующее приложение.

  1. Перейдите на страницу с подробной информацией о решении для быстрого запуска разработки решений в области обработки изображений с использованием ИИ/машинного обучения.
    • Нажмите на значок гамбургера.
    • В подменю «Продукты и решения» нажмите «Быстрые решения». Шаги навигации в разделе «Решения для быстрого запуска»
    • Нажмите «Обработка изображений с помощью ИИ/машинного обучения» в разделе «Облачные функции». Решение для быстрого старта в области обработки изображений с использованием ИИ и машинного обучения. Навигация.
  2. Нажмите «РАЗВЕРНУТЬ».
    • Если в вашем проекте не включена функция выставления счетов, включите её .
    • Подтвердите название проекта и нажмите ПРОДОЛЖИТЬ.
    • Выберите регион us-central1 (Iowa) .
    • Если потребуется ввести другие данные, примите значения по умолчанию.
    • Нажмите «РАЗВЕРНУТЬ» .
    • Это может занять до 15 минут .
    • Вам не нужно вносить никаких изменений, но вы можете ознакомиться с вариантами развертывания решения Jump Start Solution.

Поиск неисправностей

  1. Проблема: Вы видите ошибку с сообщением Partial deployment. ?
    • Решение: К сожалению, это означает, что вам, скорее всего, придется удалить развертывание и начать заново. Должна быть кнопка «УДАЛИТЬ РАЗВЕРТЫВАНИЕ» . Нажмите на эту кнопку, а затем повторно разверните решение Jump Start.

3. Включите Gemini

Настройте среду редактирования кода и включите Gemini.

  1. Перейдите в редактор Cloud Shell.
    • Вернуться в консоль Google Cloud
    • Введите в строку поиска Cloud Shell Editor и выберите «Cloud Shell Editor» из выпадающего списка. Шаги для открытия редактора Cloud Shell
    • Если вы используете старый редактор, нажмите «Попробовать новый редактор» .
      • Примечание: Если вы не видите кнопку «Попробовать новый редактор» , скорее всего, вы уже используете новый редактор. Старый редактор будет работать, но внешний вид будет немного отличаться.
    • Нажмите на значок «Открыть в новом окне». значок открыть в новом окнеИнструкции для открытия в новом окне
  2. При появлении запроса войдите в свою учетную запись или авторизуйте ее.
    • В зависимости от ваших настроек, в ходе выполнения этого лабораторного задания вам может быть предложено несколько раз авторизовать свою учетную запись. При каждом запросе выбирайте «Авторизовать».
  3. Нажмите на кнопку «Cloud Code - Sign in» в нижней строке состояния, как показано на рисунке. Авторизуйте плагин в соответствии с инструкциями. Кнопка входа для доступа к облачному коду
  4. Если появится запрос, нажмите « Выбрать проект Google Cloud», а затем выберите используемый вами проект. Нажмите «Выбрать проект Google Cloud».
  5. Включить Gemini
    • Нажмите «Облачный код» логотип облачного кода
      • Примечание: В зависимости от размера вашего экрана, может потребоваться один или два шага. открытый облачный код
    • В разделе «Помощь и обратная связь» нажмите «Изменить настройки» .
    • Тип Gemini: Enable
    • Установите флажок (если он еще не установлен). Включить настройку "Дуэт" в редакторе Cloud Shell
    • Перезагрузите IDE.
    • Это активирует Gemini в Cloud Code, и строка состояния Gemini появится в вашей IDE. Строка состояния Gemini доступна.
  6. Нажмите на кнопку Gemini в правом нижнем углу, как показано на рисунке, и выберите нужный проект Google Cloud. Выберите проект Gemini
    • Если вы видите ошибку, указывающую на то, что Gemini has not been enabled for your selected project , нажмите «Включить API Gemini» . Выберите проект Gemini
  7. Убедитесь, что слева отображается правильный проект Google Cloud (вы увидите название своего проекта), а справа в строке состояния включена функция Gemini, как показано ниже: Отображение корректного вида Близнецов при включении этой функции.

4. Загрузите код облачной функции.

Загрузите код и воспользуйтесь Gemini, чтобы узнать больше о Jump Start Solutions и развернутом вами коде.

  1. Если вы покинули сайт, нажмите Cloud Code. логотип облачного кода
  2. Нажмите «Облачные функции».
    • Если вы видите кнопку «Выберите проект» , нажмите на нее и выберите проект, с которым вы работаете.
    • Воспользуйтесь функцией annotate-http
    • Нажмите на значок «Загрузить в новое рабочее пространство». значок загрузкизначок загрузки в панели облачного кода
  3. В качестве имени рабочей области используйте annotate-http-1 (это должно быть имя по умолчанию) и нажмите OK.
  4. Откройте файл main.py
    • Нажмите на значок Проводника Значок навигации проводника
    • Чтобы открыть файл main.py , щелкните по нему. Откройте Проводник, щелкнув по логотипу Gemini.
  5. Нажмите на значок чата Gemini. Логотип Gemini
    • Примечание: В зависимости от размера вашего экрана, может потребоваться один или два шага. открытый Близнецы
  6. Попробуйте задать Близнецам вопрос. Введите запрос, например:
    • What is a Jump Start Solution in Google Cloud?
    • Explain this code.

Сброс настроек чата Gemini

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

Сбросить выделение корзины в чате дуэта

5. Вызов существующей конечной точки облачной функции.

Изучите код и вызовите конечную точку, которую вы развернули в решении Jump Start.

  1. Введите подсказку:
    • ВАЖНО! Замените my-project-with-duet в следующем запросе на идентификатор вашего проекта.
    • The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
    • В ответ вы должны получить команду curl примерно такого вида: 
      curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
    • Скопируйте эту команду curl для использования на следующем шаге.
  2. Проверьте выполнение команды в новом терминале.
    • Нажмите на значок гамбургера.
    • Нажмите «Терминал»
    • Нажмите «Новый терминал» Пошаговая инструкция по открытию нового терминала Cloud Shell Editor
    • Вставьте команду curl из предыдущего шага в терминал и нажмите Enter для выполнения команды.
    • Вы должны получить ответ, начинающийся примерно так: 
      {
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
  3. (Необязательно) Сделайте это с другим изображением из общедоступного интернета, предложив Duet что-то вроде:
    • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

Поиск неисправностей

Примечание о недетерминированности: Gemini и другие продукты, использующие большие языковые модели (LLM), являются недетерминированными: это означает, что при одинаковых входных данных вы можете получить разные выходные данные. Даже если вы идеально выполните все шаги, команды могут работать некорректно. Эти шаги по устранению неполадок должны помочь решить подобные проблемы.

Сгенерированная команда curl должна выглядеть примерно так:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

В файле main.py Gemini использует объект TEST_IMAGE , представляющий собой изображение Эйфелевой башни .

Если команда curl у вас не работает, проверьте следующее:

  1. Проблема: Содержит ли URL-адрес конечную точку .a.run.app ?
    • Решение: Duet может считать, что вы развертываете приложение в Cloud Run. Замените my-project-with-duet на идентификатор вашего проекта в https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate , чтобы получить правильную конечную точку Cloud Functions и использовать ее для команды curl.
  2. Проблема: Включает ли URL-адрес конечную точку my-project-with-duet ?
    • Решение: Замените my-project-with-duet на идентификатор вашего проекта.
  3. Проблема: Отсутствует ли в URL-адресе конечная точка us-central1 ?
    • Решение: Убедитесь, что URL-адрес начинается с us-central1 например: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate с идентификатором вашего проекта.
  4. Проблема: В зависимости от используемой командной строки, сгенерированный URL-адрес иногда может выглядеть как cloudfunctions.net/annotate-http или cloudfunctions.net/annotate . Возможно, в конце URL-адреса отсутствует /annotate-http/annotate ?
    • Решение: Убедитесь, что URL-адрес конечной точки заканчивается полным путем к API-приложению: cloudfunctions.net/annotate-http/annotate
  5. Проблема: запрос cURL выполняется, но получает мало информации в ответ. Содержит ли запрос какие-либо функции?
    • Решение: Это не является серьезной проблемой. Если вы продолжите работу, ничего не меняя, остальная часть лабораторной работы будет по-прежнему работать. Если вы хотите получить более подробную информацию, вы можете попросить Duet добавить функции в запрос cURL.
  6. Проблема: Ответы кажутся неверными или, похоже, не содержат контекста, специфичного для кода. Используете ли вы чат Gemini в редакторе Cloud Shell?
    • Решение: Попробуйте открыть файл main.py и выделить код, относящийся к вашей командной строке, используя чат Gemini в редакторе Cloud Shell. Ассистент Gemini в Google Cloud имеет разный контекст, что может привести к разным ответам.
  7. Проблема: Ответ по-прежнему не совсем корректен.
    • Решение: Попробуйте другой вариант запроса, в котором вы дадите Gemini еще больше указаний относительно того, что вы хотите получить в результате. Обязательно замените my-project-with-duet на идентификатор вашего проекта. Вот пример: 
      Give me the curl command for:

1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
  8. Проблема: После всех этих шагов по устранению неполадок устройство по-прежнему не работает.
    • Решение: Из-за недетерминированной природы LLM-моделей возможно, что Duet сгенерировал ответ, который не будет работать. В этом случае скопируйте приведенную выше команду curl и попробуйте запустить ее в терминале. Обязательно замените my-project-with-duet на идентификатор вашего проекта.

6. Создайте веб-приложение-клиент для API.

Используйте Gemini для генерации файла index.html , который вызывает конечную точку облачной функции Jump Start Solution. Затем разверните файл index.html на Firebase Hosting , чтобы увидеть код в действии.

  1. Сгенерируйте клиентский код.
    • Вернувшись в чат Gemini, введите следующую команду:
      • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
    • Скопируйте файл index.html , сгенерированный в ответе.
      • Примечание: Этот код понадобится вам позже, поэтому сохраните его где-нибудь, если боитесь потерять.
    • Закройте main.py
  2. Создайте новую директорию frontend .
    • Вы можете задать Близнецам примерно такой вопрос:
      • What are the console commands to create and navigate to a new frontend directory?
    • Вы должны увидеть результаты, похожие на команды mkdir frontend и cd frontend .
    • Воспользуйтесь терминалом Cloud Shell, чтобы убедиться, что вы по-прежнему находитесь в каталоге annotate-http-1 , и выполните следующие команды:
      • cd ~/annotate-http-1
      • mkdir frontend
      • cd frontend
  3. Убедитесь, что вы вошли в правильный проект в терминале Cloud Shell.
    • Вы можете задать Близнецам примерно такой вопрос:
      • What is the gcloud command to set my project?
    • Вы должны увидеть результат, похожий на gcloud config set project my-project-with-duet
      • Убедитесь, что идентификатор проекта указан правильно, затем выполните команду в терминале Cloud Shell.
  4. Включить Firebase
    • В новой вкладке (оставьте открытым текущий редактор Cloud Shell) перейдите по адресу https://console.firebase.google.com/
    • Нажмите «Добавить проект».
    • Введите идентификатор вашего проекта и дождитесь его появления в выпадающем списке.
    • Нажмите на идентификатор вашего проекта
    • Нажмите «Продолжить»
    • Нажмите «Подтвердить план».
    • Нажмите «Продолжить»
    • Снимите флажок «Включить Google Analytics для этого проекта».
      • Компания Firebase рекомендует использовать Google Analytics, но в данном приложении он использоваться не будет.
    • Нажмите «Продолжить»
    • Закройте эту вкладку и вернитесь в редактор Cloud Shell.
    • Примечание: Эти шаги необходимы только для пользователей, которые ранее не использовали Firebase, но это позволит всем следовать одному и тому же пути. Если вы будете выполнять эти действия в будущем, вы можете пропустить этот шаг.
  5. Войдите в Firebase через Cloud Shell.
    • В терминале Cloud Shell Editor выполните команду firebase login --no-localhost
    • Перейдите по указанному URL-адресу.
      • Нажмите «Да, я только что выполнил эту команду».
      • Нажмите «Да, это мой идентификатор сессии».
      • Нажмите «Копировать»
    • Вернуться в терминал редактора Cloud Shell
    • Вставьте скопированное значение в терминал в поле: Enter authorization code:
    • Нажмите Enter
  6. Разверните новый веб-сайт на Firebase Hosting.
    • Инициализируйте новый проект Firebase.
      • Вы можете задать Близнецам примерно такой вопрос:
        • What are the commands to initialize and deploy a new firebase application?
      • Вы должны увидеть результаты, похожие на команды firebase init и firebase deploy с инструкциями.
      • Поскольку существует множество возможных способов сделать это, которые Близнецы могут порекомендовать в зависимости от ваших предпочтений, вот конкретная рекомендация, которой вы можете следовать:
        • firebase init
          • Спуститесь вниз к Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
            • Нажмите Space
            • Нажмите Enter
          • С помощью стрелки вниз выберите Use an existing project .
            • Нажмите Enter
          • Если вы видите список проектов, прокрутите вниз до проекта, который вы используете сегодня.
            • Нажмите Enter
          • Если вас попросят Please input the ID of the Google Cloud Project you would like to add Firebase:
            • Введите идентификатор проекта.
            • Нажмите Enter
          • Для просмотра всех оставшихся подсказок нажмите Enter
        • firebase deploy
  7. Переразверните приложение, вызвав конечную точку API Cloud Functions.
    • Выполнение предыдущих команд должно создать директорию public с файлом index.html внутри директории frontend , созданной ранее. Следующие несколько изменений следует внести в файл ~/annotate-http-1/frontend/public/index.html .
    • Откройте файл index.html .
      • Нажмите на значок Проводника Значок навигации проводника
      • Нажмите на папку frontend .
      • Щелкните по public папке
      • Щелкните файл index.html Переход к файлу index.html
    • Удалите содержимое существующего файла index.html .
    • Вставьте скопированный ранее код в файл index.html
    • Запустите firebase deploy , чтобы развернуть новое приложение.
    • Перейдите по ссылке на хостинг Firebase, чтобы проверить, работает ли он!
      • Примечание: Для отображения обновлений вам, вероятно, потребуется обновить страницу сайта.

Поиск неисправностей

Файл index.html должен выглядеть примерно так:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

Если сайт у вас не работает, вот несколько моментов, которые следует проверить:

  1. Проблема: 404 (Не найдено). Содержит ли URL-адрес, используемый в методе fetch my-project-with-duet ?
    • Решение: Замените my-project-with-duet на идентификатор вашего проекта.
  2. Проблема: 404 (Не найдено). Отсутствует ли полный URL-адрес в URL-адресе, используемом в методе fetch ?
    • Решение: Обязательно укажите полный URL-адрес в методе fetch . Он должен выглядеть примерно так: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
  3. Проблема: Ответ по-прежнему не совсем корректен.
    • Решение: Попробуйте другой вариант запроса, в котором вы дадите Gemini еще больше указаний относительно того, что вы хотите получить в результате. Обязательно замените my-project-with-duet на идентификатор вашего проекта. Вот пример:
      • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
  4. Проблема: Ваш сайт развернут, но не работает?
    • Решение: Из-за непредсказуемой природы LLM-моделей возможно, что Duet сгенерировал ответ, который не будет работать. В этом случае скопируйте приведенный выше пример index.html и попробуйте повторно развернуть его с помощью firebase deploy . Обязательно замените my-project-with-duet на идентификатор вашего проекта.

7. (Необязательно) Открытое исследование

  1. Используйте Gemini и встроенного в редактор помощника, чтобы добавить стили CSS в ваше приложение, а затем разверните его снова, когда закончите! Если вам нужна вдохновение, вот пример запроса, который вы можете попробовать:
    • Make this index.html file use material design. Фотография сайта, оформленного в стиле Material Design.
  2. Что ещё можно попробовать:
    • Сгенерированный веб-сайт должен работать с любым общедоступным http изображением. Используйте Duet для отображения изображения на странице.

8. (Необязательно) Удалите проект

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

  1. Введите подсказку:
    • How can I delete my project?
    • В результате вы должны увидеть что-то вроде gcloud projects delete my-project-with-duet .`.
    • ВАЖНО! Замените my-project-with-duet в предыдущей команде на идентификатор вашего проекта.
  2. Выполните команду gcloud projects delete , чтобы удалить все ресурсы, созданные вами сегодня.