Hugging Face's logo

Spaces:
AyoubZolodick
/
sign_final
Sleeping

App Files Community
zolodickk commited on
Commit
978f510
·
verified ·
1 Parent(s): c8d822c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +21 -50
templates/index.html CHANGED
@@ -47,75 +47,46 @@
47
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
48
 
49
  </head>
50
- <body class="bg-gray-900"> <!-- تغيير لون الخلفية إلى رمادي 900 -->
51
-
52
- <div class="grid grid-cols-12 gap-4 mx-8 mt-8" style="color: gray; border-radius: 10px;"> <!-- أضفت أسلوبًا لحاوية الشبكة -->
53
 
54
  <!-- Controls -->
55
- <div class="col-span-2 ml-4" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div التحكم -->
56
- <h2 class="border-b border-gray-800 py-4 mb-4 text-3xl font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-gray-500">التحكم</h1> <!-- تغيير لون الحدود والنص -->
57
- <div class="border-b border-gray-800" style="padding: 10px;"> <!-- أضفت حشوًا للحدود الداخلية -->
58
- <div class="flex gap-3 mb-4">
59
- <label class="switch">
60
- <input id="turn_off" value="1" name="turn_off" type="checkbox" onclick="toggleOffSwitch()"/>
61
- <span class="slider round"></span>
62
- </label>
63
- <label for="turn_off" class="form-label text-gray-500">عرض الفيديو</label><br>
64
- </div>
65
- <div class="flex gap-3 mb-4">
66
- <label class="switch">
67
- <input id="run_detection" value="0" name="run_detection" type="checkbox" onclick="toggleDetSwitch()"/>
68
- <span class="slider round"></span>
69
- </label>
70
- <label for="run_detection" class="form-label text-gray-500">تشغيل الكشف</label><br>
71
- </div>
72
- <div class="flex gap-3 mb-4">
73
- <label class="switch">
74
- <input id="mediapipe" value="0" name="mediapipe" type="checkbox" onclick="toggleMediaPipeSwitch()"/>
75
- <span class="slider round"></span>
76
- </label>
77
- <label for="mediapipe" class="form-label text-gray-500">عرض العلامات</label><br>
78
- </div>
79
- <div class="flex gap-3 mb-4">
80
- <label class="switch">
81
- <input id="flip-horizontal" value="0" name="flip-horizontal" type="checkbox" onclick="toggleHSwitch()"/>
82
- <span class="slider round"></span>
83
- </label>
84
- <label for="flip-horizontal" class="form-label text-gray-500">قلب الفيديو</label><br>
85
- </div>
86
- </div>
87
- <div class="gap-3 py-4 text-center border-b border-gray-800 mb-5">
88
- <form action="/" method="POST" style="text-align: center;" class="mb-4" >
89
- <label for="slider" class="form-label text-gray-500">حد الثقة</label>
90
- <input type="range" id="slider" name="slider" min="1" max="100">
91
- </form>
92
- <input type="hidden" id="sliderValue" name="sliderValue" value="75">
93
- <span class="rounded-lg py-2 px-3 bg-gray-800 text-gray-500" id="conf_display">75</span> <!-- تغيير لون الخلفية والنص -->
94
  </div>
95
- <button class="text-white focus:ring-4 focus:outline-none mt-1.5 font-medium rounded-lg text-sm w-full py-2.5 text-center bg-gray-700 hover:bg-gray-800 focus:ring-gray-900" id="stop-button" type="button" onclick="stopProcess('Stop Request')">العودة للصفحة الرئيسية</button> <!-- تغيير نمط الزر -->
96
  </div>
97
 
98
  <!-- Video -->
99
- <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div الفيديو -->
100
  <div id="container">
 
101
  <img class="center" src="/video_feed" id="videoElement">
102
  </div>
103
  </div>
104
 
105
  <!-- Terminal -->
106
- <div class="col-span-2 mr-4" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div الطرفية -->
107
- <h2 class="border-b border-gray-800 py-4 mb-4 text-3xl flex justify-end font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-gray-500">الناتج</h1> <!-- تغيير لون الحدود والنص -->
108
- <div id="terminal" class="w-full"></div>
109
  </div>
110
  </div>
111
 
112
  <div>
113
- <p id="finalSentencePara" class="text-gray-500 mt-4 text-center"> <!-- تغيير لون النص -->
114
  </p>
115
  </div>
116
- </body>
117
-
118
 
 
 
 
 
119
 
120
 
121
  </html>
 
47
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
48
 
49
  </head>
50
+ <body class="bg-gray-900">
51
+ <div class="grid grid-cols-12 gap-4 mx-8 mt-8" style="color: gray; border-radius: 10px;">
 
52
 
53
  <!-- Controls -->
54
+ <div class="col-span-2 ml-4" style="background-color: lightgrey; border-radius: 10px;">
55
+ <h2 class="border-b border-gray-800 py-4 mb-4 text-3xl font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-gray-500">التحكم</h2>
56
+ <div class="border-b border-gray-800" style="padding: 10px;">
57
+ <!-- Start Camera Button -->
58
+ <button class="text-white focus:ring-4 focus:outline-none mt-1.5 font-medium rounded-lg text-sm w-full py-2.5 text-center bg-gray-700 hover:bg-gray-800 focus:ring-gray-900" id="start-camera" type="button" onclick="startCamera()">بدء الكاميرا</button>
59
+ <br>
60
+ <!-- Stop Camera Button -->
61
+ <button class="text-white focus:ring-4 focus:outline-none mt-1.5 font-medium rounded-lg text-sm w-full py-2.5 text-center bg-gray-700 hover:bg-gray-800 focus:ring-gray-900" id="stop-camera" type="button" onclick="stopCamera()">إيقاف الكاميرا</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </div>
63
+ <!-- Additional Controls here -->
64
  </div>
65
 
66
  <!-- Video -->
67
+ <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;">
68
  <div id="container">
69
+ <!-- Video feed element -->
70
  <img class="center" src="/video_feed" id="videoElement">
71
  </div>
72
  </div>
73
 
74
  <!-- Terminal -->
75
+ <div class="col-span-2 mr-4" style="background-color: lightgrey; border-radius: 10px;">
76
+ <h2 class="border-b border-gray-800 py-4 mb-4 text-3xl flex justify-end font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-gray-500">الناتج</h2>
77
+ <div id="terminal" class="w-full"></div> <!-- Terminal output -->
78
  </div>
79
  </div>
80
 
81
  <div>
82
+ <p id="finalSentencePara" class="text-gray-500 mt-4 text-center"> <!-- Text output -->
83
  </p>
84
  </div>
 
 
85
 
86
+ <!-- Scripts at the end of the body -->
87
+ <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
88
+ </body>
89
+
90
 
91
 
92
  </html>