Hugging Face's logo

Spaces:
thejagstudio
/
FabricScan
Sleeping

App Files Community
1
thejagstudio commited on
Commit
a8ea06f
•
1 Parent(s): ca47374

Upload 9 files

Browse files
Files changed (9) hide show
  1. FabricScanV1.pt +3 -0
  2. app.py +61 -0
  3. static/logo.ico +0 -0
  4. static/logo.svg +4 -0
  5. static/logo192.png +0 -0
  6. static/logo512.png +0 -0
  7. templates/index.html +192 -0
  8. yolov9c-seg.pt +3 -0
  9. yolov9e-seg.pt +3 -0
FabricScanV1.pt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:363ff34a20b7511bacf5fded094d8822f690685767ff72dc0acf23c7fce741a2
3
+ size 6775907
app.py ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from flask import Flask, render_template, jsonify, request, send_file
2
+ import psutil
3
+ import json
4
+ from ultralytics import YOLO
5
+ import cv2
6
+ import numpy as np
7
+ from PIL import Image
8
+ import io
9
+ import base64
10
+
11
+ app = Flask(__name__)
12
+ modelName = "yolov9c-seg"
13
+ model = YOLO(modelName + ".pt")
14
+
15
+
16
+ @app.route("/")
17
+ def home():
18
+ return render_template("index.html")
19
+
20
+
21
+ @app.route("/sysInfo")
22
+ def sysInfo():
23
+ ram = psutil.virtual_memory()
24
+ ram_usage = ram.percent
25
+ cpu_usage = psutil.cpu_percent(interval=1)
26
+ data = {"ram": ram_usage, "cpu": cpu_usage}
27
+ return jsonify(data)
28
+
29
+
30
+ @app.route("/processor", methods=["POST"])
31
+ def processor():
32
+ global modelName, model
33
+ image = request.form.get("image")
34
+ modelNameForm = request.form.get("model", modelName)
35
+ if modelNameForm != modelName:
36
+ modelName = modelNameForm
37
+ model = YOLO(modelName + ".pt")
38
+ image = image.split(",")[1]
39
+ image = base64.b64decode(image)
40
+ image = Image.open(io.BytesIO(image))
41
+ image = np.array(image)
42
+ results = model(
43
+ image,
44
+ task="segment",
45
+ show=False,
46
+ save=False,
47
+ show_boxes=False,
48
+ show_labels=True,
49
+ imgsz=640,
50
+ iou=0.1,
51
+ max_det=20,
52
+ )
53
+ image = results[0].plot()
54
+ image = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
55
+ image = cv2.imencode(".jpg", image)[1].tobytes()
56
+ image = base64.b64encode(image).decode("utf-8")
57
+ return jsonify({"image": image})
58
+
59
+
60
+ app.run(debug=True, host="0.0.0.0", port=7860)
61
+ # app.run(debug=True)
static/logo.ico ADDED
static/logo.svg ADDED
static/logo192.png ADDED
static/logo512.png ADDED
templates/index.html ADDED
@@ -0,0 +1,192 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html lang="en">
2
+ <head>
3
+ <meta charset="utf-8" />
4
+ <link rel="icon" href="/static/logo.svg" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
6
+ <meta name="theme-color" content="#000000" />
7
+ <meta name="description" content="Fabric Scan" />
8
+ <link rel="apple-touch-icon" href="/static/logo192.png" />
9
+ <title>Fabric Scan</title>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ </head>
12
+ <body style="background-color: #e0f2fe">
13
+ <div class="flex flex-col bg-sky-950 min-h-screen">
14
+ <header class="flex justify-between h-14 items-center px-4 py-2 bg-sky-900">
15
+ <div class="flex flex-nowrap items-center justify-between">
16
+ <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 320 320">
17
+ <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>
18
+ <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>
19
+ </svg>
20
+ <h1 class="text-4xl text-white font-bold capitalize font-mono"><span class="text-sky-400 normal-case">abric</span>Scan</h1>
21
+ </div>
22
+ <div class="flex items-center gap-2">
23
+ <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)">
24
+ <div class="h-8 w-8 rounded-full bg-sky-900 text-white p-2 text-xs flex item-center justify-center">CPU</div>
25
+ <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>
26
+ </div>
27
+ <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)">
28
+ <div class="h-8 w-8 rounded-full bg-sky-900 text-white p-2 text-xs flex item-center justify-center">RAM</div>
29
+ <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>
30
+ </div>
31
+ </div>
32
+ </header>
33
+ <div class="min-h-screen w-[calc(100%-2rem)] mx-auto h-full mb-5">
34
+ <div class="w-full h-full text-white mx-auto mt-5 pb-5 backdrop-blur-xl rounded-none lg:rounded-xl overflow-hidden">
35
+ <div class="mt-4 flex gap-3 items-center justify-start">
36
+ <div class="flex gap-4 gap-y-1 w-fit h-fit border border-sky-500 rounded-lg p-2 overflow-hidden">
37
+ <div class="block text-sm" title="Select a model">
38
+ <span>Path to model</span>
39
+ <span class="relative mt-1.5 flex">
40
+ <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">
41
+ <option disabled="" value="">--Select Model--</option>
42
+ <option value="yolov9c-seg">Base Model Small</option>
43
+ <option value="yolov9e-seg">Base Model Large</option>
44
+ <option value="FabricScanV1">FabricScan v1</option>
45
+ </select>
46
+ <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">
47
+ <svg fill="currentColor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
48
+ <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>
49
+ </svg>
50
+ </span>
51
+ </span>
52
+ </div>
53
+ <div class="block text-sm" title="Select a model">
54
+ <span>Cameras</span>
55
+ <div class="relative mt-1.5 flex gap-2">
56
+ <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">
57
+ <option value="null">--Select Camera--</option>
58
+ </select>
59
+ <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">
60
+ <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>
61
+ </span>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ <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">
66
+ Start
67
+ </div>
68
+ </div>
69
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mt-10">
70
+ <div class="border border-sky-500 rounded-lg overflow-hidden relative">
71
+ <video id="videoElement" class="w-full h-full rounded-lg" autoplay playsinline></video>
72
+ <img id="ouptut" class="w-full h-full scale-100 rounded-lg absolute top-0 left-0"></video>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ <script>
79
+ let cpuCircle = document.getElementById("cpuCircle");
80
+ let cpuDisplay = document.getElementById("cpuDisplay");
81
+ let ramCircle = document.getElementById("ramCircle");
82
+ let ramDisplay = document.getElementById("ramDisplay");
83
+ let cameraSelect = document.getElementById("cameraSelect");
84
+
85
+ let metricInterval = setInterval(() => {
86
+ fetch("/sysInfo")
87
+ .then((response) => response.json())
88
+ .then((data) => {
89
+ cpuDisplay.innerText = `CPU usage : ${data.cpu}%`;
90
+ ramDisplay.innerText = `RAM usage : ${data.ram}%`;
91
+ cpuCircle.style.background = `conic-gradient(#0ea5e9 ${data.cpu}%, #082f49 ${data.cpu}%)`;
92
+ ramCircle.style.background = `conic-gradient(#0ea5e9 ${data.ram}%, #082f49 ${data.ram}%)`;
93
+ });
94
+ }, 10000);
95
+
96
+ // get camera list from browser
97
+ navigator.mediaDevices.enumerateDevices().then((devices) => {
98
+ devices.forEach((device) => {
99
+ if (device.kind === "videoinput") {
100
+ let option = document.createElement("option");
101
+ option.value = device.deviceId;
102
+ option.text = device.label || `Camera ${cameraSelect.options.length + 1}`;
103
+ cameraSelect.appendChild(option);
104
+ }
105
+ });
106
+ });
107
+
108
+ function CameraSelector(event) {
109
+ let cameraId = event.target.value;
110
+ let videoElement = document.getElementById("videoElement");
111
+ let constraints = {
112
+ video: {
113
+ deviceId: cameraId ? { exact: cameraId } : undefined,
114
+ },
115
+ };
116
+ navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
117
+ videoElement.srcObject = stream;
118
+ });
119
+ }
120
+
121
+ window.ProcessStatus = false;
122
+
123
+ function startDetection() {
124
+ if (window.ProcessStatus == false) {
125
+ window.ProcessStatus = true;
126
+ document.getElementById("startStop").innerText = "Stop";
127
+ }
128
+ else {
129
+ window.ProcessStatus = false;
130
+ document.getElementById("startStop").innerText = "Start";
131
+ }
132
+ console.log(window.ProcessStatus);
133
+ // let videoElement = document.getElementById("videoElement");
134
+ // let output = document.getElementById("ouptut");
135
+ // let model = document.getElementById("model").value;
136
+ // let cameraId = cameraSelect.value;
137
+ // if (videoElement.srcObject) {
138
+ // if (videoElement.style.display === "none") {
139
+ // videoElement.style.display = "block";
140
+ // output.style.display = "none";
141
+ // videoElement.srcObject.getTracks().forEach((track) => track.enabled = true);
142
+ // } else {
143
+ // videoElement.style.display = "none";
144
+ // output.style.display = "block";
145
+ // videoElement.srcObject.getTracks().forEach((track) => track.enabled = false);
146
+ // let ws = new WebSocket(`ws://${window.location.host}/ws`);
147
+ // ws.onopen = () => {
148
+ // ws.send(JSON.stringify({ model, cameraId }));
149
+ // };
150
+ // ws.onmessage = (event) => {
151
+ // output.src = URL.createObjectURL(new Blob([event.data], { type: "image/jpeg" }));
152
+ // };
153
+ // }
154
+ // }
155
+ if (window.ProcessStatus) {
156
+ let videoElement = document.getElementById("videoElement");
157
+ let output = document.getElementById("ouptut");
158
+ let newCanvas = document.createElement("canvas");
159
+ let model = document.getElementById("model").value;
160
+ // resize the canvas to the size of the video element
161
+ newCanvas.width = videoElement.videoWidth;
162
+ newCanvas.height = videoElement.videoHeight;
163
+ iterator(newCanvas,videoElement,output)
164
+ }
165
+
166
+ }
167
+ function iterator(newCanvas,videoElement,output) {
168
+ let ctx = newCanvas.getContext("2d");
169
+
170
+
171
+ ctx.drawImage(videoElement, 0, 0, newCanvas.width, newCanvas.height);
172
+ let formdata = new FormData();
173
+ formdata.append("image", newCanvas.toDataURL("image/jpeg"));
174
+ formdata.append("model", document.getElementById("model").value);
175
+ fetch("/processor", {
176
+ method: "POST",
177
+ body: formdata,
178
+ })
179
+ .then((response) => response.json())
180
+ .then((data) => {
181
+ output.src = "data:image/jpeg;base64,"+data.image
182
+ })
183
+ .catch((error) => console.error("Error:", error))
184
+ .finally(() => {
185
+ if (window.ProcessStatus) {
186
+ iterator(newCanvas,videoElement,output)
187
+ }
188
+ });
189
+ }
190
+ </script>
191
+ </body>
192
+ </html>
yolov9c-seg.pt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:ea90f52af3ec0a5ef36b540df1902ef00b221c0af239e045dd256389e4c2f867
3
+ size 56474024
yolov9e-seg.pt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:f812714d284b5aa67aa63f4fc604e6de71b2a6e8189046cacc5718855cb3c273
3
+ size 122214886