Создание и развертывание приложений на базе искусственного интеллекта с помощью GitHub Spark

Введение

С помощью GitHub Sparkможно описать то, что вы хотите на естественном языке, и получить полное веб-приложение с хранилищем данных, функциями ИИ и встроенными средствами проверки подлинности GitHub . Вы можете выполнять итерацию с помощью запросов, визуальных инструментов или кода, а затем развернуть с помощью щелчка в полностью управляемой среде выполнения.

Spark легко интегрирован с GitHub для разработки spark с помощью синхронизированного пространства кода GitHub с Copilot для расширенного редактирования. Вы также можете создать репозиторий для совместной работы команды и использовать экосистему средств и интеграции GitHub.

Этот урок проведёт вас через весь жизненный цикл создания и развертывания приложения с Spark его возможностями.

Необходимые компоненты

• Учетная GitHub запись с Copilot Pro+ лицензией Copilot Enterprise .

Шаг 1. Создание веб-приложения

В этом руководстве мы создадим простое приложение средства маркетинга, где:

• Пользователь вводит описание продукта, который он хочет вывести на рынок.
• Приложение создает маркетинговую копию и рекомендует визуальную стратегию и целевую аудиторию.

1. Перейти к https://github.com/spark.

2. В поле ввода введите описание приложения. Например:

   Copilot prompt

   Build an app called "AI-Powered Marketing Assistant."
   
   The app should allow users to input a brief description of a product or service. When the user submits their brief, send this information to a generative AI model with a prompt that asks the AI to return the following:
      - Persuasive and engaging marketing copy for the product or service.
      - A visual strategy for how to present the product/service (e.g., suggested imagery, colors, design motifs, or mood).
      - A recommendation for the ideal target audience.
   The app should display these three elements clearly and in an organized manner.  The app should look modern, fresh and engaging.
   

   Совет

   • Будьте конкретными, и предоставьте как можно больше сведений о наилучших результатах. Вы можете попросить Copilot Chat уточнить или предложить улучшения вашего первоначального запроса.
   • В качестве альтернативы вставьте документ markdown в поле ввода, чтобы Spark получить больше контекста о том, что вы хотите создать.

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

4. Нажмите , чтобы создать своё приложение.

   Примечание.

          Spark всегда будет генерировать приложения Typescript и React.
   

Шаг 2. Уточнение и расширение приложения

После Spark завершения создания приложения можно протестировать его в окне предварительного просмотра. Здесь вы можете выполнить итерацию приложения с помощью естественного языка, визуальных элементов управления редактирования или кода.

1. Чтобы внести изменения в приложение с помощью естественного языка, на вкладке "Итератировать" на левой боковой панели введите инструкции в главном поле ввода, а затем отправьте.
2. При необходимости щелкните один из вариантов "Предложения" непосредственно над полем ввода на вкладке "Итерат" для разработки приложения.

3.        Spark Автоматически оповещает о обнаруженных ошибках. Чтобы устранить ошибки, нажмите кнопку **"Исправить все** над полем ввода" на вкладке "Итерат".
   

4. По желанию нажмите «Код », чтобы просмотреть и отредактировать базовый код. Панель редактирования кода содержит Copilot встроенные предложения.
5. Чтобы внести целевые изменения в определенный элемент приложения, щелкните значок** целевого объекта в правом верхнем углу, а затем наведите указатель мыши **и выберите элемент в области динамического просмотра.

Шаг 3. Настройка стиля приложения

Далее давайте изменим стиль вашего приложения с помощью Sparkвстроенных инструментов . Кроме того, можно напрямую изменить код.

1. Измените общий внешний вид приложения:

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

2. Чтобы выбрать целевые визуальные изменения в определенном компоненте, щелкните значок целевого объекта, а затем выберите элемент приложения в области предварительного просмотра. Элементы управления стили, связанные с этим конкретным элементом, будут отображаться на левой боковой панели.

3. При необходимости измените стили в коде:

   • Нажмите , чтобы открыть редактор кода.

   • Измените CSS, Tailwind CSS или пользовательские переменные для точного элемента управления (например, заполнение, интервалы, шрифты, цвета).

     Совет

     Вы можете импортировать настраиваемые шрифты (например, Google Fonts) или добавить расширенные стили непосредственно в редакторе кода Spark. Попросите Copilot Chat пошаговые рекомендации, если вы не знакомы с синтаксисом стиля.

4. Нажмите на вкладку Assets, чтобы загрузить surface нужные ассеты в своём приложении.

   • Добавление изображений, логотипов, видео, документов или других ресурсов для персонализации приложения.
   • После загрузки Spark укажите, как вы хотите интегрировать эти ассеты в своё приложение во вкладке «Итератив».

Шаг 4. Хранение данных и управление ими

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

Для нашего маркетингового приложения давайте добавим data storage, чтобы пользователи могли сохранять свои любимые маркетинговые тексты и легко access к ним позже:

1. Используйте следующую инструкцию во вкладке «Итератив» для руководства Spark:

   Copilot prompt

   Add a "Favorites" page where users can save and view their favorite marketing copy results.
   

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

3. Перейдите на вкладку "Данные", чтобы просмотреть и изменить сохраненные значения.

