lodestones
/

tagger-experiment

@@ -202,6 +202,36 @@
     .tag-pill:hover { opacity: .8; }
     .tag-pill .score { font-size: .66rem; opacity: .7; }
     .tag-pill.hidden { display: none; }
   </style>
 </head>
 <body>
@@ -239,12 +269,22 @@
   <div id="results-area">
-    <!-- image full-width on top -->
     <div class="preview-wrap">
-      <div style="width:100%">
         <img id="preview-img" src="" alt="preview" />
         <div class="img-meta" id="img-meta"></div>
       </div>
     </div>
     <!-- global copy bar -->
@@ -298,6 +338,48 @@
     if (el) el.value = Math.max(1, Math.min(99, parseInt(pct) || 1));
   }
   // ---- drag & drop ----
   const dz = document.getElementById('drop-zone');
   dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('drag-over'); });
@@ -314,6 +396,8 @@
     const url = document.getElementById('url-input').value.trim();
     if (!url) return;
     setPreview(url, url);
     submitFetch(`/tag/url?max_size=${document.getElementById('maxsize-input').value}&url=${encodeURIComponent(url)}`,
                 { method: 'POST' });
   }
@@ -325,6 +409,8 @@
     const reader = new FileReader();
     reader.onload = e => setPreview(e.target.result, file.name);
     reader.readAsDataURL(file);
     submitFetch(`/tag/upload?max_size=${maxSize}`, { method: 'POST', body: fd });
   }

     .tag-pill:hover { opacity: .8; }
     .tag-pill .score { font-size: .66rem; opacity: .7; }
     .tag-pill.hidden { display: none; }
+    /* ---- PCA panel ---- */
+    .preview-wrap { flex-wrap: wrap; }
+    .preview-col { flex: 1 1 0; min-width: 0; }
+    .pca-col {
+      flex: 1 1 0; min-width: 0;
+      display: flex; flex-direction: column; gap: .5rem;
+    }
+    .pca-label {
+      font-size: .72rem; color: var(--muted); text-align: center;
+      letter-spacing: .04em; text-transform: uppercase;
+    }
+    #pca-img {
+      border-radius: var(--radius); width: 100%; max-height: 420px;
+      object-fit: contain; border: 1px solid var(--border);
+      display: block; image-rendering: pixelated;
+    }
+    #pca-spinner {
+      display: none; width: 18px; height: 18px; margin: auto;
+      border: 3px solid var(--border); border-top-color: var(--accent);
+      border-radius: 50%; animation: spin .7s linear infinite;
+    }
+    .pca-toggle {
+      background: var(--bg); border: 1px solid var(--border);
+      border-radius: 6px; color: var(--muted); cursor: pointer;
+      font-size: .75rem; padding: .3rem .7rem; align-self: center;
+      transition: border-color .15s, color .15s;
+    }
+    .pca-toggle:hover { border-color: var(--accent); color: var(--text); }
+    .pca-toggle.active { border-color: var(--accent); color: #a78bfa; }
   </style>
 </head>
 <body>
   <div id="results-area">
+    <!-- image + PCA side by side -->
     <div class="preview-wrap">
+      <div class="preview-col">
         <img id="preview-img" src="" alt="preview" />
         <div class="img-meta" id="img-meta"></div>
       </div>
+      <div class="pca-col" id="pca-col" style="display:none">
+        <div class="pca-label">PCA · patch features (R=PC1, G=PC2, B=PC3)</div>
+        <div id="pca-spinner"></div>
+        <img id="pca-img" src="" alt="PCA" style="display:none" />
+      </div>
+    </div>
+    <!-- PCA toggle -->
+    <div style="display:flex;justify-content:flex-end;margin-bottom:.6rem">
+      <button class="pca-toggle" id="pca-toggle" onclick="togglePca()">Show PCA</button>
     </div>
     <!-- global copy bar -->
     if (el) el.value = Math.max(1, Math.min(99, parseInt(pct) || 1));
   }
+  // ---- PCA state ----
+  let _pcaEnabled = false;
+  let _lastPcaRequest = null;  // { type: 'url'|'file', url?: string, file?: File }
+  function togglePca() {
+    _pcaEnabled = !_pcaEnabled;
+    const btn = document.getElementById('pca-toggle');
+    btn.textContent = _pcaEnabled ? 'Hide PCA' : 'Show PCA';
+    btn.classList.toggle('active', _pcaEnabled);
+    document.getElementById('pca-col').style.display = _pcaEnabled ? 'flex' : 'none';
+    if (_pcaEnabled && _lastPcaRequest) runPca(_lastPcaRequest);
+  }
+  function runPca(req) {
+    const spinner = document.getElementById('pca-spinner');
+    const img     = document.getElementById('pca-img');
+    spinner.style.display = 'block';
+    img.style.display = 'none';
+    const maxSize = document.getElementById('maxsize-input').value;
+    let fetchPromise;
+    if (req.type === 'url') {
+      fetchPromise = fetch(
+        `/pca/url?max_size=${maxSize}&url=${encodeURIComponent(req.url)}`,
+        { method: 'POST' }
+      );
+    } else {
+      const fd = new FormData();
+      fd.append('file', req.file);
+      fetchPromise = fetch(`/pca/upload?max_size=${maxSize}`, { method: 'POST', body: fd });
+    }
+    fetchPromise
+      .then(r => r.ok ? r.blob() : Promise.reject('PCA failed'))
+      .then(blob => {
+        img.src = URL.createObjectURL(blob);
+        img.style.display = 'block';
+      })
+      .catch(() => { img.style.display = 'none'; })
+      .finally(() => { spinner.style.display = 'none'; });
+  }
   // ---- drag & drop ----
   const dz = document.getElementById('drop-zone');
   dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('drag-over'); });
     const url = document.getElementById('url-input').value.trim();
     if (!url) return;
     setPreview(url, url);
+    _lastPcaRequest = { type: 'url', url };
+    if (_pcaEnabled) runPca(_lastPcaRequest);
     submitFetch(`/tag/url?max_size=${document.getElementById('maxsize-input').value}&url=${encodeURIComponent(url)}`,
                 { method: 'POST' });
   }
     const reader = new FileReader();
     reader.onload = e => setPreview(e.target.result, file.name);
     reader.readAsDataURL(file);
+    _lastPcaRequest = { type: 'file', file };
+    if (_pcaEnabled) runPca(_lastPcaRequest);
     submitFetch(`/tag/upload?max_size=${maxSize}`, { method: 'POST', body: fd });
   }