[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_163":164,"_165":166},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":87,"_27":53,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":120,"_121":25,"_122":123,"_124":59,"_125":-5,"_126":-5,"_127":128},"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":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",2,"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","019fb331-f42e-7336-8133-07cc0e01ee06","name","fileType","http","content","/**\n * Multi-file client-side KRPano generator using wasm-vips and fflate.\n * Proxies the wasm-vips library files through the same origin to avoid CORP blocks.\n *\n * Includes a fix for the Emscripten BindingError by explicitly passing a Uint8Array\n * view of the Float32Array buffer into newFromMemory.\n */\nimport { serve } from \"https://esm.town/v/g/serveUtils\";\nimport { Hono } from \"npm:hono\";\n\nfunction html() {\n /*\n\n\n\n \n \n Wasm-Vips KRPano Generator\n \n \n\n\n

KRPano Multi-Res Generator

Generate multi-resolution panorama projects entirely in-browser.

\n\n \n

\n\n\n */\n}\n\nfunction css() {\n /*\n:root {\n font-family: system-ui, -apple-system, sans-serif;\n background: #0f172a;\n color: #f8fafc;\n}\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 2rem;\n box-sizing: border-box;\n}\n.card {\n background: #1e293b;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n max-width: 500px;\n width: 100%;\n}\nh1 {\n margin-top: 0;\n font-size: 1.5rem;\n color: #38bdf8;\n}\n.subtitle {\n color: #94a3b8;\n font-size: 0.9rem;\n margin-bottom: 1.5rem;\n}\nlabel {\n display: block;\n margin-top: 1rem;\n font-size: 0.875rem;\n color: #94a3b8;\n margin-bottom: 0.5rem;\n}\ninput, select {\n width: 100%;\n padding: 0.75rem;\n border-radius: 0.5rem;\n border: 1px solid #334155;\n background: #0f172a;\n color: white;\n box-sizing: border-box;\n}\nbutton {\n margin-top: 1.5rem;\n width: 100%;\n padding: 0.75rem;\n background: #38bdf8;\n color: #0f172a;\n font-weight: bold;\n border: none;\n border-radius: 0.5rem;\n cursor: pointer;\n transition: all 0.2s;\n}\nbutton:hover { background: #7dd3fc; }\nbutton:disabled { opacity: 0.7; cursor: not-allowed; }\n */\n}\n\nfunction js() {\n /*\nimport Vips from '/vips/vips-es6.js';\nimport { Zip, ZipPassThrough } from 'https://esm.sh/fflate@0.8.2';\n\nlet vips;\n\nasync function initVips() {\n if (vips) return vips;\n vips = await Vips({\n mainScriptUrlOrBlob: '/vips/vips-es6.js',\n locateFile: (fileName) => `/vips/${fileName}`\n });\n if (vips.Cache) vips.Cache.max(0);\n return vips;\n}\n\nasync function createCubeFaceLUT(vips, faceName, width, height, eqW, eqH) {\n const lut = new Float32Array(width * height * 2);\n let i = 0;\n\n const pi = Math.PI;\n const pi2 = 2.0 * pi;\n const wFactor = 2.0 / (width - 1);\n const hFactor = 2.0 / (height - 1);\n const eqWMinus1 = eqW - 1;\n const eqHMinus1 = eqH - 1;\n\n for (let y = 0; y < height; y++) {\n const v = 1.0 - y * hFactor;\n for (let x = 0; x < width; x++) {\n const u = x * wFactor - 1.0;\n let cx, cy, cz;\n\n switch (faceName) {\n case \"f\": cx = u; cy = v; cz = 1; break;\n case \"b\": cx = -u; cy = v; cz = -1; break;\n case \"l\": cx = -1; cy = v; cz = u; break;\n case \"r\": cx = 1; cy = v; cz = -u; break;\n case \"u\": cx = u; cy = 1; cz = -v; break;\n case \"d\": cx = u; cy = -1; cz = v; break;\n }\n\n const r = Math.sqrt(cx * cx + cy * cy + cz * cz);\n let normY = cy / r;\n if (normY < -1.0) normY = -1.0;\n else if (normY > 1.0) normY = 1.0;\n\n const theta = Math.acos(normY);\n const phi = Math.atan2(cx, cz);\n\n lut[i++] = ((phi + pi) / pi2) * eqWMinus1;\n lut[i++] = (theta / pi) * eqHMinus1;\n }\n\n if (y % 128 === 0) {\n await new Promise((res) => setTimeout(res, 0));\n }\n }\n\n // Fix: Wrap the Float32Array buffer in a Uint8Array to satisfy Emscripten's wire typing.\n return {\n lutImg: vips.Image.newFromMemory(new Uint8Array(lut.buffer), width, height, 2, \"float\"),\n lutBuffer: lut,\n };\n}\n\ndocument.getElementById('tilerForm').addEventListener('submit', async (e) => {\n e.preventDefault();\n const btn = document.getElementById('submitBtn');\n const originalText = btn.innerText;\n btn.innerText = \"Initializing VIPS & Processing... Please wait.\";\n btn.disabled = true;\n\n try {\n const vipsLib = await initVips();\n\n const fileInput = document.getElementById('image');\n const baseInput = document.getElementById('basesphere');\n const file = fileInput.files[0];\n const baseFile = baseInput.files[0];\n\n const tileSize = parseInt(document.getElementById('tileSize').value, 10);\n const levelsArg = document.getElementById('levels').value;\n const imgBaseName = file.name.replace(/\\.[^/.]+$/, \"\");\n\n const arrayBuffer = await file.arrayBuffer();\n let sourceImg = vipsLib.Image.newFromBuffer(new Uint8Array(arrayBuffer));\n\n if (baseFile) {\n const baseBuffer = await baseFile.arrayBuffer();\n const baseImg = vipsLib.Image.newFromBuffer(new Uint8Array(baseBuffer));\n const resizedBase = baseImg.resize(sourceImg.width / baseImg.width, {\n vscale: sourceImg.height / baseImg.height,\n });\n const composited = sourceImg.composite(resizedBase, \"over\");\n sourceImg.delete();\n resizedBase.delete();\n baseImg.delete();\n sourceImg = composited;\n }\n\n const fullWidth = sourceImg.width;\n let cubeWidth = Math.floor(fullWidth / 4);\n if (cubeWidth % 2 !== 0) cubeWidth -= 1;\n\n let maxLevels = parseInt(levelsArg, 10);\n if (levelsArg === \"auto\" || isNaN(maxLevels)) {\n maxLevels = Math.max(1, Math.ceil(Math.log2(cubeWidth / tileSize)));\n }\n\n const zipChunks = [];\n const zip = new Zip((err, dat, final) => {\n if (err) throw err;\n if (dat.length > 0) zipChunks.push(dat);\n if (final) {\n const blob = new Blob(zipChunks, { type: 'application/zip' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `${imgBaseName}_project.zip`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n\n btn.innerText = originalText;\n btn.disabled = false;\n }\n });\n\n const faces = [\"l\", \"f\", \"r\", \"b\", \"u\", \"d\"];\n const previewStrips = [];\n let thumbBuffer;\n\n for (const face of faces) {\n btn.innerText = `Processing face: ${face.toUpperCase()}`;\n const { lutImg, lutBuffer } = await createCubeFaceLUT(\n vipsLib, face, cubeWidth, cubeWidth, sourceImg.width, sourceImg.height\n );\n const faceImg = sourceImg.mapim(lutImg);\n lutImg.delete();\n\n const previewFaceLazy = faceImg.resize(256 / cubeWidth, { vscale: 256 / cubeWidth });\n const previewFace = previewFaceLazy.copyMemory();\n previewFaceLazy.delete();\n previewStrips.push(previewFace);\n\n if (face === \"f\") {\n const thumbImg = faceImg.resize(240 / cubeWidth, { vscale: 240 / cubeWidth });\n thumbBuffer = thumbImg.writeToBuffer(\".jpg\");\n thumbImg.delete();\n\n const thumbFile = new ZipPassThrough(`panos/${imgBaseName}/thumb.jpg`);\n zip.add(thumbFile);\n thumbFile.push(thumbBuffer, true);\n }\n\n for (let l = 1; l <= maxLevels; l++) {\n const numTiles = Math.pow(2, l);\n const targetPx = numTiles * tileSize;\n const scale = targetPx / cubeWidth;\n const scaledFace = scale === 1 ? faceImg : faceImg.resize(scale);\n\n for (let ty = 0; ty < numTiles; ty++) {\n for (let tx = 0; tx < numTiles; tx++) {\n const tileImg = scaledFace.extractArea(tx * tileSize, ty * tileSize, tileSize, tileSize);\n const outBuffer = tileImg.writeToBuffer(\".jpg\");\n tileImg.delete();\n\n const yIndex = ty + 1;\n const xIndex = tx + 1;\n const tileFile = new ZipPassThrough(\n `panos/${imgBaseName}/${face}/l${l}/${yIndex}/l${l}_${face}_${yIndex}_${xIndex}.jpg`\n );\n zip.add(tileFile);\n tileFile.push(outBuffer, true);\n }\n await new Promise((r) => setTimeout(r, 1));\n }\n if (scale !== 1) scaledFace.delete();\n }\n faceImg.delete();\n void lutBuffer.byteLength;\n }\n\n btn.innerText = `Finalizing Zip...`;\n sourceImg.delete();\n\n const previewStrip = vipsLib.Image.arrayjoin(previewStrips, { across: 1 });\n const previewBuffer = previewStrip.writeToBuffer(\".jpg\");\n previewStrip.delete();\n previewStrips.forEach((p) => p.delete());\n\n const previewFile = new ZipPassThrough(`panos/${imgBaseName}/preview.jpg`);\n zip.add(previewFile);\n previewFile.push(previewBuffer, true);\n\n let multiresStr = `${tileSize}`;\n for (let l = 1; l <= maxLevels; l++) {\n multiresStr += `,${Math.pow(2, l) * tileSize}`;\n }\n\n const xmlContent = `\n \n \n \n \n \n \n \n \n \n \n`;\n\n const xmlFile = new ZipPassThrough(`krpano.xml`);\n zip.add(xmlFile);\n xmlFile.push(new TextEncoder().encode(xmlContent), true);\n zip.end();\n\n } catch (error) {\n console.error(\"Panorama processing error:\", error);\n btn.innerText = `Error: ${error.message}`;\n btn.style.backgroundColor = '#ef4444';\n btn.disabled = false;\n }\n});\n */\n}\n\nconst app = new Hono();\n\n// Awaiting next() ensures the headers are attached to the *final* Response object\n// returned by the route handler, preventing them from being overwritten.\napp.use(\"*\", async (c, next) => {\n await next();\n c.res.headers.set(\"Cross-Origin-Embedder-Policy\", \"require-corp\");\n c.res.headers.set(\"Cross-Origin-Opener-Policy\", \"same-origin\");\n c.res.headers.set(\"Cross-Origin-Resource-Policy\", \"cross-origin\");\n});\n\n// Proxy route to vendor wasm-vips files and serve them from the same origin\napp.get(\"/vips/:filename\", async (c) => {\n const filename = c.req.param(\"filename\");\n const targetUrl =\n `https://cdn.jsdelivr.net/npm/wasm-vips@0.0.12/lib/${filename}`;\n\n const response = await fetch(targetUrl);\n if (!response.ok) {\n return c.text(`Failed to fetch ${filename}`, response.status);\n }\n\n // Create a new response to stream the body and apply the correct content type\n const contentType = response.headers.get(\"content-type\");\n return new Response(response.body, {\n status: response.status,\n headers: {\n ...(contentType ? { \"content-type\": contentType } : {}),\n },\n });\n});\n\napp.get(\"/\", serve(html, \"text/html\"));\napp.get(\"/styles.css\", serve(css, \"text/css\"));\napp.get(\"/main.js\", serve(js, \"text/javascript\"));\n\nexport default app.fetch;","/**\n * Multi-file client-side KRPano generator using wasm-vips and fflate.\n * Redesigned with a Qt6-inspired Light/Dark theme, guided wizard flow,\n * advanced upload support (paste/drop), visual SVG process indicators,\n * and a result file browser.\n */\nimport { serve } from \"https://esm.town/v/g/serveUtils\";\nimport { Hono } from \"npm:hono\";\n\nfunction html() {\n /*\n\n\n\n \n \n KRPano Multi-Res Generator\n \n \n\n\n

