Spaces:
Sleeping
Sleeping
File size: 8,782 Bytes
ec0daf5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 | <!DOCTYPE html>
<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>
|