UI generatif nganggo Lyra Gen
Wangsulan model anu dirender jadi kontrol Lyra nyata anu geus divalidasi.
Lyra Gen ngarobah wangsulan terstruktur model jadi komponén Lyra anu aksésibel ngaliwatan katalog anu geus ditinjau. Eusi anu dihasilkeun ngan bisa nyebut peran katalog, teu bisa tag, skrip atawa aksi sakahayang; aplikasi anjeun nyekel pamundut model, data, aksi jeung panyimpenan.
Conto
Pilih subset katalog anu geus ditinjau, tuluy validasi tampilan anu dihasilkeun saacan dirender.
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);