AI-Powered Configuration Sandbox

\n Eleven\n

Configuration Sandbox

AI is generating the control panel...

\n\n \n\n\n\n`;\n}\n\n// --- BACKEND LOGIC: HONO ROUTER & OPENAI INTEGRATION ---\n\nconst app = new Hono();\n\n// Endpoint to dynamically generate the UI for the sandbox\napp.post(\"/generate-config-ui\", async (c) => {\n try {\n const openai = new OpenAI();\n\n // The kernel matrices are too large to be useful in the prompt, so they are omitted.\n const prompt = SANDBOX_GENERATOR_PROMPT\n .replace(\"\", CSS_SOURCE_CODE)\n .replace(\"\", SVG_SOURCE_CODE);\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: prompt },\n { role: \"user\", content: \"Generate the configuration sandbox UI.\" },\n ],\n response_format: { type: \"json_object\" },\n });\n\n const content = completion.choices[0].message.content;\n\n // Robustly extract and parse the JSON from the AI's response\n let parsedContent;\n try {\n parsedContent = JSON.parse(content);\n if (!parsedContent.html || !parsedContent.javascript) {\n throw new Error(\"AI response is missing 'html' or 'javascript' keys.\");\n }\n } catch (parseError) {\n console.error(\"AI response parsing failed:\", parseError, \"Raw content:\", content);\n return c.json({ error: \"AI returned malformed data.\", reason: parseError.message }, 500);\n }\n\n return c.json(parsedContent);\n } catch (error) {\n console.error(\"AI interaction failed:\", error);\n return c.json({ error: \"Failed to communicate with the AI service.\", reason: error.message }, 500);\n }\n});\n\n// Main endpoint to serve the HTML page\napp.get(\"*\", (c) => {\n // Ensure the base URL passed to the client ends with a '/'\n // to prevent incorrect resolution of relative fetch requests.\n const baseUrl = c.req.url.endsWith(\"/\") ? c.req.url : c.req.url + \"/\";\n const sourceUrl = new URL(baseUrl).origin + new URL(baseUrl).pathname;\n return c.html(generateHtml(sourceUrl));\n});\n\nexport default app.fetch;","deleted","label","children",[],[151],"files",[149],"counts",{"_174":29,"_175":176,"_177":29,"_178":29},"pulls","branches",1,"forks","envVars","contents",[181],{"_103":150,"_96":151,"_152":153,"_154":-5,"_155":137,"_156":136,"_157":158,"_105":182,"_100":160,"_161":162,"_163":164,"_165":25,"_166":-5,"_99":183},["D",1752245963718],[151],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name._index",{"_94":95,"_96":97,"_98":-7,"_100":-7,"_101":191,"_179":196,"_199":-7,"_200":-5,"_201":-5,"_170":202,"_206":207},{"_103":104,"_96":97,"_105":192,"_107":-5,"_108":25,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":-5,"_115":25,"_116":-5,"_117":29,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_19":193,"_131":194,"_134":195,"_146":25},["D",1752188373679],{"_94":95,"_129":130},{"_94":95,"_133":130},{"_100":136,"_96":40,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":97,"_145":95},[197],{"_103":150,"_96":151,"_152":153,"_154":-5,"_155":137,"_156":136,"_157":158,"_105":182,"_100":160,"_161":162,"_163":164,"_165":25,"_166":-5,"_99":198},[151],"readme","upstream","pull",[203],{"_103":150,"_96":151,"_152":153,"_154":-5,"_155":137,"_156":136,"_157":158,"_105":159,"_100":160,"_161":162,"_163":164,"_165":25,"_166":-5,"_167":204,"_99":205},[],[151],"previews",[203],"routes/_app","actionData","errors"]