From 4c75b9341019f7e92c1642b5f53de62dfb3cc3d7 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 24 Jul 2024 19:23:14 -0400
Subject: [PATCH] feat(ui): add informational popovers for upscale params

---
 invokeai/frontend/web/public/locales/en.json  | 24 +++++++++++++++++++
 .../InformationalPopover/constants.ts         |  6 ++++-
 .../components/Upscale/ParamCreativity.tsx    |  5 +++-
 .../components/Upscale/ParamSpandrelModel.tsx |  5 +++-
 .../components/Upscale/ParamStructure.tsx     |  5 +++-
 .../UpscaleScaleSlider.tsx                    |  5 +++-
 6 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 524be21a28..2e8adab568 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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 is used to create the initial resized image for upscaling details to be added to. You can upload new upscaling models that are supported for use in this and other post-processing workflows."
+            ]
+        },
+        "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 determines how much the AI can change your image based on your prompt. Low creativity stays close to the original, while high creativity follows the prompt more freely, potentially creating very different results."
+            ]
+        },
+        "structure": {
+            "heading": "Structure",
+            "paragraphs": [
+                "Structure controls how closely the new image keeps the layout of your original. Low structure allows major composition changes, while high structure maintains the original layout."
+            ]
         }
     },
     "unifiedCanvas": {
diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
index f973d98f1a..de28f72223 100644
--- a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
+++ b/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;
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamCreativity.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamCreativity.tsx
index 955c3ded5a..0304a732cb 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamCreativity.tsx
+++ b/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}
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
index 7b4fb2bfef..501245d77b 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
+++ b/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
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamStructure.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamStructure.tsx
index 07c543f596..d3cd85c846 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamStructure.tsx
+++ b/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}
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx
index 385add771a..dd4f46557f 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx
+++ b/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}