External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #48 from stirling-image/fix/upscale-bugs-and-features

Browse Source 
feat: overhaul upscale with bug fixes and advanced features
This commit is contained in:
stirling-image
2026-04-12 19:09:22 +08:00
committed by GitHub
parent d179021203 fe376aebd2
commit ed5f71e2fc
5 changed files with 412 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/tools/upscale-settings.tsx
+192 -14
View File
@@ -5,6 +5,12 @@ import { useToolProcessor } from "@/hooks/use-tool-processor";
import { useFileStore } from "@/stores/file-store";
const QUICK_SCALES = [2, 3, 4, 6, 8];
const MODEL_OPTIONS = [
{ value: "auto", label: "Auto" },
{ value: "realesrgan", label: "AI" },
{ value: "lanczos", label: "Fast" },
] as const;
const FORMAT_OPTIONS = ["png", "jpeg", "webp"] as const;
export interface UpscaleControlsProps {
onChange?: (settings: Record<string, unknown>) => void;
@@ -12,6 +18,11 @@ export interface UpscaleControlsProps {
export function UpscaleControls({ onChange }: UpscaleControlsProps) {
const [scale, setScale] = useState(2);
const [model, setModel] = useState<"auto" | "realesrgan" | "lanczos">("auto");
const [faceEnhance, setFaceEnhance] = useState(false);
const [denoise, setDenoise] = useState(0);
const [outputFormat, setOutputFormat] = useState<"png" | "jpeg" | "webp">("png");
const [quality, setQuality] = useState(95);
const onChangeRef = useRef(onChange);
useEffect(() => {
@@ -19,8 +30,15 @@ export function UpscaleControls({ onChange }: UpscaleControlsProps) {
});
useEffect(() => {
onChangeRef.current?.({ scale });
}, [scale]);
onChangeRef.current?.({
scale,
model,
faceEnhance,
denoise,
format: outputFormat,
quality,
});
}, [scale, model, faceEnhance, denoise, outputFormat, quality]);
return (
<div className="space-y-4">
@@ -56,21 +74,158 @@ export function UpscaleControls({ onChange }: UpscaleControlsProps) {
className="w-full mt-2"
/>
</div>
{/* Model */}
<div>
<p className="text-sm font-medium text-muted-foreground mb-1.5">Model</p>
<div className="flex gap-1">
{MODEL_OPTIONS.map(({ value, label }) => (
<button
key={value}
type="button"
onClick={() => setModel(value)}
className={`flex-1 text-xs py-1.5 rounded ${
model === value
? "bg-primary text-primary-foreground"
: "bg-muted text-muted-foreground"
}`}
>
{label}
</button>
))}
</div>
<p className="text-[11px] text-muted-foreground/70 mt-1">
{model === "auto" && "AI when available, falls back to fast resize"}
{model === "realesrgan" && "Real-ESRGAN neural network upscaling"}
{model === "lanczos" && "Fast Lanczos interpolation resize"}
</p>
</div>
{/* Face Enhancement */}
{model !== "lanczos" && (
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={faceEnhance}
onChange={(e) => setFaceEnhance(e.target.checked)}
className="rounded border-border"
/>
<span className="text-sm text-foreground">Enhance faces</span>
</label>
)}
{/* Denoise */}
<div>
<div className="flex justify-between items-center">
<p className="text-sm font-medium text-muted-foreground">Denoise</p>
<span className="text-sm font-mono font-medium">
{denoise === 0 ? "Off" : denoise.toFixed(1)}
</span>
</div>
<input
type="range"
min={0}
max={1}
step={0.1}
value={denoise}
onChange={(e) => setDenoise(Number(e.target.value))}
className="w-full mt-1"
/>
</div>
{/* Output Format */}
<div>
<p className="text-sm font-medium text-muted-foreground mb-1.5">Output Format</p>
<div className="flex gap-1">
{FORMAT_OPTIONS.map((fmt) => (
<button
key={fmt}
type="button"
onClick={() => setOutputFormat(fmt)}
className={`flex-1 text-xs py-1.5 rounded uppercase ${
outputFormat === fmt
? "bg-primary text-primary-foreground"
: "bg-muted text-muted-foreground"
}`}
>
{fmt}
</button>
))}
</div>
</div>
{/* Quality (JPEG/WebP only) */}
{outputFormat !== "png" && (
<div>
<div className="flex justify-between items-center">
<p className="text-sm font-medium text-muted-foreground">Quality</p>
<span className="text-sm font-mono font-medium">{quality}</span>
</div>
<input
type="range"
min={1}
max={100}
step={1}
value={quality}
onChange={(e) => setQuality(Number(e.target.value))}
className="w-full mt-1"
/>
</div>
)}
</div>
);
}
export function UpscaleSettings() {
const { files } = useFileStore();
const { files, entries } = useFileStore();
const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
useToolProcessor("upscale");
const [settings, setSettings] = useState<Record<string, unknown>>({});
// Queue mode for "Upscale All" - processes files sequentially
const queueRef = useRef(false);
const settingsRef = useRef(settings);
const prevProcessingRef = useRef(processing);
useEffect(() => {
settingsRef.current = settings;
});
// Auto-advance to next file when current one finishes
useEffect(() => {
if (prevProcessingRef.current && !processing && queueRef.current) {
const currentEntries = useFileStore.getState().entries;
const nextPending = currentEntries.findIndex((e) => e.status === "pending");
if (nextPending >= 0) {
useFileStore.getState().setSelectedIndex(nextPending);
setTimeout(() => processFiles(useFileStore.getState().files, settingsRef.current), 0);
} else {
queueRef.current = false;
}
}
prevProcessingRef.current = processing;
}, [processing, processFiles]);
const handleProcess = () => {
processFiles(files, settings);
};
const handleProcessAll = () => {
queueRef.current = true;
const currentEntries = useFileStore.getState().entries;
const firstPending = currentEntries.findIndex((e) => e.status === "pending");
if (firstPending >= 0) {
useFileStore.getState().setSelectedIndex(firstPending);
setTimeout(() => processFiles(useFileStore.getState().files, settings), 0);
}
};
const hasFile = files.length > 0;
const hasMultiple = files.length > 1;
const completedCount = entries.filter((e) => e.status === "completed").length;
const pendingCount = entries.filter((e) => e.status === "pending").length;
const allDone = entries.length > 0 && pendingCount === 0;
const isQueueActive = queueRef.current && processing;
return (
<div className="space-y-4">
@@ -79,6 +234,13 @@ export function UpscaleSettings() {
{/* Error */}
{error && <p className="text-xs text-red-500">{error}</p>}
{/* Multi-file progress summary */}
{hasMultiple && completedCount > 0 && (
<div className="text-xs text-muted-foreground bg-muted/50 rounded-lg px-3 py-2">
{completedCount} of {entries.length} images upscaled
</div>
)}
{/* Size info */}
{originalSize != null && processedSize != null && (
<div className="text-xs text-muted-foreground space-y-0.5">
@@ -87,25 +249,41 @@ export function UpscaleSettings() {
</div>
)}
{/* Process button */}
{/* Process buttons / progress */}
{processing ? (
<ProgressCard
active={processing}
phase={progress.phase === "idle" ? "uploading" : progress.phase}
label="Upscaling image"
label={
isQueueActive
? `Upscaling ${completedCount + 1} of ${entries.length}`
: "Upscaling image"
}
percent={progress.percent}
elapsed={progress.elapsed}
/>
) : (
<button
type="button"
data-testid="upscale-submit"
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"
>
{`Upscale ${(settings.scale as number) ?? 2}x`}
</button>
<div className="space-y-2">
<button
type="button"
data-testid="upscale-submit"
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"
>
{`Upscale ${(settings.scale as number) ?? 2}x`}
</button>
{hasMultiple && !allDone && (
<button
type="button"
onClick={handleProcessAll}
disabled={processing}
className="w-full py-2 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5 disabled:opacity-50"
>
Upscale All ({pendingCount} remaining)
</button>
)}
</div>
)}
{/* Download */}
apps/web/src/hooks/use-tool-processor.ts
+45 -29
View File
@@ -35,18 +35,8 @@ const AI_PYTHON_TOOLS = new Set<string>(PYTHON_SIDECAR_TOOLS);
const MEDIUM_TOOLS = new Set(["content-aware-resize", "convert"]);
export function useToolProcessor(toolId: string) {
const {
processing,
error,
processedUrl,
originalSize,
processedSize,
setProcessing,
setError,
setProcessedUrl,
setSizes,
setJobId,
} = useFileStore();
const { processing, error, processedUrl, originalSize, processedSize, setProcessing, setError } =
useFileStore();
const [progress, setProgress] = useState<ToolProgress>(IDLE_PROGRESS);
const elapsedRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -74,8 +64,19 @@ export function useToolProcessor(toolId: string) {
return;
}
// Capture the file index at request time so results are written
// to the correct entry even if the user navigates away.
const capturedIndex = useFileStore.getState().selectedIndex;
setError(null);
setProcessedUrl(null);
// Mark the target entry as processing and clear any old result
useFileStore.getState().updateEntry(capturedIndex, {
processedUrl: null,
processedPreviewUrl: null,
processedFilename: null,
status: "processing",
error: null,
});
setProcessing(true);
setProgress({ phase: "uploading", percent: 0, elapsed: 0 });
@@ -106,7 +107,7 @@ export function useToolProcessor(toolId: string) {
setProgress((prev) => ({
...prev,
phase: "processing",
percent: scaled,
percent: Math.max(prev.percent, scaled),
stage: data.stage,
}));
}
@@ -130,7 +131,7 @@ export function useToolProcessor(toolId: string) {
delete cleanSettings._bgImageFile;
const formData = new FormData();
formData.append("file", files[0]);
formData.append("file", files[capturedIndex] ?? files[0]);
formData.append("settings", JSON.stringify(cleanSettings));
if (bgImageFile) {
formData.append("backgroundImage", bgImageFile);
@@ -140,9 +141,9 @@ export function useToolProcessor(toolId: string) {
}
// If this file came from the Files page, include its ID for version tracking
const currentEntry = useFileStore.getState().currentEntry;
if (currentEntry?.serverFileId) {
formData.append("fileId", currentEntry.serverFileId);
const capturedEntry = useFileStore.getState().entries[capturedIndex];
if (capturedEntry?.serverFileId) {
formData.append("fileId", capturedEntry.serverFileId);
}
// Use XHR for upload progress tracking
@@ -188,6 +189,20 @@ export function useToolProcessor(toolId: string) {
});
}, 500);
}
// AI tools: asymptotic fill during long processing gaps.
// Slowly creeps toward 88% so the bar never stalls visually.
// Real SSE events always win via Math.max in the handler.
if (isAiTool) {
processingTimerRef.current = setInterval(() => {
setProgress((prev) => {
if (prev.phase !== "processing") return prev;
const remaining = 88 - prev.percent;
if (remaining <= 0.5) return prev;
return { ...prev, percent: prev.percent + remaining * 0.015 };
});
}, 1000);
}
};
xhr.onload = () => {
@@ -201,16 +216,17 @@ export function useToolProcessor(toolId: string) {
if (xhr.status >= 200 && xhr.status < 300) {
try {
const result: ProcessResult = JSON.parse(xhr.responseText);
setJobId(result.jobId);
setProcessedUrl(result.downloadUrl, result.previewUrl);
setSizes(result.originalSize, result.processedSize);
// Update serverFileId if a new version was saved
if (result.savedFileId) {
const state = useFileStore.getState();
if (state.entries[state.selectedIndex]) {
state.updateEntry(state.selectedIndex, { serverFileId: result.savedFileId });
}
}
// Write result to the entry that was being processed (captured at
// request time), not whatever entry happens to be selected now.
useFileStore.getState().updateEntry(capturedIndex, {
processedUrl: result.downloadUrl,
processedPreviewUrl: result.previewUrl ?? null,
processedFilename: null,
status: "completed",
originalSize: result.originalSize,
processedSize: result.processedSize,
...(result.savedFileId ? { serverFileId: result.savedFileId } : {}),
});
} catch {
setError("Invalid response from server");
}
@@ -260,7 +276,7 @@ export function useToolProcessor(toolId: string) {
});
xhr.send(formData);
},
[toolId, isAiTool, isMediumTool, setProcessing, setError, setProcessedUrl, setSizes, setJobId],
[toolId, isAiTool, isMediumTool, setProcessing, setError],
);
const processAllFiles = useCallback(