Создайте личного помощника по программированию с помощью ИИ вместе с Джеммой

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

Запуск собственного экземпляра Gemma или CodeGemma позволит вам получить помощь в программировании с помощью ИИ с низкой задержкой, высокой доступностью, потенциально более низкой стоимостью и возможностью хранить все ваши данные для кодирования в собственной сети. Этот проект показывает, как настроить собственный веб-сервис для размещения Gemma и подключения его к расширению Microsoft Visual Studio Code, чтобы сделать использование модели более удобным во время кодирования. Этот проект включает в себя два подпроекта: один проект для настройки и интеграции Gemma в веб-сервис, и второй проект для расширения VS Code, которое подключается к веб-сервису и использует его.

Видеообзор этого проекта и способов его расширения, включая советы от разработчиков, можно посмотреть в видеоролике «Созданный с помощью Google AI помощник по разработке кода ». Вы также можете ознакомиться с кодом проекта в репозитории Gemma Cookbook . В противном случае, вы можете начать расширять проект, следуя приведенным ниже инструкциям.

Обзор

В этом руководстве показано, как настроить и расширить два проекта: веб-сервис для Gemma и расширение VS Code для работы с этим сервисом. Веб-сервис использует Python, Keras, JAX и библиотеки FastAPI для обслуживания модели Gemma и обработки запросов. Расширение VS Code, называемое Pipet, добавляет команды в палитру команд, позволяющие отправлять запросы к веб-сервису Gemma, выделяя код, текст или комментарии в окне редактирования кода, как показано на рисунке 1.

Скриншот пользовательского интерфейса расширения VS Code

Рисунок 1. Пользовательский интерфейс командной строки проекта для расширения Pipet в Visual Studio Code.

Полный исходный код обоих проектов представлен в репозитории кода Gemma Cookbook, и вы можете расширять оба проекта, чтобы адаптировать их к своим потребностям и предпочтительному рабочему процессу.

Настройка проекта

Эти инструкции помогут вам подготовить проект к разработке и тестированию. Общие шаги по настройке включают установку необходимого программного обеспечения, клонирование проекта из репозитория кода, настройку нескольких переменных среды, установку библиотек Python и Node.js, а также тестирование веб-приложения.

Установите необходимое программное обеспечение.

В этом проекте для управления пакетами и запуска двух проектов используются Python 3, виртуальные среды ( venv ), Node.js и менеджер пакетов Node ( npm ).

Для установки необходимого программного обеспечения:

  • Установите Python 3, пакет виртуальной среды ( venv ) для Python, Node.js и менеджер пакетов Node.js ( npm ):

    sudo apt update
sudo apt install git pip python3-venv nodejs npm

Клонируйте проект

Загрузите код проекта на свой компьютер для разработки. Для получения исходного кода проекта вам потребуется система контроля версий Git .

Чтобы скачать код проекта:

  1. Клонируйте репозиторий Git, используя следующую команду:

    git clone https://github.com/google-gemini/gemma-cookbook.git

  2. Необязательно: настройте локальный репозиторий Git для использования разреженного извлечения (sparse checkout), чтобы у вас были только файлы проекта:

    cd gemma-cookbook/
git sparse-checkout set Demos/personal-code-assistant/
git sparse-checkout init --cone

Проект веб-сервиса Gemma

Веб-сервис этого проекта ( gemma-web-service ) создает независимо размещенный экземпляр Gemma 2 2B, обернутый в базовый веб-сервис для обработки запросов и ответов на генерацию кода. Расширение VS Code , рассматриваемое далее в этом руководстве, подключается к этому сервису для обработки запросов на помощь в написании кода.

Эти инструкции помогут вам подготовить проект к разработке и тестированию. Общие шаги по настройке включают установку необходимого программного обеспечения, клонирование проекта из репозитория кода, настройку нескольких переменных среды, установку библиотек Python и тестирование веб-сервиса.

Требования к оборудованию

Для запуска проекта веб-сервиса Gemma требуется компьютер с графическим процессором (GPU) или процессором обработки тензоров (TPU) и достаточным объемом памяти GPU или TPU для размещения модели. Для запуска конфигурации Gemma 2 2B в этом проекте веб-сервиса вам потребуется около 16 ГБ памяти GPU, примерно такой же объем обычной оперативной памяти и минимум 20 ГБ дискового пространства.

Если вы развертываете проект веб-сервиса Gemma на виртуальной машине Google Cloud, настройте экземпляр в соответствии со следующими требованиями:

  • Для запуска этого проекта требуется графический процессор NVIDIA T4 (рекомендуется NVIDIA L4 или выше).
  • Операционная система : выберите вариант «Глубокое обучение на Linux» , а именно виртуальную машину глубокого обучения с CUDA 12.3 M124 и предустановленными драйверами для графического процессора.
  • Размер загрузочного диска : выделите не менее 20 ГБ дискового пространства для ваших данных, модели и вспомогательного программного обеспечения.

