|
| 1 | +import { OpenAI } from "openai"; |
| 2 | +import { createParser } from "../packages/lang-react/src/parser/parser.js"; |
| 3 | +import { writeFileSync, mkdirSync, readFileSync } from "fs"; |
| 4 | +import { join } from "path"; |
| 5 | +import { astToVercelJsonl } from "./vercel-jsonl-converter.js"; |
| 6 | +import { astToThesysC1Json } from "./thesys-c1-converter.js"; |
| 7 | + |
| 8 | +const systemPrompt = readFileSync(join(process.cwd(), "system-prompt.txt"), "utf-8"); |
| 9 | + |
| 10 | +// Load the combined JSON Schema produced by library.toJSONSchema(). |
| 11 | +// createParser reads component definitions from $defs so named props are |
| 12 | +// correctly mapped (instead of falling back to positional _args). |
| 13 | +const schemaStr = readFileSync(join(process.cwd(), "schema.json"), "utf-8"); |
| 14 | +const schema = JSON.parse(schemaStr); |
| 15 | +const parser = createParser(schema); |
| 16 | + |
| 17 | +// 1. Setup |
| 18 | +const openai = new OpenAI(); |
| 19 | +const MODEL = "gpt-5.2"; |
| 20 | + |
| 21 | +const PROMPTS = { |
| 22 | + "simple-table": "Create a simple table showing 5 employees with columns for Name, Department, Salary, and YoY change.", |
| 23 | + "chart-with-data": "Create a dashboard with a metric card showing Total Revenue, and a BarChart showing 6 months of revenue data.", |
| 24 | + "contact-form": "Create a contact form with Name, Email, Phone, Subject dropdown, and Message text area. Include Submit and Cancel buttons.", |
| 25 | + "dashboard": "Create a product analytics dashboard. It should have a Header, a BarChart for Monthly Active Users, a PieChart for User Acquisition, a Table for Top Features, and a LineChart for MRR and ARR.", |
| 26 | + "pricing-page": "Create a pricing page with 3 tiers: Basic, Pro, and Enterprise. Include a feature comparison table below the pricing cards.", |
| 27 | + "settings-panel": "Create a user settings panel with tabs for Profile, Security, and Notifications. The Profile tab should have a form to update name and avatar. The Security tab should have a toggle for 2FA.", |
| 28 | + "e-commerce-product": "Create a product detail page for a pair of sneakers. Include an ImageGallery, a title, price, size selector (Select), color options (RadioGroup), and an Add to Cart button." |
| 29 | +}; |
| 30 | + |
| 31 | +// 2. Generation Loop |
| 32 | +async function main() { |
| 33 | + mkdirSync("samples", { recursive: true }); |
| 34 | + const metrics: Record<string, any> = {}; |
| 35 | + |
| 36 | + for (const [name, userPrompt] of Object.entries(PROMPTS)) { |
| 37 | + console.log(`Generating ${name}...`); |
| 38 | + |
| 39 | + const startTime = Date.now(); |
| 40 | + let firstTokenTime = 0; |
| 41 | + let fullText = ""; |
| 42 | + |
| 43 | + const stream = await openai.chat.completions.create({ |
| 44 | + model: MODEL, |
| 45 | + temperature: 0, |
| 46 | + messages: [ |
| 47 | + { role: "system", content: systemPrompt }, |
| 48 | + { role: "user", content: userPrompt } |
| 49 | + ], |
| 50 | + stream: true, |
| 51 | + stream_options: { include_usage: true } |
| 52 | + }); |
| 53 | + |
| 54 | + let usage = null; |
| 55 | + |
| 56 | + for await (const chunk of stream) { |
| 57 | + const content = chunk.choices[0]?.delta?.content; |
| 58 | + if (content) { |
| 59 | + // Only record TTFT on the first chunk that actually contains content |
| 60 | + if (!firstTokenTime) firstTokenTime = Date.now(); |
| 61 | + fullText += content; |
| 62 | + } |
| 63 | + if (chunk.usage) { |
| 64 | + usage = chunk.usage; |
| 65 | + } |
| 66 | + } |
| 67 | + |
| 68 | + const endTime = Date.now(); |
| 69 | + const ttft = firstTokenTime - startTime; |
| 70 | + const totalDuration = endTime - startTime; |
| 71 | + const completionTokens = usage?.completion_tokens || 0; |
| 72 | + const tps = completionTokens / ((totalDuration - ttft) / 1000); |
| 73 | + |
| 74 | + metrics[name] = { |
| 75 | + ttft_ms: ttft, |
| 76 | + total_duration_ms: totalDuration, |
| 77 | + completion_tokens: completionTokens, |
| 78 | + tps: tps |
| 79 | + }; |
| 80 | + |
| 81 | + // Save OpenUI Lang |
| 82 | + writeFileSync(join("samples", `${name}.oui`), fullText); |
| 83 | + |
| 84 | + // Parse AST using createParser so named props are correctly mapped |
| 85 | + const ast = parser.parse(fullText).root; |
| 86 | + |
| 87 | + // Save Thesys C1 JSON (normalized component/props envelope) |
| 88 | + writeFileSync(join("samples", `${name}.c1.json`), astToThesysC1Json(ast)); |
| 89 | + |
| 90 | + // Save Vercel JSONL |
| 91 | + writeFileSync(join("samples", `${name}.vercel.jsonl`), astToVercelJsonl(ast)); |
| 92 | + |
| 93 | + console.log(` Done! ${completionTokens} tokens @ ${tps.toFixed(1)} tok/s`); |
| 94 | + } |
| 95 | + |
| 96 | + writeFileSync(join("samples", "metrics.json"), JSON.stringify(metrics, null, 2)); |
| 97 | + console.log("All samples generated and saved to ./samples/"); |
| 98 | +} |
| 99 | + |
| 100 | +main().catch(console.error); |
0 commit comments