DOM Pixel Browser (128x128 @ 5 FPS)

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_154":155,"_156":157},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"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":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",13,"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.ts","latestPath","fileId","a519c89c-aa16-11f1-ac50-1607ee4eb77e","name","fileType","http","content","// @allowJs\nimport { parseHTML } from \"linkedom\";\n\ninterface Pixel {\n r: number;\n g: number;\n b: number;\n}\n\ninterface BrowserState {\n url: string;\n pixels: Pixel[][];\n title: string;\n userAgent: string;\n viewport: { width: number; height: number };\n}\n\nconst browserState: BrowserState = {\n url: \"https://frogfind.de\",\n pixels: [],\n title: \"\",\n userAgent:\n \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36\",\n viewport: { width: 128, height: 128 },\n};\n\n// Tag-to-color style map for DOM element visual representation\nconst TAG_COLORS: Record = {\n A: { r: 0, g: 102, b: 204 }, // Links: Blue\n BUTTON: { r: 255, g: 102, b: 0 }, // Buttons: Orange\n INPUT: { r: 200, g: 200, b: 200 }, // Inputs: Light Gray\n H1: { r: 153, g: 51, b: 204 }, // H1: Purple\n H2: { r: 153, g: 51, b: 204 }, // H2: Purple\n H3: { r: 153, g: 51, b: 204 }, // H3: Purple\n IMG: { r: 51, g: 204 }, // Images: Bright Green\n NAV: { r: 255, g: 204, b: 0 }, // Navbars: Gold\n FOOTER: { r: 100, g: 100, b: 100 }, // Footer: Dark Gray\n TEXT: { r: 20, g: 20, b: 20 }, // Normal Text: Charcoal\n};\n\n// Helper to fill a rectangle on our pixel canvas\nfunction drawRect(\n pixels: Pixel[][],\n x: number,\n y: number,\n w: number,\n h: number,\n color: Pixel,\n) {\n for (let currentY = y; currentY < y + h; currentY++) {\n for (let currentX = x; currentX < x + w; currentX++) {\n if (currentY >= 0 && currentY < 128 && currentX >= 0 && currentX < 128) {\n pixels[currentY][currentX] = color;\n }\n }\n }\n}\n\n// Traverse DOM Tree and map HTML elements into 128x128 pixel coordinates\nfunction renderDOMToPixels(html: string, url: string): Pixel[][] {\n const { document } = parseHTML(html);\n\n // Extract title\n const titleEl = document.querySelector(\"title\");\n browserState.title = titleEl ? titleEl.textContent?.trim() || url : url;\n\n // Initialize white canvas (128x128)\n const pixels: Pixel[][] = Array.from(\n { length: 128 },\n () => Array.from({ length: 128 }, () => ({ r: 255, g: 255, b: 255 })),\n );\n\n let cursorY = 4; // Top offset for rendering\n\n // Walk through top-level block children in document body\n const body = document.body || document;\n const children = Array.from(body.children);\n\n for (const node of children) {\n if (cursorY >= 124) break;\n\n const tagName = node.tagName.toUpperCase();\n\n // Skip non-rendered script/style tags\n if (tagName === \"SCRIPT\" || tagName === \"STYLE\" || tagName === \"NOSCRIPT\") {\n continue;\n }\n\n const text = node.textContent?.trim() || \"\";\n if (!text && tagName !== \"IMG\" && tagName !== \"INPUT\") continue;\n\n // Center header elements\n if (tagName.startsWith(\"H\")) {\n const width = Math.min(Math.max(text.length * 2, 20), 108);\n const startX = Math.floor((128 - width) / 2);\n drawRect(\n pixels,\n startX,\n cursorY,\n width,\n 4,\n TAG_COLORS[tagName] || TAG_COLORS.H1,\n );\n cursorY += 6;\n continue;\n }\n\n // Input fields and forms\n if (tagName === \"INPUT\" || tagName === \"FORM\") {\n const inputWidth = 60;\n const startX = Math.floor((128 - inputWidth) / 2);\n drawRect(pixels, startX, cursorY, inputWidth, 5, TAG_COLORS.INPUT);\n cursorY += 7;\n continue;\n }\n\n // Paragraphs, links, lists, containers\n const words = text.split(/\\s+/);\n let cursorX = 10;\n const lineHeight = 2;\n\n for (const word of words) {\n if (!word) continue;\n const wordWidth = Math.min(word.length, 108);\n\n if (cursorX + wordWidth > 118) {\n cursorX = 10;\n cursorY += lineHeight + 1;\n }\n\n if (cursorY >= 124) break;\n\n // Select element color based on child node types (e.g. anchors)\n const color = TAG_COLORS[tagName] || TAG_COLORS.TEXT;\n drawRect(pixels, cursorX, cursorY, wordWidth, lineHeight, color);\n\n cursorX += wordWidth + 1;\n }\n\n cursorY += 3; // Section spacing\n }\n\n return pixels;\n}\n\n// Fetch and layout HTML DOM\nasync function fetchAndRender(url: string): Promise {\n try {\n const response = await fetch(url, {\n headers: { \"User-Agent\": browserState.userAgent },\n });\n const html = await response.text();\n browserState.url = url;\n const pixels = renderDOMToPixels(html, url);\n browserState.pixels = pixels;\n return pixels;\n } catch (err) {\n const pixels: Pixel[][] = Array.from(\n { length: 128 },\n () => Array.from({ length: 128 }, () => ({ r: 255, g: 0, b: 0 })),\n );\n browserState.pixels = pixels;\n return pixels;\n }\n}\n\n// API Handler\nasync function getBrowserJSON(req: Request): Promise {\n const url = new URL(req.url);\n const targetUrl = url.searchParams.get(\"url\") || browserState.url;\n\n if (targetUrl !== browserState.url || browserState.pixels.length === 0) {\n await fetchAndRender(targetUrl);\n }\n\n return new Response(\n JSON.stringify({\n type: \"browser_dom_screenshot\",\n viewport: { width: 128, height: 128, totalPixels: 16384 },\n url: browserState.url,\n title: browserState.title,\n pixels: browserState.pixels.flat(),\n }),\n { headers: { \"Content-Type\": \"application/json\" } },\n );\n}\n\n// 5 FPS Client Interface\nfunction serveInterface(): Response {\n const html = `\n\n\n \n DOM Pixel Browser (128x128 @ 5 FPS)\n \n\n\n

