Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sprite Forge — Pixel Art Dataset Builder</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- ================= topbar ================= --> | |
| <header class="topbar"> | |
| <div class="brand"> | |
| <span class="brand-mark" aria-hidden="true"> | |
| <span></span><span></span><span></span><span></span> | |
| <span></span><span></span><span></span><span></span> | |
| <span></span><span></span><span></span><span></span> | |
| <span></span><span></span><span></span><span></span> | |
| </span> | |
| SPRITE FORGE | |
| </div> | |
| <div class="topbar-actions"> | |
| <button class="btn" id="btn-upload-images">Upload Images</button> | |
| <button class="btn" id="btn-upload-zip">Upload ZIP</button> | |
| <input type="file" id="file-input-images" accept=".png,.jpg,.jpeg,.webp" multiple hidden> | |
| <input type="file" id="file-input-zip" accept=".zip" hidden> | |
| </div> | |
| <div class="topbar-spacer"></div> | |
| <div class="topbar-stat" id="topbar-summary">no sheets loaded</div> | |
| </header> | |
| <!-- ================= workspace ================= --> | |
| <main class="workspace"> | |
| <!-- ---- left: sheets + upload options ---- --> | |
| <aside class="pane pane-left" id="pane-left"> | |
| <div class="pane-section"> | |
| <p class="pane-label">Upload</p> | |
| <div class="dropzone" id="dropzone"> | |
| <div class="dropzone-icon">▚▞</div> | |
| Drop sprite sheets or a ZIP here<br>or click Upload above | |
| </div> | |
| <p class="pane-label" style="margin-top:14px;">Padding (px)</p> | |
| <div class="padding-row" id="padding-row"> | |
| <button class="padding-chip active" data-padding="0">0</button> | |
| <button class="padding-chip" data-padding="1">1</button> | |
| <button class="padding-chip" data-padding="2">2</button> | |
| <button class="padding-chip" data-padding="4">4</button> | |
| <button class="padding-chip" data-padding="8">8</button> | |
| </div> | |
| </div> | |
| <div class="pane-section"> | |
| <p class="pane-label">Sheets</p> | |
| <div id="sheet-list"> | |
| <p class="empty-hint">Nothing uploaded yet. A sheet can be a single sprite or a full sheet with hundreds — either works.</p> | |
| </div> | |
| </div> | |
| <!-- ---- bulk metadata assignment ---- --> | |
| <div class="pane-section" style="border-bottom:none;"> | |
| <p class="pane-label">Bulk assign</p> | |
| <p class="empty-hint" style="margin:0 0 8px;"> | |
| Label a whole sheet at once. When everything you just uploaded is | |
| the same kind of thing, this is the difference between labelled | |
| data and a pile of <span class="mono">unknown</span>. | |
| </p> | |
| <div class="field-group"> | |
| <label class="field-label">Apply to</label> | |
| <select class="field-select" id="bulk-scope"> | |
| <option value="sheet">Current sheet</option> | |
| <option value="status">All pending sprites</option> | |
| <option value="all">Everything</option> | |
| </select> | |
| </div> | |
| <div class="field-group"> | |
| <label class="field-label">Category</label> | |
| <input class="field-input" id="bulk-category" list="bulk-category-options" placeholder="leave blank to keep"> | |
| <datalist id="bulk-category-options"></datalist> | |
| </div> | |
| <div class="field-group"> | |
| <label class="field-label">Style</label> | |
| <input class="field-input" id="bulk-style" list="bulk-style-options" placeholder="leave blank to keep"> | |
| <datalist id="bulk-style-options"></datalist> | |
| </div> | |
| <div class="field-group"> | |
| <label class="field-label">Add tags <span class="field-hint">comma separated</span></label> | |
| <input class="field-input" id="bulk-tags" placeholder="e.g. forest, tree"> | |
| <label class="checkbox-row"> | |
| <input type="checkbox" id="bulk-replace-tags"> | |
| <span>Replace existing tags instead of adding</span> | |
| </label> | |
| </div> | |
| <button class="btn btn-sm btn-block btn-primary" id="btn-bulk-apply">Apply to selection</button> | |
| <p class="empty-hint" id="bulk-scope-hint" style="margin-top:6px;"></p> | |
| </div> | |
| </aside> | |
| <!-- ---- center: canvas with numbered bbox overlay ---- --> | |
| <section class="pane-center" id="pane-center"> | |
| <div class="canvas-toolbar"> | |
| <span class="canvas-toolbar-title" id="canvas-title">No sheet selected</span> | |
| <div class="canvas-toolbar-spacer"></div> | |
| <div class="zoom-controls" id="zoom-controls" style="display:none;"> | |
| <button class="btn btn-sm btn-ghost" id="btn-animate">▶ Animate</button> | |
| <button class="btn btn-sm btn-ghost" id="zoom-out">−</button> | |
| <span id="zoom-label">100%</span> | |
| <button class="btn btn-sm btn-ghost" id="zoom-in">+</button> | |
| <button class="btn btn-sm btn-ghost" id="zoom-reset">Reset</button> | |
| </div> | |
| </div> | |
| <div class="canvas-scroll" id="canvas-scroll"> | |
| <div class="canvas-empty" id="canvas-empty"> | |
| <div class="canvas-empty-mark">░▒▓</div> | |
| Upload a sprite sheet to begin.<br> | |
| Detected sprites will appear here as numbered boxes — | |
| <span style="color:var(--accent)">green</span> for high confidence, | |
| <span style="color:var(--warn)">amber</span> for ones worth a second look. | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ---- right: inspector ---- --> | |
| <aside class="pane pane-right" id="pane-right"> | |
| <div id="inspector"> | |
| <div class="inspector-empty"> | |
| Select a sprite on the canvas to review it here. | |
| </div> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- ================= status bar ================= --> | |
| <footer class="statusbar"> | |
| <div class="stat"><span class="stat-dot pending"></span>pending <b id="stat-pending">0</b></div> | |
| <div class="stat"><span class="stat-dot accepted"></span>accepted <b id="stat-accepted">0</b></div> | |
| <div class="stat"><span class="stat-dot rejected"></span>rejected <b id="stat-rejected">0</b></div> | |
| <div class="stat"><span class="stat-dot duplicates"></span>duplicates <b id="stat-duplicates">0</b></div> | |
| <div class="statusbar-spacer"></div> | |
| <div class="batch-controls"> | |
| <button class="btn btn-sm" id="btn-accept-above">Accept All Above 90</button> | |
| <button class="btn btn-sm" id="btn-dedupe-keep-one">Keep One of Each</button> | |
| <button class="btn btn-sm" id="btn-reject-dupes">Reject Duplicates</button> | |
| <button class="btn btn-sm" id="btn-review-low-conf">Review Low Confidence</button> | |
| <button class="btn btn-sm" id="btn-dataset-report">Dataset Report</button> | |
| <button class="btn btn-primary btn-sm" id="btn-upload-hf">Upload to Dataset →</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <div id="toast-stack" aria-live="polite"></div> | |
| <div id="modal-root"></div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |