Hugging Face's logo

Spaces:
Xenova
/
webgpu-video-background-removal
Running

App Files Community
Xenova HF staff commited on
Commit
6fe3e31
•
1 Parent(s): 86c5334

Upload 3 files

Browse files
Files changed (3) hide show
  1. assets/index-BDXRHw2c.js +0 -0
  2. assets/index-CX2MTg_Z.css +1 -0
  3. index.html +36 -37
assets/index-BDXRHw2c.js ADDED
The diff for this file is too large to render. See raw diff
 
assets/index-CX2MTg_Z.css ADDED
@@ -0,0 +1 @@
 
 
1
+ *{box-sizing:border-box;padding:0;margin:0;font-family:sans-serif}html,body{height:100%}body{padding:16px 32px}body,#container{display:flex;flex-direction:column;justify-content:center;align-items:center}#controls{display:flex;padding:1rem;gap:1rem}#controls>div{text-align:center}h1,h4{text-align:center}h4{margin-top:.5rem}#container{position:relative;width:720px;height:405px;max-width:100%;max-height:100%;border:2px dashed #D1D5DB;border-radius:.75rem;overflow:hidden;margin-top:1rem;background-size:100% 100%;background-position:center;background-repeat:no-repeat}#overlay,canvas{position:absolute;width:100%;height:100%}#status{min-height:16px;margin:8px 0}.bounding-box{position:absolute;box-sizing:border-box;border:solid 2px}.bounding-box-label{color:#fff;position:absolute;font-size:12px;margin:-16px 0 0 -2px;padding:1px}#video,#canvas{display:none}
index.html CHANGED
@@ -1,39 +1,38 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Transformers.js | Real-time background removal</title>
8
- <script type="module" crossorigin src="/assets/index-CN6ihHJN.js"></script>
9
  <link rel="stylesheet" crossorigin href="/assets/index-CX2MTg_Z.css">
10
- </head>
11
-
12
- <body>
13
- <h1>
14
- Real-time background removal w/
15
- <a href="http://github.com/xenova/transformers.js" target="_blank">🤗 Transformers.js</a>
16
- </h1>
17
- <h4>
18
- Runs locally in your browser, powered by
19
- <a href="https://huggingface.co/Xenova/modnet" target="_blank">MODNet</a>
20
- </h4>
21
- <div id="container">
22
- <video id="video" autoplay muted playsinline></video>
23
- <canvas id="canvas" width="360" height="240"></canvas>
24
- <canvas id="output-canvas" width="360" height="240"></canvas>
25
- </div>
26
- <div id="controls">
27
- <div>
28
- <label>Image size</label>
29
- (<label id="size-value">256</label>)
30
- <br>
31
- <input id="size" type="range" min="64" max="512" step="32" value="256" disabled>
32
- </div>
33
- </div>
34
- <label id="status"></label>
35
-
36
-
37
- </body>
38
-
39
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Transformers.js | Real-time background removal</title>
8
+ <script type="module" crossorigin src="/assets/index-BDXRHw2c.js"></script>
9
  <link rel="stylesheet" crossorigin href="/assets/index-CX2MTg_Z.css">
10
+ </head>
11
+
12
+ <body>
13
+ <h1>
14
+ Real-time background removal w/
15
+ <a href="http://github.com/xenova/transformers.js" target="_blank">🤗 Transformers.js</a>
16
+ </h1>
17
+ <h4>
18
+ Runs locally in your browser, powered by
19
+ <a href="https://huggingface.co/Xenova/modnet" target="_blank">MODNet</a>
20
+ </h4>
21
+ <div id="container">
22
+ <video id="video" autoplay muted playsinline></video>
23
+ <canvas id="canvas" width="360" height="240"></canvas>
24
+ <canvas id="output-canvas" width="360" height="240"></canvas>
25
+ </div>
26
+ <div id="controls">
27
+ <div>
28
+ <label>Image size</label>
29
+ (<label id="size-value">256</label>)
30
+ <br>
31
+ <input id="size" type="range" min="64" max="512" step="32" value="256" disabled>
32
+ </div>
33
+ </div>
34
+ <label id="status"></label>
35
+
36
+ </body>
37
+
 
38
  </html>