feat: SOTA overhaul of automate pipeline page (#53)

* feat(find-duplicates): upgrade to 128-bit dHash with metadata and thumbnails * feat(find-duplicates): add custom-results display mode and duplicate store * feat(find-duplicates): add results overview grid and detail comparison view * feat(find-duplicates): overhaul settings with sensitivity presets and download actions * feat(find-duplicates): update i18n description * chore: replace jsqr with zxing-wasm for barcode reading * feat(barcode-read): rewrite backend with zxing-wasm for all barcode types * feat(barcode-read): rewrite frontend with multi-file, results table, progress, export - Multi-file sequential processing with per-file progress - Structured results table with type badges and copy per-result - Copy All and Export CSV functionality - Thorough scan toggle (maps to tryHarder in zxing-wasm) - Before/after view shows annotated image with bounding boxes - Updated tool description in constants and i18n * feat(stitch): update tool name and description for redesign * feat(stitch): add grid layout, alignment, border, radius, quality, and new resize modes * feat(stitch): redesign settings UI with grid, alignment, border, radius, quality * test(stitch): add stitch to e2e tool navigation suite * feat(vectorize): redesign with dual-engine backend and preset-driven UI - Backend: potrace for B&W, VTracer (@neplex/vectorizer) for full-color vectorization - Frontend: 5 presets (logo, illustration, photo, sketch, custom) - Settings: color precision, gradient step, detail, smoothing, corner threshold, invert - Updated OpenAPI spec and i18n description * feat(border): redesign with presets, shadow, padding color, swatches - Add 8 one-click presets (Clean White, Gallery Black, Shadow, Rounded, Polaroid, Vintage, Minimal, Cinematic) - Implement proper shadow rendering with blur, offset X/Y, color, opacity - Add padding color control (was hardcoded white) - Add color swatches for quick color selection - Wrap in form for Enter key submission - Add smart validation (requires at least one effect active) - Align frontend/backend slider ranges - Organize UI with sections and collapsible shadow toggle * feat(split): overhaul image splitting with live grid overlay and tile preview - Add interactive-split display mode with SplitCanvas component - Live SVG grid overlay on uploaded image showing split boundaries - Two split modes: Grid (NxM) and Tile Size (px dimensions) - 9 grid presets (2x1, 1x2, 2x2, 3x1, 1x3, 3x3, 2x3, 3x2, 4x4) - Output format selection (original/PNG/JPG/WebP) with quality slider - Post-split tile preview thumbnails with individual download - Download All as ZIP button - HEIC/HEIF preview with loading spinner - Backend: tile-size mode, output format conversion, quality control - Zustand store for split state management * feat(split): rewrite backend and frontend settings Backend: tile-size mode, output format conversion, quality control. Frontend: split modes, presets, format selector, tile preview grid. * feat(border): add live CSS preview and remove before/after slider - Add imageWrapperStyle prop to ImageViewer for live border preview - Add onImageStyle callback through tool-page to settings components - Change border displayMode to no-comparison (no slider) - BorderControls sends live CSS styles (border, padding, radius, shadow) - Preview updates instantly as user adjusts sliders or clicks presets * fix: repair i18n file corrupted by formatter during merge conflict resolution * feat(border): enable live CSS preview in right pane as settings change * fix(border): keep CSS preview visible after processing for WYSIWYG consistency * chore: add @dnd-kit/core and @dnd-kit/sortable for pipeline drag-and-drop * feat(pipeline): add Zustand store for pipeline step management * feat(automate): add pipeline step settings summary utility with tests * feat(automate): add POST /api/v1/pipeline/batch for multi-file pipeline execution * feat(automate): add usePipelineProcessor hook for single and batch pipeline execution * fix(automate): pass settings prop to all pipeline step controls for state restoration * feat(automate): rewrite pipeline builder with dnd-kit drag-and-drop and compact step cards * feat(automate): rewrite page with two-panel layout, image preview, and batch support * test(automate): update e2e tests for new two-panel pipeline layout --------- Co-authored-by: Siddharth Kumar Sah <siddharth123sk@gmail.com>
2026-08-03 07:46:42 +02:00 · 2026-04-13 16:26:38 +08:00
parent a1e11dff74
commit fb33a46a64
28 changed files with 1935 additions and 714 deletions
@@ -9,9 +9,12 @@
 import { randomUUID } from "node:crypto";
 import { writeFile } from "node:fs/promises";
 import { join } from "node:path";
+import archiver from "archiver";
 import { eq } from "drizzle-orm";
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
+import PQueue from "p-queue";
 import { z } from "zod";
+import { env } from "../config.js";
 import { db, schema } from "../db/index.js";
 import { autoOrient } from "../lib/auto-orient.js";
 import { validateImageBuffer } from "../lib/file-validation.js";
@@ -19,6 +22,7 @@ import { sanitizeFilename } from "../lib/filename.js";
 import { decodeHeic } from "../lib/heic-converter.js";
 import { createWorkspace } from "../lib/workspace.js";
 import { requireAuth } from "../plugins/auth.js";
+import { type JobProgress, updateJobProgress } from "./progress.js";
 import { getRegisteredToolIds, getToolConfig } from "./tool-factory.js";

 /** Schema for a single pipeline step. */
@@ -339,5 +343,272 @@ export async function registerPipelineRoutes(app: FastifyInstance): Promise<void
    return reply.send({ toolIds: getRegisteredToolIds() });
  });

