import { sha256 } from "https://denopkg.com/chiefbiiko/sha256@v1.0.0/mod.ts"; import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=29"; import { OpenAI } from "https://esm.town/v/std/openai?v=4"; import { ResultSet, sqlite } from "https://esm.town/v/std/sqlite?v=6"; import { Hono } from "npm:hono@3"; import { DOMParser } from "npm:xmldom"; // Val-name scoped table addressing. const { name } = extractValInfo(import.meta.url); const tableName = `${name}_svg_images`; const heartHashTableName = `${name}_heart_hash`; // await sqlite.batch([ // // `DROP TABLE IF EXISTS ${tableName}`, // `CREATE TABLE IF NOT EXISTS ${tableName} ( // id INTEGER PRIMARY KEY, // parent_id INTEGER, // prompt TEXT NOT NULL, // svg_source TEXT NOT NULL, // heart_count INTEGER NOT NULL DEFAULT 0, // FOREIGN KEY (parent_id) REFERENCES ${tableName}(id) // )`, // `CREATE INDEX IF NOT EXISTS idx_parent_id ON ${tableName}(parent_id)`, // `CREATE TABLE IF NOT EXISTS ${heartHashTableName} ( hash TEXT PRIMARY KEY )`, // ]); // const origin = ``; // let svgs = await sqlite.execute(`SELECT * FROM ${tableName}`); // if (svgs.rows.length === 0) { // await sqlite.execute({ sql: `INSERT INTO ${tableName} (prompt, svg_source) VALUES ('', ?)`, args: [origin] }); // } // Database querying. function parseResultSet(row: ResultSet): T[] { return row.rows.map((r) => Object.fromEntries(r.map((c, i) => [row.columns[i], c]))) as T[]; } const resultSetToSVG = ( result: ResultSet, ): { id: number; parent_id: number; prompt: string; svg_source: string; heart_count: number }[] => { return parseResultSet(result); }; const getSVG = async (id: string) => { let svg = resultSetToSVG(await sqlite.execute({ sql: `SELECT * FROM ${tableName} WHERE id = ?`, args: [id] })); if (svg.length === 0) return undefined; return svg[0]; }; const getSVGWithChildren = async (id: string) => { let [svg, children] = await Promise.all([ getSVG(id), sqlite.execute({ sql: `SELECT * FROM ${tableName} WHERE parent_id = ? ORDER BY heart_count DESC, RANDOM() LIMIT 100;`, args: [id], }), ]); let parent = undefined; if (svg.parent_id) { parent = await getSVG(String(svg.parent_id)); } return { svg, children: resultSetToSVG(children), parent }; }; const getMostPopular = async () => { return resultSetToSVG( await sqlite.execute(`SELECT * FROM ${tableName} ORDER BY heart_count DESC, RANDOM() LIMIT 100`), ); }; // Client side javascript and template functions. const clientJavascript = async () => { window.switchTab = (event, tabName) => { var tabs = document.getElementsByClassName("tab"); var tabContents = document.getElementsByClassName("tab-content"); for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove("active"); tabContents[i].classList.remove("active"); } event.currentTarget.classList.add("active"); document.getElementById(tabName).classList.add("active"); }; let submitted = false; window.submitEdit = async (id, prompt) => { if (submitted) return; submitted = true; document.querySelectorAll("button").forEach((b) => b.classList.add("shimmer")); if (!prompt) { prompt = document.getElementById("svgInput").value; } let resp = await fetch("/remix/" + id, { method: "POST", body: JSON.stringify({ prompt }) }); const reader = resp.body.getReader(); const decoder = new TextDecoder(); const svgCode = document.getElementById("svgCode"); const svgImage = document.getElementById("svgImage"); let foundSVGEnd = false; let htmlContent = ""; let jsonResponse = ""; svgCode.textContent = ""; svgImage.innerHTML = ""; while (true) { const { done, value } = await reader.read(); if (done) break; if (!foundSVGEnd) { svgCode.textContent += decoder.decode(value, { stream: true }); svgImage.innerHTML = svgCode.textContent + ""; Prism.highlightElement(svgCode); if (svgCode.textContent.indexOf("") > -1) { foundSVGEnd = true; } } else { jsonResponse += decoder.decode(value, { stream: true }); } } let r = JSON.parse(jsonResponse); if (r.id) window.location.assign("/" + r.id); if (r.error) alert(r.error); }; window.inputKeyDown = (id) => { if (window.event.key === "Enter") { submitEdit(id); } }; document.querySelectorAll(".heart-button").forEach(button => { button.addEventListener("click", (event) => { const countElement = event.currentTarget.querySelector(".heart-count"); let count = parseInt(countElement.textContent); count++; countElement.textContent = count; createHeartBurst(event); }); }); function createHeartBurst(event) { const button = event.currentTarget; const buttonContainer = button.closest(".heart-button-container"); const buttonRect = button.getBoundingClientRect(); fetch(`/${button.attributes["data-id"].value}/heart`, { method: "POST" }); for (let i = 0; i < 10; i++) { const heart = document.createElement("div"); heart.innerHTML = "❤️"; heart.className = "heart-particle"; heart.style.left = (buttonRect.width / 2) + "px"; heart.style.top = (buttonRect.height / 2) + "px"; const angle = Math.random() * Math.PI * 2; const distance = Math.random() * 50 + 20; const destinationX = Math.cos(angle) * distance; const destinationY = Math.sin(angle) * distance; heart.animate([ { transform: "translate(-50%, -50%) scale(0) rotate(0deg)" }, { transform: `translate(calc(-50% + ${destinationX}px), calc(-50% + ${destinationY}px)) scale(1) rotate(${ Math.random() * 360 }deg)`, }, ], { duration: 800, easing: "ease-out", fill: "forwards", }); buttonContainer.appendChild(heart); setTimeout(() => { heart.remove(); }, 800); } } }; function escapeHTML(html: string): string { const escapeChars: { [char: string]: string } = { "&": "&", "<": "<", ">": ">", "\"": """, "'": "'", }; return html.replace(/[&<>"']/g, char => escapeChars[char]); } const renderChild = (c: Awaited>) => { return `

${escapeHTML(c.prompt)}

`; }; const renderParent = (parent: Awaited>) => { return `

Parent

${escapeHTML(parent.prompt)}

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

Infinite SVG Graph

Welcome to the Infinite SVG Graph.

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

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

${svg.svg.svg_source}

${
    escapeHTML(svg.svg.svg_source)
  }

Relatives of this SVG

Most Beloved

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

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

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

infiniteSVGGraph