Area selection and background removal

js/upload.js

@@ -1,11 +1,16 @@
 import { CATEGORIES, getCategoryInfo, DEFAULT_ANCHORS } from './models.js';
 import { savePrincess, saveClothing } from './store.js';
+import { removeBackground, isModelLoaded } from './segmentation.js';
+import { showPolygonSelector } from './polygon-select.js';
 import { navigate } from './app.js';
 
-let uploadType = 'princess'; // 'princess' | 'clothes'
+let uploadType = 'princess';
 let selectedCategory = 'dress';
-let imageBlob = null;
+let imageBlob = null;       // original photo
+let croppedBlob = null;     // after polygon crop (or same as imageBlob if skipped)
+let segmentedBlob = null;   // after background removal
 let previewURL = null;
+let croppedURL = null;
 
 export function initUpload() {
   const screen = document.getElementById('upload-screen');
@@ -28,6 +33,10 @@ export function initUpload() {
       </label>
     </div>
 
+    <button id="select-area-btn" class="pill select-area-btn" style="display:none">
+      \u2702\uFE0F Select area
+    </button>
+
     <div id="category-section" class="category-picker" style="display:none">
       <p class="picker-label">What kind?</p>
       <div class="category-grid" id="category-grid"></div>
@@ -67,8 +76,10 @@ function bindEvents() {
       uploadType = btn.dataset.type;
       document.querySelectorAll('.type-toggle .pill').forEach(b => b.classList.remove('active'));
       btn.classList.add('active');
-      document.getElementById('category-section').style.display = uploadType === 'clothes' ? '' : 'none';
-      document.getElementById('asset-name').placeholder = uploadType === 'princess' ? 'Princess name...' : 'What is it?';
+      document.getElementById('category-section').style.display =
+        uploadType === 'clothes' ? '' : 'none';
+      document.getElementById('asset-name').placeholder =
+        uploadType === 'princess' ? 'Princess name...' : 'What is it?';
       updateSubmitState();
     });
   });
@@ -88,23 +99,52 @@ function bindEvents() {
     if (!file) return;
 
     imageBlob = file;
+    croppedBlob = null;
+    segmentedBlob = null;
     if (previewURL) URL.revokeObjectURL(previewURL);
+    if (croppedURL) URL.revokeObjectURL(croppedURL);
     previewURL = URL.createObjectURL(file);
+    croppedURL = null;
 
-    const label = document.getElementById('camera-label');
-    label.innerHTML = `
-      <img src="${previewURL}" class="camera-preview"/>
-      <span class="camera-retake">Tap to retake</span>
-    `;
-    label.className = 'camera-preview-label';
+    showPhotoPreview(previewURL);
+    document.getElementById('select-area-btn').style.display = '';
+    document.getElementById('upload-status').innerHTML = '';
+    document.getElementById('submit-btn').style.display = '';
     updateSubmitState();
   });
 
+  // Select area
+  document.getElementById('select-area-btn').addEventListener('click', handleSelectArea);
+
   // Name input
   document.getElementById('asset-name').addEventListener('input', updateSubmitState);
 
