Spaces:
Sleeping
Sleeping
File size: 11,247 Bytes
501c0c1 b890ceb 501c0c1 b3c4b8c 0135475 d08eaec 501c0c1 b890ceb 501c0c1 330bf81 501c0c1 b890ceb 501c0c1 b890ceb 501c0c1 b890ceb 501c0c1 1c4f116 e2a75d2 bdd7b8f e2a75d2 8331ff3 ed1d998 32cbeaf 2c58d37 732bf99 e2a75d2 8331ff3 e2a75d2 8331ff3 e2a75d2 8331ff3 e2a75d2 8331ff3 e2a75d2 1c4f116 b890ceb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 |
{#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> |