KRPano Multi-Res Generator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_107":71,"_41":-7,"_108":-5,"_17":109,"_110":111,"_112":113,"_114":115,"_116":117,"_118":-5,"_119":-5,"_120":121,"_122":26,"_123":124,"_125":78,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","g","name","pano-maker-clientside","branchName","qt-design","project",{"_32":40,"_13":14,"_34":67,"_47":-5,"_68":26,"_49":50,"_69":50,"_70":71,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":-5,"_81":20,"_52":53,"_82":-5,"_83":-5,"_84":-5,"_85":-5,"_86":87,"_88":87,"_89":90,"_91":90,"_92":90,"_93":87,"_94":87,"_95":96,"_97":98,"_99":28,"_48":26},"ahead",0,"behind",2,"diff",{"_61":62,"_63":64,"_65":66},"hasChanges",false,"sourceBranch",{"_41":55,"_13":16,"_32":56,"_39":40,"_43":33,"_44":57,"_58":50,"_59":40,"_60":53,"_54":14,"_51":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":38,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":26,"_49":50,"_51":12,"_52":53,"_54":14},"pull","id","36dc2df5-d4b7-4e45-9cda-66de46537365","createdAt",["D",1785417282865],"updatedAt",["D",1785421345513],"main","projectId","c269aa17-24f6-4686-a9f1-fc4e868e7cd0","version",9,"forkedBranchId","forkedBranchVersion","lockfileKey","1785421345611-esm.town_v_g_pano-maker-clientside@9-main","deletedAt","isOwned","privacy","public","userHandle","orgId","4f4797d6-1767-45ca-8dc5-5113174ca1c1","projectName",3,"b548fb06-81db-43ca-8f4e-42c5cc5f1c14",8,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[],"modified",[],["D",1785417282825],"legacyEnvVars","httpPrivacy","description","","imageUrl","userId","8d6857d3-cf1c-4e98-a094-0e379c10badf","pinnedFileId","a0dfebd8-8c18-11f1-8e7e-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_106":102},"org",{"_11":12,"_100":-5,"_101":102,"_73":74,"_103":104,"_105":26},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJqRlBqSjdFTUlTVmVORmpObmFqZmJLVWh5VCJ9","tier","free","canRestrictVals","profileImageUrl","path","adoptOrgId",{"_32":40,"_13":14,"_34":163,"_47":-5,"_68":26,"_49":50,"_69":50,"_70":71,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":-5,"_81":20,"_52":53,"_82":-5,"_83":-5,"_84":-5,"_85":-5,"_86":87,"_88":87,"_89":90,"_91":90,"_92":90,"_93":87,"_94":87,"_95":164,"_97":165,"_99":166,"_48":26},"tree",[158],"files",[158],"counts",{"_148":20,"_149":55,"_150":20,"_151":152,"_153":154},"contents",[132],"file","upstreamProject","upstreamBranch",{"_32":33,"_34":130,"_36":131,"_13":38,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":26,"_49":50,"_51":12,"_52":53,"_54":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1785417282865],["D",1785421345513],{"_32":133,"_13":134,"_135":136,"_137":-5,"_138":56,"_139":55,"_140":78,"_34":141,"_41":22,"_142":143,"_144":145,"_63":26,"_146":-5,"_107":147},"165d12be-18f7-4132-9a61-c4f400449515","main.ts","fileId","019fb331-f42e-7336-8133-07cc0e01ee06","parentId","branchId","branchVersion","latest",["D",1785418310382],"fileType","http","content","/**\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

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 --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 --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 --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 --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.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.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.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\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.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.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 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 =\n `https://cdn.jsdelivr.net/npm/wasm-vips@0.0.12/lib/${filename}`;\n const response = await fetch(targetUrl);\n if (!response.ok) {\n return c.text(`Failed to fetch ${filename}`, response.status);\n }\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;","label",[134],"pulls","branches","forks","envVars",{"_155":20,"_157":20},"connections",{"_155":20,"_156":20},"count","unfilledCount","emptyCount",{"_32":133,"_13":134,"_135":136,"_137":-5,"_138":56,"_139":55,"_140":78,"_34":159,"_41":22,"_142":143,"_144":145,"_63":26,"_146":-5,"_160":161,"_107":162},["D",1785418310382],"children",[],[134],["D",1785417282825],{"_11":12,"_106":102},{"_11":12,"_100":-5,"_101":102,"_73":74,"_103":104,"_105":26},{"_41":55,"_13":16,"_32":56,"_39":40,"_43":33,"_44":57,"_58":50,"_59":40,"_60":53,"_54":14,"_51":12},"ctx",{"_95":-5,"_127":200,"_201":202,"_203":204,"_205":26,"_206":26,"_207":26,"_208":78,"_209":-5,"_210":-7,"_211":-7,"_212":20,"_213":26,"_214":26,"_215":-5,"_216":26,"_217":26,"_218":26,"_219":-5},"ENV",{"_171":172,"_173":174,"_175":38,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199},"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"]

Compare

Mergeqt-designintomain