Adding files

README.md

@@ -1,12 +1,12 @@
 ---
 title: Remove Background
-emoji: 📊
-colorFrom: gray
-colorTo: pink
+emoji: 🔥
+colorFrom: red
+colorTo: yellow
 sdk: static
 pinned: false
 license: apache-2.0
-short_description: Instant background removal locally in your browser 🥥
+short_description: Instant background removal locally in your browser.
 ---
 
-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

app.js

@@ -0,0 +1,602 @@
+import {
+  AutoModel, AutoProcessor, env, RawImage
+} from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.5.1/dist/transformers.min.js';
+
+env.allowLocalModels = false;
+env.backends.onnx.wasm.proxy = false;
+
+document.addEventListener('DOMContentLoaded', () => {
+  const $ = id => document.getElementById(id);
+
+  const html          = document.documentElement;
+  const themeToggle   = $('themeToggle');
+  const iconSun       = $('iconSun');
+  const iconMoon      = $('iconMoon');
+  const uploadZone    = $('uploadZone');
+  const fileInput     = $('fileInput');
+  const panel         = $('panel');
+  const originalImg   = $('originalImg');
+  const resultBody    = $('resultBody');
+  const resultStatus  = $('resultStatus');
+  const processBtn    = $('processBtn');
+  const resetBtn      = $('resetBtn');
+  const progressWrap  = $('progressWrap');
+  const progressFill  = $('progressFill');
+  const progressLabel = $('progressLabel');
+  const uploadHint    = $('uploadHint');
+  const messageBanner = $('messageBanner');
+  const queueList = $('queueList');
+  const historyList = $('historyList');
+  const downloadZipBtn = $('downloadZipBtn');
+
+  const MAX_FILE_SIZE = 20 * 1024 * 1024;
+  const ACCEPTED_TYPES = ['image/png', 'image/jpeg', 'image/webp'];
+
+  let model = null;
+  let processor = null;
+  let currentFile = null;
+  let currentDataURL = null;
+  let filesQueue = [];
+  let history = [];
+  let currentBatchResults = [];
+  let isDark = false;
+  let isBusy = false;
+
+  function applyTheme(dark) {
+    isDark = dark;
+    html.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    iconSun.style.display  = isDark ? 'none' : '';
+    iconMoon.style.display = isDark ? '' : 'none';
+  }
+
+  function initTheme() {
+    const savedTheme = localStorage.getItem('theme');
+
+    if (savedTheme !== null) {
+      applyTheme(savedTheme === 'dark');
+    } else {
+      const prefersDark = window.matchMedia &&
+                         window.matchMedia('(prefers-color-scheme: dark)').matches;
+      applyTheme(prefersDark);
+    }
+  }
+
+  function setMessage(text, type = 'info') {
+    if (!text) {
+      messageBanner.className = 'message-banner';
+      messageBanner.textContent = '';
+      return;
+    }
+
+    messageBanner.className = `message-banner visible ${type}`;
+    messageBanner.textContent = text;
+  }
+
+  function setProgress(pct, label) {
+    progressFill.style.width = pct + '%';
+    progressLabel.textContent = label;
+  }
+
+  function resetProgress() {
+    setProgress(0, 'Waiting for image...');
+    progressWrap.classList.remove('visible');
+  }
+
+  function fileToDataURL(file) {
+    return new Promise((resolve, reject) => {
+      try {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.onerror = (err) => reject(err);
+        reader.readAsDataURL(file);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  function dataURLtoBlob(dataURL) {
+    const parts = dataURL.split(',');
+    const meta = parts[0] || '';
+    const bstr = atob(parts[1] || '');
+    const mimeMatch = meta.match(/:(.*?);/);
+    const mime = mimeMatch ? mimeMatch[1] : 'application/octet-stream';
+    const n = bstr.length;
+    const u8 = new Uint8Array(n);
+    for (let i = 0; i < n; i++) u8[i] = bstr.charCodeAt(i);
+    return new Blob([u8], { type: mime });
+  }
+
+  function imageDataFromDataURL(dataURL) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        const c = document.createElement('canvas');
+        c.width = img.naturalWidth;
+        c.height = img.naturalHeight;
+        const ctx = c.getContext('2d');
+        ctx.drawImage(img, 0, 0);
+        resolve({ imageData: ctx.getImageData(0, 0, c.width, c.height), width: c.width, height: c.height });
+      };
+      img.onerror = reject;
+      img.src = dataURL;
+    });
+  }
+
+  function setUploadState(state) {
+    uploadZone.classList.remove('is-error', 'is-ready', 'is-processing');
+    if (state) uploadZone.classList.add(`is-${state}`);
+  }
+
+  function validateFile(file) {
+    if (!file) return { valid: false, message: 'No file was selected.' };
+
+    const extension = (file.name || '').split('.').pop()?.toLowerCase();
+    const normalizedType = (file.type || '').toLowerCase();
+    const hasSupportedType = ACCEPTED_TYPES.includes(normalizedType) || ['png', 'jpg', 'jpeg', 'webp'].includes(extension);
+
+    if (!hasSupportedType) {
+      return { valid: false, message: 'Please choose a PNG, JPEG, or WebP image.' };
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      return { valid: false, message: 'The selected file is larger than 20 MB. Please choose a smaller image.' };
+    }
+
+    return { valid: true };
+  }
+
+  function resetResultArea() {
+    resultBody.innerHTML = `
+      <div class="result-empty">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+        </svg>
+        <span>Your result will appear here</span>
+      </div>`;
+    resultBody.style.flexDirection = '';
+    resultBody.classList.remove('has-result');
+    resultStatus.style.display = 'none';
+    resultStatus.className = 'status-badge processing';
+    resultStatus.style.background = '';
+    resultStatus.style.color = '';
+  }
+
+  function setBusy(busy) {
+    isBusy = busy;
+    processBtn.disabled = busy;
+    fileInput.disabled = busy;
+    uploadZone.classList.toggle('is-processing', busy);
+  }
+
+  themeToggle.addEventListener('click', () => {
+    const newIsDark = !isDark;
+    applyTheme(newIsDark);
+    localStorage.setItem('theme', newIsDark ? 'dark' : 'light');
+  });
+
+  if (window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+      if (!localStorage.getItem('theme')) {
+        applyTheme(e.matches);
+      }
+    });
+  }
+
+  uploadZone.addEventListener('dragover', e => {
+    e.preventDefault();
+    uploadZone.classList.add('drag-over');
+  });
+  uploadZone.addEventListener('dragleave', () => {
+    uploadZone.classList.remove('drag-over');
+  });
+  uploadZone.addEventListener('drop', e => {
+    e.preventDefault();
+    uploadZone.classList.remove('drag-over');
+    const files = e.dataTransfer.files;
+    if (files && files.length) handleFile(files);
+  });
+  uploadZone.addEventListener('keydown', e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      fileInput.click();
+    }
+  });
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files && fileInput.files.length) handleFile(fileInput.files);
+  });
+
+  async function handleFile(fileOrList) {
+    const files = fileOrList instanceof FileList || Array.isArray(fileOrList) ? Array.from(fileOrList) : [fileOrList];
+    let added = 0;
+    for (const file of files) {
+      const validation = validateFile(file);
+      if (!validation.valid) {
+        setUploadState('error');
+        setMessage(validation.message, 'error');
+        continue;
+      }
+      try {
+        const dataURL = await fileToDataURL(file);
+        filesQueue.push({ file, name: file.name, dataURL });
+        added++;
+      } catch (err) {
+        console.error('[Upload] error:', err);
+      }
+    }
+
+    if (filesQueue.length > 0) {
+      // show first item as preview
+      currentFile = filesQueue[0].file;
+      currentDataURL = filesQueue[0].dataURL;
+      originalImg.src = currentDataURL;
+      uploadZone.style.display = 'none';
+      panel.classList.add('visible');
+      resetResultArea();
+      resultStatus.style.display = 'none';
+      resetProgress();
+      setMessage(`${filesQueue.length} image(s) added to queue. Click Remove Background to process.`, 'success');
+      setUploadState('ready');
+      renderQueue();
+      updateOriginalLabel();
+      setBusy(false);
+    } else if (added === 0) {
+      setMessage('No valid images were added.', 'warning');
+    }
+  }
+
+  function renderQueue() {
+    if (!queueList) return;
+    queueList.innerHTML = '';
+    filesQueue.forEach((it, idx) => {
+      const el = document.createElement('div');
+      el.className = 'item';
+      el.innerHTML = `<img src="${it.dataURL}" alt="${it.name}"><div class="meta">${it.name}</div><div class="remove" data-idx="${idx}">✕</div>`;
+      queueList.appendChild(el);
+    });
+    // attach remove handlers
+    queueList.querySelectorAll('.remove').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const idx = Number(e.currentTarget.getAttribute('data-idx'));
+        filesQueue.splice(idx, 1);
+        renderQueue();
+        if (filesQueue.length === 0) {
+          // restore upload view
+          panel.classList.remove('visible');
+          uploadZone.style.display = '';
+        } else {
+          currentFile = filesQueue[0].file;
+          currentDataURL = filesQueue[0].dataURL;
+          originalImg.src = currentDataURL;
+        }
+      });
+    });
+    updateOriginalLabel();
+  }
+
+  function loadHistory() {
+    try {
+      const raw = localStorage.getItem('rb_history');
+      history = raw ? JSON.parse(raw) : [];
+    } catch (e) {
+      history = [];
+    }
+    renderHistory();
+  }
+
+  function updateOriginalLabel() {
+    const lbl = document.getElementById('originalLabel');
+    if (!lbl) return;
+    const count = filesQueue.length || (currentFile ? 1 : 0);
+    lbl.textContent = count > 1 ? `Original (${count})` : 'Original';
+  }
+
+  function saveHistory() {
+    try {
+      localStorage.setItem('rb_history', JSON.stringify(history));
+    } catch (e) {
+      console.warn('Could not save history', e);
+    }
+  }
+
+  function addToHistory(item) {
+    history.unshift(item);
+    // limit history
+    if (history.length > 40) history.length = 40;
+    saveHistory();
+    renderHistory();
+  }
+
+  function renderHistory() {
+    if (!historyList) return;
+    historyList.innerHTML = '';
+    history.forEach((h, idx) => {
+      const el = document.createElement('div');
+      el.className = 'item';
+      el.innerHTML = `<img src="${h.dataURL}" alt="${h.name}"><div class="meta">${h.name}</div>`;
+      el.title = 'Download image';
+      el.addEventListener('click', () => {
+        // download
+        const a = document.createElement('a');
+        a.href = h.dataURL;
+        a.download = h.name || `removed-${idx}.png`;
+        a.click();
+      });
+      historyList.appendChild(el);
+    });
+  }
+
+  async function ensureModelReady() {
+    if (model && processor) return;
+
+    setProgress(8, 'Downloading model files...');
+    try {
+      model = await AutoModel.from_pretrained('briaai/RMBG-1.4', {
+        config: { model_type: 'custom' },
+      });
+      setProgress(36, 'Preparing image processor...');
+      processor = await AutoProcessor.from_pretrained('briaai/RMBG-1.4', {
+        config: {
+          do_normalize: true,
+          do_pad: false,
+          do_rescale: true,
+          do_resize: true,
+          image_mean: [0.5, 0.5, 0.5],
+          image_std: [1, 1, 1],
+          resample: 2,
+          rescale_factor: 1 / 255,
+          size: { width: 1024, height: 1024 },
+        },
+      });
+    } catch (error) {
+      throw new Error(`The AI model could not be loaded. Please check your connection and try again. ${error?.message || ''}`.trim());
+    }
+  }
+
+  async function runSegmentation(dataURL) {
+    await ensureModelReady();
+
+    setProgress(46, 'Reading image...');
+    const image = await RawImage.fromURL(dataURL);
+    const origW = image.width;
+    const origH = image.height;
+
+    setProgress(58, 'Preparing mask...');
+    const { pixel_values } = await processor(image);
+
+    setProgress(74, 'Running inference...');
+    const { output } = await model({ input: pixel_values });
+
+    setProgress(86, 'Refining mask...');
+    const tensor = output[0];
+    const dims = tensor.dims;
+    const raw = tensor.data;
+
+    const tH = dims[dims.length - 2];
+    const tW = dims[dims.length - 1];
+    const nPx = tH * tW;
+    const offset = raw.length - nPx;
+
+    let dMin = Infinity;
+    let dMax = -Infinity;
+    for (let i = 0; i < nPx; i++) {
+      const v = raw[offset + i];
+      if (v < dMin) dMin = v;
+      if (v > dMax) dMax = v;
+    }
+
+    const needsSigmoid = dMin < -0.01 || dMax > 1.01;
+    const sigmoid = x => 1 / (1 + Math.exp(-x));
+    const maskTensor = new Float32Array(nPx);
+    for (let i = 0; i < nPx; i++) {
+      const v = raw[offset + i];
+      maskTensor[i] = needsSigmoid ? sigmoid(v) : v;
+    }
+
+    const maskFull = new Float32Array(origW * origH);
+    const scaleX = (tW - 1) / Math.max(origW - 1, 1);
+    const scaleY = (tH - 1) / Math.max(origH - 1, 1);
+
+    for (let y = 0; y < origH; y++) {
+      const ty = y * scaleY;
+      const ty0 = Math.floor(ty);
+      const ty1 = Math.min(ty0 + 1, tH - 1);
+      const dy = ty - ty0;
+      for (let x = 0; x < origW; x++) {
+        const tx = x * scaleX;
+        const tx0 = Math.floor(tx);
+        const tx1 = Math.min(tx0 + 1, tW - 1);
+        const dx = tx - tx0;
+        const v00 = maskTensor[ty0 * tW + tx0];
+        const v10 = maskTensor[ty0 * tW + tx1];
+        const v01 = maskTensor[ty1 * tW + tx0];
+        const v11 = maskTensor[ty1 * tW + tx1];
+        maskFull[y * origW + x] = v00 * (1 - dx) * (1 - dy) + v10 * dx * (1 - dy) + v01 * (1 - dx) * dy + v11 * dx * dy;
+      }
+    }
+
+    let borderSum = 0;
+    let borderCount = 0;
+    for (let x = 0; x < origW; x++) {
+      borderSum += maskFull[x] + maskFull[(origH - 1) * origW + x];
+      borderCount += 2;
+    }
+    for (let y = 1; y < origH - 1; y++) {
+      borderSum += maskFull[y * origW] + maskFull[y * origW + origW - 1];
+      borderCount += 2;
+    }
+    const borderMean = borderCount > 0 ? borderSum / borderCount : 0;
+    const isInverted = borderMean > 0.5;
+    if (isInverted) {
+      for (let i = 0; i < maskFull.length; i++) maskFull[i] = 1 - maskFull[i];
+    }
+
+    setProgress(94, 'Compositing image...');
+    const { imageData: origImageData } = await imageDataFromDataURL(dataURL);
+    const origPx = origImageData.data;
+    const canvas = document.createElement('canvas');
+    canvas.width = origW;
+    canvas.height = origH;
+    const ctx = canvas.getContext('2d');
+    const out = ctx.createImageData(origW, origH);
+
+    for (let i = 0; i < origW * origH; i++) {
+      out.data[4 * i] = origPx[4 * i];
+      out.data[4 * i + 1] = origPx[4 * i + 1];
+      out.data[4 * i + 2] = origPx[4 * i + 2];
+      out.data[4 * i + 3] = Math.round(maskFull[i] * 255);
+    }
+    ctx.putImageData(out, 0, 0);
+
+    return canvas.toDataURL('image/png');
+  }
+
+  resetBtn.addEventListener('click', () => {
+    currentFile = null;
+    currentDataURL = null;
+    fileInput.value = '';
+    originalImg.src = '';
+    panel.classList.remove('visible');
+    uploadZone.style.display = '';
+    uploadZone.classList.remove('drag-over', 'is-processing', 'is-ready', 'is-error');
+    resetResultArea();
+    resultStatus.style.display = 'none';
+    resetProgress();
+    setMessage('Choose a PNG, JPEG, or WebP image to begin.', 'info');
+    setBusy(false);
+    uploadHint.textContent = 'Supports PNG, JPEG, and WebP — up to 20 MB.';
+    filesQueue = [];
+    currentBatchResults = [];
+    if (downloadZipBtn) downloadZipBtn.style.display = 'none';
+    updateOriginalLabel();
+  });
+
+  processBtn.addEventListener('click', async () => {
+    if (isBusy) return;
+    if ((!currentDataURL || !currentDataURL.length) && filesQueue.length === 0) return;
+
+    currentBatchResults = [];
+    if (downloadZipBtn) downloadZipBtn.style.display = 'none';
+    setBusy(true);
+    resultStatus.style.display = 'inline-flex';
+    resultStatus.className = 'status-badge processing';
+    resultStatus.innerHTML = '<div class="dot pulse"></div>Processing';
+    progressWrap.classList.add('visible');
+    setMessage('Processing images...', 'info');
+
+    try {
+      if (filesQueue.length > 0) {
+        const total = filesQueue.length;
+        while (filesQueue.length > 0) {
+          const idx = total - filesQueue.length;
+          const item = filesQueue[0];
+          setProgress(Math.round((idx / total) * 90) + 5, `Processing ${idx + 1}/${total}...`);
+          const resultDataURL = await runSegmentation(item.dataURL);
+
+          // show result for this item
+          const resultImg = new Image();
+          resultImg.src = resultDataURL;
+          resultImg.style.cssText = 'max-width:100%;max-height:320px;object-fit:contain;border-radius:4px;';
+          const dlBtn = document.createElement('button');
+          dlBtn.className = 'btn btn-secondary';
+          dlBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download PNG';
+          dlBtn.style.cssText = 'margin-top:12px;width:fit-content;';
+          dlBtn.addEventListener('click', () => {
+            const a = document.createElement('a');
+            a.href = resultDataURL;
+            a.download = (item.name ? item.name.replace(/\.[^.]+$/, '') : 'removed') + '-bg.png';
+            a.click();
+          });
+
+          resultBody.innerHTML = '';
+          resultBody.style.flexDirection = 'column';
+          resultBody.classList.add('has-result');
+          resultBody.appendChild(resultImg);
+          resultBody.appendChild(dlBtn);
+
+          resultStatus.innerHTML = '<div class="dot"></div>Ready';
+          resultStatus.className = 'status-badge ready';
+
+          // save to history
+          addToHistory({ name: (item.name ? item.name.replace(/\.[^.]+$/, '') : 'removed') + '.png', dataURL: resultDataURL, ts: Date.now() });
+          currentBatchResults.push({ name: (item.name ? item.name.replace(/\.[^.]+$/, '') : 'removed') + '.png', dataURL: resultDataURL });
+
+          // remove processed item
+          filesQueue.shift();
+          renderQueue();
+        }
+
+        if (currentBatchResults.length > 0 && downloadZipBtn) {
+          downloadZipBtn.style.display = 'inline-block';
+          downloadZipBtn.onclick = async () => {
+            try {
+              setMessage('Preparing ZIP...', 'info');
+              const zip = new JSZip();
+              for (const it of currentBatchResults) {
+                zip.file(it.name, dataURLtoBlob(it.dataURL));
+              }
+              const blob = await zip.generateAsync({ type: 'blob' });
+              const a = document.createElement('a');
+              a.href = URL.createObjectURL(blob);
+              a.download = 'removed-images.zip';
+              a.click();
+              URL.revokeObjectURL(a.href);
+              setMessage('ZIP downloaded', 'success');
+            } catch (e) {
+              console.error('ZIP error', e);
+              setMessage('Failed to create ZIP.', 'error');
+            }
+          };
+        }
+        setProgress(100, 'All done ✓');
+        setMessage('All images processed and saved to history.', 'success');
+      } else {
+        // single image
+        setProgress(5, 'Preparing segmentation...');
+        const resultDataURL = await runSegmentation(currentDataURL);
+
+        const resultImg = new Image();
+        resultImg.src = resultDataURL;
+        resultImg.style.cssText = 'max-width:100%;max-height:320px;object-fit:contain;border-radius:4px;';
+        const dlBtn = document.createElement('button');
+        dlBtn.className = 'btn btn-secondary';
+        dlBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download PNG';
+        dlBtn.style.cssText = 'margin-top:12px;width:fit-content;';
+        dlBtn.addEventListener('click', () => {
+          const a = document.createElement('a');
+          a.href = resultDataURL;
+          a.download = (currentFile && currentFile.name ? currentFile.name.replace(/\.[^.]+$/, '') : 'removed') + '-bg.png';
+          a.click();
+        });
+
+        resultBody.innerHTML = '';
+        resultBody.style.flexDirection = 'column';
+        resultBody.classList.add('has-result');
+        resultBody.appendChild(resultImg);
+        resultBody.appendChild(dlBtn);
+
+        resultStatus.innerHTML = '<div class="dot"></div>Ready';
+        resultStatus.className = 'status-badge ready';
+        addToHistory({ name: (currentFile && currentFile.name ? currentFile.name.replace(/\.[^.]+$/, '') : 'removed') + '.png', dataURL: resultDataURL, ts: Date.now() });
+        setProgress(100, 'Done ✓');
+        setMessage('Background removed successfully. Download your PNG whenever you want.', 'success');
+      }
+    } catch (error) {
+      console.error('[RMBG] error:', error);
+      const detail = error?.message || 'Something went wrong while processing the image.';
+      setProgress(0, '⚠ ' + detail);
+      resultStatus.innerHTML = '<div class="dot"></div>Error';
+      resultStatus.className = 'status-badge error';
+      setMessage(`Processing failed: ${detail}`, 'error');
+    } finally {
+      setBusy(false);
+      progressWrap.classList.remove('visible');
+    }
+  });
+
+  initTheme();
+  setMessage('Choose a PNG, JPEG, or WebP image to begin.', 'info');
+  uploadHint.textContent = 'Supports PNG, JPEG, and WebP — up to 20 MB.';
+  loadHistory();
+});

