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): migrate to @invoke-ai/ui

Browse Source
This commit is contained in:
psychedelicious
2024-01-20 11:04:19 +11:00
parent 8e2ccab1f0
commit 5d068c1da1
478 changed files with 3585 additions and 8367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx
View File

@ -1,5 +1,5 @@
import { FormControlGroup } from '@invoke-ai/ui';
import { useAppSelector } from 'app/store/storeHooks';
import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
@ -18,10 +18,10 @@ export const HrfSettings = memo(() => {
return (
<>
<ParamHrfToggle />
<InvControlGroup isDisabled={!hrfEnabled}>
<FormControlGroup isDisabled={!hrfEnabled}>
<ParamHrfStrength />
<ParamHrfMethod />
</InvControlGroup>
</FormControlGroup>
</>
);
});

19
invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
View File

@ -1,16 +1,12 @@
import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSelect } from 'common/components/InvSelect/InvSelect';
import type {
InvSelectOnChange,
InvSelectOption,
} from 'common/components/InvSelect/types';
import { setHrfMethod } from 'features/hrf/store/hrfSlice';
import { isParameterHRFMethod } from 'features/parameters/types/parameterSchemas';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
const options: InvSelectOption[] = [
const options: ComboboxOption[] = [
{ label: 'ESRGAN', value: 'ESRGAN' },
{ label: 'bilinear', value: 'bilinear' },
];
@ -20,7 +16,7 @@ const ParamHrfMethodSelect = () => {
const { t } = useTranslation();
const hrfMethod = useAppSelector((s) => s.hrf.hrfMethod);
const onChange = useCallback<InvSelectOnChange>(
const onChange = useCallback<ComboboxOnChange>(
(v) => {
if (!isParameterHRFMethod(v?.value)) {
return;
@ -36,9 +32,10 @@ const ParamHrfMethodSelect = () => {
);
return (
<InvControl label={t('hrf.upscaleMethod')}>
<InvSelect value={value} options={options} onChange={onChange} />
</InvControl>
<FormControl>
<FormLabel>{t('hrf.upscaleMethod')}</FormLabel>
<Combobox value={value} options={options} onChange={onChange} />
</FormControl>
);
};

27
invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
View File

@ -1,6 +1,10 @@
import {
CompositeNumberInput,
CompositeSlider,
FormControl,
FormLabel,
} from '@invoke-ai/ui';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSlider } from 'common/components/InvSlider/InvSlider';
import { setHrfStrength } from 'features/hrf/store/hrfSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -29,8 +33,9 @@ const ParamHrfStrength = () => {
);
return (
<InvControl label={t('parameters.denoisingStrength')}>
<InvSlider
<FormControl>
<FormLabel>{t('parameters.denoisingStrength')}</FormLabel>
<CompositeSlider
min={sliderMin}
max={sliderMax}
step={coarseStep}
@ -39,11 +44,17 @@ const ParamHrfStrength = () => {
defaultValue={initial}
onChange={onChange}
marks
withNumberInput
numberInputMin={numberInputMin}
numberInputMax={numberInputMax}
/>
</InvControl>
<CompositeNumberInput
min={numberInputMin}
max={numberInputMax}
step={coarseStep}
fineStep={fineStep}
value={hrfStrength}
defaultValue={initial}
onChange={onChange}
/>
</FormControl>
);
};

13
invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
View File

@ -1,7 +1,5 @@
import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import type { InvLabelProps } from 'common/components/InvControl/types';
import { InvSwitch } from 'common/components/InvSwitch/wrapper';
import { setHrfEnabled } from 'features/hrf/store/hrfSlice';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
@ -20,12 +18,11 @@ const ParamHrfToggle = () => {
);
return (
<InvControl label={t('hrf.enableHrf')} labelProps={labelProps} w="full">
<InvSwitch isChecked={hrfEnabled} onChange={handleHrfEnabled} />
</InvControl>
<FormControl w="full">
<FormLabel flexGrow={1}>{t('hrf.enableHrf')}</FormLabel>
<Switch isChecked={hrfEnabled} onChange={handleHrfEnabled} />
</FormControl>
);
};
const labelProps: InvLabelProps = { flexGrow: 1 };
export default memo(ParamHrfToggle);