Spaces:

notaneimu
/

onnx-web-upscale

Running

App Files Files Community

notaneimu commited on Mar 6

Commit

44f343d

1 Parent(s): 9634fe9

match colors, exposure, grain

Browse files

Files changed (6) hide show

dist/assets/{index-1AzwDbQ5.js → index-D3DuJDE3.js} +0 -0
dist/index.html +1 -1
src/components/ControlPanel.vue +88 -0
src/composables/useOnnxInspector.ts +267 -39
src/lib/onnxHelpers.ts +311 -0
src/lib/types.ts +7 -0

dist/assets/{index-1AzwDbQ5.js → index-D3DuJDE3.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ONNX in Browser</title>
-    <script type="module" crossorigin src="/assets/index-1AzwDbQ5.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-T6D1olwS.css">
   </head>
   <body>

     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ONNX in Browser</title>
+    <script type="module" crossorigin src="/assets/index-D3DuJDE3.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-T6D1olwS.css">
   </head>
   <body>

src/components/ControlPanel.vue CHANGED Viewed

@@ -391,6 +391,94 @@ function handleImageChange(event: Event) {
             <span class="hidden text-xs text-stone-500 group-open:inline">▼</span>
           </summary>
           <div class="flex flex-col gap-2.5 pt-2">
             <label class="flex flex-col gap-1">
               <span class="text-xs font-medium text-stone-600">Seam blend width (input px)</span>
               <input

             <span class="hidden text-xs text-stone-500 group-open:inline">▼</span>
           </summary>
           <div class="flex flex-col gap-2.5 pt-2">
+            <label class="flex items-center justify-between rounded-lg border border-stone-200 bg-stone-50 px-3 py-2">
+              <span class="text-xs font-medium text-stone-600">Color correct final image</span>
+              <input
+                v-model="props.controls.colorCorrectionEnabled"
+                type="checkbox"
+                :disabled="controlsDisabled"
+                class="h-4 w-4 accent-stone-700 disabled:opacity-60"
+              />
+            </label>
+            <label class="flex flex-col gap-1">
+              <span class="text-xs font-medium text-stone-600">Color correction strength (%)</span>
+              <input
+                v-model="props.controls.colorCorrectionStrength"
+                type="number"
+                min="0"
+                max="100"
+                step="5"
+                placeholder="100"
+                :disabled="controlsDisabled || !props.controls.colorCorrectionEnabled"
+                class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-800 outline-none transition focus:border-stone-500 disabled:cursor-not-allowed disabled:opacity-60"
+              />
+              <p class="m-0 text-xs italic leading-snug text-stone-500">Matches RGB color balance and black/white levels back toward the source image.</p>
+            </label>
+            <label class="flex flex-col gap-1">
+              <span class="text-xs font-medium text-stone-600">Black/white clip (%)</span>
+              <input
+                v-model="props.controls.colorCorrectionClip"
+                type="number"
+                min="0"
+                max="10"
+                step="0.1"
+                placeholder="0.6"
+                :disabled="controlsDisabled || !props.controls.colorCorrectionEnabled"
+                class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-800 outline-none transition focus:border-stone-500 disabled:cursor-not-allowed disabled:opacity-60"
+              />
+              <p class="m-0 text-xs italic leading-snug text-stone-500">Ignores tiny outliers when matching source black and white points.</p>
+            </label>
+            <label class="flex items-center justify-between rounded-lg border border-stone-200 bg-stone-50 px-3 py-2">
+              <span class="text-xs font-medium text-stone-600">Add film grain</span>
+              <input
+                v-model="props.controls.filmGrainEnabled"
+                type="checkbox"
+                :disabled="controlsDisabled"
+                class="h-4 w-4 accent-stone-700 disabled:opacity-60"
+              />
+            </label>
+            <label class="flex flex-col gap-1">
+              <span class="text-xs font-medium text-stone-600">Film grain amount (%)</span>
+              <input
+                v-model="props.controls.filmGrainAmount"
+                type="number"
+                min="0"
+                max="100"
+                step="1"
+                placeholder="6"
+                :disabled="controlsDisabled || !props.controls.filmGrainEnabled"
+                class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-800 outline-none transition focus:border-stone-500 disabled:cursor-not-allowed disabled:opacity-60"
+              />
+            </label>
+            <label class="flex flex-col gap-1">
+              <span class="text-xs font-medium text-stone-600">Film grain size (px)</span>
+              <input
+                v-model="props.controls.filmGrainSize"
+                type="number"
+                min="0.5"
+                max="8"
+                step="0.1"
+                placeholder="1.2"
+                :disabled="controlsDisabled || !props.controls.filmGrainEnabled"
+                class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-800 outline-none transition focus:border-stone-500 disabled:cursor-not-allowed disabled:opacity-60"
+              />
+            </label>
+            <label class="flex items-center justify-between rounded-lg border border-stone-200 bg-stone-50 px-3 py-2">
+              <span class="text-xs font-medium text-stone-600">Monochrome grain</span>
+              <input
+                v-model="props.controls.filmGrainMonochrome"
+                type="checkbox"
+                :disabled="controlsDisabled || !props.controls.filmGrainEnabled"
+                class="h-4 w-4 accent-stone-700 disabled:opacity-60"
+              />
+            </label>
             <label class="flex flex-col gap-1">
               <span class="text-xs font-medium text-stone-600">Seam blend width (input px)</span>
               <input

src/composables/useOnnxInspector.ts CHANGED Viewed

@@ -6,9 +6,12 @@ import ortWasmThreadedJsepWasmUrl from "/node_modules/onnxruntime-web/dist/ort-w
 import { computed, onUnmounted, reactive, ref, shallowRef, watch } from "vue";
 import configData from "../../config.json";
 import {
   basicStats,
   blobToImage,
   canvasToBlobUrl,
   downscaleCanvas,
   describeSession,
   flushUi,
@@ -64,7 +67,13 @@ const MAX_TILE_COLOR_OFFSET = 18;
 const DEFAULT_TILE_CORRECTION_DAMPENING = 0.75;
 const MAX_SEAM_BLEND_WIDTH = 64;
 const DEFAULT_SEAM_CORRECTION_STRENGTH = "100";
 const MAX_SEAM_CORRECTION_STRENGTH = 300;
 const PREVIEW_REFRESH_DEBOUNCE_MS = 180;
 const DOWNSCALE_ALGORITHMS: DownscaleAlgorithm[] = ["lanczos", "area", "bicubic", "nearest"];
 const ALGORITHM_LABEL: Record<DownscaleAlgorithm, string> = {
@@ -86,6 +95,13 @@ const DEFAULT_CONTROLS: InspectorControls = {
   outputScale: "",
   preResizeAlgorithm: "lanczos",
   outputScaleAlgorithm: "lanczos",
   compareWithClassicUpscale: false,
   classicCompareAlgorithm: "lanczos",
   optLevel: "all",
@@ -113,6 +129,15 @@ interface PreviewRenderSource {
   sourceHeight: number;
 }
 interface ClassicCompareInputCache {
   blob: Blob;
   targetWidth: number;
@@ -214,6 +239,34 @@ function resolveSeamCorrectionStrength(rawValue: string | number | null | undefi
   return Math.max(0, Math.min(MAX_SEAM_CORRECTION_STRENGTH, percent)) / 100;
 }
 function getAutomaticTileBlendSize(overlapSize: number): number {
   if (overlapSize < 1) {
     return 0;
@@ -521,6 +574,7 @@ export function useOnnxInspector() {
   let webgpuListenerAttached = false;
   let abortController: AbortController | null = null;
   let previewRenderSource: PreviewRenderSource | null = null;
   let classicCompareInputCache: ClassicCompareInputCache | null = null;
   let classicCompareContext: ClassicCompareContext | null = null;
@@ -618,6 +672,7 @@ export function useOnnxInspector() {
     sourceWidth = 0,
     sourceHeight = 0,
   ) {
     if (!canvas || sourceWidth <= 0 || sourceHeight <= 0) {
       previewRenderSource = null;
       return;
@@ -630,6 +685,68 @@ export function useOnnxInspector() {
     };
   }
   function setCurrentRun(run: CurrentRun | null) {
     releaseObjectUrl(currentRun.value?.preview?.url ?? null);
     currentRun.value = run;
@@ -640,14 +757,25 @@ export function useOnnxInspector() {
   }
   async function releaseCurrentSession() {
-    if (!session.value) {
       return;
     }
     session.value = null;
     sessionProvider.value = null;
     modelMetadata.value = null;
-    log("Released previous model session.");
   }
   function resetModelInputPreview() {
@@ -733,6 +861,16 @@ export function useOnnxInspector() {
       outputScale: toStoredText(controls.outputScale, DEFAULT_CONTROLS.outputScale),
       preResizeAlgorithm: controls.preResizeAlgorithm,
       outputScaleAlgorithm: controls.outputScaleAlgorithm,
       compareWithClassicUpscale: Boolean(controls.compareWithClassicUpscale),
       classicCompareAlgorithm: controls.classicCompareAlgorithm,
       optLevel: controls.optLevel,
@@ -790,6 +928,25 @@ export function useOnnxInspector() {
       controls.width = toStoredText(parsed.width, DEFAULT_CONTROLS.width);
       controls.height = toStoredText(parsed.height, DEFAULT_CONTROLS.height);
       controls.outputScale = toStoredText(parsed.outputScale, DEFAULT_CONTROLS.outputScale);
       if (
         parsed.preResizeAlgorithm &&
@@ -967,6 +1124,13 @@ export function useOnnxInspector() {
       executionProviders: providers,
       graphOptimizationLevel: controls.optLevel,
     });
     session.value = createdSession;
     sessionProvider.value = provider;
@@ -1025,7 +1189,7 @@ export function useOnnxInspector() {
         executionProvider: getSessionExecutionProvider(session.value),
       });
     } catch (error) {
-      session.value = null;
       updateStatus("Model load failed", "error");
       log("Model load failed.", {
         error: error instanceof Error ? error.message : String(error),
@@ -1091,7 +1255,7 @@ export function useOnnxInspector() {
       await loadModelSession();
     } catch (error) {
-      session.value = null;
       modelAsset.value = null;
       updateStatus("Model load failed", "error");
       log("Model load failed.", {
@@ -1460,35 +1624,64 @@ export function useOnnxInspector() {
     sourceWidth: number,
     sourceHeight: number,
   ) {
-    const requestedScale = getOutputScale(controls.outputScale);
-    const requestedWidth = requestedScale ? Math.max(1, Math.round(sourceWidth * requestedScale)) : null;
-    const requestedHeight = requestedScale ? Math.max(1, Math.round(sourceHeight * requestedScale)) : null;
-    const targetWidth = requestedWidth ? Math.min(renderedCanvas.width, requestedWidth) : renderedCanvas.width;
-    const targetHeight = requestedHeight ? Math.min(renderedCanvas.height, requestedHeight) : renderedCanvas.height;
-    const willDownscale = targetWidth < renderedCanvas.width || targetHeight < renderedCanvas.height;
-    let previewCanvas = renderedCanvas;
-    if (requestedScale && !willDownscale) {
-      log("Skipped post-upscale downscale because the requested scale is not smaller than the model output.", {
-        requestedScale,
-        requestedSize: `${requestedWidth}x${requestedHeight}`,
-        outputSize: `${renderedCanvas.width}x${renderedCanvas.height}`,
-      });
-    } else if (willDownscale) {
-      updateStatus("Downscaling…", "busy");
-      resultInfo.progress = "100% (downscaling…)";
       await flushUi();
-      previewCanvas = await downscaleCanvas(
-        renderedCanvas,
-        targetWidth,
-        targetHeight,
-        controls.outputScaleAlgorithm,
       );
-      log("Downscaled output after inference.", {
-        requestedScale,
-        algorithm: controls.outputScaleAlgorithm,
-        from: `${renderedCanvas.width}x${renderedCanvas.height}`,
-        to: `${previewCanvas.width}x${previewCanvas.height}`,
       });
     }
@@ -1634,7 +1827,7 @@ export function useOnnxInspector() {
     }, PREVIEW_REFRESH_DEBOUNCE_MS);
   }
-  async function refreshPreviewFromCachedRender(trigger: "outputScale" | "outputScaleAlgorithm") {
     const source = previewRenderSource;
     const existingRun = currentRun.value;
     if (!source || !existingRun || isRunning.value || isModelLoading.value) {
@@ -1681,7 +1874,7 @@ export function useOnnxInspector() {
     });
   }
-  function schedulePreviewRefresh(trigger: "outputScale" | "outputScaleAlgorithm") {
     if (!initialized.value || !currentRun.value || !previewRenderSource || isRunning.value || isModelLoading.value) {
       return;
     }
@@ -2249,6 +2442,15 @@ export function useOnnxInspector() {
       return;
     }
     if (isRunning.value) {
       log("Run already in progress.");
       return;
@@ -2487,21 +2689,47 @@ export function useOnnxInspector() {
   );
   watch(
-    () => [controls.outputScale, controls.outputScaleAlgorithm] as const,
     (next, previous) => {
       if (!initialized.value) {
         return;
       }
-      if (next[0] === previous[0] && next[1] === previous[1]) {
         return;
       }
-      if (next[1] !== previous[1]) {
-        schedulePreviewRefresh("outputScaleAlgorithm");
-      } else {
-        schedulePreviewRefresh("outputScale");
-      }
     },
   );

 import { computed, onUnmounted, reactive, ref, shallowRef, watch } from "vue";
 import configData from "../../config.json";
 import {
+  applyColorLevelCorrection,
+  applyFilmGrain,
   basicStats,
   blobToImage,
   canvasToBlobUrl,
+  cloneCanvas,
   downscaleCanvas,
   describeSession,
   flushUi,
 const DEFAULT_TILE_CORRECTION_DAMPENING = 0.75;
 const MAX_SEAM_BLEND_WIDTH = 64;
 const DEFAULT_SEAM_CORRECTION_STRENGTH = "100";
+const DEFAULT_COLOR_CORRECTION_STRENGTH = "100";
+const DEFAULT_COLOR_CORRECTION_CLIP = "0.6";
+const DEFAULT_FILM_GRAIN_AMOUNT = "6";
+const DEFAULT_FILM_GRAIN_SIZE = "1.2";
 const MAX_SEAM_CORRECTION_STRENGTH = 300;
+const MAX_COLOR_CORRECTION_CLIP = 10;
+const MAX_FILM_GRAIN_SIZE = 8;
 const PREVIEW_REFRESH_DEBOUNCE_MS = 180;
 const DOWNSCALE_ALGORITHMS: DownscaleAlgorithm[] = ["lanczos", "area", "bicubic", "nearest"];
 const ALGORITHM_LABEL: Record<DownscaleAlgorithm, string> = {
   outputScale: "",
   preResizeAlgorithm: "lanczos",
   outputScaleAlgorithm: "lanczos",
+  colorCorrectionEnabled: false,
+  colorCorrectionStrength: DEFAULT_COLOR_CORRECTION_STRENGTH,
+  colorCorrectionClip: DEFAULT_COLOR_CORRECTION_CLIP,
+  filmGrainEnabled: false,
+  filmGrainAmount: DEFAULT_FILM_GRAIN_AMOUNT,
+  filmGrainSize: DEFAULT_FILM_GRAIN_SIZE,
+  filmGrainMonochrome: true,
   compareWithClassicUpscale: false,
   classicCompareAlgorithm: "lanczos",
   optLevel: "all",
   sourceHeight: number;
 }
+interface PreviewBaseCache {
+  renderCanvas: HTMLCanvasElement;
+  sourceWidth: number;
+  sourceHeight: number;
+  outputScale: string;
+  outputScaleAlgorithm: DownscaleAlgorithm;
+  canvas: HTMLCanvasElement;
+}
 interface ClassicCompareInputCache {
   blob: Blob;
   targetWidth: number;
   return Math.max(0, Math.min(MAX_SEAM_CORRECTION_STRENGTH, percent)) / 100;
 }
+function resolveColorCorrectionStrength(rawValue: string | number | null | undefined): number {
+  const parsed = parseNumericControl(rawValue);
+  const defaultStrength = Number.parseFloat(DEFAULT_COLOR_CORRECTION_STRENGTH);
+  const percent = parsed === null ? defaultStrength : parsed;
+  return Math.max(0, Math.min(100, percent)) / 100;
+}
+function resolveColorCorrectionClip(rawValue: string | number | null | undefined): number {
+  const parsed = parseNumericControl(rawValue);
+  const defaultClip = Number.parseFloat(DEFAULT_COLOR_CORRECTION_CLIP);
+  const percent = parsed === null ? defaultClip : parsed;
+  return Math.max(0, Math.min(MAX_COLOR_CORRECTION_CLIP, percent)) / 100;
+}
+function resolveFilmGrainAmount(rawValue: string | number | null | undefined): number {
+  const parsed = parseNumericControl(rawValue);
+  const defaultAmount = Number.parseFloat(DEFAULT_FILM_GRAIN_AMOUNT);
+  const percent = parsed === null ? defaultAmount : parsed;
+  return Math.max(0, Math.min(100, percent)) / 100;
+}
+function resolveFilmGrainSize(rawValue: string | number | null | undefined): number {
+  const parsed = parseNumericControl(rawValue);
+  const defaultSize = Number.parseFloat(DEFAULT_FILM_GRAIN_SIZE);
+  const size = parsed === null ? defaultSize : parsed;
+  return Math.max(0.5, Math.min(MAX_FILM_GRAIN_SIZE, size));
+}
 function getAutomaticTileBlendSize(overlapSize: number): number {
   if (overlapSize < 1) {
     return 0;
   let webgpuListenerAttached = false;
   let abortController: AbortController | null = null;
   let previewRenderSource: PreviewRenderSource | null = null;
+  let previewBaseCache: PreviewBaseCache | null = null;
   let classicCompareInputCache: ClassicCompareInputCache | null = null;
   let classicCompareContext: ClassicCompareContext | null = null;
     sourceWidth = 0,
     sourceHeight = 0,
   ) {
+    previewBaseCache = null;
     if (!canvas || sourceWidth <= 0 || sourceHeight <= 0) {
       previewRenderSource = null;
       return;
     };
   }
+  async function buildPreviewBase(
+    renderedCanvas: HTMLCanvasElement,
+    sourceWidth: number,
+    sourceHeight: number,
+  ): Promise<HTMLCanvasElement> {
+    const outputScale = getControlText(controls.outputScale);
+    const outputScaleAlgorithm = controls.outputScaleAlgorithm;
+    if (
+      previewBaseCache &&
+      previewBaseCache.renderCanvas === renderedCanvas &&
+      previewBaseCache.sourceWidth === sourceWidth &&
+      previewBaseCache.sourceHeight === sourceHeight &&
+      previewBaseCache.outputScale === outputScale &&
+      previewBaseCache.outputScaleAlgorithm === outputScaleAlgorithm
+    ) {
+      return previewBaseCache.canvas;
+    }
+    const requestedScale = getOutputScale(controls.outputScale);
+    const requestedWidth = requestedScale ? Math.max(1, Math.round(sourceWidth * requestedScale)) : null;
+    const requestedHeight = requestedScale ? Math.max(1, Math.round(sourceHeight * requestedScale)) : null;
+    const targetWidth = requestedWidth ? Math.min(renderedCanvas.width, requestedWidth) : renderedCanvas.width;
+    const targetHeight = requestedHeight ? Math.min(renderedCanvas.height, requestedHeight) : renderedCanvas.height;
+    const willDownscale = targetWidth < renderedCanvas.width || targetHeight < renderedCanvas.height;
+    let baseCanvas = renderedCanvas;
+    if (requestedScale && !willDownscale) {
+      log("Skipped post-upscale downscale because the requested scale is not smaller than the model output.", {
+        requestedScale,
+        requestedSize: `${requestedWidth}x${requestedHeight}`,
+        outputSize: `${renderedCanvas.width}x${renderedCanvas.height}`,
+      });
+    } else if (willDownscale) {
+      updateStatus("Downscaling…", "busy");
+      resultInfo.progress = "100% (downscaling…)";
+      await flushUi();
+      baseCanvas = await downscaleCanvas(
+        renderedCanvas,
+        targetWidth,
+        targetHeight,
+        controls.outputScaleAlgorithm,
+      );
+      log("Downscaled output after inference.", {
+        requestedScale,
+        algorithm: controls.outputScaleAlgorithm,
+        from: `${renderedCanvas.width}x${renderedCanvas.height}`,
+        to: `${baseCanvas.width}x${baseCanvas.height}`,
+      });
+    }
+    previewBaseCache = {
+      renderCanvas: renderedCanvas,
+      sourceWidth,
+      sourceHeight,
+      outputScale,
+      outputScaleAlgorithm,
+      canvas: baseCanvas,
+    };
+    return baseCanvas;
+  }
   function setCurrentRun(run: CurrentRun | null) {
     releaseObjectUrl(currentRun.value?.preview?.url ?? null);
     currentRun.value = run;
   }
   async function releaseCurrentSession() {
+    const currentSession = session.value;
+    if (!currentSession) {
       return;
     }
     session.value = null;
     sessionProvider.value = null;
     modelMetadata.value = null;
+    try {
+      if (typeof currentSession.release === "function") {
+        await currentSession.release();
+      }
+      log("Released previous model session.");
+    } catch (error) {
+      log("Failed to release previous model session cleanly.", {
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
   }
   function resetModelInputPreview() {
       outputScale: toStoredText(controls.outputScale, DEFAULT_CONTROLS.outputScale),
       preResizeAlgorithm: controls.preResizeAlgorithm,
       outputScaleAlgorithm: controls.outputScaleAlgorithm,
+      colorCorrectionEnabled: Boolean(controls.colorCorrectionEnabled),
+      colorCorrectionStrength: toStoredText(
+        controls.colorCorrectionStrength,
+        DEFAULT_CONTROLS.colorCorrectionStrength,
+      ),
+      colorCorrectionClip: toStoredText(controls.colorCorrectionClip, DEFAULT_CONTROLS.colorCorrectionClip),
+      filmGrainEnabled: Boolean(controls.filmGrainEnabled),
+      filmGrainAmount: toStoredText(controls.filmGrainAmount, DEFAULT_CONTROLS.filmGrainAmount),
+      filmGrainSize: toStoredText(controls.filmGrainSize, DEFAULT_CONTROLS.filmGrainSize),
+      filmGrainMonochrome: Boolean(controls.filmGrainMonochrome),
       compareWithClassicUpscale: Boolean(controls.compareWithClassicUpscale),
       classicCompareAlgorithm: controls.classicCompareAlgorithm,
       optLevel: controls.optLevel,
       controls.width = toStoredText(parsed.width, DEFAULT_CONTROLS.width);
       controls.height = toStoredText(parsed.height, DEFAULT_CONTROLS.height);
       controls.outputScale = toStoredText(parsed.outputScale, DEFAULT_CONTROLS.outputScale);
+      if (typeof parsed.colorCorrectionEnabled === "boolean") {
+        controls.colorCorrectionEnabled = parsed.colorCorrectionEnabled;
+      }
+      controls.colorCorrectionStrength = toStoredText(
+        parsed.colorCorrectionStrength,
+        DEFAULT_CONTROLS.colorCorrectionStrength,
+      );
+      controls.colorCorrectionClip = toStoredText(
+        parsed.colorCorrectionClip,
+        DEFAULT_CONTROLS.colorCorrectionClip,
+      );
+      if (typeof parsed.filmGrainEnabled === "boolean") {
+        controls.filmGrainEnabled = parsed.filmGrainEnabled;
+      }
+      controls.filmGrainAmount = toStoredText(parsed.filmGrainAmount, DEFAULT_CONTROLS.filmGrainAmount);
+      controls.filmGrainSize = toStoredText(parsed.filmGrainSize, DEFAULT_CONTROLS.filmGrainSize);
+      if (typeof parsed.filmGrainMonochrome === "boolean") {
+        controls.filmGrainMonochrome = parsed.filmGrainMonochrome;
+      }
       if (
         parsed.preResizeAlgorithm &&
       executionProviders: providers,
       graphOptimizationLevel: controls.optLevel,
     });
+    const actualProvider = getSessionExecutionProvider(createdSession);
+    if (actualProvider && actualProvider !== provider) {
+      await createdSession.release();
+      throw new Error(
+        `Requested ${provider} session, but ONNX Runtime prepared ${actualProvider}. Refusing provider fallback.`,
+      );
+    }
     session.value = createdSession;
     sessionProvider.value = provider;
         executionProvider: getSessionExecutionProvider(session.value),
       });
     } catch (error) {
+      await releaseCurrentSession();
       updateStatus("Model load failed", "error");
       log("Model load failed.", {
         error: error instanceof Error ? error.message : String(error),
       await loadModelSession();
     } catch (error) {
+      await releaseCurrentSession();
       modelAsset.value = null;
       updateStatus("Model load failed", "error");
       log("Model load failed.", {
     sourceWidth: number,
     sourceHeight: number,
   ) {
+    const shouldColorCorrect = controls.colorCorrectionEnabled && !!imageAsset.value;
+    const shouldApplyFilmGrain = controls.filmGrainEnabled;
+    const previewBase = await buildPreviewBase(renderedCanvas, sourceWidth, sourceHeight);
+    let previewCanvas = previewBase;
+    if (shouldColorCorrect || shouldApplyFilmGrain) {
+      previewCanvas = cloneCanvas(previewCanvas);
+    }
+    if (shouldColorCorrect || shouldApplyFilmGrain) {
+      updateStatus("Finishing…", "busy");
+      resultInfo.progress = "100% (finishing…)";
       await flushUi();
+    }
+    if (shouldColorCorrect && imageAsset.value) {
+      const sourceImage = await blobToImage(imageAsset.value.blob);
+      const sourceCanvasAtInputSize = await buildClassicCompareInputCanvas(
+        sourceImage,
+        sourceWidth,
+        sourceHeight,
       );
+      const referenceCanvas =
+        sourceCanvasAtInputSize.width === previewCanvas.width &&
+        sourceCanvasAtInputSize.height === previewCanvas.height
+          ? sourceCanvasAtInputSize
+          : await downscaleCanvas(
+              sourceCanvasAtInputSize,
+              previewCanvas.width,
+              previewCanvas.height,
+              controls.outputScaleAlgorithm,
+            );
+      const strength = resolveColorCorrectionStrength(controls.colorCorrectionStrength);
+      const clipFraction = resolveColorCorrectionClip(controls.colorCorrectionClip);
+      await applyColorLevelCorrection(previewCanvas, referenceCanvas, {
+        strength,
+        clipFraction,
+      });
+      log("Applied final-image color correction.", {
+        strengthPercent: Math.round(strength * 100),
+        clipPercent: round(clipFraction * 100),
+        referenceSize: `${referenceCanvas.width}x${referenceCanvas.height}`,
+      });
+    }
+    if (shouldApplyFilmGrain) {
+      const amount = resolveFilmGrainAmount(controls.filmGrainAmount);
+      const size = resolveFilmGrainSize(controls.filmGrainSize);
+      await applyFilmGrain(previewCanvas, {
+        amount,
+        size,
+        monochrome: controls.filmGrainMonochrome,
+      });
+      log("Applied film grain.", {
+        amountPercent: Math.round(amount * 100),
+        size,
+        monochrome: controls.filmGrainMonochrome,
       });
     }
     }, PREVIEW_REFRESH_DEBOUNCE_MS);
   }
+  async function refreshPreviewFromCachedRender(trigger: string) {
     const source = previewRenderSource;
     const existingRun = currentRun.value;
     if (!source || !existingRun || isRunning.value || isModelLoading.value) {
     });
   }
+  function schedulePreviewRefresh(trigger: string) {
     if (!initialized.value || !currentRun.value || !previewRenderSource || isRunning.value || isModelLoading.value) {
       return;
     }
       return;
     }
+    if (sessionProvider.value && sessionProvider.value !== controls.provider) {
+      updateStatus("Load model", "error");
+      log("Run skipped because the loaded session provider does not match the selected provider.", {
+        loadedProvider: sessionProvider.value,
+        selectedProvider: controls.provider,
+      });
+      return;
+    }
     if (isRunning.value) {
       log("Run already in progress.");
       return;
   );
   watch(
+    () =>
+      [
+        controls.outputScale,
+        controls.outputScaleAlgorithm,
+        controls.colorCorrectionEnabled,
+        controls.colorCorrectionStrength,
+        controls.colorCorrectionClip,
+        controls.filmGrainEnabled,
+        controls.filmGrainAmount,
+        controls.filmGrainSize,
+        controls.filmGrainMonochrome,
+      ] as const,
     (next, previous) => {
       if (!initialized.value) {
         return;
       }
+      if (next.every((value, index) => value === previous[index])) {
         return;
       }
+      const trigger =
+        next[1] !== previous[1]
+          ? "outputScaleAlgorithm"
+          : next[0] !== previous[0]
+            ? "outputScale"
+            : next[2] !== previous[2]
+              ? "colorCorrectionToggle"
+              : next[3] !== previous[3]
+                ? "colorCorrectionStrength"
+                : next[4] !== previous[4]
+                  ? "colorCorrectionClip"
+                  : next[5] !== previous[5]
+                    ? "filmGrainToggle"
+                    : next[6] !== previous[6]
+                      ? "filmGrainAmount"
+                      : next[7] !== previous[7]
+                        ? "filmGrainSize"
+                        : "filmGrainMonochrome";
+      schedulePreviewRefresh(trigger);
     },
   );

src/lib/onnxHelpers.ts CHANGED Viewed

@@ -840,6 +840,317 @@ export function canvasToBlobUrl(canvas: HTMLCanvasElement, mimeType = "image/png
   });
 }
 interface ResampleContributor {
   offsets: number[];
   weights: number[];

   });
 }
+export function cloneCanvas(sourceCanvas: HTMLCanvasElement): HTMLCanvasElement {
+  const clone = document.createElement("canvas");
+  clone.width = sourceCanvas.width;
+  clone.height = sourceCanvas.height;
+  const ctx = clone.getContext("2d");
+  if (!ctx) {
+    throw new Error("2D canvas context is unavailable.");
+  }
+  ctx.drawImage(sourceCanvas, 0, 0);
+  return clone;
+}
+interface ChannelLevelStats {
+  low: number;
+  mid: number;
+  high: number;
+}
+function getLevelStatsFromHistogram(histogram: Uint32Array, total: number, clipFraction: number): ChannelLevelStats {
+  const clampedClip = clamp(clipFraction, 0, 0.2);
+  const lowIndex = Math.max(0, Math.floor(total * clampedClip));
+  const midIndex = Math.max(0, Math.floor(total * 0.5));
+  const highIndex = Math.max(0, Math.ceil(total * (1 - clampedClip)) - 1);
+  const low = getPercentileFromHistogram(histogram, lowIndex);
+  const mid = getPercentileFromHistogram(histogram, midIndex);
+  const high = getPercentileFromHistogram(histogram, highIndex);
+  return {
+    low,
+    mid,
+    high: Math.max(low + 1, high),
+  };
+}
+function getPercentileFromHistogram(histogram: Uint32Array, targetIndex: number): number {
+  let cumulative = 0;
+  for (let value = 0; value < histogram.length; value += 1) {
+    cumulative += histogram[value];
+    if (cumulative > targetIndex) {
+      return value;
+    }
+  }
+  return histogram.length - 1;
+}
+function buildChannelLevelStats(data: Uint8ClampedArray, clipFraction: number): ChannelLevelStats[] {
+  const histograms = [new Uint32Array(256), new Uint32Array(256), new Uint32Array(256)];
+  let total = 0;
+  for (let offset = 0; offset < data.length; offset += 4) {
+    if (data[offset + 3] === 0) {
+      continue;
+    }
+    histograms[0][data[offset]] += 1;
+    histograms[1][data[offset + 1]] += 1;
+    histograms[2][data[offset + 2]] += 1;
+    total += 1;
+  }
+  if (total < 2) {
+    return [
+      { low: 0, mid: 128, high: 255 },
+      { low: 0, mid: 128, high: 255 },
+      { low: 0, mid: 128, high: 255 },
+    ];
+  }
+  return histograms.map((histogram) => getLevelStatsFromHistogram(histogram, total, clipFraction));
+}
+function buildLuminanceLevelStats(data: Uint8ClampedArray, clipFraction: number): ChannelLevelStats {
+  const histogram = new Uint32Array(256);
+  let total = 0;
+  for (let offset = 0; offset < data.length; offset += 4) {
+    if (data[offset + 3] === 0) {
+      continue;
+    }
+    const luma = Math.round(data[offset] * 0.2126 + data[offset + 1] * 0.7152 + data[offset + 2] * 0.0722);
+    histogram[clamp(luma, 0, 255)] += 1;
+    total += 1;
+  }
+  if (total < 2) {
+    return { low: 0, mid: 128, high: 255 };
+  }
+  return getLevelStatsFromHistogram(histogram, total, clipFraction);
+}
+function normalizeLevel(value: number, levels: ChannelLevelStats): number {
+  return clamp((value - levels.low) / Math.max(1, levels.high - levels.low), 0, 1);
+}
+function resolveCurveGamma(sourceLevels: ChannelLevelStats, desiredLevels: ChannelLevelStats): number {
+  const sourceMid = normalizeLevel(sourceLevels.mid, sourceLevels);
+  const desiredMid = normalizeLevel(desiredLevels.mid, desiredLevels);
+  if (sourceMid <= 0.001 || sourceMid >= 0.999 || desiredMid <= 0.001 || desiredMid >= 0.999) {
+    return 1;
+  }
+  return clamp(Math.log(desiredMid) / Math.log(sourceMid), 0.35, 2.5);
+}
+export async function applyColorLevelCorrection(
+  targetCanvas: HTMLCanvasElement,
+  referenceCanvas: HTMLCanvasElement,
+  options: {
+    strength: number;
+    clipFraction: number;
+  },
+): Promise<HTMLCanvasElement> {
+  const strength = clamp(options.strength, 0, 1);
+  if (strength <= 0) {
+    return targetCanvas;
+  }
+  const targetCtx = targetCanvas.getContext("2d", { willReadFrequently: true });
+  const referenceCtx = referenceCanvas.getContext("2d", { willReadFrequently: true });
+  if (!targetCtx || !referenceCtx) {
+    throw new Error("2D canvas context is unavailable.");
+  }
+  const targetImage = targetCtx.getImageData(0, 0, targetCanvas.width, targetCanvas.height);
+  const referenceImage = referenceCtx.getImageData(0, 0, referenceCanvas.width, referenceCanvas.height);
+  const targetLevels = buildChannelLevelStats(targetImage.data, options.clipFraction);
+  const referenceLevels = buildChannelLevelStats(referenceImage.data, options.clipFraction);
+  const targetLumaLevels = buildLuminanceLevelStats(targetImage.data, options.clipFraction);
+  const referenceLumaLevels = buildLuminanceLevelStats(referenceImage.data, options.clipFraction);
+  const curveGamma = resolveCurveGamma(targetLumaLevels, referenceLumaLevels);
+  const shouldYield = targetCanvas.width * targetCanvas.height >= 1_000_000;
+  for (let y = 0; y < targetCanvas.height; y += 1) {
+    for (let x = 0; x < targetCanvas.width; x += 1) {
+      const offset = (y * targetCanvas.width + x) * 4;
+      if (targetImage.data[offset + 3] === 0) {
+        continue;
+      }
+      const originalRed = targetImage.data[offset];
+      const originalGreen = targetImage.data[offset + 1];
+      const originalBlue = targetImage.data[offset + 2];
+      const originalLuma = originalRed * 0.2126 + originalGreen * 0.7152 + originalBlue * 0.0722;
+      const normalizedLuma = normalizeLevel(originalLuma, targetLumaLevels);
+      const curvedLuma =
+        referenceLumaLevels.low +
+        Math.pow(normalizedLuma, curveGamma) * Math.max(1, referenceLumaLevels.high - referenceLumaLevels.low);
+      let correctedRed = originalRed;
+      let correctedGreen = originalGreen;
+      let correctedBlue = originalBlue;
+      for (let channel = 0; channel < 3; channel += 1) {
+        const original = targetImage.data[offset + channel];
+        const sourceLevels = targetLevels[channel];
+        const desiredLevels = referenceLevels[channel];
+        const normalized = normalizeLevel(original, sourceLevels);
+        const corrected = clamp(
+          Math.round(desiredLevels.low + normalized * (desiredLevels.high - desiredLevels.low)),
+          0,
+          255,
+        );
+        if (channel === 0) {
+          correctedRed = corrected;
+        } else if (channel === 1) {
+          correctedGreen = corrected;
+        } else {
+          correctedBlue = corrected;
+        }
+      }
+      const correctedLuma = correctedRed * 0.2126 + correctedGreen * 0.7152 + correctedBlue * 0.0722;
+      const lumaScale = clamp(curvedLuma / Math.max(1, correctedLuma), 0, 4);
+      const curvedRed = clamp(Math.round(correctedRed * lumaScale), 0, 255);
+      const curvedGreen = clamp(Math.round(correctedGreen * lumaScale), 0, 255);
+      const curvedBlue = clamp(Math.round(correctedBlue * lumaScale), 0, 255);
+      targetImage.data[offset] = clamp(
+        Math.round(originalRed + (curvedRed - originalRed) * strength),
+        0,
+        255,
+      );
+      targetImage.data[offset + 1] = clamp(
+        Math.round(originalGreen + (curvedGreen - originalGreen) * strength),
+        0,
+        255,
+      );
+      targetImage.data[offset + 2] = clamp(
+        Math.round(originalBlue + (curvedBlue - originalBlue) * strength),
+        0,
+        255,
+      );
+    }
+    if (shouldYield && y > 0 && y % 48 === 0) {
+      await flushUi();
+    }
+  }
+  targetCtx.putImageData(targetImage, 0, 0);
+  return targetCanvas;
+}
+function smoothstep(value: number): number {
+  const clamped = clamp(value, 0, 1);
+  return clamped * clamped * (3 - 2 * clamped);
+}
+function fract(value: number): number {
+  return value - Math.floor(value);
+}
+function lerp(from: number, to: number, amount: number): number {
+  return from + (to - from) * amount;
+}
+function hashNoise(x: number, y: number, seed: number): number {
+  return fract(Math.sin(x * 127.1 + y * 311.7 + seed * 74.7) * 43758.5453123) * 2 - 1;
+}
+function sampleFilmNoise(x: number, y: number, size: number, seed: number): number {
+  const scaledX = x / Math.max(0.001, size);
+  const scaledY = y / Math.max(0.001, size);
+  const cellX = Math.floor(scaledX);
+  const cellY = Math.floor(scaledY);
+  const fracX = smoothstep(scaledX - cellX);
+  const fracY = smoothstep(scaledY - cellY);
+  const n00 = hashNoise(cellX, cellY, seed);
+  const n10 = hashNoise(cellX + 1, cellY, seed);
+  const n01 = hashNoise(cellX, cellY + 1, seed);
+  const n11 = hashNoise(cellX + 1, cellY + 1, seed);
+  const top = lerp(n00, n10, fracX);
+  const bottom = lerp(n01, n11, fracX);
+  return lerp(top, bottom, fracY);
+}
+export async function applyFilmGrain(
+  targetCanvas: HTMLCanvasElement,
+  options: {
+    amount: number;
+    size: number;
+    monochrome: boolean;
+  },
+): Promise<HTMLCanvasElement> {
+  const amount = clamp(options.amount, 0, 1);
+  if (amount <= 0) {
+    return targetCanvas;
+  }
+  const ctx = targetCanvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) {
+    throw new Error("2D canvas context is unavailable.");
+  }
+  const image = ctx.getImageData(0, 0, targetCanvas.width, targetCanvas.height);
+  const shouldYield = targetCanvas.width * targetCanvas.height >= 1_000_000;
+  const noiseSize = Math.max(0.5, options.size);
+  const amplitude = amount * 52;
+  const seed =
+    targetCanvas.width * 0.173 +
+    targetCanvas.height * 0.117 +
+    noiseSize * 4.91 +
+    amplitude * 0.29 +
+    (options.monochrome ? 1.7 : 8.3);
+  for (let y = 0; y < targetCanvas.height; y += 1) {
+    for (let x = 0; x < targetCanvas.width; x += 1) {
+      const offset = (y * targetCanvas.width + x) * 4;
+      if (image.data[offset + 3] === 0) {
+        continue;
+      }
+      const red = image.data[offset];
+      const green = image.data[offset + 1];
+      const blue = image.data[offset + 2];
+      const luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255;
+      const toneWeight = 0.7 + (1 - Math.min(1, Math.abs(luma - 0.5) * 2)) * 0.3;
+      const scaledAmplitude = amplitude * toneWeight;
+      const mono = sampleFilmNoise(x + 0.5, y + 0.5, noiseSize, seed) * scaledAmplitude;
+      image.data[offset] = clamp(
+        Math.round(red + (options.monochrome ? mono : sampleFilmNoise(x + 17.3, y + 5.1, noiseSize, seed + 13) * scaledAmplitude)),
+        0,
+        255,
+      );
+      image.data[offset + 1] = clamp(
+        Math.round(green + (options.monochrome ? mono : sampleFilmNoise(x + 41.7, y + 19.9, noiseSize, seed + 29) * scaledAmplitude)),
+        0,
+        255,
+      );
+      image.data[offset + 2] = clamp(
+        Math.round(blue + (options.monochrome ? mono : sampleFilmNoise(x + 73.1, y + 31.4, noiseSize, seed + 47) * scaledAmplitude)),
+        0,
+        255,
+      );
+    }
+    if (shouldYield && y > 0 && y % 48 === 0) {
+      await flushUi();
+    }
+  }
+  ctx.putImageData(image, 0, 0);
+  return targetCanvas;
+}
 interface ResampleContributor {
   offsets: number[];
   weights: number[];

src/lib/types.ts CHANGED Viewed

@@ -84,6 +84,13 @@ export interface InspectorControls {
   outputScale: string;
   preResizeAlgorithm: DownscaleAlgorithm;
   outputScaleAlgorithm: DownscaleAlgorithm;
   compareWithClassicUpscale: boolean;
   classicCompareAlgorithm: DownscaleAlgorithm;
   optLevel: "all" | "extended" | "basic" | "disabled";

   outputScale: string;
   preResizeAlgorithm: DownscaleAlgorithm;
   outputScaleAlgorithm: DownscaleAlgorithm;
+  colorCorrectionEnabled: boolean;
+  colorCorrectionStrength: string;
+  colorCorrectionClip: string;
+  filmGrainEnabled: boolean;
+  filmGrainAmount: string;
+  filmGrainSize: string;
+  filmGrainMonochrome: boolean;
   compareWithClassicUpscale: boolean;
   classicCompareAlgorithm: DownscaleAlgorithm;
   optLevel: "all" | "extended" | "basic" | "disabled";