- {/* Error */}
{error &&
{error}
}
+ {warning &&
{warning}
}
+
{/* Size info */}
{originalSize != null && processedSize != null && (
diff --git a/apps/web/src/hooks/use-tool-processor.ts b/apps/web/src/hooks/use-tool-processor.ts
index 65dd7684..95e47d41 100644
--- a/apps/web/src/hooks/use-tool-processor.ts
+++ b/apps/web/src/hooks/use-tool-processor.ts
@@ -11,6 +11,7 @@ interface ProcessResult {
originalSize: number;
processedSize: number;
savedFileId?: string;
+ warning?: string;
}
export interface ToolProgress {
@@ -39,6 +40,7 @@ export function useToolProcessor(toolId: string) {
useFileStore();
const [progress, setProgress] = useState(IDLE_PROGRESS);
+ const [warning, setWarning] = useState(null);
const elapsedRef = useRef | null>(null);
const xhrRef = useRef(null);
const eventSourceRef = useRef(null);
@@ -69,6 +71,7 @@ export function useToolProcessor(toolId: string) {
const capturedIndex = useFileStore.getState().selectedIndex;
setError(null);
+ setWarning(null);
// Mark the target entry as processing and clear any old result
useFileStore.getState().updateEntry(capturedIndex, {
processedUrl: null,
@@ -216,6 +219,7 @@ export function useToolProcessor(toolId: string) {
if (xhr.status >= 200 && xhr.status < 300) {
try {
const result: ProcessResult = JSON.parse(xhr.responseText);
+ setWarning(result.warning ?? null);
// Write result to the entry that was being processed (captured at
// request time), not whatever entry happens to be selected now.
useFileStore.getState().updateEntry(capturedIndex, {
@@ -429,6 +433,7 @@ export function useToolProcessor(toolId: string) {
processAllFiles,
processing,
error,
+ warning,
downloadUrl: processedUrl,
originalSize,
processedSize,
diff --git a/packages/ai/src/face-detection.ts b/packages/ai/src/face-detection.ts
index c8641d8d..2e737422 100644
--- a/packages/ai/src/face-detection.ts
+++ b/packages/ai/src/face-detection.ts
@@ -1,6 +1,7 @@
import { readFile, unlink, writeFile } from "node:fs/promises";
import { tmpdir } from "node:os";
import { join } from "node:path";
+import sharp from "sharp";
import { type ProgressCallback, parseStdoutJson, runPythonWithProgress } from "./bridge.js";
export interface BlurFacesOptions {
@@ -39,7 +40,8 @@ export async function blurFaces(
const inputPath = join(outputDir, "input_faces.png");
const outputPath = join(outputDir, "output_faces.png");
- await writeFile(inputPath, inputBuffer);
+ const pngBuffer = await sharp(inputBuffer).png().toBuffer();
+ await writeFile(inputPath, pngBuffer);
const { stdout } = await runPythonWithProgress(
"detect_faces.py",
[inputPath, outputPath, JSON.stringify(options)],
@@ -67,7 +69,8 @@ export async function detectFaces(
const inputPath = join(tmpdir(), `detect_faces_${Date.now()}.png`);
try {
- await writeFile(inputPath, inputBuffer);
+ const pngBuffer = await sharp(inputBuffer).png().toBuffer();
+ await writeFile(inputPath, pngBuffer);
const { stdout } = await runPythonWithProgress(
"detect_faces.py",
[inputPath, "unused", JSON.stringify({ ...options, detectOnly: true })],
diff --git a/packages/ai/src/red-eye-removal.ts b/packages/ai/src/red-eye-removal.ts
index f1773248..4698a2c2 100644
--- a/packages/ai/src/red-eye-removal.ts
+++ b/packages/ai/src/red-eye-removal.ts
@@ -1,5 +1,6 @@
import { readFile, writeFile } from "node:fs/promises";
import { join } from "node:path";
+import sharp from "sharp";
import { type ProgressCallback, parseStdoutJson, runPythonWithProgress } from "./bridge.js";
export interface RedEyeRemovalOptions {
@@ -27,7 +28,8 @@ export async function removeRedEye(
const inputPath = join(outputDir, "input_redeye.png");
const outputPath = join(outputDir, "output_redeye.png");
- await writeFile(inputPath, inputBuffer);
+ const pngBuffer = await sharp(inputBuffer).png().toBuffer();
+ await writeFile(inputPath, pngBuffer);
const { stdout } = await runPythonWithProgress(
"red_eye_removal.py",
[inputPath, outputPath, JSON.stringify(options)],
diff --git a/tests/e2e-docker/blur-faces.spec.ts b/tests/e2e-docker/blur-faces.spec.ts
new file mode 100644
index 00000000..79949efa
--- /dev/null
+++ b/tests/e2e-docker/blur-faces.spec.ts
@@ -0,0 +1,65 @@
+import fs from "node:fs";
+import path from "node:path";
+import { expect, test } from "@playwright/test";
+
+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(1000);
+}
+
+test.describe("Blur Faces - HEIC fix and no-face warning", () => {
+ test("HEIC image processes without error", async ({ page }) => {
+ await page.goto("/blur-faces");
+ await uploadFile(page, fixturePath("test-portrait.heic"));
+
+ await page.getByTestId("blur-faces-submit").click();
+
+ // Wait for processing to complete — download button proves it worked
+ await expect(page.getByTestId("blur-faces-download")).toBeVisible({ timeout: 120_000 });
+
+ // The old bug showed "cannot identify image" or "Face blur failed"
+ await expect(page.locator("text=cannot identify image")).not.toBeVisible();
+ await expect(page.locator("text=Face blur failed")).not.toBeVisible();
+ });
+
+ test("no-face image shows warning message", async ({ page }) => {
+ await page.goto("/blur-faces");
+ await uploadFile(page, fixturePath("test-blank.png"));
+
+ await page.getByTestId("blur-faces-submit").click();
+
+ await expect(page.getByText("No faces detected")).toBeVisible({ timeout: 120_000 });
+ });
+
+ test("HEIC image via API returns 200", async ({ request }) => {
+ // Login to get auth token
+ const loginRes = await request.post("/api/auth/login", {
+ data: { username: "admin", password: "admin" },
+ });
+ const { token } = await loginRes.json();
+
+ const response = await request.post("/api/v1/tools/blur-faces", {
+ headers: { Authorization: `Bearer ${token}` },
+ multipart: {
+ file: {
+ name: "test.heic",
+ mimeType: "image/heic",
+ buffer: fs.readFileSync(fixturePath("test-portrait.heic")),
+ },
+ settings: JSON.stringify({ blurRadius: 30, sensitivity: 0.5 }),
+ },
+ });
+
+ expect(response.status()).toBe(200);
+ const body = await response.json();
+ expect(body.downloadUrl).toBeTruthy();
+ });
+});
diff --git a/tests/e2e/blur-faces.spec.ts b/tests/e2e/blur-faces.spec.ts
new file mode 100644
index 00000000..3714f7b4
--- /dev/null
+++ b/tests/e2e/blur-faces.spec.ts
@@ -0,0 +1,48 @@
+import path from "node:path";
+import { expect, 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(1000);
+}
+
+test.describe("Blur Faces tool", () => {
+ test("page loads with correct UI controls", async ({ loggedInPage: page }) => {
+ await page.goto("/blur-faces");
+
+ await expect(page.getByText("Blur Radius")).toBeVisible();
+ await expect(page.getByText("Detection Sensitivity")).toBeVisible();
+ await expect(page.getByTestId("blur-faces-submit")).toBeVisible();
+ });
+
+ test("HEIC image processes without error", async ({ loggedInPage: page }) => {
+ await page.goto("/blur-faces");
+ await uploadFile(page, fixturePath("test-portrait.heic"));
+
+ await page.getByTestId("blur-faces-submit").click();
+
+ // Should complete without the old "cannot identify image file" error
+ await expect(
+ page.getByTestId("blur-faces-download").or(page.getByText("No faces detected")),
+ ).toBeVisible({ timeout: 120_000 });
+
+ await expect(page.locator("text=cannot identify image")).not.toBeVisible();
+ });
+
+ test("no-face image shows warning message", async ({ loggedInPage: page }) => {
+ await page.goto("/blur-faces");
+ await uploadFile(page, fixturePath("test-blank.png"));
+
+ await page.getByTestId("blur-faces-submit").click();
+
+ await expect(page.getByText("No faces detected")).toBeVisible({ timeout: 120_000 });
+ });
+});