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