feat(erase-object): overhaul object eraser with LaMa inpainting improvements

Update erase-object pipeline, eraser canvas, and inpainting Python script.
Add LaMa model download script and update Dockerfile for model support.
Update multi-file tool routes for consistency.

apps/web/src/components/tools/erase-object-settings.tsx

@@ -6,6 +6,9 @@ import { generateId } from "@/lib/utils";
 import { useFileStore } from "@/stores/file-store";
 import type { EraserCanvasRef } from "./eraser-canvas";
 
+const OUTPUT_FORMATS = ["png", "jpg", "webp", "avif", "tiff", "gif", "heic", "heif"] as const;
+const LOSSY_FORMATS = ["jpg", "jpeg", "webp", "avif", "heic", "heif"];
+
 interface EraseObjectSettingsProps {
   eraserRef: React.RefObject<EraserCanvasRef | null>;
   hasStrokes: boolean;
@@ -29,6 +32,9 @@ export function EraseObjectSettings({
   const [elapsed, setElapsed] = useState(0);
   const elapsedRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
+  const [outputFormat, setOutputFormat] = useState("png");
+  const [quality, setQuality] = useState(95);
+
   const handleProcess = async () => {
     if (files.length === 0 || !eraserRef.current) return;
 
@@ -67,6 +73,8 @@ export function EraseObjectSettings({
     formData.append("file", files[0]);
     formData.append("mask", maskFile);
     formData.append("clientJobId", clientJobId);
+    formData.append("format", outputFormat);
+    formData.append("quality", String(quality));
 
     const xhr = new XMLHttpRequest();
     xhr.upload.onprogress = (e) => {
@@ -87,7 +95,7 @@ export function EraseObjectSettings({
           setDownloadUrl(data.downloadUrl);
           setOriginalSize(data.originalSize);
           setProcessedSize(data.processedSize);
-          setProcessedUrl(data.downloadUrl);
+          setProcessedUrl(data.downloadUrl, data.previewUrl);
           setSizes(data.originalSize, data.processedSize);
         } catch {
           setError("Invalid response");
@@ -166,10 +174,51 @@ export function EraseObjectSettings({
         </div>
       )}
 
+      {/* Output Format */}
+      <div>
+        <label htmlFor="eraser-format" className="text-xs text-muted-foreground">
+          Output Format
+        </label>
+        <select
+          id="eraser-format"
+          value={outputFormat}
+          onChange={(e) => setOutputFormat(e.target.value)}
+          className="w-full mt-1 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          {OUTPUT_FORMATS.map((f) => (
+            <option key={f} value={f}>
+              {f.toUpperCase()}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Quality (lossy formats only) */}
+      {LOSSY_FORMATS.includes(outputFormat) && (
+        <div>
+          <div className="flex justify-between items-center">
+            <label htmlFor="eraser-quality" className="text-xs text-muted-foreground">
+              Quality
+            </label>
+            <span className="text-xs font-mono text-foreground">{quality}</span>
+          </div>
+          <input
+            id="eraser-quality"
+            type="range"
+            min={1}
+            max={100}
+            step={1}
+            value={quality}
+            onChange={(e) => setQuality(Number(e.target.value))}
+            className="w-full mt-1"
+          />
+        </div>
+      )}
+
       {/* Hint */}
       {hasFile && !hasStrokes && (
         <p className="text-[10px] text-muted-foreground">
-          Paint over the objects you want to remove on the image.
+          Paint over the objects you want to remove. Use Ctrl+Z to undo.
         </p>
       )}
 

apps/web/src/components/tools/eraser-canvas.tsx

@@ -30,6 +30,9 @@ export const EraserCanvas = forwardRef<EraserCanvasRef, EraserCanvasProps>(funct
   const drawingRef = useRef(false);
   const currentPointsRef = useRef<Point[]>([]);
 
+  // Cursor position for brush preview
+  const [cursorPos, setCursorPos] = useState<Point | null>(null);
+
   // Measure and fit image to container
   const measure = useCallback(() => {
     const img = imgRef.current;
@@ -48,6 +51,7 @@ export const EraserCanvas = forwardRef<EraserCanvasRef, EraserCanvasProps>(funct
   }, []);
 
   // Reset strokes when image changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: imageSrc triggers intentional reset
   useEffect(() => {
     strokesRef.current = [];
     currentPointsRef.current = [];
@@ -55,19 +59,7 @@ export const EraserCanvas = forwardRef<EraserCanvasRef, EraserCanvasProps>(funct
     setCanvasSize(null);
   }, [imageSrc, onStrokeChange]);
 
-  // Redraw all strokes
-  const redraw = useCallback(() => {
-    const ctx = canvasRef.current?.getContext("2d");
-    if (!ctx || !canvasSize) return;
-
-    ctx.clearRect(0, 0, canvasSize.w, canvasSize.h);
-
-    for (const stroke of strokesRef.current) {
-      drawStroke(ctx, stroke);
-    }
-  }, [canvasSize]);
-
-  function drawStroke(ctx: CanvasRenderingContext2D, stroke: Stroke) {
+  const drawStroke = useCallback((ctx: CanvasRenderingContext2D, stroke: Stroke) => {
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
 
@@ -86,7 +78,33 @@ export const EraserCanvas = forwardRef<EraserCanvasRef, EraserCanvasProps>(funct
       }
       ctx.stroke();
     }
-  }
+  }, []);
+
+  // Redraw all strokes
+  const redraw = useCallback(() => {
+    const ctx = canvasRef.current?.getContext("2d");
+    if (!ctx || !canvasSize) return;
+
+    ctx.clearRect(0, 0, canvasSize.w, canvasSize.h);
+
+    for (const stroke of strokesRef.current) {
+      drawStroke(ctx, stroke);
+    }
+  }, [canvasSize, drawStroke]);
+
+  // Keyboard shortcut: Ctrl+Z for undo
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+        e.preventDefault();
+        strokesRef.current.pop();
+        onStrokeChange(strokesRef.current.length > 0);
+        redraw();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onStrokeChange, redraw]);
 
   // Get canvas-relative point from event
   const getPoint = useCallback((e: React.MouseEvent | React.TouchEvent): Point | null => {
@@ -121,9 +139,12 @@ export const EraserCanvas = forwardRef<EraserCanvasRef, EraserCanvasProps>(funct
 
   const handleMove = useCallback(
     (e: React.MouseEvent | React.TouchEvent) => {
+      // Update cursor position for brush preview
+      const pt = getPoint(e);
+      if (pt) setCursorPos(pt);
+
       if (!drawingRef.current) return;
       if ("touches" in e) e.preventDefault();
-      const pt = getPoint(e);
       if (!pt) return;
 
       currentPointsRef.current.push(pt);
@@ -159,6 +180,11 @@ export const EraserCanvas = forwardRef<EraserCanvasRef, EraserCanvasProps>(funct
     }
   }, [brushSize, onStrokeChange, redraw]);
 
+  const handleLeave = useCallback(() => {
+    setCursorPos(null);
+    handleUp();
+  }, [handleUp]);
+
   // Expose methods
   useImperativeHandle(
     ref,
@@ -252,15 +278,29 @@ export const EraserCanvas = forwardRef<EraserCanvasRef, EraserCanvasProps>(funct
             ref={canvasRef}
             width={canvasSize.w}
             height={canvasSize.h}
-            className="absolute inset-0 cursor-crosshair touch-none"
+            className="absolute inset-0 touch-none"
+            style={{ cursor: "none" }}
             onMouseDown={handleDown}
             onMouseMove={handleMove}
             onMouseUp={handleUp}
-            onMouseLeave={handleUp}
+            onMouseLeave={handleLeave}
             onTouchStart={handleDown}
             onTouchMove={handleMove}
             onTouchEnd={handleUp}
           />
+          {/* Brush cursor preview */}
+          {cursorPos && (
+            <div
+              className="pointer-events-none absolute rounded-full border-2 border-white/80"
+              style={{
+                width: brushSize,
+                height: brushSize,
+                left: cursorPos.x - brushSize / 2,
+                top: cursorPos.y - brushSize / 2,
+                boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
+              }}
+            />
+          )}
         </div>
       )}
     </div>