DOM-PARSED 128x128 PIXEL BROWSER

\n \n \n

\n\n \n\n`;\n\n return new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n}\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname === \"/api/browser\") return getBrowserJSON(req);\n return serveInterface();\n}","// @allowJs\nimport { parseHTML } from \"node:linkedom\";\n\ninterface Pixel {\n r: number;\n g: number;\n b: number;\n}\n\ninterface BrowserState {\n url: string;\n pixels: Pixel[][];\n title: string;\n userAgent: string;\n viewport: { width: number; height: number };\n}\n\nconst browserState: BrowserState = {\n url: \"https://frogfind.de\",\n pixels: [],\n title: \"\",\n userAgent:\n \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36\",\n viewport: { width: 128, height: 128 },\n};\n\n// Tag-to-color style map for DOM element visual representation\nconst TAG_COLORS: Record = {\n A: { r: 0, g: 102, b: 204 }, // Links: Blue\n BUTTON: { r: 255, g: 102, b: 0 }, // Buttons: Orange\n INPUT: { r: 200, g: 200, b: 200 }, // Inputs: Light Gray\n H1: { r: 153, g: 51, b: 204 }, // H1: Purple\n H2: { r: 153, g: 51, b: 204 }, // H2: Purple\n H3: { r: 153, g: 51, b: 204 }, // H3: Purple\n IMG: { r: 51, g: 204 }, // Images: Bright Green\n NAV: { r: 255, g: 204, b: 0 }, // Navbars: Gold\n FOOTER: { r: 100, g: 100, b: 100 }, // Footer: Dark Gray\n TEXT: { r: 20, g: 20, b: 20 }, // Normal Text: Charcoal\n};\n\n// Helper to fill a rectangle on our pixel canvas\nfunction drawRect(\n pixels: Pixel[][],\n x: number,\n y: number,\n w: number,\n h: number,\n color: Pixel,\n) {\n for (let currentY = y; currentY < y + h; currentY++) {\n for (let currentX = x; currentX < x + w; currentX++) {\n if (currentY >= 0 && currentY < 128 && currentX >= 0 && currentX < 128) {\n pixels[currentY][currentX] = color;\n }\n }\n }\n}\n\n// Traverse DOM Tree and map HTML elements into 128x128 pixel coordinates\nfunction renderDOMToPixels(html: string, url: string): Pixel[][] {\n const { document } = parseHTML(html);\n\n // Extract title\n const titleEl = document.querySelector(\"title\");\n browserState.title = titleEl ? titleEl.textContent?.trim() || url : url;\n\n // Initialize white canvas (128x128)\n const pixels: Pixel[][] = Array.from(\n { length: 128 },\n () => Array.from({ length: 128 }, () => ({ r: 255, g: 255, b: 255 })),\n );\n\n let cursorY = 4; // Top offset for rendering\n\n // Walk through top-level block children in document body\n const body = document.body || document;\n const children = Array.from(body.children);\n\n for (const node of children) {\n if (cursorY >= 124) break;\n\n const tagName = node.tagName.toUpperCase();\n\n // Skip non-rendered script/style tags\n if (tagName === \"SCRIPT\" || tagName === \"STYLE\" || tagName === \"NOSCRIPT\") {\n continue;\n }\n\n const text = node.textContent?.trim() || \"\";\n if (!text && tagName !== \"IMG\" && tagName !== \"INPUT\") continue;\n\n // Center header elements\n if (tagName.startsWith(\"H\")) {\n const width = Math.min(Math.max(text.length * 2, 20), 108);\n const startX = Math.floor((128 - width) / 2);\n drawRect(\n pixels,\n startX,\n cursorY,\n width,\n 4,\n TAG_COLORS[tagName] || TAG_COLORS.H1,\n );\n cursorY += 6;\n continue;\n }\n\n // Input fields and forms\n if (tagName === \"INPUT\" || tagName === \"FORM\") {\n const inputWidth = 60;\n const startX = Math.floor((128 - inputWidth) / 2);\n drawRect(pixels, startX, cursorY, inputWidth, 5, TAG_COLORS.INPUT);\n cursorY += 7;\n continue;\n }\n\n // Paragraphs, links, lists, containers\n const words = text.split(/\\s+/);\n let cursorX = 10;\n const lineHeight = 2;\n\n for (const word of words) {\n if (!word) continue;\n const wordWidth = Math.min(word.length, 108);\n\n if (cursorX + wordWidth > 118) {\n cursorX = 10;\n cursorY += lineHeight + 1;\n }\n\n if (cursorY >= 124) break;\n\n // Select element color based on child node types (e.g. anchors)\n const color = TAG_COLORS[tagName] || TAG_COLORS.TEXT;\n drawRect(pixels, cursorX, cursorY, wordWidth, lineHeight, color);\n\n cursorX += wordWidth + 1;\n }\n\n cursorY += 3; // Section spacing\n }\n\n return pixels;\n}\n\n// Fetch and layout HTML DOM\nasync function fetchAndRender(url: string): Promise {\n try {\n const response = await fetch(url, {\n headers: { \"User-Agent\": browserState.userAgent },\n });\n const html = await response.text();\n browserState.url = url;\n const pixels = renderDOMToPixels(html, url);\n browserState.pixels = pixels;\n return pixels;\n } catch (err) {\n const pixels: Pixel[][] = Array.from(\n { length: 128 },\n () => Array.from({ length: 128 }, () => ({ r: 255, g: 0, b: 0 })),\n );\n browserState.pixels = pixels;\n return pixels;\n }\n}\n\n// API Handler\nasync function getBrowserJSON(req: Request): Promise {\n const url = new URL(req.url);\n const targetUrl = url.searchParams.get(\"url\") || browserState.url;\n\n if (targetUrl !== browserState.url || browserState.pixels.length === 0) {\n await fetchAndRender(targetUrl);\n }\n\n return new Response(\n JSON.stringify({\n type: \"browser_dom_screenshot\",\n viewport: { width: 128, height: 128, totalPixels: 16384 },\n url: browserState.url,\n title: browserState.title,\n pixels: browserState.pixels.flat(),\n }),\n { headers: { \"Content-Type\": \"application/json\" } },\n );\n}\n\n// 5 FPS Client Interface\nfunction serveInterface(): Response {\n const html = `\n\n\n \n DOM Pixel Browser (128x128 @ 5 FPS)\n \n\n\n

