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

feat(ui): migrated theming to chakra

Browse Source 
build(ui): fix husky path

build(ui): fix hmr issue, remove emotion cache

build(ui): clean up package.json

build(ui): update gh action and npm scripts

feat(ui): wip port lightbox to chakra theme

feat(ui): wip use chakra theme tokens

feat(ui): Add status text to main loading spinner

feat(ui): wip chakra theme tweaking

feat(ui): simply iaisimplemenu button

feat(ui): wip chakra theming

feat(ui): Theme Management

feat(ui): Add Ocean Blue Theme

feat(ui): wip lightbox

fix(ui): fix lightbox mouse

feat(ui): set default theme variants

feat(ui): model manager chakra theme

chore(ui): lint

feat(ui): remove last scss

feat(ui): fix switch theme

feat(ui): Theme Cleanup

feat(ui): Stylize Search Models Found List

feat(ui): hide scrollbars

feat(ui): fix floating button position

feat(ui): Scrollbar Styling

fix broken scripts

This PR fixes the following scripts:

1) Scripts that can be executed within the repo's scripts directory.
   Note that these are for development testing and are not intended
   to be exposed to the user.

   configure_invokeai.py - configuration
   dream.py              - the legacy CLI
   images2prompt.py      - legacy "dream prompt" retriever
   invoke-new.py         - new nodes-based CLI
   invoke.py             - the legacy CLI under another name
   make_models_markdown_table.py - a utility used during the release/doc process
   pypi_helper.py        - another utility used during the release process
   sd-metadata.py        - retrieve JSON-formatted metadata from a PNG file

2) Scripts that are installed by pip install. They get placed into the venv's
   PATH and are intended to be the official entry points:

   invokeai-node-cli      - new nodes-based CLI
   invokeai-node-web      - new nodes-based web server
   invokeai               - legacy CLI
   invokeai-configure     - install time configuration script
   invokeai-merge         - model merging script
   invokeai-ti            - textual inversion script
   invokeai-model-install - model installer
   invokeai-update        - update script
   invokeai-metadata"     - retrieve JSON-formatted metadata from PNG files

protect invocations against black autoformatting

deps: upgrade to diffusers 0.14, safetensors 0.3, transformers 4.26, accelerate 0.16
This commit is contained in:
psychedelicious
2023-03-04 10:41:46 +11:00
parent 86e2cb0428
commit 545d8968fd
340 changed files with 5938 additions and 7063 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/common/components/GuidePopover.scss
View File

@@ -1,20 +0,0 @@
.guide-popover-arrow {
background-color: var(--tab-panel-bg);
box-shadow: none;
}
.guide-popover-content {
background-color: var(--background-color-secondary);
border: none;
}
.guide-popover-guide-content {
background: var(--tab-panel-bg);
border: 2px solid var(--tab-hover-color);
border-radius: 0.4rem;
padding: 0.75rem 1rem 0.75rem 1rem;
display: grid;
grid-template-rows: repeat(auto-fill, 1fr);
grid-row-gap: 0.5rem;
justify-content: space-between;
}

6
invokeai/frontend/web/src/common/components/GuidePopover.tsx
View File

@@ -2,6 +2,7 @@ import {
Box,
Popover,
PopoverArrow,
PopoverBody,
PopoverContent,
PopoverTrigger,
} from '@chakra-ui/react';
@@ -34,13 +35,12 @@ const GuidePopover = ({ children, feature }: GuideProps) => {
<Box>{children}</Box>
</PopoverTrigger>
<PopoverContent
className="guide-popover-content"
maxWidth="400px"
onClick={(e) => e.preventDefault()}
cursor="initial"
>
<PopoverArrow className="guide-popover-arrow" />
<div className="guide-popover-guide-content">{text}</div>
<PopoverArrow />
<PopoverBody>{text}</PopoverBody>
</PopoverContent>
</Popover>
);

16
invokeai/frontend/web/src/common/components/IAIAlertDialog.tsx
View File

