Spaces:

thejagstudio
/

FabricScan

Sleeping

App Files Files Community

thejagstudio commited on Jan 11

Commit

7816fde

verified ·

1 Parent(s): 36505bb

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +33 -60

templates/index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -22,11 +23,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>
@@ -47,22 +48,14 @@
                                         <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>
@@ -73,31 +66,36 @@
                     <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") {
@@ -109,9 +107,9 @@
                 });
             });
             function CameraSelector(event) {
                 let cameraId = event.target.value;
-                let videoElement = document.getElementById("videoElement");
                 let constraints = {
                     video: {
                         deviceId: cameraId ? { exact: cameraId } : undefined,
@@ -122,50 +120,25 @@
                 });
             }
-            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>
-</html>

+<!DOCTYPE html>
 <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>
                             </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>
                     <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") {
                 });
             });
+            // Camera selection handler
             function CameraSelector(event) {
                 let cameraId = event.target.value;
                 let constraints = {
                     video: {
                         deviceId: cameraId ? { exact: cameraId } : undefined,
                 });
             }
+            // 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>