Spaces:

AyoubZolodick
/

sign_final

Sleeping

App Files Files Community

zolodickk commited on Apr 4, 2024

Commit

9f76838

verified ·

1 Parent(s): eac186e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +22 -64

templates/index.html CHANGED Viewed

@@ -1,92 +1,50 @@
-{#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">
     <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;">
             <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>
             <div class="border-b border-gray-800" style="padding: 10px;">
-                <!-- Start Camera Button -->
                 <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>
-                <br>
-                <!-- Stop Camera Button -->
                 <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>
             </div>
-            <!-- Additional Controls here -->
         </div>
-        <!-- Video -->
         <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;">
             <div id="container">
-                <!-- Video feed element -->
-                <img class="center" src="/video_feed" id="video_feed">
             </div>
         </div>
-        <!-- Terminal -->
         <div class="col-span-2 mr-4" style="background-color: lightgrey; border-radius: 10px;">
             <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>
-            <div id="terminal" class="w-full"></div> <!-- Terminal output -->
         </div>
     </div>
     <div>
-        <p id="finalSentencePara" class="text-gray-500 mt-4 text-center"> <!-- Text output -->
-        </p>
     </div>
-    <!-- Scripts at the end of the body -->
-    <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
 </body>
 </html>

+<!DOCTYPE html>
 <html lang="en">
 <head>
+    <!-- Include necessary libraries and stylesheets -->
 </head>
 <body class="bg-gray-900">
     <div class="grid grid-cols-12 gap-4 mx-8 mt-8" style="color: gray; border-radius: 10px;">
+        <!-- Controls section -->
         <div class="col-span-2 ml-4" style="background-color: lightgrey; border-radius: 10px;">
             <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>
             <div class="border-b border-gray-800" style="padding: 10px;">
                 <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>
                 <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>
             </div>
         </div>
+        <!-- Video section -->
         <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;">
             <div id="container">
+                <img class="center" src="" id="video_feed"> <!-- Updated to have an empty source -->
             </div>
         </div>
+        <!-- Terminal section -->
         <div class="col-span-2 mr-4" style="background-color: lightgrey; border-radius: 10px;">
             <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>
+            <div id="terminal" class="w-full"></div>
         </div>
     </div>
     <div>
+        <p id="finalSentencePara" class="text-gray-500 mt-4 text-center"></p>
     </div>
+    <!-- Inline JavaScript -->
+    <script>
+        function startCamera() {
+            fetch('/capture_frame') // Send a request to the Flask app route
+                .then(response => response.text())
+                .then(data => {
+                    document.getElementById("video_feed").src = 'data:image/jpeg;base64,' + data; // Display the processed frame
+                });
+        }
+        function stopCamera() {
+            // Add logic to stop the camera feed
+        }
+    </script>
 </body>
 </html>