Hugging Face's logo

Spaces:
grimzaeye
/
huggingfaceDemo
Running

App Files Community
huggingfaceDemo
File size: 3,700 Bytes 
f3a01cb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
    <title>Heelo huggingface.js</title>
</head>

<body>
    <script type="module">
        import { HfInference } from 'https://cdn.skypack.dev/@huggingface/inference@1.5.2';
        let hf = new HfInference()
        document.querySelector("#tokenBtn").addEventListener("click", (e) => {
            const token = document.querySelector("#token").value;
            hf = new HfInference(token)
            init()
        })
        document.addEventListener("DOMContentLoaded", async () => {
            init();
        })
        function init() {
            const img = document.querySelector("#example-img");
            fetch(img.src)
                .then((res) => res.blob())
                .then((blob) => {
                    detectObjects(blob, img.naturalWidth, img.naturalHeight);
                })
        }
        async function detectObjects(imgBlob, imgW, imgH) {
            try {
                const objectDetectionRes = await hf.objectDetection({
                    data: imgBlob,
                    model: "facebook/detr-resnet-50"
                })
                document.querySelector("#output").innerText = JSON.stringify(objectDetectionRes, null, 2);
                const container = document.querySelector("#image-container");
                container.querySelectorAll(".box").forEach((el) => el.remove());
                const boxes = objectDetectionRes.map((obj) => {
                    const w = (100 * (obj.box.xmax - obj.box.xmin)) / imgW;
                    const h = (100 * (obj.box.ymax - obj.box.ymin)) / imgH;
                    const box = document.createElement("div");
                    box.classList.add("box");
                    box.style.position = "absolute";
                    box.style.border = "solid 2px red";
                    box.style.top = (100 * obj.box.ymin) / imgH + "%";
                    box.style.left = (100 * obj.box.xmin) / imgW + "%";
                    box.style.width = w + "%";
                    box.style.height = h + "%";
                    box.appendChild(document.createTextNode(obj.label));
                    return box;
                })
                boxes.forEach((box) => {
                    container.appendChild(box);
                })
            } catch (e) {
                document.querySelector("#output").innerText = e.message;
            }
        }
        document.querySelector("#image-file").addEventListener("change", async (e) => {
            const file = e.target.files[0];
            const newImage = new Image();
            newImage.src = URL.createObjectURL(file)
            const img = document.querySelector("#example-img");
            img.src = newImage.src;
            newImage.onload = () => {
                detectObjects(file, newImage.naturalWidth, newImage.naturalHeight);
            }
        });
    </script>
    <h1> Hello huggingface.js </h1>
    <div>
        <label for="token">HF Token</label>
        <div style="display: flex">
            <input style="flex: 2 1 0%" type="password" id="token" />
            <button style="flex: 1 1 0%" id="tokenBtn">Set Token</button>
        </div>
    </div>

    <input type="file" id="image-file" accept="image/*" />
    <div style="position: relative;" id="image-container">
        <img id="example-img" width="100%"
            src="https://raw.githubusercontent.com/huggingface/huggingface.js/main/packages/inference/test/cats.png">
    </div>
    <pre><code id="output"></code></pre>
</body>

</html>