Xenova HF staff commited on
Commit
9421f12
0 Parent(s):

Duplicate from static-templates/transformers.js

Browse files
Files changed (5) hide show
  1. .gitattributes +35 -0
  2. README.md +12 -0
  3. index.html +29 -0
  4. index.js +79 -0
  5. style.css +76 -0
.gitattributes ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *.7z filter=lfs diff=lfs merge=lfs -text
2
+ *.arrow filter=lfs diff=lfs merge=lfs -text
3
+ *.bin filter=lfs diff=lfs merge=lfs -text
4
+ *.bz2 filter=lfs diff=lfs merge=lfs -text
5
+ *.ckpt filter=lfs diff=lfs merge=lfs -text
6
+ *.ftz filter=lfs diff=lfs merge=lfs -text
7
+ *.gz filter=lfs diff=lfs merge=lfs -text
8
+ *.h5 filter=lfs diff=lfs merge=lfs -text
9
+ *.joblib filter=lfs diff=lfs merge=lfs -text
10
+ *.lfs.* filter=lfs diff=lfs merge=lfs -text
11
+ *.mlmodel filter=lfs diff=lfs merge=lfs -text
12
+ *.model filter=lfs diff=lfs merge=lfs -text
13
+ *.msgpack filter=lfs diff=lfs merge=lfs -text
14
+ *.npy filter=lfs diff=lfs merge=lfs -text
15
+ *.npz filter=lfs diff=lfs merge=lfs -text
16
+ *.onnx filter=lfs diff=lfs merge=lfs -text
17
+ *.ot filter=lfs diff=lfs merge=lfs -text
18
+ *.parquet filter=lfs diff=lfs merge=lfs -text
19
+ *.pb filter=lfs diff=lfs merge=lfs -text
20
+ *.pickle filter=lfs diff=lfs merge=lfs -text
21
+ *.pkl filter=lfs diff=lfs merge=lfs -text
22
+ *.pt filter=lfs diff=lfs merge=lfs -text
23
+ *.pth filter=lfs diff=lfs merge=lfs -text
24
+ *.rar filter=lfs diff=lfs merge=lfs -text
25
+ *.safetensors filter=lfs diff=lfs merge=lfs -text
26
+ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
27
+ *.tar.* filter=lfs diff=lfs merge=lfs -text
28
+ *.tar filter=lfs diff=lfs merge=lfs -text
29
+ *.tflite filter=lfs diff=lfs merge=lfs -text
30
+ *.tgz filter=lfs diff=lfs merge=lfs -text
31
+ *.wasm filter=lfs diff=lfs merge=lfs -text
32
+ *.xz filter=lfs diff=lfs merge=lfs -text
33
+ *.zip filter=lfs diff=lfs merge=lfs -text
34
+ *.zst filter=lfs diff=lfs merge=lfs -text
35
+ *tfevents* filter=lfs diff=lfs merge=lfs -text
README.md ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: Transformers.js
3
+ emoji: 🌐
4
+ colorFrom: blue
5
+ colorTo: yellow
6
+ sdk: static
7
+ pinned: false
8
+ models:
9
+ - Xenova/detr-resnet-50
10
+ ---
11
+
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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.10.1';
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 ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ }