feat: overhaul remove-background with effects pipeline, consolidate color tools

Remove Background:
- Two-phase flow: AI removes bg once, then effects adjust instantly
- Blur background effect with real-time CSS preview (portrait mode)
- Drop shadow effect with opacity control
- Gradient backgrounds with presets, custom colors, and angle
- Custom background image upload (including HEIC/HEIF)
- Solid color backgrounds moved from Python to Node.js/Sharp
- Effects-only API endpoint for instant re-renders without AI re-run
- HEIC/HEIF input support (decoded before passing to Python/rembg)
- Passport/ID photo checkbox defaults ON for People subject
- Before/after slider preserved when no effects active
- 15 comprehensive Playwright e2e tests

Color Tools:
- Consolidated 4 tools (brightness-contrast, saturation, color-channels,
  color-effects) into single "Adjust Colors" tool
- Added exposure, temperature, tint, hue, sharpness controls
- SVG filter-based live preview for all adjustments
- Backward-compatible URL redirects from old tool paths

Other fixes:
- Favicon tool: download button instead of auto-download
- Batch processing: HEIC filename extension fix
- File store: processedFilename field for proper batch downloads
This commit is contained in:
Siddharth Kumar Sah
2026-04-12 17:53:16 +08:00
parent dde70f70ad
commit 6c58f12262
28 changed files with 2236 additions and 525 deletions
+5 -29
View File
@@ -97,36 +97,12 @@ export const TOOLS: Tool[] = [
},
// Adjustments
{
id: "brightness-contrast",
name: "Brightness & Contrast",
description: "Adjust brightness and contrast levels",
id: "adjust-colors",
name: "Adjust Colors",
description: "Brightness, contrast, exposure, saturation, temperature, sharpness, and effects",
category: "adjustments",
icon: "Sun",
route: "/brightness-contrast",
},
{
id: "saturation",
name: "Saturation & Exposure",
description: "Adjust color saturation and exposure",
category: "adjustments",
icon: "Palette",
route: "/saturation",
},
{
id: "color-channels",
name: "Color Channels",
description: "Adjust individual R, G, B channels",
category: "adjustments",
icon: "CircleDot",
route: "/color-channels",
},
{
id: "color-effects",
name: "Color Effects",
description: "Grayscale, Sepia, Invert, Tint",
category: "adjustments",
icon: "Paintbrush",
route: "/color-effects",
icon: "SlidersHorizontal",
route: "/adjust-colors",
},
{
id: "replace-color",
+4 -9
View File
@@ -44,16 +44,11 @@ export const en = {
"image-to-pdf": { name: "Image to PDF", description: "Combine images into a PDF document" },
"pdf-to-image": { name: "PDF to Image", description: "Convert PDF pages to images" },
favicon: { name: "Favicon Generator", description: "Generate all favicon and app icon sizes" },
"brightness-contrast": {
name: "Brightness & Contrast",
description: "Adjust brightness and contrast levels",
"adjust-colors": {
name: "Adjust Colors",
description:
"Brightness, contrast, exposure, saturation, temperature, sharpness, and effects",
},
saturation: {
name: "Saturation & Exposure",
description: "Adjust color saturation and exposure",
},
"color-channels": { name: "Color Channels", description: "Adjust individual R, G, B channels" },
"color-effects": { name: "Color Effects", description: "Grayscale, Sepia, Invert, Tint" },
"replace-color": {
name: "Replace & Invert Color",
description: "Replace specific colors or invert",