radames HF staff commited on
Commit
4927a50
1 Parent(s): 6f262b2

Upload 6 files

Browse files
Files changed (2) hide show
  1. build/m_bg.wasm +2 -2
  2. index.html +58 -1
build/m_bg.wasm CHANGED
@@ -1,3 +1,3 @@
1
  version https://git-lfs.github.com/spec/v1
2
- oid sha256:3aa7201ff46d314086d7c2aa49e7a415901414fc3c5e584a9762344dc759b6d6
3
- size 2667717
1
  version https://git-lfs.github.com/spec/v1
2
+ oid sha256:e1b97ef5bb8d7dda5f0d1475e02b666119e883fec44bfaaac25c2e985c7d0af0
3
+ size 2667539
index.html CHANGED
@@ -11,7 +11,6 @@
11
  <head>
12
  <meta charset="UTF-8" />
13
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
14
- <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
15
  <style>
16
  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400&family=Source+Sans+3:wght@100;200;300;400;500;600;700;800;900&display=swap");
17
  html,
@@ -74,9 +73,12 @@
74
  statusOutput.innerText = event.data.message;
75
  }
76
 
 
 
77
  const clearBtn = document.querySelector("#clear-btn");
78
  const maskBtn = document.querySelector("#mask-btn");
79
  const undoBtn = document.querySelector("#undo-btn");
 
80
  const canvas = document.querySelector("#canvas");
81
  const mask = document.querySelector("#mask");
82
  const ctxCanvas = canvas.getContext("2d");
@@ -120,11 +122,13 @@
120
  if (files.length > 0) {
121
  const href = URL.createObjectURL(files[0]);
122
  clearImageCanvas();
 
123
  drawImageCanvas(href);
124
  setImageEmbeddings(href);
125
  togglePointMode(false);
126
  } else if (url) {
127
  clearImageCanvas();
 
128
  drawImageCanvas(url);
129
  setImageEmbeddings(url);
130
  togglePointMode(false);
@@ -148,6 +152,7 @@
148
  clearImageCanvas();
149
  drawImageCanvas(href);
150
  setImageEmbeddings(href);
 
151
  }
152
  });
153
  //add event listener to mask button
@@ -164,6 +169,45 @@
164
  undoBtn.addEventListener("click", () => {
165
  undoPoint();
166
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  //add click event to canvas
168
  canvas.addEventListener("click", async (event) => {
169
  if (!hasImage || isEmbedding || isSegmenting) {
@@ -186,14 +230,17 @@
186
  pointArr = [...pointArr, [x, y, !backgroundMode]];
187
  }
188
  undoBtn.disabled = false;
 
189
  if (pointArr.length == 0) {
190
  ctxMask.clearRect(0, 0, canvas.width, canvas.height);
191
  undoBtn.disabled = true;
 
192
  return;
193
  }
194
  isSegmenting = true;
195
  const { maskURL } = await getSegmentationMask(pointArr);
196
  isSegmenting = false;
 
197
  drawMask(maskURL, pointArr);
198
  });
199
 
@@ -213,6 +260,7 @@
213
  isSegmenting = true;
214
  const { maskURL } = await getSegmentationMask(pointArr);
215
  isSegmenting = false;
 
216
  drawMask(maskURL, pointArr);
217
  }
218
  function togglePointMode(mode) {
@@ -491,6 +539,15 @@
491
  <img
492
  src="https://huggingface.co/datasets/huggingface/badges/raw/main/share-to-community-sm.svg" />
493
  </button>
 
 
 
 
 
 
 
 
 
494
  </div>
495
  </div>
496
  <div>
11
  <head>
12
  <meta charset="UTF-8" />
13
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
14
  <style>
15
  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400&family=Source+Sans+3:wght@100;200;300;400;500;600;700;800;900&display=swap");
16
  html,
73
  statusOutput.innerText = event.data.message;
74
  }
75
 
76
+ let copyMaskURL = null;
77
+ let copyImageURL = null;
78
  const clearBtn = document.querySelector("#clear-btn");
79
  const maskBtn = document.querySelector("#mask-btn");
80
  const undoBtn = document.querySelector("#undo-btn");
81
+ const downloadBtn = document.querySelector("#download-btn");
82
  const canvas = document.querySelector("#canvas");
83
  const mask = document.querySelector("#mask");
84
  const ctxCanvas = canvas.getContext("2d");
122
  if (files.length > 0) {
123
  const href = URL.createObjectURL(files[0]);
124
  clearImageCanvas();
125
+ copyImageURL = href;
126
  drawImageCanvas(href);
127
  setImageEmbeddings(href);
128
  togglePointMode(false);
129
  } else if (url) {
130
  clearImageCanvas();
131
+ copyImageURL = url;
132
  drawImageCanvas(url);
133
  setImageEmbeddings(url);
134
  togglePointMode(false);
152
  clearImageCanvas();
153
  drawImageCanvas(href);
154
  setImageEmbeddings(href);
155
+ copyImageURL = href;
156
  }
157
  });
