Что такое режим взаимодействия с артефактами

База знаний по искусственному интеллектуОпубликовано 6 месяцев назад Круг обмена ИИ

6.4K 00

В эпоху программирования с помощью ИИ мы хотим, чтобы ИИ генерировал код, который не является просто статичным текстом, а может быть Разбор, редактирование, предварительный просмотр и даже выполнение The. Этот спрос привел к появлению нового способа взаимодействия - Артефакт (серия видеоигр) .. Этот пост начнется с теоретическая концепция до (времени) практическая реализация Глубокий анализ Принцип работы артефакта, основная технология и сценарии применения .

1. Что такое артефакт?

Артефакт - это не конкретный технический термин, а скорее Взаимодействие кодов ИИ Самый ранний известный пример этого - в Клод (Антропный ИИ) появляется в веб-версии сайта. Его основная цель заключается в следующем Упростите разбор, редактирование и предварительный просмотр кода, созданного искусственным интеллектом .

В традиционной модели генерации кода ИИ возвращает только текст кода, который пользователь должен вручную скопировать и вставить в редактор для выполнения. Такой подход имеет следующие недостатки:

Отсутствие структурированной информации : Код, сгенерированный AI, представляет собой обычный текст и не может распознать ключевую информацию, такую как имя и тип файла.
Ограниченный опыт редакторской работы : Пользователи не могут изменять код непосредственно в диалоговом интерфейсе AI и должны использовать дополнительные инструменты.
Отсутствие возможности мгновенного предварительного просмотра : Для HTML/CSS/JS-кода невозможно просмотреть эффект выполнения в реальном времени, что влияет на эффективность разработки.

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

Структурированное хранение (Содержит такую информацию, как имя файла, тип файла и т. д.).
динамически анализируемый (извлекает блоки кода и различает обычный текст).
Показать в редакторе кода (Поддержка мгновенной модификации).
Поддержка предварительного просмотра (например, компоненты HTML/SVG/React и т.д.).

2. Как работает артефакт

2.1 Процесс взаимодействия

полный Взаимодействие артефактов Он состоит из пяти основных этапов:

ИИ генерирует блоки структурированного кода
- Для разбора код должен быть обернут в специальные теги.
Разбор того, что возвращает ИИ
- Распознавание текстовых и кодовых блоков и извлечение имени файла, типа и содержимого кода.
Хранение структур данных
- Хранит разобранное содержимое в соответствующей структуре данных, различая обычный текст и код.
Фронтальный динамический дисплей
- Отображает код в интерфейсе пользовательского интерфейса и предоставляет возможности редактирования.
Предварительный просмотр кода
- Если код представляет собой HTML/CSS/JS или React компонент, который можно запускать и просматривать напрямую.

3. Основная реализация Артефакта

3.1 Формат кода, сгенерированного искусственным интеллектом

Чтобы фронтенд мог корректно разбирать код, сгенерированный искусственным интеллектом, нам необходимо определить набор стандартная форма Обычно для этого используется DSL (Domain Specific Language) Маркировка. Пример:

<<artifact-start>>[{
"filename": "index.html",
"filetype": "html"
}]
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, Artifact!</h1>
</body>
</html>
<<artifact-end>>

В этой структуре кода<<artifact-start>> ответить пением <<artifact-end>> как маркеры, содержащиеся внутри:

имя файла : имя файла (например. index.html).
тип файла : тип файла (например. html).
Содержание кода .

3.2 Разбор блоков кода артефакта

На переднем плане нам нужно разработать ArtifactParser для извлечения блоков кода. Блок кода можно извлечь с помощью кнопки регулярное выражение (математика) соответствовать <<artifact-start>> ответить пением <<artifact-end>> Содержание между:

логика разбора

Сопоставление блоков кода

const artifactRegex = /<<artifact-start>>(.*?)<<artifact-end>>/gs;
const matches = responseText.match(artifactRegex);

Извлечение информации в формате JSON

const jsonRegex = /\[(.*?)\]/s;
const jsonMatch = codeBlock.match(jsonRegex);
const artifactInfo = JSON.parse(jsonMatch[1]);

Хранение структурированных объектов

const artifact = {
filename: artifactInfo.filename,
filetype: artifactInfo.filetype,
content: codeBlock.replace(jsonMatch[0], "").trim()
};

3.3 Структурированное хранение данных

Разобранный код необходимо сохранить в структуре данных, чтобы он мог быть корректно отображен во внешнем интерфейсе.

структура данных

interface Artifact {
filename: string;
filetype: string;
content: string;
}
interface MixContent {
type: "text" | "artifact";
text?: string;
artifact?: Artifact;
}

Artifact Структуры используются для хранения кодовый файл .
MixContent Структуры используются для хранения Смешанное содержание обычного текста и кода .

3.4 Динамическое отображение на передней панели

Доступ к внешнему интерфейсу можно получить с помощью React + CodeMirror например, для создания редактируемых окон кода:

import CodeMirror from '@uiw/react-codemirror';
function CodeEditor({ artifact }) {
return (
<CodeMirror
value={artifact.content}
options={{ mode: artifact.filetype, theme: "monokai", lineNumbers: true }}
/>
);
}

(coll.) провалить (студента) artifact После разбора блок кода автоматически заполняется кодом редактор кода для редактирования пользователем.

3.5 Предварительный просмотр кода

Для HTML-кода мы можем использовать iframe Предварительный просмотр напрямую:

function Preview({ artifact }) {
return (
<iframe srcDoc={artifact.content} style={{ width: "100%", height: "500px" }} />
);
}

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

4. Дополнительно: поддержка многодокументного разбора

Если ИИ генерирует Несколько документов Расширение необходимо для ArtifactParserчтобы заставить его поддерживать более одного artifact также предоставляет Функция переключения файлов .

interface MultiArtifact {
files: Artifact[];
}

Доступен фронт-энд Список документов чтобы пользователь мог просматривать различные файлы кода.

5. сценарии применения артефактов

✅ AI Code Assistant

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

✅ Платформа для разработки с низким содержанием кода

Сделайте генерируемые искусственным интеллектом компоненты пользовательского интерфейса мгновенно визуализируемыми и настраиваемыми.

✅ Веб-дизайн с помощью искусственного интеллекта

Генерируйте и визуализируйте HTML/CSS/JS-код напрямую, чтобы повысить эффективность веб-разработки.

6. Резюме

Интерактивный режим артефактов Суть дела заключается в следующем:

ИИ генерирует блоки структурированного кода (обозначены с помощью DSL).
Внешний код разбора (извлечение кода и метаданных с помощью регулярных выражений).
Хранятся в виде структурированных данных (Различайте текст и код).
Динамическая презентация и редактирование (Предусмотрена поддержка редактора кода).
Поддержка предварительного просмотра (работающие компоненты HTML, SVG или React).

Благодаря такому способу взаимодействияКод, сгенерированный искусственным интеллектом, становится более интуитивным и простым в использовании, что значительно улучшает опыт разработчиков 🚀.

База знаний по искусственному интеллекту

Авторское право на статью Круг обмена ИИ Пожалуйста, не воспроизводите без разрешения.