From d0fcdbe8a31fe04d1ad6b6378fecc233749c1d28 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 8 Mar 2024 14:25:58 +1100
Subject: [PATCH] tweak(ui): simplify layout of inplace install form elements

---
 invokeai/frontend/web/public/locales/en.json  |  4 +-
 .../AddModelPanel/InstallModelForm.tsx        | 44 +++++++++++--------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 1caef90ea4..21ab0eb94e 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -766,8 +766,8 @@
         "importModels": "Import Models",
         "importQueue": "Import Queue",
         "inpainting": "v1 Inpainting",
-        "inplaceInstall": "Inplace install",
-        "inplaceInstallTooltip": "If inplace installs are enabled, Invoke will reference your model files from where they are now. If disabled, your model files will be cloned into your invokeai directory and referenced from there.",
+        "inplaceInstall": "In-place install",
+        "inplaceInstallDesc": "Install models without copying the files. When using the model, it will be loaded from its this location. If disabled, the model file(s) will be copied into the Invoke-managed models directory during installation.",
         "interpolationType": "Interpolation Type",
         "inverseSigmoid": "Inverse Sigmoid",
         "invokeAIFolder": "Invoke AI Folder",
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx
index 873910014b..7922195856 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Tooltip } from '@invoke-ai/ui-library';
+import { Button, Checkbox, Flex, FormControl, FormHelperText, FormLabel, Input } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
@@ -64,28 +64,36 @@ export const InstallModelForm = () => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
-        <FormControl>
-          <Flex direction="column" w="full">
+      <Flex flexDir="column" gap={4}>
+        <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
+          <FormControl orientation="vertical">
             <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
             <Input {...register('location')} />
+          </FormControl>
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            isDisabled={!formState.isDirty}
+            isLoading={isLoading}
+            type="submit"
+            size="sm"
+            mb={1}
+          >
+            {t('modelManager.addModel')}
+          </Button>
+        </Flex>
+
+        <FormControl>
+          <Flex flexDir="column" gap={2}>
+            <Flex gap={4}>
+              <Checkbox {...register('inplace')} />
+              <FormLabel>
+                {t('modelManager.inplaceInstall')} ({t('modelManager.localOnly')})
+              </FormLabel>
+            </Flex>
+            <FormHelperText>{t('modelManager.inplaceInstallDesc')}</FormHelperText>
           </Flex>
         </FormControl>
-        <Button onClick={handleSubmit(onSubmit)} isDisabled={!formState.isDirty} isLoading={isLoading} type="submit">
-          {t('modelManager.addModel')}
-        </Button>
       </Flex>
-
-      <FormControl flexDir="column" gap="1" alignItems="flex-start" mt={3}>
-        <Tooltip label={t('modelManager.inplaceInstallTooltip')}>
-          <Flex gap={3}>
-            <Checkbox {...register('inplace')} />
-            <FormLabel>
-              {t('modelManager.inplaceInstall')} ({t('modelManager.localOnly')})
-            </FormLabel>
-          </Flex>
-        </Tooltip>
-      </FormControl>
     </form>
   );
 };