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 number input to scale slider

Browse Source
This commit is contained in:
psychedelicious 2024-07-23 10:10:11 +10:00
parent ffa39d74b3
commit c3a8184431
1 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx
View File

@ -1,12 +1,12 @@
import { CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { scaleChanged } from 'features/parameters/store/upscaleSlice'; import { scaleChanged } from 'features/parameters/store/upscaleSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const marks = [2, 4, 8, 16]; const marks = [2, 4, 8];
const formatValue = (val: number) => `${val}x`; const formatValue = (val: string | number) => `${val}x`;
export const UpscaleScaleSlider = memo(() => { export const UpscaleScaleSlider = memo(() => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -23,15 +23,26 @@ export const UpscaleScaleSlider = memo(() => {
return ( return (
<FormControl orientation="vertical" gap={0}> <FormControl orientation="vertical" gap={0}>
<FormLabel m={0}>{t('upscaling.scale')}</FormLabel> <FormLabel m={0}>{t('upscaling.scale')}</FormLabel>
<CompositeSlider <Flex w="full" gap={4}>
min={2} <CompositeSlider
max={16} min={2}
value={scale} max={8}
onChange={onChange} value={scale}
marks={marks} onChange={onChange}
formatValue={formatValue} marks={marks}
withThumbTooltip formatValue={formatValue}
/> defaultValue={4}
/>
<CompositeNumberInput
maxW={20}
value={scale}
onChange={onChange}
defaultValue={4}
min={2}
max={16}
format={formatValue}
/>
</Flex>
</FormControl> </FormControl>
); );
}); });