아티팩트 상호작용 모드란?

AI 기술 자료게시됨 6 개월 전 AI 공유 서클
8.1K 00

AI 지원 프로그래밍의 시대에는 AI가 단순한 정적 텍스트가 아닌 다음과 같은 코드를 생성할 수 있기를 바랍니다. 구문 분석, 편집, 미리보기, 실행까지 The. 이러한 수요로 인해 새로운 상호 작용 방식인 아티팩트 .. 이 게시물은 이론적 개념 (시간)까지 실용적인 구현 심층 분석 아티팩트의 작동 원리, 핵심 기술 및 적용 시나리오 .

1. 아티팩트란 무엇인가요?

아티팩트는 특정 기술 용어가 아니라 AI 코드 상호 작용 이에 대한 가장 초기의 알려진 예는 클로드(인공 지능) 웹 버전의 웹사이트에 표시됩니다. 핵심 목표는 다음과 같습니다. AI로 생성된 코드를 더 쉽게 구문 분석, 편집 및 미리보기 .

什么是 Artifact 交互模式

기존의 AI 코드 생성 모델에서는 AI가 코드 텍스트만 반환하며, 이를 실행하려면 사용자가 직접 복사하여 편집기에 붙여넣어야 합니다. 이 접근 방식에는 다음과 같은 문제점이 있습니다:

  • 구조화된 정보의 부족 AI가 생성한 코드는 일반 텍스트일 뿐이며 파일 이름, 파일 유형과 같은 주요 정보를 구분할 수 없습니다.
  • 제한된 편집 경험 사용자가 AI 대화 인터페이스에서 직접 코드를 변경할 수 없으며 추가 도구를 사용해야 합니다.
  • 즉시 미리보기 기능 부족 HTML/CSS/JS 코드의 경우 실행 효과를 실시간으로 확인할 수 없어 개발 효율에 영향을 미칩니다.

아티팩트 인터랙티브 모드 통과(청구서 또는 검사 등) 구조화된 데이터, 구문 분석 및 동적 프런트엔드 프레젠테이션 이러한 문제를 해결하면 AI가 생성한 코드를 사용할 수 있습니다:

  1. 구조화된 스토리지 (파일 이름, 파일 유형 등의 정보를 포함합니다).
  2. 동적으로 구문 분석된 (코드 블록 추출 및 일반 텍스트 구분).
  3. 코드 편집기에서 표시 (즉시 수정 지원).
  4. 미리보기 지원 (예: HTML/SVG/React 컴포넌트 등).

2. 아티팩트 작동 방식

2.1 상호 작용 프로세스

완료 아티팩트 상호 작용 5가지 주요 단계로 구성되어 있습니다:

  1. AI가 구조화된 코드 블록 생성
    • 구문 분석을 위해 코드를 특정 태그로 감싸야 합니다.
  2. AI가 반환하는 결과 구문 분석
    • 텍스트 및 코드 블록을 인식하고 파일 이름, 유형 및 코드 내용을 추출합니다.
  3. 데이터 구조 저장
    • 구문 분석된 콘텐츠를 적절한 데이터 구조에 저장하여 일반 텍스트와 코드를 구분합니다.
  4. 프런트 엔드 동적 디스플레이
    • UI 인터페이스에 코드를 렌더링하고 편집 기능을 제공합니다.
  5. 코드 미리보기
    • 코드가 HTML/CSS/JS 또는 React 컴포넌트를 직접 실행하고 미리 볼 수 있습니다.

3. 아티팩트의 핵심 구현

3.1 AI 생성 코드 형식

프런트엔드에서 AI가 생성한 코드를 올바르게 구문 분석하려면 다음과 같이 일련의 표준 양식 이 작업을 수행하는 일반적인 방법은 DSL(도메인별 언어) 표시. 예시:

<<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 아티팩트 코드 블록 구문 분석하기

프론트엔드에서는 다음을 개발해야 합니다. 아티팩트 파서 을 클릭하여 코드 블록을 추출합니다. 코드 블록은 다음을 사용하여 추출할 수 있습니다. 정규식 (수학.) 일치시킬 <<artifact-start>> 노래로 응답 <<artifact-end>> 그 사이의 콘텐츠입니다:

구문 분석 논리

  1. 코드 블록 일치 
    const artifactRegex = /<<artifact-start>>(.*?)<<artifact-end>>/gs;
const matches = responseText.match(artifactRegex);
  2. JSON 정보 추출 
    const jsonRegex = /\[(.*?)\]/s;
const jsonMatch = codeBlock.match(jsonRegex);
const artifactInfo = JSON.parse(jsonMatch[1]);
  3. 구조화된 개체 저장 
    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 프런트 엔드 동적 디스플레이

프런트엔드를 사용할 수 있습니다. 리액트 + 코드미러 를 사용하여 편집 가능한 코드 창을 제공할 수 있습니다:

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

(공동) 실패(학생) artifact 구문 분석이 완료되면 코드 블록은 자동으로 다음과 같이 채워집니다. 코드 편집기 를 클릭하여 사용자 편집을 지원합니다.

3.5 코드 미리보기

HTML 코드의 경우 다음을 사용할 수 있습니다. iframe 바로 미리 보기:

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

다음과 같은 경우 React 컴포넌트 다음은 팀에서 수행해야 하는 작업 유형의 예입니다. CDN, React 도입 첫 번째 단계는 미리 보기를 위한 동적 HTML을 작성하는 것입니다.

4. 고급: 다중 문서 구문 분석 지원

AI가 다음을 생성하는 경우 여러 문서 확장 프로그램은 ArtifactParser를 사용하여 여러 artifact 또한 다음을 제공합니다. 파일 전환 기능 .

interface MultiArtifact {
files: Artifact[];
}

프런트엔드 사용 가능 문서 목록 를 추가하여 사용자가 다른 코드 파일을 볼 수 있도록 합니다.

아티팩트 적용 시나리오 5.

✅ AI 코드 어시스턴트

  • AI 생성 코드 가져오기 편집 가능, 미리보기 가능, 실행 가능 를 사용하여 개발 효율성을 향상시킬 수 있습니다.

✅ 로우코드 개발 플랫폼

  • AI가 생성한 UI 컴포넌트를 즉시 시각화하고 조정할 수 있습니다.

✅ AI 지원 웹 디자인

  • HTML/CSS/JS 코드를 직접 생성하고 렌더링하여 웹 개발 효율성을 향상하세요.

6. 요약

아티팩트 인터랙티브 모드 문제의 핵심은 바로 여기에 있습니다:

  1. AI가 구조화된 코드 블록 생성 (DSL을 사용하여 레이블 지정).
  2. 프런트엔드 구문 분석 코드 (정규식을 사용하여 코드 및 메타데이터 추출).
  3. 구조화된 데이터로 저장 (텍스트와 코드를 구분합니다).
  4. 동적 프레젠테이션 및 편집 (코드 편집기 지원 제공).
  5. 미리보기 지원 (HTML, SVG 또는 React 컴포넌트 실행).

이러한 상호 작용 방식을 통해AI로 생성된 코드가 더욱 직관적이고 사용하기 쉬워져 개발자 경험이 크게 개선됩니다. 🚀.

© 저작권 정책
기사 저작권 AI 공유 서클 모두 무단 복제하지 마세요.

관련 문서

댓글 없음

댓글에 참여하려면 로그인해야 합니다!
지금 로그인
없음
댓글 없음...

선택한 AI 도구

최신 컬렉션

최신 기사