Настройка проекта

В этом проекте используется Python 3 и виртуальные среды ( venv ) для управления пакетами и запуска веб-сервиса. Установите библиотеки Python, активировав виртуальную среду Python venv , чтобы управлять пакетами и зависимостями Python. Убедитесь, что вы активировали виртуальную среду Python перед установкой библиотек Python с помощью скрипта setup_python или установщика pip . Для получения дополнительной информации об использовании виртуальных сред Python см. документацию по Python venv .

Для установки библиотек Python:

  1. В окне терминала перейдите в каталог gemma-web-service :

    cd Demos/personal-code-assistant/gemma-web-service/

  2. Настройте и активируйте виртуальное окружение Python (venv) для этого проекта:

    python3 -m venv venv
source venv/bin/activate

  3. Установите необходимые для этого проекта библиотеки Python с помощью скрипта setup_python :

    ./setup_python.sh

Установите переменные среды

Для запуска этого проекта требуется несколько переменных среды, включая имя пользователя Kaggle и токен API Kaggle. У вас должна быть учетная запись Kaggle, и вы должны запросить доступ к моделям Gemma, чтобы иметь возможность их загрузить. Для этого проекта вам нужно добавить ваше имя пользователя Kaggle и токен API Kaggle в файл .env , который будет использоваться программой веб-сервиса для загрузки модели.

Чтобы установить переменные среды:

  1. Получите свое имя пользователя Kaggle и токен API, следуя инструкциям в документации Kaggle .
  2. Получите доступ к модели Gemma, следуя инструкциям по получению доступа к Gemma на странице настройки Gemma .

  3. Создайте файл переменных окружения для проекта, создав текстовый файл .env в указанном месте в клонированной папке проекта:

    personal-code-assistant/gemma-web-service/.env

  4. После создания текстового файла .env добавьте в него следующие настройки:

    KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE>
KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>

Запустите и протестируйте веб-сервис.

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

Для запуска и тестирования проекта:

  1. В окне терминала перейдите в каталог gemma-web-service :

    cd personal-code-assistant/gemma-web-service/

  2. Запустите приложение, используя скрипт run_service : 

    ./run_service.sh

  3. После запуска веб-сервиса программный код выводит URL-адрес, по которому можно получить доступ к сервису. Обычно этот адрес выглядит следующим образом: 

    http://localhost:8000/

  4. Проверьте работу сервиса, запустив скрипт test_post : 

    ./test/test_post.sh

После успешного запуска и тестирования службы с помощью этого скрипта вы будете готовы подключиться к ней с помощью расширения VS Code в следующем разделе этого руководства.

Проект расширения VS Code

Расширение VS Code этого проекта ( pipet-code-agent-2 ) создает программное расширение для приложения Microsoft Visual Studio Code, предназначенное для добавления новых команд программирования для искусственного интеллекта. Это расширение взаимодействует с веб-службой Gemma, описанной ранее в этом руководстве. Расширение взаимодействует с веб-службами по протоколу HTTP, используя сообщения в формате JSON.

Настройка проекта

В этих инструкциях описана процедура настройки проекта Pipet Code Agent v2 для разработки и тестирования. Основные шаги включают установку необходимого программного обеспечения, запуск установки конфигурации, настройку параметров расширения и тестирование расширения.

Установите необходимое программное обеспечение.

Проект Pipet Code Agent работает как расширение Microsoft Visual Studio Code и использует Node.js и инструмент Node Package Manager ( npm ) для управления пакетами и запуска приложения.

Для установки необходимого программного обеспечения:

  1. Загрузите и установите Visual Studio Code для вашей платформы.
  2. Убедитесь, что Node.js установлен, следуя инструкциям по установке для вашей платформы.

Настройка библиотек проекта

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

Для настройки кода проекта:

  1. Перейдите в корневой каталог проекта Pipet Code Agent. 

    cd Demos/personal-code-assistant/pipet-code-agent-2/

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

    npm install

Настройте расширение

Теперь вы можете проверить свою установку, запустив Pipet Code Agent в качестве расширения для разработки в VS Code на вашем устройстве. Тест откроет отдельное окно VS Code Extension Development Host, где будет доступно новое расширение. В этом новом окне вы настроите параметры, позволяющие расширению получать доступ к вашему личному веб-сервису Gemma.

Агент Pipet Code работает в окне «Разработка расширений». Рисунок 2. Окно разработчика расширений VS Code с настройками расширения Pipet.

