Spaces:

radames
/

candle-segment-anything-wasm

Running

App Files Files Community

radames commited on Oct 5, 2023

Commit

4927a50

1 Parent(s): 6f262b2

Upload 6 files

Browse files

Files changed (2) hide show

build/m_bg.wasm +2 -2
index.html +58 -1

build/m_bg.wasm CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3aa7201ff46d314086d7c2aa49e7a415901414fc3c5e584a9762344dc759b6d6
-size 2667717

 version https://git-lfs.github.com/spec/v1
+oid sha256:e1b97ef5bb8d7dda5f0d1475e02b666119e883fec44bfaaac25c2e985c7d0af0
+size 2667539

index.html CHANGED Viewed

@@ -11,7 +11,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
     <style>
       @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");
       html,
@@ -74,9 +73,12 @@
         statusOutput.innerText = event.data.message;
       }
       const clearBtn = document.querySelector("#clear-btn");
       const maskBtn = document.querySelector("#mask-btn");
       const undoBtn = document.querySelector("#undo-btn");
       const canvas = document.querySelector("#canvas");
       const mask = document.querySelector("#mask");
       const ctxCanvas = canvas.getContext("2d");
@@ -120,11 +122,13 @@
         if (files.length > 0) {
           const href = URL.createObjectURL(files[0]);
           clearImageCanvas();
           drawImageCanvas(href);
           setImageEmbeddings(href);
           togglePointMode(false);
         } else if (url) {
           clearImageCanvas();
           drawImageCanvas(url);
           setImageEmbeddings(url);
           togglePointMode(false);
@@ -148,6 +152,7 @@
           clearImageCanvas();
           drawImageCanvas(href);
           setImageEmbeddings(href);
         }
       });
       //add event listener to mask button
@@ -164,6 +169,45 @@
       undoBtn.addEventListener("click", () => {
         undoPoint();
       });
       //add click event to canvas
       canvas.addEventListener("click", async (event) => {
         if (!hasImage || isEmbedding || isSegmenting) {
@@ -186,14 +230,17 @@
           pointArr = [...pointArr, [x, y, !backgroundMode]];
         }
         undoBtn.disabled = false;
         if (pointArr.length == 0) {
           ctxMask.clearRect(0, 0, canvas.width, canvas.height);
           undoBtn.disabled = true;
           return;
         }
         isSegmenting = true;
         const { maskURL } = await getSegmentationMask(pointArr);
         isSegmenting = false;
         drawMask(maskURL, pointArr);
       });
@@ -213,6 +260,7 @@
         isSegmenting = true;
         const { maskURL } = await getSegmentationMask(pointArr);
         isSegmenting = false;
         drawMask(maskURL, pointArr);
       }
       function togglePointMode(mode) {
@@ -491,6 +539,15 @@
             <img
               src="https://huggingface.co/datasets/huggingface/badges/raw/main/share-to-community-sm.svg" />
           </button>
         </div>
       </div>
       <div>

   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
       @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");
       html,
         statusOutput.innerText = event.data.message;
       }
+      let copyMaskURL = null;
+      let copyImageURL = null;
       const clearBtn = document.querySelector("#clear-btn");
       const maskBtn = document.querySelector("#mask-btn");
       const undoBtn = document.querySelector("#undo-btn");
+      const downloadBtn = document.querySelector("#download-btn");
       const canvas = document.querySelector("#canvas");
       const mask = document.querySelector("#mask");
       const ctxCanvas = canvas.getContext("2d");
         if (files.length > 0) {
           const href = URL.createObjectURL(files[0]);
           clearImageCanvas();
+          copyImageURL = href;
           drawImageCanvas(href);
           setImageEmbeddings(href);
           togglePointMode(false);
         } else if (url) {
           clearImageCanvas();
+          copyImageURL = url;
           drawImageCanvas(url);
           setImageEmbeddings(url);
           togglePointMode(false);
           clearImageCanvas();
           drawImageCanvas(href);
           setImageEmbeddings(href);
+          copyImageURL = href;
         }
       });
       //add event listener to mask button
       undoBtn.addEventListener("click", () => {
         undoPoint();
       });
+      // add event to download btn
+      downloadBtn.addEventListener("click", async () => {
+        // Function to load image blobs as Image elements asynchronously
+        const loadImageAsync = (imageURL) => {
+          return new Promise((resolve) => {
+            const img = new Image();
+            img.onload = () => {
+              resolve(img);
+            };
+            img.src = imageURL;
+          });
+        };
+        const originalImage = await loadImageAsync(copyImageURL);
+        const maskImage = await loadImageAsync(copyMaskURL);
+        // create main a board to draw
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = originalImage.width;
+        canvas.height = originalImage.height;
+        // Perform the mask operation
+        ctx.drawImage(maskImage, 0, 0);
+        ctx.globalCompositeOperation = "source-in";
+        ctx.drawImage(originalImage, 0, 0);
+        // to blob
+        const blobPromise = new Promise((resolve) => {
+          canvas.toBlob(resolve);
+        });
+        const blob = await blobPromise;
+        const resultURL = URL.createObjectURL(blob);
+        // download
+        const link = document.createElement("a");
+        link.href = resultURL;
+        link.download = "cutout.png";
+        link.click();
+      });
       //add click event to canvas
       canvas.addEventListener("click", async (event) => {
         if (!hasImage || isEmbedding || isSegmenting) {
           pointArr = [...pointArr, [x, y, !backgroundMode]];
         }
         undoBtn.disabled = false;
+        downloadBtn.disabled = false;
         if (pointArr.length == 0) {
           ctxMask.clearRect(0, 0, canvas.width, canvas.height);
           undoBtn.disabled = true;
+          downloadBtn.disabled = true;
           return;
         }
         isSegmenting = true;
         const { maskURL } = await getSegmentationMask(pointArr);
         isSegmenting = false;
+        copyMaskURL = maskURL;
         drawMask(maskURL, pointArr);
       });
         isSegmenting = true;
         const { maskURL } = await getSegmentationMask(pointArr);
         isSegmenting = false;
+        copyMaskURL = maskURL;
         drawMask(maskURL, pointArr);
       }
       function togglePointMode(mode) {
             <img
               src="https://huggingface.co/datasets/huggingface/badges/raw/main/share-to-community-sm.svg" />
           </button>
+          <button
+            id="download-btn"
+            title="Copy result (.png)"
+            disabled
+            class="p-1 px-2 text-xs font-medium bg-white rounded-2xl outline outline-gray-200 hover:outline-orange-200 disabled:opacity-50"
+          >
+            Download the result (png file)
+          </button>
         </div>
       </div>
       <div>