Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Inference Studio | AI Vision Explorer</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="background-blob"></div> | |
| <div class="background-blob blob-2"></div> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-brain"></i> | |
| <h1>Inference<span>Studio</span></h1> | |
| </div> | |
| <p class="subtitle">Deploy and test your vision models in seconds</p> | |
| </header> | |
| <main> | |
| <!-- Model Section --> | |
| <section class="card glass" id="model-section"> | |
| <div class="card-header"> | |
| <i class="fas fa-microchip"></i> | |
| <h2>Model Management</h2> | |
| </div> | |
| <input type="file" id="model-input" accept=".pt" hidden> | |
| <div class="upload-zone" id="model-drop-zone"> | |
| <div class="upload-icon"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </div> | |
| <p>Drag & drop your <strong>YOLO .pt</strong> model</p> | |
| <span>or click to browse files</span> | |
| </div> | |
| <div id="model-status" class="status-badge {% if model_loaded %}loaded{% endif %}"> | |
| <i class="fas {% if model_loaded %}fa-check-circle{% else %}fa-exclamation-circle{% endif %}"></i> | |
| <span id="status-text">{% if model_loaded %}Model: {{ model_name }}{% else %}No model loaded{% endif %}</span> | |
| </div> | |
| </section> | |
| <!-- Media Upload Section --> | |
| <section class="card glass" id="upload-section"> | |
| <div class="card-header"> | |
| <i class="fas fa-file-import"></i> | |
| <h2>Step 1: Upload Media</h2> | |
| </div> | |
| <input type="file" id="media-input" accept="image/*,video/*" hidden> | |
| <div class="upload-zone" id="media-drop-zone"> | |
| <div class="upload-icon"> | |
| <i class="fas fa-photo-video"></i> | |
| </div> | |
| <p>Drag & drop <strong>Image</strong> or <strong>Video</strong></p> | |
| <span>JPG, PNG, MP4, AVI, MOV supported</span> | |
| </div> | |
| </section> | |
| <!-- Preview & ROI Section --> | |
| <section class="card glass hidden" id="preview-section"> | |
| <div class="card-header"> | |
| <i class="fas fa-crosshairs"></i> | |
| <h2>Step 2: Configure & Draw ROI</h2> | |
| <span class="hint-badge">Click & Drag on Preview</span> | |
| </div> | |
| <div class="preview-area"> | |
| <div id="canvas-wrapper"> | |
| <canvas id="roi-canvas"></canvas> | |
| </div> | |
| </div> | |
| <div class="settings-panel"> | |
| <div class="setting-item double-slider"> | |
| <label>Confidence Range: <span id="conf-range-val">25% - 100%</span></label> | |
| <div class="slider-group"> | |
| <div class="slider-row"> | |
| <span class="slider-label">Min:</span> | |
| <input type="range" id="threshold-input" min="0.01" max="1.0" step="0.01" value="0.25"> | |
| </div> | |
| <div class="slider-row"> | |
| <span class="slider-label">Max:</span> | |
| <input type="range" id="conf-max-input" min="0.01" max="1.0" step="0.01" value="1.0"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="roi-controls"> | |
| <div class="label-with-toggle"> | |
| <label>ROI Boundary (%)</label> | |
| <button id="reset-roi-btn" class="btn-text"> | |
| <i class="fas fa-undo"></i> Reset | |
| </button> | |
| </div> | |
| <div class="roi-inputs"> | |
| <div class="roi-group"> | |
| <span class="group-label">Top-Left</span> | |
| <div class="coord-inputs"> | |
| <div class="coord-input"> | |
| <span>X1</span> | |
| <input type="number" id="roi-x1" value="0"> | |
| </div> | |
| <div class="coord-input"> | |
| <span>Y1</span> | |
| <input type="number" id="roi-y1" value="0"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="roi-group"> | |
| <span class="group-label">Bottom-Right</span> | |
| <div class="coord-inputs"> | |
| <div class="coord-input"> | |
| <span>X2</span> | |
| <input type="number" id="roi-x2" value="100"> | |
| </div> | |
| <div class="coord-input"> | |
| <span>Y2</span> | |
| <input type="number" id="roi-y2" value="100"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="action-bar"> | |
| <button id="analyze-btn" class="btn-primary main-action"> | |
| <i class="fas fa-play"></i> Start Inference | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Progress Card --> | |
| <section class="card glass hidden" id="progress-card"> | |
| <div id="loading" class="spinner-container"> | |
| <div class="spinner"></div> | |
| <p>Running Vision AI Inference...</p> | |
| </div> | |
| <div id="video-progress-container" class="hidden"> | |
| <div class="progress-info"> | |
| <span id="video-status-msg">Processing video...</span> | |
| <span id="video-percentage">0%</span> | |
| </div> | |
| <div class="progress-bar-bg"> | |
| <div id="video-progress-bar" class="progress-bar-fill"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section class="card glass result-card hidden" id="video-result-section"> | |
| <div class="card-header"> | |
| <i class="fas fa-video"></i> | |
| <h2>Video Results</h2> | |
| </div> | |
| <div class="result-viewer"> | |
| <video id="result-video" controls></video> | |
| <div class="action-bar"> | |
| <a id="video-download-btn" class="btn-primary" download> | |
| <i class="fas fa-download"></i> Download Video | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="card glass result-card hidden" id="result-section"> | |
| <div class="card-header"> | |
| <i class="fas fa-poll"></i> | |
| <h2>Detection Summary</h2> | |
| <span id="result-count" class="badge">0 Detections</span> | |
| </div> | |
| <div class="result-viewer"> | |
| <img id="result-image" src="" alt="Results"> | |
| <div class="action-bar"> | |
| <button id="download-btn" class="btn-primary"> | |
| <i class="fas fa-download"></i> Save Image | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |