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

[WebUI] Even off JSX string syntax (#2058)

Browse Source 
Assuming that mixing `"literal strings"` and `{'JSX expressions'}`
throughout the code is not for a explicit reason but just a result IDE
autocompletion, I changed all props to be consistent with the
conventional style of using simple string literals where it is
sufficient.

This is a somewhat trivial change, but it makes the code a little more
readable and uniform
This commit is contained in:
blessedcoolant 2023-02-17 01:22:17 +13:00 committed by GitHub
commit a76038bac4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
70 changed files with 236 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/src/Loading.tsx
View File

@ -3,8 +3,8 @@ import { Flex, Spinner } from '@chakra-ui/react';
const Loading = () => {
return (
<Flex
width={'100vw'}
height={'100vh'}
width="100vw"
height="100vh"
alignItems="center"
justifyContent="center"
>

2
invokeai/frontend/src/common/components/GuideIcon.tsx
View File

@ -13,7 +13,7 @@ const GuideIcon = forwardRef(
({ feature, icon = MdHelp }: GuideIconProps, ref) => (
<GuidePopover feature={feature}>
<Box ref={ref}>
<Icon marginBottom={'-.15rem'} as={icon} />
<Icon marginBottom="-.15rem" as={icon} />
</Box>
</GuidePopover>
)

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

@ -29,15 +29,15 @@ const GuidePopover = ({ children, feature }: GuideProps) => {
if (!shouldDisplayGuides) return null;
return (
<Popover trigger={'hover'}>
<Popover trigger="hover">
<PopoverTrigger>
<Box>{children}</Box>
</PopoverTrigger>
<PopoverContent
className={`guide-popover-content`}
className="guide-popover-content"
maxWidth="400px"
onClick={(e) => e.preventDefault()}
cursor={'initial'}
cursor="initial"
>
<PopoverArrow className="guide-popover-arrow" />
<div className="guide-popover-guide-content">{text}</div>

8
invokeai/frontend/src/common/components/IAISlider.tsx
View File

@ -169,7 +169,7 @@ export default function IAISlider(props: IAIFullSliderProps) {
{label}
</FormLabel>
<HStack w={'100%'} gap={2} alignItems="center">
<HStack w="100%" gap={2} alignItems="center">
<Slider
aria-label={label}
value={value}
@ -259,9 +259,9 @@ export default function IAISlider(props: IAIFullSliderProps) {
{withReset && (
<IAIIconButton
size={'sm'}
aria-label={'Reset'}
tooltip={'Reset'}
size="sm"
aria-label="Reset"
tooltip="Reset"
icon={<BiReset />}
onClick={handleResetDisable}
isDisabled={isResetDisabled}

6
invokeai/frontend/src/common/components/ImageUploadOverlay.tsx
View File

@ -24,13 +24,13 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
<div className="dropzone-container">
{isDragAccept && (
<div className="dropzone-overlay is-drag-accept">
<Heading size={'lg'}>Upload Image{overlaySecondaryText}</Heading>
<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>
<Heading size="lg">Invalid Upload</Heading>
<Heading size="md">Must be single JPEG or PNG image</Heading>
</div>
)}
</div>

2
invokeai/frontend/src/common/components/ImageUploaderButton.tsx
View File

@ -22,7 +22,7 @@ const ImageUploaderButton = (props: ImageUploaderButtonProps) => {
>
<div className="image-upload-button">
<FaUpload />
<Heading size={'lg'}>Click or Drag and Drop</Heading>
<Heading size="lg">Click or Drag and Drop</Heading>
</div>
</div>
);

2
invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
View File

@ -17,7 +17,7 @@ const ClearCanvasHistoryButtonModal = () => {
acceptCallback={() => dispatch(clearCanvasHistory())}
acceptButtonText={t('unifiedcanvas:clearHistory')}
triggerComponent={
<IAIButton size={'sm'} leftIcon={<FaTrash />} isDisabled={isStaging}>
<IAIButton size="sm" leftIcon={<FaTrash />} isDisabled={isStaging}>
{t('unifiedcanvas:clearCanvasHistory')}
</IAIButton>
}

8
invokeai/frontend/src/features/canvas/components/IAICanvas.tsx
View File

@ -140,7 +140,7 @@ const IAICanvas = () => {
<Stage
tabIndex={-1}
ref={canvasStageRefCallback}
className={'inpainting-canvas-stage'}
className="inpainting-canvas-stage"
style={{
...(stageCursor ? { cursor: stageCursor } : {}),
}}
@ -165,19 +165,19 @@ const IAICanvas = () => {
onWheel={handleWheel}
draggable={(tool === 'move' || isStaging) && !isModifyingBoundingBox}
>
<Layer id={'grid'} visible={shouldShowGrid}>
<Layer id="grid" visible={shouldShowGrid}>
<IAICanvasGrid />
</Layer>
<Layer
id={'base'}
id="base"
ref={canvasBaseLayerRefCallback}
listening={false}
imageSmoothingEnabled={false}
>
<IAICanvasObjectRenderer />
</Layer>
<Layer id={'mask'} visible={isMaskEnabled} listening={false}>
<Layer id="mask" visible={isMaskEnabled} listening={false}>
<IAICanvasMaskLines visible={true} listening={false} />
<IAICanvasMaskCompositer listening={false} />
</Layer>

6
invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx
View File

@ -49,7 +49,7 @@ const IAICanvasBoundingBoxOverlay = () => {
offsetY={stageCoordinates.y / stageScale}
height={stageDimensions.height / stageScale}
width={stageDimensions.width / stageScale}
fill={'rgba(0,0,0,0.4)'}
fill="rgba(0,0,0,0.4)"
listening={false}
visible={shouldDarkenOutsideBoundingBox}
/>
@ -58,10 +58,10 @@ const IAICanvasBoundingBoxOverlay = () => {
y={boundingBoxCoordinates.y}
width={boundingBoxDimensions.width}
height={boundingBoxDimensions.height}
fill={'rgb(255,255,255)'}
fill="rgb(255,255,255)"
listening={false}
visible={shouldDarkenOutsideBoundingBox}
globalCompositeOperation={'destination-out'}
globalCompositeOperation="destination-out"
/>
</Group>
);

4
invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx
View File

@ -163,10 +163,10 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
width={stageDimensions.width / stageScale}
fillPatternImage={fillPatternImage}
fillPatternOffsetY={!isNumber(offset) ? 0 : offset}
fillPatternRepeat={'repeat'}
fillPatternRepeat="repeat"
fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }}
listening={true}
globalCompositeOperation={'source-in'}
globalCompositeOperation="source-in"
{...rest}
/>
);

2
invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx
View File

@ -36,7 +36,7 @@ const IAICanvasLines = (props: InpaintingCanvasLinesProps) => {
<Line
key={i}
points={line.points}
stroke={'rgb(0,0,0)'} // The lines can be any color, just need alpha > 0
stroke="rgb(0,0,0)" // The lines can be any color, just need alpha > 0
strokeWidth={line.strokeWidth * 2}
tension={0}
lineCap="round"

4
invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx
View File

@ -93,8 +93,8 @@ const IAICanvasObjectRenderer = () => {
y={obj.y}
width={obj.width}
height={obj.height}
fill={'rgb(255, 255, 255)'}
globalCompositeOperation={'destination-out'}
fill="rgb(255, 255, 255)"
globalCompositeOperation="destination-out"
/>
);
}

4
invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx
View File

@ -67,7 +67,7 @@ const IAICanvasStagingArea = (props: Props) => {
width={width}
height={height}
strokeWidth={1}
stroke={'white'}
stroke="white"
strokeScaleEnabled={false}
/>
<Rect
@ -77,7 +77,7 @@ const IAICanvasStagingArea = (props: Props) => {
height={height}
dash={[4, 4]}
strokeWidth={1}
stroke={'black'}
stroke="black"
strokeScaleEnabled={false}
/>
</Group>

10
invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
View File

@ -114,11 +114,11 @@ const IAICanvasStagingAreaToolbar = () => {
return (
<Flex
pos={'absolute'}
bottom={'1rem'}
w={'100%'}
align={'center'}
justify={'center'}
pos="absolute"
bottom="1rem"
w="100%"
align="center"
justify="center"
filter="drop-shadow(0 0.5rem 1rem rgba(0,0,0))"
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}

8
invokeai/frontend/src/features/canvas/components/IAICanvasToolPreview.tsx
View File

@ -172,7 +172,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
x={brushX}
y={brushY}
radius={radius}
stroke={'rgba(255,255,255,0.4)'}
stroke="rgba(255,255,255,0.4)"
strokeWidth={strokeWidth * 2}
strokeEnabled={true}
listening={false}
@ -181,7 +181,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
x={brushX}
y={brushY}
radius={radius}
stroke={'rgba(0,0,0,1)'}
stroke="rgba(0,0,0,1)"
strokeWidth={strokeWidth}
strokeEnabled={true}
listening={false}
@ -192,14 +192,14 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
x={brushX}
y={brushY}
radius={dotRadius * 2}
fill={'rgba(255,255,255,0.4)'}
fill="rgba(255,255,255,0.4)"
listening={false}
/>
<Circle
x={brushX}
y={brushY}
radius={dotRadius}
fill={'rgba(0,0,0,1)'}
fill="rgba(0,0,0,1)"
listening={false}
/>
</Group>

6
invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
View File

@ -269,12 +269,12 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
<Transformer
anchorCornerRadius={3}
anchorDragBoundFunc={anchorDragBoundFunc}
anchorFill={'rgba(212,216,234,1)'}
anchorFill="rgba(212,216,234,1)"
anchorSize={15}
anchorStroke={'rgb(42,42,42)'}
anchorStroke="rgb(42,42,42)"
borderDash={[4, 4]}
borderEnabled={true}
borderStroke={'black'}
borderStroke="black"
draggable={false}
enabledAnchors={tool === 'move' ? undefined : []}
flipEnabled={false}

4
invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
View File

@ -121,7 +121,7 @@ const IAICanvasMaskOptions = () => {
</ButtonGroup>
}
>
<Flex direction={'column'} gap={'0.5rem'}>
<Flex direction="column" gap="0.5rem">
<IAICheckbox
label={`${t('unifiedcanvas:enableMask')} (H)`}
isChecked={isMaskEnabled}
@ -139,7 +139,7 @@ const IAICanvasMaskOptions = () => {
color={maskColor}
onChange={(newColor) => dispatch(setMaskColor(newColor))}
/>
<IAIButton size={'sm'} leftIcon={<FaTrash />} onClick={handleClearMask}>
<IAIButton size="sm" leftIcon={<FaTrash />} onClick={handleClearMask}>
{t('unifiedcanvas:clearMask')} (Shift+C)
</IAIButton>
</Flex>

2
invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
View File

@ -97,7 +97,7 @@ const IAICanvasSettingsButtonPopover = () => {
/>
}
>
<Flex direction={'column'} gap={'0.5rem'}>
<Flex direction="column" gap="0.5rem">
<IAICheckbox
label={t('unifiedcanvas:showIntermediates')}
isChecked={shouldShowIntermediates}

9
invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
View File

@ -228,13 +228,8 @@ const IAICanvasToolChooserOptions = () => {
/>
}
>
<Flex
minWidth={'15rem'}
direction={'column'}
gap={'1rem'}
width={'100%'}
>
<Flex gap={'1rem'} justifyContent="space-between">
<Flex minWidth="15rem" direction="column" gap="1rem" width="100%">
<Flex gap="1rem" justifyContent="space-between">
<IAISlider
label={t('unifiedcanvas:brushSize')}
value={brushSize}

10
invokeai/frontend/src/features/gallery/components/CurrentImageButtons.tsx
View File

@ -415,14 +415,14 @@ const CurrentImageButtons = () => {
>
<div className="current-image-send-to-popover">
<IAIButton
size={'sm'}
size="sm"
onClick={handleClickUseAsInitialImage}
leftIcon={<FaShare />}
>
{t('parameters:sendToImg2Img')}
</IAIButton>
<IAIButton
size={'sm'}
size="sm"
onClick={handleSendToCanvas}
leftIcon={<FaShare />}
>
@ -430,14 +430,14 @@ const CurrentImageButtons = () => {
</IAIButton>
<IAIButton
size={'sm'}
size="sm"
onClick={handleCopyImage}
leftIcon={<FaCopy />}
>
{t('parameters:copyImage')}
</IAIButton>
<IAIButton
size={'sm'}
size="sm"
onClick={handleCopyImageLink}
leftIcon={<FaCopy />}
>
@ -445,7 +445,7 @@ const CurrentImageButtons = () => {
</IAIButton>
<Link download={true} href={currentImage?.url}>
<IAIButton leftIcon={<FaDownload />} size={'sm'} w="100%">
<IAIButton leftIcon={<FaDownload />} size="sm" w="100%">
{t('parameters:downloadImage')}
</IAIButton>
</Link>

2
invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -82,7 +82,7 @@ export default function CurrentImagePreview() {
};
return (
<div className={'current-image-preview'}>
<div className="current-image-preview">
{imageToDisplay && (
<Image
src={imageToDisplay.url}

4
invokeai/frontend/src/features/gallery/components/DeleteImageModal.tsx
View File

@ -116,13 +116,13 @@ const DeleteImageModal = forwardRef(
</AlertDialogHeader>
<AlertDialogBody>
<Flex direction={'column'} gap={5}>
<Flex direction="column" gap={5}>
<Text>
Are you sure? Deleted images will be sent to the Bin. You
can restore from there if you wish to.
</Text>
<FormControl>
<Flex alignItems={'center'}>
<Flex alignItems="center">
<FormLabel mb={0}>Don&apos;t ask me again</FormLabel>
<Switch
checked={!shouldConfirmOnDelete}

16
invokeai/frontend/src/features/gallery/components/HoverableImage.tsx
View File

@ -175,12 +175,12 @@ const HoverableImage = memo((props: HoverableImageProps) => {
>
<ContextMenu.Trigger>
<Box
position={'relative'}
position="relative"
key={uuid}
className="hoverable-image"
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
userSelect={'none'}
userSelect="none"
draggable={true}
onDragStart={handleDragStart}
>
@ -189,15 +189,15 @@ const HoverableImage = memo((props: HoverableImageProps) => {
objectFit={
shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit
}
rounded={'md'}
rounded="md"
src={thumbnail || url}
loading={'lazy'}
loading="lazy"
/>
<div className="hoverable-image-content" onClick={handleSelectImage}>
{isSelected && (
<Icon
width={'50%'}
height={'50%'}
width="50%"
height="50%"
as={FaCheck}
className="hoverable-image-check"
/>
@ -210,7 +210,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
aria-label={t('parameters:deleteImage')}
icon={<FaTrashAlt />}
size="xs"
variant={'imageHoverIconButton'}
variant="imageHoverIconButton"
fontSize={14}
isDisabled={!mayDeleteImage}
/>
@ -221,7 +221,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
</ContextMenu.Trigger>
<ContextMenu.Content
className="hoverable-image-context-menu"
sticky={'always'}
sticky="always"
onInteractOutside={(e) => {
e.detail.originalEvent.preventDefault();
}}

18
invokeai/frontend/src/features/gallery/components/ImageGallery.tsx
View File

@ -281,7 +281,7 @@ export default function ImageGallery() {
<Resizable
minWidth={galleryMinWidth}
maxWidth={shouldPinGallery ? galleryMaxWidth : window.innerWidth}
className={'image-gallery-popup'}
className="image-gallery-popup"
handleStyles={{
left: {
width: '15px',
@ -395,14 +395,14 @@ export default function ImageGallery() {
{shouldShowButtons ? (
<>
<IAIButton
size={'sm'}
size="sm"
data-selected={currentCategory === 'result'}
onClick={() => dispatch(setCurrentCategory('result'))}
>
{t('gallery:generations')}
</IAIButton>
<IAIButton
size={'sm'}
size="sm"
data-selected={currentCategory === 'user'}
onClick={() => dispatch(setCurrentCategory('user'))}
>
@ -433,14 +433,14 @@ export default function ImageGallery() {
<IAIPopover
isLazy
trigger="hover"
placement={'left'}
placement="left"
triggerComponent={
<IAIIconButton
size={'sm'}
size="sm"
aria-label={t('gallery:gallerySettings')}
icon={<FaWrench />}
className="image-gallery-icon-btn"
cursor={'pointer'}
cursor="pointer"
/>
}
>
@ -455,7 +455,7 @@ export default function ImageGallery() {
label={t('gallery:galleryImageSize')}
/>
<IAIIconButton
size={'sm'}
size="sm"
aria-label={t('gallery:galleryImageResetSize')}
tooltip={t('gallery:galleryImageResetSize')}
onClick={() => dispatch(setGalleryImageMinimumWidth(64))}
@ -505,8 +505,8 @@ export default function ImageGallery() {
</IAIPopover>
<IAIIconButton
size={'sm'}
className={'image-gallery-icon-btn'}
size="sm"
className="image-gallery-icon-btn"
aria-label={t('gallery:pinGallery')}
tooltip={`${t('gallery:pinGallery')} (Shift+G)`}
onClick={handleSetShouldPinGallery}

65
invokeai/frontend/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
View File

@ -71,8 +71,8 @@ const MetadataItem = ({
<IconButton
aria-label="Use this parameter"
icon={<IoArrowUndoCircleOutline />}
size={'xs'}
variant={'ghost'}
size="xs"
variant="ghost"
fontSize={20}
onClick={onClick}
/>
@ -83,23 +83,23 @@ const MetadataItem = ({
<IconButton
aria-label={`Copy ${label}`}
icon={<FaCopy />}
size={'xs'}
variant={'ghost'}
size="xs"
variant="ghost"
fontSize={14}
onClick={() => navigator.clipboard.writeText(value.toString())}
/>
</Tooltip>
)}
<Flex direction={labelPosition ? 'column' : 'row'}>
<Text fontWeight={'semibold'} whiteSpace={'pre-wrap'} pr={2}>
<Text fontWeight="semibold" whiteSpace="pre-wrap" pr={2}>
{label}:
</Text>
{isLink ? (
<Link href={value.toString()} isExternal wordBreak={'break-all'}>
<Link href={value.toString()} isExternal wordBreak="break-all">
{value.toString()} <ExternalLinkIcon mx="2px" />
</Link>
) : (
<Text overflowY={'scroll'} wordBreak={'break-all'}>
<Text overflowY="scroll" wordBreak="break-all">
{value.toString()}
</Text>
)}
@ -163,10 +163,10 @@ const ImageMetadataViewer = memo(
return (
<div className={`image-metadata-viewer ${styleClass}`}>
<Flex gap={1} direction={'column'} width={'100%'}>
<Flex gap={1} direction="column" width="100%">
<Flex gap={2}>
<Text fontWeight={'semibold'}>File:</Text>
<Link href={image.url} isExternal maxW={'calc(100% - 3rem)'}>
<Text fontWeight="semibold">File:</Text>
<Link href={image.url} isExternal maxW="calc(100% - 3rem)">
{image.url.length > 64
? image.url.substring(0, 64).concat('...')
: image.url}
@ -304,7 +304,7 @@ const ImageMetadataViewer = memo(
)}
{postprocessing && postprocessing.length > 0 && (
<>
<Heading size={'sm'}>Postprocessing</Heading>
<Heading size="sm">Postprocessing</Heading>
{postprocessing.map(
(
postprocess: InvokeAI.PostProcessedImageMetadata,
@ -313,13 +313,8 @@ const ImageMetadataViewer = memo(
if (postprocess.type === 'esrgan') {
const { scale, strength, denoise_str } = postprocess;
return (
<Flex
key={i}
pl={'2rem'}
gap={1}
direction={'column'}
>
<Text size={'md'}>{`${
<Flex key={i} pl="2rem" gap={1} direction="column">
<Text size="md">{`${
i + 1
}: Upscale (ESRGAN)`}</Text>
<MetadataItem
@ -348,13 +343,8 @@ const ImageMetadataViewer = memo(
} else if (postprocess.type === 'gfpgan') {
const { strength } = postprocess;
return (
<Flex
key={i}
pl={'2rem'}
gap={1}
direction={'column'}
>
<Text size={'md'}>{`${
<Flex key={i} pl="2rem" gap={1} direction="column">
<Text size="md">{`${
i + 1
}: Face restoration (GFPGAN)`}</Text>
@ -371,13 +361,8 @@ const ImageMetadataViewer = memo(
} else if (postprocess.type === 'codeformer') {
const { strength, fidelity } = postprocess;
return (
<Flex
key={i}
pl={'2rem'}
gap={1}
direction={'column'}
>
<Text size={'md'}>{`${
<Flex key={i} pl="2rem" gap={1} direction="column">
<Text size="md">{`${
i + 1
}: Face restoration (Codeformer)`}</Text>
@ -413,30 +398,30 @@ const ImageMetadataViewer = memo(
value={dreamPrompt}
/>
)}
<Flex gap={2} direction={'column'}>
<Flex gap={2} direction="column">
<Flex gap={2}>
<Tooltip label={`Copy metadata JSON`}>
<Tooltip label="Copy metadata JSON">
<IconButton
aria-label="Copy metadata JSON"
icon={<FaCopy />}
size={'xs'}
variant={'ghost'}
size="xs"
variant="ghost"
fontSize={14}
onClick={() =>
navigator.clipboard.writeText(metadataJSON)
}
/>
</Tooltip>
<Text fontWeight={'semibold'}>Metadata JSON:</Text>
<Text fontWeight="semibold">Metadata JSON:</Text>
</Flex>
<div className={'image-json-viewer'}>
<div className="image-json-viewer">
<pre>{metadataJSON}</pre>
</div>
</Flex>
</>
) : (
<Center width={'100%'} pt={10}>
<Text fontSize={'lg'} fontWeight="semibold">
<Center width="100%" pt={10}>
<Text fontSize="lg" fontWeight="semibold">
No metadata available
</Text>
</Center>

4
invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx
View File

@ -23,8 +23,8 @@ export default function InvokeAccordionItem(props: InvokeAccordionItemProps) {
return (
<AccordionItem className="advanced-parameters-item">
<AccordionButton className="advanced-parameters-header">
<Flex width={'100%'} gap={'0.5rem'} align={'center'}>
<Box flexGrow={1} textAlign={'left'}>
<Flex width="100%" gap="0.5rem" align="center">
<Box flexGrow={1} textAlign="left">
{header}
</Box>
{additionalHeaderComponents}

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx
View File

@ -63,7 +63,7 @@ const FaceRestoreSettings = () => {
const { t } = useTranslation();
return (
<Flex direction={'column'} gap={2}>
<Flex direction="column" gap={2}>
<IAISelect
label={t('parameters:type')}
validValues={FACETOOL_TYPES.concat()}

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength.tsx
View File

@ -36,7 +36,7 @@ export default function ImageToImageStrength(props: ImageToImageStrengthProps) {
styleClass={styleClass}
withInput
withSliderMarks
inputWidth={'5.5rem'}
inputWidth="5.5rem"
withReset
handleReset={handleImg2ImgStrengthReset}
/>

6
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx
View File

@ -49,7 +49,7 @@ const HiresStrength = () => {
isInteger={false}
withInput
withSliderMarks
inputWidth={'5.5rem'}
inputWidth="5.5rem"
withReset
handleReset={handleHiResStrengthReset}
isSliderDisabled={!hiresFix}
@ -75,10 +75,10 @@ const HiresSettings = () => {
dispatch(setHiresFix(e.target.checked));
return (
<Flex gap={2} direction={'column'}>
<Flex gap={2} direction="column">
<IAISwitch
label={t('parameters:hiresOptim')}
fontSize={'md'}
fontSize="md"
isChecked={hiresFix}
onChange={handleChangeHiresFix}
/>

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx
View File

@ -3,7 +3,7 @@ import SeamlessSettings from './SeamlessSettings';
const ImageToImageOutputSettings = () => {
return (
<Flex gap={2} direction={'column'}>
<Flex gap={2} direction="column">
<SeamlessSettings />
</Flex>
);

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx
View File

@ -4,7 +4,7 @@ import SeamlessSettings from './SeamlessSettings';
const OutputSettings = () => {
return (
<Flex gap={2} direction={'column'}>
<Flex gap={2} direction="column">
<SeamlessSettings />
<HiresSettings />
</Flex>

4
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx
View File

@ -22,10 +22,10 @@ const SeamlessSettings = () => {
const { t } = useTranslation();
return (
<Flex gap={2} direction={'column'}>
<Flex gap={2} direction="column">
<IAISwitch
label={t('parameters:seamlessTiling')}
fontSize={'md'}
fontSize="md"
isChecked={seamless}
onChange={handleChangeSeamless}
/>

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx
View File

@ -10,7 +10,7 @@ import Threshold from './Threshold';
*/
const SeedSettings = () => {
return (
<Flex gap={2} direction={'column'}>
<Flex gap={2} direction="column">
<RandomizeSeed />
<Flex gap={2}>
<Seed />

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx
View File

@ -18,7 +18,7 @@ export default function ShuffleSeed() {
return (
<Button
size={'sm'}
size="sm"
isDisabled={shouldRandomizeSeed}
onClick={handleClickRandomizeSeed}
padding="0 1.5rem"

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Variations/GenerateVariations.tsx
View File

@ -18,7 +18,7 @@ export default function GenerateVariationsToggle() {
return (
<IAISwitch
isChecked={shouldGenerateVariations}
width={'auto'}
width="auto"
onChange={handleChangeShouldGenerateVariations}
/>
);

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Variations/VariationsSettings.tsx
View File

@ -7,7 +7,7 @@ import VariationAmount from './VariationAmount';
*/
const VariationsSettings = () => {
return (
<Flex gap={2} direction={'column'}>
<Flex gap={2} direction="column">
<VariationAmount />
<SeedWeights />
</Flex>

2
invokeai/frontend/src/features/parameters/components/PromptInput/PromptInput.tsx
View File

@ -71,7 +71,7 @@ const PromptInput = () => {
id="prompt"
name="prompt"
placeholder={t('parameters:promptPlaceholder')}
size={'lg'}
size="lg"
value={prompt}
onChange={handleChangePrompt}
onKeyDown={handleKeyDown}

2
invokeai/frontend/src/features/system/components/ClearTempFolderButtonModal.tsx
View File

@ -27,7 +27,7 @@ const EmptyTempFolderButtonModal = () => {
acceptCallback={acceptCallback}
acceptButtonText={t('unifiedcanvas:emptyFolder')}
triggerComponent={
<IAIButton leftIcon={<FaTrash />} size={'sm'} isDisabled={isStaging}>
<IAIButton leftIcon={<FaTrash />} size="sm" isDisabled={isStaging}>
{t('unifiedcanvas:emptyTempImageFolder')}
</IAIButton>
}

12
invokeai/frontend/src/features/system/components/Console.tsx
View File

@ -109,7 +109,7 @@ const Console = () => {
bottom: 0,
zIndex: 9999,
}}
maxHeight={'90vh'}
maxHeight="90vh"
>
<div className="console" ref={viewerRef} onScroll={handleOnScroll}>
{log.map((entry, i) => {
@ -130,11 +130,11 @@ const Console = () => {
label={shouldAutoscroll ? 'Autoscroll On' : 'Autoscroll Off'}
>
<IconButton
className={'console-autoscroll-icon-button'}
className="console-autoscroll-icon-button"
data-autoscroll-enabled={shouldAutoscroll}
size="sm"
aria-label="Toggle autoscroll"
variant={'solid'}
variant="solid"
icon={<FaAngleDoubleDown />}
onClick={() => setShouldAutoscroll(!shouldAutoscroll)}
/>
@ -145,11 +145,11 @@ const Console = () => {
label={shouldShowLogViewer ? 'Hide Console' : 'Show Console'}
>
<IconButton
className={'console-toggle-icon-button'}
className="console-toggle-icon-button"
data-error-seen={hasError || !wasErrorSeen}
size="sm"
position={'fixed'}
variant={'solid'}
position="fixed"
variant="solid"
aria-label="Toggle Log Viewer"
icon={shouldShowLogViewer ? <FaMinus /> : <FaCode />}
onClick={handleClickLogViewerToggle}

2
invokeai/frontend/src/features/system/components/LanguagePicker.tsx
View File

@ -54,7 +54,7 @@ export default function LanguagePicker() {
aria-label={t('common:languagePickerLabel')}
tooltip={t('common:languagePickerLabel')}
icon={<FaLanguage />}
size={'sm'}
size="sm"
variant="link"
data-variant="link"
fontSize={26}

20
invokeai/frontend/src/features/system/components/ModelManager/AddCheckpointModel.tsx
View File

@ -99,8 +99,8 @@ export default function AddCheckpointModel() {
>
{({ handleSubmit, errors, touched }) => (
<form onSubmit={handleSubmit}>
<VStack rowGap={'0.5rem'}>
<Text fontSize={20} fontWeight="bold" alignSelf={'start'}>
<VStack rowGap="0.5rem">
<Text fontSize={20} fontWeight="bold" alignSelf="start">
{t('modelmanager:manual')}
</Text>
{/* Name */}
@ -111,7 +111,7 @@ export default function AddCheckpointModel() {
<FormLabel htmlFor="name" fontSize="sm">
{t('modelmanager:name')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="name"
@ -138,7 +138,7 @@ export default function AddCheckpointModel() {
<FormLabel htmlFor="description" fontSize="sm">
{t('modelmanager:description')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="description"
@ -164,7 +164,7 @@ export default function AddCheckpointModel() {
<FormLabel htmlFor="config" fontSize="sm">
{t('modelmanager:config')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="config"
@ -190,7 +190,7 @@ export default function AddCheckpointModel() {
<FormLabel htmlFor="config" fontSize="sm">
{t('modelmanager:modelLocation')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="weights"
@ -213,7 +213,7 @@ export default function AddCheckpointModel() {
<FormLabel htmlFor="vae" fontSize="sm">
{t('modelmanager:vaeLocation')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="vae"
@ -231,13 +231,13 @@ export default function AddCheckpointModel() {
</VStack>
</FormControl>
<HStack width={'100%'}>
<HStack width="100%">
{/* Width */}
<FormControl isInvalid={!!errors.width && touched.width}>
<FormLabel htmlFor="width" fontSize="sm">
{t('modelmanager:width')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field id="width" name="width">
{({
field,
@ -276,7 +276,7 @@ export default function AddCheckpointModel() {
<FormLabel htmlFor="height" fontSize="sm">
{t('modelmanager:height')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field id="height" name="height">
{({
field,

14
invokeai/frontend/src/features/system/components/ModelManager/AddDiffusersModel.tsx
View File

@ -105,7 +105,7 @@ export default function AddDiffusersModel() {
>
{({ handleSubmit, errors, touched }) => (
<form onSubmit={handleSubmit}>
<VStack rowGap={'0.5rem'}>
<VStack rowGap="0.5rem">
<FormItemWrapper>
{/* Name */}
<FormControl
@ -115,7 +115,7 @@ export default function AddDiffusersModel() {
<FormLabel htmlFor="name" fontSize="sm">
{t('modelmanager:name')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="name"
@ -145,7 +145,7 @@ export default function AddDiffusersModel() {
<FormLabel htmlFor="description" fontSize="sm">
{t('modelmanager:description')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="description"
@ -182,7 +182,7 @@ export default function AddDiffusersModel() {
<FormLabel htmlFor="path" fontSize="sm">
{t('modelmanager:modelLocation')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="path"
@ -205,7 +205,7 @@ export default function AddDiffusersModel() {
<FormLabel htmlFor="repo_id" fontSize="sm">
{t('modelmanager:repo_id')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="repo_id"
@ -242,7 +242,7 @@ export default function AddDiffusersModel() {
<FormLabel htmlFor="vae.path" fontSize="sm">
{t('modelmanager:vaeLocation')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="vae.path"
@ -267,7 +267,7 @@ export default function AddDiffusersModel() {
<FormLabel htmlFor="vae.repo_id" fontSize="sm">
{t('modelmanager:vaeRepoID')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="vae.repo_id"

4
invokeai/frontend/src/features/system/components/ModelManager/AddModel.tsx
View File

@ -72,9 +72,9 @@ export default function AddModel() {
tooltip={t('modelmanager:addNewModel')}
onClick={onOpen}
className="modal-close-btn"
size={'sm'}
size="sm"
>
<Flex columnGap={'0.5rem'} alignItems="center">
<Flex columnGap="0.5rem" alignItems="center">
<FaPlus />
{t('modelmanager:addNew')}
</Flex>

16
invokeai/frontend/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
View File

@ -121,7 +121,7 @@ export default function CheckpointModelEdit() {
>
{({ handleSubmit, errors, touched }) => (
<form onSubmit={handleSubmit}>
<VStack rowGap={'0.5rem'} alignItems="start">
<VStack rowGap="0.5rem" alignItems="start">
{/* Description */}
<FormControl
isInvalid={!!errors.description && touched.description}
@ -130,7 +130,7 @@ export default function CheckpointModelEdit() {
<FormLabel htmlFor="description" fontSize="sm">
{t('modelmanager:description')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="description"
@ -156,7 +156,7 @@ export default function CheckpointModelEdit() {
<FormLabel htmlFor="config" fontSize="sm">
{t('modelmanager:config')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="config"
@ -182,7 +182,7 @@ export default function CheckpointModelEdit() {
<FormLabel htmlFor="config" fontSize="sm">
{t('modelmanager:modelLocation')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="weights"
@ -205,7 +205,7 @@ export default function CheckpointModelEdit() {
<FormLabel htmlFor="vae" fontSize="sm">
{t('modelmanager:vaeLocation')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="vae"
@ -223,13 +223,13 @@ export default function CheckpointModelEdit() {
</VStack>
</FormControl>
<HStack width={'100%'}>
<HStack width="100%">
{/* Width */}
<FormControl isInvalid={!!errors.width && touched.width}>
<FormLabel htmlFor="width" fontSize="sm">
{t('modelmanager:width')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field id="width" name="width">
{({
field,
@ -267,7 +267,7 @@ export default function CheckpointModelEdit() {
<FormLabel htmlFor="height" fontSize="sm">
{t('modelmanager:height')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field id="height" name="height">
{({
field,

12
invokeai/frontend/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
View File

@ -128,7 +128,7 @@ export default function DiffusersModelEdit() {
>
{({ handleSubmit, errors, touched }) => (
<form onSubmit={handleSubmit}>
<VStack rowGap={'0.5rem'} alignItems="start">
<VStack rowGap="0.5rem" alignItems="start">
{/* Description */}
<FormControl
isInvalid={!!errors.description && touched.description}
@ -137,7 +137,7 @@ export default function DiffusersModelEdit() {
<FormLabel htmlFor="description" fontSize="sm">
{t('modelmanager:description')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="description"
@ -163,7 +163,7 @@ export default function DiffusersModelEdit() {
<FormLabel htmlFor="path" fontSize="sm">
{t('modelmanager:modelLocation')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="path"
@ -186,7 +186,7 @@ export default function DiffusersModelEdit() {
<FormLabel htmlFor="repo_id" fontSize="sm">
{t('modelmanager:repo_id')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="repo_id"
@ -211,7 +211,7 @@ export default function DiffusersModelEdit() {
<FormLabel htmlFor="vae.path" fontSize="sm">
{t('modelmanager:vaeLocation')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="vae.path"
@ -236,7 +236,7 @@ export default function DiffusersModelEdit() {
<FormLabel htmlFor="vae.repo_id" fontSize="sm">
{t('modelmanager:vaeRepoID')}
</FormLabel>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<Field
as={IAIInput}
id="vae.repo_id"

10
invokeai/frontend/src/features/system/components/ModelManager/ModelList.tsx
View File

@ -176,9 +176,9 @@ const ModelList = () => {
}, [models, searchText, t, isSelectedFilter]);
return (
<Flex flexDirection={'column'} rowGap="2rem" width="50%" minWidth="50%">
<Flex justifyContent={'space-between'}>
<Text fontSize={'1.4rem'} fontWeight="bold">
<Flex flexDirection="column" rowGap="2rem" width="50%" minWidth="50%">
<Flex justifyContent="space-between">
<Text fontSize="1.4rem" fontWeight="bold">
{t('modelmanager:availableModels')}
</Text>
<AddModel />
@ -190,10 +190,10 @@ const ModelList = () => {
/>
<Flex
flexDirection={'column'}
flexDirection="column"
gap={1}
maxHeight={window.innerHeight - 360}
overflow={'scroll'}
overflow="scroll"
paddingRight="1rem"
>
<Flex columnGap="0.5rem">

12
invokeai/frontend/src/features/system/components/ModelManager/ModelListItem.tsx
View File

@ -56,7 +56,7 @@ export default function ModelListItem(props: ModelListItemProps) {
return (
<Flex
alignItems={'center'}
alignItems="center"
padding="0.5rem 0.5rem"
borderRadius="0.2rem"
backgroundColor={name === openModel ? 'var(--accent-color)' : ''}
@ -69,14 +69,14 @@ export default function ModelListItem(props: ModelListItemProps) {
>
<Box onClick={openModelHandler} cursor="pointer">
<Tooltip label={description} hasArrow placement="bottom">
<Text fontWeight={'bold'}>{name}</Text>
<Text fontWeight="bold">{name}</Text>
</Tooltip>
</Box>
<Spacer onClick={openModelHandler} cursor="pointer" />
<Flex gap={2} alignItems="center">
<Text color={statusTextColor()}>{status}</Text>
<Button
size={'sm'}
size="sm"
onClick={handleChangeModel}
isDisabled={status === 'active' || isProcessing || !isConnected}
className="modal-close-btn"
@ -86,7 +86,7 @@ export default function ModelListItem(props: ModelListItemProps) {
<IAIIconButton
icon={<EditIcon />}
size={'sm'}
size="sm"
onClick={openModelHandler}
aria-label="Modify Config"
isDisabled={status === 'active' || isProcessing || !isConnected}
@ -99,7 +99,7 @@ export default function ModelListItem(props: ModelListItemProps) {
triggerComponent={
<IAIIconButton
icon={<DeleteIcon />}
size={'sm'}
size="sm"
aria-label={t('modelmanager:deleteConfig')}
isDisabled={status === 'active' || isProcessing || !isConnected}
className=" modal-close-btn"
@ -107,7 +107,7 @@ export default function ModelListItem(props: ModelListItemProps) {
/>
}
>
<Flex rowGap={'1rem'} flexDirection="column">
<Flex rowGap="1rem" flexDirection="column">
<p style={{ fontWeight: 'bold' }}>{t('modelmanager:deleteMsg1')}</p>
<p style={{ color: 'var(--text-color-secondary' }}>
{t('modelmanager:deleteMsg2')}

6
invokeai/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx
View File

@ -58,11 +58,7 @@ export default function ModelManagerModal({
<ModalHeader fontWeight="bold">
{t('modelmanager:modelManager')}
</ModalHeader>
<Flex
padding={'0 1.5rem 1.5rem 1.5rem'}
width="100%"
columnGap={'2rem'}
>
<Flex padding="0 1.5rem 1.5rem 1.5rem" width="100%" columnGap="2rem">
<ModelList />
{openModel && model_list[openModel]['format'] === 'diffusers' ? (
<DiffusersModelEdit />

40
invokeai/frontend/src/features/system/components/ModelManager/SearchModels.tsx
View File

@ -52,16 +52,16 @@ function ModelExistsTag() {
const { t } = useTranslation();
return (
<Box
position={'absolute'}
position="absolute"
zIndex={2}
right={4}
top={4}
fontSize="0.7rem"
fontWeight={'bold'}
backgroundColor={'var(--accent-color)'}
padding={'0.2rem 0.5rem'}
fontWeight="bold"
backgroundColor="var(--accent-color)"
padding="0.2rem 0.5rem"
borderRadius="0.2rem"
alignItems={'center'}
alignItems="center"
>
{t('modelmanager:modelExists')}
</Box>
@ -96,7 +96,7 @@ function SearchModelEntry({
value={model.name}
label={
<>
<VStack alignItems={'start'}>
<VStack alignItems="start">
<p style={{ fontWeight: 'bold' }}>{model.name}</p>
<p style={{ fontStyle: 'italic' }}>{model.location}</p>
</VStack>
@ -105,9 +105,9 @@ function SearchModelEntry({
isChecked={modelsToAdd.includes(model.name)}
isDisabled={existingModels.includes(model.location)}
onChange={foundModelsChangeHandler}
padding={'1rem'}
backgroundColor={'var(--background-color)'}
borderRadius={'0.5rem'}
padding="1rem"
backgroundColor="var(--background-color)"
borderRadius="0.5rem"
_checked={{
backgroundColor: 'var(--accent-color)',
color: 'var(--text-color)',
@ -243,12 +243,12 @@ export default function SearchModels() {
<>
{searchFolder ? (
<Flex
flexDirection={'column'}
padding={'1rem'}
backgroundColor={'var(--background-color)'}
flexDirection="column"
padding="1rem"
backgroundColor="var(--background-color)"
borderRadius="0.5rem"
rowGap={'0.5rem'}
position={'relative'}
rowGap="0.5rem"
position="relative"
>
<p
style={{
@ -271,7 +271,7 @@ export default function SearchModels() {
aria-label={t('modelmanager:scanAgain')}
tooltip={t('modelmanager:scanAgain')}
icon={<BiReset />}
position={'absolute'}
position="absolute"
right={16}
fontSize={18}
disabled={isProcessing}
@ -280,7 +280,7 @@ export default function SearchModels() {
<IAIIconButton
aria-label={t('modelmanager:clearCheckpointFolder')}
icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
position={'absolute'}
position="absolute"
right={5}
onClick={resetSearchModelHandler}
/>
@ -319,8 +319,8 @@ export default function SearchModels() {
</Formik>
)}
{foundModels && (
<Flex flexDirection={'column'} rowGap={'1rem'}>
<Flex justifyContent={'space-between'} alignItems="center">
<Flex flexDirection="column" rowGap="1rem">
<Flex justifyContent="space-between" alignItems="center">
<p>
{t('modelmanager:modelsFound')}: {foundModels.length}
</p>
@ -328,8 +328,8 @@ export default function SearchModels() {
{t('modelmanager:selected')}: {modelsToAdd.length}
</p>
</Flex>
<Flex columnGap={'0.5rem'} justifyContent={'space-between'}>
<Flex columnGap={'0.5rem'}>
<Flex columnGap="0.5rem" justifyContent="space-between">
<Flex columnGap="0.5rem">
<IAIButton
isDisabled={modelsToAdd.length === foundModels.length}
onClick={addAllToSelected}

6
invokeai/frontend/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@ -206,7 +206,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
</div>
<div className="settings-modal-reset">
<Heading size={'md'}>{t('settings:resetWebUI')}</Heading>
<Heading size="md">{t('settings:resetWebUI')}</Heading>
<Button colorScheme="red" onClick={handleClickResetWebUI}>
{t('settings:resetWebUI')}
</Button>
@ -232,8 +232,8 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
<ModalOverlay bg="blackAlpha.300" backdropFilter="blur(40px)" />
<ModalContent>
<ModalBody pb={6} pt={6}>
<Flex justifyContent={'center'}>
<Text fontSize={'lg'}>
<Flex justifyContent="center">
<Text fontSize="lg">
<Text>{t('settings:resetComplete')}</Text>
</Text>
</Flex>

12
invokeai/frontend/src/features/system/components/SiteHeader.tsx
View File

@ -56,7 +56,7 @@ const SiteHeader = () => {
<IAIIconButton
aria-label={t('modelmanager:modelManager')}
tooltip={t('modelmanager:modelManager')}
size={'sm'}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
@ -68,7 +68,7 @@ const SiteHeader = () => {
<IAIIconButton
aria-label={t('common:hotkeysLabel')}
tooltip={t('common:hotkeysLabel')}
size={'sm'}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
@ -86,7 +86,7 @@ const SiteHeader = () => {
variant="link"
data-variant="link"
fontSize={20}
size={'sm'}
size="sm"
icon={
<Link isExternal href="http://github.com/invoke-ai/InvokeAI/issues">
<FaBug />
@ -100,7 +100,7 @@ const SiteHeader = () => {
variant="link"
data-variant="link"
fontSize={20}
size={'sm'}
size="sm"
icon={
<Link isExternal href="http://github.com/invoke-ai/InvokeAI">
<FaGithub />
@ -114,7 +114,7 @@ const SiteHeader = () => {
variant="link"
data-variant="link"
fontSize={20}
size={'sm'}
size="sm"
icon={
<Link isExternal href="https://discord.gg/ZmtBAhwWhy">
<FaDiscord />
@ -129,7 +129,7 @@ const SiteHeader = () => {
variant="link"
data-variant="link"
fontSize={22}
size={'sm'}
size="sm"
icon={<MdSettings />}
/>
</SettingsModal>

6
invokeai/frontend/src/features/system/components/ThemeChanger.tsx
View File

@ -46,7 +46,7 @@ export default function ThemeChanger() {
width: '6rem',
}}
leftIcon={currentTheme === theme ? <FaCheck /> : undefined}
size={'sm'}
size="sm"
onClick={() => handleChangeTheme(theme)}
key={theme}
>
@ -64,7 +64,7 @@ export default function ThemeChanger() {
triggerComponent={
<IAIIconButton
aria-label={t('common:themeLabel')}
size={'sm'}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
@ -72,7 +72,7 @@ export default function ThemeChanger() {
/>
}
>
<VStack align={'stretch'}>{renderThemeOptions()}</VStack>
<VStack align="stretch">{renderThemeOptions()}</VStack>
</IAIPopover>
);
}

6
invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx
View File

@ -35,9 +35,9 @@ export default function InitImagePreview() {
{initialImage && (
<div className="init-image-preview">
<Image
fit={'contain'}
maxWidth={'100%'}
maxHeight={'100%'}
fit="contain"
maxWidth="100%"
maxHeight="100%"
src={
typeof initialImage === 'string' ? initialImage : initialImage.url
}

6
invokeai/frontend/src/features/ui/components/ImageToImage/InitialImageOverlay.tsx
View File

@ -9,10 +9,10 @@ export default function InitialImageOverlay() {
return initialImage ? (
<Image
fit={'contain'}
fit="contain"
src={typeof initialImage === 'string' ? initialImage : initialImage.url}
rounded={'md'}
className={'checkerboard'}
rounded="md"
className="checkerboard"
/>
) : null;
}

16
invokeai/frontend/src/features/ui/components/InvokeTabs.tsx
View File

@ -31,32 +31,32 @@ export interface InvokeTabInfo {
export const tabDict: Record<InvokeTabName, InvokeTabInfo> = {
txt2img: {
title: <TextToImageIcon fill={'black'} boxSize={'2.5rem'} />,
title: <TextToImageIcon fill="black" boxSize="2.5rem" />,
workarea: <TextToImageWorkarea />,
tooltip: 'Text To Image',
},
img2img: {
title: <ImageToImageIcon fill={'black'} boxSize={'2.5rem'} />,
title: <ImageToImageIcon fill="black" boxSize="2.5rem" />,
workarea: <ImageToImageWorkarea />,
tooltip: 'Image To Image',
},
unifiedCanvas: {
title: <UnifiedCanvasIcon fill={'black'} boxSize={'2.5rem'} />,
title: <UnifiedCanvasIcon fill="black" boxSize="2.5rem" />,
workarea: <UnifiedCanvasWorkarea />,
tooltip: 'Unified Canvas',
},
nodes: {
title: <NodesIcon fill={'black'} boxSize={'2.5rem'} />,
title: <NodesIcon fill="black" boxSize="2.5rem" />,
workarea: <NodesWIP />,
tooltip: 'Nodes',
},
postprocess: {
title: <PostprocessingIcon fill={'black'} boxSize={'2.5rem'} />,
title: <PostprocessingIcon fill="black" boxSize="2.5rem" />,
workarea: <PostProcessingWIP />,
tooltip: 'Post Processing',
},
training: {
title: <TrainingIcon fill={'black'} boxSize={'2.5rem'} />,
title: <TrainingIcon fill="black" boxSize="2.5rem" />,
workarea: <TrainingWIP />,
tooltip: 'Training',
},
@ -122,7 +122,7 @@ export default function InvokeTabs() {
key={key}
hasArrow
label={tabDict[key as keyof typeof tabDict].tooltip}
placement={'right'}
placement="right"
>
<Tab>{tabDict[key as keyof typeof tabDict].title}</Tab>
</Tooltip>
@ -147,7 +147,7 @@ export default function InvokeTabs() {
<Tabs
isLazy
className="app-tabs"
variant={'unstyled'}
variant="unstyled"
defaultIndex={activeTab}
index={activeTab}
onChange={(index: number) => {

13
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx
View File

@ -45,21 +45,16 @@ const UnifiedCanvasDisplayBeta = () => {
}, [dispatch]);
return (
<div className={'workarea-single-view'}>
<div className="workarea-single-view">
<Flex
flexDirection={'row'}
flexDirection="row"
width="100%"
height="100%"
columnGap={'1rem'}
columnGap="1rem"
padding="1rem"
>
<UnifiedCanvasToolbarBeta />
<Flex
width="100%"
height="100%"
flexDirection={'column'}
rowGap={'1rem'}
>
<Flex width="100%" height="100%" flexDirection="column" rowGap="1rem">
<UnifiedCanvasToolSettingsBeta />
{doesCanvasNeedScaling ? <IAICanvasResizer /> : <IAICanvas />}
</Flex>

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx
View File

@ -4,7 +4,7 @@ import UnifiedCanvasLimitStrokesToBox from './UnifiedCanvasLimitStrokesToBox';
export default function UnifiedCanvasBaseBrushSettings() {
return (
<Flex gap={'1rem'} alignItems="center">
<Flex gap="1rem" alignItems="center">
<UnifiedCanvasBrushSettings />
<UnifiedCanvasLimitStrokesToBox />
</Flex>

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx
View File

@ -4,7 +4,7 @@ import UnifiedCanvasColorPicker from './UnifiedCanvasColorPicker';
export default function UnifiedCanvasBrushSettings() {
return (
<Flex columnGap={'1rem'} alignItems="center">
<Flex columnGap="1rem" alignItems="center">
<UnifiedCanvasBrushSize />
<UnifiedCanvasColorPicker />
</Flex>

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx
View File

@ -49,7 +49,7 @@ export default function UnifiedCanvasBrushSize() {
onChange={(newSize) => dispatch(setBrushSize(newSize))}
sliderNumberInputProps={{ max: 500 }}
inputReadOnly={false}
width={'100px'}
width="100px"
isCompact
/>
);

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx
View File

@ -14,7 +14,7 @@ export default function UnifiedCanvasClearMask() {
return (
<IAIButton
size={'sm'}
size="sm"
leftIcon={<FaTrash />}
onClick={handleClearMask}
tooltip={`${t('unifiedcanvas:clearMask')} (Shift+C)`}

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx
View File

@ -92,7 +92,7 @@ export default function UnifiedCanvasColorPicker() {
/>
}
>
<Flex minWidth={'15rem'} direction={'column'} gap={'1rem'} width={'100%'}>
<Flex minWidth="15rem" direction="column" gap="1rem" width="100%">
{layer === 'base' && (
<IAIColorPicker
style={{

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMaskBrushSettings.tsx
View File

@ -6,7 +6,7 @@ import UnifiedCanvasPreserveMask from './UnifiedCanvasPreserveMask';
export default function UnifiedCanvasMaskBrushSettings() {
return (
<Flex gap={'1rem'} alignItems="center">
<Flex gap="1rem" alignItems="center">
<UnifiedCanvasBrushSettings />
<UnifiedCanvasEnableMask />
<UnifiedCanvasPreserveMask />

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx
View File

@ -5,7 +5,7 @@ import UnifiedCanvasSnapToGrid from './UnifiedCanvasSnapToGrid';
export default function UnifiedCanvasMoveSettings() {
return (
<Flex alignItems={'center'} gap="1rem">
<Flex alignItems="center" gap="1rem">
<UnifiedCanvasShowGrid />
<UnifiedCanvasSnapToGrid />
<UnifiedCanvasDarkenOutsideSelection />

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx
View File

@ -68,7 +68,7 @@ const UnifiedCanvasSettings = () => {
/>
}
>
<Flex direction={'column'} gap={'0.5rem'}>
<Flex direction="column" gap="0.5rem">
<IAICheckbox
label={t('unifiedcanvas:showIntermediates')}
isChecked={shouldShowIntermediates}

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettingsBeta.tsx
View File

@ -28,7 +28,7 @@ export default function UnifiedCanvasToolSettingsBeta() {
const { tool, layer } = useAppSelector(selector);
return (
<Flex height="2rem" minHeight="2rem" maxHeight="2rem" alignItems={'center'}>
<Flex height="2rem" minHeight="2rem" maxHeight="2rem" alignItems="center">
{layer == 'base' && ['brush', 'eraser', 'colorPicker'].includes(tool) && (
<UnifiedCanvasBaseBrushSettings />
)}

4
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx
View File

@ -25,7 +25,7 @@ export default function UnifiedCanvasProcessingButtons() {
};
return (
<Flex flexDirection={'column'} gap="0.5rem">
<Flex flexDirection="column" gap="0.5rem">
<IAIIconButton
tooltip={`${t('parameters:showOptionsPanel')} (O)`}
tooltipProps={{ placement: 'top' }}
@ -38,7 +38,7 @@ export default function UnifiedCanvasProcessingButtons() {
<InvokeButton iconButton />
</Flex>
<Flex>
<CancelButton width={'100%'} height={'40px'} />
<CancelButton width="100%" height="40px" />
</Flex>
</Flex>
);

4
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx
View File

@ -113,7 +113,7 @@ const UnifiedCanvasToolSelect = () => {
const handleEraseBoundingBox = () => dispatch(addEraseRect());
return (
<Flex flexDirection={'column'} gap={'0.5rem'}>
<Flex flexDirection="column" gap="0.5rem">
<ButtonGroup>
<IAIIconButton
aria-label={`${t('unifiedcanvas:brush')} (B)`}
@ -155,7 +155,7 @@ const UnifiedCanvasToolSelect = () => {
data-selected={tool === 'colorPicker' && !isStaging}
isDisabled={isStaging}
onClick={handleSelectColorPickerTool}
width={'max-content'}
width="max-content"
/>
</Flex>
);

12
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx
View File

@ -23,30 +23,30 @@ const UnifiedCanvasToolbarBeta = () => {
);
return (
<Flex flexDirection={'column'} rowGap="0.5rem" width="6rem">
<Flex flexDirection="column" rowGap="0.5rem" width="6rem">
<UnifiedCanvasLayerSelect />
<UnifiedCanvasToolSelect />
<Flex gap={'0.5rem'}>
<Flex gap="0.5rem">
<UnifiedCanvasMoveTool />
<UnifiedCanvasResetView />
</Flex>
<Flex columnGap={'0.5rem'}>
<Flex columnGap="0.5rem">
<UnifiedCanvasMergeVisible />
<UnifiedCanvasSaveToGallery />
</Flex>
<Flex columnGap={'0.5rem'}>
<Flex columnGap="0.5rem">
<UnifiedCanvasCopyToClipboard />
<UnifiedCanvasDownloadImage />
</Flex>
<Flex gap={'0.5rem'}>
<Flex gap="0.5rem">
<IAICanvasUndoButton />
<IAICanvasRedoButton />
</Flex>
<Flex gap={'0.5rem'}>
<Flex gap="0.5rem">
<UnifiedCanvasFileUploader />
<UnifiedCanvasResetCanvas />
</Flex>

2
invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx
View File

@ -43,7 +43,7 @@ const UnifiedCanvasDisplay = () => {
}, [dispatch]);
return (
<div className={'workarea-single-view'}>
<div className="workarea-single-view">
<div className="workarea-split-view-left">
<div className="inpainting-main-area">
<IAICanvasOutpaintingControls />

2
invokeai/frontend/stats.html
View File

File diff suppressed because one or more lines are too long