index.html

@@ -1,19 +1,130 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>BG Remove — Background Removal Tool</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;1,400&family=Geist+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="styles.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+</head>
+<body>
+
+<nav>
+  <a class="nav-logo" href="#">BG<span>Remove</span></a>
+  <div class="nav-right">
+    <div class="tag"><div class="dot"></div>Browser-only</div>
+    <button class="theme-btn" id="themeToggle" aria-label="Toggle theme">
+      <svg id="iconSun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+        <circle cx="12" cy="12" r="4"/>
+        <line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/>
+        <line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/>
+        <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/><line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
+        <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/><line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
+      </svg>
+      <svg id="iconMoon" style="display:none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+      </svg>
+    </button>
+  </div>
+</nav>
+
+<main>
+  <div class="hero">
+    <h1>Remove backgrounds<br><em>instantly.</em></h1>
+    <p>Upload a portrait, product shot, or illustration and remove the background in a few seconds — entirely in your browser.</p>
+  </div>
+
+  <div class="upload-zone" id="uploadZone" role="button" tabindex="0">
+    <input type="file" id="fileInput" accept="image/png,image/jpeg,image/webp" multiple>
+    <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+      <polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
+    </svg>
+    <h3>Drop an image here or click to browse</h3>
+    <p id="uploadHint">Supports PNG, JPEG, and WebP — up to 20 MB.</p>
+    <div class="formats">
+      <span class="format-badge">.png</span>
+      <span class="format-badge">.jpg</span>
+      <span class="format-badge">.webp</span>
+    </div>
+  </div>
+
+  <div class="panel" id="panel">
+    <div class="img-card">
+      <div class="img-card-header">
+        <span id="originalLabel">Original</span>
+        <div class="status-badge ready"><div class="dot"></div>Loaded</div>
+      </div>
+      <div class="img-card-body">
+        <img id="originalImg" src="" alt="Original image">
+      </div>
+    </div>
+    <div class="img-card">
+      <div class="img-card-header">
+        <span>Result</span>
+        <div class="status-badge processing" id="resultStatus" style="display:none">
+          <div class="dot pulse"></div>Processing
+        </div>
+      </div>
+      <div class="img-card-body" id="resultBody">
+        <div class="result-empty">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+            <circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+          </svg>
+          <span>Your result will appear here</span>
+        </div>
+      </div>
+    </div>
+    <div class="controls-row">
+      <button class="btn btn-primary" id="processBtn">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+          <path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
+        </svg>
+        Remove Background
+      </button>
+      <div class="progress-wrap" id="progressWrap">
+        <div class="progress-bar-track"><div class="progress-bar-fill" id="progressFill"></div></div>
+        <span class="progress-label" id="progressLabel">Initializing...</span>
+      </div>
+      <button class="btn-reset" id="resetBtn">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="display:inline;margin-right:5px">
+          <polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.51"/>
+        </svg>
+        Reset
+      </button>
+    </div>
+      <button class="btn btn-secondary" id="downloadZipBtn" style="display:none;">Download ZIP</button>
+  </div>
+
+  <section class="queue-history">
+    <div class="queue-panel">
+      <h4>Queue</h4>
+      <div id="queueList" class="list"></div>
+    </div>
+    <div class="history-panel">
+      <h4>History</h4>
+      <div id="historyList" class="list"></div>
+    </div>
+  </section>
+
+  <div class="message-banner" id="messageBanner" role="status" aria-live="polite"></div>
+
+  <div class="foot-note">
+    <div class="foot-note-icon">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+      </svg>
+    </div>
+    <p><strong>Private by design.</strong> Your images never leave your device. The AI model runs entirely in the browser using WebAssembly — no server, no uploads, no storage.</p>
+  </div>
+</main>
+
+<script type="module" src="app.js"></script>
+</body>
+</html>

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}

