Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>Structura AI | Professional Analysis</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <aside class="sidebar"> | |
| <div class="logo-area"> | |
| <div class="logo-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> | |
| </svg> | |
| </div> | |
| <span>Structura</span> | |
| </div> | |
| <div class="control-group"> | |
| <label class="section-label">Input Source</label> | |
| <div id="dropZone" class="upload-box"> | |
| <input id="fileInput" type="file" accept="image/*" /> | |
| <span class="upload-icon">↑</span> | |
| <p>Click or Drop Image</p> | |
| </div> | |
| </div> | |
| <div class="control-group disabled" id="settingsGroup"> | |
| <label class="section-label">Visualization</label> | |
| <div class="setting-item"> | |
| <label>Mask Tint</label> | |
| <input id="color" type="color" value="#3b82f6" /> | |
| </div> | |
| <div class="setting-item"> | |
| <label>Overlay Opacity <span id="opacityVal">60%</span></label> | |
| <input id="opacity" type="range" min="0" max="100" value="60" /> | |
| </div> | |
| <div class="divider"></div> | |
| <button id="processBtn" class="btn btn-primary full-width"> | |
| <span>Generate Structure</span> | |
| </button> | |
| <button id="downloadBtn" class="btn btn-secondary full-width" disabled> | |
| Download Result | |
| </button> | |
| </div> | |
| <div class="sidebar-footer"> | |
| <div class="stat-row"> | |
| <span>Inference</span> | |
| <span id="timeInfo" class="mono">—</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span>Resolution</span> | |
| <span id="resInfo" class="mono">—</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <main class="workspace"> | |
| <header class="toolbar"> | |
| <div class="tabs"> | |
| <button class="tab active" data-view="overlay">Composite</button> | |
| <button class="tab" data-view="mask">Mask Only</button> | |
| <button class="tab" data-view="original">Original</button> | |
| </div> | |
| <div class="status-indicator" id="statusIndicator">Ready</div> | |
| </header> | |
| <div class="viewport"> | |
| <div id="emptyState" class="empty-state"> | |
| <div class="empty-icon">⬚</div> | |
| <h3>No Image Loaded</h3> | |
| <p>Upload an image to begin analysis.</p> | |
| </div> | |
| <div id="canvasContainer" class="canvas-container hidden"> | |
| <canvas id="mainCanvas"></canvas> | |
| </div> | |
| <div id="loader" class="loader-overlay hidden"> | |
| <div class="spinner"></div> | |
| <div class="loading-text"> | |
| <span id="loadingStep">Processing...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> |