Spaces:

thejagstudio
/

FabricScan

Sleeping

App Files Files Community

thejagstudio commited on Jan 11

Commit

5e9f7b7

verified ·

1 Parent(s): 740f85f

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +60 -39

templates/index.html CHANGED Viewed

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -23,11 +22,11 @@
                 <div class="flex items-center gap-2">
                     <div id="cpuCircle" class="h-10 w-10 group rounded-full flex items-center justify-center relative" style="background: conic-gradient(#0ea5e9 54deg, #082f49 54deg)">
                         <div class="h-8 w-8 rounded-full bg-sky-900 text-white p-2 text-xs flex item-center justify-center">CPU</div>
-                        <div id="cpuDisplay" class="absolute scale-y-0 group-hover:scale-y-100 -translate-y-1/2 origin-top text-sm text-white top-14 bg-sky-800 w-max rounded-md px-2 transition-all">CPU usage: 15%</div>
                     </div>
                     <div id="ramCircle" class="h-10 w-10 group rounded-full flex items-center justify-center relative" style="background: conic-gradient(#0ea5e9 54deg, #082f49 54deg)">
                         <div class="h-8 w-8 rounded-full bg-sky-900 text-white p-2 text-xs flex item-center justify-center">RAM</div>
-                        <div id="ramDisplay" class="absolute right-0 scale-y-0 group-hover:scale-y-100 -translate-y-1/2 origin-top text-sm text-white top-14 bg-sky-800 w-max rounded-md px-2 transition-all">RAM usage: 15%</div>
                     </div>
                 </div>
             </header>
@@ -48,14 +47,22 @@
                                         <option value="yolov10n.engine">Yolov10n Engine</option>
                                         <option value="FabricScanV1-seg.pt">FabricScan v1</option>
                                     </select>
                                 </span>
                             </div>
-                            <div class="block text-sm" title="Select a camera">
                                 <span>Cameras</span>
                                 <div class="relative mt-1.5 flex gap-2">
-                                    <select onchange="CameraSelector(event)" required="" id="cameraSelect" name="cameraSelect" class="form-input outline-none peer w-full rounded-lg border border-slate-300 bg-white text-black px-3 py-2 pl-9 placeholder:font-light">
                                         <option value="null">--Select Camera--</option>
                                     </select>
                                 </div>
                             </div>
                         </div>
@@ -66,50 +73,42 @@
                     <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mt-10">
                         <div class="border border-sky-500 rounded-lg overflow-hidden relative">
                             <video id="videoElement" class="w-full h-full rounded-lg" autoplay playsinline></video>
-                            <img id="outputImage" class="w-full h-full scale-100 rounded-lg absolute top-0 left-0" />
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <script>
             let cpuCircle = document.getElementById("cpuCircle");
             let cpuDisplay = document.getElementById("cpuDisplay");
             let ramCircle = document.getElementById("ramCircle");
             let ramDisplay = document.getElementById("ramDisplay");
             let cameraSelect = document.getElementById("cameraSelect");
-            let videoElement = document.getElementById("videoElement");
-            let outputImage = document.getElementById("outputImage");
-            let isProcessing = false;
-            // Update system metrics every 10 seconds
-            setInterval(() => {
                 fetch("/sysInfo")
                     .then((response) => response.json())
                     .then((data) => {
-                        cpuDisplay.innerText = `CPU usage: ${data.cpu}%`;
-                        ramDisplay.innerText = `RAM usage: ${data.ram}%`;
-                        cpuCircle.style.background = `conic-gradient(#0ea5e9 ${data.cpu}%, #082f49 ${data.cpu}%)`;
-                        ramCircle.style.background = `conic-gradient(#0ea5e9 ${data.ram}%, #082f49 ${data.ram}%)`;
                     });
             }, 10000);
-            // Get camera list
             navigator.mediaDevices.enumerateDevices().then((devices) => {
                 devices.forEach((device) => {
                     if (device.kind === "videoinput") {
                         let option = document.createElement("option");
                         option.value = device.deviceId;
-                        option.text = device.label || `Camera ${cameraSelect.options.length + 1}`;
                         cameraSelect.appendChild(option);
                     }
                 });
             });
-            // Camera selection handler
             function CameraSelector(event) {
                 let cameraId = event.target.value;
                 let constraints = {
                     video: {
                         deviceId: cameraId ? { exact: cameraId } : undefined,
@@ -119,25 +118,47 @@
                     videoElement.srcObject = stream;
                 });
             }
