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

fix(ui): resolve all typescript issues

Browse Source
This commit is contained in:
psychedelicious
2023-07-22 21:38:50 +10:00
parent 75863e7181
commit 5468d9a9fc
33 changed files with 280 additions and 1116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
View File

@ -22,13 +22,16 @@ export default function ParamAdvancedCollapse() {
const shouldShowAdvancedOptions = useAppSelector(
(state: RootState) => state.ui.shouldShowAdvancedOptions
);
if (!shouldShowAdvancedOptions) {
return null;
}
return (
shouldShowAdvancedOptions && (
<IAICollapse label={'Advanced'} activeLabel={activeLabel}>
<Flex sx={{ flexDir: 'column', gap: 2 }}>
<ParamClipSkip />
</Flex>
</IAICollapse>
)
<IAICollapse label={'Advanced'} activeLabel={activeLabel}>
<Flex sx={{ flexDir: 'column', gap: 2 }}>
<ParamClipSkip />
</Flex>
</IAICollapse>
);
}

33
invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessToggle.tsx
View File

@ -1,33 +0,0 @@
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setSeamless } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
/**
* Seamless tiling toggle
*/
const ParamSeamlessToggle = () => {
const dispatch = useAppDispatch();
const seamless = useAppSelector(
(state: RootState) => state.generation.seamless
);
const handleChangeSeamless = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setSeamless(e.target.checked));
const { t } = useTranslation();
return (
<IAISwitch
label={t('parameters.seamlessTiling')}
fontSize="md"
isChecked={seamless}
onChange={handleChangeSeamless}
/>
);
};
export default ParamSeamlessToggle;

48
invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedCollapse.tsx
View File

@ -1,48 +0,0 @@
import { Flex } from '@chakra-ui/react';
import ParamSeed from './ParamSeed';
import { memo, useCallback } from 'react';
import ParamSeedShuffle from './ParamSeedShuffle';
import { useTranslation } from 'react-i18next';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { createSelector } from '@reduxjs/toolkit';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { setShouldRandomizeSeed } from 'features/parameters/store/generationSlice';
import IAICollapse from 'common/components/IAICollapse';
const selector = createSelector(
generationSelector,
(generation) => {
const { shouldRandomizeSeed } = generation;
return { shouldRandomizeSeed };
},
defaultSelectorOptions
);
const ParamSeedSettings = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { shouldRandomizeSeed } = useAppSelector(selector);
const handleToggle = useCallback(
() => dispatch(setShouldRandomizeSeed(!shouldRandomizeSeed)),
[dispatch, shouldRandomizeSeed]
);
return (
<IAICollapse
label={t('parameters.seed')}
isOpen={!shouldRandomizeSeed}
onToggle={handleToggle}
withSwitch
>
<Flex sx={{ gap: 4 }}>
<ParamSeed />
<ParamSeedShuffle />
</Flex>
</IAICollapse>
);
};
export default memo(ParamSeedSettings);

84
invokeai/frontend/web/src/features/parameters/components/Parameters/Variations/ParamVariationCollapse.tsx
View File

