Hires Addition

Updated ImageMetaDataViewer with correct values
Updated tooltip text
Add arguments for Hires & Seamless Metadata

Author: hipsterusername

backend/invoke_ai_web_server.py

@@ -723,6 +723,7 @@ def parameters_to_generated_image_metadata(self, parameters):
                 'height',
                 'extra',
                 'seamless',
+                'hires_fix',
             ]
 
             rfc_dict = {}

backend/modules/parameters.py

@@ -36,6 +36,8 @@ def parameters_to_command(params):
         switches.append(f'-A {params["sampler_name"]}')
     if "seamless" in params and params["seamless"] == True:
         switches.append(f"--seamless")
+    if "hires_fix" in params and params["hires_fix"] == True:
+        switches.append(f"--hires")
     if "init_img" in params and len(params["init_img"]) > 0:
         switches.append(f'-I {params["init_img"]}')
     if "init_mask" in params and len(params["init_mask"]) > 0:

backend/server.py

@@ -493,6 +493,7 @@ def parameters_to_generated_image_metadata(parameters):
         "height",
         "extra",
         "seamless",
+        "hires_fix",
     ]
 
     rfc_dict = {}

frontend/dist/assets/index.560edd47.js

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>InvokeAI - A Stable Diffusion Toolkit</title>
   <link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" />
-  <script type="module" crossorigin src="/assets/index.989a0ca2.js"></script>
+  <script type="module" crossorigin src="/assets/index.560edd47.js"></script>
   <link rel="stylesheet" href="/assets/index.58175ea1.css">
 </head>
 

frontend/dist/assets/index.989a0ca2.js

@@ -50,6 +50,7 @@ export const PARAMETERS: { [key: string]: string } = {
   maskPath: 'Initial Image Mask',
   shouldFitToWidthHeight: 'Fit Initial Image',
   seamless: 'Seamless Tiling',
+  hiresFix: 'High Resolution Optimizations',
 };
 
 export const NUMPY_RAND_MIN = 0;

frontend/dist/index.html

@@ -14,10 +14,13 @@ export enum Feature {
   FACE_CORRECTION,
   IMAGE_TO_IMAGE,
 }
