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>