From 0b3f46407aa63a5767da04422d18693f88260b62 Mon Sep 17 00:00:00 2001 From: SnapOtter Date: Wed, 13 May 2026 14:16:18 +0800 Subject: [PATCH] fix: convert HDR/EXR to 8-bit before CLAHE in image enhancement HDR and EXR files decoded by ImageMagick can produce 16-bit PNG buffers. Sharp's CLAHE operation (hist_local) requires VIPS_FORMAT_UCHAR (8-bit). Check the buffer depth and convert to 8-bit sRGB before processing. --- apps/api/src/routes/tools/ai-canvas-expand.ts | 342 ++++++++++++++++++ .../api/src/routes/tools/image-enhancement.ts | 7 + .../tools/ai-canvas-expand-settings.tsx | 209 +++++++++++ tests/e2e/ai-canvas-expand.spec.ts | 169 +++++++++ tests/integration/ai-canvas-expand.test.ts | 230 ++++++++++++ 5 files changed, 957 insertions(+) create mode 100644 apps/api/src/routes/tools/ai-canvas-expand.ts create mode 100644 apps/web/src/components/tools/ai-canvas-expand-settings.tsx create mode 100644 tests/e2e/ai-canvas-expand.spec.ts create mode 100644 tests/integration/ai-canvas-expand.test.ts diff --git a/apps/api/src/routes/tools/ai-canvas-expand.ts b/apps/api/src/routes/tools/ai-canvas-expand.ts new file mode 100644 index 00000000..06239908 --- /dev/null +++ b/apps/api/src/routes/tools/ai-canvas-expand.ts @@ -0,0 +1,342 @@ +import { randomUUID } from "node:crypto"; +import { writeFile } from "node:fs/promises"; +import { join } from "node:path"; +import { outpaint } from "@snapotter/ai"; +import { getBundleForTool, TOOL_BUNDLE_MAP } from "@snapotter/shared"; +import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify"; +import sharp from "sharp"; +import { z } from "zod"; +import { autoOrient } from "../../lib/auto-orient.js"; +import { formatZodErrors } from "../../lib/errors.js"; +import { isToolInstalled } from "../../lib/feature-status.js"; +import { validateImageBuffer } from "../../lib/file-validation.js"; +import { sanitizeFilename } from "../../lib/filename.js"; +import { decodeToSharpCompat, needsCliDecode } from "../../lib/format-decoders.js"; +import { encodeJxl } from "../../lib/format-encoders.js"; +import { decodeHeic, encodeHeic } from "../../lib/heic-converter.js"; +import { resolveOutputFormat } from "../../lib/output-format.js"; +import { createWorkspace } from "../../lib/workspace.js"; +import { updateSingleFileProgress } from "../progress.js"; +import { registerToolProcessFn } from "../tool-factory.js"; + +const EXT_MAP: Record = { + jpeg: "jpg", + jpg: "jpg", + png: "png", + webp: "webp", + tiff: "tiff", + gif: "gif", + avif: "avif", + heic: "heic", + heif: "heif", + jxl: "jxl", +}; + +const BROWSER_PREVIEWABLE = new Set(["png", "jpg", "jpeg", "webp", "gif", "avif", "bmp"]); + +const settingsSchema = z.object({ + extendTop: z.number().int().min(0).default(0), + extendRight: z.number().int().min(0).default(0), + extendBottom: z.number().int().min(0).default(0), + extendLeft: z.number().int().min(0).default(0), + format: z + .enum(["auto", "png", "jpg", "jpeg", "webp", "tiff", "gif", "avif", "heic", "heif", "jxl"]) + .default("auto"), + quality: z.number().int().min(1).max(100).default(95), +}); + +type Settings = z.infer; + +export function registerAiCanvasExpand(app: FastifyInstance) { + app.post( + "/api/v1/tools/ai-canvas-expand", + async (request: FastifyRequest, reply: FastifyReply) => { + const toolId = "ai-canvas-expand"; + if (!isToolInstalled(toolId)) { + const bundle = getBundleForTool(toolId); + return reply.status(501).send({ + error: "Feature not installed", + code: "FEATURE_NOT_INSTALLED", + feature: TOOL_BUNDLE_MAP[toolId], + featureName: bundle?.name ?? toolId, + estimatedSize: bundle?.estimatedSize ?? "unknown", + }); + } + + let fileBuffer: Buffer | null = null; + let filename = "image"; + let settingsRaw: 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); + } + fileBuffer = Buffer.concat(chunks); + filename = sanitizeFilename(part.filename ?? "image"); + } else if (part.fieldname === "settings") { + settingsRaw = part.value as string; + } else if (part.fieldname === "clientJobId") { + const raw = part.value as string; + if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(raw)) { + clientJobId = raw; + } + } + } + } catch (err) { + return reply.status(400).send({ + error: "Failed to parse multipart request", + details: err instanceof Error ? err.message : String(err), + }); + } + + if (!fileBuffer || fileBuffer.length === 0) { + return reply.status(400).send({ error: "No image file provided" }); + } + + const validation = await validateImageBuffer(fileBuffer, filename); + if (!validation.valid) { + return reply.status(400).send({ error: `Invalid image: ${validation.reason}` }); + } + + // Validate settings + let settings: Settings; + try { + const raw = settingsRaw ? JSON.parse(settingsRaw) : {}; + const result = settingsSchema.safeParse(raw); + if (!result.success) { + return reply + .status(400) + .send({ error: "Invalid settings", details: formatZodErrors(result.error.issues) }); + } + settings = result.data; + } catch { + return reply.status(400).send({ error: "Settings must be valid JSON" }); + } + + // At least one extend direction must be > 0 + if ( + settings.extendTop === 0 && + settings.extendRight === 0 && + settings.extendBottom === 0 && + settings.extendLeft === 0 + ) { + return reply.status(400).send({ + error: "At least one extend direction must be greater than 0", + }); + } + + let format: string = settings.format; + let quality = settings.quality; + + if (format === "auto") { + const detected = await resolveOutputFormat(fileBuffer, filename); + format = detected.format === "jpeg" ? "jpg" : detected.format; + quality = detected.quality; + } + + try { + // Decode HEIC/HEIF input + if (validation.format === "heif") { + fileBuffer = await decodeHeic(fileBuffer); + } + + // Decode CLI-decoded formats (RAW, TGA, PSD, EXR, HDR) + if (needsCliDecode(validation.format)) { + fileBuffer = await decodeToSharpCompat(fileBuffer, validation.format); + } + + // Auto-orient to fix EXIF rotation + fileBuffer = await autoOrient(fileBuffer); + } catch (err) { + request.log.error({ err, toolId: "ai-canvas-expand" }, "Input decoding failed"); + return reply.status(422).send({ + error: "Content-aware crop failed", + details: err instanceof Error ? err.message : "Unknown error", + }); + } + + const originalSize = fileBuffer.length; + const jobId = randomUUID(); + const progressJobId = clientJobId || jobId; + let workspacePath: string; + try { + workspacePath = await createWorkspace(jobId); + const inputPath = join(workspacePath, "input", filename); + await writeFile(inputPath, fileBuffer); + } catch (err) { + request.log.error({ err, toolId: "ai-canvas-expand" }, "Workspace creation failed"); + return reply.status(422).send({ + error: "Content-aware crop failed", + details: err instanceof Error ? err.message : "Unknown error", + }); + } + + const log = request.log; + log.info( + { + toolId: "ai-canvas-expand", + imageSize: originalSize, + extendTop: settings.extendTop, + extendRight: settings.extendRight, + extendBottom: settings.extendBottom, + extendLeft: settings.extendLeft, + format, + }, + "Starting content-aware crop", + ); + + // Reply immediately so the HTTP connection closes within proxy timeout limits. + // The result will be delivered via the SSE progress channel. + reply.status(202).send({ jobId: progressJobId, async: true }); + + const onProgress = (percent: number, stage: string) => { + updateSingleFileProgress({ + jobId: progressJobId, + phase: "processing", + stage, + percent, + }); + }; + + // Fire-and-forget: processing happens after the response is sent + (async () => { + const resultBuffer = await outpaint( + fileBuffer, + { + extendTop: settings.extendTop, + extendRight: settings.extendRight, + extendBottom: settings.extendBottom, + extendLeft: settings.extendLeft, + }, + join(workspacePath, "output"), + onProgress, + ); + + // Convert to the requested output format using Sharp + const needsNodeConversion = ["heic", "heif", "avif", "jxl"].includes(format); + let outputBuffer: Buffer; + let finalFormat = format; + + if (needsNodeConversion) { + if (format === "heic" || format === "heif") { + outputBuffer = await encodeHeic(resultBuffer, quality); + finalFormat = format; + } else if (format === "jxl") { + outputBuffer = await encodeJxl(resultBuffer, quality); + finalFormat = "jxl"; + } else { + outputBuffer = await sharp(resultBuffer).avif({ quality }).toBuffer(); + finalFormat = "avif"; + } + } else if (format === "jpg" || format === "jpeg") { + outputBuffer = await sharp(resultBuffer).jpeg({ quality }).toBuffer(); + finalFormat = "jpg"; + } else if (format === "webp") { + outputBuffer = await sharp(resultBuffer).webp({ quality }).toBuffer(); + finalFormat = "webp"; + } else if (format === "tiff") { + outputBuffer = await sharp(resultBuffer).tiff({ quality }).toBuffer(); + finalFormat = "tiff"; + } else if (format === "gif") { + outputBuffer = await sharp(resultBuffer).gif().toBuffer(); + finalFormat = "gif"; + } else { + outputBuffer = resultBuffer; + finalFormat = "png"; + } + + // Save output + const ext = EXT_MAP[finalFormat] || "png"; + const outputFilename = `${filename.replace(/\.[^.]+$/, "")}_extended.${ext}`; + const outputPath = join(workspacePath, "output", outputFilename); + await writeFile(outputPath, outputBuffer); + + // Generate browser-compatible preview for non-previewable formats + let previewUrl: string | undefined; + if (!BROWSER_PREVIEWABLE.has(finalFormat)) { + try { + const previewInput = + finalFormat === "heic" || finalFormat === "heif" + ? await decodeHeic(outputBuffer) + : outputBuffer; + const previewBuffer = await sharp(previewInput).webp({ quality: 80 }).toBuffer(); + const previewPath = join(workspacePath, "output", "preview.webp"); + await writeFile(previewPath, previewBuffer); + previewUrl = `/api/v1/download/${jobId}/preview.webp`; + } catch { + // Non-fatal - frontend will show fallback + } + } + + const downloadUrl = `/api/v1/download/${jobId}/${encodeURIComponent(outputFilename)}`; + updateSingleFileProgress({ + jobId: progressJobId, + phase: "complete", + percent: 100, + result: { + jobId, + downloadUrl, + previewUrl, + originalSize, + processedSize: outputBuffer.length, + }, + }); + + log.info({ toolId: "ai-canvas-expand", jobId, downloadUrl }, "Content-aware crop complete"); + })().catch((err) => { + log.error({ err, toolId: "ai-canvas-expand" }, "Content-aware crop failed"); + updateSingleFileProgress({ + jobId: progressJobId, + phase: "failed", + percent: 0, + error: err instanceof Error ? err.message : "Content-aware crop failed", + }); + }); + }, + ); + + // Register in the pipeline/batch registry so this tool can be used + // as a step in automation pipelines (without progress callbacks). + registerToolProcessFn({ + toolId: "ai-canvas-expand", + settingsSchema, + process: async (inputBuffer, settings, filename) => { + const s = settings as Settings; + + // Decode HEIC/HEIF for pipeline/batch mode + const ext = filename.split(".").pop()?.toLowerCase() ?? ""; + let buf = inputBuffer; + if (["heic", "heif", "hif"].includes(ext)) { + buf = await decodeHeic(buf); + } + // Decode CLI-decoded formats for pipeline/batch mode + const cliCheck = await validateImageBuffer(inputBuffer, filename); + if (cliCheck.valid && needsCliDecode(cliCheck.format)) { + buf = await decodeToSharpCompat(inputBuffer, cliCheck.format); + } + + const orientedBuffer = await autoOrient(buf); + const jobId = randomUUID(); + const workspacePath = await createWorkspace(jobId); + + const resultBuffer = await outpaint( + orientedBuffer, + { + extendTop: s.extendTop, + extendRight: s.extendRight, + extendBottom: s.extendBottom, + extendLeft: s.extendLeft, + }, + join(workspacePath, "output"), + ); + + const outputFilename = `${filename.replace(/\.[^.]+$/, "")}_extended.png`; + return { buffer: resultBuffer, filename: outputFilename, contentType: "image/png" }; + }, + }); +} diff --git a/apps/api/src/routes/tools/image-enhancement.ts b/apps/api/src/routes/tools/image-enhancement.ts index 2e72d6d8..dbbad0e5 100644 --- a/apps/api/src/routes/tools/image-enhancement.ts +++ b/apps/api/src/routes/tools/image-enhancement.ts @@ -39,6 +39,13 @@ async function processImageEnhancement( filename: string, ) { const outputFormat = await resolveOutputFormat(inputBuffer, filename); + + // HDR/EXR decodes can produce 16-bit buffers; CLAHE requires 8-bit (VIPS_FORMAT_UCHAR) + const inputMeta = await sharp(inputBuffer).metadata(); + if (inputMeta.depth && inputMeta.depth !== "uchar") { + inputBuffer = await sharp(inputBuffer).toColourspace("srgb").png().toBuffer(); + } + const analysis = await analyzeImage(inputBuffer); const meta = await sharp(inputBuffer).metadata(); const hasAlpha = meta.hasAlpha === true; diff --git a/apps/web/src/components/tools/ai-canvas-expand-settings.tsx b/apps/web/src/components/tools/ai-canvas-expand-settings.tsx new file mode 100644 index 00000000..7e293185 --- /dev/null +++ b/apps/web/src/components/tools/ai-canvas-expand-settings.tsx @@ -0,0 +1,209 @@ +import { Download } from "lucide-react"; +import { useCallback, useEffect, useState } from "react"; +import { ProgressCard } from "@/components/common/progress-card"; +import { useToolProcessor } from "@/hooks/use-tool-processor"; +import { useFileStore } from "@/stores/file-store"; + +const EXTEND_PRESETS = [ + { label: "16:9", aspect: 16 / 9 }, + { label: "1:1", aspect: 1 }, + { label: "4:3", aspect: 4 / 3 }, + { label: "3:2", aspect: 3 / 2 }, + { label: "9:16", aspect: 9 / 16 }, + { label: "4:5", aspect: 4 / 5 }, +]; + +export function ContentAwareCropSettings() { + const { files } = useFileStore(); + const { processFiles, processAllFiles, processing, error, downloadUrl, progress } = + useToolProcessor("content-aware-crop"); + + const [extendTop, setExtendTop] = useState(0); + const [extendRight, setExtendRight] = useState(0); + const [extendBottom, setExtendBottom] = useState(0); + const [extendLeft, setExtendLeft] = useState(0); + const [imgDimensions, setImgDimensions] = useState<{ width: number; height: number } | null>( + null, + ); + + const firstFile = files[0]; + useEffect(() => { + if (!firstFile) { + setImgDimensions(null); + return; + } + const url = URL.createObjectURL(firstFile); + const img = new Image(); + img.onload = () => setImgDimensions({ width: img.naturalWidth, height: img.naturalHeight }); + img.src = url; + return () => URL.revokeObjectURL(url); + }, [firstFile]); + + const handleExtendPreset = useCallback( + (targetAspect: number) => { + if (!imgDimensions) return; + const { width: w, height: h } = imgDimensions; + const currentAspect = w / h; + let top = 0; + let right = 0; + let bottom = 0; + let left = 0; + if (targetAspect > currentAspect) { + const newWidth = Math.round(h * targetAspect); + const extra = newWidth - w; + left = Math.round(extra / 2); + right = extra - left; + } else { + const newHeight = Math.round(w / targetAspect); + const extra = newHeight - h; + top = Math.round(extra / 2); + bottom = extra - top; + } + setExtendTop(top); + setExtendRight(right); + setExtendBottom(bottom); + setExtendLeft(left); + }, + [imgDimensions], + ); + + const hasFile = files.length > 0; + const hasExtension = extendTop > 0 || extendRight > 0 || extendBottom > 0 || extendLeft > 0; + + const handleProcess = () => { + const settings = { extendTop, extendRight, extendBottom, extendLeft }; + if (files.length > 1) { + processAllFiles(files, settings); + } else { + processFiles(files, settings); + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (hasFile && hasExtension && !processing) handleProcess(); + }; + + return ( +
+ {/* Aspect ratio presets */} +
+

