Paradise151 commited on
Commit
22abd80
·
verified ·
1 Parent(s): 5acd887

Update index.html

Browse files
Files changed (1) hide show
  1. 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>