158
  //add event listener to mask button
169
  undoBtn.addEventListener("click", () => {
170
  undoPoint();
171
  });
172
+ // add event to download btn
173
+ downloadBtn.addEventListener("click", async () => {
174
+ // Function to load image blobs as Image elements asynchronously
175
+ const loadImageAsync = (imageURL) => {
176
+ return new Promise((resolve) => {
177
+ const img = new Image();
178
+ img.onload = () => {
179
+ resolve(img);
180
+ };
181
+ img.src = imageURL;
182
+ });
183
+ };
184
+ const originalImage = await loadImageAsync(copyImageURL);
185
+ const maskImage = await loadImageAsync(copyMaskURL);
186
+
187
+ // create main a board to draw
188
+ const canvas = document.createElement("canvas");
189
+ const ctx = canvas.getContext("2d");
190
+ canvas.width = originalImage.width;
191
+ canvas.height = originalImage.height;
192
+
193
+ // Perform the mask operation
194
+ ctx.drawImage(maskImage, 0, 0);
195
+ ctx.globalCompositeOperation = "source-in";
196
+ ctx.drawImage(originalImage, 0, 0);
197
+
198
+ // to blob
199
+ const blobPromise = new Promise((resolve) => {
200
+ canvas.toBlob(resolve);
201
+ });
202
+ const blob = await blobPromise;
203
+ const resultURL = URL.createObjectURL(blob);
204
+
205
+ // download
206
+ const link = document.createElement("a");
207
+ link.href = resultURL;
208
+ link.download = "cutout.png";
209
+ link.click();
210
+ });
211
  //add click event to canvas
212
  canvas.addEventListener("click", async (event) => {
213
  if (!hasImage || isEmbedding || isSegmenting) {
230
  pointArr = [...pointArr, [x, y, !backgroundMode]];
231
  }
232
  undoBtn.disabled = false;
233
+ downloadBtn.disabled = false;
234
  if (pointArr.length == 0) {
235
  ctxMask.clearRect(0, 0, canvas.width, canvas.height);
236
  undoBtn.disabled = true;
237
+ downloadBtn.disabled = true;
238
  return;
239
  }
240
  isSegmenting = true;
241
  const { maskURL } = await getSegmentationMask(pointArr);
242
  isSegmenting = false;
243
+ copyMaskURL = maskURL;
244
  drawMask(maskURL, pointArr);
245
  });
246
 
260
  isSegmenting = true;
261
  const { maskURL } = await getSegmentationMask(pointArr);
262
  isSegmenting = false;
263
+ copyMaskURL = maskURL;
264
  drawMask(maskURL, pointArr);
265
  }
266
  function togglePointMode(mode) {
539
  <img
540
  src="https://huggingface.co/datasets/huggingface/badges/raw/main/share-to-community-sm.svg" />
541
  </button>
542
+
543
+ <button
544
+ id="download-btn"
545
+ title="Copy result (.png)"
546
+ disabled
547
+ class="p-1 px-2 text-xs font-medium bg-white rounded-2xl outline outline-gray-200 hover:outline-orange-200 disabled:opacity-50"
548
+ >
549
+ Download the result (png file)
550
+ </button>
551
  </div>
552
  </div>
553
  <div>