diff --git a/invokeai/frontend/web/src/common/components/IAIInput.tsx b/invokeai/frontend/web/src/common/components/IAIInput.tsx index d114fc5968..31dac20998 100644 --- a/invokeai/frontend/web/src/common/components/IAIInput.tsx +++ b/invokeai/frontend/web/src/common/components/IAIInput.tsx @@ -8,19 +8,34 @@ import { import { useAppDispatch } from 'app/store/storeHooks'; import { stopPastePropagation } from 'common/util/stopPastePropagation'; import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice'; -import { ChangeEvent, KeyboardEvent, memo, useCallback } from 'react'; +import { + CSSProperties, + ChangeEvent, + KeyboardEvent, + memo, + useCallback, +} from 'react'; interface IAIInputProps extends InputProps { label?: string; + labelPos?: 'top' | 'side'; value?: string; size?: string; onChange?: (e: ChangeEvent) => void; formControlProps?: Omit; } +const labelPosVerticalStyle: CSSProperties = { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + gap: 10, +}; + const IAIInput = (props: IAIInputProps) => { const { label = '', + labelPos = 'top', isDisabled = false, isInvalid, formControlProps, @@ -51,6 +66,7 @@ const IAIInput = (props: IAIInputProps) => { isInvalid={isInvalid} isDisabled={isDisabled} {...formControlProps} + style={labelPos === 'side' ? labelPosVerticalStyle : undefined} > {label !== '' && {label}} { + return models.map((model) => { + return ( + + + + {model.split('\\').slice(-1)[0]} + + + {model} + + + {showActions ? ( + + + Quick Add + + dispatch(setAdvancedAddScanModel(model))} + isLoading={isLoading} + > + Advanced + + + ) : ( + + Installed + + )} + + ); + }); + }; + const renderFoundModels = () => { if (!searchFolder) return; @@ -125,8 +203,12 @@ export default function FoundModelsList() { + + Models Found: {foundModels.length} + - Found Models: {foundModels.length} - - - Not Installed: {notInstalledModels.length} + Not Installed: {filteredModels.length} - {filteredModels.map((model) => ( - - - - {model.split('\\').slice(-1)[0]} - - - {model} - - - - - Quick Add - - dispatch(setAdvancedAddScanModel(model))} - isLoading={isLoading} - > - Advanced - - + + + {renderModels({ models: filteredModels })} + {renderModels({ models: alreadyInstalled, showActions: false })} - ))} + ); }; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx index e5b89c7bbf..d49e429306 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx @@ -43,8 +43,8 @@ export default function ScanAdvancedAddModels() { sx={{ display: 'flex', flexDirection: 'column', - minWidth: '50%', - maxHeight: window.innerHeight - 330, + minWidth: '40%', + maxHeight: window.innerHeight - 300, overflow: 'scroll', p: 4, gap: 4, diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx index c7b4da9479..fc1b6b321f 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx @@ -10,7 +10,7 @@ export default function ScanModels() { @@ -67,7 +62,7 @@ function SearchFolderForm() { _dark: { color: 'base.300' }, }} > - Search Folder + Folder {!searchFolder ? ( { return ( - { + + {['all', 'diffusers'].includes(modelFormatFilter) && filteredDiffusersModels.length > 0 && (