Spaces:

Xenova
/

object-detection-web

Running

App Files Files Community

Xenova HF staff commited on Jan 22

Commit

e6facaf

•

0 Parent(s):

Duplicate from static-templates/transformers.js

Browse files

Files changed (5) hide show

.gitattributes +35 -0
README.md +10 -0
index.html +29 -0
index.js +79 -0
style.css +76 -0

.gitattributes ADDED Viewed

	@@ -0,0 +1,35 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md ADDED Viewed

	@@ -0,0 +1,10 @@

+---
+title: Transformers.js
+emoji: 🌐
+colorFrom: blue
+colorTo: yellow
+sdk: static
+pinned: false
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html ADDED Viewed

	@@ -0,0 +1,29 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Transformers.js - Object Detection</title>
+</head>
+<body>
+    <h1>Object Detection w/ 🤗 Transformers.js</h1>
+    <label id="container" for="upload">
+        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill="#000"
+                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">
+            </path>
+        </svg>
+        Click to upload image
+        <label id="example">(or try example)</label>
+    </label>
+    <label id="status">Loading model...</label>
+    <input id="upload" type="file" accept="image/*" />
+    <script src="index.js" type="module"></script>
+</body>
+</html>

index.js ADDED Viewed

	@@ -0,0 +1,79 @@

+import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
+// Since we will download the model from the Hugging Face Hub, we can skip the local model check
+env.allowLocalModels = false;
+// Reference the elements that we will need
+const status = document.getElementById('status');
+const fileUpload = document.getElementById('upload');
+const imageContainer = document.getElementById('container');
+const example = document.getElementById('example');
+const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+// Create a new object detection pipeline
+status.textContent = 'Loading model...';
+const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
+status.textContent = 'Ready';
+example.addEventListener('click', (e) => {
+    e.preventDefault();
+    detect(EXAMPLE_URL);
+});
+fileUpload.addEventListener('change', function (e) {
+    const file = e.target.files[0];
+    if (!file) {
+        return;
+    }
+    const reader = new FileReader();
+    // Set up a callback when the file is loaded
+    reader.onload = e2 => detect(e2.target.result);
+    reader.readAsDataURL(file);
+});
+// Detect objects in the image
+async function detect(img) {
+    imageContainer.innerHTML = '';
+    imageContainer.style.backgroundImage = `url(${img})`;
+    status.textContent = 'Analysing...';
+    const output = await detector(img, {
+        threshold: 0.5,
+        percentage: true,
+    });
+    status.textContent = '';
+    output.forEach(renderBox);
+}
+// Render a bounding box and label on the image
+function renderBox({ box, label }) {
+    const { xmax, xmin, ymax, ymin } = box;
+    // Generate a random color for the box
+    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
+    // Draw the box
+    const boxElement = document.createElement('div');
+    boxElement.className = 'bounding-box';
+    Object.assign(boxElement.style, {
+        borderColor: color,
+        left: 100 * xmin + '%',
+        top: 100 * ymin + '%',
+        width: 100 * (xmax - xmin) + '%',
+        height: 100 * (ymax - ymin) + '%',
+    })
+    // Draw label
+    const labelElement = document.createElement('span');
+    labelElement.textContent = label;
+    labelElement.className = 'bounding-box-label';
+    labelElement.style.backgroundColor = color;
+    boxElement.appendChild(labelElement);
+    imageContainer.appendChild(boxElement);
+}

style.css ADDED Viewed

	@@ -0,0 +1,76 @@

+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: sans-serif;
+}
+html,
+body {
+    height: 100%;
+}
+body {
+    padding: 32px;
+}
+body,
+#container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+#container {
+    position: relative;
+    gap: 0.4rem;
+    width: 640px;
+    height: 640px;
+    max-width: 100%;
+    max-height: 100%;
+    border: 2px dashed #D1D5DB;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    cursor: pointer;
+    margin: 1rem;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    font-size: 18px;
+}
+#upload {
+    display: none;
+}
+svg {
+    pointer-events: none;
+}
+#example {
+    font-size: 14px;
+    text-decoration: underline;
+    cursor: pointer;
+}
+#example:hover {
+    color: #2563EB;
+}
+.bounding-box {
+    position: absolute;
+    box-sizing: border-box;
+    border: solid 2px;
+}
+.bounding-box-label {
+    color: white;
+    position: absolute;
+    font-size: 12px;
+    margin: -16px 0 0 -2px;
+    padding: 1px;
+}