Hugging Face's logo

Spaces:
AyoubZolodick
/
sign_final
Sleeping

App Files Community
zolodickk commited on
Commit
9fdbded
·
verified ·
1 Parent(s): 36acc8c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +49 -28
templates/index.html CHANGED
@@ -1,36 +1,57 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Camera Feed</title>
8
- </head>
9
- <body>
10
- <button id="startCameraBtn">Start Camera</button>
11
- <video id="videoPlayer" autoplay playsinline></video>
12
-
13
- <script src="https://cdn.socket.io/4.1.2/socket.io.min.js"></script>
14
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
15
- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
16
- <script>
17
- const videoElement = document.getElementById('videoPlayer');
18
- const startCameraBtn = document.getElementById('startCameraBtn');
19
 
20
- startCameraBtn.addEventListener('click', async () => {
21
- try {
22
- const stream = await navigator.mediaDevices.getUserMedia({ video: true });
23
 
24
- // Display the camera feed in the video element
25
- videoElement.srcObject = stream;
26
- videoElement.play();
27
 
28
- // Enable the video element to show the camera feed
29
- videoElement.hidden = false;
30
- } catch (error) {
31
- console.error('Error accessing the camera:', error);
32
- }
33
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
35
  </body>
36
  </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
  <head>
4
+ <title>Video Stream</title>
5
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js"></script>
6
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
7
+ <script type="text/javascript">
8
+ var socket = io.connect('http://' + document.domain + ':' + location.port);
9
+
10
+ socket.on('connect', function() {
11
+ console.log("Connected");
12
+ });
 
 
 
 
 
 
13
 
14
+ function togglePreview() {
15
+ $.get("/request_preview_switch");
16
+ }
17
 
18
+ function toggleFlipH() {
19
+ $.get("/request_flipH_switch");
20
+ }
21
 
22
+ function toggleRunModel() {
23
+ $.get("/request_run_model_switch");
24
+ }
25
+
26
+ function toggleMediaPipe() {
27
+ $.get("/request_mediapipe_switch");
28
+ }
29
+
30
+ function updateConfidenceSlider() {
31
+ var sliderValue = document.getElementById("confidenceSlider").value;
32
+ $.ajax({
33
+ type: 'POST',
34
+ url: '/update_slider_value',
35
+ data: {sliderValue: sliderValue},
36
+ async: true
37
+ });
38
+ }
39
+
40
+ function stopVideo() {
41
+ $.get("/stop_process");
42
+ }
43
  </script>
44
+ </head>
45
+ <body>
46
+ <h1>Video Stream</h1>
47
+ <img src="{{ url_for('video_feed') }}" width="640"/>
48
+ <br>
49
+ <button onclick="togglePreview()">Toggle Preview</button>
50
+ <button onclick="toggleFlipH()">Toggle FlipH</button>
51
+ <button onclick="toggleRunModel()">Run Model Detection</button>
52
+ <button onclick="toggleMediaPipe()">Run MediaPipe Hand Landmarks</button>
53
+ <br>
54
+ Confidence Threshold: <input type="range" id="confidenceSlider" min="0" max="100" value="{{ session.get('confidence', 75) }}" oninput="updateConfidenceSlider()">
55
+ <button onclick="stopVideo()">Stop Video</button>
56
  </body>
57
  </html>