Skip to content

Commit 7ed4550

Browse files
xenovaxenova
committed
Create Segment Anything WebGPU demo
1 parent cead027 commit 7ed4550

File tree

4 files changed

+494
-0
lines changed

4 files changed

+494
-0
lines changed

‎segment-anything-webgpu/README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Segment Anything WebGPU
3+
emoji: ⚡
4+
colorFrom: blue
5+
colorTo: yellow
6+
sdk: static
7+
pinned: false
8+
models:
9+
- Xenova/slimsam-77-uniform
10+
license: apache-2.0
11+
short_description: In-browser image segmentation w/ 🤗 Transformers.js
12+
---
13+
14+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

‎segment-anything-webgpu/index.css

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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: 16px 32px;
15+
}
16+
17+
body,
18+
#container,
19+
#upload-button {
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: center;
23+
align-items: center;
24+
}
25+
26+
h1,
27+
h3 {
28+
text-align: center;
29+
}
30+
31+
#container {
32+
position: relative;
33+
width: 640px;
34+
height: 420px;
35+
max-width: 100%;
36+
max-height: 100%;
37+
border: 2px dashed #d1d5db;
38+
border-radius: 0.75rem;
39+
overflow: hidden;
40+
cursor: pointer;
41+
margin-top: 1rem;
42+
background-size: 100% 100%;
43+
background-position: center;
44+
background-repeat: no-repeat;
45+
}
46+
47+
#mask-output {
48+
position: absolute;
49+
width: 100%;
50+
height: 100%;
51+
pointer-events: none;
52+
}
53+
54+
#upload-button {
55+
gap: 0.4rem;
56+
font-size: 18px;
57+
cursor: pointer;
58+
opacity: 0.2;
59+
}
60+
61+
#upload {
62+
display: none;
63+
}
64+
65+
svg {
66+
pointer-events: none;
67+
}
68+
69+
#example {
70+
font-size: 14px;
71+
text-decoration: underline;
72+
cursor: pointer;
73+
pointer-events: none;
74+
}
75+
76+
#example:hover {
77+
color: #2563eb;
78+
}
79+
80+
canvas {
81+
position: absolute;
82+
width: 100%;
83+
height: 100%;
84+
opacity: 0.6;
85+
}
86+
87+
#status {
88+
min-height: 16px;
89+
margin: 8px 0;
90+
}
91+
92+
.icon {
93+
height: 16px;
94+
width: 16px;
95+
position: absolute;
96+
transform: translate(-50%, -50%);
97+
}
98+
99+
#controls > button {
100+
padding: 6px 12px;
101+
background-color: #3498db;
102+
color: white;
103+
border: 1px solid #2980b9;
104+
border-radius: 5px;
105+
cursor: pointer;
106+
font-size: 16px;
107+
}
108+
109+
#controls > button:disabled {
110+
background-color: #d1d5db;
111+
color: #6b7280;
112+
border: 1px solid #9ca3af;
113+
cursor: not-allowed;
114+
}
115+
116+
#information {
117+
margin-top: 0.25rem;
118+
font-size: 15px;
119+
}

‎segment-anything-webgpu/index.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="stylesheet" href="index.css" />
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Segment Anything WebGPU | Transformers.js</title>
9+
</head>
10+
11+
<body>
12+
<h1>Segment Anything WebGPU</h1>
13+
<h3>
14+
In-browser image segmentation w/
15+
<a href="https://hf.co/docs/transformers.js" target="_blank"
16+
>🤗 Transformers.js</a
17+
>
18+
</h3>
19+
<div id="container">
20+
<label id="upload-button" for="upload">
21+
<svg
22+
width="25"
23+
height="25"
24+
viewBox="0 0 25 25"
25+
fill="none"
26+
xmlns="http://www.w3.org/2000/svg"
27+
>
28+
<path
29+
fill="#000"
30+
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"
31+
></path>
32+
</svg>
33+
Click to upload image
34+
<label id="example">(or try example)</label>
35+
</label>
36+
<image id="image"></image>
37+
<canvas id="mask-output"></canvas>
38+
</div>
39+
<label id="status"></label>
40+
<div id="controls">
41+
<button id="reset-image">Reset image</button>
42+
<button id="clear-points">Clear points</button>
43+
<button id="cut-mask" disabled>Cut mask</button>
44+
</div>
45+
<p id="information">
46+
Left click = positive points, right click = negative points.
47+
</p>
48+
<input id="upload" type="file" accept="image/*" disabled />
49+
50+
<div style="display: none">
51+
<!-- Preload star and cross images to avoid lag on first click -->
52+
<img
53+
id="star-icon"
54+
class="icon"
55+
src="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/star-icon.png"
56+
/>
57+
<img
58+
id="cross-icon"
59+
class="icon"
60+
src="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/cross-icon.png"
61+
/>
62+
</div>
63+
<script src="index.js" type="module"></script>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)