mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
refactor: remove content-aware-crop tool
Remove the content-aware-crop tool entirely -- API route, frontend settings component, e2e and integration tests, and all registry entries.
This commit is contained in:
SnapOtter
@@ -1,349 +0,0 @@
|
||||
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<string, string> = {
|
||||
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<typeof settingsSchema>;
|
||||
|
||||
/**
|
||||
* Content-aware crop (outpainting) route.
|
||||
* Extends image borders using AI-powered outpainting via LaMa.
|
||||
*/
|
||||
export function registerContentAwareCrop(app: FastifyInstance) {
|
||||
app.post(
|
||||
"/api/v1/tools/content-aware-crop",
|
||||
async (request: FastifyRequest, reply: FastifyReply) => {
|
||||
const toolId = "content-aware-crop";
|
||||
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: "content-aware-crop" }, "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: "content-aware-crop" }, "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: "content-aware-crop",
|
||||
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: "content-aware-crop", jobId, downloadUrl },
|
||||
"Content-aware crop complete",
|
||||
);
|
||||
})().catch((err) => {
|
||||
log.error({ err, toolId: "content-aware-crop" }, "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: "content-aware-crop",
|
||||
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" };
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { TOOLS } from "@snapotter/shared";
|
||||
import { eq } from "drizzle-orm";
|
||||
import type { FastifyInstance } from "fastify";
|
||||
import { db, schema } from "../../db/index.js";
|
||||
import { registerAiCanvasExpand } from "./ai-canvas-expand.js";
|
||||
import { registerBarcodeRead } from "./barcode-read.js";
|
||||
import { registerBeautify } from "./beautify.js";
|
||||
import { registerBlurFaces } from "./blur-faces.js";
|
||||
@@ -15,7 +16,6 @@ import { registerColorize } from "./colorize.js";
|
||||
import { registerCompare } from "./compare.js";
|
||||
import { registerCompose } from "./compose.js";
|
||||
import { registerCompress } from "./compress.js";
|
||||
import { registerContentAwareCrop } from "./content-aware-crop.js";
|
||||
import { registerContentAwareResize } from "./content-aware-resize.js";
|
||||
import { registerConvert } from "./convert.js";
|
||||
import { registerCrop } from "./crop.js";
|
||||
@@ -148,7 +148,7 @@ export async function registerToolRoutes(app: FastifyInstance): Promise<void> {
|
||||
{ id: "smart-crop", register: registerSmartCrop },
|
||||
{ id: "image-enhancement", register: registerImageEnhancement },
|
||||
{ id: "content-aware-resize", register: registerContentAwareResize },
|
||||
{ id: "content-aware-crop", register: registerContentAwareCrop },
|
||||
{ id: "ai-canvas-expand", register: registerAiCanvasExpand },
|
||||
{ id: "colorize", register: registerColorize },
|
||||
{ id: "enhance-faces", register: registerEnhanceFaces },
|
||||
{ id: "noise-removal", register: registerNoiseRemoval },
|
||||
|
||||
@@ -12,11 +12,10 @@ export function ImageEditIcon(props: SVGProps<SVGSVGElement>) {
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<path d="M12 20H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7" />
|
||||
<circle cx="9" cy="9" r="2" />
|
||||
<path d="m3 16 4-4 3 3 4-4" />
|
||||
<path d="M17 22l-2.5-2.5L20 14l2.5 2.5z" />
|
||||
<path d="m22 16.5-2.5-2.5" />
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
<path d="M7 17C7 12 12 7 17 7" />
|
||||
<circle cx="7" cy="17" r="1.5" />
|
||||
<circle cx="17" cy="7" r="1.5" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,209 +0,0 @@
|
||||
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 (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Aspect ratio presets */}
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-1">Extend to aspect ratio</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{EXTEND_PRESETS.map(({ label, aspect }) => (
|
||||
<button
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={() => handleExtendPreset(aspect)}
|
||||
className="px-2 py-1.5 rounded text-xs bg-muted text-muted-foreground hover:bg-primary/20 hover:text-foreground transition-colors"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Per-side extension */}
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-1">Extend by (pixels)</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label htmlFor="cac-top" className="text-[10px] text-muted-foreground">
|
||||
Top
|
||||
</label>
|
||||
<input
|
||||
id="cac-top"
|
||||
type="number"
|
||||
value={extendTop}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cac-right" className="text-[10px] text-muted-foreground">
|
||||
Right
|
||||
</label>
|
||||
<input
|
||||
id="cac-right"
|
||||
type="number"
|
||||
value={extendRight}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cac-bottom" className="text-[10px] text-muted-foreground">
|
||||
Bottom
|
||||
</label>
|
||||
<input
|
||||
id="cac-bottom"
|
||||
type="number"
|
||||
value={extendBottom}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cac-left" className="text-[10px] text-muted-foreground">
|
||||
Left
|
||||
</label>
|
||||
<input
|
||||
id="cac-left"
|
||||
type="number"
|
||||
value={extendLeft}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output size display */}
|
||||
{imgDimensions &&
|
||||
(extendTop > 0 || extendRight > 0 || extendBottom > 0 || extendLeft > 0) && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
New size: {imgDimensions.width + extendLeft + extendRight} x{" "}
|
||||
{imgDimensions.height + extendTop + extendBottom}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{error && <p className="text-xs text-red-500">{error}</p>}
|
||||
|
||||
{processing ? (
|
||||
<ProgressCard
|
||||
active={processing}
|
||||
phase={progress.phase === "idle" ? "uploading" : progress.phase}
|
||||
label="Extending canvas"
|
||||
stage={progress.stage}
|
||||
percent={progress.percent}
|
||||
elapsed={progress.elapsed}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="content-aware-crop-submit"
|
||||
disabled={!hasFile || !hasExtension || processing}
|
||||
className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{files.length > 1 ? `Extend (${files.length} files)` : "Extend Canvas"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download
|
||||
data-testid="content-aware-crop-download"
|
||||
className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Download
|
||||
</a>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -81,9 +81,9 @@ const ContentAwareResizeSettings = lazy(() =>
|
||||
default: m.ContentAwareResizeSettings,
|
||||
})),
|
||||
);
|
||||
const ContentAwareCropSettings = lazy(() =>
|
||||
import("@/components/tools/content-aware-crop-settings").then((m) => ({
|
||||
default: m.ContentAwareCropSettings,
|
||||
const AiCanvasExpandSettings = lazy(() =>
|
||||
import("@/components/tools/ai-canvas-expand-settings").then((m) => ({
|
||||
default: m.AiCanvasExpandSettings,
|
||||
})),
|
||||
);
|
||||
const CropSettings = lazy(() =>
|
||||
@@ -506,7 +506,7 @@ export const toolRegistry = new Map<string, ToolRegistryEntry>([
|
||||
["restore-photo", { displayMode: "before-after", Settings: RestorePhotoSettings }],
|
||||
["transparency-fixer", { displayMode: "before-after", Settings: TransparencyFixerSettings }],
|
||||
["content-aware-resize", { displayMode: "side-by-side", Settings: ContentAwareResizeSettings }],
|
||||
["content-aware-crop", { displayMode: "before-after", Settings: ContentAwareCropSettings }],
|
||||
["ai-canvas-expand", { displayMode: "before-after", Settings: AiCanvasExpandSettings }],
|
||||
]);
|
||||
|
||||
export function getToolRegistryEntry(toolId: string): ToolRegistryEntry | undefined {
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
"minSize": 0
|
||||
}
|
||||
],
|
||||
"enablesTools": ["erase-object", "colorize", "content-aware-crop"]
|
||||
"enablesTools": ["erase-object", "colorize", "ai-canvas-expand"]
|
||||
},
|
||||
"upscale-enhance": {
|
||||
"name": "Upscale & Enhance",
|
||||
|
||||
@@ -1,169 +0,0 @@
|
||||
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 });
|
||||
});
|
||||
});
|
||||
@@ -1,230 +0,0 @@
|
||||
/**
|
||||
* 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);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user