KRPano Multi-Res Generator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":44,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","g","name","pano-maker-clientside","branchName","main","version","path","","project",{"_33":62,"_13":14,"_45":63,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":19,"_70":-5,"_71":72,"_73":37,"_74":44,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":95,"_96":97,"_98":99,"_100":53},"tree",[57],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":56},"id","108eaaa3-3e7f-4e35-b22c-2a3cb3b10176","main.ts","fileId","a0dfebd8-8c18-11f1-8e7e-1607ee4eb77e","parentId","branchId","36dc2df5-d4b7-4e45-9cda-66de46537365","branchVersion",9,"latest",true,"createdAt",["D",1785421345513],8,"fileType","http","content","/**\n * Multi-file client-side KRPano generator using wasm-vips and fflate.\n * Includes Qt6 UI, animated processing SVGs, base zip hydration,\n * a dedicated fullscreen-like preview step, and proxied KRPano resources.\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\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

Initializing viewer resources...

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

Processing Status

\n \n

Equirectangular Source

\n \n

\n\n \n

Cube Face Tiles (Unfolded)

\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: 1200px;\n height: 95vh;\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 flex-shrink: 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 { background: var(--accent); }\n\n.qt-content {\n flex: 1;\n position: relative;\n overflow-y: auto;\n padding: 2rem;\n display: flex;\n flex-direction: column;\n}\n\n.wizard-step {\n display: none;\n animation: fadeIn 0.3s ease;\n}\n.wizard-step.active { display: block; }\n.wizard-step.flex-step.active { display: flex; flex-direction: column; height: 100%; }\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#loadingStatus {\n color: var(--text-muted);\n font-style: italic;\n margin-bottom: 0px;\n}\n\n.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.form-group.full-width { grid-column: span 2; }\nlabel { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text-muted); }\ninput[type=\"text\"], select {\n width: 100%; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--border);\n background: var(--bg-surface); color: var(--text); font-family: inherit; font-size: 14px;\n}\ninput[type=\"text\"]:focus, select:focus { outline: none; border-color: var(--accent); }\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; border-radius: 4px; font-size: 14px; font-weight: 600;\n cursor: pointer; border: none; transition: all 0.2s; font-family: inherit;\n}\n.btn-primary { background: var(--accent); color: var(--accent-text); }\n.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }\n.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }\n\n.btn-secondary { background: var(--bg-surface-alt); border: 1px solid var(--border); color: var(--text); }\n.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }\n\n.footer-actions { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--border-light); }\n.footer-actions.spread { justify-content: space-between; }\n\n.pano-preview-container {\n flex: 1;\n width: 100%; min-height: 400px; background: #000; border-radius: 4px;\n margin-bottom: 16px; display: flex; align-items: center; justify-content: center;\n color: #666; overflow: hidden; position: relative; border: 1px solid var(--border);\n}\n\n.processing-visuals { display: flex; gap: 24px; margin-bottom: 24px; }\n.visual-box {\n background: var(--bg-surface-alt); border: 1px solid var(--border);\n border-radius: 4px; padding: 16px; display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n}\n.visual-box.flex-grow { flex: 1; }\n.visual-label {\n font-size: 12px; text-transform: uppercase; letter-spacing: 1px;\n color: var(--text-muted); margin-bottom: 12px;\n}\n\n.face-bg { fill: var(--face-pending); stroke: var(--face-stroke); stroke-width: 1; transition: fill 0.3s; }\n.face-label { fill: var(--text-muted); font-size: 24px; font-weight: bold; font-family: monospace; opacity: 0.3; }\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 { fill: var(--tile-done); stroke: var(--bg-surface-alt); stroke-width: 0.5; opacity: 0; }\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 { display: block; animation: scanAnim 1.5s infinite linear; }\n\n.file-browser {\n background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px;\n padding: 12px; height: 250px; overflow-y: auto; font-family: monospace; font-size: 13px;\n}\n.tree, .tree ul { list-style-type: none; padding-left: 20px; margin: 0; }\n.tree { padding-left: 0; }\n.tree li { position: relative; padding: 4px 0 4px 16px; color: var(--text); }\n.tree li::before { content: \"├─ \"; position: absolute; left: 0; color: var(--border); }\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, unzipSync } from 'https://esm.sh/fflate@0.8.2';\n\nconst previewXml = `\n\n \n \n

Input Panorama

Settings

Processing Status

Export Options

Archive Contents

Code