Visual comparison

`,\n this._everConnected || (this._resetPosition(), this._everConnected = !0);\n }\n attributeChangedCallback(t) {\n t === a && this._resetPosition();\n }\n _resetPosition() {\n requestAnimationFrame(() => {\n const t = this.getBoundingClientRect(), e = \"vertical\" === this.orientation ? \"height\" : \"width\";\n this._position = t[e] * this._relativePosition, this._setPosition();\n });\n }\n get legacyClipCompat() {\n return this.hasAttribute(r);\n }\n set legacyClipCompat(t) {\n t ? this.setAttribute(r, \"\") : this.removeAttribute(r);\n }\n get orientation() {\n const t = this.getAttribute(a);\n return t && \"vertical\" === t.toLowerCase() ? \"vertical\" : \"horizontal\";\n }\n set orientation(t) {\n this.setAttribute(a, t);\n }\n _childrenChange() {\n this.lastElementChild !== this._handle && this.appendChild(this._handle);\n }\n _pointerChange(t, e) {\n const i = \"vertical\" === this.orientation ? \"clientY\" : \"clientX\",\n s = \"vertical\" === this.orientation ? \"height\" : \"width\",\n n = this.getBoundingClientRect();\n this._position = this._positionOnPointerStart + (e[i] - t[i]),\n this._position = Math.max(0, Math.min(this._position, n[s])),\n this._relativePosition = this._position / n[s],\n this._setPosition();\n }\n _setPosition() {\n this.style.setProperty(\"--split-point\", `${this._position}px`);\n }\n }\n customElements.define(\"two-up\", h);\n }();\n}();",[],[68,97],["D",1749750924524],[109,110,111,112,113],[76],{"_36":145,"_13":146,"_39":147,"_41":77,"_42":43,"_44":148,"_46":47,"_48":149,"_17":150,"_51":102,"_53":151,"_55":56,"_57":-5,"_86":152,"_18":153},{"_36":137,"_13":138,"_39":139,"_41":77,"_42":43,"_44":140,"_46":47,"_48":141,"_17":101,"_51":102,"_53":142,"_55":56,"_57":-5,"_86":143,"_18":144},{"_36":130,"_13":131,"_39":132,"_41":77,"_42":43,"_44":50,"_46":47,"_48":133,"_17":78,"_51":102,"_53":134,"_55":56,"_57":-5,"_86":135,"_18":136},{"_36":122,"_13":123,"_39":124,"_41":77,"_42":43,"_44":125,"_46":47,"_48":126,"_17":101,"_51":102,"_53":127,"_55":56,"_57":-5,"_86":128,"_18":129},{"_36":114,"_13":115,"_39":116,"_41":77,"_42":43,"_44":117,"_46":47,"_48":118,"_17":101,"_51":102,"_53":119,"_55":56,"_57":-5,"_86":120,"_18":121},"d191ae20-47b7-11f0-a89b-76b3cceeab13","prettyPoints.tsx","bc123ab0-47b7-11f0-9a28-76b3cceeab13",19,["D",1749751526895],"export default function prettyPoints( score: number ): string {\n\treturn `${ Math.round( score * 1000 ) / 10 } points`;\n}",[],[76,115],"a74bd776-47b7-11f0-a89b-76b3cceeab13","prettyPct.tsx","ce58bfce-47b6-11f0-b6b6-76b3cceeab13",15,["D",1749751455972],"export default function prettyPct(float: number): string {\n return `${Math.round(float * 1000) / 10}%`;\n}",[],[76,123],"b714a89a-47b7-11f0-b436-76b3cceeab13","prettyDescriptionAndScore.tsx","d15af232-47b6-11f0-b384-76b3cceeab13",["D",1749751482455],"// pramod wants to send pre-formatted score\nexport default function prettyDescriptionAndScore(description: string, score: number): string {\n if (description && score) {\n return `${description} (${score})`;\n }\n if (description) {\n return `${description}`;\n }\n if (score) {\n return score;\n }\n return \"\";\n}",[],[76,131],"a5fc0e3c-47b6-11f0-a85b-76b3cceeab13","prettyBytes.tsx","84268666-47b6-11f0-b1ef-76b3cceeab13",8,["D",1749751024275],"export default function prettyBytes(bytes: number): string {\n if (Math.abs(bytes) < 1_000) {\n return `${Math.round(bytes)} B`;\n } else if (Math.abs(bytes) < 1_000_000) {\n return `${Math.round(bytes / 100) / 10} kB`;\n } else if (Math.abs(bytes) < 1_000_000_000) {\n return `${Math.round(bytes / 100_000) / 10} MB`;\n } else {\n return `${Math.round(bytes / 100_000_000) / 10} GB`;\n }\n}",[],[76,138],"2a00247c-47bf-11f0-9f03-76b3cceeab13","generateComparison.tsx","78ec8b92-47b6-11f0-a96e-76b3cceeab13",43,["D",1749754681735],5,"import prettyBytes from \"./prettyBytes.tsx\";\nimport prettyDescriptionAndScore from \"./prettyDescriptionAndScore.tsx\";\nimport prettyPct from \"./prettyPct.tsx\";\nimport prettyPoints from \"./prettyPoints.tsx\";\n\nexport default function generateVisualComparison({\n a_name,\n a_url,\n a_bytes,\n a_format,\n a_aimos,\n b_name,\n b_url,\n b_bytes,\n b_format,\n b_aimos,\n should_hide_urls,\n a_iqa_score,\n a_iqa_description,\n b_iqa_score,\n b_iqa_description,\n density,\n}) {\n return `\n\n\n\n\nVisual comparison\n\n\n\n\n\n\n

