Spaces:

notaneimu
/

onnx-web-upscale

Running

App Files Files Community

notaneimu commited on Mar 4

Commit

7083032

1 Parent(s): 943b4b4

update preview, dowscale options

Browse files

Files changed (8) hide show

dist/assets/{index-CmWeD5AW.js → index-CLQ9w9OG.js} +0 -0
dist/index.html +1 -1
src/components/ComparePanel.vue +8 -7
src/components/ControlPanel.vue +28 -1
src/composables/useCompareStage.ts +1 -0
src/composables/useOnnxInspector.ts +27 -7
src/lib/onnxHelpers.ts +65 -14
src/lib/types.ts +2 -1

dist/assets/{index-CmWeD5AW.js → index-CLQ9w9OG.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-CmWeD5AW.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-D-MCzeoS.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-CLQ9w9OG.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-D-MCzeoS.css">
   </head>
   <body>

src/components/ComparePanel.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
 import { useCompareStage } from "../composables/useCompareStage";
 import type { ResultInfo } from "../lib/types";
@@ -22,7 +22,7 @@ const emit = defineEmits<{
 const compareStageRef = ref<HTMLElement | null>(null);
 const hasBaseImage = computed(() => Boolean(props.baseImageUrl));
 const hasOverlayImage = computed(() => Boolean(props.overlayImageUrl));
-const { handleWheel, preventContextMenu, startCompareDrag, styleVars, zoomLabel } =
   useCompareStage(compareStageRef, hasBaseImage, hasOverlayImage);
 const progressFillWidth = computed(() => {
@@ -69,15 +69,16 @@ const compareStageStyle = computed(() => ({
   background: checkerboardBackground,
 }));
-const baseImageStyle = {
   transform: "scale(var(--zoom))",
   transformOrigin: "var(--origin-x) var(--origin-y)",
-};
-const overlayImageStyle = {
-  ...baseImageStyle,
   clipPath: "inset(0 calc(100% - var(--split-adjusted)) 0 0)",
-};
 const dividerStyle = {
   left: "calc(var(--split) - 1px)",

 <script setup lang="ts">
+import { computed, ref, type CSSProperties } from "vue";
 import { useCompareStage } from "../composables/useCompareStage";
 import type { ResultInfo } from "../lib/types";
 const compareStageRef = ref<HTMLElement | null>(null);
 const hasBaseImage = computed(() => Boolean(props.baseImageUrl));
 const hasOverlayImage = computed(() => Boolean(props.overlayImageUrl));
+const { handleWheel, preventContextMenu, startCompareDrag, styleVars, zoomLabel, zoomScale } =
   useCompareStage(compareStageRef, hasBaseImage, hasOverlayImage);
 const progressFillWidth = computed(() => {
   background: checkerboardBackground,
 }));
+const baseImageStyle = computed<CSSProperties>(() => ({
   transform: "scale(var(--zoom))",
   transformOrigin: "var(--origin-x) var(--origin-y)",
+  imageRendering: zoomScale.value > 1 ? "pixelated" : "auto",
+}));
+const overlayImageStyle = computed<CSSProperties>(() => ({
+  ...baseImageStyle.value,
   clipPath: "inset(0 calc(100% - var(--split-adjusted)) 0 0)",
+}));
 const dividerStyle = {
   left: "calc(var(--split) - 1px)",

src/components/ControlPanel.vue CHANGED Viewed

@@ -274,6 +274,31 @@ function handleImageChange(event: Event) {
           />
         </label>
         <label class="flex flex-col gap-1">
           <span class="text-xs font-medium text-stone-600">Final scale</span>
           <input
@@ -290,7 +315,7 @@ function handleImageChange(event: Event) {
         </label>
         <label class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-stone-600">Downscale algorithm</span>
           <div class="relative">
             <select
               v-model="props.controls.outputScaleAlgorithm"
@@ -300,6 +325,7 @@ function handleImageChange(event: Event) {
               <option value="lanczos">Lanczos</option>
               <option value="area">Area</option>
               <option value="bicubic">Bicubic</option>
             </select>
             <svg
               class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone-500"
@@ -310,6 +336,7 @@ function handleImageChange(event: Event) {
               <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
             </svg>
           </div>
         </label>
         <details class="group">

           />
         </label>
+        <label class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-stone-600">Pre resize algorithm</span>
+          <div class="relative">
+            <select
+              v-model="props.controls.preResizeAlgorithm"
+              :disabled="controlsDisabled"
+              class="w-full appearance-none rounded-lg border border-stone-300 bg-white px-3 py-2 pr-11 text-sm text-stone-800 outline-none transition focus:border-stone-500 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              <option value="lanczos">Lanczos</option>
+              <option value="area">Area</option>
+              <option value="bicubic">Bicubic</option>
+              <option value="nearest">Nearest neighbor</option>
+            </select>
+            <svg
+              class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone-500"
+              viewBox="0 0 16 16"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
+            </svg>
+          </div>
+          <p class="m-0 text-xs italic leading-snug text-stone-500">Used when resizing the source image to the model input size.</p>
+        </label>
         <label class="flex flex-col gap-1">
           <span class="text-xs font-medium text-stone-600">Final scale</span>
           <input
         </label>
         <label class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-stone-600">Post resize algorithm</span>
           <div class="relative">
             <select
               v-model="props.controls.outputScaleAlgorithm"
               <option value="lanczos">Lanczos</option>
               <option value="area">Area</option>
               <option value="bicubic">Bicubic</option>
+              <option value="nearest">Nearest neighbor</option>
             </select>
             <svg
               class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone-500"
               <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
             </svg>
           </div>
+          <p class="m-0 text-xs italic leading-snug text-stone-500">Used only for the optional output resize after inference.</p>
         </label>
         <details class="group">

src/composables/useCompareStage.ts CHANGED Viewed

@@ -160,6 +160,7 @@ export function useCompareStage(
   return {
     styleVars,
     zoomLabel: computed(() => `${Math.round(state.zoom * 100)}%`),
     startCompareDrag,
     preventContextMenu,

   return {
     styleVars,
+    zoomScale: computed(() => state.zoom),
     zoomLabel: computed(() => `${Math.round(state.zoom * 100)}%`),
     startCompareDrag,
     preventContextMenu,

src/composables/useOnnxInspector.ts CHANGED Viewed

@@ -29,6 +29,7 @@ import {
   resolveByteScale,
   resolveTargetImageSize,
   round,
   safeStringify,
   summarizeTensor,
 } from "../lib/onnxHelpers";
@@ -61,6 +62,7 @@ const DEFAULT_CONTROLS: InspectorControls = {
   width: "600",
   height: "",
   outputScale: "",
   outputScaleAlgorithm: "lanczos",
   optLevel: "all",
   webgpuLayout: "NCHW",
@@ -321,6 +323,7 @@ export function useOnnxInspector() {
       width: toStoredText(controls.width, DEFAULT_CONTROLS.width),
       height: toStoredText(controls.height, DEFAULT_CONTROLS.height),
       outputScale: toStoredText(controls.outputScale, DEFAULT_CONTROLS.outputScale),
       outputScaleAlgorithm: controls.outputScaleAlgorithm,
       optLevel: controls.optLevel,
       webgpuLayout: controls.webgpuLayout,
@@ -370,7 +373,17 @@ export function useOnnxInspector() {
       controls.height = toStoredText(parsed.height, DEFAULT_CONTROLS.height);
       controls.outputScale = toStoredText(parsed.outputScale, DEFAULT_CONTROLS.outputScale);
-      if (parsed.outputScaleAlgorithm && ["lanczos", "area", "bicubic"].includes(parsed.outputScaleAlgorithm)) {
         controls.outputScaleAlgorithm = parsed.outputScaleAlgorithm;
       }
@@ -887,15 +900,21 @@ export function useOnnxInspector() {
       await flushUi();
-      const canvas = document.createElement("canvas");
-      canvas.width = targetSize.width;
-      canvas.height = targetSize.height;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
         throw new Error("2D canvas context is unavailable.");
       }
-      ctx.drawImage(image, 0, 0, targetSize.width, targetSize.height);
       const nextUrl = await canvasToBlobUrl(canvas);
       if (requestId !== modelInputPreviewRequestId) {
@@ -1726,6 +1745,7 @@ export function useOnnxInspector() {
         inferredFixedInputSize.value?.height ?? null,
         controls.width,
         controls.height,
       ] as const,
     () => {
       if (!initialized.value) {

   resolveByteScale,
   resolveTargetImageSize,
   round,
+  resizeCanvas,
   safeStringify,
   summarizeTensor,
 } from "../lib/onnxHelpers";
   width: "600",
   height: "",
   outputScale: "",
+  preResizeAlgorithm: "lanczos",
   outputScaleAlgorithm: "lanczos",
   optLevel: "all",
   webgpuLayout: "NCHW",
       width: toStoredText(controls.width, DEFAULT_CONTROLS.width),
       height: toStoredText(controls.height, DEFAULT_CONTROLS.height),
       outputScale: toStoredText(controls.outputScale, DEFAULT_CONTROLS.outputScale),
+      preResizeAlgorithm: controls.preResizeAlgorithm,
       outputScaleAlgorithm: controls.outputScaleAlgorithm,
       optLevel: controls.optLevel,
       webgpuLayout: controls.webgpuLayout,
       controls.height = toStoredText(parsed.height, DEFAULT_CONTROLS.height);
       controls.outputScale = toStoredText(parsed.outputScale, DEFAULT_CONTROLS.outputScale);
+      if (
+        parsed.preResizeAlgorithm &&
+        ["lanczos", "area", "bicubic", "nearest"].includes(parsed.preResizeAlgorithm)
+      ) {
+        controls.preResizeAlgorithm = parsed.preResizeAlgorithm;
+      }
+      if (
+        parsed.outputScaleAlgorithm &&
+        ["lanczos", "area", "bicubic", "nearest"].includes(parsed.outputScaleAlgorithm)
+      ) {
         controls.outputScaleAlgorithm = parsed.outputScaleAlgorithm;
       }
       await flushUi();
+      const sourceCanvas = document.createElement("canvas");
+      sourceCanvas.width = sourceDimensions.width;
+      sourceCanvas.height = sourceDimensions.height;
+      const sourceCtx = sourceCanvas.getContext("2d");
+      if (!sourceCtx) {
         throw new Error("2D canvas context is unavailable.");
       }
+      sourceCtx.drawImage(image, 0, 0, sourceDimensions.width, sourceDimensions.height);
+      const canvas = await resizeCanvas(
+        sourceCanvas,
+        targetSize.width,
+        targetSize.height,
+        controls.preResizeAlgorithm,
+      );
       const nextUrl = await canvasToBlobUrl(canvas);
       if (requestId !== modelInputPreviewRequestId) {
         inferredFixedInputSize.value?.height ?? null,
         controls.width,
         controls.height,
+        controls.preResizeAlgorithm,
       ] as const,
     () => {
       if (!initialized.value) {

src/lib/onnxHelpers.ts CHANGED Viewed

@@ -496,6 +496,7 @@ export async function preprocessImage(
   const paddedHeight = height + padding.padBottom;
   const channelOrder = controls.channelOrder;
   const normalize = controls.normalize;
   const mean = parseCsvNumbers(controls.mean, 3);
   const std = parseCsvNumbers(controls.std, 3).map((value) => value || 1);
   const declaredTensorType = normalizeTensorType(metadata.type);
@@ -505,15 +506,21 @@ export async function preprocessImage(
     throw new Error(`This inspector currently supports float32 image inputs only. Model expects ${tensorType}.`);
   }
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
   const ctx = canvas.getContext("2d", { willReadFrequently: true });
   if (!ctx) {
     throw new Error("2D canvas context is unavailable.");
   }
-  ctx.drawImage(imageElement, 0, 0, width, height);
   const pixels = ctx.getImageData(0, 0, width, height).data;
   const channels = 3;
@@ -562,6 +569,7 @@ export async function preprocessImage(
       targetImage: `${width}x${height}`,
       tensorImage: `${paddedWidth}x${paddedHeight}`,
       layout,
       channelOrder,
       normalize,
       mean,
@@ -879,6 +887,23 @@ function buildAreaContributors(sourceSize: number, targetSize: number): Resample
   });
 }
 function bicubicKernel(distance: number): number {
   const a = -0.5;
   const x = Math.abs(distance);
@@ -911,7 +936,7 @@ function lanczosKernel(distance: number, lobes: number): number {
 function buildKernelContributors(
   sourceSize: number,
   targetSize: number,
-  algorithm: Exclude<DownscaleAlgorithm, "area">,
 ): ResampleContributor[] {
   const scale = sourceSize / Math.max(1, targetSize);
   const filterScale = Math.max(1, scale);
@@ -951,6 +976,10 @@ function buildResampleContributors(
   targetSize: number,
   algorithm: DownscaleAlgorithm,
 ): ResampleContributor[] {
   if (algorithm === "area") {
     return buildAreaContributors(sourceSize, targetSize);
   }
@@ -958,7 +987,7 @@ function buildResampleContributors(
   return buildKernelContributors(sourceSize, targetSize, algorithm);
 }
-export async function downscaleCanvas(
   sourceCanvas: HTMLCanvasElement,
   targetWidth: number,
   targetHeight: number,
@@ -993,10 +1022,15 @@ export async function downscaleCanvas(
       for (let weightIndex = 0; weightIndex < contributors.offsets.length; weightIndex += 1) {
         const sourceOffset = sourceRowOffset + contributors.offsets[weightIndex] * 4;
         const weight = contributors.weights[weightIndex];
-        temp[outputOffset] += sourcePixels[sourceOffset] * weight;
-        temp[outputOffset + 1] += sourcePixels[sourceOffset + 1] * weight;
-        temp[outputOffset + 2] += sourcePixels[sourceOffset + 2] * weight;
-        temp[outputOffset + 3] += sourcePixels[sourceOffset + 3] * weight;
       }
     }
@@ -1027,10 +1061,18 @@ export async function downscaleCanvas(
         alpha += temp[sourceOffset + 3] * weight;
       }
-      outputPixels[outputOffset] = clamp(Math.round(red), 0, 255);
-      outputPixels[outputOffset + 1] = clamp(Math.round(green), 0, 255);
-      outputPixels[outputOffset + 2] = clamp(Math.round(blue), 0, 255);
-      outputPixels[outputOffset + 3] = clamp(Math.round(alpha), 0, 255);
     }
     if (shouldYield && y > 0 && y % 32 === 0) {
@@ -1050,6 +1092,15 @@ export async function downscaleCanvas(
   return outputCanvas;
 }
 export async function tensorToPreview(
   tensor: ort.Tensor | undefined,
   cropInfo: PreprocessResult["outputCrop"] | null = null,

   const paddedHeight = height + padding.padBottom;
   const channelOrder = controls.channelOrder;
   const normalize = controls.normalize;
+  const resizeAlgorithm = controls.preResizeAlgorithm;
   const mean = parseCsvNumbers(controls.mean, 3);
   const std = parseCsvNumbers(controls.std, 3).map((value) => value || 1);
   const declaredTensorType = normalizeTensorType(metadata.type);
     throw new Error(`This inspector currently supports float32 image inputs only. Model expects ${tensorType}.`);
   }
+  const sourceCanvas = document.createElement("canvas");
+  sourceCanvas.width = sourceDimensions.width;
+  sourceCanvas.height = sourceDimensions.height;
+  const sourceCtx = sourceCanvas.getContext("2d", { willReadFrequently: true });
+  if (!sourceCtx) {
+    throw new Error("2D canvas context is unavailable.");
+  }
+  sourceCtx.drawImage(imageElement, 0, 0, sourceDimensions.width, sourceDimensions.height);
+  const canvas = await resizeCanvas(sourceCanvas, width, height, resizeAlgorithm);
   const ctx = canvas.getContext("2d", { willReadFrequently: true });
   if (!ctx) {
     throw new Error("2D canvas context is unavailable.");
   }
   const pixels = ctx.getImageData(0, 0, width, height).data;
   const channels = 3;
       targetImage: `${width}x${height}`,
       tensorImage: `${paddedWidth}x${paddedHeight}`,
       layout,
+      resizeAlgorithm,
       channelOrder,
       normalize,
       mean,
   });
 }
+function buildNearestNeighborContributors(
+  sourceSize: number,
+  targetSize: number,
+): ResampleContributor[] {
+  const scale = sourceSize / Math.max(1, targetSize);
+  return Array.from({ length: targetSize }, (_, targetIndex) => {
+    const center = (targetIndex + 0.5) * scale - 0.5;
+    const sourceIndex = clamp(Math.round(center), 0, sourceSize - 1);
+    return {
+      offsets: [sourceIndex],
+      weights: [1],
+    };
+  });
+}
 function bicubicKernel(distance: number): number {
   const a = -0.5;
   const x = Math.abs(distance);
 function buildKernelContributors(
   sourceSize: number,
   targetSize: number,
+  algorithm: Exclude<DownscaleAlgorithm, "area" | "nearest">,
 ): ResampleContributor[] {
   const scale = sourceSize / Math.max(1, targetSize);
   const filterScale = Math.max(1, scale);
   targetSize: number,
   algorithm: DownscaleAlgorithm,
 ): ResampleContributor[] {
+  if (algorithm === "nearest") {
+    return buildNearestNeighborContributors(sourceSize, targetSize);
+  }
   if (algorithm === "area") {
     return buildAreaContributors(sourceSize, targetSize);
   }
   return buildKernelContributors(sourceSize, targetSize, algorithm);
 }
+export async function resizeCanvas(
   sourceCanvas: HTMLCanvasElement,
   targetWidth: number,
   targetHeight: number,
       for (let weightIndex = 0; weightIndex < contributors.offsets.length; weightIndex += 1) {
         const sourceOffset = sourceRowOffset + contributors.offsets[weightIndex] * 4;
         const weight = contributors.weights[weightIndex];
+        const sourceAlpha = sourcePixels[sourceOffset + 3];
+        const alphaWeight = (sourceAlpha / 255) * weight;
+        // Filter in premultiplied-alpha space so transparent edges do not bleed
+        // dark or fully-saturated colors into neighboring pixels.
+        temp[outputOffset] += sourcePixels[sourceOffset] * alphaWeight;
+        temp[outputOffset + 1] += sourcePixels[sourceOffset + 1] * alphaWeight;
+        temp[outputOffset + 2] += sourcePixels[sourceOffset + 2] * alphaWeight;
+        temp[outputOffset + 3] += sourceAlpha * weight;
       }
     }
         alpha += temp[sourceOffset + 3] * weight;
       }
+      const alphaByte = clamp(Math.round(alpha), 0, 255);
+      if (alpha > 1e-8) {
+        const unpremultiply = 255 / alpha;
+        outputPixels[outputOffset] = clamp(Math.round(red * unpremultiply), 0, 255);
+        outputPixels[outputOffset + 1] = clamp(Math.round(green * unpremultiply), 0, 255);
+        outputPixels[outputOffset + 2] = clamp(Math.round(blue * unpremultiply), 0, 255);
+      } else {
+        outputPixels[outputOffset] = 0;
+        outputPixels[outputOffset + 1] = 0;
+        outputPixels[outputOffset + 2] = 0;
+      }
+      outputPixels[outputOffset + 3] = alphaByte;
     }
     if (shouldYield && y > 0 && y % 32 === 0) {
   return outputCanvas;
 }
+export async function downscaleCanvas(
+  sourceCanvas: HTMLCanvasElement,
+  targetWidth: number,
+  targetHeight: number,
+  algorithm: DownscaleAlgorithm,
+): Promise<HTMLCanvasElement> {
+  return resizeCanvas(sourceCanvas, targetWidth, targetHeight, algorithm);
+}
 export async function tensorToPreview(
   tensor: ort.Tensor | undefined,
   cropInfo: PreprocessResult["outputCrop"] | null = null,

src/lib/types.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type * as ort from "onnxruntime-web";
-export type DownscaleAlgorithm = "lanczos" | "area" | "bicubic";
 export interface ModelConfigEntry {
   id: string;
@@ -78,6 +78,7 @@ export interface InspectorControls {
   width: string;
   height: string;
   outputScale: string;
   outputScaleAlgorithm: DownscaleAlgorithm;
   optLevel: "all" | "extended" | "basic" | "disabled";
   webgpuLayout: "NCHW" | "NHWC";

 import type * as ort from "onnxruntime-web";
+export type DownscaleAlgorithm = "lanczos" | "area" | "bicubic" | "nearest";
 export interface ModelConfigEntry {
   id: string;
   width: string;
   height: string;
   outputScale: string;
+  preResizeAlgorithm: DownscaleAlgorithm;
   outputScaleAlgorithm: DownscaleAlgorithm;
   optLevel: "all" | "extended" | "basic" | "disabled";
   webgpuLayout: "NCHW" | "NHWC";