Rename indexRealTime.html to indexWVRealTime.html

indexRealTime.html

@@ -1,133 +0,0 @@
-<script>
-  const video = document.getElementById('video');
-  const resultImg = document.getElementById('resultImg');
-  const jsonOut = document.getElementById('jsonOut');
-  const startBtn = document.getElementById('startBtn');
-  const stopBtn = document.getElementById('stopBtn');
-  const cameraSelect = document.getElementById('cameraSelect');
-  const confSlider = document.getElementById('confSlider');
-  const iouSlider = document.getElementById('iouSlider');
-  const confVal = document.getElementById('confVal');
-  const iouVal = document.getElementById('iouVal');
-  const modeSelect = document.getElementById('modeSelect');
-
-  let stream = null;
-  let active = false;
-  let currentDeviceId = null;
-  let busy = false;       // сервер занят
-  let pendingFrame = null; // последний кадр в буфере
-
-  confSlider.oninput = () => confVal.textContent = confSlider.value;
-  iouSlider.oninput = () => iouVal.textContent = iouSlider.value;
-
-  async function enumerateCameras() {
-    const devices = await navigator.mediaDevices.enumerateDevices();
-    cameraSelect.innerHTML = '';
-    const cams = devices.filter(d => d.kind === 'videoinput');
-    cams.forEach((cam, i) => {
-      const opt = document.createElement('option');
-      opt.value = cam.deviceId || i;
-      opt.textContent = cam.label || `Камера ${i+1}`;
-      cameraSelect.appendChild(opt);
-    });
-    if (cams.length > 0) currentDeviceId = cams[0].deviceId;
-  }
-
-  async function startCamera(deviceId) {
-    if (stream) stopCamera();
-    const constraints = {
-      video: {
-        deviceId: deviceId ? { exact: deviceId } : undefined,
-        facingMode: 'environment',
-        width: { ideal: 720 },
-        height: { ideal: 720 }
-      },
-      audio: false
-    };
-    stream = await navigator.mediaDevices.getUserMedia(constraints);
-    video.srcObject = stream;
-    await video.play();
-    requestAnimationFrame(captureLoop);
-  }
-
-  function stopCamera() {
-    if (stream) {
-      stream.getTracks().forEach(t => t.stop());
-      stream = null;
-    }
-  }
-
-  cameraSelect.onchange = async () => {
-    currentDeviceId = cameraSelect.value;
-    await startCamera(currentDeviceId);
-  };
-
-  function captureLoop() {
-    if (!active || !stream) return;
-
-    const canvas = document.createElement('canvas');
-    const w = Math.min(720, video.videoWidth || 640);
-    const h = Math.floor(w * (video.videoHeight / video.videoWidth));
-    canvas.width = w;
-    canvas.height = h;
-    const ctx = canvas.getContext('2d');
-    ctx.drawImage(video, 0, 0, w, h);
-
-    canvas.toBlob(blob => {
-      pendingFrame = blob; // сохраняем последний кадр
-      if (!busy) sendFrame(); // если сервер свободен — отправляем
-    }, 'image/jpeg', 0.9);
-
-    requestAnimationFrame(captureLoop);
-  }
-
-  async function sendFrame() {
-    if (!pendingFrame) return;
-    busy = true;
-
-    const formData = new FormData();
-    formData.append('file', pendingFrame, 'frame.jpg');
-    formData.append('conf', confSlider.value);
-    formData.append('iou', iouSlider.value);
-    const returnImage = (modeSelect.value === 'image') ? 1 : 0;
-    formData.append('return_image', returnImage.toString());
-
-    pendingFrame = null; // очищаем буфер
-
-    try {
-      const resp = await fetch('/predict', { method: 'POST', body: formData });
-      if (returnImage === 1) {
-        const arrBuf = await resp.arrayBuffer();
-        const blobRes = new Blob([arrBuf], { type: 'image/jpeg' });
-        resultImg.src = URL.createObjectURL(blobRes);
-        resultImg.style.display = 'block';
-        jsonOut.style.display = 'none';
-      } else {
-        const data = await resp.json();
-        jsonOut.textContent = JSON.stringify(data, null, 2);
-        jsonOut.style.display = 'block';
-        resultImg.style.display = 'none';
-      }
-    } catch (e) {
-      console.error("Ошибка запроса:", e);
-    }
-
-    busy = false;
-    if (pendingFrame) sendFrame(); // если уже есть новый кадр — сразу отправляем
-  }
-
-  startBtn.onclick = async () => {
-    await enumerateCameras();
-    await startCamera(currentDeviceId);
-    active = true;
-    startBtn.disabled = true;
-    stopBtn.disabled = false;
-  };
-
-  stopBtn.onclick = () => {
-    active = false;
-    startBtn.disabled = false;
-    stopBtn.disabled = true;
-    stopCamera();
-  };
-</script>

