feat(ui): upscale folllow-ups

invokeai/frontend/web/public/locales/en.json

@@ -1509,6 +1509,30 @@
         "seamlessTilingYAxis": {
             "heading": "Seamless Tiling Y Axis",
             "paragraphs": ["Seamlessly tile an image along the vertical axis."]
+        },
+        "upscaleModel": {
+            "heading": "Upscale Model",
+            "paragraphs": [
+                "The upscale model scales the image to the output size before details are added. Any supported upscale model may be used, but some are specialized for different kinds of images, like photos or line drawings."
+            ]
+        },
+        "scale": {
+            "heading": "Scale",
+            "paragraphs": [
+                "Scale controls the output image size, and is based on a multiple of the input image resolution. For example a 2x upscale on a 1024x1024 image would produce a 2048 x 2048 output."
+            ]
+        },
+        "creativity": {
+            "heading": "Creativity",
+            "paragraphs": [
+                "Creativity controls the amount of freedom granted to the model when adding details. Low creativity stays close to the original image, while high creativity allows for more change. When using a prompt, high creativity increases the influence of the prompt."
+            ]
+        },
+        "structure": {
+            "heading": "Structure",
+            "paragraphs": [
+                "Structure controls how closely the output image will keep to the layout of the original. Low structure allows major changes, while high structure strictly maintains the original composition and layout."
+            ]
         }
     },
     "unifiedCanvas": {

invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts

@@ -53,7 +53,11 @@ export type Feature =
   | 'refinerCfgScale'
   | 'scaleBeforeProcessing'
   | 'seamlessTilingXAxis'
-  | 'seamlessTilingYAxis';
+  | 'seamlessTilingYAxis'
+  | 'upscaleModel'
+  | 'scale'
+  | 'creativity'
+  | 'structure';
 
 export type PopoverData = PopoverProps & {
   image?: string;

invokeai/frontend/web/src/features/parameters/components/Upscale/ParamCreativity.tsx

@@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { creativityChanged } from 'features/parameters/store/upscaleSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,7 +26,9 @@ const ParamCreativity = () => {
 
   return (
     <FormControl>
-      <FormLabel>{t('upscaling.creativity')}</FormLabel>
+      <InformationalPopover feature="creativity">
+        <FormLabel>{t('upscaling.creativity')}</FormLabel>
+      </InformationalPopover>
       <CompositeSlider
         value={creativity}
         defaultValue={initial}

invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx

@@ -1,5 +1,6 @@
 import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
 import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
 import { memo, useCallback, useMemo } from 'react';
@@ -37,7 +38,9 @@ const ParamSpandrelModel = () => {
 
   return (
     <FormControl orientation="vertical">
-      <FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
+      <InformationalPopover feature="upscaleModel">
+        <FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
+      </InformationalPopover>
       <Tooltip label={tooltipLabel}>
         <Box w="full">
           <Combobox

invokeai/frontend/web/src/features/parameters/components/Upscale/ParamStructure.tsx

@@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { structureChanged } from 'features/parameters/store/upscaleSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,7 +26,9 @@ const ParamStructure = () => {
 
   return (
     <FormControl>
-      <FormLabel>{t('upscaling.structure')}</FormLabel>
+      <InformationalPopover feature="structure">
+        <FormLabel>{t('upscaling.structure')}</FormLabel>
+      </InformationalPopover>
       <CompositeSlider
         value={structure}
         defaultValue={initial}

invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx

@@ -64,7 +64,7 @@ export const AdvancedSettingsAccordion = memo(() => {
   const badges = useAppSelector(selectBadges);
   const { t } = useTranslation();
   const { isOpen, onToggle } = useStandaloneAccordionToggle({
-    id: 'advanced-settings',
+    id: `'advanced-settings-${activeTabName}`,
     defaultIsOpen: false,
   });
 

invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx

@@ -14,6 +14,7 @@ import ParamMainModelSelect from 'features/parameters/components/MainModel/Param
 import { UseDefaultSettingsButton } from 'features/parameters/components/MainModel/UseDefaultSettingsButton';
 import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { filter } from 'lodash-es';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -26,6 +27,7 @@ const formLabelProps: FormLabelProps = {
 export const GenerationSettingsAccordion = memo(() => {
   const { t } = useTranslation();
   const modelConfig = useSelectedModelConfig();
+  const activeTabName = useAppSelector(activeTabNameSelector);
   const selectBadges = useMemo(
     () =>
       createMemoizedSelector(selectLoraSlice, (lora) => {
@@ -42,8 +44,8 @@ export const GenerationSettingsAccordion = memo(() => {
     defaultIsOpen: false,
   });
   const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
-    id: 'generation-settings',
-    defaultIsOpen: true,
+    id: `generation-settings-${activeTabName}`,
+    defaultIsOpen: activeTabName !== 'upscaling',
   });
 
   return (

invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx

@@ -1,5 +1,6 @@
 import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { scaleChanged } from 'features/parameters/store/upscaleSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +23,9 @@ export const UpscaleScaleSlider = memo(() => {
 
   return (
     <FormControl orientation="vertical" gap={0}>
-      <FormLabel m={0}>{t('upscaling.scale')}</FormLabel>
+      <InformationalPopover feature="scale">
+        <FormLabel m={0}>{t('upscaling.scale')}</FormLabel>
+      </InformationalPopover>
       <Flex w="full" gap={4}>
         <CompositeSlider
           min={2}

invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts

@@ -18,5 +18,6 @@ export const useStandaloneAccordionToggle = (arg: UseStandaloneAccordionToggleAr
   const onToggle = useCallback(() => {
     dispatch(accordionStateChanged({ id: arg.id, isOpen: !isOpen }));
   }, [arg.id, dispatch, isOpen]);
+
   return { isOpen, onToggle };
 };