@mcptoolshop/style-dataset-lab 2.3.0 → 3.0.0

package/lib/batch-sheet-render.js

@@ -0,0 +1,206 @@
+/**
+ * Batch sheet renderer — assembles run outputs into reviewable HTML surfaces.
+ *
+ * Produces an HTML file with a CSS grid layout that references output images.
+ * Zero dependencies — works in any browser. Slot labels, seeds, and metadata
+ * are embedded for human review.
+ *
+ * Future: add PNG rendering via sharp if needed.
+ */
+
+import { writeFile } from 'node:fs/promises';
+import { join, relative } from 'node:path';
+import { existsSync } from 'node:fs';
+import { getRunsDir } from './paths.js';
+
+/**
+ * Resolve the image path for a slot result.
+ * Returns a relative path from the sheet directory to the output image.
+ */
+function resolveImagePath(projectRoot, result, batchDir) {
+  if (!result.selected_output || !result.run_id) return null;
+
+  const imagePath = join(getRunsDir(projectRoot), result.run_id, 'outputs', result.selected_output);
+  if (!existsSync(imagePath)) return null;
+
+  // Relative from sheets/ dir to the image
+  const sheetsDir = join(batchDir, 'sheets');
+  return relative(sheetsDir, imagePath).replace(/\\/g, '/');
+}
+
+/**
+ * Render a batch sheet as HTML.
+ *
+ * @param {Object} opts
+ * @param {Object} opts.manifest — batch manifest
+ * @param {Object} opts.mode — batch mode definition
+ * @param {string} opts.projectRoot
+ * @param {string} opts.batchDir
+ * @returns {string} HTML content
+ */
+export function renderSheetHTML({ manifest, mode, projectRoot, batchDir }) {
+  const assembly = mode.assembly || {};
+  const layout = assembly.layout || 'grid';
+  const columns = assembly.columns || computeColumns(manifest.slots.length);
+  const showSlotLabels = assembly.annotate_slots !== false;
+  const showSeed = assembly.show_seed || false;
+
+  const title = `${manifest.mode_id} — ${manifest.subject_id || manifest.theme || manifest.project_id}`;
+  const slots = manifest.slots || [];
+
+  // Build slot cells
+  const cells = slots.map(slot => {
+    const imgPath = resolveImagePath(projectRoot, slot, batchDir);
+    const hasImage = !!imgPath;
+
+    return {
+      slot_id: slot.slot_id,
+      label: slot.label,
+      run_id: slot.run_id,
+      selected_output: slot.selected_output,
+      imgPath,
+      hasImage,
+      seed: findSlotSeed(manifest, slot),
+    };
+  });
+
+  // Generate HTML
+  const css = generateCSS(layout, columns, cells.length);
+  const grid = cells.map((cell, i) => renderCell(cell, i, showSlotLabels, showSeed)).join('\n');
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>${escapeHtml(title)}</title>
+<style>${css}</style>
+</head>
+<body>
+<header>
+  <h1>${escapeHtml(title)}</h1>
+  <p class="meta">
+    Batch: ${escapeHtml(manifest.batch_id)} |
+    Mode: ${escapeHtml(manifest.mode_id)} |
+    Type: ${escapeHtml(mode.batch_type)} |
+    ${slots.length} slots |
+    ${manifest.created_at?.slice(0, 16) || '?'}
+  </p>
+</header>
+<div class="grid">${grid}
+</div>
+<footer>
+  <p>Generated by style-dataset-lab — ${manifest.created_at || ''}</p>
+</footer>
+</body>
+</html>`;
+}
+
+/**
+ * Compute optimal column count based on slot count.
+ */
+function computeColumns(slotCount) {
+  if (slotCount <= 3) return slotCount;
+  if (slotCount <= 4) return 2;
+  if (slotCount <= 6) return 3;
+  if (slotCount <= 9) return 3;
+  return 4;
+}
+
+/**
+ * Generate CSS for the layout.
+ */
+function generateCSS(layout, columns, slotCount) {
+  return `
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #1a1a1a; color: #e0e0e0;
+      padding: 24px;
+    }
+    header { margin-bottom: 24px; }
+    h1 { font-size: 1.4rem; font-weight: 600; }
+    .meta { font-size: 0.85rem; color: #888; margin-top: 4px; }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(${columns}, 1fr);
+      gap: 12px;
+    }
+    .cell {
+      background: #252525;
+      border: 1px solid #333;
+      border-radius: 6px;
+      overflow: hidden;
+      position: relative;
+    }
+    .cell img {
+      width: 100%; height: auto; display: block;
+    }
+    .cell .placeholder {
+      width: 100%; aspect-ratio: 1;
+      background: #2a2a2a;
+      display: flex; align-items: center; justify-content: center;
+      color: #555; font-size: 0.9rem;
+    }
+    .cell .label-bar {
+      padding: 6px 10px;
+      font-size: 0.8rem;
+      background: #2a2a2a;
+      border-top: 1px solid #333;
+    }
+    .cell .label-bar .slot-label { font-weight: 600; color: #ccc; }
+    .cell .label-bar .seed { color: #666; margin-left: 8px; }
+    footer {
+      margin-top: 24px;
+      font-size: 0.75rem; color: #555;
+      text-align: center;
+    }
+  `;
+}
+
+/**
+ * Render a single cell.
+ */
+function renderCell(cell, index, showLabel, showSeed) {
+  const imgTag = cell.hasImage
+    ? `<img src="${escapeHtml(cell.imgPath)}" alt="${escapeHtml(cell.label)}" loading="lazy">`
+    : `<div class="placeholder">${escapeHtml(cell.label)}<br><small>${cell.selected_output || 'no output'}</small></div>`;
+
+  const labelHtml = showLabel
+    ? `<div class="label-bar">
+        <span class="slot-label">${escapeHtml(cell.label)}</span>
+        ${showSeed && cell.seed != null ? `<span class="seed">seed: ${cell.seed}</span>` : ''}
+       </div>`
+    : '';
+
+  return `  <div class="cell">${imgTag}${labelHtml}</div>`;
+}
+
+/**
+ * Find the seed used for a slot's selected output.
+ */
+function findSlotSeed(manifest, slot) {
+  // Not always available — return null if not found
+  return null; // Could be enriched from run manifests later
+}
+
+/**
+ * Escape HTML entities.
+ */
+function escapeHtml(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * Save the sheet HTML to the batch sheets directory.
+ */
+export async function saveSheet(batchDir, filename, html) {
+  const sheetsDir = join(batchDir, 'sheets');
+  const sheetPath = join(sheetsDir, filename);
+  await writeFile(sheetPath, html);
+  return sheetPath;
+}