github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

remove opacity logic from WavyLine, add badge explaining disabled state, add translations

Browse Source
This commit is contained in:
Mary Hipp
2024-11-05 09:13:40 -05:00
committed by psychedelicious
parent ae5bc6f5d6
commit 68284b37fa
3 changed files with 50 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/public/locales/en.json
View File

@@ -997,6 +997,7 @@
"controlNetControlMode": "Control Mode", "controlNetControlMode": "Control Mode",
"copyImage": "Copy Image", "copyImage": "Copy Image",
"denoisingStrength": "Denoising Strength", "denoisingStrength": "Denoising Strength",
"noRasterLayers": "No Raster Layers",
"downloadImage": "Download Image", "downloadImage": "Download Image",
"general": "General", "general": "General",
"guidance": "Guidance", "guidance": "Guidance",

11
invokeai/frontend/web/src/common/components/WavyLine.tsx
View File

@@ -1,7 +1,6 @@
const WavyLine = ({ waviness }: { waviness: number }) => {
const WavyLine = ({ waviness, isDisabled }: {waviness: number, isDisabled: boolean}) => { const width = 40; // Width of the SVG
const width = 60; // Width of the SVG const height = 14; // Height of the SVG
const height = 28; // Height of the SVG
const segments = 5; // Number of segments in the line (more segments = smoother wave) const segments = 5; // Number of segments in the line (more segments = smoother wave)
// Calculate the path dynamically based on waviness // Calculate the path dynamically based on waviness
@@ -26,8 +25,8 @@ const WavyLine = ({ waviness, isDisabled }: {waviness: number, isDisabled: boole
}; };
return ( return (
<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg" opacity={isDisabled ? 0.5 : 1}> <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
<path d={generatePath()} fill="none" stroke="#4299e1" strokeWidth="6" /> <path d={generatePath()} fill="none" stroke="#4299e1" strokeWidth="3" />
</svg> </svg>
); );
}; };

73
invokeai/frontend/web/src/features/controlLayers/components/ParamDenoisingStrength.tsx
View File

@@ -1,12 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { Badge, Box, 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 { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import WavyLine from 'common/components/WavyLine';
import { selectImg2imgStrength, setImg2imgStrength } from 'features/controlLayers/store/paramsSlice'; import { selectImg2imgStrength, setImg2imgStrength } from 'features/controlLayers/store/paramsSlice';
import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
import { selectImg2imgStrengthConfig } from 'features/system/store/configSlice'; import { selectImg2imgStrengthConfig } from 'features/system/store/configSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { selectCanvasSlice } from '../store/selectors';
import WavyLine from '../../../common/components/WavyLine';
const marks = [0, 0.5, 1]; const marks = [0, 0.5, 1];
@@ -14,10 +14,11 @@ export const ParamDenoisingStrength = memo(() => {
const img2imgStrength = useAppSelector(selectImg2imgStrength); const img2imgStrength = useAppSelector(selectImg2imgStrength);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const isEnabled = useAppSelector( const isEnabled = useAppSelector(
(s) => selectCanvasSlice(s).rasterLayers.entities.length > 0 && selectCanvasSlice(s).rasterLayers.entities.some(layer => layer.isEnabled) (s) =>
selectCanvasSlice(s).rasterLayers.entities.length > 0 &&
selectCanvasSlice(s).rasterLayers.entities.some((layer) => layer.isEnabled)
); );
const onChange = useCallback( const onChange = useCallback(
(v: number) => { (v: number) => {
dispatch(setImg2imgStrength(v)); dispatch(setImg2imgStrength(v));
@@ -29,30 +30,44 @@ export const ParamDenoisingStrength = memo(() => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<FormControl isDisabled={!isEnabled} py={2}> <FormControl isDisabled={!isEnabled} py={2} justifyContent="space-between">
<InformationalPopover feature="paramDenoisingStrength"> <Flex gap={3} alignItems="center">
<FormLabel mr={0}>{`${t('parameters.denoisingStrength')}`}</FormLabel> <InformationalPopover feature="paramDenoisingStrength">
</InformationalPopover> <FormLabel mr={0}>{`${t('parameters.denoisingStrength')}`}</FormLabel>
<WavyLine waviness={img2imgStrength * 10} isDisabled={!isEnabled}/> </InformationalPopover>
<CompositeSlider <Box position="relative" opacity={!isEnabled ? 0.5 : 1}>
step={config.coarseStep} <WavyLine waviness={img2imgStrength * 10} />
fineStep={config.fineStep} </Box>
min={config.sliderMin} </Flex>
max={config.sliderMax} {isEnabled ? (
defaultValue={config.initial} <>
onChange={onChange} <CompositeSlider
value={img2imgStrength} step={config.coarseStep}
marks={marks} fineStep={config.fineStep}
/> min={config.sliderMin}
<CompositeNumberInput max={config.sliderMax}
step={config.coarseStep} defaultValue={config.initial}
fineStep={config.fineStep} onChange={onChange}
min={config.numberInputMin} value={img2imgStrength}
max={config.numberInputMax} marks={marks}
defaultValue={config.initial} />
onChange={onChange} <CompositeNumberInput
value={img2imgStrength} step={config.coarseStep}
/> fineStep={config.fineStep}
min={config.numberInputMin}
max={config.numberInputMax}
defaultValue={config.initial}
onChange={onChange}
value={img2imgStrength}
/>
</>
) : (
<Flex justifySelf="flex-end">
<Badge opacity="0.6">
{t('common.disabled')} - {t('parameters.noRasterLayers')}
</Badge>
</Flex>
)}
</FormControl> </FormControl>
); );
}); });