Spaces:
Sleeping
Sleeping
| {#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.5.1/socket.io.js" integrity="sha512-9mpsATI0KClwt+xVZfbcf2lJ8IFBAwsubJ6mI3rtULwyM3fBmQFzj0It4tGqxLOGQwGfJdk/G+fANnxfq9/cew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script> | |
| </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/bootstrap-icons@1.10.4/font/bootstrap-icons.css"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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/bootstrap@5.1.3/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" onclick="askPermission()">عرض الفيديو</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="{{ url_for('video_feed') }}" id="videoElement" alt="Video Feed"> | |
| </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> | |
| <div id="container"> | |
| <canvas id="canvasOutput"></canvas> | |
| <video autoplay="true" id="videoElement1"></video> | |
| </div> | |
| <div class = 'video'> | |
| <img id="image"> | |
| </div> | |
| <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div الفيديو --> | |
| <div id="container"> | |
| <img class="center" src="{{ url_for('process_frame') }}" id="videoElement12" alt="Video Feed processed"> | |
| </div> | |
| </div> | |
| <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;"> | |
| <div id="container"> | |
| <img class="center" id="processedFrameElement" alt="Processed Frame"> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"></script> | |
| <script> | |
| // Create an img element to display the processed frame | |
| var imgElement = document.createElement('img'); | |
| document.body.appendChild(imgElement); | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(function (stream) { | |
| const videoElement = document.createElement('video'); | |
| document.body.appendChild(videoElement); | |
| videoElement.srcObject = stream; | |
| videoElement.play(); | |
| setInterval(() => { | |
| var type = 'image/jpeg'; | |
| var canvas = document.createElement('canvas'); | |
| var context = canvas.getContext('2d'); | |
| canvas.width = videoElement.videoWidth; | |
| canvas.height = videoElement.videoHeight; | |
| context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); | |
| // Convert canvas data to Blob | |
| canvas.toBlob(function(blob) { | |
| // Create FormData object to send the blob to the server | |
| var formData = new FormData(); | |
| formData.append('frame', blob, 'result_frame.jpg'); | |
| // Make a POST request to the Flask server | |
| fetch('/process_frame', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error('Failed to process frame on server'); | |
| } | |
| return response.blob(); | |
| }) | |
| .then(blob => { | |
| // Display the processed frame on the webpage | |
| imgElement.src = URL.createObjectURL(blob); | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| }); | |
| }, type); | |
| }, 1000); // Capture and send a frame every second (1000 milliseconds) | |
| }) | |
| .catch(function (error) { | |
| console.log(error); | |
| console.log("An error occurred while accessing the camera stream."); | |
| }); | |
| </script> | |
| </html> |