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.
This commit is contained in:
Siddharth Kumar Sah
2026-03-22 04:31:49 +08:00
parent a8cc611eb2
commit 5524939b6f
30 changed files with 1880 additions and 2 deletions
@@ -0,0 +1,104 @@
import { useState } from "react";
import { useFileStore } from "@/stores/file-store";
import { useToolProcessor } from "@/hooks/use-tool-processor";
import { Download, Loader2 } from "lucide-react";
export function BlurFacesSettings() {
const { files } = useFileStore();
const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
useToolProcessor("blur-faces");
const [blurRadius, setBlurRadius] = useState(30);
const [sensitivity, setSensitivity] = useState(50);
const handleProcess = () => {
processFiles(files, {
blurRadius,
sensitivity: sensitivity / 100,
});
};
const hasFile = files.length > 0;
return (
<div className="space-y-4">
{/* Blur radius */}
<div>
<div className="flex justify-between items-center">
<label className="text-xs text-muted-foreground">Blur Radius</label>
<span className="text-xs font-mono text-foreground">{blurRadius}</span>
</div>
<input
type="range"
min={5}
max={80}
value={blurRadius}
onChange={(e) => setBlurRadius(Number(e.target.value))}
className="w-full mt-1"
/>
<div className="flex justify-between text-[10px] text-muted-foreground mt-0.5">
<span>Light</span>
<span>Heavy</span>
</div>
</div>
{/* Sensitivity */}
<div>
<div className="flex justify-between items-center">
<label className="text-xs text-muted-foreground">Detection Sensitivity</label>
<span className="text-xs font-mono text-foreground">{sensitivity}%</span>
</div>
<input
type="range"
min={10}
max={90}
value={sensitivity}
onChange={(e) => setSensitivity(Number(e.target.value))}
className="w-full mt-1"
/>
<div className="flex justify-between text-[10px] text-muted-foreground mt-0.5">
<span>More faces</span>
<span>Fewer false positives</span>
</div>
</div>
{/* Info */}
<p className="text-[10px] text-muted-foreground">
Uses MediaPipe for face detection. Automatically detects and blurs all faces in the image.
</p>
{/* 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 || 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 ? "Detecting Faces..." : "Blur Faces"}
</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>
);
}