-            // Start/Stop detection
             function startDetection() {
-                isProcessing = !isProcessing;
-                const startStopButton = document.getElementById("startStop");
-                if (isProcessing) {
-                    startStopButton.innerText = "Stop";
-                    fetch('/start_processing')
-                        .then(() => {
-                            outputImage.src = `/video_feed?${new Date().getTime()}`;
-                        });
-                } else {
-                    startStopButton.innerText = "Start";
-                    fetch('/stop_processing')
-                        .then(() => {
-                            outputImage.src = '';
-                        });
                 }
             }
         </script>
     </body>

 <html lang="en">
     <head>
         <meta charset="utf-8" />
                 <div class="flex items-center gap-2">
                     <div id="cpuCircle" class="h-10 w-10 group rounded-full flex items-center justify-center relative" style="background: conic-gradient(#0ea5e9 54deg, #082f49 54deg)">
                         <div class="h-8 w-8 rounded-full bg-sky-900 text-white p-2 text-xs flex item-center justify-center">CPU</div>
+                        <div id="cpuDisplay" class="absolute scale-y-0 group-hover:scale-y-100 -translate-y-1/2 origin-top text-sm text-white top-14 bg-sky-800 w-max rounded-md px-2 transition-all">CPU usage : 15%</div>
                     </div>
                     <div id="ramCircle" class="h-10 w-10 group rounded-full flex items-center justify-center relative" style="background: conic-gradient(#0ea5e9 54deg, #082f49 54deg)">
                         <div class="h-8 w-8 rounded-full bg-sky-900 text-white p-2 text-xs flex item-center justify-center">RAM</div>
+                        <div id="ramDisplay" class="absolute right-0 scale-y-0 group-hover:scale-y-100 -translate-y-1/2 origin-top text-sm text-white top-14 bg-sky-800 w-max rounded-md px-2 transition-all">RAM usage : 15%</div>
                     </div>
                 </div>
             </header>
                                         <option value="yolov10n.engine">Yolov10n Engine</option>
                                         <option value="FabricScanV1-seg.pt">FabricScan v1</option>
                                     </select>
+                                    <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-secondary-700 peer-focus:text-secondary dark:text-navy-300 dark:peer-focus:text-accent">
+                                        <svg fill="currentColor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M72.7,65.8a6.6,6.6,0,0,0-3.2.8l-8.8-6.5a11.36,11.36,0,0,0,1.2-5.2A11.91,11.91,0,0,0,53,43.4v-10a7,7,0,0,0,4-6.2,6.9,6.9,0,1,0-13.8,0,6.73,6.73,0,0,0,4,6.2v10a11.91,11.91,0,0,0-8.9,11.5,11.36,11.36,0,0,0,1.2,5.2l-8.8,6.5a7.22,7.22,0,0,0-3.2-.8,6.9,6.9,0,1,0,6.9,6.9c0-.5-.1-.9-.1-1.3l9.2-6.8a11.61,11.61,0,0,0,13.6,0l9.2,6.8a5.7,5.7,0,0,0-.1,1.3,6.9,6.9,0,0,0,13.8,0A7.41,7.41,0,0,0,72.7,65.8ZM51.4,60.7a6.75,6.75,0,0,1-1.4.2,6.1,6.1,0,0,1-5.7-4.4,7.72,7.72,0,0,1-.2-1.5,5.81,5.81,0,0,1,3-5.1,6,6,0,0,1,6,0,5.81,5.81,0,0,1,3,5.1,7.72,7.72,0,0,1-.2,1.5A6.54,6.54,0,0,1,51.4,60.7Z"></path>
+                                        </svg>
+                                    </span>
                                 </span>
                             </div>
+                            <div class="block text-sm" title="Select a model">
                                 <span>Cameras</span>
                                 <div class="relative mt-1.5 flex gap-2">
+                                    <select onchange="CameraSelector(event)" required="" id="cameraSelect" name="cameraSelect" class="form-input outline-none peer w-full rounded-lg border border-slate-300 bg-white text-black px-3 py-2 pl-9 placeholder:font-light hover:border-secondary-700 focus:border-secondary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent">
                                         <option value="null">--Select Camera--</option>
                                     </select>