indexWVRealTime.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>GrechnikNet — YOLOv8n Detection</title>
+  <style>
+    body { background:#111; color:#eee; font-family: sans-serif; margin:0; }
+    header { padding:16px; text-align:center; }
+    main { display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px; }
+    video, img { width: min(100vw, 720px); height: auto; border:1px solid #333; border-radius:8px; }
+    .controls { display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center; }
+    .control { background:#1b1b1b; padding:10px 12px; border-radius:8px; }
+    label { display:block; font-size:14px; margin-bottom:6px; }
+    input[type="range"] { width:200px; }
+    button { padding:10px 14px; border:none; border-radius:8px; background:#3a6df0; color:#fff; cursor:pointer; }
+    button:disabled { background:#555; cursor:not-allowed; }
+    .row { display:flex; flex-direction:row; gap:16px; flex-wrap:wrap; justify-content:center; }
+  </style>
+</head>
+<body>
+  <header>
+    <h2>GrechnikNet — Impurity Detection (Phone Camera)</h2>
+    <p>Наведи камеру телефона на гречку, получи боксы. Без зеркала, корректный цвет.</p>
+  </header>
+
+  <main>
+    <div class="controls">
+      <div class="control">
+        <label>Камера:</label>
+        <select id="cameraSelect"></select>
+      </div>
+      <div class="control">
+        <label>Confidence: <span id="confVal">0.25</span></label>
+        <input type="range" id="confSlider" min="0" max="1" step="0.05" value="0.25">
+      </div>
+      <div class="control">
+        <label>IoU: <span id="iouVal">0.45</span></label>
+        <input type="range" id="iouSlider" min="0" max="1" step="0.05" value="0.45">
+      </div>
+      <div class="control">
+        <label>Режим ответа:</label>
+        <select id="modeSelect">
+          <option value="image">Аннотированное изображение</option>
+          <option value="json">Только боксы (JSON)</option>
+        </select>
+      </div>
+      <div class="control">
+        <button id="startBtn">Старт</button>
+        <button id="stopBtn" disabled>Стоп</button>
+      </div>
+    </div>
+
+    <div class="row">
+      <video id="video" playsinline autoplay muted></video>
+      <img id="resultImg" alt="Detections" />
+      <pre id="jsonOut" style="display:none; width: min(100vw, 720px); background:#0e0e0e; padding:12px; border-radius:8px;"></pre>
+    </div>
+  </main>
+
+  <script>
+    const video = document.getElementById('video');
+    const resultImg = document.getElementById('resultImg');
+    const jsonOut = document.getElementById('jsonOut');
+    const startBtn = document.getElementById('startBtn');
+    const stopBtn = document.getElementById('stopBtn');
+    const cameraSelect = document.getElementById('cameraSelect');
+    const confSlider = document.getElementById('confSlider');
+    const iouSlider = document.getElementById('iouSlider');
+    const confVal = document.getElementById('confVal');
+    const iouVal = document.getElementById('iouVal');
+    const modeSelect = document.getElementById('modeSelect');
+
+    let stream = null;
+    let captureInterval = null;
+    let currentDeviceId = null;
+
+    confSlider.oninput = () => confVal.textContent = confSlider.value;
+    iouSlider.oninput = () => iouVal.textContent = iouSlider.value;
+
+    async function enumerateCameras() {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      cameraSelect.innerHTML = '';
+      const cams = devices.filter(d => d.kind === 'videoinput');
+      cams.forEach((cam, i) => {
+        const opt = document.createElement('option');
+        opt.value = cam.deviceId || i;
+        opt.textContent = cam.label || `Камера ${i+1}`;
+        cameraSelect.appendChild(opt);
+      });
+      if (cams.length > 0) currentDeviceId = cams[0].deviceId;
+    }
+
+    async function startCamera(deviceId) {
+      if (stream) stopCamera();
+      const constraints = {
+        video: {
+          deviceId: deviceId ? { exact: deviceId } : undefined,
+          facingMode: 'environment', // на телефоне — основная камера
+          width: { ideal: 720 },
+          height: { ideal: 720 }
+        },
+        audio: false
+      };
+      stream = await navigator.mediaDevices.getUserMedia(constraints);
+      video.srcObject = stream;
+      await video.play();
+    }
+
+    function stopCamera() {
+      if (stream) {
+        stream.getTracks().forEach(t => t.stop());
+        stream = null;
+      }
+    }
+
+    cameraSelect.onchange = async () => {
+      currentDeviceId = cameraSelect.value;
+      await startCamera(currentDeviceId);
+    };
+
+    async function captureAndSendFrame() {
+      if (!stream) return;
+
+      // Снимаем кадр в canvas
+      const canvas = document.createElement('canvas');
+      const w = Math.min(720, video.videoWidth || 640);
+      const h = Math.floor(w * (video.videoHeight / video.videoWidth));
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+
+      // Без зеркала: просто рисуем кадр как есть
+      ctx.drawImage(video, 0, 0, w, h);
+
+      // Конвертим в Blob (JPEG)
+      const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.85));
+      const formData = new FormData();
+      formData.append('file', blob, 'frame.jpg');
+      formData.append('conf', confSlider.value);
+      formData.append('iou', iouSlider.value);
+
+      const returnImage = (modeSelect.value === 'image') ? 1 : 0;
+      formData.append('return_image', returnImage.toString());
+
+      const resp = await fetch('/predict', { method: 'POST', body: formData });
+
+      if (returnImage === 1) {
+        const arrBuf = await resp.arrayBuffer();
+        const blobRes = new Blob([arrBuf], { type: 'image/jpeg' });
+        const url = URL.createObjectURL(blobRes);
+        resultImg.src = url;
+        resultImg.style.display = 'block';
+        jsonOut.style.display = 'none';
+      } else {
+        const data = await resp.json();
+        jsonOut.textContent = JSON.stringify(data, null, 2);
+        jsonOut.style.display = 'block';
+        resultImg.style.display = 'none';
+      }
+    }
+
+    startBtn.onclick = async () => {
+      await enumerateCameras();
+      await startCamera(currentDeviceId);
+      startBtn.disabled = true;
+      stopBtn.disabled = false;
+      // Частота отправки кадров: 5–10 FPS (баланс скорости/качества)
+      captureInterval = setInterval(captureAndSendFrame, 120);
+    };
+
+    stopBtn.onclick = () => {
+      startBtn.disabled = false;
+      stopBtn.disabled = true;
+      clearInterval(captureInterval);
+      captureInterval = null;
+      stopCamera();
+    };
+
+    // Предзагрузка списка камер (нужно permission для labels; поэтому делаем после старта)
+  </script>
+</body>
+</html>