Add Separate Alpha option to Resize node (#2400)

* Add Separate Alpha option to Resize node

* Display hints on checkboxes

* improve docs

backend/src/packages/chaiNNer_standard/image_dimension/resize/resize.py

@@ -4,9 +4,10 @@
 
 import numpy as np
 
-from nodes.groups import if_enum_group
+from nodes.groups import Condition, if_enum_group, if_group
 from nodes.impl.resize import ResizeFilter, resize
 from nodes.properties.inputs import (
+    BoolInput,
     EnumInput,
     ImageInput,
     NumberInput,
@@ -51,6 +52,16 @@ class ImageResizeMode(Enum):
             NumberInput("Height", minimum=1, default=1, unit="px").with_id(4),
         ),
         ResizeFilterInput().with_id(5),
+        if_group(Condition.type(0, "Image { channels: 4 } "))(
+            BoolInput("Separate Alpha", default=False)
+            .with_docs(
+                "Resize alpha separately from color. Enable this option of the alpha channel of the image is **not** transparency.",
+                "To resize images with transparency correctly, the alpha channels must be multiplied with the color channels before resizing. While this will produce correct color values, it will also set the color of fully transparent pixels to black. This is an issue if the alpha channel isn't transparency. E.g. games often use the alpha channel of textures for other purposes, such as height maps or edge maps. For such images, the alpha channel has to be resized separately or else it will corrupt the color channels.",
+                "For images where the alpha channel is transparency (most transparent images), this option should be **disabled**.",
+                hint=True,
+            )
+            .with_id(6)
+        ),
     ],
     outputs=[
         ImageOutput(
@@ -86,6 +97,7 @@ def resize_node(
     width: int,
     height: int,
     filter: ResizeFilter,
+    separate_alpha: bool,
 ) -> np.ndarray:
     h, w, _ = get_h_w_c(img)
 
@@ -102,6 +114,6 @@ def resize_node(
         img,
         out_dims,
         filter,
-        separate_alpha=False,
+        separate_alpha=separate_alpha,
         gamma_correction=False,
     )

src/renderer/components/inputs/DropDownInput.tsx

@@ -1,4 +1,7 @@
+import { QuestionIcon } from '@chakra-ui/icons';
+import { Tooltip } from '@chakra-ui/react';
 import { memo, useCallback } from 'react';
+import { Markdown } from '../Markdown';
 import { Checkbox } from './elements/Checkbox';
 import { DropDown } from './elements/Dropdown';
 import { TabList } from './elements/TabList';
@@ -8,15 +11,36 @@ import { InputProps } from './props';
 type DropDownInputProps = InputProps<'dropdown', string | number>;
 
 export const DropDownInput = memo(({ value, setValue, input, isLocked }: DropDownInputProps) => {
-    const { options, def, label, preferredStyle, groups } = input;
+    const { options, def, label, preferredStyle, groups, hint, description } = input;
 
     const reset = useCallback(() => setValue(def), [setValue, def]);
 
     if (preferredStyle === 'checkbox' && options.length === 2) {
         // checkbox assumes the first options means yes and the second option means no
+
+        let afterText;
+        if (hint && description) {
+            afterText = (
+                <Tooltip
+                    hasArrow
+                    borderRadius={8}
+                    label={<Markdown nonInteractive>{description}</Markdown>}
+                    openDelay={500}
+                    px={2}
+                    py={1}
+                >
+                    <QuestionIcon
+                        boxSize={3}
+                        ml={1}
+                        verticalAlign="baseline"
+                    />
+                </Tooltip>
+            );
+        }
         return (
             <WithoutLabel>
                 <Checkbox
+                    afterText={afterText}
                     isDisabled={isLocked}
                     label={label}
                     no={options[1]}

src/renderer/components/inputs/elements/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { Box, Checkbox as ChakraCheckbox } from '@chakra-ui/react';
-import { memo, useEffect } from 'react';
+import { ReactNode, memo, useEffect } from 'react';
 import { DropDownInput, InputSchemaValue } from '../../../../common/common-types';
 import './Checkbox.scss';
 
@@ -14,10 +14,11 @@ export interface CheckboxProps {
     yes: Option;
     no: Option;
     label: string;
+    afterText?: ReactNode;
 }
 
 export const Checkbox = memo(
-    ({ value, onChange, reset, isDisabled, yes, no, label }: CheckboxProps) => {
+    ({ value, onChange, reset, isDisabled, yes, no, label, afterText }: CheckboxProps) => {
         // reset invalid values to default
         useEffect(() => {
             if (value === undefined || (yes.value !== value && no.value !== value)) {
@@ -43,6 +44,7 @@ export const Checkbox = memo(
                 >
                     {label}
                 </Box>
+                {afterText}
             </ChakraCheckbox>
         );
     }