Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8dd4ca5

Browse files
feat(ui): update node editor to use model object format
similar to the previous commit, update the node editor to not just store models as strings - instead, store the model object.the model select components in nodes are now just kinda copy-pastes over the linear UI versions of the same components, but they were different enough that we can't just share them.i explored adding some props to override the linear ui components' logic, but it was too brittle. so just copy/paste.
1 parenta071873 commit8dd4ca5

File tree

8 files changed

+141
-151
lines changed

8 files changed

+141
-151
lines changed

‎invokeai/frontend/web/src/features/nodes/components/fields/LoRAModelInputFieldComponent.tsx‎

Lines changed: 47 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1+
import{Flex,Text}from'@chakra-ui/react';
12
import{SelectItem}from'@mantine/core';
23
import{useAppDispatch}from'app/store/storeHooks';
34
importIAIMantineSelectfrom'common/components/IAIMantineSelect';
5+
importIAIMantineSelectItemWithTooltipfrom'common/components/IAIMantineSelectItemWithTooltip';
46
import{fieldValueChanged}from'features/nodes/store/nodesSlice';
57
import{
68
VaeModelInputFieldTemplate,
79
VaeModelInputFieldValue,
810
}from'features/nodes/types/types';
911
import{MODEL_TYPE_MAP}from'features/parameters/types/constants';
10-
import{forEach,isString}from'lodash-es';
11-
import{memo,useCallback,useEffect,useMemo}from'react';
12-
import{useTranslation}from'react-i18next';
12+
import{modelIdToLoRAModelParam}from'features/parameters/util/modelIdToLoRAModelParam';
13+
import{forEach}from'lodash-es';
14+
import{memo,useCallback,useMemo}from'react';
1315
import{useGetLoRAModelsQuery}from'services/api/endpoints/models';
1416
import{FieldComponentProps}from'./types';
1517

