detrjs_suin

Running

App Files Files Community

Xenova HF staff commited on Nov 26, 2023

Commit

dd1b723

•

1 Parent(s): ab9f226

Upload 3 files

Browse files

Files changed (3) hide show

index.html +28 -18
index.js +79 -0
style.css +66 -18

index.html CHANGED Viewed

@@ -1,19 +1,29 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!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 CHANGED Viewed

@@ -1,28 +1,76 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+    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;
+}