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

add description to upscale model dropdown tooltip

Browse Source
This commit is contained in:
Mary Hipp 2024-07-19 20:54:19 -04:00 committed by psychedelicious
parent 845d77916e
commit 6cb0581b0d
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
View File

@ -1,8 +1,8 @@
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useModelCombobox } from 'common/hooks/useModelCombobox'; import { useModelCombobox } from 'common/hooks/useModelCombobox';
import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice'; import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType'; import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType';
import type { SpandrelImageToImageModelConfig } from 'services/api/types'; import type { SpandrelImageToImageModelConfig } from 'services/api/types';
@ -12,9 +12,15 @@ const ParamSpandrelModel = () => {
const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels(); const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
const model = useAppSelector((s) => s.upscale.upscaleModel); const model = useAppSelector((s) => s.upscale.upscaleModel);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const tooltipLabel = useMemo(() => {
if (!modelConfigs.length || !model) {
return;
}
return modelConfigs.find((m) => m.key === model?.key)?.description;
}, [modelConfigs, model]);
const _onChange = useCallback( const _onChange = useCallback(
(v: SpandrelImageToImageModelConfig | null) => { (v: SpandrelImageToImageModelConfig | null) => {
dispatch(upscaleModelChanged(v)); dispatch(upscaleModelChanged(v));
@ -32,13 +38,17 @@ const ParamSpandrelModel = () => {
return ( return (
<FormControl orientation="vertical"> <FormControl orientation="vertical">
<FormLabel>{t('upscaling.upscaleModel')}</FormLabel> <FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
<Combobox <Tooltip label={tooltipLabel}>
value={value} <Box w="full">
placeholder={placeholder} <Combobox
options={options} value={value}
onChange={onChange} placeholder={placeholder}
noOptionsMessage={noOptionsMessage} options={options}
/> onChange={onChange}
noOptionsMessage={noOptionsMessage}
/>
</Box>
</Tooltip>
</FormControl> </FormControl>
); );
}; };