Для настройки и тестирования вашей системы:

  1. Запустите приложение VS Code.
  2. В VS Code создайте новое окно, выбрав Файл > Новое окно .
  3. Откройте проект Pipet Code Agent, выбрав Файл > Открыть папку и выбрав папку personal-code-assistant/pipet-code-agent-2/ .
  4. Откройте файл pipet-code-agent-2/src/extension.ts .
  5. Запустите расширение в режиме отладки, выбрав «Выполнить» > «Начать отладку» и, при необходимости, выбрав параметр «VS Code Extension Development Host» . Этот шаг откроет отдельное окно Extension Development Host .
  6. В новом окне VS Code откройте настройки VS Code, выбрав Code > Settings > Settings .

  7. Укажите адрес хоста вашего веб-сервиса Gemma в качестве параметра конфигурации. В поле «Поиск настроек» введите Gemma , выберите вкладку «Пользователь» , а в параметре Gemma > Сервис: Хост нажмите ссылку « Изменить в settings.json» и добавьте адрес хоста, например, 127.0.0.1 , localhost или my-server.my-local-domain.com : 

    "gemma.service.host": "your-host-address-here"

  8. Сохраните изменения в файле settings.json и закройте вкладку настроек.

Протестируйте расширение

Теперь вы можете проверить установку, запустив Pipet Code Agent в качестве расширения для разработки в VS Code на вашем устройстве. Тест откроет отдельное окно VS Code Extension Development Host, где будет доступно новое расширение.

Для проверки команд расширения:

  1. В окне VS Code Extension Development Host выберите любой фрагмент кода в окне редактора.
  2. Откройте палитру команд, выбрав Вид > Палитра команд .
  3. В палитре команд введите Pipet и выберите одну из команд с этим префиксом.

Изменить существующие команды

Изменение команд, предоставляемых в Pipet Code Agent, — это самый простой способ изменить поведение и возможности расширения. Эта контекстная информация подсказки направляет генеративную модель Gemma при формировании ответа. Изменяя инструкции подсказки в существующих командах Pipet, вы можете изменить поведение каждой из команд.

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

Чтобы подготовиться к редактированию команды review.ts :

  1. Запустите приложение VS Code.
  2. В VS Code создайте новое окно, выбрав Файл > Новое окно .
  3. Откройте проект Pipet Code Agent, выбрав Файл > Открыть папку и выбрав папку pipet-code-agent/ .
  4. Откройте файл pipet-code-agent/src/review.ts .

Чтобы изменить поведение команды review.ts :

  1. В файле review.ts измените предпоследнюю строку константы PROMPT_INSTRUCTIONS , добавив Also note potential performance improvements . 

    const PROMPT_INSTRUCTIONS = `
Reviewing code involves finding bugs and increasing code quality. Examples of
bugs are syntax errors or typos, out of memory errors, and boundary value
errors. Increasing code quality entails reducing complexity of code, eliminating
duplicate code, and ensuring other developers are able to understand the code.
Also note potential performance improvements.

Write a review of the following code:
`;

  2. Сохраните изменения в файле review.ts .

Для проверки измененной команды:

  1. В окне проекта расширения Pipet в VS Code откройте файл src/extension.ts .
  2. Для сборки обновлённого кода выберите Терминал > Запустить задачу сборки... и затем опцию npm: compile .
  3. Перезапустите отладчик, выбрав «Выполнить» > «Перезапустить отладку» .
  4. В окне VS Code Extension Development Host выберите любой фрагмент кода в окне редактора.
  5. Откройте палитру команд, выбрав Вид > Палитра команд .
  6. В палитре команд введите Pipet и выберите Pipet: Просмотрите выбранную команду кода .

Создать новые команды

Вы можете расширить функциональность Pipet, создавая новые команды, выполняющие совершенно новые задачи с использованием модели Gemma. Каждый файл команды, например comment.ts или review.ts , в основном самодостаточен и включает код для сбора текста из активного редактора, составления запроса, подключения к веб-сервису Gemma, отправки запроса и обработки ответа.

В этом наборе инструкций объясняется, как создать новую команду, используя код существующей команды, question.ts , в качестве шаблона.

Чтобы создать команду, которая рекомендует имена для функций:

  1. Создайте копию файла pipet-code-agent-2/src/question.ts под названием new-service.ts в каталоге src/ .
  2. В VS Code откройте файл src/new-service.ts .

  3. Измените подсказки в новом файле, отредактировав значение PROMPT_INSTRUCTIONS . 

    // Provide instructions for the AI model
