Spaces:
Sleeping
Sleeping
| <!-- Проверка работы сервиса --> | |
| <!-- indexIsServerWorks.html --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GrechnikNet — Test</title> | |
| <style> | |
| body { background:#111; color:#eee; font-family:sans-serif; text-align:center; } | |
| video, img { width: 480px; border:1px solid #333; border-radius:8px; margin:10px; } | |
| button { padding:10px 16px; border:none; border-radius:6px; background:#3a6df0; color:#fff; cursor:pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>GrechnikNet — Test API</h2> | |
| <p>Нажми кнопку, чтобы сделать кадр и отправить на сервер</p> | |
| <video id="video" autoplay playsinline></video><br> | |
| <button id="snapBtn">Сделать кадр</button><br> | |
| <img id="resultImg" alt="Результат появится здесь"> | |
| <script> | |
| const video = document.getElementById('video'); | |
| const snapBtn = document.getElementById('snapBtn'); | |
| const resultImg = document.getElementById('resultImg'); | |
| // Запрашиваем доступ к камере | |
| navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: 480 }, audio: false }) | |
| .then(stream => { video.srcObject = stream; }) | |
| .catch(err => { alert("Ошибка доступа к камере: " + err); }); | |
| snapBtn.onclick = async () => { | |
| // Снимаем кадр в canvas | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| const ctx = canvas.getContext('2d'); | |
| ctx.drawImage(video, 0, 0); | |
| // Конвертим в Blob | |
| 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', '0.25'); | |
| formData.append('iou', '0.45'); | |
| formData.append('return_image', '1'); | |
| try { | |
| const resp = await fetch('/predict', { method: 'POST', body: formData }); | |
| if (!resp.ok) { | |
| const text = await resp.text(); | |
| alert("Ошибка сервера: " + text); | |
| return; | |
| } | |
| const arrBuf = await resp.arrayBuffer(); | |
| const blobRes = new Blob([arrBuf], { type: 'image/jpeg' }); | |
| resultImg.src = URL.createObjectURL(blobRes); | |
| } catch (e) { | |
| alert("Ошибка запроса: " + e); | |
| } | |
| }; | |
| </script> | |
| </body> | |
| </html> |