Spaces:
Sleeping
Sleeping
File size: 14,458 Bytes
a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 323c8cb 262775b a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 c01e670 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 5e9f7b7 a8ea06f 7816fde |
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 |
<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> |