Resizable Image Previews

backend/src/nodes/properties/outputs/numpy_outputs.py

@@ -166,37 +166,19 @@ def get_broadcast_data(self, value: np.ndarray):
         h, w, c = get_h_w_c(img)
         image_size = max(h, w)
 
-        preview_sizes = [2048, 1024, 512, 256]
         preview_size_grace = 1.2
 
-        start_index = len(preview_sizes) - 1
-        for i, size in enumerate(preview_sizes):
-            if size <= image_size and image_size <= size * preview_size_grace:
-                # this preview size will perfectly fit the image
-                start_index = i
-                break
-            if image_size > size:
-                # the image size is larger than the preview size, so try to pick the previous size
-                start_index = max(0, i - 1)
-                break
-
-        previews = []
-
-        # Encode for multiple scales. Use the preceding scale to save time encoding the smaller sizes.
         last_encoded = img
-        for size in preview_sizes[start_index:]:
-            largest_preview = size == preview_sizes[start_index]
-            url, last_encoded = preview_encode(
-                last_encoded,
-                target_size=size,
-                grace=preview_size_grace,
-                lossless=largest_preview,
-            )
-            le_h, le_w, _ = get_h_w_c(last_encoded)
-            previews.insert(0, {"size": max(le_h, le_w), "url": url})
+        url, last_encoded = preview_encode(
+            last_encoded,
+            target_size=min(image_size, 2048),
+            grace=preview_size_grace,
+            lossless=True,
+        )
+        le_h, le_w, _ = get_h_w_c(last_encoded)
 
         return {
-            "previews": previews,
+            "preview": {"size": max(le_h, le_w), "url": url},
             "height": h,
             "width": w,
             "channels": c,

src/common/common-types.ts

@@ -241,6 +241,7 @@ export type NodeType = 'regularNode' | 'iterator' | 'iteratorHelper';
 
 export type InputData = Readonly<Record<InputId, InputValue>>;
 export type InputSize = Readonly<Record<InputId, Readonly<Size>>>;
+export type OutputSize = Readonly<Record<OutputId, Readonly<Size>>>;
 export type OutputData = Readonly<Record<OutputId, unknown>>;
 export type OutputTypes = Readonly<Partial<Record<OutputId, ExpressionJson | null>>>;
 export type GroupState = Readonly<Record<GroupId, unknown>>;
@@ -278,6 +279,7 @@ export interface NodeData {
     readonly inputData: InputData;
     readonly groupState?: GroupState;
     readonly inputSize?: InputSize;
+    readonly outputSize?: OutputSize;
     readonly invalid?: boolean;
     readonly iteratorSize?: Readonly<IteratorSize>;
     readonly minWidth?: number;

src/renderer/components/NodeDocumentation/NodeExample.tsx

@@ -10,6 +10,8 @@ import {
     InputValue,
     NodeData,
     NodeSchema,
+    OutputId,
+    OutputSize,
     Size,
 } from '../../../common/common-types';
 import { checkNodeValidity } from '../../../common/nodes/checkNodeValidity';
@@ -77,6 +79,14 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
         [setInputSize]
     );
 
+    const [outputSize, setOutputSize] = useStateForSchema<OutputSize>(selectedSchema, EMPTY_OBJECT);
+    const setSingleOutputSize = useCallback(
+        (outputId: OutputId, size: Readonly<Size>): void => {
+            setOutputSize((prev) => ({ ...prev, [outputId]: size }));
+        },
+        [setOutputSize]
+    );
+
     const nodeIdPrefix = 'FakeId ';
     const suffixLength = 36 - nodeIdPrefix.length;
     const nodeId =
@@ -155,6 +165,8 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
                                     setInputValue,
                                     inputSize,
                                     setInputSize: setSingleInputSize,
+                                    outputSize,
+                                    setOutputSize: setSingleOutputSize,
                                     isLocked: false,
                                     connectedInputs: EMPTY_SET,
                                     connectedOutputs: EMPTY_SET,

src/renderer/components/node/NodeOutputs.tsx

@@ -1,7 +1,7 @@
 import { NeverType, Type, evaluate } from '@chainner/navi';
 import { memo, useCallback, useEffect } from 'react';
 import { useContext, useContextSelector } from 'use-context-selector';
-import { OutputId, OutputKind } from '../../../common/common-types';
+import { OutputId, OutputKind, Size } from '../../../common/common-types';
 import { log } from '../../../common/log';
 import { getChainnerScope } from '../../../common/types/chainner-scope';
 import { ExpressionJson, fromJson } from '../../../common/types/json';
@@ -48,7 +48,7 @@ interface NodeOutputProps {
 }
 
 export const NodeOutputs = memo(({ nodeState, animated }: NodeOutputProps) => {
-    const { id, schema, schemaId } = nodeState;
+    const { id, schema, schemaId, outputSize, setOutputSize } = nodeState;
 
     const { functionDefinitions } = useContext(BackendContext);
     const { setManualOutputType } = useContext(GlobalContext);
@@ -90,6 +90,8 @@ export const NodeOutputs = memo(({ nodeState, animated }: NodeOutputProps) => {
                 const definitionType = functions?.get(output.id) ?? NeverType.instance;
                 const type = nodeState.type.instance?.outputs.get(output.id);
 
+                const size = outputSize?.[output.id];
+
                 const OutputType = OutputComponents[output.kind];
                 return (
                     <OutputContainer
@@ -107,6 +109,10 @@ export const NodeOutputs = memo(({ nodeState, animated }: NodeOutputProps) => {
                             id={id}
                             output={output}
                             schema={nodeState.schema}
+                            setSize={(newSize: Readonly<Size>) => {
+                                setOutputSize(output.id, newSize);
+                            }}
+                            size={size}
                             type={type ?? NeverType.instance}
                             useOutputData={useOutputData}
                         />