Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Better file and component naming for Add Models

Browse Source
This commit is contained in:
blessedcoolant 2023-07-17 13:58:11 +12:00
parent 641b90cc3f
commit 540f40c293
5 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AddModels.tsx
View File

@ -1,8 +1,8 @@
import { ButtonGroup, Flex } from '@chakra-ui/react';
import IAIButton from 'common/components/IAIButton';
import { useState } from 'react';
import AutoAddModels from './AutoAddModels';
import ManualAddModels from './ManualAddModels';
import AdvancedAddModels from './AdvancedAddModels';
import SimpleAddModels from './SimpleAddModels';
export default function AddModels() {
const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>(
@ -40,8 +40,8 @@ export default function AddModels() {
_dark: { background: 'base.800' },
}}
>
{addModelMode === 'simple' && <AutoAddModels />}
{addModelMode === 'advanced' && <ManualAddModels />}
{addModelMode === 'simple' && <SimpleAddModels />}
{addModelMode === 'advanced' && <AdvancedAddModels />}
</Flex>
</Flex>
);

28
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ManualAddCheckpoint.tsx → invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
View File

@ -14,11 +14,11 @@ import BaseModelSelect from '../shared/BaseModelSelect';
import CheckpointConfigsSelect from '../shared/CheckpointConfigsSelect';
import ModelVariantSelect from '../shared/ModelVariantSelect';
export default function ManualAddCheckpoint() {
export default function AdvancedAddCheckpoint() {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const manualAddCheckpointForm = useForm<CheckpointModelConfig>({
const advancedAddCheckpointForm = useForm<CheckpointModelConfig>({
initialValues: {
model_name: '',
base_model: 'sd-1',
@ -37,7 +37,7 @@ export default function ManualAddCheckpoint() {
const [useCustomConfig, setUseCustomConfig] = useState<boolean>(false);
const manualAddCheckpointFormHandler = (values: CheckpointModelConfig) => {
const advancedAddCheckpointFormHandler = (values: CheckpointModelConfig) => {
addMainModel({
body: values,
})
@ -51,7 +51,7 @@ export default function ManualAddCheckpoint() {
})
)
);
manualAddCheckpointForm.reset();
advancedAddCheckpointForm.reset();
})
.catch((error) => {
if (error) {
@ -69,8 +69,8 @@ export default function ManualAddCheckpoint() {
return (
<form
onSubmit={manualAddCheckpointForm.onSubmit((v) =>
manualAddCheckpointFormHandler(v)
onSubmit={advancedAddCheckpointForm.onSubmit((v) =>
advancedAddCheckpointFormHandler(v)
)}
style={{ width: '100%' }}
>
@ -78,39 +78,39 @@ export default function ManualAddCheckpoint() {
<IAIMantineTextInput
label="Model Name"
required
{...manualAddCheckpointForm.getInputProps('model_name')}
{...advancedAddCheckpointForm.getInputProps('model_name')}
/>
<BaseModelSelect
{...manualAddCheckpointForm.getInputProps('base_model')}
{...advancedAddCheckpointForm.getInputProps('base_model')}
/>
<IAIMantineTextInput
label="Model Location"
required
{...manualAddCheckpointForm.getInputProps('path')}
{...advancedAddCheckpointForm.getInputProps('path')}
/>
<IAIMantineTextInput
label="Description"
{...manualAddCheckpointForm.getInputProps('description')}
{...advancedAddCheckpointForm.getInputProps('description')}
/>
<IAIMantineTextInput
label="VAE Location"
{...manualAddCheckpointForm.getInputProps('vae')}
{...advancedAddCheckpointForm.getInputProps('vae')}
/>
<ModelVariantSelect
{...manualAddCheckpointForm.getInputProps('variant')}
{...advancedAddCheckpointForm.getInputProps('variant')}
/>
<Flex flexDirection="column" width="100%" gap={2}>
{!useCustomConfig ? (
<CheckpointConfigsSelect
required
width="100%"
{...manualAddCheckpointForm.getInputProps('config')}
{...advancedAddCheckpointForm.getInputProps('config')}
/>
) : (
<IAIMantineTextInput
required
label="Custom Config File Location"
{...manualAddCheckpointForm.getInputProps('config')}
{...advancedAddCheckpointForm.getInputProps('config')}
/>
)}
<IAISimpleCheckbox

24
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ManualAddDiffusers.tsx → invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
View File

@ -11,13 +11,13 @@ import { DiffusersModelConfig } from 'services/api/types';
import BaseModelSelect from '../shared/BaseModelSelect';
import ModelVariantSelect from '../shared/ModelVariantSelect';
export default function ManualAddDiffusers() {
export default function AdvancedAddDiffusers() {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const [addMainModel] = useAddMainModelsMutation();
const manualAddDiffusersForm = useForm<DiffusersModelConfig>({
const advancedAddDiffusersForm = useForm<DiffusersModelConfig>({
initialValues: {
model_name: '',
base_model: 'sd-1',
@ -30,7 +30,7 @@ export default function ManualAddDiffusers() {
variant: 'normal',
},
});
const manualAddDiffusersFormHandler = (values: DiffusersModelConfig) => {
const advancedAddDiffusersFormHandler = (values: DiffusersModelConfig) => {
addMainModel({
body: values,
})
@ -44,7 +44,7 @@ export default function ManualAddDiffusers() {
})
)
);
manualAddDiffusersForm.reset();
advancedAddDiffusersForm.reset();
})
.catch((error) => {
if (error) {
@ -62,8 +62,8 @@ export default function ManualAddDiffusers() {
return (
<form
onSubmit={manualAddDiffusersForm.onSubmit((v) =>
manualAddDiffusersFormHandler(v)
onSubmit={advancedAddDiffusersForm.onSubmit((v) =>
advancedAddDiffusersFormHandler(v)
)}
style={{ width: '100%' }}
>
@ -71,27 +71,27 @@ export default function ManualAddDiffusers() {
<IAIMantineTextInput
required
label="Model Name"
{...manualAddDiffusersForm.getInputProps('model_name')}
{...advancedAddDiffusersForm.getInputProps('model_name')}
/>
<BaseModelSelect
{...manualAddDiffusersForm.getInputProps('base_model')}
{...advancedAddDiffusersForm.getInputProps('base_model')}
/>
<IAIMantineTextInput
required
label="Model Location"
placeholder="Provide the path to a local folder where your Diffusers Model is stored"
{...manualAddDiffusersForm.getInputProps('path')}
{...advancedAddDiffusersForm.getInputProps('path')}
/>
<IAIMantineTextInput
label="Description"
{...manualAddDiffusersForm.getInputProps('description')}
{...advancedAddDiffusersForm.getInputProps('description')}
/>
<IAIMantineTextInput
label="VAE Location"
{...manualAddDiffusersForm.getInputProps('vae')}
{...advancedAddDiffusersForm.getInputProps('vae')}
/>
<ModelVariantSelect
{...manualAddDiffusersForm.getInputProps('variant')}
{...advancedAddDiffusersForm.getInputProps('variant')}
/>
<IAIButton mt={2} type="submit">
{t('modelManager.addModel')}

20
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ManualAddModels.tsx → invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
View File

@ -2,29 +2,29 @@ import { Flex } from '@chakra-ui/react';
import { SelectItem } from '@mantine/core';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { useState } from 'react';
import ManualAddCheckpoint from './ManualAddCheckpoint';
import ManualAddDiffusers from './ManualAddDiffusers';
import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
import AdvancedAddDiffusers from './AdvancedAddDiffusers';
const manualAddModeData: SelectItem[] = [
const advancedAddModeData: SelectItem[] = [
{ label: 'Diffusers', value: 'diffusers' },
{ label: 'Checkpoint / Safetensors', value: 'checkpoint' },
];
type ManualAddMode = 'diffusers' | 'checkpoint';
export default function ManualAddModels() {
const [manualAddMode, setManualAddMode] =
export default function AdvancedAddModels() {
const [advancedAddMode, setAdvancedAddMode] =
useState<ManualAddMode>('diffusers');
return (
<Flex flexDirection="column" gap={4} width="100%">
<IAIMantineSelect
label="Model Type"
value={manualAddMode}
data={manualAddModeData}
value={advancedAddMode}
data={advancedAddModeData}
onChange={(v) => {
if (!v) return;
setManualAddMode(v as ManualAddMode);
setAdvancedAddMode(v as ManualAddMode);
}}
/>
@ -38,8 +38,8 @@ export default function ManualAddModels() {
},
}}
>
{manualAddMode === 'diffusers' && <ManualAddDiffusers />}
{manualAddMode === 'checkpoint' && <ManualAddCheckpoint />}
{advancedAddMode === 'diffusers' && <AdvancedAddDiffusers />}
{advancedAddMode === 'checkpoint' && <AdvancedAddCheckpoint />}
</Flex>
</Flex>
);

2
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AutoAddModels.tsx → invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
View File

@ -25,7 +25,7 @@ type ExtendedImportModelConfig = {
prediction_type?: 'v_prediction' | 'epsilon' | 'sample' | 'none' | undefined;
};
export default function AutoAddModels() {
export default function SimpleAddModels() {
const dispatch = useAppDispatch();
const { t } = useTranslation();