-  // Submit
-  document.getElementById('submit-btn').addEventListener('click', handleSubmit);
+  // Submit -> segmentation
+  document.getElementById('submit-btn').addEventListener('click', handleMagicTime);
+}
+
+function showPhotoPreview(url, caption) {
+  const label = document.getElementById('camera-label');
+  label.innerHTML = `
+    <img src="${url}" class="camera-preview"/>
+    <span class="camera-retake">${caption || 'Tap to retake'}</span>
+  `;
+  label.className = 'camera-preview-label';
+}
+
+async function handleSelectArea() {
+  if (!previewURL) return;
+
+  const result = await showPolygonSelector(previewURL);
+  if (!result) return; // cancelled
+
+  croppedBlob = result.imageBlob;
+  if (croppedURL) URL.revokeObjectURL(croppedURL);
+  croppedURL = URL.createObjectURL(croppedBlob);
+
+  showPhotoPreview(croppedURL, 'Area selected \u2014 tap to retake photo');
+  document.getElementById('select-area-btn').textContent = '\u2702\uFE0F Reselect area';
+  updateSubmitState();
 }
 
 function updateSubmitState() {
@@ -113,18 +153,118 @@ function updateSubmitState() {
   btn.disabled = !imageBlob || !name;
 }
 
-async function handleSubmit() {
+async function handleMagicTime() {
   const name = document.getElementById('asset-name').value.trim();
   if (!imageBlob || !name) return;
 
   const btn = document.getElementById('submit-btn');
   const status = document.getElementById('upload-status');
 
+  // Use cropped image if available, otherwise original
+  const inputBlob = croppedBlob || imageBlob;
+
   btn.disabled = true;
+  btn.style.display = 'none';
+
+  const modelHint = isModelLoaded()
+    ? ''
+    : '<p class="progress-hint">First time takes a moment to download the AI model.</p>';
+
+  status.innerHTML = `
+    <div class="processing">
+      <span class="crown-spin">\u{1F451}</span>
+      <p id="seg-message">Removing the background!</p>
+      <div id="seg-progress-bar" class="progress-bar"><div id="seg-progress-fill" class="progress-fill"></div></div>
+      ${modelHint}
+    </div>
+  `;
+
+  try {
+    segmentedBlob = await removeBackground(inputBlob, (info) => {
+      const msg = document.getElementById('seg-message');
+      const fill = document.getElementById('seg-progress-fill');
+      if (msg) msg.textContent = info.message;
+      if (fill && info.progress != null) {
+        fill.style.width = `${info.progress}%`;
+      }
+    });
+
+    // Show preview with approve/retry
+    const segURL = URL.createObjectURL(segmentedBlob);
+    const beforeURL = croppedURL || previewURL;
+    status.innerHTML = `
+      <div class="seg-preview">
+        <p class="seg-preview-label">How does it look?</p>
+        <div class="seg-comparison">
+          <div class="seg-compare-item">
+            <img src="${beforeURL}" class="seg-compare-img" alt="Before"/>
+            <span>Before</span>
+          </div>
+          <div class="seg-compare-item">
+            <img src="${segURL}" class="seg-compare-img checkerboard-bg" alt="After"/>
+            <span>After</span>
+          </div>
+        </div>
+        <div class="seg-actions">
+          <button id="seg-approve" class="big-button">\u2705 Looks good!</button>
+          <button id="seg-skip" class="pill">Save without removing</button>
+          <button id="seg-retry" class="pill">Retake photo</button>
+        </div>
+      </div>
+    `;
+
+    document.getElementById('seg-approve').addEventListener('click', () => saveAsset(name, segmentedBlob));
+    document.getElementById('seg-skip').addEventListener('click', () => saveAsset(name, inputBlob));
+    document.getElementById('seg-retry').addEventListener('click', resetToCamera);
+
+  } catch (err) {
+    console.error('Segmentation failed:', err);
+    status.innerHTML = `
+      <div class="error-state">
+        <p>Background removal didn't work this time.</p>
+        <p class="error-detail">${err.message}</p>
+        <div class="seg-actions">
+          <button id="seg-skip-err" class="big-button">Save without removing</button>
+          <button id="seg-retry-err" class="pill">Try again</button>
+        </div>
+      </div>
+    `;
+    document.getElementById('seg-skip-err').addEventListener('click', () => saveAsset(name, inputBlob));
+    document.getElementById('seg-retry-err').addEventListener('click', () => {
+      btn.style.display = '';
+      btn.disabled = false;
+      status.innerHTML = '';
+    });
+  }
+}
+
+function resetToCamera() {
+  const status = document.getElementById('upload-status');
+  const btn = document.getElementById('submit-btn');
+  status.innerHTML = '';
+  btn.style.display = '';
+  btn.disabled = false;
+  document.getElementById('camera-input').value = '';
+  const label = document.getElementById('camera-label');
+  label.innerHTML = `
+    <span class="camera-icon">\u{1F4F8}</span>
+    <span class="camera-text">Tap to photograph!</span>
+  `;
+  label.className = 'camera-label';
+  document.getElementById('select-area-btn').style.display = 'none';
+  document.getElementById('select-area-btn').textContent = '\u2702\uFE0F Select area';
+  imageBlob = null;
+  croppedBlob = null;
+  segmentedBlob = null;
+  updateSubmitState();
+}
+
+async function saveAsset(name, blob) {
+  const status = document.getElementById('upload-status');
   status.innerHTML = `
     <div class="processing">
       <span class="crown-spin">\u{1F451}</span>
-      <p>Working some magic!</p>
+      <p>Saving!</p>
     </div>
   `;
 
@@ -132,7 +272,7 @@ async function handleSubmit() {
     if (uploadType === 'princess') {
       await savePrincess({
         name,
-        imageBlob,
+        imageBlob: blob,
         anchors: { ...DEFAULT_ANCHORS },
       });
     } else {
@@ -140,7 +280,7 @@ async function handleSubmit() {
       await saveClothing({
         name,
         category: selectedCategory,
-        imageBlob,
+        imageBlob: blob,
         targetAnchor: catInfo.targetAnchor,
         scale: 0.4,
         zIndex: catInfo.zIndex,
@@ -153,7 +293,6 @@ async function handleSubmit() {
         <a href="#/" class="big-button">Back to game</a>
       </div>
     `;
-    btn.style.display = 'none';
   } catch (err) {
     status.innerHTML = `
       <div class="error-state">
@@ -161,7 +300,6 @@ async function handleSubmit() {
         <p class="error-detail">${err.message}</p>
       </div>
     `;
-    btn.disabled = false;
   }
 }
 
@@ -169,6 +307,10 @@ function resetState() {
   uploadType = 'princess';
   selectedCategory = 'dress';
   imageBlob = null;
+  croppedBlob = null;
+  segmentedBlob = null;
   if (previewURL) URL.revokeObjectURL(previewURL);
+  if (croppedURL) URL.revokeObjectURL(croppedURL);
   previewURL = null;
+  croppedURL = null;
 }

style.css

@@ -361,6 +361,7 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 }
 .name-input:focus { border-color: var(--gold); }
 
+.select-area-btn { align-self: center; }
 .magic-btn { align-self: center; font-size: 1.4rem; margin-top: 0.5rem; }
 
 .processing {
@@ -492,3 +493,160 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 .tray-item {
   touch-action: none;
 }
+
+/* ---- Segmentation progress ---- */
+
+.progress-bar {
+  width: 80%;
+  max-width: 250px;
+  height: 12px;
+  border-radius: 6px;
+  background: var(--lavender);
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.progress-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--gold);
+  border-radius: 6px;
+  transition: width 0.3s ease;
+}
+
+.progress-hint {
+  font-size: 0.85rem;
+  color: var(--lavender-dk);
+  text-align: center;
+  margin-top: 0.5rem;
+}
+
+/* ---- Segmentation preview ---- */
+
+.seg-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem;
+}
+
+.seg-preview-label {
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+
+.seg-comparison {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  width: 100%;
+}
+
+.seg-compare-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  flex: 1;
+  max-width: 180px;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--lavender-dk);
+}
+
+.seg-compare-img {
+  width: 100%;
+  aspect-ratio: 3/4;
+  object-fit: contain;
+  border-radius: 1rem;
+  border: 3px solid var(--lavender);
+  background: var(--panel);
+}
+
+.checkerboard-bg {
+  background-image:
+    linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+}
+
+.seg-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+}
+
+/* ---- Polygon selection overlay ---- */
+
+.poly-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--parchment);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.poly-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.poly-hint {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--lavender-dk);
+  text-align: center;
+  flex: 1;
+}
+
+.poly-undo-btn, .poly-close-btn {
+  font-size: 0.9rem;
+  padding: 0.4rem 0.8rem;
+}
+
+.poly-canvas-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 0.5rem;
+  overflow: hidden;
+}
+
+.poly-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 0.5rem;
+  display: block;
+}
+
+.poly-canvas {
+  position: absolute;
+  touch-action: none;
+  cursor: crosshair;
+}
+
+.poly-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+  flex-shrink: 0;
+}