UI generatif nganggo Lyra Gen

Wangsulan model katon minangka kontrol Lyra sing nyata lan wis divalidasi.

Lyra Gen ngowahi wangsulan terstruktur saka model dadi komponen Lyra sing bisa diakses liwat katalog sing wis ditinjau. Isi sing digawe mung bisa nyebut peran ing katalog, ora tau tag, skrip, utawa aksi sembarang; panyuwunan model, data, aksi, lan panyimpenan tetep ana ing aplikasimu.

Tuladha

Pilih subset katalog sing wis ditinjau, banjur validasi tampilan sing digawe sadurunge 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);

Jelajahi komponèn · Waca pandhuan (basa Inggris)