Add SAM demo

huggingface · Jan 10, 2024 · 527c2ec · 527c2ec
1 parent 5b5aa4c
commit 527c2ec
Show file tree

Hide file tree

Showing 4 changed files with 560 additions and 0 deletions.
diff --git a/examples/segment-anything-client/index.css b/examples/segment-anything-client/index.css
@@ -0,0 +1,116 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: sans-serif;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    padding: 16px 32px;
+}
+
+body,
+#container,
+#upload-button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h1 {
+    text-align: center;
+}
+
+#container {
+    position: relative;
+    width: 640px;
+    height: 420px;
+    max-width: 100%;
+    max-height: 100%;
+    border: 2px dashed #D1D5DB;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    cursor: pointer;
+    margin-top: 1rem;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+#mask-output {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+#upload-button {
+    gap: 0.4rem;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+#upload {
+    display: none;
+}
+
+svg {
+    pointer-events: none;
+}
+
+#example {
+    font-size: 14px;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+#example:hover {
+    color: #2563EB;
+}
+
+canvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0.6;
+}
+
+#status {
+    min-height: 16px;
+    margin: 8px 0;
+}
+
+.icon {
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    transform: translate(-50%, -50%);
+}
+
+#controls>button {
+    padding: 6px 12px;
+    background-color: #3498db;
+    color: white;
+    border: 1px solid #2980b9;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+#controls>button:disabled {
+    background-color: #d1d5db;
+    color: #6b7280;
+    border: 1px solid #9ca3af;
+    cursor: not-allowed;
+}
+
+#information {
+    margin-top: 0.25rem;
+    font-size: 15px;
+}
diff --git a/examples/segment-anything-client/index.html b/examples/segment-anything-client/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="index.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Transformers.js - Segment Anything</title>
+</head>
+
+<body>
+    <h1>Segment Anything w/ 🤗 Transformers.js</h1>
+    <div id="container">
+        <label id="upload-button" 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>
+        <canvas id="mask-output"></canvas>
+    </div>
+    <label id="status"></label>
+    <div id="controls">
+        <button id="reset-image">Reset image</button>
+        <button id="clear-points">Clear points</button>
+        <button id="cut-mask" disabled>Cut mask</button>
+    </div>
+    <p id="information">
+        Left click = positive points, right click = negative points.
+    </p>
+    <input id="upload" type="file" accept="image/*" />
+
+    <script src="index.js" type="module"></script>
+</body>
+
+</html>