feat(web): migrate AI tool settings to ProgressCard

Replace AIProgressBar and inline progress indicators with the new
ProgressCard component across all 5 AI tool settings. The three
useToolProcessor-based tools (remove-bg, blur-faces, upscale) now
destructure `progress` from the hook. The two custom-fetch tools
(erase-object, ocr) gain inline XHR upload tracking + SSE processing
progress with elapsed timer.
This commit is contained in:
Siddharth Kumar Sah
2026-03-23 01:46:05 +08:00
parent 5c64b306ea
commit dbd3bf737e
5 changed files with 250 additions and 176 deletions
@@ -1,11 +1,12 @@
import { useState } from "react";
import { useFileStore } from "@/stores/file-store";
import { useToolProcessor } from "@/hooks/use-tool-processor";
import { Download, Loader2 } from "lucide-react";
import { ProgressCard } from "@/components/common/progress-card";
import { Download } from "lucide-react";
export function BlurFacesSettings() {
const { files } = useFileStore();
const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
useToolProcessor("blur-faces");
const [blurRadius, setBlurRadius] = useState(30);
@@ -79,25 +80,23 @@ export function BlurFacesSettings() {
)}
{/* 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>
{/* Progress indicator */}
{processing && (
<div className="space-y-2">
<div className="w-full bg-muted rounded-full h-2 overflow-hidden">
<div className="h-full bg-primary rounded-full animate-pulse" style={{ width: '100%' }} />
</div>
<p className="text-xs text-muted-foreground text-center">
AI processing may take 10-30 seconds...
</p>
</div>
{processing ? (
<ProgressCard
active={processing}
phase={progress.phase === "idle" ? "uploading" : progress.phase}
label="Blurring faces"
stage={progress.stage}
percent={progress.percent}
elapsed={progress.elapsed}
/>
) : (
<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"
>
Blur Faces
</button>
)}
{/* Download */}