+                                    <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-secondary-700 peer-focus:text-secondary dark:text-navy-300 dark:peer-focus:text-accent">
+                                        <svg fill="currentColor" width="1.2em" height="1.2em" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M72.7,65.8a6.6,6.6,0,0,0-3.2.8l-8.8-6.5a11.36,11.36,0,0,0,1.2-5.2A11.91,11.91,0,0,0,53,43.4v-10a7,7,0,0,0,4-6.2,6.9,6.9,0,1,0-13.8,0,6.73,6.73,0,0,0,4,6.2v10a11.91,11.91,0,0,0-8.9,11.5,11.36,11.36,0,0,0,1.2,5.2l-8.8,6.5a7.22,7.22,0,0,0-3.2-.8,6.9,6.9,0,1,0,6.9,6.9c0-.5-.1-.9-.1-1.3l9.2-6.8a11.61,11.61,0,0,0,13.6,0l9.2,6.8a5.7,5.7,0,0,0-.1,1.3,6.9,6.9,0,0,0,13.8,0A7.41,7.41,0,0,0,72.7,65.8ZM51.4,60.7a6.75,6.75,0,0,1-1.4.2,6.1,6.1,0,0,1-5.7-4.4,7.72,7.72,0,0,1-.2-1.5,5.81,5.81,0,0,1,3-5.1,6,6,0,0,1,6,0,5.81,5.81,0,0,1,3,5.1,7.72,7.72,0,0,1-.2,1.5A6.54,6.54,0,0,1,51.4,60.7Z"></path></svg>
+                                    </span>
                                 </div>
                             </div>
                         </div>
                     <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mt-10">
                         <div class="border border-sky-500 rounded-lg overflow-hidden relative">
                             <video id="videoElement" class="w-full h-full rounded-lg" autoplay playsinline></video>
+                            <img id="ouptut" class="w-full h-full scale-100 rounded-lg absolute top-0 left-0"></video>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <script>
             let cpuCircle = document.getElementById("cpuCircle");
             let cpuDisplay = document.getElementById("cpuDisplay");
             let ramCircle = document.getElementById("ramCircle");
             let ramDisplay = document.getElementById("ramDisplay");
             let cameraSelect = document.getElementById("cameraSelect");
+            let metricInterval = setInterval(() => {
                 fetch("/sysInfo")
                     .then((response) => response.json())
                     .then((data) => {
+                        cpuDisplay.innerText = CPU usage : ${data.cpu}%;
+                        ramDisplay.innerText = RAM usage : ${data.ram}%;
+                        cpuCircle.style.background = conic-gradient(#0ea5e9 ${data.cpu}%, #082f49 ${data.cpu}%);
+                        ramCircle.style.background = conic-gradient(#0ea5e9 ${data.ram}%, #082f49 ${data.ram}%);
                     });
             }, 10000);
+            // get camera list from browser
             navigator.mediaDevices.enumerateDevices().then((devices) => {
                 devices.forEach((device) => {
                     if (device.kind === "videoinput") {
                         let option = document.createElement("option");
                         option.value = device.deviceId;
+                        option.text = device.label || Camera ${cameraSelect.options.length + 1};
                         cameraSelect.appendChild(option);
                     }
                 });
             });
             function CameraSelector(event) {
                 let cameraId = event.target.value;
+                let videoElement = document.getElementById("videoElement");
                 let constraints = {
                     video: {
                         deviceId: cameraId ? { exact: cameraId } : undefined,
                     videoElement.srcObject = stream;
                 });
             }
+            window.ProcessStatus = false;
             function startDetection() {
+                if (window.ProcessStatus == false) {
+                    window.ProcessStatus = true;
+                    document.getElementById("startStop").innerText = "Stop";
+                }
+                else {
+                    window.ProcessStatus = false;
+                    document.getElementById("startStop").innerText = "Start";
                 }
+                if (window.ProcessStatus) {
+                    let videoElement = document.getElementById("videoElement");
+                    let output = document.getElementById("ouptut");
+                    let newCanvas = document.createElement("canvas");
+                    let model = document.getElementById("model").value;
+                    newCanvas.width = videoElement.videoWidth;
+                    newCanvas.height = videoElement.videoHeight;
+                    iterator(newCanvas,videoElement,output)
+                }
+            }
+            function iterator(newCanvas,videoElement,output) {
+                let ctx = newCanvas.getContext("2d");
+                ctx.drawImage(videoElement, 0, 0, newCanvas.width, newCanvas.height);
+                let formdata = new FormData();
+                formdata.append("image", newCanvas.toDataURL("image/jpeg"));
+                formdata.append("model", document.getElementById("model").value);
+                fetch("/processor", {
+                    method: "POST",
+                    body: formdata,
+                    redirect: "follow"
+                })
+                    .then((response) => response.json())
+                    .then((data) => {
+                        output.src = "data:image/jpeg;base64,"+data.image
+                    })
+                    .catch((error) => console.error("Error:", error))
+                    .finally(() => {
+                        if (window.ProcessStatus) {
+                            iterator(newCanvas,videoElement,output)
+                        }
+                    });
             }
         </script>
     </body>