\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","children",[],[99],"files",[153],"counts",{"_177":32,"_178":179,"_180":179,"_181":32},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_103":154,"_95":99,"_155":156,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":186,"_100":163,"_164":165,"_166":167,"_168":22,"_169":-5,"_98":187},["D",1751789718275],[99],"upstreamProject",{"_103":145,"_95":190,"_111":-5,"_112":-5,"_109":110,"_23":191},"typo",{"_93":192,"_129":193},"join","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4RElTYm91QXRtUWhBeEdMM1RYYUVmMVVwYSJ9","upstreamBranch",{"_103":140,"_105":196,"_197":198,"_95":43,"_138":145,"_100":199,"_139":-5,"_141":-5,"_200":201,"_107":-5,"_150":22,"_109":110,"_149":192,"_16":147,"_148":190},["D",1751664664020],"updatedAt",["D",1751864597999],85,"lockfileKey","1751864598456-esm.town_v_join_typo@85-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":208,"_184":213,"_216":217,"_253":254,"_264":-7,"_265":32,"_266":22},{"_103":104,"_95":96,"_105":209,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":210,"_131":211,"_134":212,"_150":22},["D",1751781711589],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},{"_103":154,"_95":99,"_155":156,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":214,"_100":163,"_164":165,"_166":167,"_168":22,"_169":-5,"_98":215},["D",1751789718275],[99],"history",[218,220,225,230,235,240,245,249],{"_103":154,"_158":137,"_155":156,"_95":99,"_166":167,"_164":165,"_100":163,"_157":-5,"_105":219,"_159":136,"_169":-5},["D",1751789718275],{"_103":221,"_158":137,"_155":156,"_95":99,"_166":222,"_164":165,"_100":223,"_157":-5,"_105":224,"_159":163,"_169":-5},"f4a799b0-5a40-11f0-b378-f69ea79377d9","// @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;",6,["D",1751789547740],{"_103":226,"_158":137,"_155":156,"_95":99,"_166":227,"_164":165,"_100":228,"_157":-5,"_105":229,"_159":223,"_169":-5},"f4a0d0a8-5a40-11f0-8c5a-f69ea79377d9","// @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;",5,["D",1751789547696],{"_103":231,"_158":137,"_155":156,"_95":99,"_166":232,"_164":165,"_100":233,"_157":-5,"_105":234,"_159":228,"_169":-5},"209686f4-5a31-11f0-8085-f69ea79377d9","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;",4,["D",1751782749491],{"_103":236,"_158":137,"_155":156,"_95":99,"_166":237,"_164":165,"_100":238,"_157":-5,"_105":239,"_159":233,"_169":-5},"2a74397a-5a2f-11f0-8085-f69ea79377d9","export default function(req: Request) {\n // This function generates the complete HTML page for the browser.\n function generateHtml() {\n return `\n\n\n \n \n SVG Font Morphing with Snap.svg\n \n\n\n\n

SVG Font Morphing

\n \n \n\n

\n\n \n\n \n\n`;\n }\n\n // Serve the generated HTML as the response\n return new Response(generateHtml(), {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}",3,["D",1751781907059],{"_103":241,"_158":137,"_155":156,"_95":99,"_166":242,"_164":165,"_100":243,"_157":-5,"_105":244,"_159":238,"_169":-5},"07a4bb36-5a2f-11f0-8a7b-f69ea79377d9","// --- VAL TOWN SERVER-SIDE LOGIC ---\nexport default async function(req: Request) {\n const url = new URL(req.url);\n const action = url.searchParams.get(\"action\");\n\n // Handle API request for AI-generated styles\n if (req.method === \"POST\" && action === \"suggestStyles\") {\n // ... AI logic from before\n }\n\n // For all other GET requests, serve the main HTML page\n const sourceUrl = `https://${url.hostname}${url.pathname}`;\n return new Response(generateHtml(sourceUrl), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\n// --- HTML, CSS, & CLIENT-SIDE JAVASCRIPT ---\nfunction generateHtml(sourceUrl: string) {\n // **CRITICAL:** Replace this placeholder with the raw URL to your own 'path-data.json' file.\n const PATH_DATA_URL =\n \"https://gist.githubusercontent.com/stevekrouse/1a3524b021966a0694e0f1889c1767e1/raw/d849a625e197d519448805f93946ac70366a68f0/path-data.json\";\n\n return `\n\n\n \n \n Generative 3D Morphing Text\n \n \n\n\n \n \n \n\n \n\n`;\n}",2,["D",1751781848657],{"_103":246,"_158":137,"_155":156,"_95":99,"_166":247,"_164":165,"_100":179,"_157":-5,"_105":248,"_159":243,"_169":-5},"c638a7de-5a2e-11f0-8cb3-f69ea79377d9","// --- HTML, CSS, & CLIENT-SIDE JAVASCRIPT ---\nfunction generateHtml(sourceUrl: string) {\n // **CRITICAL:** Replace this placeholder with the raw URL to your own 'path-data.json' file.\n const PATH_DATA_URL =\n \"https://gist.githubusercontent.com/stevekrouse/1a3524b021966a0694e0f1889c1767e1/raw/d849a625e197d519448805f93946ac70366a68f0/path-data.json\";\n\n return `\n\n\n \n \n Generative 3D Morphing Text\n \n \n\n\n \n \n \n\n \n\n`;\n}",["D",1751781738898],{"_103":250,"_158":137,"_155":156,"_95":99,"_166":251,"_164":165,"_100":32,"_157":-5,"_105":252,"_159":179,"_169":-5},"b5f8205c-5a2e-11f0-8be0-f69ea79377d9","// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\n\n// --- AI BEHAVIORAL GUIDELINES & PROMPT ---\n\nconst GENERATION_STYLE_GUIDE =\n \"As the AI design expert, you must adopt the persona of a sophisticated and meticulous creative technologist. Your vocabulary should be precise and professional. The objective is to produce output that is indistinguishable from that of a human expert in the field of digital design and typography.\";\n\nconst STYLE_GENERATOR_PROMPT = `\nYou are a master of SVG filters, a creative technologist specializing in generating complex, visually striking 3D text effects. Your persona is that of a meticulous, professional designer who uses precise and sophisticated language.\n\nThe user requires a sequence of five distinct visual styles to serve as keyframes for a fluid animation. Your task is to generate this set of 5 presets. The styles should be thematically related, as if progressing through a narrative (e.g., dawn to day to dusk, or metal heating to a molten state).\n\nYou MUST respond ONLY with a single, minified JSON object.\nThe root object must have a single key: \"styles\".\nThe value of \"styles\" must be an array of exactly 5 style objects.\n\nEach style object must have the following keys:\n- \"name\": A short, evocative name for the style (e.g., \"First Light\", \"Golden Hour\", \"Twilight\").\n- \"faceColor\": An array of three numbers [R, G, B], values 0 to 1.\n- \"extrudeColor1\": An array of three numbers [R, G, B], values 0 to 1.\n- \"extrudeColor2\": An array of three numbers [R, G, B], values 0 to 1.\n- \"shadowOpacity\": A number between 0.1 and 0.5.\n\nExample of a single style object within the array:\n{\n \"name\": \"Cool Dawn\",\n \"faceColor\": [0.8, 0.9, 0.95],\n \"extrudeColor1\": [0.5, 0.6, 0.7],\n \"extrudeColor2\": [0.2, 0.3, 0.4],\n \"shadowOpacity\": 0.3\n}\n\nGenerate a cohesive yet diverse palette of 5 styles. Adhere to the principles of high-quality design. Your response must be structured, clear, and ready for programmatic use without any conversational text or explanations.\n${GENERATION_STYLE_GUIDE}\n`;\n\n// --- HTML, CSS, & CLIENT-SIDE JAVASCRIPT ---\n\nfunction generateHtml(sourceUrl: string) {\n return `\n\n\n \n \n Generative 3D Scrolling Text\n \n\n\n

\n\n \n\n \n\n`;\n}\n\n// --- VAL TOWN SERVER-SIDE LOGIC ---\n\nexport default async function(req: Request) {\n const url = new URL(req.url);\n const action = url.searchParams.get(\"action\");\n\n if (req.method === \"POST\" && action === \"suggestStyles\") {\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{\n role: \"system\",\n content: STYLE_GENERATOR_PROMPT,\n }],\n response_format: { type: \"json_object\" },\n });\n\n const content = completion.choices[0].message.content;\n JSON.parse(content);\n return new Response(content, { headers: { \"Content-Type\": \"application/json\" } });\n } catch (error) {\n console.error(\"AI Style Generation Error:\", error);\n return new Response(\n JSON.stringify({\n error: \"The AI design assistant is currently unavailable.\",\n reason: error.message,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n const sourceUrl = `https://${url.hostname}${url.pathname}`;\n return new Response(generateHtml(sourceUrl), { headers: { \"Content-Type\": \"text/html\" } });\n}",["D",1751781711589],"versions",[255,257,258,259,260,261,262,263],{"_184":218,"_256":220},"previous",{"_184":220,"_256":225},{"_184":225,"_256":230},{"_184":230,"_256":235},{"_184":235,"_256":240},{"_184":240,"_256":245},{"_184":245,"_256":249},{"_184":249,"_256":-5},"versionNumber","page","hasNext","actionData","errors"]

History for main.tsx