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);