AI SVG Architect

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":57,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","ad096624-a720-11f0-9966-0224a6c84d84","name","fileType","http","content","// Learn more: https://docs.val.town/vals/http/\nexport default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}","// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\nimport { Hono } from \"npm:hono@4.4.12\";\nimport { cors } from \"npm:hono@4.4.12/cors\";\n\n// --- TYPE DEFINITIONS ---\n\ninterface GenerationRequestBody {\n description: string;\n}\n\ninterface SanitizationResult {\n isValid: boolean;\n sanitizedSvg: string | null;\n reason: string;\n}\n\n// --- AI BEHAVIORAL GUIDELINES ---\n\nconst GENERATION_STYLE_GUIDE =\n \"As an expert SVG architect, you must adopt the persona of a disciplined graphic designer and programmer. Your output must be a single, complete, and valid SVG markup string. Employ a clean, minimalist aesthetic with a harmonious color palette unless otherwise specified. Your code should be well-structured and efficient. The objective is to produce a vector graphic that is perceived as professionally designed and programmatically sound, not as an arbitrary or purely literal interpretation.\";\n\nconst SVG_GENERATOR_PROMPT = `\nYou are an expert system that translates natural language descriptions into valid, secure, and self-contained SVG markup.\n\nYour primary function is to create a vector graphic based on the user's request.\n\nYou MUST adhere to the following strict rules:\n1. Your entire response must be ONLY the raw SVG markup string. Do not include any conversational text, explanations, or markdown code fences (like \\`\\`\\`svg).\n2. The SVG must be self-contained. Do not use external resources (images, fonts, scripts).\n3. The SVG must include a \\`viewBox=\"0 0 100 100\"\\` attribute on the root \\`\n \n \n AI SVG Architect\n \n \n \n\n\n\n

\n \n

Input Description

\n \n

Generated Output

\n Your generated SVG will appear here.\n

\n\n\n\n`;\n}\n\n// --- BACKEND ROUTING & LOGIC ---\n\nconst app = new Hono();\n\napp.use(\"/api/*\", cors());\n\napp.post(\"/api/generate\", async (c) => {\n try {\n const body = await c.req.json();\n const description = body.description;\n\n if (\n !description || typeof description !== \"string\" ||\n description.trim().length === 0\n ) {\n return c.json({\n error: \"A valid 'description' is required in the request body.\",\n }, 400);\n }\n\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: SVG_GENERATOR_PROMPT },\n { role: \"user\", content: `Description: \"${description}\"` },\n ],\n temperature: 0.5,\n });\n\n const rawSvg = completion.choices[0].message.content;\n if (!rawSvg) {\n return c.json({ error: \"The AI failed to generate a response.\" }, 500);\n }\n\n const { isValid, sanitizedSvg, reason } = sanitizeSvg(rawSvg);\n if (!isValid) {\n console.error(\"AI Response Failed Validation:\", reason);\n return c.json({ error: `AI response failed validation: ${reason}` }, 500);\n }\n\n return new Response(sanitizedSvg, {\n headers: { \"Content-Type\": \"image/svg+xml\" },\n });\n } catch (error) {\n console.error(\"Server Error:\", error);\n return c.json({ error: \"An internal server error occurred.\" }, 500);\n }\n});\n\napp.get(\"*\", (c) => {\n const url = new URL(c.req.url);\n // Ensure the base URL passed to the client always ends with a slash\n const sourceUrl = `https://${url.hostname}${\n url.pathname.endsWith(\"/\") ? url.pathname : url.pathname + \"/\"\n }`;\n return c.html(generateHtml(sourceUrl));\n});\n\nexport default app.fetch;","createdAt",["D",1760241936800],"branchVersion","branchId","ad0712e8-a720-11f0-9966-0224a6c84d84","id","ad06c720-a720-11f0-9966-0224a6c84d84","svg",["D",1760241923214],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0199b749-1e1c-7399-b093-a7ba99382572","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0199b749-1e1c-7399-b093-a97ac9fff69e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":14,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","volt","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzZm1qMllGY2JhQmhhWFYwVXVvQ05aT2tJciJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":148,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":149,"_79":150,"_81":151,"_83":25},"tree",[143],"files",[143],"counts",{"_132":61,"_133":134,"_135":61,"_136":137,"_138":139},"contents",[124],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":125,"_32":28,"_30":31,"_126":-5,"_41":42,"_40":14,"_127":57,"_38":128,"_13":129,"_33":34,"_35":37,"_24":25,"_130":-5,"_27":131},"b520c08c-a720-11f0-b269-0224a6c84d84","parentId","latest",["D",1760241936800],3,"label",[28],"pulls","branches",1,"forks","envVars",{"_140":61,"_142":61},"connections",{"_140":61,"_141":61},"count","unfilledCount","emptyCount",{"_43":125,"_32":28,"_30":31,"_126":-5,"_41":42,"_40":14,"_127":57,"_38":144,"_13":129,"_33":34,"_35":37,"_24":25,"_130":-5,"_145":146,"_27":147},["D",1760241936800],"children",[],[28],["D",1760241923214],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":14,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_77":-5,"_121":185,"_186":187,"_188":189,"_190":25,"_191":25,"_192":25,"_193":57,"_194":-5,"_195":-7,"_196":-7,"_197":61,"_198":25,"_199":25,"_200":-5,"_201":25,"_202":25,"_203":25,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":84,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v4