Hugging Face's logo

Spaces:
ammaan
/
myspace
Running

App Files Community
ammaan commited on
Commit
e7aa2e3
•
1 Parent(s): 62e1255

done

Browse files
Files changed (3) hide show
  1. index.css +58 -0
  2. index.html +25 -19
  3. index.js +80 -0
index.css ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html,
2
+ body {
3
+ font-family: Arial, Helvetica, sans-serif;
4
+ }
5
+
6
+ .container {
7
+ margin: 40px auto;
8
+ width: max(50vw, 400px);
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: center;
12
+ }
13
+
14
+
15
+ .custom-file-upload {
16
+ display: flex;
17
+ align-items: center;
18
+ cursor: pointer;
19
+ gap: 10px;
20
+ border: 2px solid black;
21
+ padding: 8px 16px;
22
+ cursor: pointer;
23
+ border-radius: 6px;
24
+ }
25
+
26
+ #file-upload {
27
+ display: none;
28
+ }
29
+
30
+ .upload-icon {
31
+ width: 30px;
32
+ }
33
+
34
+ #image-container {
35
+ width: 100%;
36
+ margin-top: 20px;
37
+ position: relative;
38
+ }
39
+
40
+ #image-container>img {
41
+ width: 100%;
42
+ }
43
+
44
+ .bounding-box {
45
+ position: absolute;
46
+ box-sizing: border-box;
47
+ border-width: 2px;
48
+ border-style: solid;
49
+ }
50
+
51
+ .bounding-box-label {
52
+ color: white;
53
+ position: absolute;
54
+ font-size: 12px;
55
+ margin-top: -16px;
56
+ margin-left: -2px;
57
+ padding: 1px;
58
+ }
index.html CHANGED
@@ -1,19 +1,25 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <link rel="stylesheet" href="index.css" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <title>Transformers.js - Object Detection demo</title>
9
+ </head>
10
+
11
+ <body>
12
+ <main class="container">
13
+ <label class="custom-file-upload">
14
+ <input id="file-upload" type="file" accept="image/*" />
15
+ <img class="upload-icon"
16
+ src="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/upload-icon.png" />
17
+ Upload image
18
+ </label>
19
+ <div id="image-container"></div>
20
+ <p id="status"></p>
21
+ </main>
22
+ <script src="index.js" type="module"></script>
23
+ </body>
24
+
25
+ </html>
index.js ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ pipeline,
3
+ env,
4
+ } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0";
5
+
6
+ // Since we will download the model from the Hugging Face Hub, we can skip the local model check
7
+ env.allowLocalModels = false;
8
+
9
+ // Reference the elements that we will need
10
+ const status = document.getElementById("status");
11
+ const fileUpload = document.getElementById("file-upload");
12
+ const imageContainer = document.getElementById("image-container");
13
+
14
+ // Create a new object detection pipeline
15
+ status.textContent = "Loading model...";
16
+ const detector = await pipeline("object-detection", "Xenova/detr-resnet-50");
17
+ status.textContent = "Ready";
18
+
19
+ fileUpload.addEventListener("change", function (e) {
20
+ const file = e.target.files[0];
21
+ if (!file) {
22
+ return;
23
+ }
24
+
25
+ const reader = new FileReader();
26
+
27
+ // Set up a callback when the file is loaded
28
+ reader.onload = function (e2) {
29
+ imageContainer.innerHTML = "";
30
+ const image = document.createElement("img");
31
+ image.src = e2.target.result;
32
+ imageContainer.appendChild(image);
33
+ detect(image);
34
+ };
35
+ reader.readAsDataURL(file);
36
+ });
37
+
38
+ // Detect objects in the image
39
+ async function detect(img) {
40
+ status.textContent = "Analysing...";
41
+ const output = await detector(img.src, {
42
+ threshold: 0.5,
43
+ percentage: true,
44
+ });
45
+ status.textContent = "";
46
+ output.forEach(renderBox);
47
+ }
48
+
49
+ // Render a bounding box and label on the image
50
+ function renderBox({ box, label }) {
51
+ console.log(box);
52
+ const { xmax, xmin, ymax, ymin } = box;
53
+
54
+ // Generate a random color for the box
55
+ const color =
56
+ "#" +
57
+ Math.floor(Math.random() * 0xffffff)
58
+ .toString(16)
59
+ .padStart(6, 0);
60
+
61
+ // Draw the box
62
+ const boxElement = document.createElement("div");
63
+ boxElement.className = "bounding-box";
64
+ Object.assign(boxElement.style, {
65
+ borderColor: color,
66
+ left: 100 * xmin + "%",
67
+ top: 100 * ymin + "%",
68
+ width: 100 * (xmax - xmin) + "%",
69
+ height: 100 * (ymax - ymin) + "%",
70
+ });
71
+
72
+ // Draw label
73
+ const labelElement = document.createElement("span");
74
+ labelElement.textContent = label;
75
+ labelElement.className = "bounding-box-label";
76
+ labelElement.style.backgroundColor = color;
77
+
78
+ boxElement.appendChild(labelElement);
79
+ imageContainer.appendChild(boxElement);
80
+ }