@@ -20,80 +22,89 @@ const LoRAModelInputFieldComponent = (
2022
>
2123
)=>{
2224
const{ nodeId, field}=props;
23-
25+
constlora=field.value;
2426
constdispatch=useAppDispatch();
25-
const{ t}=useTranslation();
26-
2727
const{data:loraModels}=useGetLoRAModelsQuery();
2828

29-
constselectedModel=useMemo(
30-
()=>loraModels?.entities[field.value??loraModels.ids[0]],
31-
[loraModels?.entities,loraModels?.ids,field.value]
32-
);
33-
3429
constdata=useMemo(()=>{
3530
if(!loraModels){
3631
return[];
3732
}
3833

3934
constdata:SelectItem[]=[];
4035

41-
forEach(loraModels.entities,(model,id)=>{
42-
if(!model){
36+
forEach(loraModels.entities,(lora,id)=>{
37+
if(!lora){
4338
return;
4439
}
4540

4641
data.push({
4742
value:id,
48-
label:model.model_name,
49-
group:MODEL_TYPE_MAP[model.base_model],
43+
label:lora.model_name,
44+
group:MODEL_TYPE_MAP[lora.base_model],
5045
});
5146
});
5247

53-
returndata;
48+
returndata.sort((a,b)=>(a.disabled&&!b.disabled ?1 :-1));
5449
},[loraModels]);
5550

56-
consthandleValueChanged=useCallback(
51+
constselectedLoRAModel=useMemo(
52+
()=>
53+
loraModels?.entities[`${lora?.base_model}/lora/${lora?.model_name}`]??
54+
null,
55+
[loraModels?.entities,lora?.base_model,lora?.model_name]
56+
);
57+
58+
consthandleChange=useCallback(
5759
(v:string|null)=>{
5860
if(!v){
5961
return;
6062
}
6163

64+
constnewLoRAModel=modelIdToLoRAModelParam(v);
65+
66+
if(!newLoRAModel){
67+
return;
68+
}
69+
6270
dispatch(
6371
fieldValueChanged({
6472
nodeId,
6573
fieldName:field.name,
66-
value:v,
74+
value:newLoRAModel,
6775
})
6876
);
6977
},
7078
[dispatch,field.name,nodeId]
7179
);
7280

73-
useEffect(()=>{
74-
if(field.value&&loraModels?.ids.includes(field.value)){
75-
return;
76-
}
77-
78-
constfirstLora=loraModels?.ids[0];
79-
80-
if(!isString(firstLora)){
81-
return;
82-
}
83-
84-
handleValueChanged(firstLora);
85-
},[field.value,handleValueChanged,loraModels?.ids]);
81+
if(loraModels?.ids.length===0){
82+
return(
83+
<Flexsx={{justifyContent:'center',p:2}}>
84+
<Textsx={{fontSize:'sm',color:'base.500',_dark:'base.700'}}>
85+
No LoRAs Loaded
86+
</Text>
87+
</Flex>
88+
);
89+
}
8690

8791
return(
8892
<IAIMantineSelect
89-
tooltip={selectedModel?.description}
93+
value={selectedLoRAModel?.id??null}
9094
label={
91-
selectedModel?.base_model&&MODEL_TYPE_MAP[selectedModel?.base_model]
95+
selectedLoRAModel?.base_model&&
96+
MODEL_TYPE_MAP[selectedLoRAModel?.base_model]
9297
}
93-
value={field.value}
94-
placeholder="Pick one"
98+
placeholder={data.length>0 ?'Select a LoRA' :'No LoRAs available'}
9599
data={data}
96-
onChange={handleValueChanged}
100+
nothingFound="No matching LoRAs"
101+
itemComponent={IAIMantineSelectItemWithTooltip}
102+
disabled={data.length===0}
103+
filter={(value,item:SelectItem)=>
104+
item.label?.toLowerCase().includes(value.toLowerCase().trim())||
105+
item.value.toLowerCase().includes(value.toLowerCase().trim())
106+
}
107+
onChange={handleChange}
97108
/>
98109
);
99110
};

‎invokeai/frontend/web/src/features/nodes/components/fields/ModelInputFieldComponent.tsx‎

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
1-
import{SelectItem}from'@mantine/core';
21
import{useAppDispatch}from'app/store/storeHooks';
32
import{fieldValueChanged}from'features/nodes/store/nodesSlice';
43
import{
4+
MainModelInputFieldValue,
55
ModelInputFieldTemplate,
6-
ModelInputFieldValue,
76
}from'features/nodes/types/types';
87

8+
import{SelectItem}from'@mantine/core';
99
importIAIMantineSelectfrom'common/components/IAIMantineSelect';
1010
import{MODEL_TYPE_MAP}from'features/parameters/types/constants';
11-
import{forEach,isString}from'lodash-es';
12-
import{memo,useCallback,useEffect,useMemo}from'react';
11+
import{modelIdToMainModelParam}from'features/parameters/util/modelIdToMainModelParam';
12+
import{forEach}from'lodash-es';
13+
import{memo,useCallback,useMemo}from'react';
1314
import{useTranslation}from'react-i18next';
1415
import{useGetMainModelsQuery}from'services/api/endpoints/models';
1516
import{FieldComponentProps}from'./types';
1617

1718
constModelInputFieldComponent=(
18-
props:FieldComponentProps<ModelInputFieldValue,ModelInputFieldTemplate>
19+
props:FieldComponentProps<MainModelInputFieldValue,ModelInputFieldTemplate>
1920
)=>{
2021
const{ nodeId, field}=props;
2122

2223
constdispatch=useAppDispatch();
2324
const{ t}=useTranslation();
2425

25-
const{data:mainModels}=useGetMainModelsQuery();
26+
const{data:mainModels, isLoading}=useGetMainModelsQuery();
2627

2728
constdata=useMemo(()=>{
2829
if(!mainModels){
@@ -46,52 +47,58 @@ const ModelInputFieldComponent = (
4647
returndata;
4748
},[mainModels]);
4849

50+
// grab the full model entity from the RTK Query cache
51+
// TODO: maybe we should just store the full model entity in state?
4952
constselectedModel=useMemo(
50-
()=>mainModels?.entities[field.value??mainModels.ids[0]],
51-
[mainModels?.entities,mainModels?.ids,field.value]
53+
()=>
54+
mainModels?.entities[
55+
`${field.value?.base_model}/main/${field.value?.model_name}`
56+
]??null,
57+
[field.value?.base_model,field.value?.model_name,mainModels?.entities]
5258
);
5359

54-
consthandleValueChanged=useCallback(
60+
consthandleChangeModel=useCallback(
5561
(v:string|null)=>{
5662
if(!v){
5763
return;
5864
}
5965

66+
constnewModel=modelIdToMainModelParam(v);
67+
68+
if(!newModel){
69+
return;
70+
}
71+
6072
dispatch(
6173
fieldValueChanged({
6274
nodeId,
6375
fieldName:field.name,
64-
value:v,
76+
value:newModel,
6577
})
6678
);
6779
},
6880
[dispatch,field.name,nodeId]
6981
);
7082

71-
useEffect(()=>{
72-
if(field.value&&mainModels?.ids.includes(field.value)){
73-
return;
74-
}
75-
76-
constfirstModel=mainModels?.ids[0];
77-
78-
if(!isString(firstModel)){
79-
return;
80-
}
81-
82-
handleValueChanged(firstModel);
83-
},[field.value,handleValueChanged,mainModels?.ids]);
84-
85-
return(
83+
returnisLoading ?(
84+
<IAIMantineSelect
85+
label={t('modelManager.model')}
86+
placeholder="Loading..."
87+
disabled={true}
88+
data={[]}
89+
/>
90+
) :(
8691
<IAIMantineSelect
8792
tooltip={selectedModel?.description}
8893
label={
8994
selectedModel?.base_model&&MODEL_TYPE_MAP[selectedModel?.base_model]
9095
}
91-
value={field.value}
92-
placeholder="Pick one"
96+
value={selectedModel?.id}
97+
placeholder={data.length>0 ?'Select a model' :'No models available'}
9398
data={data}
94-
onChange={handleValueChanged}
99+
error={data.length===0}
100+
disabled={data.length===0}
101+
onChange={handleChangeModel}
95102
/>
96103
);
97104
};

‎invokeai/frontend/web/src/features/nodes/components/fields/UNetInputFieldComponent.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎invokeai/frontend/web/src/features/nodes/components/fields/VaeInputFieldComponent.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp