使用 Lyra Gen 的生成式 UI
模型的回答會顯示為真實而且已驗證的 Lyra 控制項。
Lyra Gen 透過經審核的目錄，把模型的結構化回答轉換為可存取的 Lyra 元件。生成的內容只可指定目錄中的角色，絕不可指定任意標籤、script 或操作；模型要求、資料、操作和儲存都由你的應用程式掌控。
範例
選取經審核的目錄子集，然後在顯示前驗證生成的檢視。
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);