Lyra Gen으로 만드는 생성형 UI
모델 응답을 검증된 실제 Lyra 컨트롤로 렌더링합니다.
Lyra Gen은 모델의 구조화된 응답을 검토된 카탈로그를 통해 접근성을 갖춘 Lyra 컴포넌트로 바꿉니다. 생성된 콘텐츠는 카탈로그의 역할만 지정할 수 있으며, 임의의 태그, 스크립트, 동작은 지정할 수 없습니다. 모델 요청, 데이터, 동작, 저장소는 애플리케이션이 그대로 관리합니다.
예제
검토된 카탈로그의 일부를 선택한 다음, 렌더링하기 전에 생성된 뷰를 검증하세요.
import '@aceshooting/lyra-ui/theme.css';
import { initialCatalog, subsetCatalog } from '@aceshooting/lyra-gen/catalog.js';
import { validateView } from '@aceshooting/lyra-gen/runtime.js';
import { LyraGenViewElement } from '@aceshooting/lyra-gen/gen-view.js';
const selected = subsetCatalog(initialCatalog, ['stack', 'heading', 'text']);
if (!selected.ok) throw new Error('The requested catalog is unavailable.');
const catalog = selected.value;
const result = validateView({
version: '1', catalog: { id: catalog.id, version: catalog.version },
surfaceId: 'answer-1', revision: 0,
root: { id: 'summary', type: 'stack', children: [
{ id: 'title', type: 'heading', text: 'Quarterly summary' },
{ id: 'detail', type: 'text', text: 'Revenue increased this quarter.' },
] },
}, catalog);
if (!result.ok) throw new Error('The generated view was rejected.');
const view = new LyraGenViewElement();
view.catalog = catalog;
view.document = result.value;
document.body.append(view);