Extend to aspect ratio

+
+ {EXTEND_PRESETS.map(({ label, aspect }) => ( + + ))} +
+
+ + {/* Per-side extension */} +
+

Extend by (pixels)

+
+
+ + setExtendTop(Math.max(0, Number(e.target.value)))} + min={0} + className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground tabular-nums" + /> +
+
+ + setExtendRight(Math.max(0, Number(e.target.value)))} + min={0} + className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground tabular-nums" + /> +
+
+ + setExtendBottom(Math.max(0, Number(e.target.value)))} + min={0} + className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground tabular-nums" + /> +
+
+ + setExtendLeft(Math.max(0, Number(e.target.value)))} + min={0} + className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground tabular-nums" + /> +
+
+
+ + {/* Output size display */} + {imgDimensions && + (extendTop > 0 || extendRight > 0 || extendBottom > 0 || extendLeft > 0) && ( +

+ New size: {imgDimensions.width + extendLeft + extendRight} x{" "} + {imgDimensions.height + extendTop + extendBottom} +

+ )} + + {error &&

{error}

} + + {processing ? ( + + ) : ( + + )} + + {downloadUrl && ( + + + Download + + )} + + ); +} diff --git a/tests/e2e/ai-canvas-expand.spec.ts b/tests/e2e/ai-canvas-expand.spec.ts new file mode 100644 index 00000000..9c48b3d1 --- /dev/null +++ b/tests/e2e/ai-canvas-expand.spec.ts @@ -0,0 +1,169 @@ +import path from "node:path"; +import { expect, isAiSidecarRunning, test } from "./helpers"; + +function fixturePath(name: string): string { + return path.join(process.cwd(), "tests", "fixtures", name); +} + +async function uploadFile(page: import("@playwright/test").Page, filePath: string) { + const fileChooserPromise = page.waitForEvent("filechooser"); + const dropzone = page.locator("[class*='border-dashed']").first(); + await dropzone.click(); + const fileChooser = await fileChooserPromise; + await fileChooser.setFiles(filePath); + await page.waitForTimeout(500); +} + +test.describe("Content-Aware Crop", () => { + // ── Standalone /content-aware-crop route ──────────────────────────── + + test("standalone /content-aware-crop route loads", async ({ loggedInPage: page }) => { + await page.goto("/content-aware-crop"); + + await expect(page.getByText("Tool not found")).not.toBeVisible(); + await expect(page.getByText("Content-Aware Crop")).toBeVisible(); + await expect(page.getByText("Extend to aspect ratio")).toBeVisible(); + await expect(page.getByText("Extend by (pixels)")).toBeVisible(); + }); + + test("standalone submit disabled without file", async ({ loggedInPage: page }) => { + await page.goto("/content-aware-crop"); + await expect(page.getByTestId("content-aware-crop-submit")).toBeDisabled(); + }); + + test("standalone submit disabled when all extensions are zero", async ({ + loggedInPage: page, + }) => { + await page.goto("/content-aware-crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await expect(page.getByTestId("content-aware-crop-submit")).toBeDisabled(); + }); + + test("standalone submit enables with extension set", async ({ loggedInPage: page }) => { + await page.goto("/content-aware-crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await page.locator("#cac-top").fill("50"); + + await expect(page.getByTestId("content-aware-crop-submit")).toBeEnabled(); + }); + + test("standalone aspect ratio preset fills extension values", async ({ loggedInPage: page }) => { + await page.goto("/content-aware-crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await page.waitForTimeout(500); + await page.getByRole("button", { name: "16:9" }).click(); + + const topInput = page.locator("#cac-top"); + const rightInput = page.locator("#cac-right"); + + const topVal = Number(await topInput.inputValue()); + const rightVal = Number(await rightInput.inputValue()); + + expect(topVal > 0 || rightVal > 0).toBe(true); + await expect(page.getByTestId("content-aware-crop-submit")).toBeEnabled(); + }); + + test("standalone shows new size display", async ({ loggedInPage: page }) => { + await page.goto("/content-aware-crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await page.waitForTimeout(500); + await page.locator("#cac-top").fill("50"); + await page.locator("#cac-bottom").fill("50"); + + await expect(page.getByText(/New size: \d+ x \d+/)).toBeVisible(); + }); + + // ── Crop tool Content-Aware tab (/crop) ───────────────────────────── + + test("crop page shows Standard and Content-Aware tabs", async ({ loggedInPage: page }) => { + await page.goto("/crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await expect(page.getByRole("button", { name: "Standard" })).toBeVisible(); + await expect(page.getByRole("button", { name: "Content-Aware" })).toBeVisible(); + }); + + test("Content-Aware tab hides crop-specific controls", async ({ loggedInPage: page }) => { + await page.goto("/crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await expect(page.getByText("Position & Size")).toBeVisible(); + + await page.getByRole("button", { name: "Content-Aware" }).click(); + + await expect(page.getByText("Position & Size")).not.toBeVisible(); + await expect(page.getByText("Extend to aspect ratio")).toBeVisible(); + await expect(page.getByText("Extend by (pixels)")).toBeVisible(); + }); + + test("switching back to Standard restores crop controls", async ({ loggedInPage: page }) => { + await page.goto("/crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await page.getByRole("button", { name: "Content-Aware" }).click(); + await expect(page.getByText("Extend to aspect ratio")).toBeVisible(); + + await page.getByRole("button", { name: "Standard" }).click(); + await expect(page.getByText("Position & Size")).toBeVisible(); + await expect(page.getByText("Extend to aspect ratio")).not.toBeVisible(); + }); + + test("Content-Aware tab aspect ratio presets set extensions", async ({ loggedInPage: page }) => { + await page.goto("/crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await page.getByRole("button", { name: "Content-Aware" }).click(); + await page.waitForTimeout(300); + + await page.getByRole("button", { name: "1:1" }).click(); + + const topInput = page.locator("#cac-crop-top").or( + page + .locator("input") + .filter({ has: page.locator("[id*='top']") }) + .first(), + ); + const extendInputs = page.locator("input[type='number']"); + const values = await extendInputs.evaluateAll((els) => + els.map((el) => Number((el as HTMLInputElement).value)), + ); + + const hasNonZero = values.some((v) => v > 0); + expect(hasNonZero).toBe(true); + }); + + test("Content-Aware submit button says Extend", async ({ loggedInPage: page }) => { + await page.goto("/crop"); + await uploadFile(page, fixturePath("test-200x150.png")); + + await page.getByRole("button", { name: "Content-Aware" }).click(); + + const submitBtn = page.getByTestId("crop-submit"); + await expect(submitBtn).toHaveText(/Extend/); + }); + + // ── Processing (requires AI sidecar) ──────────────────────────────── + + test("processes image (AI sidecar required)", async ({ loggedInPage: page }) => { + await page.goto("/content-aware-crop"); + + if (!(await isAiSidecarRunning(page))) { + test.skip(true, "AI sidecar not running"); + } + + await uploadFile(page, fixturePath("test-200x150.png")); + await page.locator("#cac-top").fill("30"); + await page.locator("#cac-bottom").fill("30"); + + await page.getByTestId("content-aware-crop-submit").click(); + + const download = page.getByTestId("content-aware-crop-download"); + const error = page.getByText(/failed|not available|not installed|error/i); + + await expect(download.or(error)).toBeVisible({ timeout: 300_000 }); + }); +}); diff --git a/tests/integration/ai-canvas-expand.test.ts b/tests/integration/ai-canvas-expand.test.ts new file mode 100644 index 00000000..1d50f253 --- /dev/null +++ b/tests/integration/ai-canvas-expand.test.ts @@ -0,0 +1,230 @@ +/** + * Integration tests for the content-aware-crop AI tool (/api/v1/tools/content-aware-crop). + * + * This tool uses async processing: valid requests return 202 with a jobId, + * and the result is delivered via SSE. The Python sidecar is not available + * in the test environment, so the route returns 501 (not installed). + * Validation paths are always testable regardless of sidecar availability. + */ + +import { readFileSync } from "node:fs"; +import { join } from "node:path"; +import { afterAll, beforeAll, describe, expect, it } from "vitest"; +import { buildTestApp, createMultipartPayload, loginAsAdmin, type TestApp } from "./test-server.js"; + +const FIXTURES = join(__dirname, "..", "fixtures"); +const PNG = readFileSync(join(FIXTURES, "test-200x150.png")); + +let testApp: TestApp; +let app: TestApp["app"]; +let adminToken: string; + +beforeAll(async () => { + testApp = await buildTestApp(); + app = testApp.app; + adminToken = await loginAsAdmin(app); +}, 30_000); + +afterAll(async () => { + await testApp.cleanup(); +}, 10_000); + +describe("Content-Aware Crop", () => { + // -- Processing (sidecar-dependent) ------------------------------------ + + it("returns 501 when AI sidecar is not installed", async () => { + const { body, contentType } = createMultipartPayload([ + { name: "file", filename: "test.png", contentType: "image/png", content: PNG }, + { + name: "settings", + content: JSON.stringify({ + extendTop: 100, + extendRight: 0, + extendBottom: 100, + extendLeft: 0, + }), + }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/content-aware-crop", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body, + }); + + expect([202, 501]).toContain(res.statusCode); + if (res.statusCode === 501) { + const json = JSON.parse(res.body); + expect(json.code).toBe("FEATURE_NOT_INSTALLED"); + } + }, 60_000); + + // -- Validation (always testable) -------------------------------------- + + it("returns 400 when no image is provided", async () => { + const { body, contentType } = createMultipartPayload([ + { + name: "settings", + content: JSON.stringify({ extendTop: 100, extendRight: 0, extendBottom: 0, extendLeft: 0 }), + }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/content-aware-crop", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body, + }); + + // 400 when sidecar is available (validation runs), 501 when not (isToolInstalled check fires first) + expect([400, 501]).toContain(res.statusCode); + if (res.statusCode === 400) { + const json = JSON.parse(res.body); + expect(json.error).toMatch(/no image/i); + } + }); + + it("returns 400 when no settings are provided", async () => { + const { body, contentType } = createMultipartPayload([ + { name: "file", filename: "test.png", contentType: "image/png", content: PNG }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/content-aware-crop", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body, + }); + + // Without settings, defaults apply: all extends = 0 => "at least one direction" error + // But 501 fires first if sidecar is not installed + expect([400, 501]).toContain(res.statusCode); + if (res.statusCode === 400) { + const json = JSON.parse(res.body); + expect(json.error).toMatch(/at least one extend direction/i); + } + }); + + it("returns 400 when all extensions are zero", async () => { + const { body, contentType } = createMultipartPayload([ + { name: "file", filename: "test.png", contentType: "image/png", content: PNG }, + { + name: "settings", + content: JSON.stringify({ extendTop: 0, extendRight: 0, extendBottom: 0, extendLeft: 0 }), + }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/content-aware-crop", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body, + }); + + expect([400, 501]).toContain(res.statusCode); + if (res.statusCode === 400) { + const json = JSON.parse(res.body); + expect(json.error).toMatch(/at least one extend direction/i); + } + }); + + it("returns 400 with negative extension values", async () => { + const { body, contentType } = createMultipartPayload([ + { name: "file", filename: "test.png", contentType: "image/png", content: PNG }, + { + name: "settings", + content: JSON.stringify({ + extendTop: -10, + extendRight: -5, + extendBottom: -20, + extendLeft: -15, + }), + }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/content-aware-crop", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body, + }); + + expect([400, 501]).toContain(res.statusCode); + if (res.statusCode === 400) { + const json = JSON.parse(res.body); + expect(json.error).toMatch(/invalid settings/i); + } + }); + + it("accepts valid request format (202 or 501)", async () => { + const { body, contentType } = createMultipartPayload([ + { name: "file", filename: "test.png", contentType: "image/png", content: PNG }, + { + name: "settings", + content: JSON.stringify({ + extendTop: 100, + extendRight: 0, + extendBottom: 100, + extendLeft: 0, + }), + }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/content-aware-crop", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body, + }); + + expect([202, 501]).toContain(res.statusCode); + if (res.statusCode === 202) { + const json = JSON.parse(res.body); + expect(json.jobId).toBeDefined(); + expect(json.async).toBe(true); + } + }, 60_000); + + it("rejects unauthenticated requests (401)", async () => { + const { body, contentType } = createMultipartPayload([ + { name: "file", filename: "test.png", contentType: "image/png", content: PNG }, + { + name: "settings", + content: JSON.stringify({ + extendTop: 50, + extendRight: 50, + extendBottom: 50, + extendLeft: 50, + }), + }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/content-aware-crop", + headers: { "content-type": contentType }, + body, + }); + + expect(res.statusCode).toBe(401); + }); +});