JIT Scroll-Morphing SVG Text

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_172":173,"_174":175},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_129":-5,"_20":130,"_22":131,"_132":133,"_134":135,"_25":136,"_24":-5,"_137":138,"_139":140,"_141":50,"_142":143,"_144":70,"_145":-5,"_146":-5,"_147":148},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":28,"_29":-5,"_30":31,"_32":33,"_34":-5},"handle","real","name","typo2","branchName","main","version","path","","project",{"_35":84,"_13":14,"_37":85,"_48":-5,"_86":50,"_51":52,"_87":52,"_88":-5,"_89":-5,"_90":91,"_92":63,"_93":70,"_94":70,"_95":-5,"_96":97,"_55":98,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":104,"_105":104,"_106":107,"_108":107,"_109":107,"_110":104,"_111":104,"_112":113,"_114":115,"_116":117,"_49":50},"tree",[79],"file","contents",[59],"upstream",{"_35":36,"_37":38,"_39":40,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"pull","ahead",7,"behind",6,"envVars","id","302918ac-591e-11f0-8592-f69ea79377d9","createdAt",["D",1751664664020],"updatedAt",["D",1751864597999],"projectId","30286786-591e-11f0-8592-f69ea79377d9",85,"forkedBranchId","forkedBranchVersion","lockfileKey","1764723769971-esm.town_v_join_typo@85-main","deletedAt","isOwned",false,"privacy","public","userHandle","join","orgId","337daaab-8c3d-4b0e-843a-d7fe5ed4748b","projectName","typo",{"_35":60,"_13":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_37":71,"_17":31,"_72":73,"_74":75,"_76":50,"_77":-5,"_18":78},"5a4c9072-5a41-11f0-b902-f69ea79377d9","main.tsx","fileId","db055e5a-1209-43a7-acd3-729cd7441782","parentId","branchId","b5f64372-5a2e-11f0-8be0-f69ea79377d9","branchVersion",8,"latest",true,["D",1751789718275],"fileType","http","content","// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\nimport { Hono } from \"npm:hono@4.4.12\";\n\n// --- AI BEHAVIORAL GUIDELINES ---\nconst GENERATION_STYLE_GUIDE = `\nAs the SVG Path Generator AI, you are an expert in converting text to precise SVG path data.\nYour responses must STRICTLY adhere to the specified JSON format.\nYou will receive a text string and a desired font style.\nGenerate a single SVG path data string that represents the text.\nThe path data MUST contain approximately 200 segments (commands like M, L, C, Z) to ensure smooth morphing. If a letter naturally has fewer segments, add invisible or tiny segments to reach the count.\nEnsure the text is centered within a 500x300 viewBox.\nDO NOT include any conversational filler. Respond ONLY with the JSON object.\n`;\n\nconst SVG_PATH_PROMPT = (text: string, fontStyle: string) => `\nGenerate the SVG path data for the text \"${text}\" using a ${fontStyle} style.\nThe text should be centered horizontally and vertically within a 500x300 SVG viewBox.\nThe resulting path data should be a single string suitable for the 'd' attribute of an element.\nIMPORTANT: The path should have approximately 200 segments/commands (M, L, C, Z) to ensure consistent morphing.\nRespond STRICTLY with a single, minified JSON object: { \"pathData\": \"M...Z\" }.\n`;\n\n// --- HTML & FRONTEND ---\nfunction generateHtml(sourceUrl: string) {\n // IMPORTANT: This now points to the same val, but to the /paths endpoint\n const JIT_CONVERTER_URL = `${sourceUrl}paths`;\n\n return `\n\n\n \n \n JIT Scroll-Morphing SVG Text\n \n \n\n\n

\n \n \n\n \n

\n\n \n\n`;\n}\n\n// Initialize Hono app\nconst app = new Hono();\n\n// Route for serving the HTML page\napp.get(\"/\", (c) => {\n // Ensure sourceUrl always ends with a '/' for correct relative path resolution\n const sourceUrl = `${c.req.url.split(\"?\")[0].replace(/\\/$/, \"\")}/`;\n return c.html(generateHtml(sourceUrl));\n});\n\n// Route for generating SVG path data via AI\napp.get(\"/paths\", async (c) => {\n const text = c.req.query(\"text\");\n const fontStyle = c.req.query(\"fontStyle\");\n\n if (!text || !fontStyle) {\n return c.json({ error: \"Missing 'text' or 'fontStyle' query parameter.\" }, 400);\n }\n\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\", // Using gpt-4o for better spatial reasoning and precise output\n messages: [\n { role: \"system\", content: GENERATION_STYLE_GUIDE },\n { role: \"user\", content: SVG_PATH_PROMPT(text, fontStyle) },\n ],\n response_format: { type: \"json_object\" },\n temperature: 0.2, // Keep temperature low for deterministic output\n });\n\n const content = completion.choices[0].message.content;\n const parsedContent = JSON.parse(content || \"{}\");\n\n if (!parsedContent || typeof parsedContent.pathData !== \"string\") {\n // Demand Justification: If AI fails to return valid structure, log/expose\n const reason = parsedContent.reason || \"AI did not return expected 'pathData' string.\";\n throw new Error(`Invalid AI response: ${reason}. Raw: ${content}`);\n }\n\n return c.json({ pathData: parsedContent.pathData });\n } catch (error: any) {\n console.error(\"AI Path Generation Error:\", error);\n return c.json({ error: error.message || \"Failed to generate SVG path data.\" }, 500);\n }\n});\n\n// Export the Hono app's fetch handler\nexport default app.fetch;","deleted","label",[61],{"_35":60,"_13":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_37":80,"_17":31,"_72":73,"_74":75,"_76":50,"_77":-5,"_81":82,"_18":83},["D",1751789718275],"children",[],[61],"b5f38bb4-5a2e-11f0-8be0-f69ea79377d9",["D",1751781711589],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","63f04ac0-562b-11f0-a849-2f0fd58d5bdc","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"0abcaa5c-2531-4e34-967b-6f68bd9904a8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_128":124},"org",{"_11":12,"_122":-5,"_123":124,"_90":91,"_125":126,"_127":50},"branch",{"_17":68,"_13":16,"_35":66,"_41":84,"_44":36,"_45":118,"_119":52,"_120":42,"_121":56,"_57":14,"_53":12},79,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ6Rng5NEh2b3dPMmVwbThwVm1keXA3aTk5bCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":84,"_13":14,"_37":168,"_48":-5,"_86":50,"_51":52,"_87":52,"_88":-5,"_89":-5,"_90":91,"_92":63,"_93":70,"_94":70,"_95":-5,"_96":97,"_55":98,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":104,"_105":104,"_106":107,"_108":107,"_109":107,"_110":104,"_111":104,"_112":169,"_114":170,"_116":171,"_49":50},[165],"files",[165],"counts",{"_155":97,"_156":157,"_158":157,"_34":159,"_160":161},[153],"upstreamProject",{"_35":42,"_13":58,"_88":-5,"_89":-5,"_51":52,"_112":151},"upstreamBranch",{"_35":36,"_37":149,"_39":150,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1751664664020],["D",1751864597999],{"_11":54,"_128":152},"https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4RElTYm91QXRtUWhBeEdMM1RYYUVmMVVwYSJ9",{"_35":60,"_13":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_37":71,"_17":31,"_72":73,"_74":75,"_76":50,"_77":-5,"_18":154},[61],"pulls","branches",1,"forks",{"_162":97,"_164":97},"connections",{"_162":97,"_163":97},"count","unfilledCount","emptyCount",{"_35":60,"_13":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_69":70,"_37":80,"_17":31,"_72":73,"_74":75,"_76":50,"_77":-5,"_81":166,"_18":167},[],[61],["D",1751781711589],{"_11":12,"_128":124},{"_11":12,"_122":-5,"_123":124,"_90":91,"_125":126,"_127":50},{"_17":68,"_13":16,"_35":66,"_41":84,"_44":36,"_45":118,"_119":52,"_120":42,"_121":56,"_57":14,"_53":12},"ctx",{"_112":-5,"_146":205,"_206":207,"_208":209,"_210":50,"_211":50,"_212":50,"_213":70,"_214":-5,"_215":-7,"_216":-7,"_217":97,"_218":50,"_219":50,"_220":-5,"_221":50,"_222":50,"_223":50,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":16,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Code