feat: add Deep Enhance toggle to image enhancement UI

Toggle sends deepEnhance: true in settings to enable AI-powered
noise/artifact cleanup via SCUNet after the Sharp pipeline.
This commit is contained in:
SnapOtter
2026-05-09 11:31:36 +08:00
parent 40522ebe1a
commit ee871dc8ea
2 changed files with 40 additions and 3 deletions
@@ -6,6 +6,7 @@ import {
Sparkles, Sparkles,
User, User,
UtensilsCrossed, UtensilsCrossed,
Wand2,
X, X,
} from "lucide-react"; } from "lucide-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
@@ -156,6 +157,7 @@ export function ImageEnhancementControls({
sharpness: true, sharpness: true,
denoise: true, denoise: true,
}); });
const [deepEnhance, setDeepEnhance] = useState(false);
const analyzeAbortRef = useRef<AbortController | null>(null); const analyzeAbortRef = useRef<AbortController | null>(null);
const onChangeRef = useRef(onChange); const onChangeRef = useRef(onChange);
@@ -200,8 +202,8 @@ export function ImageEnhancementControls({
// Emit settings when mode/intensity/toggles change // Emit settings when mode/intensity/toggles change
useEffect(() => { useEffect(() => {
onChangeRef.current?.({ mode, intensity, corrections: toggles }); onChangeRef.current?.({ mode, intensity, corrections: toggles, deepEnhance });
}, [mode, intensity, toggles]); }, [mode, intensity, toggles, deepEnhance]);
// CSS filter preview // CSS filter preview
useEffect(() => { useEffect(() => {
@@ -319,6 +321,32 @@ export function ImageEnhancementControls({
/> />
</div> </div>
{/* Deep Enhance toggle */}
<div className="flex items-center justify-between py-1">
<div className="flex items-center gap-2">
<Wand2 className="h-3.5 w-3.5 text-muted-foreground" />
<div>
<p className="text-xs font-medium">Deep Enhance (AI)</p>
<p className="text-[10px] text-muted-foreground">
Removes noise and artifacts using AI
</p>
</div>
</div>
<button
type="button"
onClick={() => setDeepEnhance(!deepEnhance)}
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
deepEnhance ? "bg-primary" : "bg-muted"
}`}
>
<span
className={`inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform ${
deepEnhance ? "translate-x-4.5" : "translate-x-0.5"
}`}
/>
</button>
</div>
{/* Analysis badges */} {/* Analysis badges */}
{analyzing && ( {analyzing && (
<div className="flex items-center gap-2 text-xs text-muted-foreground py-1"> <div className="flex items-center gap-2 text-xs text-muted-foreground py-1">
@@ -454,7 +482,11 @@ export function ImageEnhancementSettings({
disabled={!hasFile || processing} 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" 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"
> >
{files.length > 1 ? `Enhance (${files.length} files)` : "Enhance"} {files.length > 1
? `${settings.deepEnhance ? "Deep Enhance" : "Enhance"} (${files.length} files)`
: settings.deepEnhance
? "Deep Enhance"
: "Enhance"}
</button> </button>
)} )}
+5
View File
@@ -194,6 +194,11 @@ export const en = {
}, },
pipeline: { name: "Pipeline Builder", description: "Chain multiple tools into a workflow" }, pipeline: { name: "Pipeline Builder", description: "Chain multiple tools into a workflow" },
}, },
imageEnhancement: {
deepEnhance: "Deep Enhance (AI)",
deepEnhanceDescription: "Removes noise and artifacts using AI",
deepEnhanceRequires: "Requires Upscale & Enhance bundle",
},
settings: { settings: {
title: "Settings", title: "Settings",
general: "General", general: "General",