feat: Infer Model Name automatically if empty in Model Forms (#4445)

## What type of PR is this? (check all applicable)

- [x] Feature

## Have you discussed this change with the InvokeAI team?
- [x] No
      
## Description

Automatically infer the name of the model from the path supplied IF the
model name slot is empty. If the model name is not empty, we presume
that the user has entered a model name or made changes to it and we do
not touch it in order to not override user changes.


## Related Tickets & Documents

- Addresses: #4443

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx

@@ -1,11 +1,11 @@
 import { Flex } from '@chakra-ui/react';
 import { useForm } from '@mantine/form';
-import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';
 import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
 import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAddMainModelsMutation } from 'services/api/endpoints/models';
@@ -14,6 +14,7 @@ import { setAdvancedAddScanModel } from '../../store/modelManagerSlice';
 import BaseModelSelect from '../shared/BaseModelSelect';
 import CheckpointConfigsSelect from '../shared/CheckpointConfigsSelect';
 import ModelVariantSelect from '../shared/ModelVariantSelect';
+import { getModelName } from './util';
 
 type AdvancedAddCheckpointProps = {
   model_path?: string;
@@ -28,7 +29,7 @@ export default function AdvancedAddCheckpoint(
 
   const advancedAddCheckpointForm = useForm<CheckpointModelConfig>({
     initialValues: {
-      model_name: model_path?.split('\\').splice(-1)[0]?.split('.')[0] ?? '',
+      model_name: model_path ? getModelName(model_path) : '',
       base_model: 'sd-1',
       model_type: 'main',
       path: model_path ? model_path : '',
@@ -100,6 +101,17 @@ export default function AdvancedAddCheckpoint(
           label="Model Location"
           required
           {...advancedAddCheckpointForm.getInputProps('path')}
+          onBlur={(e) => {
+            if (advancedAddCheckpointForm.values['model_name'] === '') {
+              const modelName = getModelName(e.currentTarget.value);
+              if (modelName) {
+                advancedAddCheckpointForm.setFieldValue(
+                  'model_name',
+                  modelName as string
+                );
+              }
+            }
+          }}
         />
         <IAIMantineTextInput
           label="Description"

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx

@@ -1,16 +1,17 @@
 import { Flex } from '@chakra-ui/react';
 import { useForm } from '@mantine/form';
-import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';
 import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import { useTranslation } from 'react-i18next';
 import { useAddMainModelsMutation } from 'services/api/endpoints/models';
 import { DiffusersModelConfig } from 'services/api/types';
 import { setAdvancedAddScanModel } from '../../store/modelManagerSlice';
 import BaseModelSelect from '../shared/BaseModelSelect';
 import ModelVariantSelect from '../shared/ModelVariantSelect';
+import { getModelName } from './util';
 
 type AdvancedAddDiffusersProps = {
   model_path?: string;
@@ -25,7 +26,7 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
 
   const advancedAddDiffusersForm = useForm<DiffusersModelConfig>({
     initialValues: {
-      model_name: model_path?.split('\\').splice(-1)[0] ?? '',
+      model_name: model_path ? getModelName(model_path, false) : '',
       base_model: 'sd-1',
       model_type: 'main',
       path: model_path ? model_path : '',
@@ -92,6 +93,17 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
           label="Model Location"
           placeholder="Provide the path to a local folder where your Diffusers Model is stored"
           {...advancedAddDiffusersForm.getInputProps('path')}
+          onBlur={(e) => {
+            if (advancedAddDiffusersForm.values['model_name'] === '') {
+              const modelName = getModelName(e.currentTarget.value, false);
+              if (modelName) {
+                advancedAddDiffusersForm.setFieldValue(
+                  'model_name',
+                  modelName as string
+                );
+              }
+            }
+          }}
         />
         <IAIMantineTextInput
           label="Description"

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/util.ts

@@ -0,0 +1,15 @@
+export function getModelName(filepath: string, isCheckpoint: boolean = true) {
+  let regex;
+  if (isCheckpoint) {
+    regex = new RegExp('[^\\\\/]+(?=\\.)');
+  } else {
+    regex = new RegExp('[^\\\\/]+(?=[\\\\/]?$)');
+  }
+
+  const match = filepath.match(regex);
+  if (match) {
+    return match[0];
+  } else {
+    return '';
+  }
+}