From d61b3818fe80c3d337f5cfa54f117dce6647408b Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Fri, 30 Jun 2023 06:36:42 +1200
Subject: [PATCH] feat: Add VAE Select to Linea UI Panels (non func)

---
 .../fields/VaeModelInputFieldComponent.tsx    |  3 +-
 ...dulerAndModel.tsx => ParamModelandVAE.tsx} | 12 ++++----
 .../features/system/components/VAESelect.tsx  |  6 +---
 .../ImageToImageTabCoreParameters.tsx         | 30 ++++++++++---------
 .../TextToImageTabCoreParameters.tsx          | 24 ++++++++-------
 .../UnifiedCanvasCoreParameters.tsx           | 26 ++++++++--------
 6 files changed, 51 insertions(+), 50 deletions(-)
 rename invokeai/frontend/web/src/features/parameters/components/Parameters/Core/{ParamSchedulerAndModel.tsx => ParamModelandVAE.tsx} (60%)

diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/VaeModelInputFieldComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/VaeModelInputFieldComponent.tsx
index 4852fab590..8a341d920b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/VaeModelInputFieldComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/VaeModelInputFieldComponent.tsx
@@ -7,7 +7,6 @@ import {
   VaeModelInputFieldValue,
 } from 'features/nodes/types/types';
 import { MODEL_TYPE_MAP as BASE_MODEL_NAME_MAP } from 'features/system/components/ModelSelect';
-import { MODEL_TYPE_MAP } from 'features/system/components/VAESelect';
 import { forEach } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -55,7 +54,7 @@ const VaeModelInputFieldComponent = (
       data.push({
         value: id,
         label: model.name,
-        group: MODEL_TYPE_MAP[model.base_model],
+        group: BASE_MODEL_NAME_MAP[model.base_model],
       });
     });
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSchedulerAndModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAE.tsx
similarity index 60%
rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSchedulerAndModel.tsx
rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAE.tsx
index 5092893eed..1c704a86ef 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSchedulerAndModel.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAE.tsx
@@ -1,19 +1,19 @@
 import { Box, Flex } from '@chakra-ui/react';
 import ModelSelect from 'features/system/components/ModelSelect';
+import VAESelect from 'features/system/components/VAESelect';
 import { memo } from 'react';
-import ParamScheduler from './ParamScheduler';
 
-const ParamSchedulerAndModel = () => {
+const ParamModelandVAE = () => {
   return (
     <Flex gap={3} w="full">
-      <Box w="25rem">
-        <ParamScheduler />
-      </Box>
       <Box w="full">
         <ModelSelect />
       </Box>
+      <Box w="full">
+        <VAESelect />
+      </Box>
     </Flex>
   );
 };
 
-export default memo(ParamSchedulerAndModel);
+export default memo(ParamModelandVAE);
diff --git a/invokeai/frontend/web/src/features/system/components/VAESelect.tsx b/invokeai/frontend/web/src/features/system/components/VAESelect.tsx
index 4708e1bb17..19b508d30f 100644
--- a/invokeai/frontend/web/src/features/system/components/VAESelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/VAESelect.tsx
@@ -10,11 +10,7 @@ import { useListModelsQuery } from 'services/api/endpoints/models';
 
 import { RootState } from 'app/store/store';
 import { vaeSelected } from 'features/parameters/store/generationSlice';
-
-export const MODEL_TYPE_MAP = {
-  'sd-1': 'Stable Diffusion 1.x',
-  'sd-2': 'Stable Diffusion 2.x',
-};
+import { MODEL_TYPE_MAP } from './ModelSelect';
 
 const VAESelect = () => {
   const dispatch = useAppDispatch();
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
index cdbec9b55d..89286232c6 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
@@ -1,20 +1,21 @@
-import { memo } from 'react';
 import { Box, Flex, useDisclosure } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
-import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
-import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
-import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
-import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
-import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
-import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
-import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
-import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
 import IAICollapse from 'common/components/IAICollapse';
+import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
+import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
+import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
+import ParamModelandVAE from 'features/parameters/components/Parameters/Core/ParamModelandVAE';
+import ParamScheduler from 'features/parameters/components/Parameters/Core/ParamScheduler';
+import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
+import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
+import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
+import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
+import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
+import { generationSelector } from 'features/parameters/store/generationSelectors';
+import { uiSelector } from 'features/ui/store/uiSelectors';
+import { memo } from 'react';
 
 const selector = createSelector(
   [uiSelector, generationSelector],
@@ -41,7 +42,7 @@ const ImageToImageTabCoreParameters = () => {
       >
         {shouldUseSliders ? (
           <>
-            <ParamSchedulerAndModel />
+            <ParamModelandVAE />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>
@@ -58,7 +59,8 @@ const ImageToImageTabCoreParameters = () => {
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
-            <ParamSchedulerAndModel />
+            <ParamModelandVAE />
+            <ParamScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
index 07297bda31..75d54667e9 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
@@ -1,17 +1,18 @@
-import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
-import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
-import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
-import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
-import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
 import { Box, Flex, useDisclosure } from '@chakra-ui/react';
-import { useAppSelector } from 'app/store/storeHooks';
 import { createSelector } from '@reduxjs/toolkit';
-import { uiSelector } from 'features/ui/store/uiSelectors';
+import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { memo } from 'react';
-import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
 import IAICollapse from 'common/components/IAICollapse';
+import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
+import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
+import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
+import ParamModelandVAE from 'features/parameters/components/Parameters/Core/ParamModelandVAE';
+import ParamScheduler from 'features/parameters/components/Parameters/Core/ParamScheduler';
+import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
+import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
 import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
+import { uiSelector } from 'features/ui/store/uiSelectors';
+import { memo } from 'react';
 
 const selector = createSelector(
   uiSelector,
@@ -37,7 +38,7 @@ const TextToImageTabCoreParameters = () => {
       >
         {shouldUseSliders ? (
           <>
-            <ParamSchedulerAndModel />
+            <ParamModelandVAE />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>
@@ -54,7 +55,8 @@ const TextToImageTabCoreParameters = () => {
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
-            <ParamSchedulerAndModel />
+            <ParamModelandVAE />
+            <ParamScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
index 42e19eb096..9226973101 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
@@ -1,18 +1,19 @@
-import { memo } from 'react';
 import { Box, Flex, useDisclosure } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
-import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
-import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
-import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
-import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
-import ParamBoundingBoxWidth from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth';
-import ParamBoundingBoxHeight from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight';
-import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
 import IAICollapse from 'common/components/IAICollapse';
+import ParamBoundingBoxHeight from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight';
+import ParamBoundingBoxWidth from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth';
+import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
+import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
+import ParamModelandVAE from 'features/parameters/components/Parameters/Core/ParamModelandVAE';
+import ParamScheduler from 'features/parameters/components/Parameters/Core/ParamScheduler';
+import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
+import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
+import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
+import { uiSelector } from 'features/ui/store/uiSelectors';
+import { memo } from 'react';
 
 const selector = createSelector(
   uiSelector,
@@ -38,7 +39,7 @@ const UnifiedCanvasCoreParameters = () => {
       >
         {shouldUseSliders ? (
           <>
-            <ParamSchedulerAndModel />
+            <ParamModelandVAE />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>
@@ -55,7 +56,8 @@ const UnifiedCanvasCoreParameters = () => {
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
-            <ParamSchedulerAndModel />
+            <ParamModelandVAE />
+            <ParamScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>