Создайте генератор кода AI Flutter с помощью Gemini

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

В этом руководстве показано, как расширить Flutter Theme Agent , инструмент для помощи в написании кода на базе искусственного интеллекта, созданный командой Flutter Developer Relations в Google. Этот проект с открытым исходным кодом представляет собой расширение для Microsoft Visual Studio Code (VS Code), которое генерирует определенные компоненты темы Flutter или объекта ThemeData, включая цветовые схемы, стили текста и стили кнопок. Вы можете изменить проект, чтобы существующие функции работали лучше, или создать новые команды для лучшей поддержки рабочего процесса разработки.

Видеообзор проекта и способы его расширения, включая идеи людей, которые его создали, можно найти в разделе Генератор кода AI Flutter — сборка с помощью Google AI . В противном случае вы можете начать расширение проекта, следуя инструкциям ниже.

Снимок экрана: агент темы Flutter, работающий в VS Code

Рисунок 1. Агент темы Flutter, работающий в окне хоста разработки расширений VS Code.

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

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

Установите необходимые компоненты

Проект Flutter Theme Agent работает как расширение Microsoft Visual Studio Code (VS Code) и использует Node.js и npm для управления пакетами и запуска приложения. Следующие инструкции по установке предназначены для хост-компьютера Linux.

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

  1. Установите Visual Studio Code для вашей платформы.
  2. Установите node и npm , следуя инструкциям по установке для вашей платформы.
  3. Если вы еще не установили Flutter для VS Code, следуйте инструкциям по установке .

Клонировать и настроить проект

Загрузите код проекта и используйте команду установки npm , чтобы загрузить необходимые зависимости и настроить проект. Вам понадобится программное обеспечение для управления версиями git , чтобы получить исходный код проекта.
Чтобы скачать и настроить код проекта:

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

    git clone https://github.com/google/generative-ai-docs`

  2. При необходимости настройте свой локальный репозиторий git на использование разреженного извлечения, чтобы у вас были только файлы для проекта агента документов.

    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent

  3. Перейдите в корневой каталог проекта Flutter Theme Agent.

    cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

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

    npm install

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

Теперь вы сможете протестировать свою установку, запустив Flutter Theme Agent в качестве расширения разработки в VS Code на своем устройстве. Тест открывает отдельное окно узла разработки расширений VS Code, в котором доступно новое расширение. В этом новом окне вы настраиваете ключ API, который расширение использует для доступа к API Google Gemini.

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

  1. Запустите приложение VS Code.
  2. В VS Code создайте новое окно, выбрав «Файл» > «Новое окно» .
  3. Откройте проект Flutter Theme Agent, выбрав «Файл» > «Открыть папку» и выбрав папку flutter_theme_agent/ .
  4. В VS Code откройте файл flutter_theme_agent/package.json .
  5. Запустите расширение в режиме отладки, выбрав «Выполнить» > «Начать отладку» . На этом шаге открывается отдельное окно узла разработки расширений VS Code.
  6. Откройте настройки VS Code, выбрав «Код» > «Настройки» > «Настройки» .
  7. Получите ключ API Google Gemini на сайте разработчика Generative AI и скопируйте строку ключа.

  8. Установите ключ API в качестве параметра конфигурации. В поле «Настройки поиска» введите flutter theme , выберите вкладку «Пользователь» , а в настройке Google > Gemini: Api Key нажмите ссылку «Изменить в settings.json » и добавьте свой ключ Gemini API:

    "google.ai.apiKey": "your-api-key-here"

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

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

  1. В окне узла разработки расширений VS Code напишите комментарий к коду, описывающий компонент пользовательского интерфейса, который вы хотите создать.
  2. Выделите текст комментария с характеристиками компонента.
  3. Откройте палитру команд, выбрав «Просмотр» > «Палитра команд» .
  4. В палитре команд введите Flutter Theme и выберите одну из команд с этим префиксом.

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

