Qu'est-ce que le mode d'interaction avec les artefacts ?

Base de connaissances sur l'IAPosté il y a 5 mois Cercle de partage de l'IA

À l'ère de la programmation assistée par l'IA, nous voulons que l'IA génère un code qui ne soit pas simplement un texte statique, mais qui puisse être utilisé par les utilisateurs. Analyse, édition, prévisualisation et même exécution Le. Cette demande a donné naissance à un nouveau mode d'interaction - le Artéfact .. Ce billet commencera par le concept théorique jusqu'à (un moment) mise en œuvre pratique Analyse approfondie Principe de fonctionnement de l'artefact, technologie de base et scénarios d'application .

1) Qu'est-ce qu'un artefact ?

L'artefact n'est pas un terme technique spécifique, mais plutôt un Code d'interaction avec l'IA L'exemple le plus ancien connu est celui du Claude (IA anthropique) apparaît dans la version web du site. Son objectif principal est de Faciliter l'analyse, la modification et la prévisualisation du code généré par l'IA .

Dans le modèle traditionnel de génération de code d'IA, l'IA ne renvoie que le texte du code, que l'utilisateur doit copier et coller manuellement dans l'éditeur pour l'exécuter. Cette approche présente les inconvénients suivants :

Manque d'informations structurées Le code généré par l'IA n'est que du texte brut et ne peut pas distinguer des informations clés telles que le nom et le type de fichier.
Expérience éditoriale limitée Les utilisateurs ne peuvent pas modifier le code directement dans l'interface de dialogue de l'IA et doivent utiliser des outils supplémentaires.
Absence de prévisualisation instantanée Pour le code HTML/CSS/JS, il n'est pas possible de visualiser l'effet d'exécution en temps réel, ce qui affecte l'efficacité du développement.

Mode interactif de l'artefact faire passer (un projet de loi, une inspection, etc.) Données structurées, analyse syntaxique et présentation dynamique de l'interface utilisateur La résolution de ces problèmes permet d'obtenir un code généré par l'IA :

Stockage structuré (Contient des informations telles que le nom du fichier, le type de fichier, etc.)
analysé dynamiquement (extrait les blocs de code et distingue le texte brut).
Afficher dans l'éditeur de code (Prise en charge de la modification instantanée).
Support de prévisualisation (par exemple, composants HTML/SVG/React, etc.).

2. le fonctionnement de l'artefact

2.1 Processus d'interaction

complet Interaction des artefacts Il se compose de cinq étapes principales :

L'IA génère des blocs de code structurés
- Le code doit être enveloppé dans des balises spécifiques pour être analysé.
Analyse des résultats de l'IA
- Reconnaître les blocs de texte et de code et extraire le nom du fichier, le type et le contenu du code.
Stockage des structures de données
- Stocke le contenu analysé dans une structure de données appropriée, en faisant la distinction entre le texte brut et le code.
Affichage dynamique frontal
- Rend le code sur l'interface utilisateur et fournit des capacités d'édition.
Aperçu du code
- Si le code est HTML/CSS/JS ou Réagir qui peut être exécuté et prévisualisé directement.

3. la mise en œuvre de base d'Artifact

3.1 Format du code généré par l'IA

Pour que le front-end puisse analyser correctement le code généré par l'IA, nous devons définir un ensemble d'éléments suivants formulaire standard La méthode habituelle consiste à utiliser DSL (Domain Specific Language) Marquage. Exemple :

<<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>>

Dans cette structure de code, le<<artifact-start>> répondre en chantant <<artifact-end>> comme des marqueurs qui sont contenus en interne :

nom de fichier le nom du fichier (par exemple index.html).
type de fichier : le type de fichier (par ex. html).
Code Contenu .

3.2 Analyse des blocs de code de l'artefact

En amont, nous devons développer ArtifactParser pour extraire les blocs de code. Le bloc de code peut être extrait à l'aide de la fonction expression régulière (math.) pour correspondre <<artifact-start>> répondre en chantant <<artifact-end>> Le contenu entre :

logique d'analyse

Correspondance des blocs de code

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

Extraction d'informations JSON

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

Stockage d'objets structurés

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

3.3 Stockage de données structurées

Le code analysé doit être stocké dans une structure de données afin qu'il puisse être rendu correctement par le front-end.

structure des données

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

Artifact Les structures sont utilisées pour stocker fichier de code .
MixContent Les structures sont utilisées pour stocker Contenu mixte de texte brut et de code .

3.4 Affichage dynamique frontal

La partie frontale peut être utilisée React + CodeMirror pour fournir des fenêtres de code modifiables, par exemple :

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

(coll.) échouer (un étudiant) artifact Après avoir été analysé, le bloc de code est automatiquement complété par le code éditeur de code pour l'édition par l'utilisateur.

3.5 Aperçu du code

Pour le code HTML, nous pouvons utiliser iframe Prévisualisation directe :

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

Si c'est le cas Composants React Voici un exemple du type de travail qui doit être effectué par l'Agence de l'Union européenne. CDN présente React La première étape consiste à créer un code HTML dynamique pour la prévisualisation.

4) Avancé : prise en charge de l'analyse syntaxique de documents multiples

Si l'IA génère Documents multiples L'extension est nécessaire pour la ArtifactParserpour qu'il prenne en charge plus d'un artifact fournit également Fonction de commutation de fichiers .

interface MultiArtifact {
files: Artifact[];
}

Front-end disponible Liste des documents afin que l'utilisateur puisse visualiser les différents fichiers de code.

5) Scénarios d'application des artefacts

✅ AI Code Assistant

Obtenir du code généré par l'IA Modifiable, prévisible, exécutable afin d'améliorer l'efficacité du développement.

✅ Plate-forme de développement à code bas

Rendre les composants de l'interface utilisateur générés par l'IA immédiatement visualisables et ajustables.

✅ Conception de sites web assistée par l'IA

Générer et rendre le code HTML/CSS/JS directement pour améliorer l'efficacité du développement web.

6. résumé

Mode interactif de l'artefact Le cœur du problème réside dans :

L'IA génère des blocs de code structurés (étiqueté à l'aide de DSL).
Code d'analyse frontale (extraction du code et des métadonnées à l'aide d'expressions régulières).
Stockées sous forme de données structurées (Distinction entre texte et code).
Présentation et édition dynamiques (Le support de l'éditeur de code est fourni).
Support de prévisualisation (exécution de composants HTML, SVG ou React).

Grâce à ce mode d'interaction, leLe code généré par l'IA devient plus intuitif et plus facile à utiliser, ce qui améliore considérablement l'expérience des développeurs. 🚀.