@spark-apps/piclet 1.0.4 → 1.0.6

package/dist/gui/css/theme.css

@@ -69,16 +69,24 @@ input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;hei
 .log-preview{width:80px;height:80px;object-fit:contain;background:var(--bg2);border-radius:5px;border:1px solid var(--brd);flex-shrink:0;display:none;align-self:center}
 .log-preview.on{display:block}
 
-/* Done modal */
-#doneModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:100;align-items:center;justify-content:center}
-#doneModal.on{display:flex}
-.done-modal{background:var(--bg2);border:1px solid var(--brd);border-radius:8px;padding:16px 24px;text-align:center;min-width:200px}
-.done-modal h4{font-size:14px;margin:0 0 4px}
-.done-modal.ok h4{color:var(--ok)}
-.done-modal.err h4{color:var(--err)}
-.done-modal p{font-size:11px;color:var(--txt2);margin:0 0 12px;word-break:break-word}
-.done-btns{display:flex;gap:8px;justify-content:center}
-.done-btns .btn{padding:8px 16px;font-size:12px}
+/* Done container (replaces log area) */
+.done-container{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:hidden}
+.done-container.on{display:flex}
+.done-preview{display:flex;width:100%;max-height:80%;align-items:center;justify-content:center;background:var(--bg2);border-radius:6px;overflow:hidden;position:relative}
+.done-preview::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/10px 10px;z-index:0}
+.done-preview img{max-width:100%;height:auto;object-fit:contain;position:relative;z-index:1}
+.done-logs{flex:1 1 auto;font:10px/1.4 Consolas,monospace;background:var(--bg2);border-radius:6px;padding:8px;overflow-y:auto;min-height:60px}
+.done-logs p{margin:2px 0}
+.done-logs .i{color:var(--txt3)}
+.done-logs .s{color:var(--ok)}
+.done-logs .e{color:var(--err)}
+.done-result{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--bg2);border-radius:6px;flex:0 0 auto}
+.done-result h4{font-size:13px;margin:0;font-weight:600}
+.done-container.ok .done-result h4{color:var(--ok)}
+.done-container.err .done-result h4{color:var(--err)}
+.done-result p{font-size:11px;color:var(--txt2);margin:0;flex:1}
+.done-btns{display:flex;gap:8px;flex:0 0 auto}
+.done-btns .btn{padding:8px 16px;font-size:11px}
 
 /* Warning/info box */
 .warn-box{display:none;font-size:10px;color:#ca8a04;background:rgba(202,138,4,0.1);padding:6px 8px;border-radius:4px;text-align:center}

package/dist/gui/piclet.html

@@ -400,13 +400,14 @@
     <div class="log" id="G"></div>
     <img class="log-preview" id="LP">
   </div>
-</div>
-
-<!-- Done modal -->
-<div class="modal-overlay" id="doneModal">
-  <div class="done-modal" id="D">
-    <h4 id="dT"></h4>
-    <p id="dM"></p>
+  <!-- Done state (replaces log container) -->
+  <div class="done-container" id="DC">
+    <div class="done-preview" id="donePreview"></div>
+    <div class="done-logs" id="doneLogs"></div>
+    <div class="done-result">
+      <h4 id="dT"></h4>
+      <p id="dM"></p>
+    </div>
     <div class="done-btns">
       <button class="btn btn-g" onclick="reset()">Back</button>
       <button class="btn" onclick="openOutputFolder()" id="openFolderBtn">Open Folder</button>
@@ -780,18 +781,7 @@ function schedulePreview() {
 
 // Show original image
 async function showOriginal() {
-  // For GIFs with frames loaded, show selected frame directly
-  if (isGifFile && gifFrames.length > 0 && gifFrames[selectedFrameIndex]) {
-    const frame = gifFrames[selectedFrameIndex];
-    pA.innerHTML = '';
-    const img = document.createElement('img');
-    img.src = frame.thumbnail;
-    pA.appendChild(img);
-    pI.textContent = `${imageInfo.width} × ${imageInfo.height} (Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount})`;
-    updateZoom();
-    return;
-  }
-
+  // Always fetch full-scale preview from API (not the 96px thumbnails)
   pA.innerHTML = '<div class="mini-sp"></div>';
   try {
     const opts = { tools: [], original: true };
@@ -806,7 +796,7 @@ async function showOriginal() {
       pA.appendChild(img);
       const frameInfo = isGifFile && imageInfo.frameCount > 1 ? ` (Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount})` : '';
       pI.textContent = `${imageInfo.width} × ${imageInfo.height}${frameInfo}`;
-      updateZoom(); // Apply current zoom
+      updateZoom();
     }
   } catch (e) {
     pA.innerHTML = '<span class="placeholder">Failed to load image</span>';
@@ -1122,16 +1112,18 @@ function updatePlaybackFrame() {
     thumb.classList.toggle('selected', i === selectedFrameIndex);
   });
 
-  // Update main preview
-  const frame = gifFrames[selectedFrameIndex];
-  if (frame && frame.thumbnail) {
+  // Get the frame image from the strip (includes applied effects if active)
+  const frameThumb = document.querySelector(`.frame-thumb[data-index="${selectedFrameIndex}"] img`);
+  const frameSrc = frameThumb?.src || (gifFrames[selectedFrameIndex]?.thumbnail);
+
+  if (frameSrc) {
     const img = pA.querySelector('img');
     if (img) {
-      img.src = frame.thumbnail;
+      img.src = frameSrc;
     } else {
       pA.innerHTML = '';
       const newImg = document.createElement('img');
-      newImg.src = frame.thumbnail;
+      newImg.src = frameSrc;
       pA.appendChild(newImg);
       updateZoom();
     }
@@ -1187,16 +1179,8 @@ function selectFrame(index) {
 
 async function showSelectedFrame() {
   if (activeTools.size === 0) {
-    // Show original frame
-    const frame = gifFrames[selectedFrameIndex];
-    if (frame && frame.thumbnail) {
-      pA.innerHTML = '';
-      const img = document.createElement('img');
-      img.src = frame.thumbnail;
-      pA.appendChild(img);
-      pI.textContent = `Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount}`;
-      updateZoom();
-    }
+    // Fetch full-scale frame from API
+    showOriginal();
   } else {
     // Regenerate preview for selected frame
     generatePreview();
@@ -1285,12 +1269,11 @@ async function runExport(opts, message) {
     if (result.logs) {
       result.logs.forEach(l => log('G', l.type[0], l.message));
     }
-    // Try to show output preview
-    if (result.success) await showLogPreview();
-    showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
+    // Show done state with preview
+    await showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
   } catch (e) {
     log('G', 'e', e.message);
-    showDone(false, 'Error', e.message);
+    await showDone(false, 'Error', e.message);
   }
 }
 
@@ -1677,19 +1660,18 @@ async function apply() {
       result.logs.forEach(l => log('G', l.type[0], l.message));
     }
 
-    // Try to show output preview
-    if (result.success) await showLogPreview();
-    showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
+    // Show done state with preview
+    await showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
   } catch (e) {
     log('G', 'e', e.message);
-    showDone(false, 'Error', e.message);
+    await showDone(false, 'Error', e.message);
   }
 }
 
 // Reset to main view
 function reset() {
-  $('doneModal').classList.remove('on');
-  $('D').classList.remove('ok', 'err');
+  $('DC').classList.remove('on', 'ok', 'err');
+  $('donePreview').classList.remove('on');
   $('LC').classList.remove('on');
   $('LP').classList.remove('on');
   $('M').classList.remove('hide');
@@ -1722,23 +1704,64 @@ async function showLogPreview() {
   } catch { /* ignore */ }
 }
 
-// Show done modal
-function showDone(success, title, message) {
+// Show done state (replaces log container)
+async function showDone(success, title, message) {
   $('L').classList.remove('on');
-  $('doneModal').classList.add('on');
-  $('D').classList.add(success ? 'ok' : 'err');
-  $('D').classList.remove(success ? 'err' : 'ok');
+  $('LC').classList.remove('on'); // Hide log container
+  $('DC').classList.add('on', success ? 'ok' : 'err');
+  $('DC').classList.remove(success ? 'err' : 'ok');
   $('dT').textContent = title;
   $('dM').textContent = message;
   lastOutputSuccess = success;
   $('openFolderBtn').style.display = success ? '' : 'none';
   if (success) hasChanges = false;
+
+  // Copy logs to done container
+  $('doneLogs').innerHTML = $('G').innerHTML;
+
+  // Fetch and show thumbnail
+  const donePreview = $('donePreview');
+  if (success) {
+    try {
+      const result = await fetchJson('/api/output-preview');
+      if (result.success && result.imageData) {
+        donePreview.innerHTML = '';
+        const img = document.createElement('img');
+        img.src = result.imageData;
+        img.alt = 'Output';
+        donePreview.appendChild(img);
+      } else {
+        // Show error in preview area
+        donePreview.innerHTML = `<span style="color:var(--err);font-size:10px;z-index:1;position:relative">${result.error || 'No preview'}</span>`;
+      }
+    } catch (e) {
+      donePreview.innerHTML = `<span style="color:var(--err);font-size:10px;z-index:1;position:relative">Error: ${e.message}</span>`;
+    }
+  } else {
+    donePreview.innerHTML = '';
+  }
 }
 
 // Init
 setupDragDrop();
 setupDivider();
 
+// Spacebar to toggle GIF playback
+document.addEventListener('keydown', (e) => {
+  // Only handle space if not typing in an input
+  if (e.code === 'Space' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) {
+    if (isGifFile && gifFrames.length > 1) {
+      e.preventDefault();
+      const wasPlaying = isPlaying;
+      togglePlayback();
+      // When stopping, refresh to full-scale preview
+      if (wasPlaying) {
+        showSelectedFrame();
+      }
+    }
+  }
+});
+
 // Resizable dividers
 function setupDivider() {
   const divider = $('divider');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@spark-apps/piclet",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"description": "Lightweight image tools for content creators",
 	"type": "module",
 	"bin": {

package/dist/gui/border.html

@@ -1,229 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-piclet data-width="400" data-height="440">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Add Border</title>
-  <link rel="stylesheet" href="/css/theme.css">
-  <script src="/js/piclet.js"></script>
-  <style>
-    .preview-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:6px;min-height:140px;overflow:hidden;position:relative}
-    .preview-area::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/16px 16px;z-index:0}
-    .preview-area img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1}
-    .preview-area .placeholder{position:relative;z-index:1;font-size:11px;color:var(--txt3)}
-    .preview-area .mini-sp{width:16px;height:16px;border:2px solid var(--bg3);border-top-color:var(--acc);border-radius:50%;animation:s .5s linear infinite;position:relative;z-index:1}
-    .preview-info{font-size:10px;color:var(--txt3);text-align:center;margin-top:4px;height:14px}
-    .controls{display:flex;flex-direction:column;gap:10px}
-    .control-row{display:flex;align-items:center;gap:10px}
-    .control-row label{font-size:11px;color:var(--txt3);width:50px;flex-shrink:0}
-    .control-row input[type="range"]{flex:1;height:4px;background:var(--bg3);border-radius:3px;-webkit-appearance:none}
-    .control-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--acc);border-radius:50%;cursor:pointer}
-    .control-row .val{width:40px;font-size:12px;color:var(--acc2);text-align:right;font-weight:500}
-    .color-row{display:flex;align-items:center;gap:10px}
-    .color-row label{font-size:11px;color:var(--txt3);width:50px;flex-shrink:0}
-    .color-input-wrap{flex:1;display:flex;align-items:center;gap:8px}
-    .color-preview{width:28px;height:28px;border-radius:4px;border:1px solid var(--brd);cursor:pointer;flex-shrink:0}
-    .color-input-wrap input[type="color"]{position:absolute;opacity:0;width:28px;height:28px;cursor:pointer}
-    .color-input-wrap input[type="text"]{flex:1;padding:6px 10px;background:var(--bg2);border:1px solid var(--brd);border-radius:5px;color:var(--txt);font:inherit;font-size:12px}
-    .color-input-wrap input[type="text"]:focus{outline:none;border-color:var(--acc)}
-    .preset-colors{display:flex;gap:4px;margin-left:auto}
-    .preset-color{width:20px;height:20px;border-radius:3px;border:1px solid var(--brd);cursor:pointer;transition:transform .1s}
-    .preset-color:hover{transform:scale(1.1)}
-  </style>
-</head>
-<body>
-<div class="app">
-  <div class="hd"><b>PicLet</b><span>Add Border</span></div>
-  <div class="meta">
-    <div>File<b id="fn">-</b></div>
-    <div>Size<b id="sz">-</b></div>
-  </div>
-  <!-- Form -->
-  <div id="F" class="form">
-    <div class="preview-area" id="pA">
-      <span class="placeholder">Adjust to preview</span>
-    </div>
-    <div class="preview-info" id="pI"></div>
-    <div class="controls">
-      <div class="control-row">
-        <label>Width</label>
-        <input type="range" id="wR" min="1" max="100" value="10">
-        <span class="val" id="wV">10px</span>
-      </div>
-      <div class="color-row">
-        <label>Color</label>
-        <div class="color-input-wrap">
-          <div class="color-preview" id="cP" style="background:#ffffff"></div>
-          <input type="color" id="cC" value="#ffffff">
-          <input type="text" id="cT" value="#ffffff" placeholder="#ffffff">
-          <div class="preset-colors">
-            <div class="preset-color" style="background:#ffffff" data-color="#ffffff"></div>
-            <div class="preset-color" style="background:#000000" data-color="#000000"></div>
-            <div class="preset-color" style="background:#eab308" data-color="#eab308"></div>
-            <div class="preset-color" style="background:#ef4444" data-color="#ef4444"></div>
-            <div class="preset-color" style="background:#3b82f6" data-color="#3b82f6"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="btns">
-      <button class="btn btn-g" onclick="PicLet.close()">Cancel</button>
-      <button class="btn btn-p" onclick="apply()">Apply</button>
-    </div>
-  </div>
-  <!-- Loading state -->
-  <div class="ld" id="L"><div class="sp"></div><span id="lT">Adding border...</span></div>
-  <!-- Log -->
-  <div class="log" id="G"></div>
-  <!-- Done state -->
-  <div class="dn" id="D">
-    <h4 id="dT"></h4>
-    <p id="dM"></p>
-    <div class="btns" style="width:100%;margin-top:8px">
-      <button class="btn btn-p" onclick="PicLet.close()">Done</button>
-    </div>
-  </div>
-</div>
-<script>
-const { $, log, fetchJson, postJson } = PicLet;
-const pA = $('pA'), pI = $('pI');
-const wR = $('wR'), wV = $('wV');
-const cC = $('cC'), cT = $('cT'), cP = $('cP');
-
-let previewTimeout = null;
-let isSliding = false;
-let lastPreviewOpts = null;
-
-// Width slider
-wR.oninput = () => { wV.textContent = wR.value + 'px'; };
-wR.addEventListener('mousedown', () => { isSliding = true; });
-wR.addEventListener('mouseup', () => { isSliding = false; schedulePreview(); });
-wR.addEventListener('mouseleave', () => { if (isSliding) { isSliding = false; schedulePreview(); } });
-
-// Color picker
-cC.oninput = () => {
-  cT.value = cC.value;
-  cP.style.background = cC.value;
-  schedulePreview();
-};
-
-cT.oninput = () => {
-  const val = cT.value;
-  if (/^#[0-9a-fA-F]{6}$/.test(val)) {
-    cC.value = val;
-    cP.style.background = val;
-    schedulePreview();
-  }
-};
-
-cT.onblur = () => {
-  schedulePreview();
-};
-
-cP.onclick = () => cC.click();
-
-// Preset colors
-document.querySelectorAll('.preset-color').forEach(el => {
-  el.onclick = () => {
-    const color = el.dataset.color;
-    cC.value = color;
-    cT.value = color;
-    cP.style.background = color;
-    schedulePreview();
-  };
-});
-
-// Get current options
-function getOptions() {
-  return {
-    width: +wR.value,
-    color: cT.value || '#ffffff'
-  };
-}
-
-// Check if options changed
-function optionsChanged() {
-  const current = JSON.stringify(getOptions());
-  if (current === lastPreviewOpts) return false;
-  lastPreviewOpts = current;
-  return true;
-}
-
-// Schedule preview
-function schedulePreview() {
-  if (isSliding) return;
-  if (previewTimeout) clearTimeout(previewTimeout);
-  previewTimeout = setTimeout(() => {
-    if (!isSliding && optionsChanged()) {
-      generatePreview();
-    }
-  }, 300);
-}
-
-// Generate preview
-async function generatePreview() {
-  pA.innerHTML = '<div class="mini-sp"></div>';
-  pI.textContent = '';
-
-  try {
-    const result = await postJson('/api/preview', getOptions());
-
-    if (result.success && result.imageData) {
-      const img = document.createElement('img');
-      img.src = result.imageData;
-      img.alt = 'Preview';
-      pA.innerHTML = '';
-      pA.appendChild(img);
-      pI.textContent = result.width && result.height ? `${result.width}×${result.height}` : '';
-    } else {
-      pA.innerHTML = '<span class="placeholder">' + (result.error || 'Preview failed') + '</span>';
-      pI.textContent = '';
-    }
-  } catch (e) {
-    pA.innerHTML = '<span class="placeholder">Preview error</span>';
-    pI.textContent = '';
-  }
-}
-
-// Load initial data
-fetchJson('/api/info').then(d => {
-  $('fn').textContent = d.fileName;
-  $('sz').textContent = d.width + '×' + d.height;
-  if (d.defaults) {
-    wR.value = d.defaults.width || 10;
-    wV.textContent = wR.value + 'px';
-    const color = d.defaults.color || '#ffffff';
-    cC.value = color;
-    cT.value = color;
-    cP.style.background = color;
-  }
-  setTimeout(generatePreview, 100);
-});
-
-// Apply
-async function apply() {
-  $('F').classList.add('hide');
-  $('L').classList.add('on');
-  $('G').classList.add('on');
-
-  try {
-    const result = await postJson('/api/process', getOptions());
-    if (result.logs) {
-      result.logs.forEach(l => log('G', l.type[0], l.message));
-    }
-
-    $('L').classList.remove('on');
-    $('D').classList.add('on', result.success ? 'ok' : 'err');
-    $('dT').textContent = result.success ? 'Done' : 'Failed';
-    $('dM').textContent = result.success ? result.output : result.error;
-  } catch (e) {
-    log('G', 'e', e.message);
-    $('L').classList.remove('on');
-    $('D').classList.add('on', 'err');
-    $('dT').textContent = 'Error';
-    $('dM').textContent = e.message;
-  }
-}
-</script>
-</body>
-</html>

package/dist/gui/extract-frames.html

@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html data-piclet data-width="400" data-height="420">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Extract Frames</title>
-  <link rel="stylesheet" href="/css/theme.css">
-  <script src="/js/piclet.js"></script>
-  <style>
-    .preview-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:6px;min-height:160px;overflow:hidden;position:relative}
-    .preview-area::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/16px 16px;z-index:0}
-    .preview-area img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1}
-    .preview-area .placeholder{position:relative;z-index:1;font-size:11px;color:var(--txt3)}
-    .preview-area .mini-sp{width:16px;height:16px;border:2px solid var(--bg3);border-top-color:var(--acc);border-radius:50%;animation:s .5s linear infinite;position:relative;z-index:1}
-    .preview-info{font-size:10px;color:var(--txt3);text-align:center;margin-top:4px;height:14px}
-    .frame-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
-    .frame-nav button{width:32px;height:32px;border-radius:6px;border:none;background:var(--bg3);color:var(--txt2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
-    .frame-nav button:hover{background:var(--acc);color:#fff}
-    .frame-nav button:disabled{opacity:0.3;cursor:not-allowed}
-    .frame-nav span{font-size:12px;color:var(--txt2);min-width:80px;text-align:center}
-    .info-box{background:var(--bg2);border-radius:6px;padding:12px;margin-top:8px;text-align:center}
-    .info-box .count{font-size:24px;font-weight:600;color:var(--acc2)}
-    .info-box .label{font-size:11px;color:var(--txt3);margin-top:2px}
-  </style>
-</head>
-<body>
-<div class="app">
-  <div class="hd"><b>PicLet</b><span>Extract Frames</span></div>
-  <div class="meta">
-    <div>File<b id="fn">-</b></div>
-    <div>Size<b id="sz">-</b></div>
-  </div>
-  <!-- Form -->
-  <div id="F" class="form">
-    <div class="preview-area" id="pA">
-      <span class="placeholder">Loading...</span>
-    </div>
-    <div class="preview-info" id="pI"></div>
-    <div class="frame-nav">
-      <button id="bP" title="Previous frame">&lt;</button>
-      <span id="fN">Frame 1 / 1</span>
-      <button id="bN" title="Next frame">&gt;</button>
-    </div>
-    <div class="info-box">
-      <div class="count" id="fC">0</div>
-      <div class="label">frames will be extracted as PNG files</div>
-    </div>
-    <div class="btns">
-      <button class="btn btn-g" onclick="PicLet.close()">Cancel</button>
-      <button class="btn btn-p" onclick="apply()">Extract All</button>
-    </div>
-  </div>
-  <!-- Loading state -->
-  <div class="ld" id="L"><div class="sp"></div><span id="lT">Extracting...</span></div>
-  <!-- Log -->
-  <div class="log" id="G"></div>
-  <!-- Done state -->
-  <div class="dn" id="D">
-    <h4 id="dT"></h4>
-    <p id="dM"></p>
-    <div class="btns" style="width:100%;margin-top:8px">
-      <button class="btn btn-p" onclick="PicLet.close()">Done</button>
-    </div>
-  </div>
-</div>
-<script>
-const { $, log, fetchJson, postJson } = PicLet;
-const pA = $('pA'), pI = $('pI'), fN = $('fN'), fC = $('fC');
-const bP = $('bP'), bN = $('bN');
-
-let frameCount = 1;
-let currentFrame = 0;
-
-// Update frame display
-function updateFrameDisplay() {
-  fN.textContent = `Frame ${currentFrame + 1} / ${frameCount}`;
-  bP.disabled = currentFrame === 0;
-  bN.disabled = currentFrame >= frameCount - 1;
-}
-
-// Load frame preview
-async function loadFrame(index) {
-  pA.innerHTML = '<div class="mini-sp"></div>';
-  pI.textContent = '';
-
-  try {
-    const result = await postJson('/api/preview', { frameIndex: index });
-    if (result.success && result.imageData) {
-      const img = document.createElement('img');
-      img.src = result.imageData;
-      img.alt = `Frame ${index + 1}`;
-      pA.innerHTML = '';
-      pA.appendChild(img);
-      pI.textContent = result.width && result.height ? `${result.width}x${result.height}` : '';
-    } else {
-      pA.innerHTML = '<span class="placeholder">' + (result.error || 'Preview failed') + '</span>';
-    }
-  } catch (e) {
-    pA.innerHTML = '<span class="placeholder">Preview error</span>';
-  }
-}
-
-// Navigation
-bP.onclick = () => {
-  if (currentFrame > 0) {
-    currentFrame--;
-    updateFrameDisplay();
-    loadFrame(currentFrame);
-  }
-};
-
-bN.onclick = () => {
-  if (currentFrame < frameCount - 1) {
-    currentFrame++;
-    updateFrameDisplay();
-    loadFrame(currentFrame);
-  }
-};
-
-// Load initial data
-fetchJson('/api/info').then(d => {
-  $('fn').textContent = d.fileName;
-  $('sz').textContent = d.width + 'x' + d.height;
-  frameCount = d.defaults?.frameCount || 1;
-  fC.textContent = frameCount;
-  updateFrameDisplay();
-  loadFrame(0);
-});
-
-// Apply
-async function apply() {
-  $('F').classList.add('hide');
-  $('L').classList.add('on');
-  $('G').classList.add('on');
-
-  try {
-    const result = await postJson('/api/process', {});
-    if (result.logs) {
-      result.logs.forEach(l => log('G', l.type[0], l.message));
-    }
-
-    $('L').classList.remove('on');
-    $('D').classList.add('on', result.success ? 'ok' : 'err');
-    $('dT').textContent = result.success ? 'Done' : 'Failed';
-    $('dM').textContent = result.success ? result.output : result.error;
-  } catch (e) {
-    log('G', 'e', e.message);
-    $('L').classList.remove('on');
-    $('D').classList.add('on', 'err');
-    $('dT').textContent = 'Error';
-    $('dM').textContent = e.message;
-  }
-}
-</script>
-</body>
-</html>