\n \n

${escapeHTML(c.prompt)}

\n \n

`;\n};\n\nconst renderParent = (parent: Awaited>) => {\n return `

\n Parent\n \n

${escapeHTML(parent.prompt)}

\n \n

`;\n};\n\nconst renderHTML = (\n { popular, svg }: Awaited>,\n) => {\n return `\n\n\n\n \n \n Infinite SVG Graph\n \n \n \n \n\n\n \n

\n \n

Infinite SVG Graph

\n Welcome to the Infinite SVG Graph.\n

\n Everything starts with a blue circle 🔵. \n
\n You cannot edit the SVG directly, you can only ask the AI to make edits to the SVG. \n Ask it to make whatever kind of SVG you'd like. The source and prompt are here.\n

\n Everything is connected. You can see the SVGs children listed below, and their parent, if they have one. \n

\n ${svg.svg.svg_source}\n

${\n    escapeHTML(svg.svg.svg_source)\n  }

\n \n

\n \n \n \n

\n\n

Relatives of this SVG

Most Beloved

\n ${svg.svg.parent_id ? renderParent(svg.parent) : \"\"}\n ${svg.children.map((c) => renderChild(c)).join(\"\")}\n

\n ${popular.map((c) => renderChild(c)).join(\"\")}\n

\n \n \n \n\n\n`;\n};\n\n// Hono app.\n\nconst app = new Hono();\napp.post(\"/remix/:id\", async (c) => {\n const openai = new OpenAI();\n const { prompt } = await c.req.json();\n let svg = await getSVG(c.req.param(\"id\") as string);\n if (svg === undefined) return c.text(\"Not found\", 404);\n const stream = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"make me an svg image\" },\n { role: \"system\", content: \"```xml\\n\" + svg.svg_source + \"\\n```\" },\n { role: \"user\", content: \"Edit this svg. \" + prompt },\n ],\n stream: true,\n model: \"gpt-4o-mini\",\n max_tokens: 2500,\n });\n let encoder = new TextEncoder();\n\n function isValidSVG(svgString) {\n const parser = new DOMParser({\n errorHandler: {\n warning: (msg) => {},\n error: (msg) => {\n throw new Error(msg);\n },\n fatalError: (msg) => {\n throw new Error(msg);\n },\n },\n });\n try {\n const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n if (!svgDoc) return false;\n const parserError = svgDoc.getElementsByTagName(\"parsererror\");\n // If the SVG contains any parser errors, it is invalid\n return parserError.length === 0;\n } catch (e) {\n return false;\n }\n }\n\n let foundSVGStart = false;\n let foundSVGEnd = false;\n let buffer = \"\";\n let svgImage = \"\";\n return new Response(\n new ReadableStream({\n async start(controller) {\n for await (const chunk of stream) {\n let line = chunk.choices[0]?.delta?.content;\n buffer += line || \"\";\n let location = buffer.indexOf(\" -1) {\n foundSVGStart = true;\n svgImage = buffer.slice(location);\n controller.enqueue(encoder.encode(buffer.slice(location)));\n buffer = \"\";\n } else if (foundSVGStart && !foundSVGEnd) {\n svgImage += line;\n let endLocation = svgImage.indexOf(\"\");\n if (endLocation > -1) {\n svgImage = svgImage.slice(0, endLocation + \"\".length);\n foundSVGEnd = true;\n console.log(JSON.stringify(svgImage));\n }\n controller.enqueue(encoder.encode(line));\n }\n }\n controller.enqueue(encoder.encode(\" \"));\n if (isValidSVG(svgImage)) {\n try {\n let resp = await sqlite.execute({\n sql: `INSERT INTO ${tableName} (prompt, svg_source, parent_id) VALUES (?, ?, ?) RETURNING *`,\n args: [prompt, svgImage, svg.id],\n });\n controller.enqueue(encoder.encode(JSON.stringify(resultSetToSVG(resp)[0])));\n } catch (e) {\n console.log(e, svg.id);\n }\n } else {\n controller.enqueue(encoder.encode(JSON.stringify({ error: \"invalid svg\" })));\n }\n controller.close();\n },\n }),\n { headers: { \"Content-Type\": \"text/event-stream\" } },\n );\n});\n\nconst getAppData = async (id: string) => {\n const [svg, popular] = await Promise.all([getSVGWithChildren(id), getMostPopular()]);\n return { svg, popular };\n};\n\napp.get(\"/\", async (c) => c.html(renderHTML(await getAppData(\"1\"))));\napp.get(\"/:id\", async (c) => c.html(renderHTML(await getAppData(c.req.param(\"id\") as string))));\n\napp.get(\"/:id/img.svg\", async (c) => {\n function addSVGNamespace(svgString) {\n if (!/^<\\?xml/.test(svgString)) svgString = \"\\n\" + svgString;\n if (!/xmlns=\"http:\\/\\/www.w3.org\\/2000\\/svg\"/.test(svgString))\n svgString = svgString.replace(\" {\n // Try and increment the heart counter. If we get a uniqueness error\n // on this ip and this svg, we'll get an integrity error.\n try {\n await sqlite.batch([{\n sql: `INSERT INTO ${heartHashTableName} (hash) values (?)`,\n args: [sha256(c.req.param(\"id\") + c.req.header(\"cf-connecting-ip\"), \"utf8\", \"hex\") as string],\n }, {\n sql: `UPDATE ${tableName} SET heart_count = heart_count + 1 WHERE id = ?`,\n args: [c.req.param(\"id\")],\n }]);\n } catch (e) {\n return c.text(e.message);\n }\n return c.text(\"OK\");\n});\nexport default app.fetch;","deleted","label","svg",[98],"permalink","https://www.val.town/x/maxm/infiniteSVGGraph/code/main.tsx","extension","actionData","errors"]