@@ -5,11 +5,11 @@ import {
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Button,
forwardRef,
useDisclosure,
} from '@chakra-ui/react';
import { cloneElement, ReactElement, ReactNode, useRef } from 'react';
import IAIButton from './IAIButton';
type Props = {
acceptButtonText?: string;
@@ -58,7 +58,7 @@ const IAIAlertDialog = forwardRef((props: Props, ref) => {
onClose={onClose}
>
<AlertDialogOverlay>
<AlertDialogContent className="modal">
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
{title}
</AlertDialogHeader>
@@ -66,16 +66,12 @@ const IAIAlertDialog = forwardRef((props: Props, ref) => {
<AlertDialogBody>{children}</AlertDialogBody>
<AlertDialogFooter>
<Button
ref={cancelRef}
onClick={handleCancel}
className="modal-close-btn"
>
<IAIButton ref={cancelRef} onClick={handleCancel}>
{cancelButtonText}
</Button>
<Button colorScheme="red" onClick={handleAccept} ml={3}>
</IAIButton>
<IAIButton colorScheme="error" onClick={handleAccept} ml={3}>
{acceptButtonText}
</Button>
</IAIButton>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>

8
invokeai/frontend/web/src/common/components/IAIButton.scss
View File

@@ -1,8 +0,0 @@
.invokeai__button {
background-color: var(--btn-base-color);
place-content: center;
&:hover {
background-color: var(--btn-base-color-hover);
}
}

10
invokeai/frontend/web/src/common/components/IAIButton.tsx
View File

@@ -10,19 +10,15 @@ import { ReactNode } from 'react';
export interface IAIButtonProps extends ButtonProps {
tooltip?: string;
tooltipProps?: Omit<TooltipProps, 'children'>;
styleClass?: string;
isChecked?: boolean;
children: ReactNode;
}
const IAIButton = forwardRef((props: IAIButtonProps, forwardedRef) => {
const { children, tooltip = '', tooltipProps, styleClass, ...rest } = props;
const { children, tooltip = '', tooltipProps, isChecked, ...rest } = props;
return (
<Tooltip label={tooltip} {...tooltipProps}>
<Button
ref={forwardedRef}
className={['invokeai__button', styleClass].join(' ')}
{...rest}
>
<Button ref={forwardedRef} aria-checked={isChecked} {...rest}>
{children}
</Button>
</Tooltip>

26
invokeai/frontend/web/src/common/components/IAICheckbox.scss
View File

@@ -1,26 +0,0 @@
.invokeai__checkbox {
.chakra-checkbox__label {
margin-top: 1px;
color: var(--text-color-secondary);
font-size: 0.9rem;
}
.chakra-checkbox__control {
width: 1rem;
height: 1rem;
border: none;
border-radius: 0.2rem;
background-color: var(--input-checkbox-bg);
svg {
width: 0.6rem;
height: 0.6rem;
stroke-width: 3px;
}
&[data-checked] {
color: var(--text-color);
background-color: var(--input-checkbox-checked-bg);
}
}
}

5
invokeai/frontend/web/src/common/components/IAICheckbox.tsx
View File

@@ -3,13 +3,12 @@ import type { ReactNode } from 'react';
type IAICheckboxProps = CheckboxProps & {
label: string | ReactNode;
styleClass?: string;
};
const IAICheckbox = (props: IAICheckboxProps) => {
const { label, styleClass, ...rest } = props;
const { label, ...rest } = props;
return (
<Checkbox className={`invokeai__checkbox ${styleClass}`} {...rest}>
<Checkbox colorScheme="accent" {...rest}>
{label}
</Checkbox>
);

8
invokeai/frontend/web/src/common/components/IAIColorPicker.scss
View File

@@ -1,8 +0,0 @@
.invokeai__color-picker {
.react-colorful__hue-pointer,
.react-colorful__saturation-pointer {
width: 1.5rem;
height: 1.5rem;
border-color: var(--white);
}
}

29
invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
View File

@@ -1,16 +1,35 @@
import { chakra, ChakraProps } from '@chakra-ui/react';
import { RgbaColorPicker } from 'react-colorful';
import { ColorPickerBaseProps, RgbaColor } from 'react-colorful/dist/types';
type IAIColorPickerProps = ColorPickerBaseProps<RgbaColor> & {
styleClass?: string;
type IAIColorPickerProps = Omit<ColorPickerBaseProps<RgbaColor>, 'color'> &
ChakraProps & {
pickerColor: RgbaColor;
styleClass?: string;
};
const ChakraRgbaColorPicker = chakra(RgbaColorPicker, {
baseStyle: { paddingInline: 4 },
shouldForwardProp: (prop) => !['pickerColor'].includes(prop),
});
const colorPickerStyles: NonNullable<ChakraProps['sx']> = {
width: 6,
height: 6,
borderColor: 'base.100',
};
const IAIColorPicker = (props: IAIColorPickerProps) => {
const { styleClass, ...rest } = props;
const { styleClass = '', ...rest } = props;
return (
<RgbaColorPicker
className={`invokeai__color-picker ${styleClass}`}
<ChakraRgbaColorPicker
sx={{
'.react-colorful__hue-pointer': colorPickerStyles,
'.react-colorful__saturation-pointer': colorPickerStyles,
'.react-colorful__alpha-pointer': colorPickerStyles,
}}
className={styleClass}
{...rest}
/>
);

82
invokeai/frontend/web/src/common/components/IAIIconButton.scss
View File

@@ -1,82 +0,0 @@
@use '../../styles/Mixins/' as *;
.invokeai__icon-button {
background: var(--btn-base-color);
cursor: pointer;
&:hover {
background-color: var(--btn-base-color-hover);
}
&[data-selected='true'] {
background-color: var(--accent-color);
&:hover {
background-color: var(--accent-color-hover);
}
}
&[disabled] {
cursor: not-allowed;
}
&[data-variant='link'] {
background: none;
&:hover {
background: none;
}
}
// Check Box Style
&[data-as-checkbox='true'] {
background-color: var(--btn-base-color);
border: 3px solid var(--btn-base-color);
svg {
fill: var(--text-color);
}
&:hover {
background-color: var(--btn-base-color);
border-color: var(--btn-checkbox-border-hover);
svg {
fill: var(--text-color);
}
}
&[data-selected='true'] {
border-color: var(--accent-color);
svg {
fill: var(--accent-color-hover);
}
&:hover {
svg {
fill: var(--accent-color-hover);
}
}
}
}
&[data-alert='true'] {
animation-name: pulseColor;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
&:hover {
animation: none;
background-color: var(--accent-color-hover);
}
}
}
@keyframes pulseColor {
0% {
background-color: var(--accent-color);
}
50% {
background-color: var(--accent-color-dim);
}
100% {
background-color: var(--accent-color);
}
}

19
invokeai/frontend/web/src/common/components/IAIIconButton.tsx
View File

@@ -7,22 +7,13 @@ import {
} from '@chakra-ui/react';
export type IAIIconButtonProps = IconButtonProps & {
styleClass?: string;
tooltip?: string;
tooltipProps?: Omit<TooltipProps, 'children'>;
asCheckbox?: boolean;
isChecked?: boolean;
};
const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
const {
tooltip = '',
styleClass,
tooltipProps,
asCheckbox,
isChecked,
...rest
} = props;
const { tooltip = '', tooltipProps, isChecked, ...rest } = props;
return (
<Tooltip
@@ -35,13 +26,7 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
>
<IconButton
ref={forwardedRef}
className={
styleClass
? `invokeai__icon-button ${styleClass}`
: `invokeai__icon-button`
}
data-as-checkbox={asCheckbox}
data-selected={isChecked !== undefined ? isChecked : undefined}
aria-checked={isChecked !== undefined ? isChecked : undefined}
{...rest}
/>
</Tooltip>

33
invokeai/frontend/web/src/common/components/IAIInput.scss
View File

@@ -1,33 +0,0 @@
.input {
display: grid;
grid-template-columns: max-content auto;
column-gap: 1rem;
align-items: center;
.input-label {
color: var(--text-color-secondary);
}
.input-entry {
background-color: var(--background-color-secondary);
border: 2px solid var(--border-color);
border-radius: 0.2rem;
font-weight: bold;
&:focus {
outline: none;
border: 2px solid var(--input-border-color);
box-shadow: 0 0 10px 0 var(--input-box-shadow-color);
}
&:disabled {
opacity: 0.2;
}
&[aria-invalid='true'] {
outline: none;
border: 2px solid var(--border-color-invalid);
box-shadow: 0 0 10px 0 var(--box-shadow-color-invalid);
}
}
}

34
invokeai/frontend/web/src/common/components/IAIInput.tsx
View File

@@ -1,47 +1,37 @@
import { FormControl, FormLabel, Input, InputProps } from '@chakra-ui/react';
import {
FormControl,
FormControlProps,
FormLabel,
Input,
InputProps,
} from '@chakra-ui/react';
import { ChangeEvent } from 'react';
interface IAIInputProps extends InputProps {
styleClass?: string;
label?: string;
width?: string | number;
value?: string;
size?: string;
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
formControlProps?: Omit<FormControlProps, 'isInvalid' | 'isDisabled'>;
}
export default function IAIInput(props: IAIInputProps) {
const {
label = '',
styleClass,
isDisabled = false,
fontSize = 'sm',
width,
size = 'sm',
isInvalid,
formControlProps,
...rest
} = props;
return (
<FormControl
className={`input ${styleClass}`}
isInvalid={isInvalid}
isDisabled={isDisabled}
{...formControlProps}
>
{label !== '' && (
<FormLabel
fontSize={fontSize}
fontWeight="bold"
alignItems="center"
whiteSpace="nowrap"
marginBottom={0}
marginRight={0}
className="input-label"
>
{label}
</FormLabel>
)}
<Input {...rest} className="input-entry" size={size} width={width} />
{label !== '' && <FormLabel>{label}</FormLabel>}
<Input {...rest} />
</FormControl>
);
}

66
invokeai/frontend/web/src/common/components/IAINumberInput.scss
View File

@@ -1,66 +0,0 @@
.invokeai__number-input-form-control {
display: flex;
align-items: center;
column-gap: 1rem;
.invokeai__number-input-form-label {
color: var(--text-color-secondary);
&[data-focus] + .invokeai__number-input-root {
outline: none;
border: 2px solid var(--input-border-color);
box-shadow: 0 0 10px 0 var(--input-box-shadow-color);
}
&[aria-invalid='true'] + .invokeai__number-input-root {
outline: none;
border: 2px solid var(--border-color-invalid);
box-shadow: 0 0 10px 0 var(--box-shadow-color-invalid);
}
}
.invokeai__number-input-root {
height: 2rem;
display: grid;
grid-template-columns: auto max-content;
column-gap: 0.5rem;
align-items: center;
background-color: var(--background-color-secondary);
border: 2px solid var(--border-color);
border-radius: 0.3rem;
}
.invokeai__number-input-field {
border: none;
font-weight: bold;
width: 100%;
height: auto;
font-size: 0.9rem;
padding: 0 0.5rem;
&:focus {
outline: none;
box-shadow: none;
}
&:disabled {
opacity: 0.2;
}
}
.invokeai__number-input-stepper {
display: grid;
padding-right: 0.5rem;
.invokeai__number-input-stepper-button {
border: none;
// expand arrow hitbox
padding: 0 0.5rem;
margin: 0 -0.5rem;
svg {
width: 10px;
height: 10px;
}
}
}
}

50
invokeai/frontend/web/src/common/components/IAINumberInput.tsx
View File

@@ -9,6 +9,7 @@ import {
NumberInputField,
NumberInputFieldProps,
NumberInputProps,
NumberInputStepper,
NumberInputStepperProps,
Tooltip,
TooltipProps,
@@ -20,10 +21,7 @@ import { FocusEvent, useEffect, useState } from 'react';
const numberStringRegex = /^-?(0\.)?\.?$/;
interface Props extends Omit<NumberInputProps, 'onChange'> {
styleClass?: string;
label?: string;
labelFontSize?: string | number;
width?: string | number;
showStepper?: boolean;
value?: number;
onChange: (v: number) => void;
@@ -45,12 +43,8 @@ interface Props extends Omit<NumberInputProps, 'onChange'> {
const IAINumberInput = (props: Props) => {
const {
label,
labelFontSize = 'sm',
styleClass,
isDisabled = false,
showStepper = true,
width,
textAlign,
isInvalid,
value,
onChange,
@@ -119,29 +113,10 @@ const IAINumberInput = (props: Props) => {
<FormControl
isDisabled={isDisabled}
isInvalid={isInvalid}
className={
styleClass
? `invokeai__number-input-form-control ${styleClass}`
: `invokeai__number-input-form-control`
}
{...formControlProps}
>
{label && (
<FormLabel
className="invokeai__number-input-form-label"
style={{ display: label ? 'block' : 'none' }}
fontSize={labelFontSize}
fontWeight="bold"
marginRight={0}
marginBottom={0}
whiteSpace="nowrap"
{...formLabelProps}
>
{label}
</FormLabel>
)}
{label && <FormLabel {...formLabelProps}>{label}</FormLabel>}
<NumberInput
className="invokeai__number-input-root"
value={valueAsString}
min={min}
max={max}
@@ -149,25 +124,14 @@ const IAINumberInput = (props: Props) => {
clampValueOnBlur={false}
onChange={handleOnChange}
onBlur={handleBlur}
width={width}
{...rest}
>
<NumberInputField
className="invokeai__number-input-field"
textAlign={textAlign}
{...numberInputFieldProps}
/>
<NumberInputField {...numberInputFieldProps} />
{showStepper && (
<div className="invokeai__number-input-stepper">
<NumberIncrementStepper
{...numberInputStepperProps}
className="invokeai__number-input-stepper-button"
/>
<NumberDecrementStepper
{...numberInputStepperProps}
className="invokeai__number-input-stepper-button"
/>
</div>
<NumberInputStepper>
<NumberIncrementStepper {...numberInputStepperProps} />
<NumberDecrementStepper {...numberInputStepperProps} />
</NumberInputStepper>
)}
</NumberInput>
</FormControl>

12
invokeai/frontend/web/src/common/components/IAIPopover.scss
View File

@@ -1,12 +0,0 @@
.invokeai__popover-content {
min-width: unset;
width: unset;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--background-color);
border: 2px solid var(--border-color);
.invokeai__popover-arrow {
background-color: var(--background-color) !important;
}
}

9
invokeai/frontend/web/src/common/components/IAIPopover.tsx
View File

@@ -12,7 +12,6 @@ type IAIPopoverProps = PopoverProps & {
triggerComponent: ReactNode;
triggerContainerProps?: BoxProps;
children: ReactNode;
styleClass?: string;
hasArrow?: boolean;
};
@@ -20,16 +19,16 @@ const IAIPopover = (props: IAIPopoverProps) => {
const {
triggerComponent,
children,
styleClass,
hasArrow = true,
isLazy = true,
...rest
} = props;
return (
<Popover {...rest}>
<Popover isLazy={isLazy} {...rest}>
<PopoverTrigger>{triggerComponent}</PopoverTrigger>
<PopoverContent className={`invokeai__popover-content ${styleClass}`}>
{hasArrow && <PopoverArrow className="invokeai__popover-arrow" />}
<PopoverContent>
{hasArrow && <PopoverArrow />}
{children}
</PopoverContent>
</Popover>

31
invokeai/frontend/web/src/common/components/IAISelect.scss
View File

@@ -1,31 +0,0 @@
@use '../../styles/Mixins/' as *;
.invokeai__select {
display: flex;
column-gap: 1rem;
align-items: center;
.invokeai__select-label {
color: var(--text-color-secondary);
}
.invokeai__select-picker {
border: 2px solid var(--border-color);
background-color: var(--background-color-secondary);
font-weight: bold;
font-size: 0.9rem;
height: 2rem;
border-radius: 0.2rem;
&:focus {
outline: none;
border: 2px solid var(--input-border-color);
box-shadow: 0 0 10px 0 var(--input-box-shadow-color);
}
}
.invokeai__select-option {
background-color: var(--background-color-secondary);
color: var(--text-color-secondary);
}
}

43
invokeai/frontend/web/src/common/components/IAISelect.tsx
View File

@@ -10,7 +10,6 @@ import { MouseEvent } from 'react';
type IAISelectProps = SelectProps & {
label?: string;
styleClass?: string;
tooltip?: string;
tooltipProps?: Omit<TooltipProps, 'children'>;
validValues:
@@ -21,21 +20,11 @@ type IAISelectProps = SelectProps & {
* Customized Chakra FormControl + Select multi-part component.
*/
const IAISelect = (props: IAISelectProps) => {
const {
label,
isDisabled,
validValues,
tooltip,
tooltipProps,
size = 'sm',
fontSize = 'sm',
styleClass,
...rest
} = props;
const { label, isDisabled, validValues, tooltip, tooltipProps, ...rest } =
props;
return (
<FormControl
isDisabled={isDisabled}
className={`invokeai__select ${styleClass}`}
onClick={(e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
@@ -43,36 +32,16 @@ const IAISelect = (props: IAISelectProps) => {
e.nativeEvent.cancelBubble = true;
}}
>
{label && (
<FormLabel
className="invokeai__select-label"
fontSize={fontSize}
fontWeight="bold"
marginRight={0}
marginBottom={0}
whiteSpace="nowrap"
>
{label}
</FormLabel>
)}
{label && <FormLabel>{label}</FormLabel>}
<Tooltip label={tooltip} {...tooltipProps}>
<Select
className="invokeai__select-picker"
fontSize={fontSize}
size={size}
{...rest}
>
<Select {...rest}>
{validValues.map((opt) => {
return typeof opt === 'string' || typeof opt === 'number' ? (
<option key={opt} value={opt} className="invokeai__select-option">
<option key={opt} value={opt}>
{opt}
</option>
) : (
<option
key={opt.value}
value={opt.value}
className="invokeai__select-option"
>
<option key={opt.value} value={opt.value}>
{opt.key}
</option>
);

43
invokeai/frontend/web/src/common/components/IAISimpleMenu.tsx
View File

@@ -4,14 +4,15 @@ import {
MenuItem,
MenuList,
MenuProps,
MenuButtonProps,
MenuListProps,
MenuItemProps,
IconButton,
Button,
IconButtonProps,
ButtonProps,
} from '@chakra-ui/react';
import { MouseEventHandler, ReactNode } from 'react';
import { MdArrowDropDown, MdArrowDropUp } from 'react-icons/md';
import IAIButton from './IAIButton';
import IAIIconButton from './IAIIconButton';
interface IAIMenuItem {
item: ReactNode | string;
@@ -22,9 +23,10 @@ interface IAIMenuProps {
menuType?: 'icon' | 'regular';
buttonText?: string;
iconTooltip?: string;
isLazy?: boolean;
menuItems: IAIMenuItem[];
menuProps?: MenuProps;
menuButtonProps?: MenuButtonProps;
menuButtonProps?: IconButtonProps | ButtonProps;
menuListProps?: MenuListProps;
menuItemProps?: MenuItemProps;
}
@@ -34,6 +36,7 @@ export default function IAISimpleMenu(props: IAIMenuProps) {
menuType = 'icon',
iconTooltip,
buttonText,
isLazy = true,
menuItems,
menuProps,
menuButtonProps,
@@ -48,13 +51,7 @@ export default function IAISimpleMenu(props: IAIMenuProps) {
<MenuItem
key={index}
onClick={menuItem.onClick}
fontSize="0.9rem"
color="var(--text-color-secondary)"
backgroundColor="var(--background-color-secondary)"
_focus={{
color: 'var(--text-color)',
backgroundColor: 'var(--border-color)',
}}
fontSize="sm"
{...menuItemProps}
>
{menuItem.item}
@@ -65,34 +62,20 @@ export default function IAISimpleMenu(props: IAIMenuProps) {
};
return (
<Menu {...menuProps}>
<Menu {...menuProps} isLazy={isLazy}>
{({ isOpen }) => (
<>
<MenuButton
as={menuType === 'icon' ? IAIIconButton : IAIButton}
as={menuType === 'icon' ? IconButton : Button}
tooltip={iconTooltip}
icon={isOpen ? <MdArrowDropUp /> : <MdArrowDropDown />}
padding={menuType === 'regular' ? '0 0.5rem' : 0}
backgroundColor="var(--btn-base-color)"
_hover={{
backgroundColor: 'var(--btn-base-color-hover)',
}}
minWidth="1rem"
minHeight="1rem"
fontSize="1.5rem"
paddingX={0}
paddingY={menuType === 'regular' ? 2 : 0}
{...menuButtonProps}
>
{menuType === 'regular' && buttonText}
</MenuButton>
<MenuList
zIndex={15}
padding={0}
borderRadius="0.5rem"
backgroundColor="var(--background-color-secondary)"
color="var(--text-color-secondary)"
borderColor="var(--border-color)"
{...menuListProps}
>
<MenuList zIndex={15} padding={0} {...menuListProps}>
{renderMenuItems()}
</MenuList>
</>

60
invokeai/frontend/web/src/common/components/IAISlider.scss
View File

@@ -1,60 +0,0 @@
.invokeai__slider-component {
padding-bottom: 0.5rem;
border-radius: 0.5rem;
.invokeai__slider-component-label {
min-width: max-content;
margin: 0;
font-weight: bold;
color: var(--text-color-secondary);
}
.invokeai__slider_track {
background-color: var(--tab-color);
}
.invokeai__slider_track-filled {
background-color: var(--slider-color);
}
.invokeai__slider-thumb {
width: 4px;
}
.invokeai__slider-mark {
font-size: 0.75rem;
font-weight: bold;
color: var(--slider-mark-color);
margin-top: 0.3rem;
}
.invokeai__slider-number-input {
border: none;
font-size: 0.9rem;
font-weight: bold;
height: 2rem;
background-color: var(--background-color-secondary);
border: 2px solid var(--border-color);
&:focus {
outline: none;
box-shadow: none;
border: 2px solid var(--input-border-color);
box-shadow: 0 0 10px 0 var(--input-box-shadow-color);
}
&:disabled {
opacity: 0.2;
}
}
.invokeai__slider-number-stepper {
border: none;
}
&[data-markers='true'] {
.invokeai__slider_container {
margin-top: -1rem;
}
}
}

51
invokeai/frontend/web/src/common/components/IAISlider.tsx
View File

@@ -37,11 +37,8 @@ export type IAIFullSliderProps = {
step?: number;
onChange: (v: number) => void;
withSliderMarks?: boolean;
sliderMarkLeftOffset?: number;
sliderMarkRightOffset?: number;
withInput?: boolean;
isInteger?: boolean;
width?: string | number;
inputWidth?: string | number;
inputReadOnly?: boolean;
withReset?: boolean;
@@ -52,7 +49,6 @@ export type IAIFullSliderProps = {
tooltipSuffix?: string;
hideTooltip?: boolean;
isCompact?: boolean;
styleClass?: string;
sliderFormControlProps?: FormControlProps;
sliderFormLabelProps?: FormLabelProps;
sliderMarkProps?: Omit<SliderMarkProps, 'value'>;
@@ -74,14 +70,11 @@ export default function IAISlider(props: IAIFullSliderProps) {
max = 100,
step = 1,
onChange,
width = '100%',
tooltipSuffix = '',
withSliderMarks = false,
sliderMarkLeftOffset = 0,
sliderMarkRightOffset = -1,
withInput = false,
isInteger = false,
inputWidth = '5.5rem',
inputWidth = 16,
inputReadOnly = false,
withReset = false,
hideTooltip = false,
@@ -90,7 +83,6 @@ export default function IAISlider(props: IAIFullSliderProps) {
isResetDisabled,
isSliderDisabled,
isInputDisabled,
styleClass,
sliderFormControlProps,
sliderFormLabelProps,
sliderMarkProps,
@@ -142,19 +134,13 @@ export default function IAISlider(props: IAIFullSliderProps) {
return (
<FormControl
className={
styleClass
? `invokeai__slider-component ${styleClass}`
: `invokeai__slider-component`
}
data-markers={withSliderMarks}
style={
sx={
isCompact
? {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
columnGap: '1rem',
columnGap: 4,
margin: 0,
padding: 0,
}
@@ -162,11 +148,7 @@ export default function IAISlider(props: IAIFullSliderProps) {
}
{...sliderFormControlProps}
>
<FormLabel
className="invokeai__slider-component-label"
fontSize="sm"
{...sliderFormLabelProps}
>
<FormLabel {...sliderFormLabelProps} mb={-1}>
{label}
</FormLabel>
@@ -182,23 +164,23 @@ export default function IAISlider(props: IAIFullSliderProps) {
onMouseLeave={() => setShowTooltip(false)}
focusThumbOnChange={false}
isDisabled={isSliderDisabled}
width={width}
// width={width}
{...rest}
>
{withSliderMarks && (
<>
<SliderMark
value={min}
className="invokeai__slider-mark invokeai__slider-mark-start"
ml={sliderMarkLeftOffset}
insetInlineStart={0}
sx={{ insetInlineStart: 'unset !important' }}
{...sliderMarkProps}
>
{min}
</SliderMark>
<SliderMark
value={max}
className="invokeai__slider-mark invokeai__slider-mark-end"
ml={sliderMarkRightOffset}
insetInlineEnd={0}
sx={{ insetInlineStart: 'unset !important' }}
{...sliderMarkProps}
>
{max}
@@ -206,23 +188,19 @@ export default function IAISlider(props: IAIFullSliderProps) {
</>
)}
<SliderTrack className="invokeai__slider_track" {...sliderTrackProps}>
<SliderFilledTrack className="invokeai__slider_track-filled" />
<SliderTrack {...sliderTrackProps}>
<SliderFilledTrack />
</SliderTrack>
<Tooltip
hasArrow
className="invokeai__slider-component-tooltip"
placement="top"
isOpen={showTooltip}
label={`${value}${tooltipSuffix}`}
hidden={hideTooltip}
{...sliderTooltipProps}
>
<SliderThumb
className="invokeai__slider-thumb"
{...sliderThumbProps}
/>
<SliderThumb {...sliderThumbProps} />
</Tooltip>
</Slider>
@@ -234,13 +212,10 @@ export default function IAISlider(props: IAIFullSliderProps) {
value={localInputValue}
onChange={handleInputChange}
onBlur={handleInputBlur}
className="invokeai__slider-number-field"
isDisabled={isInputDisabled}
{...sliderNumberInputProps}
>
<NumberInputField
className="invokeai__slider-number-input"
width={inputWidth}
readOnly={inputReadOnly}
minWidth={inputWidth}
{...sliderNumberInputFieldProps}
@@ -248,11 +223,9 @@ export default function IAISlider(props: IAIFullSliderProps) {
<NumberInputStepper {...sliderNumberInputStepperProps}>
<NumberIncrementStepper
onClick={() => onChange(Number(localInputValue))}
className="invokeai__slider-number-stepper"
/>
<NumberDecrementStepper
onClick={() => onChange(Number(localInputValue))}
className="invokeai__slider-number-stepper"
/>
</NumberInputStepper>
</NumberInput>

24
invokeai/frontend/web/src/common/components/IAISwitch.scss
View File

@@ -1,24 +0,0 @@
.invokeai__switch-form-control {
.invokeai__switch-form-label {
color: var(--text-color-secondary);
}
.invokeai__switch-root {
span {
background-color: var(--switch-bg-color);
span {
background-color: var(--white);
}
}
&[data-checked] {
span {
background: var(--switch-bg-active-color);
span {
background-color: var(--white);
}
}
}
}
}

19
invokeai/frontend/web/src/common/components/IAISwitch.tsx
View File

@@ -10,7 +10,6 @@ import {
interface Props extends SwitchProps {
label?: string;
width?: string | number;
styleClass?: string;
formControlProps?: FormControlProps;
formLabelProps?: FormLabelProps;
}
@@ -25,34 +24,22 @@ const IAISwitch = (props: Props) => {
width = 'auto',
formControlProps,
formLabelProps,
styleClass,
...rest
} = props;
return (
<FormControl
isDisabled={isDisabled}
width={width}
className={`invokeai__switch-form-control ${styleClass}`}
display="flex"
columnGap="1rem"
gap={4}
alignItems="center"
justifyContent="space-between"
{...formControlProps}
>
<FormLabel
className="invokeai__switch-form-label"
whiteSpace="nowrap"
marginRight={0}
marginTop={0.5}
marginBottom={0.5}
fontSize="sm"
fontWeight="bold"
width="auto"
{...formLabelProps}
>
<FormLabel my={1} {...formLabelProps}>
{label}
</FormLabel>
<Switch className="invokeai__switch-root" {...rest} />
<Switch {...rest} />
</FormControl>
);
};

51
invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
View File

@@ -1,4 +1,4 @@
import { Heading } from '@chakra-ui/react';
import { Box, Flex, Heading } from '@chakra-ui/react';
import { useHotkeys } from 'react-hotkeys-hook';
type ImageUploadOverlayProps = {
@@ -11,7 +11,7 @@ type ImageUploadOverlayProps = {
const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
const {
isDragAccept,
isDragReject,
isDragReject: _isDragAccept,
overlaySecondaryText,
setIsHandlingUpload,
} = props;
@@ -21,19 +21,42 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
});
return (
<div className="dropzone-container">
{isDragAccept && (
<div className="dropzone-overlay is-drag-accept">
<Box
sx={{
position: 'absolute',
top: 0,
insetInlineStart: 0,
width: '100vw',
height: '100vh',
zIndex: 999,
backdropFilter: 'blur(20px)',
}}
>
<Flex
sx={{
opacity: 0.4,
width: '100%',
height: '100%',
flexDirection: 'column',
rowGap: 4,
alignItems: 'center',
justifyContent: 'center',
bg: 'base.900',
boxShadow: `inset 0 0 20rem 1rem var(--invokeai-colors-${
isDragAccept ? 'accent' : 'error'
}-500)`,
}}
>
{isDragAccept ? (
<Heading size="lg">Upload Image{overlaySecondaryText}</Heading>
</div>
)}
{isDragReject && (
<div className="dropzone-overlay is-drag-reject">
<Heading size="lg">Invalid Upload</Heading>
<Heading size="md">Must be single JPEG or PNG image</Heading>
</div>
)}
</div>
) : (
<>
<Heading size="lg">Invalid Upload</Heading>
<Heading size="md">Must be single JPEG or PNG image</Heading>
</>
)}
</Flex>
</Box>
);
};
export default ImageUploadOverlay;

74
invokeai/frontend/web/src/common/components/ImageUploader.scss
View File

@@ -1,74 +0,0 @@
.dropzone-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999;
backdrop-filter: blur(20px);
.dropzone-overlay {
opacity: 0.5;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
row-gap: 1rem;
align-items: center;
justify-content: center;
background-color: var(--background-color);
&.is-drag-accept {
box-shadow: inset 0 0 20rem 1rem var(--accent-color);
}
&.is-drag-reject {
box-shadow: inset 0 0 20rem 1rem var(--status-bad-color);
}
&.is-handling-upload {
box-shadow: inset 0 0 20rem 1rem var(--status-working-color);
}
}
}
.image-uploader-button-outer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 0.5rem;
color: var(--tab-list-text-inactive);
background-color: var(--background-color);
&:hover {
background-color: var(--background-color-light);
}
}
.image-upload-button-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.image-upload-button {
display: flex;
flex-direction: column;
row-gap: 2rem;
align-items: center;
justify-content: center;
text-align: center;
svg {
width: 4rem;
height: 4rem;
}
h2 {
font-size: 1.2rem;
}
}

6
invokeai/frontend/web/src/common/components/ImageUploader.tsx
View File

@@ -1,4 +1,4 @@
import { useToast } from '@chakra-ui/react';
import { Box, useToast } from '@chakra-ui/react';
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import useImageUploader from 'common/hooks/useImageUploader';
@@ -139,7 +139,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
return (
<ImageUploaderTriggerContext.Provider value={open}>
<div
<Box
{...getRootProps({ style: {} })}
onKeyDown={(e: KeyboardEvent) => {
// Bail out if user hits spacebar - do not open the uploader
@@ -156,7 +156,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
setIsHandlingUpload={setIsHandlingUpload}
/>
)}
</div>
</Box>
</ImageUploaderTriggerContext.Provider>
);
};

41
invokeai/frontend/web/src/common/components/ImageUploaderButton.tsx
View File

@@ -1,4 +1,4 @@
import { Heading } from '@chakra-ui/react';
import { Flex, Heading, Icon } from '@chakra-ui/react';
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
import { useContext } from 'react';
import { FaUpload } from 'react-icons/fa';
@@ -16,15 +16,38 @@ const ImageUploaderButton = (props: ImageUploaderButtonProps) => {
};
return (
<div
className={`image-uploader-button-outer ${styleClass}`}
onClick={handleClickUpload}
<Flex
sx={{
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
}}
className={styleClass}
>
<div className="image-upload-button">
<FaUpload />
<Heading size="lg">Click or Drag and Drop</Heading>
</div>
</div>
<Flex
onClick={handleClickUpload}
sx={{
display: 'flex',
flexDirection: 'column',
rowGap: 8,
p: 8,
borderRadius: 'base',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
cursor: 'pointer',
color: 'base.600',
bg: 'base.800',
_hover: {
bg: 'base.700',
},
}}
>
<Icon as={FaUpload} boxSize={24} />
<Heading size="md">Click or Drag and Drop</Heading>
</Flex>
</Flex>
);
};

55
invokeai/frontend/web/src/common/components/SubItemHook.tsx
View File

@@ -1,55 +0,0 @@
import { Box } from '@chakra-ui/react';
interface SubItemHookProps {
active?: boolean;
width?: string | number;
height?: string | number;
side?: 'left' | 'right';
}
export default function SubItemHook(props: SubItemHookProps) {
const {
active = true,
width = '1rem',
height = '1.3rem',
side = 'right',
} = props;
return (
<>
{side === 'right' && (
<Box
width={width}
height={height}
margin="-0.5rem 0.5rem 0 0.5rem"
borderLeft={
active
? '3px solid var(--subhook-color)'
: '3px solid var(--tab-hover-color)'
}
borderBottom={
active
? '3px solid var(--subhook-color)'
: '3px solid var(--tab-hover-color)'
}
/>
)}
{side === 'left' && (
<Box
width={width}
height={height}
margin="-0.5rem 0.5rem 0 0.5rem"
borderRight={
active
? '3px solid var(--subhook-color)'
: '3px solid var(--tab-hover-color)'
}
borderBottom={
active
? '3px solid var(--subhook-color)'
: '3px solid var(--tab-hover-color)'
}
/>
)}
</>
);
}

24
invokeai/frontend/web/src/common/components/WorkInProgress/NodesWIP.tsx
View File

@@ -1,11 +1,27 @@
import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import WorkInProgress from './WorkInProgress';
export default function NodesWIP() {
const { t } = useTranslation();
return (
<div className="work-in-progress nodes-work-in-progress">
<h1>{t('common.nodes')}</h1>
<p>{t('common.nodesDesc')}</p>
</div>
<WorkInProgress>
<Flex
sx={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
w: '100%',
h: '100%',
gap: 4,
textAlign: 'center',
}}
>
<Heading>{t('common.nodes')}</Heading>
<VStack maxW="50rem" gap={4}>
<Text>{t('common.nodesDesc')}</Text>
</VStack>
</Flex>
</WorkInProgress>
);
}

28
invokeai/frontend/web/src/common/components/WorkInProgress/PostProcessingWIP.tsx
View File

@@ -1,13 +1,29 @@
import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import WorkInProgress from './WorkInProgress';
export const PostProcessingWIP = () => {
const { t } = useTranslation();
return (
<div className="work-in-progress post-processing-work-in-progress">
<h1>{t('common.postProcessing')}</h1>
<p>{t('common.postProcessDesc1')}</p>
<p>{t('common.postProcessDesc2')}</p>
<p>{t('common.postProcessDesc3')}</p>
</div>
<WorkInProgress>
<Flex
sx={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
w: '100%',
h: '100%',
gap: 4,
textAlign: 'center',
}}
>
<Heading>{t('common.postProcessing')}</Heading>
<VStack maxW="50rem" gap={4}>
<Text>{t('common.postProcessDesc1')}</Text>
<Text>{t('common.postProcessDesc2')}</Text>
<Text>{t('common.postProcessDesc3')}</Text>
</VStack>
</Flex>
</WorkInProgress>
);
};

30
invokeai/frontend/web/src/common/components/WorkInProgress/Training.tsx
View File

@@ -1,16 +1,28 @@
import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import WorkInProgress from './WorkInProgress';
export default function TrainingWIP() {
const { t } = useTranslation();
return (
<div className="work-in-progress nodes-work-in-progress">
<h1>{t('common.training')}</h1>
<p>
{t('common.trainingDesc1')}
<br />
<br />
{t('common.trainingDesc2')}
</p>
</div>
<WorkInProgress>
<Flex
sx={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
w: '100%',
h: '100%',
gap: 4,
textAlign: 'center',
}}
>
<Heading>{t('common.training')}</Heading>
<VStack maxW="50rem" gap={4}>
<Text>{t('common.trainingDesc1')}</Text>
<Text>{t('common.trainingDesc2')}</Text>
</VStack>
</Flex>
</WorkInProgress>
);
}

24
invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.scss
View File

@@ -1,24 +0,0 @@
@use '../../../styles/Mixins/' as *;
.work-in-progress {
display: grid;
width: 100%;
height: $app-content-height;
grid-auto-rows: max-content;
background-color: var(--background-color-secondary);
border-radius: 0.4rem;
place-content: center;
place-items: center;
row-gap: 1rem;
h1 {
font-size: 2rem;
font-weight: bold;
}
p {
text-align: center;
max-width: 50rem;
color: var(--subtext-color-bright);
}
}

24
invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Flex } from '@chakra-ui/react';
import { ReactNode } from 'react';
type WorkInProgressProps = {
children: ReactNode;
};
const WorkInProgress = (props: WorkInProgressProps) => {
const { children } = props;
return (
<Flex
sx={{
width: '100%',
height: '100%',
bg: 'base.850',
}}
>
{children}
</Flex>
);
};
export default WorkInProgress;

62
invokeai/frontend/web/src/common/components/radix-ui/IAISlider.scss
View File

@@ -1,62 +0,0 @@
.invokeai__slider-root {
position: relative;
display: flex;
align-items: center;
user-select: none;
touch-action: none;
width: 200px;
&[data-orientation='horizontal'] {
height: 20px;
}
&[data-orientation='vertical'] {
width: 20px;
height: 200px;
}
.invokeai__slider-track {
background-color: black;
position: relative;
flex-grow: 1;
border-radius: 9999px;
&[data-orientation='horizontal'] {
height: 0.25rem;
}
&[data-orientation='vertical'] {
width: 0.25rem;
}
.invokeai__slider-range {
position: absolute;
background-color: white;
border-radius: 9999px;
height: 100%;
}
}
.invokeai__slider-thumb {
display: flex;
align-items: center;
.invokeai__slider-thumb-div {
all: unset;
display: block;
width: 1rem;
height: 1rem;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 2, 10, 0.3);
border-radius: 100%;
&:hover {
background-color: violet;
}
&:focus {
box-shadow: 0 0 0 5px rgba(0, 2, 10, 0.3);
}
}
}
}

44
invokeai/frontend/web/src/common/components/radix-ui/IAISlider.tsx
View File

@@ -1,44 +0,0 @@
import { Tooltip } from '@chakra-ui/react';
import * as Slider from '@radix-ui/react-slider';
type IAISliderProps = Slider.SliderProps & {
value: number[];
tooltipLabel?: string;
orientation?: 'horizontal' | 'vertial';
trackProps?: Slider.SliderTrackProps;
rangeProps?: Slider.SliderRangeProps;
thumbProps?: Slider.SliderThumbProps;
};
const _IAISlider = (props: IAISliderProps) => {
const {
value,
tooltipLabel,
orientation,
trackProps,
rangeProps,
thumbProps,
...rest
} = props;
return (
<Slider.Root
className="invokeai__slider-root"
{...rest}
data-orientation={orientation || 'horizontal'}
>
<Slider.Track {...trackProps} className="invokeai__slider-track">
<Slider.Range {...rangeProps} className="invokeai__slider-range" />
</Slider.Track>
<Tooltip label={tooltipLabel ?? value[0]} placement="top">
<Slider.Thumb {...thumbProps} className="invokeai__slider-thumb">
<div className="invokeai__slider-thumb-div" />
{/*<IAITooltip trigger={<div className="invokeai__slider-thumb-div" />}>
{value && value[0]}
</IAITooltip>*/}
</Slider.Thumb>
</Tooltip>
</Slider.Root>
);
};
export default _IAISlider;

8
invokeai/frontend/web/src/common/components/radix-ui/IAITooltip.scss
View File

@@ -1,8 +0,0 @@
.invokeai__tooltip-content {
padding: 0.5rem;
background-color: grey;
border-radius: 0.25rem;
.invokeai__tooltip-arrow {
background-color: grey;
}
}

40
invokeai/frontend/web/src/common/components/radix-ui/IAITooltip.tsx
View File

@@ -1,40 +0,0 @@
import * as Tooltip from '@radix-ui/react-tooltip';
import { ReactNode } from 'react';
type IAITooltipProps = Tooltip.TooltipProps & {
trigger: ReactNode;
children: ReactNode;
triggerProps?: Tooltip.TooltipTriggerProps;
contentProps?: Tooltip.TooltipContentProps;
arrowProps?: Tooltip.TooltipArrowProps;
};
const IAITooltip = (props: IAITooltipProps) => {
const { trigger, children, triggerProps, contentProps, arrowProps, ...rest } =
props;
return (
<Tooltip.Provider>
<Tooltip.Root {...rest} delayDuration={0}>
<Tooltip.Trigger {...triggerProps}>{trigger}</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
{...contentProps}
onPointerDownOutside={(e) => {
e.preventDefault();
}}
className="invokeai__tooltip-content"
>
<Tooltip.Arrow
{...arrowProps}
className="invokeai__tooltip-arrow"
/>
{children}
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
};
export default IAITooltip;

3
invokeai/frontend/web/src/common/icons/ImageToImageIcon.tsx
View File

@@ -13,5 +13,8 @@ const ImageToImageIcon = createIcon({
/>
</g>
),
defaultProps: {
boxSize: '24px',
},
});
export default ImageToImageIcon;

3
invokeai/frontend/web/src/common/icons/NodesIcon.tsx
View File

@@ -11,6 +11,9 @@ const NodesIcon = createIcon({
d="M3543.31,770.787C3543.31,515.578 3336.11,308.38 3080.9,308.38L462.407,308.38C207.197,308.38 0,515.578 0,770.787L0,2766.03C0,3021.24 207.197,3228.44 462.407,3228.44L3080.9,3228.44C3336.11,3228.44 3543.31,3021.24 3543.31,2766.03C3543.31,2766.03 3543.31,770.787 3543.31,770.787ZM3427.88,770.787L3427.88,2766.03C3427.88,2957.53 3272.4,3113.01 3080.9,3113.01C3080.9,3113.01 462.407,3113.01 462.407,3113.01C270.906,3113.01 115.431,2957.53 115.431,2766.03L115.431,770.787C115.431,579.286 270.906,423.812 462.407,423.812L3080.9,423.812C3272.4,423.812 3427.88,579.286 3427.88,770.787ZM1214.23,1130.69L1321.47,1130.69C1324.01,1130.69 1326.54,1130.53 1329.05,1130.2C1329.05,1130.2 1367.3,1125.33 1397.94,1149.8C1421.63,1168.72 1437.33,1204.3 1437.33,1265.48L1437.33,2078.74L1220.99,2078.74C1146.83,2078.74 1086.61,2138.95 1086.61,2213.12L1086.61,2762.46C1086.61,2836.63 1146.83,2896.84 1220.99,2896.84L1770.34,2896.84C1844.5,2896.84 1904.71,2836.63 1904.71,2762.46L1904.71,2213.12C1904.71,2138.95 1844.5,2078.74 1770.34,2078.74L1554,2078.74L1554,1604.84C1625.84,1658.19 1703.39,1658.1 1703.39,1658.1C1703.54,1658.1 1703.69,1658.11 1703.84,1658.11L2362.2,1658.11L2362.2,1874.44C2362.2,1948.61 2422.42,2008.82 2496.58,2008.82L3045.93,2008.82C3120.09,2008.82 3180.3,1948.61 3180.3,1874.44L3180.3,1325.1C3180.3,1250.93 3120.09,1190.72 3045.93,1190.72L2496.58,1190.72C2422.42,1190.72 2362.2,1250.93 2362.2,1325.1L2362.2,1558.97L2362.2,1541.44L1704.23,1541.44C1702.2,1541.37 1650.96,1539.37 1609.51,1499.26C1577.72,1468.49 1554,1416.47 1554,1331.69L1554,1265.48C1554,1153.86 1513.98,1093.17 1470.76,1058.64C1411.24,1011.1 1338.98,1012.58 1319.15,1014.03L1214.23,1014.03L1214.23,796.992C1214.23,722.828 1154.02,662.617 1079.85,662.617L530.507,662.617C456.343,662.617 396.131,722.828 396.131,796.992L396.131,1346.34C396.131,1420.5 456.343,1480.71 530.507,1480.71L1079.85,1480.71C1154.02,1480.71 1214.23,1420.5 1214.23,1346.34L1214.23,1130.69Z"
/>
),
defaultProps: {
boxSize: '24px',
},
});
export default NodesIcon;

3
invokeai/frontend/web/src/common/icons/PostprocessingIcon.tsx
View File

@@ -11,6 +11,9 @@ const PostprocessingIcon = createIcon({
d="M709.477,1596.53L992.591,1275.66L2239.09,2646.81L2891.95,1888.03L3427.88,2460.51L3427.88,994.78C3427.88,954.66 3421.05,916.122 3408.5,880.254L3521.9,855.419C3535.8,899.386 3543.31,946.214 3543.31,994.78L3543.31,2990.02C3543.31,3245.23 3336.11,3452.43 3080.9,3452.43C3080.9,3452.43 462.407,3452.43 462.407,3452.43C207.197,3452.43 -0,3245.23 -0,2990.02L-0,994.78C-0,739.571 207.197,532.373 462.407,532.373L505.419,532.373L504.644,532.546L807.104,600.085C820.223,601.729 832.422,607.722 841.77,617.116C850.131,625.517 855.784,636.21 858.055,647.804L462.407,647.804C270.906,647.804 115.431,803.279 115.431,994.78L115.431,2075.73L-0,2101.5L115.431,2127.28L115.431,2269.78L220.47,2150.73L482.345,2209.21C503.267,2211.83 522.722,2221.39 537.63,2236.37C552.538,2251.35 562.049,2270.9 564.657,2291.93L671.84,2776.17L779.022,2291.93C781.631,2270.9 791.141,2251.35 806.05,2236.37C820.958,2221.39 840.413,2211.83 861.334,2209.21L1353.15,2101.5L861.334,1993.8C840.413,1991.18 820.958,1981.62 806.05,1966.64C791.141,1951.66 781.631,1932.11 779.022,1911.08L709.477,1596.53ZM671.84,1573.09L725.556,2006.07C726.863,2016.61 731.63,2026.4 739.101,2033.91C746.573,2041.42 756.323,2046.21 766.808,2047.53L1197.68,2101.5L766.808,2155.48C756.323,2156.8 746.573,2161.59 739.101,2169.09C731.63,2176.6 726.863,2186.4 725.556,2196.94L671.84,2629.92L618.124,2196.94C616.817,2186.4 612.05,2176.6 604.579,2169.09C597.107,2161.59 587.357,2156.8 576.872,2155.48L146.001,2101.5L576.872,2047.53C587.357,2046.21 597.107,2041.42 604.579,2033.91C612.05,2026.4 616.817,2016.61 618.124,2006.07L671.84,1573.09ZM609.035,1710.36L564.657,1911.08C562.049,1932.11 552.538,1951.66 537.63,1966.64C522.722,1981.62 503.267,1991.18 482.345,1993.8L328.665,2028.11L609.035,1710.36ZM2297.12,938.615L2451.12,973.003C2480.59,976.695 2507.99,990.158 2528.99,1011.26C2549.99,1032.37 2563.39,1059.9 2567.07,1089.52L2672.73,1566.9C2634.5,1580.11 2593.44,1587.29 2550.72,1587.29C2344.33,1587.29 2176.77,1419.73 2176.77,1213.34C2176.77,1104.78 2223.13,1006.96 2297.12,938.615ZM2718.05,76.925L2793.72,686.847C2795.56,701.69 2802.27,715.491 2812.8,726.068C2823.32,736.644 2837.06,743.391 2851.83,745.242L3458.78,821.28L2851.83,897.318C2837.06,899.168 2823.32,905.916 2812.8,916.492C2802.27,927.068 2795.56,940.87 2793.72,955.712L2718.05,1565.63L2642.38,955.712C2640.54,940.87 2633.83,927.068 2623.3,916.492C2612.78,905.916 2599.04,899.168 2584.27,897.318L1977.32,821.28L2584.27,745.242C2599.04,743.391 2612.78,736.644 2623.3,726.068C2633.83,715.491 2640.54,701.69 2642.38,686.847L2718.05,76.925ZM2883.68,1043.06C2909.88,1094.13 2924.67,1152.02 2924.67,1213.34C2924.67,1335.4 2866.06,1443.88 2775.49,1512.14L2869.03,1089.52C2871.07,1073.15 2876.07,1057.42 2883.68,1043.06ZM925.928,201.2L959.611,472.704C960.431,479.311 963.42,485.455 968.105,490.163C972.79,494.871 978.904,497.875 985.479,498.698L1255.66,532.546L985.479,566.395C978.904,567.218 972.79,570.222 968.105,574.93C963.42,579.638 960.431,585.781 959.611,592.388L925.928,863.893L892.245,592.388C891.425,585.781 888.436,579.638 883.751,574.93C879.066,570.222 872.952,567.218 866.378,566.395L596.195,532.546L866.378,498.698C872.952,497.875 879.066,494.871 883.751,490.163C888.436,485.455 891.425,479.311 892.245,472.704L925.928,201.2ZM2864.47,532.373L3080.9,532.373C3258.7,532.373 3413.2,632.945 3490.58,780.281L3319.31,742.773C3257.14,683.925 3173.2,647.804 3080.9,647.804L2927.07,647.804C2919.95,642.994 2913.25,637.473 2907.11,631.298C2886.11,610.194 2872.71,582.655 2869.03,553.04L2864.47,532.373ZM1352.36,532.373L2571.64,532.373L2567.07,553.04C2563.39,582.655 2549.99,610.194 2528.99,631.298C2522.85,637.473 2516.16,642.994 2509.03,647.804L993.801,647.804C996.072,636.21 1001.73,625.517 1010.09,617.116C1019.43,607.722 1031.63,601.729 1044.75,600.085L1353.15,532.546L1352.36,532.373Z"
/>
),
defaultProps: {
boxSize: '24px',
},
});
export default PostprocessingIcon;

3
invokeai/frontend/web/src/common/icons/TextToImageIcon.tsx
View File

File diff suppressed because one or more lines are too long

3
invokeai/frontend/web/src/common/icons/TrainingIcon.tsx
View File

@@ -11,6 +11,9 @@ const TrainingIcon = createIcon({
d="M0,768.593L0,2774.71C0,2930.6 78.519,3068.3 198.135,3150.37C273.059,3202.68 364.177,3233.38 462.407,3233.38C462.407,3233.38 3080.9,3233.38 3080.9,3233.38C3179.13,3233.38 3270.25,3202.68 3345.17,3150.37C3464.79,3068.3 3543.31,2930.6 3543.31,2774.71L3543.31,768.593C3543.31,517.323 3339.31,313.324 3088.04,313.324L455.269,313.324C203.999,313.324 0,517.323 0,768.593ZM3427.88,775.73L3427.88,2770.97C3427.88,2962.47 3272.4,3117.95 3080.9,3117.95L462.407,3117.95C270.906,3117.95 115.431,2962.47 115.431,2770.97C115.431,2770.97 115.431,775.73 115.431,775.73C115.431,584.229 270.906,428.755 462.407,428.755C462.407,428.755 3080.9,428.755 3080.9,428.755C3272.4,428.755 3427.88,584.229 3427.88,775.73ZM796.24,1322.76L796.24,1250.45C796.24,1199.03 836.16,1157.27 885.331,1157.27C885.331,1157.27 946.847,1157.27 946.847,1157.27C996.017,1157.27 1035.94,1199.03 1035.94,1250.45L1035.94,1644.81L2507.37,1644.81L2507.37,1250.45C2507.37,1199.03 2547.29,1157.27 2596.46,1157.27C2596.46,1157.27 2657.98,1157.27 2657.98,1157.27C2707.15,1157.27 2747.07,1199.03 2747.07,1250.45L2747.07,1322.76C2756.66,1319.22 2767.02,1317.29 2777.83,1317.29C2777.83,1317.29 2839.34,1317.29 2839.34,1317.29C2888.51,1317.29 2928.43,1357.21 2928.43,1406.38L2928.43,1527.32C2933.51,1526.26 2938.77,1525.71 2944.16,1525.71L2995.3,1525.71C3036.18,1525.71 3069.37,1557.59 3069.37,1596.86C3069.37,1596.86 3069.37,1946.44 3069.37,1946.44C3069.37,1985.72 3036.18,2017.6 2995.3,2017.6C2995.3,2017.6 2944.16,2017.6 2944.16,2017.6C2938.77,2017.6 2933.51,2017.04 2928.43,2015.99L2928.43,2136.92C2928.43,2186.09 2888.51,2226.01 2839.34,2226.01L2777.83,2226.01C2767.02,2226.01 2756.66,2224.08 2747.07,2220.55L2747.07,2292.85C2747.07,2344.28 2707.15,2386.03 2657.98,2386.03C2657.98,2386.03 2596.46,2386.03 2596.46,2386.03C2547.29,2386.03 2507.37,2344.28 2507.37,2292.85L2507.37,1898.5L1035.94,1898.5L1035.94,2292.85C1035.94,2344.28 996.017,2386.03 946.847,2386.03C946.847,2386.03 885.331,2386.03 885.331,2386.03C836.16,2386.03 796.24,2344.28 796.24,2292.85L796.24,2220.55C786.651,2224.08 776.29,2226.01 765.482,2226.01L703.967,2226.01C654.796,2226.01 614.876,2186.09 614.876,2136.92L614.876,2015.99C609.801,2017.04 604.539,2017.6 599.144,2017.6C599.144,2017.6 548.003,2017.6 548.003,2017.6C507.125,2017.6 473.937,1985.72 473.937,1946.44C473.937,1946.44 473.937,1596.86 473.937,1596.86C473.937,1557.59 507.125,1525.71 548.003,1525.71L599.144,1525.71C604.539,1525.71 609.801,1526.26 614.876,1527.32L614.876,1406.38C614.876,1357.21 654.796,1317.29 703.967,1317.29C703.967,1317.29 765.482,1317.29 765.482,1317.29C776.29,1317.29 786.651,1319.22 796.24,1322.76ZM977.604,1250.45C977.604,1232.7 963.822,1218.29 946.847,1218.29L885.331,1218.29C868.355,1218.29 854.573,1232.7 854.573,1250.45L854.573,2292.85C854.573,2310.61 868.355,2325.02 885.331,2325.02L946.847,2325.02C963.822,2325.02 977.604,2310.61 977.604,2292.85L977.604,1250.45ZM2565.7,1250.45C2565.7,1232.7 2579.49,1218.29 2596.46,1218.29L2657.98,1218.29C2674.95,1218.29 2688.73,1232.7 2688.73,1250.45L2688.73,2292.85C2688.73,2310.61 2674.95,2325.02 2657.98,2325.02L2596.46,2325.02C2579.49,2325.02 2565.7,2310.61 2565.7,2292.85L2565.7,1250.45ZM673.209,1406.38L673.209,2136.92C673.209,2153.9 686.991,2167.68 703.967,2167.68L765.482,2167.68C782.458,2167.68 796.24,2153.9 796.24,2136.92L796.24,1406.38C796.24,1389.41 782.458,1375.63 765.482,1375.63L703.967,1375.63C686.991,1375.63 673.209,1389.41 673.209,1406.38ZM2870.1,1406.38L2870.1,2136.92C2870.1,2153.9 2856.32,2167.68 2839.34,2167.68L2777.83,2167.68C2760.85,2167.68 2747.07,2153.9 2747.07,2136.92L2747.07,1406.38C2747.07,1389.41 2760.85,1375.63 2777.83,1375.63L2839.34,1375.63C2856.32,1375.63 2870.1,1389.41 2870.1,1406.38ZM614.876,1577.5C610.535,1574.24 605.074,1572.3 599.144,1572.3L548.003,1572.3C533.89,1572.3 522.433,1583.3 522.433,1596.86L522.433,1946.44C522.433,1960 533.89,1971.01 548.003,1971.01L599.144,1971.01C605.074,1971.01 610.535,1969.07 614.876,1965.81L614.876,1577.5ZM2928.43,1965.81L2928.43,1577.5C2932.77,1574.24 2938.23,1572.3 2944.16,1572.3L2995.3,1572.3C3009.42,1572.3 3020.87,1583.3 3020.87,1596.86L3020.87,1946.44C3020.87,1960 3009.42,1971.01 2995.3,1971.01L2944.16,1971.01C2938.23,1971.01 2932.77,1969.07 2928.43,1965.81ZM2507.37,1703.14L1035.94,1703.14L1035.94,1840.16L2507.37,1840.16L2507.37,1898.38L2507.37,1659.46L2507.37,1703.14Z"
/>
),
defaultProps: {
boxSize: '24px',
},
});
export default TrainingIcon;

3
invokeai/frontend/web/src/common/icons/UnifiedCanvasIcon.tsx
View File

File diff suppressed because one or more lines are too long

12
invokeai/frontend/web/src/common/util/parameterTranslation.ts
View File

@@ -144,8 +144,8 @@ export const frontendToBackendParameters = (
variationAmount,
width,
shouldUseSymmetry,
horizontalSymmetryTimePercentage,
verticalSymmetryTimePercentage,
horizontalSymmetrySteps,
verticalSymmetrySteps,
} = generationState;
const {
@@ -185,17 +185,17 @@ export const frontendToBackendParameters = (
// Symmetry Settings
if (shouldUseSymmetry) {
if (horizontalSymmetryTimePercentage > 0) {
if (horizontalSymmetrySteps > 0) {
generationParameters.h_symmetry_time_pct = Math.max(
0,
Math.min(1, horizontalSymmetryTimePercentage / steps)
Math.min(1, horizontalSymmetrySteps / steps)
);
}
if (horizontalSymmetryTimePercentage > 0) {
if (verticalSymmetrySteps > 0) {
generationParameters.v_symmetry_time_pct = Math.max(
0,
Math.min(1, verticalSymmetryTimePercentage / steps)
Math.min(1, verticalSymmetrySteps / steps)
);
}
}