KRPano Generator Tool

\n \n \n

\n \n

Input Panorama

\n \n

Drag & Drop Equirectangular Image Here

or click to browse, or paste from clipboard

\n \n

No image selected.

\n\n

Settings

\n Tile Size\n \n

\n Resolution Levels\n \n

\n Nadir Patch (Optional)\n

\n \n No patch selected.\n \n

\n \n

\n\n \n

Panorama Preview

\n Interactive Pano Preview (To Be Integrated)\n

\n\n

Processing Status

\n \n

Equirectangular Source

\n \n

\n\n \n

Cube Face Tiles (Unfolded)

\n \n

\n \n \n

\n\n \n

Export Options

\n Project Name\n \n

\n \n \n\n

Archive Contents

\n \n \n

\n\n \n

\n\n\n */\n}\n\nfunction css() {\n /*\n:root {\n /* Qt Light Theme variables */\n --bg-window: #f0f0f0;\n --bg-surface: #ffffff;\n --bg-surface-alt: #fafafa;\n --border: #c0c0c0;\n --border-light: #e5e5e5;\n --text: #1a1a1a;\n --text-muted: #666666;\n --accent: #0066cc;\n --accent-hover: #0055aa;\n --accent-text: #ffffff;\n --shadow: rgba(0, 0, 0, 0.1);\n \n /* Processing SVG colors */\n --face-pending: #e5e5e5;\n --face-processing: #cce0ff;\n --face-done: #e6f4ea;\n --face-stroke: #b3b3b3;\n --tile-done: #34a853;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n /* Qt Dark Theme variables */\n --bg-window: #1e1e1e;\n --bg-surface: #2d2d2d;\n --bg-surface-alt: #252525;\n --border: #444444;\n --border-light: #3d3d3d;\n --text: #f0f0f0;\n --text-muted: #a0a0a0;\n --accent: #3399ff;\n --accent-hover: #66b3ff;\n --accent-text: #ffffff;\n --shadow: rgba(0, 0, 0, 0.4);\n\n /* Processing SVG colors */\n --face-pending: #333333;\n --face-processing: #1a3a5c;\n --face-done: #1e4d2b;\n --face-stroke: #555555;\n --tile-done: #4caf50;\n }\n}\n\n* { box-sizing: border-box; }\n\nbody {\n font-family: \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;\n background: var(--bg-window);\n color: var(--text);\n margin: 0;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n}\n\n/* Qt6 Window Layout */\n.qt-window {\n background: var(--bg-surface);\n width: 100%;\n max-width: 900px;\n height: 90vh;\n border-radius: 8px;\n border: 1px solid var(--border);\n box-shadow: 0 8px 24px var(--shadow);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.qt-header {\n background: var(--bg-surface-alt);\n padding: 12px 16px;\n border-bottom: 1px solid var(--border);\n font-weight: 600;\n font-size: 14px;\n}\n\n.qt-body {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n.qt-sidebar {\n width: 220px;\n background: var(--bg-surface-alt);\n border-right: 1px solid var(--border);\n padding: 1rem 0;\n}\n\n.step-item {\n padding: 12px 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n color: var(--text-muted);\n transition: background 0.2s;\n}\n.step-item.active {\n background: var(--bg-window);\n color: var(--accent);\n border-right: 3px solid var(--accent);\n}\n.step-num {\n width: 24px;\n height: 24px;\n border-radius: 12px;\n background: var(--border);\n color: var(--bg-surface);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: bold;\n}\n.step-item.active .step-num {\n background: var(--accent);\n}\n\n.qt-content {\n flex: 1;\n position: relative;\n overflow-y: auto;\n padding: 2rem;\n}\n\n.wizard-step {\n display: none;\n animation: fadeIn 0.3s ease;\n}\n.wizard-step.active {\n display: block;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(5px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\nh2 {\n margin-top: 0;\n font-size: 18px;\n font-weight: 600;\n border-bottom: 1px solid var(--border-light);\n padding-bottom: 8px;\n margin-bottom: 16px;\n}\n\n/* Upload Section */\n.dropzone {\n border: 2px dashed var(--border);\n border-radius: 8px;\n padding: 3rem 2rem;\n text-align: center;\n cursor: pointer;\n background: var(--bg-surface-alt);\n transition: all 0.2s ease;\n color: var(--text-muted);\n}\n.dropzone:hover, .dropzone.dragover {\n border-color: var(--accent);\n background: var(--face-processing);\n color: var(--accent);\n}\n.dropzone svg { margin-bottom: 1rem; }\n.drop-text { font-weight: 600; font-size: 16px; margin-bottom: 4px; }\n.drop-subtext { font-size: 13px; }\n\n.selected-file {\n margin-top: 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--accent);\n margin-bottom: 24px;\n}\n\n/* Forms */\n.form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n}\n.form-group.full-width { grid-column: span 2; }\nlabel {\n display: block;\n font-size: 13px;\n margin-bottom: 6px;\n color: var(--text-muted);\n}\ninput[type=\"text\"], select {\n width: 100%;\n padding: 8px 12px;\n border-radius: 4px;\n border: 1px solid var(--border);\n background: var(--bg-surface);\n color: var(--text);\n font-family: inherit;\n font-size: 14px;\n}\ninput[type=\"text\"]:focus, select:focus {\n outline: none;\n border-color: var(--accent);\n}\n\n.file-input-wrapper { display: flex; align-items: center; gap: 12px; }\n#nadirLabel { font-size: 13px; color: var(--text-muted); }\n\n/* Buttons */\nbutton {\n padding: 8px 16px;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n border: none;\n transition: all 0.2s;\n font-family: inherit;\n}\n.btn-primary {\n background: var(--accent);\n color: var(--accent-text);\n}\n.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }\n.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }\n\n.btn-secondary {\n background: var(--bg-surface-alt);\n border: 1px solid var(--border);\n color: var(--text);\n}\n.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }\n\n.footer-actions {\n margin-top: 32px;\n display: flex;\n justify-content: flex-end;\n padding-top: 16px;\n border-top: 1px solid var(--border-light);\n}\n.footer-actions.spread { justify-content: space-between; }\n\n/* Preview & Processing */\n.pano-preview-container {\n width: 100%;\n height: 180px;\n background: #000;\n border-radius: 4px;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #666;\n overflow: hidden;\n position: relative;\n border: 1px solid var(--border);\n}\n.pano-placeholder { font-size: 13px; letter-spacing: 0.5px; }\n\n.processing-visuals {\n display: flex;\n gap: 24px;\n margin-bottom: 24px;\n}\n.visual-box {\n background: var(--bg-surface-alt);\n border: 1px solid var(--border);\n border-radius: 4px;\n padding: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.visual-box.flex-grow { flex: 1; }\n.visual-label {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-muted);\n margin-bottom: 12px;\n}\n\n/* SVG Styling */\n.face-bg {\n fill: var(--face-pending);\n stroke: var(--face-stroke);\n stroke-width: 1;\n transition: fill 0.3s;\n}\n.face-label {\n fill: var(--text-muted);\n font-size: 24px;\n font-weight: bold;\n font-family: monospace;\n opacity: 0.3;\n}\n.face-group.status-processing .face-bg { fill: var(--face-processing); }\n.face-group.status-done .face-bg { fill: var(--face-done); }\n\n.tile-rect {\n fill: var(--tile-done);\n stroke: var(--bg-surface-alt);\n stroke-width: 0.5;\n opacity: 0;\n}\n.tile-rect.done { opacity: 1; }\n\n@keyframes scanAnim {\n 0% { transform: translateY(0); opacity: 0; }\n 20% { opacity: 1; }\n 80% { opacity: 1; }\n 100% { transform: translateY(90px); opacity: 0; }\n}\n.scanline.active {\n display: block;\n animation: scanAnim 1.5s infinite linear;\n}\n\n/* File Browser */\n.file-browser {\n background: var(--bg-surface);\n border: 1px solid var(--border);\n border-radius: 4px;\n padding: 12px;\n height: 250px;\n overflow-y: auto;\n font-family: monospace;\n font-size: 13px;\n}\n.tree, .tree ul {\n list-style-type: none;\n padding-left: 20px;\n margin: 0;\n}\n.tree { padding-left: 0; }\n.tree li {\n position: relative;\n padding: 4px 0 4px 16px;\n color: var(--text);\n}\n.tree li::before {\n content: \"├─ \";\n position: absolute;\n left: 0;\n color: var(--border);\n}\n.tree li:last-child::before { content: \"└─ \"; }\n.folder-icon { color: #f6b73c; margin-right: 4px; }\n.file-icon { color: var(--text-muted); margin-right: 4px; }\n */\n}\n\nfunction js() {\n /*\nimport Vips from '/vips/vips-es6.js';\nimport { Zip, ZipPassThrough } from 'https://esm.sh/fflate@0.8.2';\n\nlet vipsLib = null;\nlet sourceFile = null;\nlet nadirFile = null;\nlet currentZipBlob = null;\nlet zipPaths = [];\n\n// --- Wizard Logic ---\nfunction switchStep(stepIndex) {\n document.querySelectorAll('.wizard-step').forEach((el, i) => {\n el.classList.toggle('active', i === stepIndex);\n });\n document.querySelectorAll('.step-item').forEach((el, i) => {\n el.classList.toggle('active', i === stepIndex);\n });\n}\n\n// --- Init UI Events ---\ndocument.addEventListener('DOMContentLoaded', () => {\n const dropzone = document.getElementById('dropzone');\n const imageInput = document.getElementById('imageInput');\n const btnNext1 = document.getElementById('btnNext1');\n const btnBack1 = document.getElementById('btnBack1');\n const btnProcess = document.getElementById('btnProcess');\n const btnRestart = document.getElementById('btnRestart');\n \n // File Selection\n const handleFile = (file) => {\n if (!file || !file.type.startsWith('image/')) return;\n sourceFile = file;\n document.getElementById('selectedFileLabel').innerText = `Selected: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;\n document.getElementById('projectName').value = file.name.replace(/\\.[^/.]+$/, \"\");\n btnNext1.disabled = false;\n };\n\n dropzone.addEventListener('click', () => imageInput.click());\n dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('dragover'); });\n dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));\n dropzone.addEventListener('drop', (e) => {\n e.preventDefault();\n dropzone.classList.remove('dragover');\n handleFile(e.dataTransfer.files[0]);\n });\n imageInput.addEventListener('change', (e) => handleFile(e.target.files[0]));\n \n // Paste support\n window.addEventListener('paste', (e) => {\n const items = e.clipboardData.items;\n for (let item of items) {\n if (item.type.indexOf('image') === 0) {\n handleFile(item.getAsFile());\n break;\n }\n }\n });\n\n // Nadir\n const nadirBtn = document.getElementById('nadirBtn');\n const basesphereInput = document.getElementById('basesphereInput');\n nadirBtn.addEventListener('click', () => basesphereInput.click());\n basesphereInput.addEventListener('change', (e) => {\n if(e.target.files.length) {\n nadirFile = e.target.files[0];\n document.getElementById('nadirLabel').innerText = nadirFile.name;\n }\n });\n\n // Navigation\n btnNext1.addEventListener('click', () => switchStep(1));\n btnBack1.addEventListener('click', () => switchStep(0));\n btnProcess.addEventListener('click', startProcessing);\n btnRestart.addEventListener('click', () => {\n sourceFile = null;\n nadirFile = null;\n currentZipBlob = null;\n zipPaths = [];\n document.getElementById('selectedFileLabel').innerText = 'No image selected.';\n btnNext1.disabled = true;\n resetVisuals();\n switchStep(0);\n });\n\n document.getElementById('btnDownload').addEventListener('click', () => {\n if (!currentZipBlob) return;\n const name = document.getElementById('projectName').value || 'krpano_project';\n const url = URL.createObjectURL(currentZipBlob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `${name}.zip`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n });\n});\n\n// --- VIPS & Math ---\nasync function initVips() {\n if (vipsLib) return vipsLib;\n vipsLib = await Vips({\n mainScriptUrlOrBlob: '/vips/vips-es6.js',\n locateFile: (fileName) => `/vips/${fileName}`\n });\n if (vipsLib.Cache) vipsLib.Cache.max(0);\n return vipsLib;\n}\n\nasync function createCubeFaceLUT(vips, faceName, width, height, eqW, eqH) {\n const lut = new Float32Array(width * height * 2);\n let i = 0;\n const pi = Math.PI;\n const pi2 = 2.0 * pi;\n const wFactor = 2.0 / (width - 1);\n const hFactor = 2.0 / (height - 1);\n const eqWMinus1 = eqW - 1;\n const eqHMinus1 = eqH - 1;\n\n for (let y = 0; y < height; y++) {\n const v = 1.0 - y * hFactor;\n for (let x = 0; x < width; x++) {\n const u = x * wFactor - 1.0;\n let cx, cy, cz;\n switch (faceName) {\n case \"f\": cx = u; cy = v; cz = 1; break;\n case \"b\": cx = -u; cy = v; cz = -1; break;\n case \"l\": cx = -1; cy = v; cz = u; break;\n case \"r\": cx = 1; cy = v; cz = -u; break;\n case \"u\": cx = u; cy = 1; cz = -v; break;\n case \"d\": cx = u; cy = -1; cz = v; break;\n }\n const r = Math.sqrt(cx * cx + cy * cy + cz * cz);\n let normY = cy / r;\n if (normY < -1.0) normY = -1.0; else if (normY > 1.0) normY = 1.0;\n const theta = Math.acos(normY);\n const phi = Math.atan2(cx, cz);\n lut[i++] = ((phi + pi) / pi2) * eqWMinus1;\n lut[i++] = (theta / pi) * eqHMinus1;\n }\n if (y % 128 === 0) await new Promise(r => setTimeout(r, 0));\n }\n return {\n lutImg: vips.Image.newFromMemory(new Uint8Array(lut.buffer), width, height, 2, \"float\"),\n lutBuffer: lut,\n };\n}\n\n// --- Processing Logic & UI Binding ---\nfunction resetVisuals() {\n document.querySelectorAll('.face-group').forEach(el => {\n el.className.baseVal = 'face-group'; // SVG classList reset\n el.querySelector('.tile-grid').innerHTML = '';\n });\n document.getElementById('cylinderScan').classList.remove('active');\n}\n\nfunction setFaceStatus(face, status, numTiles = 1) {\n const el = document.getElementById(`face-${face}`);\n if(!el) return;\n el.className.baseVal = `face-group status-${status}`;\n \n // Setup grid for processing phase based on highest level tiles\n if(status === 'processing') {\n const grid = el.querySelector('.tile-grid');\n grid.innerHTML = '';\n const cellSize = 60 / numTiles;\n for(let ty=0; ty {\n const parts = path.split('/');\n let current = tree;\n parts.forEach((part, i) => {\n if (!current[part]) current[part] = (i === parts.length - 1) ? null : {};\n current = current[part];\n });\n });\n\n // Recursive render\n function renderNode(obj, container) {\n for (const key in obj) {\n const li = document.createElement('li');\n const isFile = obj[key] === null;\n li.innerHTML = `${isFile ? '📄' : '📁'} ${key}`;\n container.appendChild(li);\n if (!isFile) {\n const ul = document.createElement('ul');\n li.appendChild(ul);\n renderNode(obj[key], ul);\n }\n }\n }\n renderNode(tree, root);\n}\n\nasync function startProcessing() {\n const btnProcess = document.getElementById('btnProcess');\n btnProcess.disabled = true;\n btnProcess.innerText = \"Initializing VIPS...\";\n resetVisuals();\n document.getElementById('cylinderScan').classList.add('active');\n\n try {\n await initVips();\n \n const tileSize = parseInt(document.getElementById('tileSize').value, 10);\n const levelsArg = document.getElementById('levels').value;\n const projectName = document.getElementById('projectName').value;\n\n btnProcess.innerText = \"Loading Image Data...\";\n const arrayBuffer = await sourceFile.arrayBuffer();\n let sourceImg = vipsLib.Image.newFromBuffer(new Uint8Array(arrayBuffer));\n\n if (nadirFile) {\n const baseBuffer = await nadirFile.arrayBuffer();\n const baseImg = vipsLib.Image.newFromBuffer(new Uint8Array(baseBuffer));\n const resizedBase = baseImg.resize(sourceImg.width / baseImg.width, { vscale: sourceImg.height / baseImg.height });\n const composited = sourceImg.composite(resizedBase, \"over\");\n sourceImg.delete(); resizedBase.delete(); baseImg.delete();\n sourceImg = composited;\n }\n\n const fullWidth = sourceImg.width;\n let cubeWidth = Math.floor(fullWidth / 4);\n if (cubeWidth % 2 !== 0) cubeWidth -= 1;\n\n let maxLevels = parseInt(levelsArg, 10);\n if (isNaN(maxLevels)) maxLevels = Math.max(1, Math.ceil(Math.log2(cubeWidth / tileSize)));\n\n const zipChunks = [];\n zipPaths = [];\n \n const zip = new Zip((err, dat, final) => {\n if (err) throw err;\n if (dat.length > 0) zipChunks.push(dat);\n if (final) {\n currentZipBlob = new Blob(zipChunks, { type: 'application/zip' });\n buildFileTree();\n switchStep(2); // Move to Result step\n btnProcess.disabled = false;\n btnProcess.innerText = \"Start Processing\";\n }\n });\n\n const pushToZip = (path, buffer) => {\n zipPaths.push(path);\n const zFile = new ZipPassThrough(path);\n zip.add(zFile);\n zFile.push(buffer, true);\n };\n\n const faces = [\"l\", \"f\", \"r\", \"b\", \"u\", \"d\"];\n const previewStrips = [];\n\n for (const face of faces) {\n btnProcess.innerText = `Processing Face: ${face.toUpperCase()}`;\n \n // Highest level dictates the UI grid subdivision\n const highestLevelNumTiles = Math.pow(2, maxLevels);\n setFaceStatus(face, 'processing', highestLevelNumTiles);\n\n const { lutImg, lutBuffer } = await createCubeFaceLUT(\n vipsLib, face, cubeWidth, cubeWidth, sourceImg.width, sourceImg.height\n );\n const faceImg = sourceImg.mapim(lutImg);\n lutImg.delete();\n\n const previewFaceLazy = faceImg.resize(256 / cubeWidth, { vscale: 256 / cubeWidth });\n previewStrips.push(previewFaceLazy.copyMemory());\n previewFaceLazy.delete();\n\n if (face === \"f\") {\n const thumbImg = faceImg.resize(240 / cubeWidth, { vscale: 240 / cubeWidth });\n pushToZip(`panos/${projectName}/thumb.jpg`, thumbImg.writeToBuffer(\".jpg\"));\n thumbImg.delete();\n }\n\n for (let l = 1; l <= maxLevels; l++) {\n const numTiles = Math.pow(2, l);\n const scale = (numTiles * tileSize) / cubeWidth;\n const scaledFace = scale === 1 ? faceImg : faceImg.resize(scale);\n\n // Multiplier to map current level tiles to highest level UI grid cells\n const uiScale = highestLevelNumTiles / numTiles;\n\n for (let ty = 0; ty < numTiles; ty++) {\n for (let tx = 0; tx < numTiles; tx++) {\n const tileImg = scaledFace.extractArea(tx * tileSize, ty * tileSize, tileSize, tileSize);\n pushToZip(\n `panos/${projectName}/${face}/l${l}/${ty+1}/l${l}_${face}_${ty+1}_${tx+1}.jpg`,\n tileImg.writeToBuffer(\".jpg\")\n );\n tileImg.delete();\n \n // If we are at the highest level, update the UI grid visual\n if(l === maxLevels) {\n markTileDone(face, tx, ty);\n }\n }\n await new Promise(r => setTimeout(r, 0)); // yield to UI\n }\n if (scale !== 1) scaledFace.delete();\n }\n faceImg.delete();\n void lutBuffer.byteLength;\n setFaceStatus(face, 'done');\n }\n\n btnProcess.innerText = `Finalizing Archive...`;\n document.getElementById('cylinderScan').classList.remove('active');\n sourceImg.delete();\n\n const previewStrip = vipsLib.Image.arrayjoin(previewStrips, { across: 1 });\n pushToZip(`panos/${projectName}/preview.jpg`, previewStrip.writeToBuffer(\".jpg\"));\n previewStrip.delete();\n previewStrips.forEach(p => p.delete());\n\n let multiresStr = `${tileSize}`;\n for (let l = 1; l <= maxLevels; l++) multiresStr += `,${Math.pow(2, l) * tileSize}`;\n\n const xmlContent = `\\n\\t\\n\\t\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\t\\n\\t\\t\\n\\t\\n`;\n pushToZip(`krpano.xml`, new TextEncoder().encode(xmlContent));\n \n zip.end();\n \n } catch (error) {\n console.error(error);\n btnProcess.innerText = `Error: ${error.message}`;\n btnProcess.disabled = false;\n document.getElementById('cylinderScan').classList.remove('active');\n }\n}\n */\n}\n\nconst app = new Hono();\n\napp.use(\"*\", async (c, next) => {\n await next();\n c.res.headers.set(\"Cross-Origin-Embedder-Policy\", \"require-corp\");\n c.res.headers.set(\"Cross-Origin-Opener-Policy\", \"same-origin\");\n c.res.headers.set(\"Cross-Origin-Resource-Policy\", \"cross-origin\");\n});\n\napp.get(\"/vips/:filename\", async (c) => {\n const filename = c.req.param(\"filename\");\n const targetUrl = `https://cdn.jsdelivr.net/npm/wasm-vips@0.0.12/lib/${filename}`;\n const response = await fetch(targetUrl);\n if (!response.ok) return c.text(`Failed to fetch ${filename}`, response.status);\n\n const contentType = response.headers.get(\"content-type\");\n return new Response(response.body, {\n status: response.status,\n headers: { ...(contentType ? { \"content-type\": contentType } : {}) },\n });\n});\n\napp.get(\"/\", serve(html, \"text/html\"));\napp.get(\"/styles.css\", serve(css, \"text/css\"));\napp.get(\"/main.js\", serve(js, \"text/javascript\"));\n\nexport default app.fetch;","createdAt",["D",1785418251607],"branchVersion","branchId","b548fb06-81db-43ca-8f4e-42c5cc5f1c14","id","c269aa17-24f6-4686-a9f1-fc4e868e7cd0","pano-maker-clientside",["D",1785417282825],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","8d6857d3-cf1c-4e98-a094-0e379c10badf","pinnedFileId","a0dfebd8-8c18-11f1-8e7e-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","4f4797d6-1767-45ca-8dc5-5113174ca1c1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":50,"_94":44,"_95":65,"_96":45,"_97":98},"isOwned",3,"qt-design","projectId","forkedBranchId","36dc2df5-d4b7-4e45-9cda-66de46537365","forkedBranchVersion",8,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","g","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJqRlBqSjdFTUlTVmVORmpObmFqZmJLVWh5VCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":159,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":160,"_81":161,"_83":162,"_85":25},"tree",[154],"files",[154],"counts",{"_144":63,"_145":86,"_146":63,"_147":148,"_149":150},"contents",[136],"upstreamProject","upstreamBranch",{"_43":90,"_38":129,"_130":131,"_32":132,"_88":44,"_13":133,"_89":-5,"_91":-5,"_134":135,"_47":-5,"_85":25,"_49":50,"_97":98,"_64":65,"_96":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1785417282865],"updatedAt",["D",1785421345513],"main",9,"lockfileKey","1785421345611-esm.town_v_g_pano-maker-clientside@9-main",{"_43":137,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_139":25,"_38":140,"_13":141,"_33":34,"_35":37,"_24":25,"_142":-5,"_27":143},"0ddafeee-7151-469e-b8de-129dce05489d","parentId","latest",["D",1785418251607],1,"label",[28],"pulls","branches","forks","envVars",{"_151":63,"_153":63},"connections",{"_151":63,"_152":63},"count","unfilledCount","emptyCount",{"_43":137,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_139":25,"_38":155,"_13":141,"_33":34,"_35":37,"_24":25,"_142":-5,"_156":157,"_27":158},["D",1785418251607],"children",[],[28],["D",1785417282825],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":50,"_94":44,"_95":65,"_96":45,"_97":98},"ctx",{"_79":-5,"_126":196,"_197":198,"_199":200,"_201":25,"_202":25,"_203":25,"_204":59,"_205":-5,"_206":-7,"_207":-7,"_208":63,"_209":25,"_210":25,"_211":-5,"_212":25,"_213":25,"_214":25,"_215":-5},"ENV",{"_167":168,"_169":170,"_171":132,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195},"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"]

Diff · v2