Paradise151 commited on
Commit
c2c73e0
·
verified ·
1 Parent(s): 56e9212

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -163
index.html CHANGED
@@ -1,168 +1,5 @@
1
  <!-- indexPhoto.html -->
2
 
3
- <!--рабочая версия 1 -->
4
- <!-- <!DOCTYPE html>
5
- <html>
6
- <head>
7
- <meta charset="utf-8">
8
- <title>GrechnikNet — Snapshot Detection</title>
9
- <style>
10
- body { background:#111; color:#eee; font-family:sans-serif; margin:0; text-align:center; }
11
- header { padding:16px; }
12
- video, img { width: min(100vw, 720px); height:auto; border:1px solid #333; border-radius:8px; margin:10px 0; }
13
- .controls { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:16px 0; }
14
- .control { background:#1b1b1b; padding:10px 12px; border-radius:8px; }
15
- label { display:block; font-size:14px; margin-bottom:6px; }
16
- input[type="range"] { width:200px; }
17
- button { padding:10px 16px; border:none; border-radius:6px; background:#3a6df0; color:#fff; cursor:pointer; }
18
- button:disabled { background:#555; cursor:not-allowed; }
19
- pre { text-align:left; background:#0e0e0e; padding:12px; border-radius:8px; width:min(100vw,720px); margin:10px auto; }
20
- </style>
21
- </head>
22
- <body>
23
- <header>
24
- <h2>GrechnikNet — Snapshot Detection</h2>
25
- <p>Сверху поток с камеры, снизу результат последнего снимка</p>
26
- </header>
27
-
28
- <!-- Панель управления -->
29
- <div class="controls">
30
- <div class="control">
31
- <label>Камера:</label>
32
- <select id="cameraSelect"></select>
33
- </div>
34
- <div class="control">
35
- <label>Confidence: <span id="confVal">0.25</span></label>
36
- <input type="range" id="confSlider" min="0" max="1" step="0.05" value="0.25">
37
- </div>
38
- <div class="control">
39
- <label>IoU: <span id="iouVal">0.45</span></label>
40
- <input type="range" id="iouSlider" min="0" max="1" step="0.05" value="0.45">
41
- </div>
42
- <div class="control">
43
- <label>Режим ответа:</label>
44
- <select id="modeSelect">
45
- <option value="image">Аннотированное изображение</option>
46
- <option value="json">Только боксы (JSON)</option>
47
- </select>
48
- </div>
49
- <div class="control">
50
- <button id="snapBtn">Сделать фото</button>
51
- </div>
52
- </div>
53
-
54
- <!-- Верхнее окно: поток -->
55
- <video id="video" autoplay playsinline muted></video>
56
-
57
- <!-- Нижнее окно: результат -->
58
- <img id="resultImg" alt="Результат появится здесь">
59
- <pre id="jsonOut" style="display:none;"></pre>
60
-
61
- <script>
62
- const video = document.getElementById('video');
63
- const resultImg = document.getElementById('resultImg');
64
- const jsonOut = document.getElementById('jsonOut');
65
- const snapBtn = document.getElementById('snapBtn');
66
- const cameraSelect = document.getElementById('cameraSelect');
67
- const confSlider = document.getElementById('confSlider');
68
- const iouSlider = document.getElementById('iouSlider');
69
- const confVal = document.getElementById('confVal');
70
- const iouVal = document.getElementById('iouVal');
71
- const modeSelect = document.getElementById('modeSelect');
72
-
73
- let stream = null;
74
- let currentDeviceId = null;
75
-
76
- confSlider.oninput = () => confVal.textContent = confSlider.value;
77
- iouSlider.oninput = () => iouVal.textContent = iouSlider.value;
78
-
79
- async function enumerateCameras() {
80
- const devices = await navigator.mediaDevices.enumerateDevices();
81
- cameraSelect.innerHTML = '';
82
- const cams = devices.filter(d => d.kind === 'videoinput');
83
- cams.forEach((cam, i) => {
84
- const opt = document.createElement('option');
85
- opt.value = cam.deviceId || i;
86
- opt.textContent = cam.label || `Камера ${i+1}`;
87
- cameraSelect.appendChild(opt);
88
- });
89
- if (cams.length > 0) currentDeviceId = cams[0].deviceId;
90
- }
91
-
92
- async function startCamera(deviceId) {
93
- if (stream) stopCamera();
94
- const constraints = {
95
- video: {
96
- deviceId: deviceId ? { exact: deviceId } : undefined,
97
- facingMode: 'environment',
98
- width: { ideal: 720 },
99
- height: { ideal: 720 }
100
- },
101
- audio: false
102
- };
103
- stream = await navigator.mediaDevices.getUserMedia(constraints);
104
- video.srcObject = stream;
105
- await video.play();
106
- }
107
-
108
- function stopCamera() {
109
- if (stream) {
110
- stream.getTracks().forEach(t => t.stop());
111
- stream = null;
112
- }
113
- }
114
-
115
- cameraSelect.onchange = async () => {
116
- currentDeviceId = cameraSelect.value;
117
- await startCamera(currentDeviceId);
118
- };
119
-
120
- async function takePhoto() {
121
- if (!video.srcObject) return;
122
-
123
- const canvas = document.createElement('canvas');
124
- const w = Math.min(720, video.videoWidth || 640);
125
- const h = Math.floor(w * (video.videoHeight / video.videoWidth));
126
- canvas.width = w;
127
- canvas.height = h;
128
- const ctx = canvas.getContext('2d');
129
- ctx.drawImage(video, 0, 0, w, h);
130
-
131
- const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.9));
132
- const formData = new FormData();
133
- formData.append('file', blob, 'frame.jpg');
134
- formData.append('conf', confSlider.value);
135
- formData.append('iou', iouSlider.value);
136
- const returnImage = (modeSelect.value === 'image') ? 1 : 0;
137
- formData.append('return_image', returnImage.toString());
138
-
139
- const resp = await fetch('/predict', { method: 'POST', body: formData });
140
- if (returnImage === 1) {
141
- const arrBuf = await resp.arrayBuffer();
142
- const blobRes = new Blob([arrBuf], { type: 'image/jpeg' });
143
- resultImg.src = URL.createObjectURL(blobRes);
144
- resultImg.style.display = 'block';
145
- jsonOut.style.display = 'none';
146
- } else {
147
- const data = await resp.json();
148
- jsonOut.textContent = JSON.stringify(data, null, 2);
149
- jsonOut.style.display = 'block';
150
- resultImg.style.display = 'none';
151
- }
152
- }
153
-
154
- snapBtn.onclick = takePhoto;
155
-
156
- // Автозапуск камеры при загрузке
157
- (async () => {
158
- await enumerateCameras();
159
- await startCamera(currentDeviceId);
160
- })();
161
- </script>
162
- </body>
163
- </html>
164
- -->
165
-
166
 
167
  <!-- вторая рабочая версия -->
168
  <!DOCTYPE html>
 
1
  <!-- indexPhoto.html -->
2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
  <!-- вторая рабочая версия -->
5
  <!DOCTYPE html>