Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Apartment Inspector - SAM 2 & Grounding DINO Dashboard</title> | |
| <!-- Google Fonts --> | |
| <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=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <!-- FontAwesome icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Vanilla CSS stylesheet --> | |
| <link rel="stylesheet" href="/static/css/styles.css"> | |
| </head> | |
| <body> | |
| <div class="glass-bg"></div> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="app-header"> | |
| <div class="logo"> | |
| <i class="fa-solid fa-house-laptop logo-icon"></i> | |
| <div class="logo-text"> | |
| <h1>Apartment Inspector</h1> | |
| <span>Smart Asset Damage & Missing Item Evaluator</span> | |
| </div> | |
| </div> | |
| <div class="status-indicator"> | |
| <span class="pulse-dot"></span> | |
| <span id="backend-status-text">System Ready</span> | |
| </div> | |
| </header> | |
| <!-- Main Layout Grid --> | |
| <main class="app-grid"> | |
| <!-- Left Side: Config & Uploads --> | |
| <section class="card config-card"> | |
| <h2 class="section-title"><i class="fa-solid fa-sliders"></i> Configuration & Upload</h2> | |
| <form id="upload-form" enctype="multipart/form-data"> | |
| <!-- Target Inspection Items Prompt --> | |
| <div class="input-group"> | |
| <label for="prompt-input"> | |
| Target Inspection Items | |
| <span class="tooltip" data-tooltip="Define what objects to track and compare. Separate by commas."> | |
| <i class="fa-solid fa-circle-info"></i> | |
| </span> | |
| </label> | |
| <textarea id="prompt-input" name="prompt" rows="3" placeholder="sofa, tv, refrigerator, door, window, bed, microwave, sink">door, sofa, cabinet, refrigerator, tv, table, microwave, chair, toilet, bed, window</textarea> | |
| </div> | |
| <!-- Speed & Resolution Settings --> | |
| <div class="settings-row"> | |
| <div class="input-group half"> | |
| <label for="speed-mode-select">Speed Mode</label> | |
| <select id="speed-mode-select" class="styled-select"> | |
| <option value="super-fast">Super Fast (360p)</option> | |
| <option value="fast" selected>Fast (480p) - Recommended</option> | |
| <option value="detailed">Detailed (720p)</option> | |
| </select> | |
| </div> | |
| <div class="input-group half"> | |
| <label for="fps-select">Frame Rate (FPS)</label> | |
| <select id="fps-select" class="styled-select"> | |
| <option value="0.25">0.25 FPS (Ultra Fast)</option> | |
| <option value="0.5">0.5 FPS (Super Fast)</option> | |
| <option value="1.0">1.0 FPS (Fast)</option> | |
| <option value="2.0" selected>2.0 FPS (Normal)</option> | |
| <option value="3.0">3.0 FPS (Detailed)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Gemini AI Key --> | |
| <div class="input-group"> | |
| <label for="gemini-key-input"> | |
| Gemini API Key (Optional) | |
| <span class="tooltip" data-tooltip="Enter your Gemini API Key to enable AI-powered condition analysis and explanations."> | |
| <i class="fa-solid fa-circle-info"></i> | |
| </span> | |
| </label> | |
| <input type="password" id="gemini-key-input" placeholder="AI final judgment key..." class="styled-input"> | |
| </div> | |
| <!-- Upload Zone: Before Video --> | |
| <div class="upload-box" id="upload-before-zone"> | |
| <input type="file" id="video-before" name="video_before" accept="video/mp4" class="file-input"> | |
| <div class="upload-content"> | |
| <i class="fa-solid fa-cloud-arrow-up upload-icon before-icon"></i> | |
| <h3>Before Renting Video</h3> | |
| <p class="file-name-display" id="before-file-name">Drag & drop or click to upload (.mp4)</p> | |
| </div> | |
| </div> | |
| <!-- Upload Zone: After Video --> | |
| <div class="upload-box" id="upload-after-zone"> | |
| <input type="file" id="video-after" name="video_after" accept="video/mp4" class="file-input"> | |
| <div class="upload-content"> | |
| <i class="fa-solid fa-cloud-arrow-up upload-icon after-icon"></i> | |
| <h3>After Renting Video</h3> | |
| <p class="file-name-display" id="after-file-name">Drag & drop or click to upload (.mp4)</p> | |
| </div> | |
| </div> | |
| <!-- Action buttons --> | |
| <div class="actions"> | |
| <button type="submit" id="upload-btn" class="btn btn-primary"> | |
| <i class="fa-solid fa-arrow-up-from-bracket"></i> Upload Videos | |
| </button> | |
| <button type="button" id="start-btn" class="btn btn-accent btn-disabled" disabled> | |
| <i class="fa-solid fa-play"></i> Run Asset Evaluation | |
| </button> | |
| <button type="button" id="reset-btn" class="btn btn-danger"> | |
| <i class="fa-solid fa-rotate-left"></i> Reset | |
| </button> | |
| </div> | |
| </form> | |
| <!-- Processing Screen / Status details --> | |
| <div class="processing-overlay hidden" id="processing-view"> | |
| <div class="progress-container"> | |
| <div class="spinner"> | |
| <div class="double-bounce1"></div> | |
| <div class="double-bounce2"></div> | |
| </div> | |
| <h2>Evaluating Apartment Videos</h2> | |
| <p id="progress-status">Starting up SAM 2 tracker...</p> | |
| <div class="progress-bar-bg"> | |
| <div class="progress-bar-fill" id="progress-fill" style="width: 0%;"></div> | |
| </div> | |
| <span class="progress-percentage" id="progress-pct">0%</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Right Side: Results & Video Outputs --> | |
| <section class="card results-card"> | |
| <h2 class="section-title"><i class="fa-solid fa-chart-line"></i> Evaluation Report</h2> | |
| <!-- Welcome/Placeholder Message --> | |
| <div class="placeholder-msg" id="results-placeholder"> | |
| <i class="fa-solid fa-wand-magic-sparkles placeholder-icon"></i> | |
| <h3>No Active Evaluation</h3> | |
| <p>Upload your apartment condition videos (Before & After renting) on the left panel, configure the asset prompts, and run the evaluation to generate the report.</p> | |
| </div> | |
| <!-- Main results view --> | |
| <div class="results-content hidden" id="results-view"> | |
| <!-- Summary Dashboard Banner --> | |
| <div id="summary-banner" class="summary-banner"></div> | |
| <!-- Video streams side by side --> | |
| <div class="videos-comparison-grid"> | |
| <div class="video-container"> | |
| <h4><i class="fa-solid fa-circle-dot text-success"></i> Before Renting Tracker</h4> | |
| <video id="out-video-before" controls src="" type="video/mp4"></video> | |
| </div> | |
| <div class="video-container"> | |
| <h4><i class="fa-solid fa-circle-dot text-danger"></i> After Renting Tracker</h4> | |
| <video id="out-video-after" controls src="" type="video/mp4"></video> | |
| </div> | |
| </div> | |
| <!-- Condition Report Cards --> | |
| <div class="report-section"> | |
| <h3><i class="fa-solid fa-clipboard-check"></i> Asset Comparison Details</h3> | |
| <div class="asset-cards-grid" id="asset-cards-container"> | |
| <!-- Populated dynamically by javascript --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- Main JS script --> | |
| <script src="/static/js/main.js"></script> | |
| </body> | |
| </html> | |