@ -1,47 +1,51 @@
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAICollapse from 'common/components/IAICollapse';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import ParamVariationAmount from './ParamVariationAmount';
import { ParamVariationToggle } from './ParamVariationToggle';
import ParamVariationWeights from './ParamVariationWeights';
// TODO: variations
const selector = createSelector(
stateSelector,
(state) => {
const activeLabel = state.generation.shouldGenerateVariations
? 'Enabled'
: undefined;
// import { Flex } from '@chakra-ui/react';
// import { createSelector } from '@reduxjs/toolkit';
// import { stateSelector } from 'app/store/store';
// import { useAppSelector } from 'app/store/storeHooks';
// import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
// import IAICollapse from 'common/components/IAICollapse';
// import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
// import { memo } from 'react';
// import { useTranslation } from 'react-i18next';
// import ParamVariationAmount from './ParamVariationAmount';
// import { ParamVariationToggle } from './ParamVariationToggle';
// import ParamVariationWeights from './ParamVariationWeights';
return { activeLabel };
},
defaultSelectorOptions
);
// const selector = createSelector(
// stateSelector,
// (state) => {
// const activeLabel = state.generation.shouldGenerateVariations
// ? 'Enabled'
// : undefined;
const ParamVariationCollapse = () => {
const { t } = useTranslation();
const { activeLabel } = useAppSelector(selector);
// return { activeLabel };
// },
// defaultSelectorOptions
// );
const isVariationEnabled = useFeatureStatus('variation').isFeatureEnabled;
// const ParamVariationCollapse = () => {
// const { t } = useTranslation();
// const { activeLabel } = useAppSelector(selector);
if (!isVariationEnabled) {
return null;
}
// const isVariationEnabled = useFeatureStatus('variation').isFeatureEnabled;
return (
<IAICollapse label={t('parameters.variations')} activeLabel={activeLabel}>
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<ParamVariationToggle />
<ParamVariationAmount />
<ParamVariationWeights />
</Flex>
</IAICollapse>
);
};
// if (!isVariationEnabled) {
// return null;
// }
export default memo(ParamVariationCollapse);
// return (
// <IAICollapse label={t('parameters.variations')} activeLabel={activeLabel}>
// <Flex sx={{ gap: 2, flexDirection: 'column' }}>
// <ParamVariationToggle />
// <ParamVariationAmount />
// <ParamVariationWeights />
// </Flex>
// </IAICollapse>
// );
// };
// export default memo(ParamVariationCollapse);
export default {};

66
invokeai/frontend/web/src/features/parameters/components/Parameters/Variations/ParamVariationWeights.tsx
View File

@ -1,37 +1,41 @@
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInput from 'common/components/IAIInput';
import { validateSeedWeights } from 'common/util/seedWeightPairs';
import { setSeedWeights } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
// TODO: variations
export default function ParamVariationWeights() {
const seedWeights = useAppSelector(
(state: RootState) => state.generation.seedWeights
);
// import { RootState } from 'app/store/store';
// import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
// import IAIInput from 'common/components/IAIInput';
// import { validateSeedWeights } from 'common/util/seedWeightPairs';
// import { setSeedWeights } from 'features/parameters/store/generationSlice';
// import { ChangeEvent } from 'react';
// import { useTranslation } from 'react-i18next';
const shouldGenerateVariations = useAppSelector(
(state: RootState) => state.generation.shouldGenerateVariations
);
// export default function ParamVariationWeights() {
// const seedWeights = useAppSelector(
// (state: RootState) => state.generation.seedWeights
// );
const { t } = useTranslation();
// const shouldGenerateVariations = useAppSelector(
// (state: RootState) => state.generation.shouldGenerateVariations
// );
const dispatch = useAppDispatch();
// const { t } = useTranslation();
const handleChangeSeedWeights = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setSeedWeights(e.target.value));
// const dispatch = useAppDispatch();
return (
<IAIInput
label={t('parameters.seedWeights')}
value={seedWeights}
isInvalid={
shouldGenerateVariations &&
!(validateSeedWeights(seedWeights) || seedWeights === '')
}
isDisabled={!shouldGenerateVariations}
onChange={handleChangeSeedWeights}
/>
);
}
// const handleChangeSeedWeights = (e: ChangeEvent<HTMLInputElement>) =>
// dispatch(setSeedWeights(e.target.value));
// return (
// <IAIInput
// label={t('parameters.seedWeights')}
// value={seedWeights}
// isInvalid={
// shouldGenerateVariations &&
// !(validateSeedWeights(seedWeights) || seedWeights === '')
// }
// isDisabled={!shouldGenerateVariations}
// onChange={handleChangeSeedWeights}
// />
// );
// }
export default {};