const PROMPT_INSTRUCTIONS = `
Build a Python web API service using FastAPI and uvicorn.
- Just output the code, DO NOT include any explanations.
- Do not include an 'if __name__ == "__main__":' statement.
- Do not include a '@app.get("/")' statement
- Do not include a '@app.get("/info")' statement
`;

  4. Добавьте шаблон сервиса, создав новую константу BOILERPLATE_CODE . 

    const BOILERPLATE_CODE = `
# the following code for testing and diagnosis:
@app.get("/")
async def root():
    return "Server: OK"

@app.get("/info")
async def info():
    return "Service using FastAPI version: " + fastapi.__version__

# Run the service
if __name__ == "__main__":
    # host setting makes service available to other devices
    uvicorn.run(app, host="0.0.0.0", port=8000)
`;

  5. Измените имя функции команды на newService() и обновите её информационное сообщение. 

    export async function newService() {
  vscode.window.showInformationMessage('Building new service from template...');
...

  6. Обновите код ассемблерного кода подсказки, добавив в него текст, выделенный в редакторе, и строку PROMPT_INSTRUCTIONS . 

    // Build the full prompt using the template.
  const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;

  7. Измените код вставки ответа, чтобы он включал сам ответ и стандартный код. 

    // Insert answer after selection.
editor.edit((editBuilder) => {
    editBuilder.insert(selection.end, "\n\n" + responseText);
    editBuilder.insert(selection.end, "\n" + BOILERPLATE_CODE);
});

  8. Сохраните изменения в файле new-service.ts .

Интегрируйте новую команду

После завершения написания кода для новой команды необходимо интегрировать её с остальной частью расширения. Обновите файлы extension.ts и package.json , чтобы новая команда стала частью расширения, и разрешите VS Code вызывать эту новую команду.

Для интеграции команды new-service с кодом расширения:

  1. В VS Code откройте файл pipet-code-agent-2/src/extension.ts .

  2. Добавьте новый файл с кодом в расширение, добавив новый оператор импорта. 

    import { newService } from './new-service';

  3. Зарегистрируйте новую команду, добавив следующий код в функцию activate() . 

    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.newService', newService);
}

  4. Сохраните изменения в файле extension.ts .

Для интеграции команды name с пакетом расширений:

  1. В VS Code откройте файл pipet-code-agent/package.json .

  2. Добавьте новую команду в раздел commands файла пакета. 

    "contributes": {
  "commands": [
    ...
    {
      "command": "pipet-code-agent.newService",
      "title": "Pipet: Generate a FastAPI service."
    }
  ],

  3. Сохраните изменения в файле package.json .

Проверьте новую команду

После завершения написания команды и ее интеграции с расширением вы можете ее протестировать. Ваша новая команда будет доступна только в окне VS Code Extension Development Host , а не в окне VS Code, где вы редактировали код расширения.

Для проверки измененной команды:

  1. В окне проекта расширения Pipet в VS Code откройте файл src/extension.ts .
  2. Для сборки обновлённого кода выберите Терминал > Запустить задачу сборки... и затем опцию npm: compile .
  3. В окне проекта расширения Pipet в VS Code перезапустите отладчик, выбрав Run > Restart Debugging , что перезапустит отдельное окно Extension Development Host .
  4. В окне VS Code Extension Development Host выберите фрагмент кода в окне редактора.
  5. Откройте палитру команд, выбрав Вид > Палитра команд .
  6. В палитре команд введите Pipet и выберите пункт Pipet: Generate a FastAPI service command.

Теперь вы создали команду расширения VS Code, которая работает с моделью искусственного интеллекта Gemma! Попробуйте поэкспериментировать с различными командами и инструкциями, чтобы создать рабочий процесс разработки кода с помощью ИИ, который подойдет именно вам!

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

Вы можете упаковать свое расширение в файл .vsix для локальной установки в вашем экземпляре VS Code. Используйте инструмент командной строки vsce для создания файла пакета .vsix из вашего проекта расширения, который затем можно установить в ваш экземпляр VS Code. Подробную информацию об упаковке расширения см. в документации по публикации расширений в VS Code. После завершения упаковки расширения в файл VSIX вы можете установить его вручную в VS Code.

Для установки расширения, входящего в состав VSIX:

  1. В вашем экземпляре VS Code откройте панель расширений , выбрав Файл > Расширения .
  2. В панели расширений выберите меню с тремя точками в правом верхнем углу, а затем выберите «Установить из VSIX» .
  3. Откройте созданный вами файл пакета .vsix из проекта расширения, чтобы установить его.

Дополнительные ресурсы

Более подробную информацию о коде этого проекта можно найти в репозитории кода Gemma Cookbook . Если вам нужна помощь в разработке приложения или вы хотите сотрудничать с другими разработчиками, присоединяйтесь к серверу Discord сообщества разработчиков Google . Больше проектов Build with Google AI вы найдете в видеоплейлисте .