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

1. Обзор

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

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

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

• Развертывание решения для быстрого запуска обработки изображений AI/ML
• Используйте Gemini для изучения приложения API
• Используйте Gemini для создания клиента для приложения API.

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

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

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

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

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

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

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

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

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

1. Проблема: вы видите сообщение об ошибке Partial deployment. ?
   • Решение. К сожалению, это означает, что вам, скорее всего, придется удалить развертывание и начать все заново. Должна быть кнопка с надписью DELETE DEPLOYMENT . Нажмите эту кнопку, а затем повторно разверните решение Jump Start.

3. Включите Близнецов

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

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

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

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

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

Сброс чата Близнецов

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

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 -X POST \
         -H "Authorization: Bearer $(gcloud auth print-access-token)" \
     ...
     

   • Скопируйте эту команду завитка для использования на следующем шаге.
2. Проверьте команду в новом терминале
   • Нажмите на гамбургер-меню
   • Нажмите Терминал
   • Нажмите «Новый терминал».
   • Вставьте команду 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"

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

Если команда 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 , чтобы получить правильную конечную точку облачных функций, и используйте ее для команда скручивания.
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. Проблема. В зависимости от используемого приглашения иногда сгенерированная конечная точка будет выглядеть как 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. Проблема: Быстрый ответ по-прежнему не совсем верен.
   • Решение: попробуйте другую подсказку, в которой вы даете Близнецам еще больше указаний относительно того, что вы хотите от него. Обязательно замените 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, чтобы увидеть код в действии.

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 выполните команду firebase login --no-localhost
   • Посетите предоставленный URL-адрес
     • Нажмите «Да, я только что выполнил эту команду».
     • Нажмите «Да, это мой идентификатор сеанса».
     • Нажмите «Копировать».
   • Вернитесь в терминал редактора Cloud Shell.
   • Вставьте скопированное значение в терминал, где написано: Enter authorization code:
   • нажмите Enter
6. Разверните новый веб-сайт на хостинге Firebase
   • Инициализировать новый проект 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. Повторно разверните приложение, вызвав конечную точку Cloud Functions API.
   • Предыдущие команды должны создать public каталог с файлом index.html внутри каталога frontend , который вы создали ранее. В файле ~/annotate-http-1/frontend/public/index.html вам следует внести следующие несколько изменений.
   • Откройте файл index.html .
     • Нажмите значок Проводника
     • Щелкните папку frontend
     • Щелкните public папку
     • Щелкните файл index.html
   • Очистите существующий файл index.html .
   • Вставьте код, скопированный ранее, в файл index.html
   • Запустите firebase deploy , чтобы развернуть новое приложение.
   • Посетите URL-адрес хостинга 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-адрес, используемый в методе fetch , не содержит полного URL-адреса?
   • Решение. Обязательно включите полный URL-адрес в метод fetch . Это должно выглядеть примерно так https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
3. Проблема: Быстрый ответ по-прежнему не совсем верен.
   • Решение: попробуйте другую подсказку, в которой вы даете Близнецам еще больше указаний относительно того, что вы хотите от него. Обязательно замените 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.
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 чтобы удалить все ресурсы, созданные вами сегодня.