+  /**
+   * POST /api/v1/pipeline/batch
+   *
+   * Accepts multipart with multiple files + a "pipeline" JSON field.
+   * Runs the full pipeline on each file with concurrency control via p-queue.
+   * Returns a ZIP containing all processed results.
+   */
+  app.post("/api/v1/pipeline/batch", async (request: FastifyRequest, reply: FastifyReply) => {
+    // ── Parse multipart ──────────────────────────────────────────────
+    interface ParsedFile {
+      buffer: Buffer;
+      filename: string;
+    }
+
+    const files: ParsedFile[] = [];
+    let pipelineRaw: string | null = null;
+    let clientJobId: string | null = null;
+
+    try {
+      const parts = request.parts();
+      for await (const part of parts) {
+        if (part.type === "file") {
+          const chunks: Buffer[] = [];
+          for await (const chunk of part.file) {
+            chunks.push(chunk);
+          }
+          const buffer = Buffer.concat(chunks);
+          if (buffer.length > 0) {
+            files.push({
+              buffer,
+              filename: sanitizeFilename(part.filename ?? "image"),
+            });
+          }
+        } else if (part.fieldname === "pipeline") {
+          pipelineRaw = part.value as string;
+        } else if (part.fieldname === "clientJobId") {
+          clientJobId = part.value as string;
+        }
+      }
+    } catch (err) {
+      return reply.status(400).send({
+        error: "Failed to parse multipart request",
+        details: err instanceof Error ? err.message : String(err),
+      });
+    }
+
+    if (files.length === 0) {
+      return reply.status(400).send({ error: "No image files provided" });
+    }
+
+    // Enforce batch size limit
+    if (files.length > env.MAX_BATCH_SIZE) {
+      return reply.status(400).send({
+        error: `Too many files. Maximum batch size is ${env.MAX_BATCH_SIZE}`,
+      });
+    }
+
+    // ── Parse and validate pipeline definition ───────────────────────
+    if (!pipelineRaw) {
+      return reply.status(400).send({ error: "No pipeline definition provided" });
+    }
+
+    let pipeline: z.infer<typeof pipelineDefinitionSchema>;
+    try {
+      const parsed = JSON.parse(pipelineRaw);
+      const result = pipelineDefinitionSchema.safeParse(parsed);
+      if (!result.success) {
+        return reply.status(400).send({
+          error: "Invalid pipeline definition",
+          details: result.error.issues.map((i) => ({
+            path: i.path.join("."),
+            message: i.message,
+          })),
+        });
+      }
+      pipeline = result.data;
+    } catch {
+      return reply.status(400).send({ error: "Pipeline must be valid JSON" });
+    }
+
+    // Validate all tool IDs exist and settings are valid before processing
+    for (let i = 0; i < pipeline.steps.length; i++) {
+      const step = pipeline.steps[i];
+      const toolConfig = getToolConfig(step.toolId);
+      if (!toolConfig) {
+        return reply.status(400).send({
+          error: `Step ${i + 1}: Tool "${step.toolId}" not found`,
+        });
+      }
+
+      const settingsResult = toolConfig.settingsSchema.safeParse(step.settings);
+      if (!settingsResult.success) {
+        return reply.status(400).send({
+          error: `Step ${i + 1} (${step.toolId}): Invalid settings`,
+          details: settingsResult.error.issues.map(
+            (iss: { path: (string | number)[]; message: string }) => ({
+              path: iss.path.join("."),
+              message: iss.message,
+            }),
+          ),
+        });
+      }
+    }
+
+    // ── Progress tracking ────────────────────────────────────────────
+    const jobId = clientJobId || randomUUID();
+
+    const progress: JobProgress = {
+      jobId,
+      status: "processing",
+      totalFiles: files.length,
+      completedFiles: 0,
+      failedFiles: 0,
+      errors: [],
+    };
+    updateJobProgress({ ...progress });
+
+    // ── Process files through the pipeline with concurrency control ──
+    const queue = new PQueue({ concurrency: env.CONCURRENT_JOBS });
+
+    const results: ({ buffer: Buffer; filename: string } | null)[] = new Array(files.length).fill(
+      null,
+    );
+
+    try {
+      const tasks = files.map((file, index) =>
+        queue.add(async () => {
+          progress.currentFile = file.filename;
+          updateJobProgress({ ...progress });
+
+          // Validate the image
+          const validation = await validateImageBuffer(file.buffer);
+          if (!validation.valid) {
+            progress.failedFiles++;
+            progress.errors.push({
+              filename: file.filename,
+              error: `Invalid image: ${validation.reason}`,
+            });
+            progress.completedFiles++;
+            updateJobProgress({ ...progress });
+            return;
+          }
+
+          try {
+            let currentBuffer = file.buffer;
+            let currentFilename = file.filename;
+
+            // Decode HEIC/HEIF if needed
+            if (validation.format === "heif") {
+              currentBuffer = await decodeHeic(currentBuffer);
+              const ext = currentFilename.match(/\.[^.]+$/)?.[0];
+              if (ext) currentFilename = currentFilename.slice(0, -ext.length) + ".png";
+            }
+
+            // Normalize EXIF orientation
+            currentBuffer = await autoOrient(currentBuffer);
+
+            // Run through all pipeline steps sequentially
+            for (let i = 0; i < pipeline.steps.length; i++) {
+              const step = pipeline.steps[i];
+              const toolConfig = getToolConfig(step.toolId);
+              if (!toolConfig) {
+                throw new Error(`Step ${i + 1}: Tool "${step.toolId}" not found`);
+              }
+
+              const settings = toolConfig.settingsSchema.parse(step.settings);
+              const result = await toolConfig.process(currentBuffer, settings, currentFilename);
+
+              currentBuffer = result.buffer;
+              currentFilename = result.filename;
+            }
+
+            results[index] = { buffer: currentBuffer, filename: currentFilename };
+
+            progress.completedFiles++;
+            updateJobProgress({ ...progress });
+          } catch (err) {
+            progress.failedFiles++;
+            progress.errors.push({
+              filename: file.filename,
+              error: err instanceof Error ? err.message : "Pipeline processing failed",
+            });
+            progress.completedFiles++;
+            updateJobProgress({ ...progress });
+          }
+        }),
+      );
+
+      await Promise.all(tasks);
+    } catch (err) {
+      request.log.error({ err }, "Unexpected error in pipeline batch queue");
+    }
+
+    // ── Finalize progress ────────────────────────────────────────────
+    progress.status = progress.failedFiles === progress.totalFiles ? "failed" : "completed";
+    progress.currentFile = undefined;
+    updateJobProgress({ ...progress });
+
+    // ── Deduplicate output filenames ─────────────────────────────────
+    const usedNames = new Set<string>();
+    function getUniqueName(name: string): string {
+      if (!usedNames.has(name)) {
+        usedNames.add(name);
+        return name;
+      }
+      const dotIdx = name.lastIndexOf(".");
+      const base = dotIdx > 0 ? name.slice(0, dotIdx) : name;
+      const ext = dotIdx > 0 ? name.slice(dotIdx) : "";
+      let counter = 1;
+      let candidate = `${base}_${counter}${ext}`;
+      while (usedNames.has(candidate)) {
+        counter++;
+        candidate = `${base}_${counter}${ext}`;
+      }
+      usedNames.add(candidate);
+      return candidate;
+    }
+
+    const fileResultsMap: Record<string, string> = {};
+    for (let i = 0; i < results.length; i++) {
+      const entry = results[i];
+      if (entry) {
+        const uniqueName = getUniqueName(entry.filename);
+        entry.filename = uniqueName;
+        fileResultsMap[String(i)] = uniqueName;
+      }
+    }
+
+    // If every file failed, return an error instead of an empty ZIP
+    if (progress.status === "failed") {
+      return reply.status(422).send({
+        error: "All files failed processing",
+        errors: progress.errors,
+      });
+    }
+
+    // ── Stream ZIP response ──────────────────────────────────────────
+    reply.hijack();
+    reply.raw.writeHead(200, {
+      "Content-Type": "application/zip",
+      "Content-Disposition": `attachment; filename="pipeline-batch-${jobId.slice(0, 8)}.zip"`,
+      "Transfer-Encoding": "chunked",
+      "X-Job-Id": jobId,
+      "X-File-Results": JSON.stringify(fileResultsMap),
+    });
+
+    const archive = archiver("zip", { zlib: { level: 5 } });
+
+    archive.on("error", (err) => {
+      request.log.error({ err }, "Archiver error during pipeline batch processing");
+      if (!reply.raw.writableEnded) {
+        reply.raw.end();
+      }
+    });
+
+    archive.pipe(reply.raw);
+
+    // Append results in original upload order
+    for (const result of results) {
+      if (result) {
+        archive.append(result.buffer, { name: result.filename });
+      }
+    }
+
+    await archive.finalize();
+  });
+
  app.log.info("Pipeline routes registered");
 }