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

feat(ui): add model description tooltips

Browse Source
This commit is contained in:
psychedelicious 2023-05-30 22:51:19 +10:00 committed by Kent Keirsey
parent 296ee6b7ea
commit 6e60f7517b
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
View File

@ -4,19 +4,33 @@ import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { selectModelsById, selectModelsIds } from '../store/modelSlice'; import {
selectModelsAll,
selectModelsById,
selectModelsIds,
} from '../store/modelSlice';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { modelSelected } from 'features/parameters/store/generationSlice'; import { modelSelected } from 'features/parameters/store/generationSlice';
import { generationSelector } from 'features/parameters/store/generationSelectors'; import { generationSelector } from 'features/parameters/store/generationSelectors';
import IAICustomSelect from 'common/components/IAICustomSelect'; import IAICustomSelect, {
ItemTooltips,
} from 'common/components/IAICustomSelect';
const selector = createSelector( const selector = createSelector(
[(state: RootState) => state, generationSelector], [(state: RootState) => state, generationSelector],
(state, generation) => { (state, generation) => {
const selectedModel = selectModelsById(state, generation.model); const selectedModel = selectModelsById(state, generation.model);
const allModelNames = selectModelsIds(state).map((id) => String(id)); const allModelNames = selectModelsIds(state).map((id) => String(id));
const allModelTooltips = selectModelsAll(state).reduce(
(allModelTooltips, model) => {
allModelTooltips[model.name] = model.description ?? '';
return allModelTooltips;
},
{} as ItemTooltips
);
return { return {
allModelNames, allModelNames,
allModelTooltips,
selectedModel, selectedModel,
}; };
}, },
@ -30,7 +44,8 @@ const selector = createSelector(
const ModelSelect = () => { const ModelSelect = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const { allModelNames, selectedModel } = useAppSelector(selector); const { allModelNames, allModelTooltips, selectedModel } =
useAppSelector(selector);
const handleChangeModel = useCallback( const handleChangeModel = useCallback(
(v: string | null | undefined) => { (v: string | null | undefined) => {
if (!v) { if (!v) {
@ -46,6 +61,7 @@ const ModelSelect = () => {
label={t('modelManager.model')} label={t('modelManager.model')}
tooltip={selectedModel?.description} tooltip={selectedModel?.description}
items={allModelNames} items={allModelNames}
itemTooltips={allModelTooltips}
selectedItem={selectedModel?.name ?? ''} selectedItem={selectedModel?.name ?? ''}
setSelectedItem={handleChangeModel} setSelectedItem={handleChangeModel}
withCheckIcon={true} withCheckIcon={true}