Spaces:

AyoubZolodick
/

sign_final

Sleeping

App Files Files Community

zolodickk commited on Apr 4, 2024

Commit

b3c4b8c

verified ·

1 Parent(s): 35d9318

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +117 -53

templates/index.html CHANGED Viewed

@@ -1,57 +1,121 @@
-<!DOCTYPE html>
-<html>
 <head>
-    <title>Video Stream</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script type="text/javascript">
-        var socket = io.connect('http://' + document.domain + ':' + location.port);
-        socket.on('connect', function() {
-            console.log("Connected");
-        });
-        function togglePreview() {
-            $.get("/request_preview_switch");
-        }
-        function toggleFlipH() {
-            $.get("/request_flipH_switch");
-        }
-        function toggleRunModel() {
-            $.get("/request_run_model_switch");
-        }
-        function toggleMediaPipe() {
-            $.get("/request_mediapipe_switch");
-        }
-        function updateConfidenceSlider() {
-            var sliderValue = document.getElementById("confidenceSlider").value;
-            $.ajax({
-                type: 'POST',
-                url: '/update_slider_value',
-                data: {sliderValue: sliderValue},
-                async: true
-            });
-        }
-        function stopVideo() {
-            $.get("/stop_process");
-        }
-    </script>
 </head>
-<body>
-    <h1>Video Stream</h1>
-    <img src="{{ url_for('video_feed') }}" width="640"/>
-    <br>
-    <button onclick="togglePreview()">Toggle Preview</button>
-    <button onclick="toggleFlipH()">Toggle FlipH</button>
-    <button onclick="toggleRunModel()">Run Model Detection</button>
-    <button onclick="toggleMediaPipe()">Run MediaPipe Hand Landmarks</button>
-    <br>
-    Confidence Threshold: <input type="range" id="confidenceSlider" min="0" max="100" value="{{ session.get('confidence', 75) }}" oninput="updateConfidenceSlider()">
-    <button onclick="stopVideo()">Stop Video</button>
 </body>
 </html>

+{#L1 labels/object#}
+{#L2 Logo Detection#}
+{#L3 Text/OCR#}
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <title>Mohamed sign</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+            crossorigin="anonymous"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
+    <!-- Add this to the <head> section of your HTML file -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css"
+          integrity="sha512-xX2rYBFJSj86W54Fyv1de80DWBq7zYLn2z0I9bIhQG+rxIF6XVJUpdGnsNHWRa6AvP89vtFupEPDP8eZAtu9qA=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css"
+          integrity="sha512-OivR4OdSsE1onDm/i3J3Hpsm5GmOVvr9r49K3jJ0dnsxVzZgaOJ5MfxEAxCyGrzWozL9uJGKz6un3A7L+redIQ=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" type="text/css"
+          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
 </head>
+<body class="bg-gray-900"> <!-- تغيير لون الخلفية إلى رمادي 900 -->
+    <div class="grid grid-cols-12 gap-4 mx-8 mt-8" style="color: gray; border-radius: 10px;"> <!-- أضفت أسلوبًا لحاوية الشبكة -->
+        <!-- Controls -->
+        <div class="col-span-2 ml-4" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div التحكم -->
+            <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> <!-- تغيير لون الحدود والنص -->
+            <div class="border-b border-gray-800" style="padding: 10px;"> <!-- أضفت حشوًا للحدود الداخلية -->
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="turn_off" value="1" name="turn_off" type="checkbox" onclick="toggleOffSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="turn_off" class="form-label text-gray-500">عرض الفيديو</label><br>
+                </div>
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="run_detection" value="0" name="run_detection" type="checkbox" onclick="toggleDetSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="run_detection" class="form-label text-gray-500">تشغيل الكشف</label><br>
+                </div>
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="mediapipe" value="0" name="mediapipe" type="checkbox" onclick="toggleMediaPipeSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="mediapipe" class="form-label text-gray-500">عرض العلامات</label><br>
+                </div>
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="flip-horizontal" value="0" name="flip-horizontal" type="checkbox" onclick="toggleHSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="flip-horizontal" class="form-label text-gray-500">قلب الفيديو</label><br>
+                </div>
+            </div>
+            <div class="gap-3 py-4 text-center border-b border-gray-800 mb-5">
+                <form action="/" method="POST" style="text-align: center;" class="mb-4" >
+                    <label for="slider" class="form-label text-gray-500">حد الثقة</label>
+                    <input type="range" id="slider" name="slider" min="1" max="100">
+                </form>
+                <input type="hidden" id="sliderValue" name="sliderValue" value="75">
+                <span class="rounded-lg py-2 px-3 bg-gray-800 text-gray-500" id="conf_display">75</span> <!-- تغيير لون الخلفية والنص -->
+            </div>
+            <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> <!-- تغيير نمط الزر -->
+        </div>
+        <!-- Video -->
+        <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div الفيديو -->
+            <div id="container">
+                <img class="center" src="/video_feed" id="videoElement">
+            </div>
+        </div>
+        <!-- Terminal -->
+        <div class="col-span-2 mr-4" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div الطرفية -->
+            <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> <!-- تغيير لون الحدود والنص -->
+            <div id="terminal" class="w-full"></div>
+        </div>
+    </div>
+    <div>
+        <p id="finalSentencePara" class="text-gray-500 mt-4 text-center"> <!-- تغيير لون النص -->
+        </p>
+    </div>
 </body>
 </html>