Upload 4 files

README.md

@@ -6,9 +6,9 @@ colorTo: yellow
 sdk: static
 pinned: false
 models:
-- Xenova/slimsam-77-uniform
+  - Xenova/slimsam-77-uniform
 license: apache-2.0
 short_description: In-browser image segmentation w/ 🤗 Transformers.js
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.css

@@ -1,119 +1,119 @@
-* {
-    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,
-h3 {
-    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;
-    opacity: 0.2;
-}
-
-#upload {
-    display: none;
-}
-
-svg {
-    pointer-events: none;
-}
-
-#example {
-    font-size: 14px;
-    text-decoration: underline;
-    cursor: pointer;
-    pointer-events: none;
-}
-
-#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;
-}
+* {
+  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,
+h3 {
+  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;
+  opacity: 0.2;
+}
+
+#upload {
+  display: none;
+}
+
+svg {
+  pointer-events: none;
+}
+
+#example {
+  font-size: 14px;
+  text-decoration: underline;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+#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;
+}

index.html

@@ -1,42 +1,65 @@
-<!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 WebGPU</title>
-</head>
-
-<body>
-    <h1>Segment Anything WebGPU</h1>
-    <h3>In-browser image segmentation w/ <a href="https://hf.co/docs/transformers.js" target="_blank">🤗
-            Transformers.js</a></h3>
-    <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/*" disabled />
-
-    <script src="index.js" type="module"></script>
-</body>
-
-</html>
+<!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>Segment Anything WebGPU | Transformers.js</title>
+  </head>
+
+  <body>
+    <h1>Segment Anything WebGPU</h1>
+    <h3>
+      In-browser image segmentation w/
+      <a href="https://hf.co/docs/transformers.js" target="_blank"
+        >🤗 Transformers.js</a
+      >
+    </h3>
+    <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>
+      <image id="image"></image>
+      <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/*" disabled />
+
+    <div style="display: none">
+      <!-- Preload star and cross images to avoid lag on first click -->
+      <img
+        id="star-icon"
+        class="icon"
+        src="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/star-icon.png"
+      />
+      <img
+        id="cross-icon"
+        class="icon"
+        src="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/cross-icon.png"
+      />
+    </div>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>

index.js

@@ -1,325 +1,296 @@
-import { SamModel, AutoProcessor, RawImage, Tensor } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0-alpha.4';
+import {
+  SamModel,
+  AutoProcessor,
+  RawImage,
+  Tensor,
+} from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0-alpha.5";
 
 // Reference the elements we will use
-const statusLabel = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-const maskCanvas = document.getElementById('mask-output');
-const uploadButton = document.getElementById('upload-button');
-const resetButton = document.getElementById('reset-image');
-const clearButton = document.getElementById('clear-points');
-const cutButton = document.getElementById('cut-mask');
-
-// Constants
-const BASE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/';
-const EXAMPLE_URL = BASE_URL + 'corgi.jpg';
-
-// Preload star and cross images to avoid lag on first click
-const star = new Image();
-star.src = BASE_URL + 'star-icon.png';
-star.className = 'icon';
-
-const cross = new Image();
-cross.src = BASE_URL + 'cross-icon.png';
-cross.className = 'icon';
+const statusLabel = document.getElementById("status");
+const fileUpload = document.getElementById("upload");
+const imageContainer = document.getElementById("container");
+const example = document.getElementById("example");
+const uploadButton = document.getElementById("upload-button");
+const resetButton = document.getElementById("reset-image");
+const clearButton = document.getElementById("clear-points");
+const cutButton = document.getElementById("cut-mask");
+const starIcon = document.getElementById("star-icon");
+const crossIcon = document.getElementById("cross-icon");
+const maskCanvas = document.getElementById("mask-output");
+const maskContext = maskCanvas.getContext("2d");
+
+const EXAMPLE_URL =
+  "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/corgi.jpg";
 
 // State variables
-let lastPoints = null;
 let isDecoding = false;
+let decodePending = false;
+let lastPoints = null;
 let isMultiMaskMode = false;
-let imageDataURI = null;
-let imageInputs = null;
+let imageInput = null;
+let imageProcessed = null;
 let imageEmbeddings = null;
 
 async function decode() {
-    if (!imageInputs || !imageEmbeddings) {
-        return;
-    }
-    isDecoding = true;
-
-    // Prepare inputs for decoding
-    const reshaped = imageInputs.reshaped_input_sizes[0];
-    const points = lastPoints.map(x => [x.point[0] * reshaped[1], x.point[1] * reshaped[0]])
-    const labels = lastPoints.map(x => BigInt(x.label));
-
-    const input_points = new Tensor(
-        'float32',
-        points.flat(Infinity),
-        [1, 1, points.length, 2],
-    )
-    const input_labels = new Tensor(
-        'int64',
-        labels.flat(Infinity),
-        [1, 1, labels.length],
-    )
-
-    // Generate the mask
-    const { pred_masks, iou_scores } = await model({
-        ...imageEmbeddings,
-        input_points,
-        input_labels,
-    })
-
-    // Post-process the mask
-    const masks = await processor.post_process_masks(
-        pred_masks,
-        imageInputs.original_sizes,
-        imageInputs.reshaped_input_sizes,
-    );
-
-    const data = {
-        mask: RawImage.fromTensor(masks[0][0]),
-        scores: iou_scores.data,
-    };
-    isDecoding = false;
-
-    if (!isMultiMaskMode && lastPoints) {
-        // Perform decoding with the last point
-        decode();
-        lastPoints = null;
-    }
-
-    const { mask, scores } = data;
-
-    // Update canvas dimensions (if different)
-    if (maskCanvas.width !== mask.width || maskCanvas.height !== mask.height) {
-        maskCanvas.width = mask.width;
-        maskCanvas.height = mask.height;
-    }
+  // Only proceed if we are not already decoding
+  if (isDecoding) {
+    decodePending = true;
+    return;
+  }
+  isDecoding = true;
+
+  // Prepare inputs for decoding
+  const reshaped = imageProcessed.reshaped_input_sizes[0];
+  const points = lastPoints
+    .map((x) => [x.position[0] * reshaped[1], x.position[1] * reshaped[0]])
+    .flat(Infinity);
+  const labels = lastPoints.map((x) => BigInt(x.label)).flat(Infinity);
+
+  const num_points = lastPoints.length;
+  const input_points = new Tensor("float32", points, [1, 1, num_points, 2]);
+  const input_labels = new Tensor("int64", labels, [1, 1, num_points]);
+
+  // Generate the mask
+  const { pred_masks, iou_scores } = await model({
+    ...imageEmbeddings,
+    input_points,
+    input_labels,
+  });
+
+  // Post-process the mask
+  const masks = await processor.post_process_masks(
+    pred_masks,
+    imageProcessed.original_sizes,
+    imageProcessed.reshaped_input_sizes,
+  );
+
+  isDecoding = false;
+
+  updateMaskOverlay(RawImage.fromTensor(masks[0][0]), iou_scores.data);
+
+  // Check if another decode is pending
+  if (decodePending) {
+    decodePending = false;
+    decode();
+  }
+}
 
-    // Create context and allocate buffer for pixel data
-    const context = maskCanvas.getContext('2d');
-    const imageData = context.createImageData(maskCanvas.width, maskCanvas.height);
-
-    // Select best mask
-    const numMasks = scores.length; // 3
-    let bestIndex = 0;
-    for (let i = 1; i < numMasks; ++i) {
-        if (scores[i] > scores[bestIndex]) {
-            bestIndex = i;
-        }
+function updateMaskOverlay(mask, scores) {
+  // Update canvas dimensions (if different)
+  if (maskCanvas.width !== mask.width || maskCanvas.height !== mask.height) {
+    maskCanvas.width = mask.width;
+    maskCanvas.height = mask.height;
+  }
+
+  // Allocate buffer for pixel data
+  const imageData = maskContext.createImageData(
+    maskCanvas.width,
+    maskCanvas.height,
+  );
+
+  // Select best mask
+  const numMasks = scores.length; // 3
+  let bestIndex = 0;
+  for (let i = 1; i < numMasks; ++i) {
+    if (scores[i] > scores[bestIndex]) {
+      bestIndex = i;
     }
-    statusLabel.textContent = `Segment score: ${scores[bestIndex].toFixed(2)}`;
-
-    // Fill mask with colour
-    const pixelData = imageData.data;
-    for (let i = 0; i < pixelData.length; ++i) {
-        if (mask.data[numMasks * i + bestIndex] === 1) {
-            const offset = 4 * i;
-            pixelData[offset] = 0;       // red
-            pixelData[offset + 1] = 114; // green
-            pixelData[offset + 2] = 189; // blue
-            pixelData[offset + 3] = 255; // alpha
-        }
+  }
+  statusLabel.textContent = `Segment score: ${scores[bestIndex].toFixed(2)}`;
+
+  // Fill mask with colour
+  const pixelData = imageData.data;
+  for (let i = 0; i < pixelData.length; ++i) {
+    if (mask.data[numMasks * i + bestIndex] === 1) {
+      const offset = 4 * i;
+      pixelData[offset] = 0; // red
+      pixelData[offset + 1] = 114; // green
+      pixelData[offset + 2] = 189; // blue
+      pixelData[offset + 3] = 255; // alpha
     }
+  }
 
-    // Draw image data to context
-    context.putImageData(imageData, 0, 0);
+  // Draw image data to context
+  maskContext.putImageData(imageData, 0, 0);
 }
 
 function clearPointsAndMask() {
-    // Reset state
-    isMultiMaskMode = false;
-    lastPoints = null;
+  // Reset state
+  isMultiMaskMode = false;
+  lastPoints = null;
 
-    // Remove points from previous mask (if any)
-    document.querySelectorAll('.icon').forEach(e => e.remove());
+  // Remove points from previous mask (if any)
+  document.querySelectorAll(".icon").forEach((e) => e.remove());
 
-    // Disable cut button
-    cutButton.disabled = true;
+  // Disable cut button
+  cutButton.disabled = true;
 
-    // Reset mask canvas
-    maskCanvas.getContext('2d').clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+  // Reset mask canvas
+  maskContext.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
 }
-clearButton.addEventListener('click', clearPointsAndMask);
-
-resetButton.addEventListener('click', () => {
-    // Update state
-    imageEmbeddings = null;
-    imageDataURI = null;
-
-    // Reset the state
-    imageInputs = null;
-    imageEmbeddings = null;
-    isDecoding = false;
-
-    // Clear points and mask (if present)
-    clearPointsAndMask();
-
-    // Update UI
-    cutButton.disabled = true;
-    imageContainer.style.backgroundImage = 'none';
-    uploadButton.style.display = 'flex';
-    statusLabel.textContent = 'Ready';
+clearButton.addEventListener("click", clearPointsAndMask);
+
+resetButton.addEventListener("click", () => {
+  // Reset the state
+  imageInput = null;
+  imageProcessed = null;
+  imageEmbeddings = null;
+  isDecoding = false;
+
+  // Clear points and mask (if present)
+  clearPointsAndMask();
+
+  // Update UI
+  cutButton.disabled = true;
+  imageContainer.style.backgroundImage = "none";
+  uploadButton.style.display = "flex";
+  statusLabel.textContent = "Ready";
 });
 
-async function segment(data) {
-    statusLabel.textContent = 'Extracting image embedding...';
+async function segment(url) {
+  imageInput = await RawImage.fromURL(url);
 
-    // Update state
-    imageEmbeddings = null;
-    imageDataURI = data;
+  statusLabel.textContent = "Extracting image embedding...";
 
-    // Update UI
-    imageContainer.style.backgroundImage = `url(${data})`;
-    uploadButton.style.display = 'none';
-    cutButton.disabled = true;
+  // Update UI
+  imageContainer.style.backgroundImage = `url(${url})`;
+  uploadButton.style.display = "none";
+  cutButton.disabled = true;
 
-    // Read the image and recompute image embeddings
-    const image = await RawImage.read(data);
-    imageInputs = await processor(image);
-    imageEmbeddings = await model.get_image_embeddings(imageInputs)
+  // Recompute image embeddings
+  imageProcessed = await processor(imageInput);
+  imageEmbeddings = await model.get_image_embeddings(imageProcessed);
 
-    statusLabel.textContent = 'Embedding extracted!';
+  statusLabel.textContent = "Embedding extracted!";
 }
 
 // Handle file selection
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
+fileUpload.addEventListener("change", function (e) {
+  const file = e.target.files[0];
+  if (!file) return;
 
-    const reader = new FileReader();
+  const reader = new FileReader();
 
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => segment(e2.target.result);
+  // Set up a callback when the file is loaded
+  reader.onload = (e2) => segment(e2.target.result);
 
-    reader.readAsDataURL(file);
+  reader.readAsDataURL(file);
 });
 
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    segment(EXAMPLE_URL);
+example.addEventListener("click", (e) => {
+  e.preventDefault();
+  segment(EXAMPLE_URL);
 });
 
-function addIcon({ point, label }) {
-    const icon = (label === 1 ? star : cross).cloneNode();
-    icon.style.left = `${point[0] * 100}%`;
-    icon.style.top = `${point[1] * 100}%`;
-    imageContainer.appendChild(icon);
-}
-
 // Attach hover event to image container
-imageContainer.addEventListener('mousedown', e => {
-    if (e.button !== 0 && e.button !== 2) {
-        return; // Ignore other buttons
-    }
-    if (!imageEmbeddings) {
-        return; // Ignore if not encoded yet
-    }
-    if (!isMultiMaskMode) {
-        lastPoints = [];
-        isMultiMaskMode = true;
-        cutButton.disabled = false;
-    }
-
-    const point = getPoint(e);
-    lastPoints.push(point);
-
-    // add icon
-    addIcon(point);
-
-    decode();
+imageContainer.addEventListener("mousedown", (e) => {
+  if (e.button !== 0 && e.button !== 2) {
+    return; // Ignore other buttons
+  }
+  if (!imageEmbeddings) {
+    return; // Ignore if not encoded yet
+  }
+  if (!isMultiMaskMode) {
+    lastPoints = [];
+    isMultiMaskMode = true;
+    cutButton.disabled = false;
+  }
+
+  const point = getPoint(e);
+  lastPoints.push(point);
+
+  // add icon
+  const icon = (point.label === 1 ? starIcon : crossIcon).cloneNode();
+  icon.style.left = `${point.position[0] * 100}%`;
+  icon.style.top = `${point.position[1] * 100}%`;
+  imageContainer.appendChild(icon);
+
+  // Run decode
+  decode();
 });
 
-
 // Clamp a value inside a range [min, max]
 function clamp(x, min = 0, max = 1) {
-    return Math.max(Math.min(x, max), min)
+  return Math.max(Math.min(x, max), min);
 }
 
 function getPoint(e) {
-    // Get bounding box
-    const bb = imageContainer.getBoundingClientRect();
-
-    // Get the mouse coordinates relative to the container
-    const mouseX = clamp((e.clientX - bb.left) / bb.width);
-    const mouseY = clamp((e.clientY - bb.top) / bb.height);
-
-    return {
-        point: [mouseX, mouseY],
-        label: e.button === 2 // right click
-            ? 0  // negative prompt
-            : 1, // positive prompt
-    }
+  // Get bounding box
+  const bb = imageContainer.getBoundingClientRect();
+
+  // Get the mouse coordinates relative to the container
+  const mouseX = clamp((e.clientX - bb.left) / bb.width);
+  const mouseY = clamp((e.clientY - bb.top) / bb.height);
+
+  return {
+    position: [mouseX, mouseY],
+    label:
+      e.button === 2 // right click
+        ? 0 // negative prompt
+        : 1, // positive prompt
+  };
 }
 
 // Do not show context menu on right click
-imageContainer.addEventListener('contextmenu', e => {
-    e.preventDefault();
-});
+imageContainer.addEventListener("contextmenu", (e) => e.preventDefault());
 
 // Attach hover event to image container
-imageContainer.addEventListener('mousemove', e => {
-    if (!imageEmbeddings || isMultiMaskMode) {
-        // Ignore mousemove events if the image is not encoded yet,
-        // or we are in multi-mask mode
-        return;
-    }
-    lastPoints = [getPoint(e)];
-
-    if (!isDecoding) {
-        decode(); // Only decode if we are not already decoding
-    }
+imageContainer.addEventListener("mousemove", (e) => {
+  if (!imageEmbeddings || isMultiMaskMode) {
+    // Ignore mousemove events if the image is not encoded yet,
+    // or we are in multi-mask mode
+    return;
+  }
+  lastPoints = [getPoint(e)];
+
+  decode();
 });
 
 // Handle cut button click
-cutButton.addEventListener('click', () => {
-    const [w, h] = [maskCanvas.width, maskCanvas.height];
-
-    // Get the mask pixel data
-    const maskContext = maskCanvas.getContext('2d');
-    const maskPixelData = maskContext.getImageData(0, 0, w, h);
-
-    // Load the image
-    const image = new Image();
-    image.crossOrigin = 'anonymous';
-    image.onload = async () => {
-        // Create a new canvas to hold the image
-        const imageCanvas = new OffscreenCanvas(w, h);
-        const imageContext = imageCanvas.getContext('2d');
-        imageContext.drawImage(image, 0, 0, w, h);
-        const imagePixelData = imageContext.getImageData(0, 0, w, h);
-
-        // Create a new canvas to hold the cut-out
-        const cutCanvas = new OffscreenCanvas(w, h);
-        const cutContext = cutCanvas.getContext('2d');
-        const cutPixelData = cutContext.getImageData(0, 0, w, h);
-
-        // Copy the image pixel data to the cut canvas
-        for (let i = 3; i < maskPixelData.data.length; i += 4) {
-            if (maskPixelData.data[i] > 0) {
-                for (let j = 0; j < 4; ++j) {
-                    const offset = i - j;
-                    cutPixelData.data[offset] = imagePixelData.data[offset];
-                }
-            }
-        }
-        cutContext.putImageData(cutPixelData, 0, 0);
-
-        // Download image 
-        const link = document.createElement('a');
-        link.download = 'image.png';
-        link.href = URL.createObjectURL(await cutCanvas.convertToBlob());
-        link.click();
-        link.remove();
+cutButton.addEventListener("click", async () => {
+  const [w, h] = [maskCanvas.width, maskCanvas.height];
+
+  // Get the mask pixel data (and use this as a buffer)
+  const maskImageData = maskContext.getImageData(0, 0, w, h);
+
+  // Create a new canvas to hold the cut-out
+  const cutCanvas = new OffscreenCanvas(w, h);
+  const cutContext = cutCanvas.getContext("2d");
+
+  // Copy the image pixel data to the cut canvas
+  const maskPixelData = maskImageData.data;
+  const imagePixelData = imageInput.data;
+  for (let i = 0; i < w * h; ++i) {
+    const sourceOffset = 3 * i; // RGB
+    const targetOffset = 4 * i; // RGBA
+
+    if (maskPixelData[targetOffset + 3] > 0) {
+      // Only copy opaque pixels
+      for (let j = 0; j < 3; ++j) {
+        maskPixelData[targetOffset + j] = imagePixelData[sourceOffset + j];
+      }
     }
-    image.src = imageDataURI;
+  }
+  cutContext.putImageData(maskImageData, 0, 0);
+
+  // Download image
+  const link = document.createElement("a");
+  link.download = "image.png";
+  link.href = URL.createObjectURL(await cutCanvas.convertToBlob());
+  link.click();
+  link.remove();
 });
 
-
-const model_id = 'Xenova/slimsam-77-uniform';
-statusLabel.textContent = 'Loading model...';
+const model_id = "Xenova/slimsam-77-uniform";
+statusLabel.textContent = "Loading model...";
 const model = await SamModel.from_pretrained(model_id, {
-    dtype: 'fp16',
-    device: 'webgpu',
+  dtype: "fp16", // or "fp32"
+  device: "webgpu",
 });
 const processor = await AutoProcessor.from_pretrained(model_id);
-statusLabel.textContent = 'Ready';
+statusLabel.textContent = "Ready";
 
 // Enable the user interface
 fileUpload.disabled = false;
 uploadButton.style.opacity = 1;
-example.style.pointerEvents = 'auto';
+example.style.pointerEvents = "auto";