Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="icon" href="/static/logo.svg" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <meta name="theme-color" content="#000000" /> | |
| <meta name="description" content="Fabric Scan" /> | |
| <link rel="apple-touch-icon" href="/static/logo192.png" /> | |
| <title>Fabric Scan</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body style="background-color: #e0f2fe"> | |
| <div class="flex flex-col bg-sky-950 min-h-screen"> | |
| <header class="flex justify-between h-14 items-center px-4 py-2 bg-sky-900"> | |
| <div class="flex flex-nowrap items-center justify-between"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 320 320"> | |
| <path d="M100.75 303.2v-3.825l-5.45-2.725C78 288 65.45 278.7 51.925 264.525c-17.9-18.775-31.3-43.95-37-69.65-4.225-19-4.75-39.275-1.525-58.625 3.75-22.525 13.875-46.075 27.725-64.475 3.85-5.125 8.4-10.3 14.25-16.25C63.1 47.7 69.25 42.6 78.25 36.6c20.225-13.475 43.225-21.85 67.25-24.475 4.9-.55 20.625-.775 26.875-.4 5.8.35 7.975.6 13.75 1.55 18.3 3.05 34.275 8.725 50.5 18 8.95 5.1 18.6 12.125 26.825 19.55l1.3 1.175h-38.575l-2.65-1.475c-14.625-8.125-31.45-13.5-48.275-15.4-7.475-.85-21.55-.725-29.25.275-28.5 3.65-55.225 16.975-75.25 37.5C62.825 81.025 58.025 87.275 52.2 97c-4.5 7.525-6.275 11.15-9.725 20.2-5.55 14.425-8.3 31.175-7.9 47.8.25 9.65 1.35 18 3.575 27C45 219.775 60.9 244.325 83.5 262.025c6.45 5.05 16.4 11.4 16.95 10.85.25-.225.375-67.5.175-72.8l-.175-4.325H63.5v-3.8c0-5.6.425-10.425 1.125-13.425 1.725-7.15 5.35-13.5 10.75-18.9 5.7-5.725 11.225-8.825 19.5-11.025l3.25-.85h143.7l-.175 6.075c-.175 6.8-.5 9.2-1.65 12.75-2.575 7.95-5.45 12.7-10.925 17.925-5.8 5.575-13.5 9.375-21.325 10.525-1.225.175-11.65.325-30.3.45-15.625.075-28.475.2-28.525.275-.075.075-.2 13.525-.3 29.875-.2 35.225-.325 40.425-1.225 44-2.175 8.775-6.075 16.05-11.975 22.3-7.65 8.1-17.725 13.225-28.875 14.7-1.55.2-3.5.375-4.325.375h-1.475v-3.8z" fill="#FFF"></path> | |
| <path d="M151.25 311.75c-2.4-.1-5.675-.375-7.25-.575-5.875-.8-14.25-2.3-14.175-2.525.05-.125 1.225-.875 2.625-1.625 6.775-3.725 13.05-9.425 17.2-15.675l1.725-2.575 8.775-.025c9.325 0 13.1-.2 18.725-1.025 28.25-4.075 53.075-16.375 72.75-36.1 11.675-11.65 20.75-25.1 27.325-40.5 8.975-21 12-45.225 8.525-68.375-2.225-14.75-7.125-29.275-14.225-42.175-2.775-5.025-4.2-7.325-4.55-7.325-.125 0-1.55 1.325-3.15 2.95-7.175 7.275-14.9 11.525-25.475 14.075l-3.05.725h-20.1c-11.05 0-30.9.075-44.1.175l-24.025.15-.15 7.025c-.1 3.875-.225 7.45-.3 7.975l-.15.925h-47.525l.15-10.3c.1-5.675.275-11.225.425-12.325C102.325 96.55 106.175 87.8 111.675 81c1.95-2.4 5.9-6.225 8.325-8.025 5.425-4.075 12.625-7.35 19.575-8.95 1.975-.475 4.475-.5 70.75-.675L279 63.175v4.075l2.475 3.3c16.9 22.725 26.475 46.8 29.8 75.05 1.025 8.6.875 26.025-.275 35.1-.95 7.25-3.175 17.5-5.475 25.05-2.5 8.225-4.95 14.35-9.15 22.875-7.55 15.325-15.925 26.95-28.25 39.25-7.15 7.15-12.175 11.425-19.85 16.925-19.8 14.125-44.875 23.65-69.65 26.425-5.175.575-19.9.85-27.375.525z" fill="#38bdf8"></path> | |
| </svg> | |
| <h1 class="text-4xl text-white font-bold capitalize font-mono"><span class="text-sky-400 normal-case">abric</span>Scan</h1> | |
| </div> | |
| <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> | |
| <div class="min-h-screen w-[calc(100%-2rem)] mx-auto h-full mb-5"> | |
| <div class="w-full h-full text-white mx-auto mt-5 pb-5 backdrop-blur-xl rounded-none lg:rounded-xl overflow-hidden"> | |
| <div class="mt-4 flex gap-3 items-center justify-start"> | |
| <div class="flex gap-4 gap-y-1 w-fit h-fit border border-sky-500 rounded-lg p-2 overflow-hidden"> | |
| <div class="block text-sm" title="Select a model"> | |
| <span>Path to model</span> | |
| <span class="relative mt-1.5 flex"> | |
| <select required="" id="model" name="model" 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 disabled="" value="">--Select Model--</option> | |
| <option value="yolov9c-seg.pt">Base Model Small</option> | |
| <option value="yolov9e-seg.pt">Base Model Large</option> | |
| <option value="yolov8n-seg.pt">Yolov8n Small</option> | |
| <option value="yolov8n.onnx">Yolov8n Onnx</option> | |
| <option value="yolov10n.onnx">Yolov10n Onnx</option> | |
| <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 id="startStop" onclick="startDetection()" title="Start and Stop Cameras" class="bg-sky-800 font-mono font-medium flex gap-3 items-center justify-between px-5 w-fit h-16 py-3 rounded-lg text-center cursor-pointer hover:bg-sky-800/50 transition-all duration-300"> | |
| Start | |
| </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, | |
| }, | |
| }; | |
| navigator.mediaDevices.getUserMedia(constraints).then((stream) => { | |
| 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> | |
| </html> | |