\n${a_name ? `
${a_name}
` : \"\"}\n${should_hide_urls ? \"\" : `
`${a_url}`
`}\n${a_bytes || a_format ? `
` : \"\"}\n${a_bytes ? prettyBytes(a_bytes) : \"\"}\n${a_format ? a_format : \"\"}\n${a_bytes || a_format ? `
` : \"\"}\n${a_aimos ? `
${prettyPoints(a_aimos)}
` : \"\"}\n${\n a_iqa_score || a_iqa_description\n ? `
\n
IQA:
\n
${prettyDescriptionAndScore(a_iqa_description, a_iqa_score)}
\n
`\n : \"\"\n }\n

\n\n

\n${b_name ? `
${b_name}
` : \"\"}\n${should_hide_urls ? \"\" : `
`${b_url}`
`}\n${b_bytes || b_format ? `
` : \"\"}\n${b_bytes ? prettyBytes(b_bytes) : \"\"}\n${b_format ? b_format : \"\"}\n${b_bytes || b_format ? `
` : \"\"}\n${b_aimos ? `
${prettyPoints(b_aimos)}
` : \"\"}\n${\n b_iqa_score || b_iqa_description\n ? `
\n
IQA:
\n
${prettyDescriptionAndScore(b_iqa_description, b_iqa_score)}
\n
`\n : \"\"\n }\n

\n\n\n\n\n\n\n\n`;\n}",[],[76,146],"52ee04f2-47b6-11f0-b086-76b3cceeab13",["D",1749750884941],"deletedAt","legacyEnvVars","privacy","httpPrivacy","description","Compare two images and show some metadata about ’em","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/9cfa3931-a72f-4e91-4847-a10fbd922f00/square512?exp=1789538399&sig=4c1e52aad93486c97a27b00db5d572bb9fa891574e7547bfb9c6dce8af3e5e45","userId","f341a290-39ee-11f0-b940-6f99fbd8898f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","6709e416-3c1d-4c0b-9132-4260d8f5d362","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_207":203},"org",{"_11":12,"_201":-5,"_202":203,"_164":165,"_204":205,"_206":56},"branch",{"_17":62,"_13":16,"_36":43,"_193":154,"_194":-5,"_195":-5,"_196":-5,"_197":-5,"_198":-5,"_199":14,"_200":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ5VDhXbVRoaXpmZ2ZvV2dCZEJ2T01TN0JJaSJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":154,"_13":14,"_48":273,"_156":-5,"_157":56,"_158":68,"_159":68,"_160":161,"_162":163,"_164":165,"_166":40,"_167":47,"_168":47,"_169":-5,"_170":64,"_171":172,"_173":-5,"_174":-5,"_175":-5,"_176":-5,"_177":178,"_179":178,"_180":181,"_182":181,"_183":181,"_184":178,"_185":178,"_186":274,"_188":275,"_190":276,"_192":56},[243,249,251,252],"files",[243,244,245,246,247,248,249,250,251,252],"counts",{"_234":64,"_235":72,"_236":64,"_31":237,"_238":239},[226,227,228,229],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_18":233},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":71,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_18":232},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":24,"_53":65,"_55":56,"_57":-5,"_18":231},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":14,"_18":230},[38],[60],[68],[76],"pulls","branches","forks",{"_240":64,"_242":64},"connections",{"_240":64,"_241":64},"count","unfilledCount","emptyCount",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":106,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_86":271,"_18":272},{"_36":145,"_13":146,"_39":147,"_41":77,"_42":43,"_44":148,"_46":47,"_48":149,"_17":150,"_51":102,"_53":151,"_55":56,"_57":-5,"_86":269,"_18":270},{"_36":137,"_13":138,"_39":139,"_41":77,"_42":43,"_44":140,"_46":47,"_48":141,"_17":101,"_51":102,"_53":142,"_55":56,"_57":-5,"_86":267,"_18":268},{"_36":130,"_13":131,"_39":132,"_41":77,"_42":43,"_44":50,"_46":47,"_48":133,"_17":78,"_51":102,"_53":134,"_55":56,"_57":-5,"_86":265,"_18":266},{"_36":122,"_13":123,"_39":124,"_41":77,"_42":43,"_44":125,"_46":47,"_48":126,"_17":101,"_51":102,"_53":127,"_55":56,"_57":-5,"_86":263,"_18":264},{"_36":114,"_13":115,"_39":116,"_41":77,"_42":43,"_44":117,"_46":47,"_48":118,"_17":101,"_51":102,"_53":119,"_55":56,"_57":-5,"_86":261,"_18":262},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":92,"_17":72,"_51":73,"_53":-5,"_55":56,"_57":-5,"_86":259,"_18":260},{"_36":96,"_13":97,"_39":98,"_41":69,"_42":43,"_44":99,"_46":47,"_48":100,"_17":101,"_51":102,"_53":103,"_55":56,"_57":-5,"_86":257,"_18":258},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":89,"_17":64,"_51":24,"_53":65,"_55":56,"_57":-5,"_86":255,"_18":256},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":85,"_17":50,"_51":52,"_53":54,"_55":56,"_57":14,"_86":253,"_18":254},[],[38],[],[60],[],[68,97],[250],[68],[],[76,115],[],[76,123],[],[76,131],[],[76,138],[],[76,146],[244,245,246,247,248],[76],["D",1749750884941],{"_11":12,"_207":203},{"_11":12,"_201":-5,"_202":203,"_164":165,"_204":205,"_206":56},{"_17":62,"_13":16,"_36":43,"_193":154,"_194":-5,"_195":-5,"_196":-5,"_197":-5,"_198":-5,"_199":14,"_200":12},"ctx",{"_186":-5,"_223":310,"_311":312,"_313":314,"_315":56,"_316":56,"_317":56,"_318":47,"_319":-5,"_320":-7,"_321":-7,"_322":64,"_323":56,"_324":56,"_325":-5,"_326":56,"_327":56,"_328":56,"_329":-5},"ENV",{"_281":282,"_283":284,"_285":16,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

${a_name}

${b_name}

Code