Hugging Face's logo

Spaces:
static-templates
/
transformers.js
Running

App Files Community
Xenova HF staff commited on
Commit
dd1b723
•
1 Parent(s): ab9f226

Upload 3 files

Browse files
Files changed (3) hide show
  1. index.html +28 -18
  2. index.js +79 -0
  3. style.css +66 -18
index.html CHANGED
@@ -1,19 +1,29 @@
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="style.css" />
7
+
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
+ <title>Transformers.js - Object Detection</title>
10
+ </head>
11
+
12
+ <body>
13
+ <h1>Object Detection w/ 🤗 Transformers.js</h1>
14
+ <label id="container" for="upload">
15
+ <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
16
+ <path fill="#000"
17
+ d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
18
+ </path>
19
+ </svg>
20
+ Click to upload image
21
+ <label id="example">(or try example)</label>
22
+ </label>
23
+ <label id="status">Loading model...</label>
24
+ <input id="upload" type="file" accept="image/*" />
25
+
26
+ <script src="index.js" type="module"></script>
27
+ </body>
28
+
29
+ </html>
index.js ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.9.0';
2
+
3
+ // Since we will download the model from the Hugging Face Hub, we can skip the local model check
4
+ env.allowLocalModels = false;
5
+
6
+ // Reference the elements that we will need
7
+ const status = document.getElementById('status');
8
+ const fileUpload = document.getElementById('upload');
9
+ const imageContainer = document.getElementById('container');
10
+ const example = document.getElementById('example');
11
+
12
+ const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
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
+ example.addEventListener('click', (e) => {
20
+ e.preventDefault();
21
+ detect(EXAMPLE_URL);
22
+ });
23
+
24
+ fileUpload.addEventListener('change', function (e) {
25
+ const file = e.target.files[0];
26
+ if (!file) {
27
+ return;
28
+ }
29
+
30
+ const reader = new FileReader();
31
+
32
+ // Set up a callback when the file is loaded
33
+ reader.onload = e2 => detect(e2.target.result);
34
+
35
+ reader.readAsDataURL(file);
36
+ });
37
+
38
+
39
+ // Detect objects in the image
40
+ async function detect(img) {
41
+ imageContainer.innerHTML = '';
42
+ imageContainer.style.backgroundImage = `url(${img})`;
43
+
44
+ status.textContent = 'Analysing...';
45
+ const output = await detector(img, {
46
+ threshold: 0.5,
47
+ percentage: true,
48
+ });
49
+ status.textContent = '';
50
+ output.forEach(renderBox);
51
+ }
52
+
53
+ // Render a bounding box and label on the image
54
+ function renderBox({ box, label }) {
55
+ const { xmax, xmin, ymax, ymin } = box;
56
+
57
+ // Generate a random color for the box
58
+ const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
59
+
60
+ // Draw the box
61
+ const boxElement = document.createElement('div');
62
+ boxElement.className = 'bounding-box';
63
+ Object.assign(boxElement.style, {
64
+ borderColor: color,
65
+ left: 100 * xmin + '%',
66
+ top: 100 * ymin + '%',
67
+ width: 100 * (xmax - xmin) + '%',
68
+ height: 100 * (ymax - ymin) + '%',
69
+ })
70
+
71
+ // Draw label
72
+ const labelElement = document.createElement('span');
73
+ labelElement.textContent = label;
74
+ labelElement.className = 'bounding-box-label';
75
+ labelElement.style.backgroundColor = color;
76
+
77
+ boxElement.appendChild(labelElement);
78
+ imageContainer.appendChild(boxElement);
79
+ }
style.css CHANGED
@@ -1,28 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ box-sizing: border-box;
3
+ padding: 0;
4
+ margin: 0;
5
+ font-family: sans-serif;
6
+ }
7
+
8
+ html,
9
+ body {
10
+ height: 100%;
11
+ }
12
+
13
  body {
14
+ padding: 32px;
 
15
  }
16
 
17
+ body,
18
+ #container {
19
+ display: flex;
20
+ flex-direction: column;
21
+ justify-content: center;
22
+ align-items: center;
23
  }
24
 
25
+ #container {
26
+ position: relative;
27
+ gap: 0.4rem;
28
+
29
+ width: 640px;
30
+ height: 640px;
31
+ max-width: 100%;
32
+ max-height: 100%;
33
+
34
+ border: 2px dashed #D1D5DB;
35
+ border-radius: 0.75rem;
36
+ overflow: hidden;
37
+ cursor: pointer;
38
+ margin: 1rem;
39
+
40
+ background-size: 100% 100%;
41
+ background-position: center;
42
+ background-repeat: no-repeat;
43
+ font-size: 18px;
44
  }
45
 
46
+ #upload {
47
+ display: none;
 
 
 
 
48
  }
49
 
50
+ svg {
51
+ pointer-events: none;
52
  }
53
+
54
+ #example {
55
+ font-size: 14px;
56
+ text-decoration: underline;
57
+ cursor: pointer;
58
+ }
59
+
60
+ #example:hover {
61
+ color: #2563EB;
62
+ }
63
+
64
+ .bounding-box {
65
+ position: absolute;
66
+ box-sizing: border-box;
67
+ border: solid 2px;
68
+ }
69
+
70
+ .bounding-box-label {
71
+ color: white;
72
+ position: absolute;
73
+ font-size: 12px;
74
+ margin: -16px 0 0 -2px;
75
+ padding: 1px;
76
+ }