styles.css

@@ -0,0 +1,235 @@
+:root {
+  --bg: #F7F6F3; --surface: #FFFFFF; --surface-2: #F9F9F8;
+  --border: #EAEAEA; --border-strong: rgba(0,0,0,0.12);
+  --text-primary: #111111; --text-secondary: #787774; --text-tertiary: #AEADA9;
+  --accent: #111111; --accent-text: #FFFFFF; --accent-hover: #333333;
+  --tag-blue-bg: #E1F3FE; --tag-blue-text: #1F6C9F;
+  --tag-green-bg: #EDF3EC; --tag-green-text: #346538;
+  --warning-bg: #FFF5E8; --warning-text: #9B5D00;
+  --error-bg: #FDECEC; --error-text: #A23A3A;
+  --success-bg: #EDF8F0; --success-text: #2D6A3D;
+  --shadow: 0 2px 8px rgba(0,0,0,0.04);
+  --radius: 10px; --radius-sm: 6px;
+  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+[data-theme="dark"] {
+  --bg: #111111; --surface: #1A1A1A; --surface-2: #222222;
+  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
+  --text-primary: #EFEFEE; --text-secondary: #888784; --text-tertiary: #555452;
+  --accent: #EFEFEE; --accent-text: #111111; --accent-hover: #CFCFCC;
+  --tag-blue-bg: rgba(31,108,159,0.18); --tag-blue-text: #7CC3F0;
+  --tag-green-bg: rgba(52,101,56,0.18); --tag-green-text: #8DC48F;
+  --warning-bg: rgba(155,93,0,0.18); --warning-text: #F1C27B;
+  --error-bg: rgba(162,58,58,0.18); --error-text: #F4A3A3;
+  --success-bg: rgba(45,106,61,0.18); --success-text: #A5D9B0;
+  --shadow: 0 2px 12px rgba(0,0,0,0.3);
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: 'DM Sans', -apple-system, sans-serif;
+  background: var(--bg); color: var(--text-primary);
+  min-height: 100vh;
+  transition: background var(--transition), color var(--transition);
+  -webkit-font-smoothing: antialiased;
+}
+nav {
+  position: sticky; top: 0; z-index: 100;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 clamp(16px, 5vw, 48px); height: 56px;
+  background: var(--bg); border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  transition: background var(--transition), border-color var(--transition);
+}
+.nav-logo {
+  font-family: 'Newsreader', Georgia, serif; font-size: 18px; font-weight: 500;
+  letter-spacing: -0.03em; color: var(--text-primary); text-decoration: none;
+  display: flex; align-items: center; gap: 6px;
+}
+.nav-logo span { font-style: italic; color: var(--text-secondary); }
+.nav-right { display: flex; align-items: center; gap: 12px; }
+.tag {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
+  padding: 3px 10px; border-radius: 9999px;
+  background: var(--tag-blue-bg); color: var(--tag-blue-text);
+}
+.theme-btn {
+  width: 34px; height: 34px; border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm); background: var(--surface); color: var(--text-secondary);
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  transition: background var(--transition), transform 150ms, box-shadow var(--transition);
+  flex-shrink: 0;
+}
+.theme-btn:hover { background: var(--surface-2); box-shadow: var(--shadow); }
+.theme-btn:active { transform: scale(0.95); }
+.theme-btn svg { width: 16px; height: 16px; }
+main {
+  max-width: 960px; margin: 0 auto;
+  padding: clamp(36px, 8vw, 72px) clamp(16px, 5vw, 32px) 80px;
+}
+.hero {
+  margin-bottom: 32px; opacity: 0; transform: translateY(12px);
+  animation: fadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
+}
+.hero h1 {
+  font-family: 'Newsreader', Georgia, serif;
+  font-size: clamp(32px, 6vw, 54px); font-weight: 400;
+  letter-spacing: -0.035em; line-height: 1.1; color: var(--text-primary); margin-bottom: 12px;
+}
+.hero h1 em { font-style: italic; color: var(--text-secondary); }
+.hero p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; max-width: 560px; }
+.upload-zone {
+  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
+  background: var(--surface); padding: 56px 32px; text-align: center; cursor: pointer;
+  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
+  position: relative; overflow: hidden; opacity: 0; transform: translateY(12px);
+  animation: fadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
+}
+.upload-zone:hover, .upload-zone.drag-over, .upload-zone.is-ready {
+  border-color: var(--text-secondary); background: var(--surface-2); box-shadow: var(--shadow);
+}
+.upload-zone.is-error {
+  border-color: var(--error-text); background: var(--error-bg);
+}
+.upload-zone.is-processing {
+  opacity: 0.8; transform: scale(0.99); pointer-events: none;
+}
+.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.upload-icon { width: 44px; height: 44px; margin: 0 auto 16px; color: var(--text-tertiary); }
+.upload-zone h3 { font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
+.upload-zone p { font-size: 13px; color: var(--text-secondary); }
+.upload-zone .formats { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
+.format-badge {
+  font-family: 'Geist Mono', monospace; font-size: 11px; padding: 2px 8px;
+  border: 1px solid var(--border); border-radius: 4px;
+  background: var(--surface-2); color: var(--text-secondary);
+}
+.panel {
+  display: none; gap: 20px; opacity: 0; transform: translateY(12px);
+  margin-top: 24px;
+  animation: fadeUp 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.panel.visible { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
+@media (max-width: 620px) { .panel.visible { grid-template-columns: 1fr; } }
+.img-card {
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface); overflow: hidden; position: relative;
+}
+.img-card-header {
+  padding: 14px 18px; border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.img-card-header span {
+  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
+  text-transform: uppercase; color: var(--text-secondary);
+}
+.img-card-body {
+  padding: 16px; min-height: 260px; display: flex;
+  align-items: center; justify-content: center;
+  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 0 0 / 16px 16px;
+}
+.img-card-body img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 4px; }
+.controls-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.btn {
+  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
+  border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif;
+  font-size: 14px; font-weight: 500; cursor: pointer; border: none;
+  transition: background var(--transition), transform 150ms, box-shadow var(--transition);
+  white-space: nowrap;
+}
+.btn:active { transform: scale(0.97); }
+.btn-primary { background: var(--accent); color: var(--accent-text); }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
+.btn-secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); }
+.btn-secondary:hover { background: var(--surface-2); box-shadow: var(--shadow); }
+.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
+.btn-reset {
+  margin-left: auto; background: transparent; border: none;
+  font-size: 13px; color: var(--text-secondary); cursor: pointer;
+  padding: 8px 12px; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif;
+  transition: color var(--transition), background var(--transition);
+}
+.btn-reset:hover { color: var(--text-primary); background: var(--surface); }
+.progress-wrap { display: none; flex-direction: column; gap: 8px; width: 100%; }
+.progress-wrap.visible { display: flex; }
+.progress-bar-track { height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
+.progress-bar-fill { height: 100%; background: var(--text-primary); border-radius: 2px; width: 0%; transition: width 300ms ease; }
+.progress-label { font-size: 12px; color: var(--text-secondary); font-family: 'Geist Mono', monospace; }
+.status-badge {
+  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500;
+  letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 10px; border-radius: 9999px;
+}
+.status-badge.ready { background: var(--tag-green-bg); color: var(--tag-green-text); }
+.status-badge.processing { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
+.status-badge.error { background: var(--error-bg); color: var(--error-text); }
+.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+.dot.pulse { animation: pulse 1.2s ease infinite; }
+.result-empty {
+  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
+  color: var(--text-tertiary);
+  text-align: center;
+}
+.result-empty span { font-size: 13px; }
+.message-banner {
+  display: none; margin-top: 16px; padding: 12px 14px; border-radius: 10px;
+  font-size: 13px; line-height: 1.5; border: 1px solid transparent;
+}
+.message-banner.visible { display: block; }
+.message-banner.info { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
+.message-banner.warning { background: var(--warning-bg); border-color: rgba(155,93,0,0.2); color: var(--warning-text); }
+.message-banner.error { background: var(--error-bg); border-color: rgba(162,58,58,0.2); color: var(--error-text); }
+.message-banner.success { background: var(--success-bg); border-color: rgba(45,106,61,0.18); color: var(--success-text); }
+.foot-note {
+  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border);
+  display: flex; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(12px);
+  animation: fadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 400ms forwards;
+}
+.foot-note-icon {
+  width: 28px; height: 28px; border-radius: 6px; background: var(--surface);
+  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
+  color: var(--text-secondary); flex-shrink: 0;
+}
+.foot-note p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
+.foot-note strong { color: var(--text-primary); font-weight: 500; }
+@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+@media (max-width: 480px) {
+  .upload-zone { padding: 40px 20px; }
+  .tag { display: none; }
+  .controls-row { flex-direction: column; align-items: stretch; }
+  .btn-reset { margin-left: 0; }
+}
+
+.queue-history {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px;
+}
+.queue-panel, .history-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface); }
+.queue-panel h4, .history-panel h4 { margin: 0 0 8px 0; font-size: 13px; color: var(--text-secondary); }
+.list { display: flex; gap: 8px; flex-wrap: wrap; min-height: 72px; }
+.item { width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; position: relative; }
+.item img { width: 100%; height: 100%; object-fit: cover; }
+.item .meta { position: absolute; left: 4px; bottom: 4px; right: 4px; font-size: 10px; color: var(--text-secondary); text-align: center; }
+.item .remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.06); border-radius: 4px; padding: 2px 4px; font-size: 11px; cursor: pointer; }
+
+@media (max-width: 620px) { .queue-history { grid-template-columns: 1fr; } }
+
+/* History thumbnails: show pointer and download icon on hover */
+.history-panel .item { cursor: default; }
+.history-panel .item:hover { cursor: pointer; }
+.history-panel .item::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 18px;
+  height: 18px;
+  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 160ms ease, transform 160ms ease;
+  pointer-events: none;
+}
+.history-panel .item:hover::after { opacity: 1; transform: translateY(0); }