feat(ui): tidy up model manager styling

fixes #2970
2024-08-30 20:32:17 +00:00 · 2023-03-19 16:21:58 +11:00 · 2023-03-19 16:21:58 +11:00 · 93b38707b2
commit 93b38707b2
parent 6ecf53078f
7 changed files with 80 additions and 90 deletions
--- a/invokeai/frontend/web/src/common/components/IAIForm.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIForm.tsx
@ -0,0 +1,8 @@
+import { chakra } from '@chakra-ui/react';
+
+/**
+ * Chakra-enabled <form />
+ */
+const IAIForm = chakra.form;
+
+export default IAIForm;
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx
@ -25,10 +25,9 @@ import { useTranslation } from 'react-i18next';

 import type { InvokeModelConfigProps } from 'app/invokeai';
 import type { RootState } from 'app/store';
-import IAIIconButton from 'common/components/IAIIconButton';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import type { FieldInputProps, FormikProps } from 'formik';
-import { BiArrowBack } from 'react-icons/bi';
+import IAIForm from 'common/components/IAIForm';

 const MIN_MODEL_SIZE = 64;
 const MAX_MODEL_SIZE = 2048;
@ -72,19 +71,6 @@ export default function AddCheckpointModel() {

  return (
    <VStack gap={2} alignItems="flex-start">
-      <IAIIconButton
-        aria-label={t('common.back')}
-        tooltip={t('common.back')}
-        onClick={() => dispatch(setAddNewModelUIOption(null))}
-        width="max-content"
-        position="absolute"
-        zIndex={1}
-        size="sm"
-        insetInlineEnd={12}
-        top={3}
-        icon={<BiArrowBack />}
-      />
-
      <SearchModels />
      <IAICheckbox
        label={t('modelManager.addManually')}
@ -98,7 +84,7 @@ export default function AddCheckpointModel() {
          onSubmit={addModelFormSubmitHandler}
        >
          {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit} sx={{ w: 'full' }}>
              <VStack rowGap={2}>
                <Text fontSize={20} fontWeight="bold" alignSelf="start">
                  {t('modelManager.manual')}
@ -118,7 +104,7 @@ export default function AddCheckpointModel() {
                      name="name"
                      type="text"
                      validate={baseValidation}
-                      width="2xl"
+                      width="full"
                    />
                    {!!errors.name && touched.name ? (
                      <FormErrorMessage>{errors.name}</FormErrorMessage>
@ -144,7 +130,7 @@ export default function AddCheckpointModel() {
                      id="description"
                      name="description"
                      type="text"
-                      width="2xl"
+                      width="full"
                    />
                    {!!errors.description && touched.description ? (
                      <FormErrorMessage>{errors.description}</FormErrorMessage>
@ -170,7 +156,7 @@ export default function AddCheckpointModel() {
                      id="config"
                      name="config"
                      type="text"
-                      width="2xl"
+                      width="full"
                    />
                    {!!errors.config && touched.config ? (
                      <FormErrorMessage>{errors.config}</FormErrorMessage>
@ -196,7 +182,7 @@ export default function AddCheckpointModel() {
                      id="weights"
                      name="weights"
                      type="text"
-                      width="2xl"
+                      width="full"
                    />
                    {!!errors.weights && touched.weights ? (
                      <FormErrorMessage>{errors.weights}</FormErrorMessage>
@ -219,7 +205,7 @@ export default function AddCheckpointModel() {
                      id="vae"
                      name="vae"
                      type="text"
-                      width="2xl"
+                      width="full"
                    />
                    {!!errors.vae && touched.vae ? (
                      <FormErrorMessage>{errors.vae}</FormErrorMessage>
@ -231,7 +217,7 @@ export default function AddCheckpointModel() {
                  </VStack>
                </FormControl>

-                <HStack width="100%">
+                <HStack width="100%" gap={8}>
                  {/* Width */}
                  <FormControl isInvalid={!!errors.width && touched.width}>
                    <FormLabel htmlFor="width" fontSize="sm">
@ -252,7 +238,6 @@ export default function AddCheckpointModel() {
                            min={MIN_MODEL_SIZE}
                            max={MAX_MODEL_SIZE}
                            step={64}
-                            width="90%"
                            value={form.values.width}
                            onChange={(value) =>
                              form.setFieldValue(field.name, Number(value))
@ -290,7 +275,6 @@ export default function AddCheckpointModel() {
                            name="height"
                            min={MIN_MODEL_SIZE}
                            max={MAX_MODEL_SIZE}
-                            width="90%"
                            step={64}
                            value={form.values.height}
                            onChange={(value) =>
@ -319,7 +303,7 @@ export default function AddCheckpointModel() {
                  {t('modelManager.addModel')}
                </IAIButton>
              </VStack>
-            </form>
+            </IAIForm>
          )}
        </Formik>
      )}
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
@ -11,15 +11,14 @@ import { InvokeDiffusersModelConfigProps } from 'app/invokeai';
 import { addNewModel } from 'app/socketio/actions';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIButton from 'common/components/IAIButton';
-import IAIIconButton from 'common/components/IAIIconButton';
 import IAIInput from 'common/components/IAIInput';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import { Field, Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { BiArrowBack } from 'react-icons/bi';

 import type { RootState } from 'app/store';
 import type { ReactElement } from 'react';
+import IAIForm from 'common/components/IAIForm';

 function FormItemWrapper({
  children,
@ -89,24 +88,12 @@ export default function AddDiffusersModel() {

  return (
    <Flex>
-      <IAIIconButton
-        aria-label={t('common.back')}
-        tooltip={t('common.back')}
-        onClick={() => dispatch(setAddNewModelUIOption(null))}
-        width="max-content"
-        position="absolute"
-        zIndex={1}
-        size="sm"
-        insetInlineEnd={12}
-        top={3}
-        icon={<BiArrowBack />}
-      />
      <Formik
        initialValues={addModelFormValues}
        onSubmit={addModelFormSubmitHandler}
      >
        {({ handleSubmit, errors, touched }) => (
-          <form onSubmit={handleSubmit}>
+          <IAIForm onSubmit={handleSubmit}>
            <VStack rowGap={2}>
              <FormItemWrapper>
                {/* Name */}
@ -296,7 +283,7 @@ export default function AddDiffusersModel() {
                {t('modelManager.addModel')}
              </IAIButton>
            </VStack>
-          </form>
+          </IAIForm>
        )}
      </Formik>
    </Flex>
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx
@ -14,7 +14,7 @@ import {

 import IAIButton from 'common/components/IAIButton';

-import { FaPlus } from 'react-icons/fa';
+import { FaArrowLeft, FaPlus } from 'react-icons/fa';

 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { useTranslation } from 'react-i18next';
@ -23,6 +23,7 @@ import type { RootState } from 'app/store';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import AddCheckpointModel from './AddCheckpointModel';
 import AddDiffusersModel from './AddDiffusersModel';
+import IAIIconButton from 'common/components/IAIIconButton';

 function AddModelBox({
  text,
@ -83,8 +84,22 @@ export default function AddModel() {
        closeOnOverlayClick={false}
      >
        <ModalOverlay />
-        <ModalContent margin="auto" paddingInlineEnd={4}>
-          <ModalHeader>{t('modelManager.addNewModel')}</ModalHeader>
+        <ModalContent margin="auto">
+          <ModalHeader>{t('modelManager.addNewModel')} </ModalHeader>
+          {addNewModelUIOption !== null && (
+            <IAIIconButton
+              aria-label={t('common.back')}
+              tooltip={t('common.back')}
+              onClick={() => dispatch(setAddNewModelUIOption(null))}
+              position="absolute"
+              variant="ghost"
+              zIndex={1}
+              size="sm"
+              insetInlineEnd={12}
+              top={2}
+              icon={<FaArrowLeft />}
+            />
+          )}
          <ModalCloseButton />
          <ModalBody>
            {addNewModelUIOption == null && (
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
@ -28,6 +28,7 @@ import { isEqual, pickBy } from 'lodash';
 import ModelConvert from './ModelConvert';
 import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
 import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
+import IAIForm from 'common/components/IAIForm';

 const selector = createSelector(
  [systemSelector],
@ -120,7 +121,7 @@ export default function CheckpointModelEdit() {
          onSubmit={editModelFormSubmitHandler}
        >
          {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit}>
              <VStack rowGap={2} alignItems="start">
                {/* Description */}
                <FormControl
@ -317,7 +318,7 @@ export default function CheckpointModelEdit() {
                  {t('modelManager.updateModel')}
                </IAIButton>
              </VStack>
-            </form>
+            </IAIForm>
          )}
        </Formik>
      </Flex>
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
@ -18,6 +18,7 @@ import type { RootState } from 'app/store';
 import { isEqual, pickBy } from 'lodash';
 import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
 import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
+import IAIForm from 'common/components/IAIForm';

 const selector = createSelector(
  [systemSelector],
@ -116,7 +117,7 @@ export default function DiffusersModelEdit() {
          onSubmit={editModelFormSubmitHandler}
        >
          {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit}>
              <VStack rowGap={2} alignItems="start">
                {/* Description */}
                <FormControl
@ -259,7 +260,7 @@ export default function DiffusersModelEdit() {
                  {t('modelManager.updateModel')}
                </IAIButton>
              </VStack>
-            </form>
+            </IAIForm>
          )}
        </Formik>
      </Flex>
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx
@ -12,14 +12,13 @@ import {
  RadioGroup,
  Spacer,
  Text,
-  VStack,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { useTranslation } from 'react-i18next';

-import { FaPlus, FaSearch } from 'react-icons/fa';
+import { FaSearch, FaTrash } from 'react-icons/fa';

 import { addNewModel, searchForModels } from 'app/socketio/actions';
 import {
@ -34,7 +33,7 @@ import IAIInput from 'common/components/IAIInput';
 import { Field, Formik } from 'formik';
 import { forEach, remove } from 'lodash';
 import type { ChangeEvent, ReactNode } from 'react';
-import { BiReset } from 'react-icons/bi';
+import IAIForm from 'common/components/IAIForm';

 const existingModelsSelector = createSelector([systemSelector], (system) => {
  const { model_list } = system;
@ -71,36 +70,32 @@ function SearchModelEntry({
  };

  return (
-    <VStack>
-      <Flex
-        flexDirection="column"
-        gap={2}
-        backgroundColor={
-          modelsToAdd.includes(model.name) ? 'accent.650' : 'base.800'
-        }
-        paddingX={4}
-        paddingY={2}
-        borderRadius={4}
-      >
-        <Flex gap={4}>
-          <IAICheckbox
-            value={model.name}
-            label={<Text fontWeight={500}>{model.name}</Text>}
-            isChecked={modelsToAdd.includes(model.name)}
-            isDisabled={existingModels.includes(model.location)}
-            onChange={foundModelsChangeHandler}
-          ></IAICheckbox>
-          {existingModels.includes(model.location) && (
-            <Badge colorScheme="accent" paddingX={2} paddingY={1}>
-              {t('modelManager.modelExists')}
-            </Badge>
-          )}
-        </Flex>
-        <Text fontStyle="italic" variant="subtext">
-          {model.location}
-        </Text>
+    <Flex
+      flexDirection="column"
+      gap={2}
+      backgroundColor={
+        modelsToAdd.includes(model.name) ? 'accent.650' : 'base.800'
+      }
+      paddingX={4}
+      paddingY={2}
+      borderRadius={4}
+    >
+      <Flex gap={4} alignItems="center" justifyContent="space-between">
+        <IAICheckbox
+          value={model.name}
+          label={<Text fontWeight={500}>{model.name}</Text>}
+          isChecked={modelsToAdd.includes(model.name)}
+          isDisabled={existingModels.includes(model.location)}
+          onChange={foundModelsChangeHandler}
+        ></IAICheckbox>
+        {existingModels.includes(model.location) && (
+          <Badge colorScheme="accent">{t('modelManager.modelExists')}</Badge>
+        )}
      </Flex>
-    </VStack>
+      <Text fontStyle="italic" variant="subtext">
+        {model.location}
+      </Text>
+    </Flex>
  );
 }

@ -247,26 +242,26 @@ export default function SearchModels() {
            <Text
              sx={{
                fontWeight: 500,
-                fontSize: 'sm',
              }}
              variant="subtext"
            >
              {t('modelManager.checkpointFolder')}
            </Text>
-            <Text sx={{ fontWeight: 500, fontSize: 'sm' }}>{searchFolder}</Text>
+            <Text sx={{ fontWeight: 500 }}>{searchFolder}</Text>
          </Flex>
          <Spacer />
          <IAIIconButton
            aria-label={t('modelManager.scanAgain')}
            tooltip={t('modelManager.scanAgain')}
-            icon={<BiReset />}
+            icon={<FaSearch />}
            fontSize={18}
            disabled={isProcessing}
            onClick={() => dispatch(searchForModels(searchFolder))}
          />
          <IAIIconButton
            aria-label={t('modelManager.clearCheckpointFolder')}
-            icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
+            tooltip={t('modelManager.clearCheckpointFolder')}
+            icon={<FaTrash />}
            onClick={resetSearchModelHandler}
          />
        </Flex>
@ -278,9 +273,9 @@ export default function SearchModels() {
          }}
        >
          {({ handleSubmit }) => (
-            <form onSubmit={handleSubmit}>
-              <HStack columnGap={2} alignItems="flex-end" width="100%">
-                <FormControl isRequired width="lg">
+            <IAIForm onSubmit={handleSubmit} width="100%">
+              <HStack columnGap={2} alignItems="flex-end">
+                <FormControl flexGrow={1}>
                  <Field
                    as={IAIInput}
                    id="checkpointFolder"
@ -296,12 +291,12 @@ export default function SearchModels() {
                  tooltip={t('modelManager.findModels')}
                  type="submit"
                  disabled={isProcessing}
-                  paddingX={10}
+                  px={8}
                >
                  {t('modelManager.findModels')}
                </IAIButton>
              </HStack>
-            </form>
+            </IAIForm>
          )}
        </Formik>
      )}
@ -412,7 +407,6 @@ export default function SearchModels() {
            maxHeight={72}
            overflowY="scroll"
            borderRadius="sm"
-            paddingInlineEnd={4}
            gap={2}
          >
            {foundModels.length > 0 ? (