mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
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:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user