Изменение команд, представленных в Flutter Theme Agent, — это самый простой способ изменить поведение и возможности расширения.

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

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

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

  1. Запустите приложение VS Code.
  2. В VS Code создайте новое окно, выбрав «Файл» > «Новое окно» .
  3. Откройте проект Flutter Theme Agent, выбрав «Файл» > «Открыть папку» и выбрав папку flutter_theme_agent/ .

  4. Откройте файл flutter_theme_agent/src/buttonstyle.ts .

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

  5. В файле buttonstyle.ts отредактируйте константу BUTTONSTYLE_CONTEXT , включив в нее различные инструкции.

    const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

  6. При необходимости в файле buttonstyle.ts , константе BUTTONSTYLE_CONTEXT , добавьте еще один пример инструкции и вывода стиля кнопки или замените один из существующих примеров.

    ...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

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

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

  1. В окне проекта расширения VS Code перезапустите отладчик, выбрав «Выполнить» > «Перезапустить отладку» .

  2. В окне узла разработки расширений VS Code выберите комментарий к коду в окне редактора, описывающий нужный стиль кнопки, например:

    // blue, lickable buttons that light up when you hover over them`

  3. Откройте палитру команд, выбрав «Просмотр» > «Палитра команд» .

  4. В палитре команд введите Flutter и выберите команду Flutter Theme Agent: Create a Flutter ButtonStyle .

Создать новую команду

Вы можете расширить агент темы Flutter, создав новые команды, которые выполняют совершенно новые задачи с помощью Gemini API. Каждый командный файл, такой как buttonstyle.ts и colorscheme.ts , в основном автономен и включает в себя код для сбора текста из активного редактора, составления приглашения, подключения к API Gemini, отправки приглашения и передачи ответа.

Снимок экрана агента темы Flutter с видимой новой командой

Рис. 2. Новая команда Flutter Theme Agent в окне узла разработки расширений VS Code.

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

Чтобы создать команду, которая генерирует только список цветов для объекта ColorScheme :

  1. Создайте копию файла flutter_theme_agent/src/colorscheme.ts с именем colorscheme2.ts в каталоге src/ .
  2. В VS Code откройте файл src/colorscheme2.ts .

  3. В файле colorscheme2.ts переименуйте generateColorScheme generateColorScheme2 :

    export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

  4. Измените инструкции в файле colorscheme2.ts . Отредактируйте инструкции по генерации кода COLORSCHEME_CONTEXT , удалив текст ColorScheme( из примера кода в строке 51 и сделав его пустой строкой.

    ...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...

  5. Удалите символ закрывающей скобки « ) » из конца списка цветов и сделайте его пустой строкой.

    ...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

  6. Повторите эти изменения для второго примера. В строке COLORSCHEME_CONTEXT в строке 87 удалите текст ColorScheme( и сделайте его пустой строкой.

  7. В строке 115 удалите символ закрывающей скобки « ) » из конца списка цветов и сделайте его пустой строкой.

  8. В строку COLORSCHEME_CONTEXT добавьте инструкцию, чтобы не включать включающий синтаксис:

    ...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

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

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

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

Чтобы интегрировать новую команду с кодом расширения:

  1. В VS Code откройте файл flutter_theme_agent/src/extension.ts .

  2. Импортируйте новый код команды в расширение, добавив новый оператор импорта.

    import { generateColorScheme2 } from './components/colorscheme2';

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

    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

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

Чтобы интегрировать команду name с пакетом расширения:

  1. В VS Code откройте файл flutter_theme_agent/package.json .

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

    "contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

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

Протестируйте новую команду

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

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

  1. В окне проекта расширения VS Code перезапустите отладчик, выбрав «Выполнить» > «Перезапустить отладку» , что перезапустит отдельное окно «Хост разработки расширений» .
  2. В окне узла разработки расширений VS Code откройте проект разработки Flutter.
  3. В том же окне откройте окно редактора кода, введите комментарий, описывающий нужный вам компонент пользовательского интерфейса, и выделите текст этого комментария.
  4. Откройте палитру команд, выбрав «Просмотр» > «Палитра команд» .
  5. В палитре команд введите Flutter Theme и выберите команду Flutter Theme Agent: My New Code Generator .

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

Дополнительную информацию о проекте Flutter Theme Agent можно найти в репозитории кода . Если вам нужна помощь в создании приложения или вы ищете разработчиков для совместной работы, посетите сервер Discord сообщества разработчиков Google .

Производственные приложения

Если вы планируете развернуть Flutter Theme Agent для большой аудитории, обратите внимание, что на использование вами Google Gemini API может распространяться ограничение скорости и другие ограничения на использование . Если вы планируете создать производственное приложение с использованием модели Gemini, воспользуйтесь услугами Google Cloud Vertex AI , чтобы повысить масштабируемость и надежность вашего приложения.