feat(ui): add informational popovers for upscale params

This commit is contained in:
Mary Hipp
2024-07-24 19:23:14 -04:00
committed by psychedelicious
parent 5be0de967d
commit 4c75b93410
6 changed files with 45 additions and 5 deletions

View File

@ -1,5 +1,6 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { creativityChanged } from 'features/parameters/store/upscaleSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -25,7 +26,9 @@ const ParamCreativity = () => {
return (
<FormControl>
<FormLabel>{t('upscaling.creativity')}</FormLabel>
<InformationalPopover feature="creativity">
<FormLabel>{t('upscaling.creativity')}</FormLabel>
</InformationalPopover>
<CompositeSlider
value={creativity}
defaultValue={initial}

View File

@ -1,5 +1,6 @@
import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { useModelCombobox } from 'common/hooks/useModelCombobox';
import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
import { memo, useCallback, useMemo } from 'react';
@ -37,7 +38,9 @@ const ParamSpandrelModel = () => {
return (
<FormControl orientation="vertical">
<FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
<InformationalPopover feature="upscaleModel">
<FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
</InformationalPopover>
<Tooltip label={tooltipLabel}>
<Box w="full">
<Combobox

View File

@ -1,5 +1,6 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { structureChanged } from 'features/parameters/store/upscaleSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -25,7 +26,9 @@ const ParamStructure = () => {
return (
<FormControl>
<FormLabel>{t('upscaling.structure')}</FormLabel>
<InformationalPopover feature="structure">
<FormLabel>{t('upscaling.structure')}</FormLabel>
</InformationalPopover>
<CompositeSlider
value={structure}
defaultValue={initial}

View File

@ -1,5 +1,6 @@
import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { scaleChanged } from 'features/parameters/store/upscaleSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -22,7 +23,9 @@ export const UpscaleScaleSlider = memo(() => {
return (
<FormControl orientation="vertical" gap={0}>
<FormLabel m={0}>{t('upscaling.scale')}</FormLabel>
<InformationalPopover feature="scale">
<FormLabel m={0}>{t('upscaling.scale')}</FormLabel>
</InformationalPopover>
<Flex w="full" gap={4}>
<CompositeSlider
min={2}