Spaces:
Sleeping
Sleeping
Update index.html
Browse files- index.html +1 -180
index.html
CHANGED
|
@@ -184,183 +184,4 @@
|
|
| 184 |
};
|
| 185 |
</script>
|
| 186 |
</body>
|
| 187 |
-
</html>
|
| 188 |
-
|
| 189 |
-
|
| 190 |
-
|
| 191 |
-
|
| 192 |
-
<!-- вторая рабочая версия -->
|
| 193 |
-
<!-- <!DOCTYPE html>
|
| 194 |
-
<html>
|
| 195 |
-
<head>
|
| 196 |
-
<meta charset="utf-8">
|
| 197 |
-
<title>GrechnikNet — Snapshot Detection</title>
|
| 198 |
-
<style>
|
| 199 |
-
body { background:#111; color:#eee; font-family:sans-serif; margin:0; text-align:center; }
|
| 200 |
-
header { padding:16px; }
|
| 201 |
-
video, img { width: min(100vw, 720px); height:auto; border:1px solid #333; border-radius:8px; margin:10px 0; }
|
| 202 |
-
.controls { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:16px 0; }
|
| 203 |
-
.control { background:#1b1b1b; padding:10px 12px; border-radius:8px; }
|
| 204 |
-
label { display:block; font-size:14px; margin-bottom:6px; }
|
| 205 |
-
input[type="range"] { width:200px; }
|
| 206 |
-
button { padding:10px 16px; border:none; border-radius:6px; background:#3a6df0; color:#fff; cursor:pointer; }
|
| 207 |
-
button:disabled { background:#555; cursor:not-allowed; }
|
| 208 |
-
pre { text-align:left; background:#0e0e0e; padding:12px; border-radius:8px; width:min(100vw,720px); margin:10px auto; }
|
| 209 |
-
</style>
|
| 210 |
-
</head>
|
| 211 |
-
<body>
|
| 212 |
-
<header>
|
| 213 |
-
<h2>GrechnikNet — Snapshot Detection</h2>
|
| 214 |
-
<p>Сверху поток с камеры, снизу результат последнего снимка</p>
|
| 215 |
-
</header>
|
| 216 |
-
|
| 217 |
-
<!-- Панель управления -->
|
| 218 |
-
<div class="controls">
|
| 219 |
-
<div class="control">
|
| 220 |
-
<label>Камера:</label>
|
| 221 |
-
<select id="cameraSelect"></select>
|
| 222 |
-
</div>
|
| 223 |
-
<div class="control">
|
| 224 |
-
<label>Степень уверенности (conf): <span id="confVal">0.25</span></label>
|
| 225 |
-
<input type="range" id="confSlider" min="0" max="1" step="0.05" value="0.25">
|
| 226 |
-
</div>
|
| 227 |
-
<div class="control">
|
| 228 |
-
<label>Степень пересечения (IoU): <span id="iouVal">0.45</span></label>
|
| 229 |
-
<input type="range" id="iouSlider" min="0" max="1" step="0.05" value="0.45">
|
| 230 |
-
</div>
|
| 231 |
-
<div class="control">
|
| 232 |
-
<label>Режим ответа:</label>
|
| 233 |
-
<select id="modeSelect">
|
| 234 |
-
<option value="image">Аннотированное изображение</option>
|
| 235 |
-
<option value="json">Только боксы (JSON)</option>
|
| 236 |
-
</select>
|
| 237 |
-
</div>
|
| 238 |
-
<div class="control">
|
| 239 |
-
<button id="startBtn">Старт</button>
|
| 240 |
-
<button id="stopBtn" disabled>Стоп</button>
|
| 241 |
-
</div>
|
| 242 |
-
</div>
|
| 243 |
-
|
| 244 |
-
<!-- Верхнее окно: поток -->
|
| 245 |
-
<video id="video" autoplay playsinline muted></video>
|
| 246 |
-
|
| 247 |
-
<!-- Кнопка между окнами -->
|
| 248 |
-
<button id="snapBtn">Сделать фото</button>
|
| 249 |
-
|
| 250 |
-
<!-- Нижнее окно: результат -->
|
| 251 |
-
<img id="resultImg" alt="Результат появится здесь">
|
| 252 |
-
<pre id="jsonOut" style="display:none;"></pre>
|
| 253 |
-
|
| 254 |
-
<!-- <script>
|
| 255 |
-
const video = document.getElementById('video');
|
| 256 |
-
const resultImg = document.getElementById('resultImg');
|
| 257 |
-
const jsonOut = document.getElementById('jsonOut');
|
| 258 |
-
const snapBtn = document.getElementById('snapBtn');
|
| 259 |
-
const cameraSelect = document.getElementById('cameraSelect');
|
| 260 |
-
const confSlider = document.getElementById('confSlider');
|
| 261 |
-
const iouSlider = document.getElementById('iouSlider');
|
| 262 |
-
const confVal = document.getElementById('confVal');
|
| 263 |
-
const iouVal = document.getElementById('iouVal');
|
| 264 |
-
const modeSelect = document.getElementById('modeSelect');
|
| 265 |
-
const startBtn = document.getElementById('startBtn');
|
| 266 |
-
const stopBtn = document.getElementById('stopBtn');
|
| 267 |
-
|
| 268 |
-
let stream = null;
|
| 269 |
-
let currentDeviceId = null;
|
| 270 |
-
|
| 271 |
-
confSlider.oninput = () => confVal.textContent = confSlider.value;
|
| 272 |
-
iouSlider.oninput = () => iouVal.textContent = iouSlider.value;
|
| 273 |
-
|
| 274 |
-
async function enumerateCameras() {
|
| 275 |
-
const devices = await navigator.mediaDevices.enumerateDevices();
|
| 276 |
-
cameraSelect.innerHTML = '';
|
| 277 |
-
const cams = devices.filter(d => d.kind === 'videoinput');
|
| 278 |
-
cams.forEach((cam, i) => {
|
| 279 |
-
const opt = document.createElement('option');
|
| 280 |
-
opt.value = cam.deviceId || i;
|
| 281 |
-
opt.textContent = cam.label || `Камера ${i+1}`;
|
| 282 |
-
cameraSelect.appendChild(opt);
|
| 283 |
-
});
|
| 284 |
-
if (cams.length > 0) currentDeviceId = cams[0].deviceId;
|
| 285 |
-
}
|
| 286 |
-
|
| 287 |
-
async function startCamera(deviceId) {
|
| 288 |
-
if (stream) stopCamera();
|
| 289 |
-
const constraints = {
|
| 290 |
-
video: {
|
| 291 |
-
deviceId: deviceId ? { exact: deviceId } : undefined,
|
| 292 |
-
facingMode: 'environment',
|
| 293 |
-
width: { ideal: 720 },
|
| 294 |
-
height: { ideal: 720 }
|
| 295 |
-
},
|
| 296 |
-
audio: false
|
| 297 |
-
};
|
| 298 |
-
stream = await navigator.mediaDevices.getUserMedia(constraints);
|
| 299 |
-
video.srcObject = stream;
|
| 300 |
-
await video.play();
|
| 301 |
-
}
|
| 302 |
-
|
| 303 |
-
function stopCamera() {
|
| 304 |
-
if (stream) {
|
| 305 |
-
stream.getTracks().forEach(t => t.stop());
|
| 306 |
-
stream = null;
|
| 307 |
-
}
|
| 308 |
-
}
|
| 309 |
-
|
| 310 |
-
cameraSelect.onchange = async () => {
|
| 311 |
-
currentDeviceId = cameraSelect.value;
|
| 312 |
-
await startCamera(currentDeviceId);
|
| 313 |
-
};
|
| 314 |
-
|
| 315 |
-
async function takePhoto() {
|
| 316 |
-
if (!video.srcObject) return;
|
| 317 |
-
|
| 318 |
-
const canvas = document.createElement('canvas');
|
| 319 |
-
const w = Math.min(720, video.videoWidth || 640);
|
| 320 |
-
const h = Math.floor(w * (video.videoHeight / video.videoWidth));
|
| 321 |
-
canvas.width = w;
|
| 322 |
-
canvas.height = h;
|
| 323 |
-
const ctx = canvas.getContext('2d');
|
| 324 |
-
ctx.drawImage(video, 0, 0, w, h);
|
| 325 |
-
|
| 326 |
-
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.9));
|
| 327 |
-
const formData = new FormData();
|
| 328 |
-
formData.append('file', blob, 'frame.jpg');
|
| 329 |
-
formData.append('conf', confSlider.value);
|
| 330 |
-
formData.append('iou', iouSlider.value);
|
| 331 |
-
const returnImage = (modeSelect.value === 'image') ? 1 : 0;
|
| 332 |
-
formData.append('return_image', returnImage.toString());
|
| 333 |
-
|
| 334 |
-
const resp = await fetch('/predict', { method: 'POST', body: formData });
|
| 335 |
-
if (returnImage === 1) {
|
| 336 |
-
const arrBuf = await resp.arrayBuffer();
|
| 337 |
-
const blobRes = new Blob([arrBuf], { type: 'image/jpeg' });
|
| 338 |
-
resultImg.src = URL.createObjectURL(blobRes);
|
| 339 |
-
resultImg.style.display = 'block';
|
| 340 |
-
jsonOut.style.display = 'none';
|
| 341 |
-
} else {
|
| 342 |
-
const data = await resp.json();
|
| 343 |
-
jsonOut.textContent = JSON.stringify(data, null, 2);
|
| 344 |
-
jsonOut.style.display = 'block';
|
| 345 |
-
resultImg.style.display = 'none';
|
| 346 |
-
}
|
| 347 |
-
}
|
| 348 |
-
|
| 349 |
-
snapBtn.onclick = takePhoto;
|
| 350 |
-
|
| 351 |
-
startBtn.onclick = async () => {
|
| 352 |
-
await enumerateCameras();
|
| 353 |
-
await startCamera(currentDeviceId);
|
| 354 |
-
startBtn.disabled = true;
|
| 355 |
-
stopBtn.disabled = false;
|
| 356 |
-
};
|
| 357 |
-
|
| 358 |
-
stopBtn.onclick = () => {
|
| 359 |
-
stopCamera();
|
| 360 |
-
startBtn.disabled = false;
|
| 361 |
-
stopBtn.disabled = true;
|
| 362 |
-
};
|
| 363 |
-
</script>
|
| 364 |
-
</body>
|
| 365 |
-
</html> -->
|
| 366 |
-
-->
|
|
|
|
| 184 |
};
|
| 185 |
</script>
|
| 186 |
</body>
|
| 187 |
+
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|