feat: add Phase 4 AI tools with Python bridge and 6 new tools

Add Python bridge (packages/ai/src/bridge.ts) that calls Python scripts via child_process with venv-first fallback to system python3. Implements 6 AI-powered tools: - Remove Background: rembg-based with U2-Net/IS-Net models - Image Upscaling: Real-ESRGAN with Lanczos fallback - OCR/Text Extraction: Tesseract + PaddleOCR engines - Face/PII Blur: MediaPipe face detection with configurable blur - Object Eraser: LaMa inpainting with mask-based input - Smart Crop: Sharp attention-based entropy cropping (no Python needed) Each tool includes: Python script, TypeScript wrapper, API route, and React settings component. All Python scripts handle ImportError gracefully with clear installation messages.
2026-08-03 07:46:42 +02:00 · 2026-03-22 04:31:49 +08:00
parent a8cc611eb2
commit 5524939b6f
30 changed files with 1880 additions and 2 deletions
@@ -0,0 +1,125 @@
+import { useState } from "react";
+import { useFileStore } from "@/stores/file-store";
+import { Download, Loader2, Upload } from "lucide-react";
+
+function getToken(): string {
+  return localStorage.getItem("stirling-token") || "";
+}
+
+export function EraseObjectSettings() {
+  const { files, processing, error, setProcessing, setError } = useFileStore();
+
+  const [maskFile, setMaskFile] = useState<File | null>(null);
+  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+  const [originalSize, setOriginalSize] = useState<number | null>(null);
+  const [processedSize, setProcessedSize] = useState<number | null>(null);
+
+  const handleMaskSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = e.target.files?.[0];
+    if (selected) setMaskFile(selected);
+  };
+
+  const handleProcess = async () => {
+    if (files.length === 0 || !maskFile) return;
+
+    setProcessing(true);
+    setError(null);
+    setDownloadUrl(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", files[0]);
+      formData.append("mask", maskFile);
+
+      const res = await fetch("/api/v1/tools/erase-object", {
+        method: "POST",
+        headers: { Authorization: `Bearer ${getToken()}` },
+        body: formData,
+      });
+
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error || body.details || `Failed: ${res.status}`);
+      }
+
+      const data = await res.json();
+      setDownloadUrl(data.downloadUrl);
+      setOriginalSize(data.originalSize);
+      setProcessedSize(data.processedSize);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Object erasing failed");
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const hasFile = files.length > 0;
+
+  return (
+    <div className="space-y-4">
+      {/* Mask upload */}
+      <div>
+        <label className="text-sm font-medium text-muted-foreground">Mask Image</label>
+        <p className="text-[10px] text-muted-foreground mt-0.5 mb-1.5">
+          Upload a black &amp; white mask where white areas will be erased. Create the mask in any image editor.
+        </p>
+        <label className="flex items-center gap-2 px-3 py-2 rounded border border-dashed border-border cursor-pointer hover:border-primary">
+          <Upload className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">
+            {maskFile ? maskFile.name : "Select mask image..."}
+          </span>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleMaskSelect}
+            className="hidden"
+          />
+        </label>
+      </div>
+
+      {/* Info */}
+      <div className="p-2 rounded bg-muted text-[10px] text-muted-foreground space-y-1">
+        <p>How to create a mask:</p>
+        <ol className="list-decimal list-inside space-y-0.5">
+          <li>Open your image in any editor</li>
+          <li>Paint white over areas to erase</li>
+          <li>Keep the rest black</li>
+          <li>Export as PNG and upload here</li>
+        </ol>
+      </div>
+
+      {/* Error */}
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {/* Size info */}
+      {originalSize != null && processedSize != null && (
+        <div className="text-xs text-muted-foreground space-y-0.5">
+          <p>Original: {(originalSize / 1024).toFixed(1)} KB</p>
+          <p>Processed: {(processedSize / 1024).toFixed(1)} KB</p>
+        </div>
+      )}
+
+      {/* Process button */}
+      <button
+        onClick={handleProcess}
+        disabled={!hasFile || !maskFile || 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"
+      >
+        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
+        {processing ? "Erasing..." : "Erase Object"}
+      </button>
+
+      {/* Download */}
+      {downloadUrl && (
+        <a
+          href={downloadUrl}
+          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>
+      )}
+    </div>
+  );
+}