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): processor layout/styling

Browse Source
This commit is contained in:
psychedelicious 2024-05-02 08:32:54 +10:00 committed by Kent Keirsey
parent ca1c3c0873
commit 45c2ac41d5
14 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx
View File

@ -95,13 +95,13 @@ export const ControlAdapter = memo(
</Flex>
</Flex>
{isExpanded && (
<>
<Flex flexDir="column" gap={3} w="full">
<ControlAdapterProcessorTypeSelect
config={controlAdapter.processorConfig}
onChange={onChangeProcessorConfig}
/>
<ControlAdapterProcessorConfig config={controlAdapter.processorConfig} onChange={onChangeProcessorConfig} />
</>
</Flex>
)}
</Flex>
);

2
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterProcessorTypeSelect.tsx
View File

@ -51,7 +51,7 @@ export const ControlAdapterProcessorTypeSelect = memo(({ config, onChange }: Pro
<Flex gap={2}>
<FormControl>
<InformationalPopover feature="controlNetProcessor">
<FormLabel>{t('controlnet.processor')}</FormLabel>
<FormLabel m={0}>{t('controlnet.processor')}</FormLabel>
</InformationalPopover>
<Combobox value={value} options={options} onChange={_onChange} isSearchable={false} isClearable={false} />
</FormControl>

4
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/CannyProcessor.tsx
View File

@ -27,7 +27,7 @@ export const CannyProcessor = ({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.lowThreshold')}</FormLabel>
<FormLabel m={0}>{t('controlnet.lowThreshold')}</FormLabel>
<CompositeSlider
value={config.low_threshold}
onChange={handleLowThresholdChanged}
@ -44,7 +44,7 @@ export const CannyProcessor = ({ onChange, config }: Props) => {
/>
</FormControl>
<FormControl>
<FormLabel>{t('controlnet.highThreshold')}</FormLabel>
<FormLabel m={0}>{t('controlnet.highThreshold')}</FormLabel>
<CompositeSlider
value={config.high_threshold}
onChange={handleHighThresholdChanged}

2
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ColorMapProcessor.tsx
View File

@ -21,7 +21,7 @@ export const ColorMapProcessor = memo(({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.colorMapTileSize')}</FormLabel>
<FormLabel m={0}>{t('controlnet.colorMapTileSize')}</FormLabel>
<CompositeSlider
value={config.color_map_tile_size}
defaultValue={DEFAULTS.color_map_tile_size}

6
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ContentShuffleProcessor.tsx
View File

@ -37,7 +37,7 @@ export const ContentShuffleProcessor = memo(({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.w')}</FormLabel>
<FormLabel m={0}>{t('controlnet.w')}</FormLabel>
<CompositeSlider
value={config.w}
defaultValue={DEFAULTS.w}
@ -49,7 +49,7 @@ export const ContentShuffleProcessor = memo(({ onChange, config }: Props) => {
<CompositeNumberInput value={config.w} defaultValue={DEFAULTS.w} onChange={handleWChanged} min={0} max={4096} />
</FormControl>
<FormControl>
<FormLabel>{t('controlnet.h')}</FormLabel>
<FormLabel m={0}>{t('controlnet.h')}</FormLabel>
<CompositeSlider
value={config.h}
defaultValue={DEFAULTS.h}
@ -61,7 +61,7 @@ export const ContentShuffleProcessor = memo(({ onChange, config }: Props) => {
<CompositeNumberInput value={config.h} defaultValue={DEFAULTS.h} onChange={handleHChanged} min={0} max={4096} />
</FormControl>
<FormControl>
<FormLabel>{t('controlnet.f')}</FormLabel>
<FormLabel m={0}>{t('controlnet.f')}</FormLabel>
<CompositeSlider
value={config.f}
defaultValue={DEFAULTS.f}

6
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DWOpenposeProcessor.tsx
View File

@ -39,15 +39,15 @@ export const DWOpenposeProcessor = memo(({ onChange, config }: Props) => {
<ProcessorWrapper>
<Flex sx={{ flexDir: 'row', gap: 6 }}>
<FormControl w="max-content">
<FormLabel>{t('controlnet.body')}</FormLabel>
<FormLabel m={0}>{t('controlnet.body')}</FormLabel>
<Switch defaultChecked={DEFAULTS.draw_body} isChecked={config.draw_body} onChange={handleDrawBodyChanged} />
</FormControl>
<FormControl w="max-content">
<FormLabel>{t('controlnet.face')}</FormLabel>
<FormLabel m={0}>{t('controlnet.face')}</FormLabel>
<Switch defaultChecked={DEFAULTS.draw_face} isChecked={config.draw_face} onChange={handleDrawFaceChanged} />
</FormControl>
<FormControl w="max-content">
<FormLabel>{t('controlnet.hands')}</FormLabel>
<FormLabel m={0}>{t('controlnet.hands')}</FormLabel>
<Switch
defaultChecked={DEFAULTS.draw_hands}
isChecked={config.draw_hands}

2
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx
View File

@ -37,7 +37,7 @@ export const DepthAnythingProcessor = memo(({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.modelSize')}</FormLabel>
<FormLabel m={0}>{t('controlnet.modelSize')}</FormLabel>
<Combobox
value={value}
defaultInputValue={DEFAULTS.model_size}

2
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/HedProcessor.tsx
View File

@ -22,7 +22,7 @@ export const HedProcessor = memo(({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.scribble')}</FormLabel>
<FormLabel m={0}>{t('controlnet.scribble')}</FormLabel>
<Switch isChecked={config.scribble} onChange={handleScribbleChanged} />
</FormControl>
</ProcessorWrapper>

2
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/LineartProcessor.tsx
View File

@ -22,7 +22,7 @@ export const LineartProcessor = memo(({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.coarse')}</FormLabel>
<FormLabel m={0}>{t('controlnet.coarse')}</FormLabel>
<Switch isChecked={config.coarse} onChange={handleCoarseChanged} />
</FormControl>
</ProcessorWrapper>

4
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MediapipeFaceProcessor.tsx
View File

@ -29,7 +29,7 @@ export const MediapipeFaceProcessor = memo(({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.maxFaces')}</FormLabel>
<FormLabel m={0}>{t('controlnet.maxFaces')}</FormLabel>
<CompositeSlider
value={config.max_faces}
onChange={handleMaxFacesChanged}
@ -47,7 +47,7 @@ export const MediapipeFaceProcessor = memo(({ onChange, config }: Props) => {
/>
</FormControl>
<FormControl>
<FormLabel>{t('controlnet.minConfidence')}</FormLabel>
<FormLabel m={0}>{t('controlnet.minConfidence')}</FormLabel>
<CompositeSlider
value={config.min_confidence}
onChange={handleMinConfidenceChanged}

4
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MidasDepthProcessor.tsx
View File

@ -30,7 +30,7 @@ export const MidasDepthProcessor = memo(({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.amult')}</FormLabel>
<FormLabel m={0}>{t('controlnet.amult')}</FormLabel>
<CompositeSlider
value={config.a_mult}
onChange={handleAMultChanged}
@ -50,7 +50,7 @@ export const MidasDepthProcessor = memo(({ onChange, config }: Props) => {
/>
</FormControl>
<FormControl>
<FormLabel>{t('controlnet.bgth')}</FormLabel>
<FormLabel m={0}>{t('controlnet.bgth')}</FormLabel>
<CompositeSlider
value={config.bg_th}
onChange={handleBgThChanged}

4
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MlsdImageProcessor.tsx
View File

@ -30,7 +30,7 @@ export const MlsdImageProcessor = memo(({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.w')} </FormLabel>
<FormLabel m={0}>{t('controlnet.w')} </FormLabel>
<CompositeSlider
value={config.thr_d}
onChange={handleThrDChanged}
@ -50,7 +50,7 @@ export const MlsdImageProcessor = memo(({ onChange, config }: Props) => {
/>
</FormControl>
<FormControl>
<FormLabel>{t('controlnet.h')} </FormLabel>
<FormLabel m={0}>{t('controlnet.h')} </FormLabel>
<CompositeSlider
value={config.thr_v}
onChange={handleThrVChanged}

4
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/PidiProcessor.tsx
View File

@ -29,11 +29,11 @@ export const PidiProcessor = ({ onChange, config }: Props) => {
return (
<ProcessorWrapper>
<FormControl>
<FormLabel>{t('controlnet.scribble')}</FormLabel>
<FormLabel m={0}>{t('controlnet.scribble')}</FormLabel>
<Switch isChecked={config.scribble} onChange={handleScribbleChanged} />
</FormControl>
<FormControl>
<FormLabel>{t('controlnet.safe')}</FormLabel>
<FormLabel m={0}>{t('controlnet.safe')}</FormLabel>
<Switch isChecked={config.safe} onChange={handleSafeChanged} />
</FormControl>
</ProcessorWrapper>

2
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ProcessorWrapper.tsx
View File

@ -6,7 +6,7 @@ type Props = PropsWithChildren;
const ProcessorWrapper = (props: Props) => {
return (
<Flex flexDir="column" gap={4}>
<Flex flexDir="column" gap={3}>
{props.children}
</Flex>
);