-
+/** For each tooltip in the UI, the below feature definitions & props will pull relevant information into the tooltip.
+ * 
+ * To-do: href & GuideImages are placeholders, and are not currently utilized, but will be updated (along with the tooltip UI) as feature and UI development and we get a better idea on where things "forever homes" will be . 
+ */
 export const FEATURES: Record<Feature, FeatureHelpInfo> = {
   [Feature.PROMPT]: {
-    text: 'This field will take all prompt text, including both content and stylistic terms. CLI Commands will not work in the prompt.',
+    text: 'This field will take all prompt text, including both content and stylistic terms. While weights can be included in the prompt, standard CLI Commands/parameters will not work.',
     href: 'link/to/docs/feature3.html',
     guideImage: 'asset/path.gif',
   },
@@ -27,17 +30,16 @@ export const FEATURES: Record<Feature, FeatureHelpInfo> = {
     guideImage: 'asset/path.gif',
   },
   [Feature.OTHER]: {
-    text: 'Additional Options',
-    href: 'link/to/docs/feature3.html',
+    text: 'These options will enable alternative processing modes for Invoke. Seamless tiling will work to generate repeating patterns in the output. High Resolution Optimization performs a two-step generation cycle, and should be used at higher resolutions when you desire a more coherent image/composition. ',    href: 'link/to/docs/feature3.html',
     guideImage: 'asset/path.gif',
   },
   [Feature.SEED]: {
-    text: 'Seed values provide an initial set of noise which guide the denoising process.',
+    text: 'Seed values provide an initial set of noise which guide the denoising process, and can be randomized or populated with a seed from a previous invocation. The Threshold feature can be used to mitigate undesirable outcomes at higher CFG values (try between 0-10), and Perlin can be used to add Perlin noise into the denoising process - Both serve to add variation to your outputs. ',
     href: 'link/to/docs/feature3.html',
     guideImage: 'asset/path.gif',
   },
   [Feature.VARIATIONS]: {
-    text: 'Try a variation with an amount of between 0 and 1 to change the output image for the set seed.',
+    text: 'Try a variation with an amount of between 0 and 1 to change the output image for the set seed - Interesting variations on the seed are found between 0.1 and 0.3.',
     href: 'link/to/docs/feature3.html',
     guideImage: 'asset/path.gif',
   },
@@ -47,8 +49,8 @@ export const FEATURES: Record<Feature, FeatureHelpInfo> = {
     guideImage: 'asset/path.gif',
   },
   [Feature.FACE_CORRECTION]: {
-    text: 'Using GFPGAN or CodeFormer, Face Correction will attempt to identify faces in outputs, and correct any defects/abnormalities. Higher values will apply a stronger corrective pressure on outputs.',
-    href: 'link/to/docs/feature2.html',
+    text: 'Using GFPGAN, Face Correction will attempt to identify faces in outputs, and correct any defects/abnormalities. Higher values will apply a stronger corrective pressure on outputs, resulting in more appealing faces (with less respect for accuracy of the original subject).',
+    href: 'link/to/docs/feature3.html',
     guideImage: 'asset/path.gif',
   },
   [Feature.IMAGE_TO_IMAGE]: {

frontend/src/app/constants.ts

@@ -55,6 +55,7 @@ export declare type CommonGeneratedImageMetadata = {
   width: number;
   height: number;
   seamless: boolean;
+  hires_fix: boolean;
   extra: null | Record<string, never>; // Pending development of RFC #266
 };
 

frontend/src/app/features.ts

@@ -29,6 +29,7 @@ export const frontendToBackendParameters = (
     sampler,
     seed,
     seamless,
+    hiresFix,
     shouldUseInitImage,
     img2imgStrength,
     initialImagePath,
@@ -59,6 +60,7 @@ export const frontendToBackendParameters = (
     sampler_name: sampler,
     seed,
     seamless,
+    hires_fix: hiresFix,
     progress_images: shouldDisplayInProgress,
   };
 
@@ -123,6 +125,7 @@ export const backendToFrontendParameters = (parameters: {
     sampler_name,
     seed,
     seamless,
+    hires_fix,
     progress_images,
     variation_amount,
     with_variations,
@@ -185,6 +188,7 @@ export const backendToFrontendParameters = (parameters: {
     options.sampler = sampler_name;
     options.seed = seed;
     options.seamless = seamless;
+    options.hiresFix = hires_fix;
   }
 
   return options;

frontend/src/app/invokeai.d.ts

@@ -16,11 +16,13 @@ import {
   setCfgScale,
   setGfpganStrength,
   setHeight,
+  setHiresFix,
   setImg2imgStrength,
   setInitialImagePath,
   setMaskPath,
   setPrompt,
   setSampler,
+  setSeamless,
   setSeed,
   setSeedWeights,
   setShouldFitToWidthHeight,
@@ -116,6 +118,7 @@ const ImageMetadataViewer = memo(
       steps,
       cfg_scale,
       seamless,
+      hires_fix,
       width,
       height,
       strength,
@@ -214,7 +217,14 @@ const ImageMetadataViewer = memo(
                 <MetadataItem
                   label="Seamless"
                   value={seamless}
-                  onClick={() => dispatch(setWidth(seamless))}
+                  onClick={() => dispatch(setSeamless(seamless))}
+                />
+              )}
+              {hires_fix && (
+                <MetadataItem
+                  label="High Resolution Optimization"
+                  value={hires_fix}
+                  onClick={() => dispatch(setHiresFix(hires_fix))}
                 />
               )}
               {width && (

frontend/src/common/util/parameterTranslation.ts

@@ -0,0 +1,32 @@
+import { Flex } from '@chakra-ui/react';
+import { RootState } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/store';
+import { setHiresFix } from './optionsSlice';
+import { ChangeEvent } from 'react';
+import IAISwitch from '../../common/components/IAISwitch';
+
+/**
+ * Image output options. Includes width, height, seamless tiling.
+ */
+const HiresOptions = () => {
+  const dispatch = useAppDispatch();
+
+  const hiresFix = useAppSelector((state: RootState) => state.options.hiresFix);
+
+  const handleChangeHiresFix = (e: ChangeEvent<HTMLInputElement>) =>
+    dispatch(setHiresFix(e.target.checked));
+
+
+  return (
+    <Flex gap={2} direction={'column'}>
+      <IAISwitch
+        label="High Res Optimization"
+        fontSize={'md'}
+        isChecked={hiresFix}
+        onChange={handleChangeHiresFix}
+      />
+    </Flex>
+  );
+};
+
+export default HiresOptions;

frontend/src/features/gallery/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -1,29 +1,14 @@
 import { Flex } from '@chakra-ui/react';
-import { RootState } from '../../app/store';
-import { useAppDispatch, useAppSelector } from '../../app/store';
-import { setSeamless } from './optionsSlice';
-import { ChangeEvent } from 'react';
-import IAISwitch from '../../common/components/IAISwitch';
 
-/**
- * Image output options. Includes width, height, seamless tiling.
- */
-const OutputOptions = () => {
-  const dispatch = useAppDispatch();
-
-  const seamless = useAppSelector((state: RootState) => state.options.seamless);
+import HiresOptions from './HiresOptions';
+import SeamlessOptions from './SeamlessOptions';
 
-  const handleChangeSeamless = (e: ChangeEvent<HTMLInputElement>) =>
-    dispatch(setSeamless(e.target.checked));
+const OutputOptions = () => {
 
   return (
     <Flex gap={2} direction={'column'}>
-      <IAISwitch
-        label="Seamless tiling"
-        fontSize={'md'}
-        isChecked={seamless}
-        onChange={handleChangeSeamless}
-      />
+      <SeamlessOptions />
+      <HiresOptions />
     </Flex>
   );
 };

frontend/src/features/options/HiresOptions.tsx

@@ -0,0 +1,28 @@
+import { Flex } from '@chakra-ui/react';
+import { RootState } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/store';
+import { setSeamless } from './optionsSlice';
+import { ChangeEvent } from 'react';
+import IAISwitch from '../../common/components/IAISwitch';
+
+const SeamlessOptions = () => {
+  const dispatch = useAppDispatch();
+
+  const seamless = useAppSelector((state: RootState) => state.options.seamless);
+
+  const handleChangeSeamless = (e: ChangeEvent<HTMLInputElement>) =>
+    dispatch(setSeamless(e.target.checked));
+
+  return (
+    <Flex gap={2} direction={'column'}>
+      <IAISwitch
+        label="Seamless tiling"
+        fontSize={'md'}
+        isChecked={seamless}
+        onChange={handleChangeSeamless}
+      />
+    </Flex>
+  );
+};
+
+export default SeamlessOptions;

frontend/src/features/options/OutputOptions.tsx

@@ -25,6 +25,7 @@ export interface OptionsState {
   initialImagePath: string | null;
   maskPath: string;
   seamless: boolean;
+  hiresFix: boolean;
   shouldFitToWidthHeight: boolean;
   shouldGenerateVariations: boolean;
   variationAmount: number;
@@ -50,6 +51,7 @@ const initialOptionsState: OptionsState = {
   perlin: 0,
   seed: 0,
   seamless: false,
+  hiresFix: false,
   shouldUseInitImage: false,
   img2imgStrength: 0.75,
   initialImagePath: null,
@@ -138,6 +140,9 @@ export const optionsSlice = createSlice({
     setSeamless: (state, action: PayloadAction<boolean>) => {
       state.seamless = action.payload;
     },
+    setHiresFix: (state, action: PayloadAction<boolean>) => {
+      state.hiresFix = action.payload;
+    },
     setShouldFitToWidthHeight: (state, action: PayloadAction<boolean>) => {
       state.shouldFitToWidthHeight = action.payload;
     },
@@ -180,6 +185,7 @@ export const optionsSlice = createSlice({
         threshold,
         perlin,
         seamless,
+        hires_fix,
         width,
         height,
         strength,
@@ -256,6 +262,7 @@ export const optionsSlice = createSlice({
       if (perlin) state.perlin = perlin;
       if (typeof perlin === 'undefined') state.perlin = 0;      
       if (typeof seamless === 'boolean') state.seamless = seamless;
+      if (typeof hires_fix === 'boolean') state.hiresFix = hires_fix;
       if (width) state.width = width;
       if (height) state.height = height;
     },
@@ -301,6 +308,7 @@ export const {
   setSampler,
   setSeed,
   setSeamless,
+  setHiresFix,
   setImg2imgStrength,
   setGfpganStrength,
   setUpscalingLevel,

frontend/src/features/options/SeamlessOptions.tsx

@@ -155,6 +155,7 @@ def __init__(
         self.precision      = precision
         self.strength       = 0.75
         self.seamless       = False
+        self.hires_fix      = False
         self.embedding_path = embedding_path
         self.model          = None     # empty for now
         self.sampler        = None
@@ -269,6 +270,7 @@ def prompt2image(
            height                          // height of image, in multiples of 64 (512)
            cfg_scale                       // how strongly the prompt influences the image (7.5) (must be >1)
            seamless                        // whether the generated image should tile
+           hires_fix                        // whether the Hires Fix should be applied during generation
            init_img                        // path to an initial image
            strength                        // strength for noising/unnoising init_img. 0.0 preserves image exactly, 1.0 replaces it completely
            gfpgan_strength                 // strength for GFPGAN. 0.0 preserves image exactly, 1.0 replaces it completely
@@ -302,6 +304,7 @@ def process_image(image,seed):
         width = width or self.width
         height = height or self.height
         seamless = seamless or self.seamless
+        hires_fix = hires_fix or self.hires_fix
         cfg_scale = cfg_scale or self.cfg_scale
         ddim_eta = ddim_eta or self.ddim_eta
         iterations = iterations or self.iterations

frontend/src/features/options/optionsSlice.ts

@@ -37,6 +37,7 @@ def build_opt(post_data, seed, gfpgan_model_exists):
     setattr(opt, 'seed', None if int(post_data['seed']) == -1 else int(post_data['seed']))
     setattr(opt, 'threshold', float(post_data['threshold']))
     setattr(opt, 'perlin', float(post_data['perlin']))
+    setattr(opt, 'hires_fix', 'hires_fix' in post_data)
     setattr(opt, 'variation_amount', float(post_data['variation_amount']) if int(post_data['seed']) != -1 else 0)
     setattr(opt, 'with_variations', [])
     setattr(opt, 'embiggen', None)

ldm/generate.py

@@ -35,6 +35,7 @@ class DreamBase():
   perlin: float = 0.0
   sampler_name: string = 'klms'
   seamless: bool = False
+  hires_fix: bool = False
   model: str = None # The model to use (currently unused)
   embeddings = None # The embeddings to use (currently unused)
   progress_images: bool = False
@@ -91,6 +92,7 @@ def parse_json(self, j, new_instance=False):
       # model: str = None # The model to use (currently unused)
       # embeddings = None # The embeddings to use (currently unused)
       self.seamless = 'seamless' in j
+      self.hires_fix = 'hires_fix' in j
       self.progress_images = 'progress_images' in j
 
     # GFPGAN

ldm/invoke/server.py

@@ -375,6 +375,7 @@ def __generate(self, jobRequest: JobRequest):
           upscale          = upscale,
           sampler_name     = jobRequest.sampler_name,
           seamless         = jobRequest.seamless,
+          hires_fix        = jobRequest.hires_fix,
           embiggen         = jobRequest.embiggen,
           embiggen_tiles   = jobRequest.embiggen_tiles,
           step_callback    = lambda sample, step: self.__on_progress(jobRequest, sample, step),