[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_169":170,"_171":172},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"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",6,"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.tsx","latestPath","fileId","db055e5a-1209-43a7-acd3-729cd7441782","name","fileType","http","content","import { Hono } from \"npm:hono@4.4.12\";\nimport opentype from \"npm:opentype.js\";\n\n// --- GLOBAL FONT CACHE ---\nlet cachedFont: opentype.Font | null = null;\nconst FONT_URL = \"https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp5F8_zV3A.ttf\"; // Inter Bold font\n\nasync function loadFontOnce(): Promise {\n if (cachedFont) {\n return cachedFont;\n }\n console.log(\"Loading font from CDN...\");\n cachedFont = await opentype.load(FONT_URL);\n console.log(\"Font loaded and cached.\");\n return cachedFont;\n}\n\n// --- TYPE DEFINITIONS ---\ninterface GeneratePathsOptions {\n text: string;\n fontSize?: number;\n containerWidth?: number; // Used for horizontal centering\n containerHeight?: number; // Used for vertical centering (adjusts baseline)\n}\n\n// --- SERVER-SIDE PATH GENERATION ---\nasync function getSvgPathsForCharacters(\n options: GeneratePathsOptions,\n): Promise<{ paths: string[]; originalWidth: number }> {\n const { text, fontSize = 70, containerWidth = 450, containerHeight = 100 } = options;\n const font = await loadFontOnce();\n const paths: string[] = [];\n\n // Calculate initial X to center the word\n const textMetrics = font.measureText(text, fontSize);\n const textWidth = textMetrics.width;\n const initialX = (containerWidth - textWidth) / 2;\n\n // Calculate initial Y (baseline) to vertically center the text\n // This formula places the baseline so the text's overall vertical extent is centered.\n const scaledAscender = (font.ascender / font.unitsPerEm) * fontSize;\n const scaledDescender = (font.descender / font.unitsPerEm) * fontSize;\n const initialY = (containerHeight + scaledAscender + scaledDescender) / 2;\n\n let currentX = initialX;\n\n for (let i = 0; i < text.length; i++) {\n const char = text[i];\n const glyph = font.charToGlyph(char);\n\n if (!glyph) {\n console.warn(`Glyph not found for character: ${char}`);\n // Provide a small space if a glyph is missing to avoid overlaps\n paths.push(\"\");\n currentX += fontSize * 0.5;\n continue;\n }\n\n const path = glyph.getPath(currentX, initialY, fontSize);\n paths.push(path.toSVG());\n\n const advanceWidth = glyph.advanceWidth || 0;\n currentX += (advanceWidth / font.unitsPerEm) * fontSize;\n\n // Apply kerning if available between this character and the next\n if (i < text.length - 1) {\n const nextChar = text[i + 1];\n const nextGlyph = font.charToGlyph(nextChar);\n if (nextGlyph) {\n const kerning = font.getKerningValue(glyph, nextGlyph);\n currentX += (kerning / font.unitsPerEm) * fontSize;\n }\n }\n }\n\n return { paths: paths, originalWidth: textWidth };\n}\n\n// --- HTML & FRONTEND GENERATION ---\nfunction generateHtml(sourceUrl: string) {\n return `\n\n\n \n \n SVG Font Morphing with Snap.svg\n \n\n\n\n

Dynamic SVG Morphing

\n \n \n

Morphing \"love\" to \"code\" using live font glyphs!

\n\n \n\n \n\n`;\n}\n\n// --- HONO APP FOR ROUTING ---\nconst app = new Hono();\n\napp.post(\"/getSvgPaths\", async (c) => {\n try {\n const { word1, word2, fontSize, containerWidth, containerHeight } = await c.req.json();\n\n // Validate the incoming request data\n if (typeof word1 !== \"string\" || typeof word2 !== \"string\") {\n return c.json({ error: \"Invalid input: 'word1' and 'word2' must be strings.\" }, 400);\n }\n if (word1.length !== word2.length) {\n return c.json({ error: \"Input words must have the same number of characters for morphing.\" }, 400);\n }\n\n // Generate paths for both words\n const lovePathsData = await getSvgPathsForCharacters({\n text: word1,\n fontSize,\n containerWidth,\n containerHeight,\n });\n const codePathsData = await getSvgPathsForCharacters({\n text: word2,\n fontSize,\n containerWidth,\n containerHeight,\n });\n\n // Return the generated paths to the client\n return c.json({\n lovePaths: lovePathsData.paths,\n codePaths: codePathsData.paths,\n loveWidth: lovePathsData.originalWidth, // Useful if the client needs to adjust SVG viewBox\n codeWidth: codePathsData.originalWidth,\n });\n } catch (error: any) {\n console.error(\"Error generating SVG paths:\", error);\n return c.json({ error: error.message || \"An unknown error occurred while generating SVG paths.\" }, 500);\n }\n});\n\n// Serve the HTML for GET requests to the root path\napp.get(\"/\", (c) => {\n const sourceUrl = `https://${c.req.url.hostname}${c.req.url.pathname}`;\n return c.html(generateHtml(sourceUrl));\n});\n\n// Export the Hono app's fetch handler for Val Town\nexport default app.fetch;","// @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 should be optimized for smooth morphing animations and should be simple.\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.\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 const sourceUrl = `${c.req.url.split('?')[0].replace(/\\/$/, '')}/`; // Ensure trailing slash for relative paths\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 throw new Error(\"AI returned invalid or missing path data.\");\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;","createdAt",["D",1751789547696],"branchVersion","branchId","b5f64372-5a2e-11f0-8be0-f69ea79377d9","id","b5f38bb4-5a2e-11f0-8be0-f69ea79377d9","typo2",["D",1751781711589],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","63f04ac0-562b-11f0-a849-2f0fd58d5bdc","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0abcaa5c-2531-4e34-967b-6f68bd9904a8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":45,"_97":98},"isOwned",8,"main","projectId","forkedBranchId","302918ac-591e-11f0-8592-f69ea79377d9","forkedBranchVersion",79,"forkedProjectPrivacy","forkedProjectId","30286786-591e-11f0-8592-f69ea79377d9","forkedProjectOrgId","337daaab-8c3d-4b0e-843a-d7fe5ed4748b","projectName","userHandle","real","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ6Rng5NEh2b3dPMmVwbThwVm1keXA3aTk5bCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":165,"_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":166,"_79":167,"_81":168,"_83":25},"tree",[160],"files",[160],"counts",{"_149":61,"_150":151,"_152":151,"_153":154,"_155":156},"contents",[141],"upstreamProject",{"_43":93,"_32":138,"_52":-5,"_53":-5,"_49":50,"_77":139},"upstreamBranch",{"_43":88,"_38":131,"_132":133,"_32":85,"_86":93,"_13":134,"_87":-5,"_89":-5,"_135":136,"_47":-5,"_83":25,"_49":50,"_97":137,"_62":95,"_96":138},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1751664664020],"updatedAt",["D",1751864597999],85,"lockfileKey","1764723769971-esm.town_v_join_typo@85-main","join","typo",{"_99":137,"_106":140},"https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4RElTYm91QXRtUWhBeEdMM1RYYUVmMVVwYSJ9",{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":145,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_27":148},"f4a0d0a8-5a40-11f0-8c5a-f69ea79377d9","parentId","latest",["D",1751789547696],5,"label",[28],"pulls","branches",1,"forks","envVars",{"_157":61,"_159":61},"connections",{"_157":61,"_158":61},"count","unfilledCount","emptyCount",{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":161,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_162":163,"_27":164},["D",1751789547696],"children",[],[28],["D",1751781711589],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":45,"_97":98},"ctx",{"_77":-5,"_128":202,"_203":204,"_205":206,"_207":25,"_208":25,"_209":25,"_210":57,"_211":-5,"_212":-7,"_213":-7,"_214":61,"_215":25,"_216":25,"_217":-5,"_218":25,"_219":25,"_220":25,"_221":-5},"ENV",{"_173":174,"_175":176,"_177":85,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201},"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"]

Diff · v6