UI Generatif dengan Lyra Gen
Jawapan model yang dipaparkan sebagai kawalan Lyra sebenar yang telah disahkan.
Lyra Gen menukar jawapan berstruktur sesebuah model kepada komponen Lyra yang boleh diakses melalui katalog yang telah disemak. Kandungan yang dijana hanya boleh menamakan peranan katalog, tidak sekali-kali tag, skrip atau tindakan sewenang-wenangnya; aplikasi anda menyimpan permintaan model, data, tindakan dan storan.
Contoh
Pilih subset katalog yang telah disemak, kemudian sahkan paparan yang dijana sebelum memaparkannya.
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);