4. Если вы явно не хотите Spark сохранять данные, попросите Spark «хранить данные локально» или «не сохранять данные».

Шаг 5. Уточнение возможностей искусственного интеллекта

Далее давайте повторим возможности ИИ, включённые в наше приложение, которые работают на GitHub Models.

          Spark автоматически определяет, когда ИИ нужен для функций вашего приложения. Он автоматически создает запросы для каждой функции ИИ, интегрируется с лучшими моделями и управляет интеграцией API и выводом LLM от вашего имени.

1. Перейдите на вкладку "Запросы ".
2. Ознакомьтесь с подсказками, Spark созданными для работы всех функций ИИ, используемых в вашем приложении.
   • В нашем маркетинговом приложении для нас сгенерировано три отдельных запроса Spark (генерация маркетинговых текстов, визуальная рекомендация стратегии и рекомендация целевой аудитории).
3. Щелкните каждый запрос, чтобы просмотреть и изменить его без необходимости перейти в код. Внесите корректировки, чтобы лучше соответствовать вашему варианту использования.
4. Проверьте приложение, чтобы просмотреть обновленные результаты.

Шаг 6: Редактировать и отладить с помощью кода и Copilot

Вы можете просматривать или редактировать код приложения напрямую в Spark или через синхронизированное GitHub кодовое пространство.

1. Редактировать код в Spark: * Нажмите «Код».
   • Просматривайте файловое дерево и вносите правки, получая доступ к встроенным предложениям Copilot в редакторе. Изменения отражаются мгновенно в окне динамического предварительного просмотра.
2. Чтобы сделать более сложные изменения, выполните приведенные далее действия.
   • В правом верхнем углу нажмите , затем нажмите Open codespace (полнофункциональный облачный IDE), чтобы запустить кодовое пространство в новой вкладке браузера.
   • Оказавшись в кодовом пространстве, нажмите для открытия Copilot и внесения более сложных изменений.
     • В окне запросов выберите режим агента , чтобы автоматически Copilot создавать, просматривать и устранять неполадки вашего кода.
     • Выберите режим редактирования , Copilot чтобы пересмотреть код приложения и предложить улучшения и исправления.
     • Выберите режим Ask , Copilot чтобы объяснить и помочь вам понять код или ошибки, которые вы видите в Spark.
   • Изменения, которые вы вносите в кодовое пространство, автоматически синхронизируются с Spark.

Шаг 7. Развертывание и предоставление общего доступа к приложению

          Spark Оснащён полностью интегрированной средой выполнения, позволяющей развернуть приложение одним кликом.

1. В правом верхнем углу нажмите кнопку "Опубликовать".

2. По умолчанию spark будет частным и доступным только для вас. В разделе «Видимость» выберите — хотите ли вы, чтобы ваша искра оставалась приватной или делала её доступной для членов конкретной организации на GitHub, или для всех GitHub пользователей.

   

3. В разделе «Data Access» выберите — предоставлять другим пользователям доступ только для чтения или Write Access к вашему приложению.

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

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

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

   При публикации приложения Spark автоматически добавляется облачное хранилище и LLM-вывод для вашего приложения в интегрированной среде выполнения.

   URL-адрес для spark создается на основе имени spark. Вы можете отредактировать название приложения и Spark автоматически управлять перенаправлением старых URL на ваш последний URL.

Шаг 8. Приглашение участников совместной работы с репозиторием

Теперь, когда у вас есть функциональное, развернутое приложение, вы можете продолжать создавать и сотрудничать над ним так же, как и с любым другим GitHub проектом, создавая и связывая GitHub репозиторий с искрой.

1. В правом верхнем углу нажмите , затем нажмите Создать репозиторий.
2. В открывшемся диалоговом окне нажмите кнопку "Создать".

Под вашим личным аккаунтом GitHubсоздаётся новый, приватный репозиторий, с именем репозитория на основе имени вашей искры.

Все изменения, внесенные в spark до создания репозитория, будут добавлены в репозиторий, чтобы с момента его создания вы записали все изменения и фиксации, внесенные в Spark.

Между вашей искрой и репозиторием происходит двусторонняя синхронизация, поэтому изменения, внесённые в одну Spark или в основной ветке вашего репозитория, автоматически отражаются в обоих местах.

Вы также можете создавать проблемы в своём репозитории и назначать их Copilot облачный агент , чтобы он мог составлять pull requests на исправления и улучшения.

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

Исследуйте больше идей, с которыми можно строить Spark: * Быстро прототипируйте новые идеи: если у вас есть конкретная идея для функции или приложения, загрузите макет, эскиз, скриншот или даже вставьте документацию Spark по разметке и попросите Spark реализовать вашу идею. * Создавайте внутренние инструменты для себя и своей команды: если у вас есть общий рабочий процесс или процесс, который сейчас хранится в документе или таблице, объясните свой рабочий процесс Spark и Spark превратите его в интерактивное веб-приложение.

Дополнительные материалы

•         [автозаголовок](/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-spark)
  

•         [автозаголовок](/copilot/concepts/copilot-billing/about-billing-for-github-spark)
  

•         [автозаголовок](/free-pro-team@latest/site-policy/github-terms/github-pre-release-license-terms)