DOM-PARSED 128x128 PIXEL BROWSER

\n \n \n

\n\n \n\n`;\n\n return new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n}\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname === \"/api/browser\") return getBrowserJSON(req);\n return serveInterface();\n}","createdAt",["D",1788716203557],"branchVersion","branchId","8a2e5b08-e877-4180-8fc8-56114ca11c2f","id","f1e1c719-ad52-4372-b6af-aa54732297b1","testestest",["D",1788714966013],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","test","imageUrl","019b447b-e60e-77bd-b753-1c0cdb67ff16","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019b447b-e60e-77bd-b753-21e0330aa12c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",20,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","apersonwhomakesstuff","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN0JkaU41Zkd2UUpQM1JNUG9SeE9DNzVXcXIifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":150,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":151,"_80":152,"_82":153,"_84":25},"tree",[145],"files",[145],"counts",{"_134":62,"_135":136,"_137":62,"_138":139,"_140":141},"contents",[126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":130,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_27":133},"2b40e4ea-36e0-429c-9dbf-b319157db1bb","parentId","latest",["D",1788716203557],12,"label",[28],"pulls","branches",1,"forks","envVars",{"_142":62,"_144":62},"connections",{"_142":62,"_143":62},"count","unfilledCount","emptyCount",{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":146,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_147":148,"_27":149},["D",1788716203557],"children",[],[28],["D",1788714966013],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":187,"_188":189,"_190":191,"_192":25,"_193":25,"_194":25,"_195":58,"_196":-5,"_197":-7,"_198":-7,"_199":62,"_200":25,"_201":25,"_202":-5,"_203":25,"_204":25,"_205":25,"_206":-5},"ENV",{"_158":159,"_160":161,"_162":86,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · v13