added placeholders, updated some copy

invokeai/frontend/web/public/locales/en.json

@@ -763,7 +763,8 @@
         "height": "Height",
         "heightValidationMsg": "Default height of your model.",
         "huggingFace": "Hugging Face",
-        "huggingFaceRepoID": "HuggingFace Repo ID",
+        "huggingFacePlaceholder": "owner/model-name",
+        "huggingFaceRepoID": "Hugging Face Repo ID",
         "ignoreMismatch": "Ignore Mismatches Between Selected Models",
         "imageEncoderModelId": "Image Encoder Model ID",
         "importModels": "Import Models",
@@ -846,6 +847,7 @@
         "scanFolder": "Scan folder",
         "scanAgain": "Scan Again",
         "scanForModels": "Scan For Models",
+        "scanPlaceholder": "Path to a local folder",
         "scanResults": "Scan Results",
         "search": "Search",
         "selectAll": "Select All",
@@ -856,6 +858,7 @@
         "settings": "Settings",
         "showExisting": "Show Existing",
         "sigmoid": "Sigmoid",
+        "simpleModelPlaceholder": "URL or path to a local file",
         "simpleModelDesc": "Provide a path to a local Diffusers model, local checkpoint / safetensors model a HuggingFace Repo ID, or a checkpoint/diffusers model URL.",
         "source": "Source",
         "statusConverting": "Converting",

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx

@@ -19,34 +19,37 @@ export const HuggingFaceForm = () => {
   const [_getHuggingFaceModels, { isLoading, data }] = useLazyGetHuggingFaceModelsQuery();
   const [installModel] = useInstallModelMutation();
 
-  const handleInstallModel = useCallback((source: string) => {
+  const handleInstallModel = useCallback(
-    installModel({ source })
+    (source: string) => {
-      .unwrap()
+      installModel({ source })
-      .then((_) => {
+        .unwrap()
-        dispatch(
+        .then((_) => {
-          addToast(
-            makeToast({
-              title: t('toast.modelAddedSimple'),
-              status: 'success',
-            })
-          )
-        );
-      })
-      .catch((error) => {
-        if (error) {
           dispatch(
             addToast(
               makeToast({
-                title: `${error.data.detail} `,
+                title: t('toast.modelAddedSimple'),
-                status: 'error',
+                status: 'success',
               })
             )
           );
-        }
+        })
-      });
+        .catch((error) => {
-  }, [installModel, dispatch, t]);
+          if (error) {
+            dispatch(
+              addToast(
+                makeToast({
+                  title: `${error.data.detail} `,
+                  status: 'error',
+                })
+              )
+            );
+          }
+        });
+    },
+    [installModel, dispatch, t]
+  );
 
-  const scanFolder = useCallback(async () => {
+  const getModels = useCallback(async () => {
     _getHuggingFaceModels(huggingFaceRepo)
       .then((response) => {
         if (response.data?.some((result) => result.endsWith('model_index.json'))) {
@@ -64,7 +67,7 @@ export const HuggingFaceForm = () => {
           setErrorMessage(error.data.detail);
         }
       });
-  }, [_getHuggingFaceModels, huggingFaceRepo]);
+  }, [_getHuggingFaceModels, handleInstallModel, huggingFaceRepo]);
 
   const handleSetHuggingFaceRepo: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
     setHuggingFaceRepo(e.target.value);
@@ -78,10 +81,14 @@ export const HuggingFaceForm = () => {
           <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
             <Flex direction="column" w="full">
               <FormLabel>{t('modelManager.huggingFaceRepoID')}</FormLabel>
-              <Input value={huggingFaceRepo} onChange={handleSetHuggingFaceRepo} />
+              <Input
+                placeholder={t('modelManager.huggingFacePlaceholder')}
+                value={huggingFaceRepo}
+                onChange={handleSetHuggingFaceRepo}
+              />
             </Flex>
 
-            <Button onClick={scanFolder} isLoading={isLoading} isDisabled={huggingFaceRepo.length === 0}>
+            <Button onClick={getModels} isLoading={isLoading} isDisabled={huggingFaceRepo.length === 0}>
               {t('modelManager.addModel')}
             </Button>
           </Flex>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx

@@ -68,7 +68,7 @@ export const InstallModelForm = () => {
         <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
           <FormControl orientation="vertical">
             <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
-            <Input {...register('location')} />
+            <Input placeholder={t('modelManager.simpleModelPlaceholder')} {...register('location')} />
           </FormControl>
           <Button
             onClick={handleSubmit(onSubmit)}

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanFolder/ScanFolderForm.tsx

@@ -39,7 +39,7 @@ export const ScanModelsForm = () => {
           <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
             <Flex direction="column" w="full">
               <FormLabel>{t('common.folder')}</FormLabel>
-              <Input value={scanPath} onChange={handleSetScanPath} />
+              <Input placeholder={t('modelManager.scanPlaceholder')} value={scanPath} onChange={handleSetScanPath} />
             </Flex>
 
             <Button