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

cleanup(ui): Remove unused vars + minor bug fixes

Browse Source
This commit is contained in:
blessedcoolant 2023-05-09 19:20:10 +12:00 committed by psychedelicious
parent 15e57e3a3d
commit 7bfb5640ad
57 changed files with 103 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/app/selectors/readinessSelector.ts
View File

@ -13,7 +13,7 @@ export const readinessSelector = createSelector(
initialCanvasImageSelector,
activeTabNameSelector,
],
(generation, system, initialCanvasImage, activeTabName) => {
(generation, system) => {
const {
prompt,
shouldGenerateVariations,

13
invokeai/frontend/web/src/app/store/enhancers/reduxRemember/unserialize.ts
View File

@ -1,28 +1,17 @@
import { canvasPersistDenylist } from 'features/canvas/store/canvasPersistDenylist';
import { initialCanvasState } from 'features/canvas/store/canvasSlice';
import { galleryPersistDenylist } from 'features/gallery/store/galleryPersistDenylist';
import { initialGalleryState } from 'features/gallery/store/gallerySlice';
import { resultsPersistDenylist } from 'features/gallery/store/resultsPersistDenylist';
import { initialResultsState } from 'features/gallery/store/resultsSlice';
import { uploadsPersistDenylist } from 'features/gallery/store/uploadsPersistDenylist';
import { initialUploadsState } from 'features/gallery/store/uploadsSlice';
import { lightboxPersistDenylist } from 'features/lightbox/store/lightboxPersistDenylist';
import { initialLightboxState } from 'features/lightbox/store/lightboxSlice';
import { nodesPersistDenylist } from 'features/nodes/store/nodesPersistDenylist';
import { initialNodesState } from 'features/nodes/store/nodesSlice';
import { generationPersistDenylist } from 'features/parameters/store/generationPersistDenylist';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import { postprocessingPersistDenylist } from 'features/parameters/store/postprocessingPersistDenylist';
import { initialPostprocessingState } from 'features/parameters/store/postprocessingSlice';
import { initialConfigState } from 'features/system/store/configSlice';
import { initialModelsState } from 'features/system/store/modelSlice';
import { modelsPersistDenylist } from 'features/system/store/modelsPersistDenylist';
import { systemPersistDenylist } from 'features/system/store/systemPersistDenylist';
import { initialSystemState } from 'features/system/store/systemSlice';
import { initialHotkeysState } from 'features/ui/store/hotkeysSlice';
import { uiPersistDenylist } from 'features/ui/store/uiPersistDenylist';
import { initialUIState } from 'features/ui/store/uiSlice';
import { defaultsDeep, merge, omit } from 'lodash-es';
import { defaultsDeep } from 'lodash-es';
import { UnserializeFunction } from 'redux-remember';
const initialStates: {

1
invokeai/frontend/web/src/app/store/store.ts
View File

@ -1,6 +1,5 @@
import {
AnyAction,
Store,
ThunkDispatch,
combineReducers,
configureStore,

2
invokeai/frontend/web/src/app/store/storeHooks.ts
View File

@ -1,5 +1,5 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { AppDispatch, AppThunkDispatch, RootState } from 'app/store/store';
import { AppThunkDispatch, RootState } from 'app/store/store';
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppThunkDispatch>();

5
invokeai/frontend/web/src/app/types/invokeai.ts
View File

@ -12,13 +12,10 @@
* 'gfpgan'.
*/
import { GalleryCategory } from 'features/gallery/store/gallerySlice';
import { SelectedImage } from 'features/parameters/store/actions';
import { FacetoolType } from 'features/parameters/store/postprocessingSlice';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { IRect } from 'konva/lib/types';
import { ImageResponseMetadata, ImageType } from 'services/api';
import { AnyInvocation } from 'services/events/types';
import { O } from 'ts-toolbelt';
/**
@ -279,7 +276,7 @@ export type FoundModelResponse = {
// export type SystemConfigResponse = SystemConfig;
export type ImageResultResponse = Omit<_Image, 'uuid'> & {
export type ImageResultResponse = Omit<Image, 'uuid'> & {
boundingBox?: IRect;
generationMode: InvokeTabName;
};

2
invokeai/frontend/web/src/common/components/IAICollapse.tsx
View File

@ -1,4 +1,4 @@
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
import { ChevronUpIcon } from '@chakra-ui/icons';
import { Box, Collapse, Flex, Spacer, Switch } from '@chakra-ui/react';
import { PropsWithChildren, memo } from 'react';

2
invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
View File

@ -22,7 +22,6 @@ import {
CanvasLayer,
CanvasLayerState,
CanvasMaskLine,
CanvasSession,
CanvasState,
CanvasTool,
Dimensions,
@ -30,7 +29,6 @@ import {
isCanvasBaseImage,
isCanvasMaskLine,
} from './canvasTypes';
import { stringToArray } from 'konva/lib/shapes/Text';
export const initialLayerState: CanvasLayerState = {
objects: [],

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

@ -1,11 +1,10 @@
import { createSelector } from '@reduxjs/toolkit';
import { get, isEqual, isNumber, isString } from 'lodash-es';
import { isEqual, isString } from 'lodash-es';
import {
ButtonGroup,
Flex,
FlexProps,
FormControl,
Link,
useDisclosure,
useToast,
@ -15,19 +14,12 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton';
import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover';
import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
import { GalleryState } from 'features/gallery/store/gallerySlice';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import {
initialImageChanged,
setAllParameters,
// setInitialImage,
setSeed,
} from 'features/parameters/store/generationSlice';
import { postprocessingSelector } from 'features/parameters/store/postprocessingSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { SystemState } from 'features/system/store/systemSlice';
import {
activeTabNameSelector,
uiSelector,
@ -165,31 +157,31 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
const toast = useToast();
const { t } = useTranslation();
const { recallPrompt, recallSeed, sendToImageToImage } = useParameters();
const { recallPrompt, recallSeed } = useParameters();
const handleCopyImage = useCallback(async () => {
if (!image?.url) {
return;
}
// const handleCopyImage = useCallback(async () => {
// if (!image?.url) {
// return;
// }
const url = getUrl(image.url);
// const url = getUrl(image.url);
if (!url) {
return;
}
// if (!url) {
// return;
// }
const blob = await fetch(url).then((res) => res.blob());
const data = [new ClipboardItem({ [blob.type]: blob })];
// const blob = await fetch(url).then((res) => res.blob());
// const data = [new ClipboardItem({ [blob.type]: blob })];
await navigator.clipboard.write(data);
// await navigator.clipboard.write(data);
toast({
title: t('toast.imageCopied'),
status: 'success',
duration: 2500,
isClosable: true,
});
}, [getUrl, t, image?.url, toast]);
// toast({
// title: t('toast.imageCopied'),
// status: 'success',
// duration: 2500,
// isClosable: true,
// });
// }, [getUrl, t, image?.url, toast]);
const handleCopyImageLink = useCallback(() => {
const url = image

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

@ -5,9 +5,7 @@ import {
Image,
MenuItem,
MenuList,
Skeleton,
useDisclosure,
useTheme,
useToast,
} from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@ -98,17 +96,16 @@ const HoverableImage = memo((props: HoverableImageProps) => {
} = useDisclosure();
const { image, isSelected } = props;
const { url, thumbnail, name, metadata } = image;
const { url, thumbnail, name } = image;
const { getUrl } = useGetUrl();
const [isHovered, setIsHovered] = useState<boolean>(false);
const toast = useToast();
const { direction } = useTheme();
const { t } = useTranslation();
const { isFeatureEnabled: isLightboxEnabled } = useFeatureStatus('lightbox');
const { recallSeed, recallPrompt, sendToImageToImage, recallInitialImage } =
useParameters();
const { recallSeed, recallPrompt, recallInitialImage } = useParameters();
const handleMouseOver = () => setIsHovered(true);
const handleMouseOut = () => setIsHovered(false);

9
invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
View File

@ -5,7 +5,6 @@ import {
// selectPrevImage,
setGalleryImageMinimumWidth,
} from 'features/gallery/store/gallerySlice';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { clamp, isEqual } from 'lodash-es';
import { useHotkeys } from 'react-hotkeys-hook';
@ -13,11 +12,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
import './ImageGallery.css';
import ImageGalleryContent from './ImageGalleryContent';
import ResizableDrawer from 'features/ui/components/common/ResizableDrawer/ResizableDrawer';
import {
setShouldShowGallery,
toggleGalleryPanel,
togglePinGalleryPanel,
} from 'features/ui/store/uiSlice';
import { setShouldShowGallery } from 'features/ui/store/uiSlice';
import { createSelector } from '@reduxjs/toolkit';
import {
activeTabNameSelector,
@ -26,8 +21,6 @@ import {
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import useResolution from 'common/hooks/useResolution';
import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
// const GALLERY_TAB_WIDTHS: Record<

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

@ -3,7 +3,6 @@ import {
Box,
Center,
Flex,
Heading,
IconButton,
Link,
Text,
@ -19,8 +18,6 @@ import {
setCfgScale,
setHeight,
setImg2imgStrength,
// setInitialImage,
setMaskPath,
setPerlin,
setSampler,
setSeamless,
@ -31,15 +28,7 @@ import {
setThreshold,
setWidth,
} from 'features/parameters/store/generationSlice';
import {
setCodeformerFidelity,
setFacetoolStrength,
setFacetoolType,
setHiresFix,
setUpscalingDenoising,
setUpscalingLevel,
setUpscalingStrength,
} from 'features/parameters/store/postprocessingSlice';
import { setHiresFix } from 'features/parameters/store/postprocessingSlice';
import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
import { memo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';

15
invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts
View File

@ -1,23 +1,14 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import { configSelector } from 'features/system/store/configSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import {
activeTabNameSelector,
uiSelector,
} from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash-es';
import {
selectResultsAll,
selectResultsById,
selectResultsEntities,
} from './resultsSlice';
import {
selectUploadsAll,
selectUploadsById,
selectUploadsEntities,
} from './uploadsSlice';
import { selectResultsById, selectResultsEntities } from './resultsSlice';
import { selectUploadsAll, selectUploadsById } from './uploadsSlice';
export const gallerySelector = (state: RootState) => state.gallery;

2
invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts
View File

@ -6,7 +6,7 @@ import {
receivedUploadImagesPage,
IMAGES_PER_PAGE,
} from 'services/thunks/gallery';
import { imageDeleted, imageUploaded } from 'services/thunks/image';
import { imageDeleted } from 'services/thunks/image';
import { deserializeImageResponse } from 'services/util/deserializeImageResponse';
export const uploadsAdapter = createEntityAdapter<Image>({

2
invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx
View File

@ -4,7 +4,7 @@ import * as InvokeAI from 'app/types/invokeai';
import { useGetUrl } from 'common/util/getUrl';
type ReactPanZoomProps = {
image: InvokeAI._Image;
image: InvokeAI.Image;
styleClass?: string;
alt?: string;
ref?: React.Ref<HTMLImageElement>;

7
invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx
View File

@ -1,5 +1,3 @@
import { v4 as uuidv4 } from 'uuid';
import 'reactflow/dist/style.css';
import { memo, useCallback } from 'react';
import {
@ -8,12 +6,11 @@ import {
MenuButton,
MenuList,
MenuItem,
IconButton,
} from '@chakra-ui/react';
import { FaEllipsisV, FaPlus } from 'react-icons/fa';
import { FaEllipsisV } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { nodeAdded } from '../store/nodesSlice';
import { cloneDeep, map } from 'lodash-es';
import { map } from 'lodash-es';
import { RootState } from 'app/store/store';
import { useBuildInvocation } from '../hooks/useBuildInvocation';
import { addToast } from 'features/system/store/systemSlice';

20
invokeai/frontend/web/src/features/nodes/components/FieldHandle.tsx
View File

@ -1,12 +1,6 @@
import { Tooltip } from '@chakra-ui/react';
import { CSSProperties, memo, useMemo } from 'react';
import {
Handle,
Position,
Connection,
HandleType,
useReactFlow,
} from 'reactflow';
import { CSSProperties, memo } from 'react';
import { Handle, Position, Connection, HandleType } from 'reactflow';
import { FIELDS, HANDLE_TOOLTIP_OPEN_DELAY } from '../types/constants';
// import { useConnectionEventStyles } from '../hooks/useConnectionEventStyles';
import { InputFieldTemplate, OutputFieldTemplate } from '../types/types';
@ -26,9 +20,9 @@ const outputHandleStyles: CSSProperties = {
right: '-0.5rem',
};
const requiredConnectionStyles: CSSProperties = {
boxShadow: '0 0 0.5rem 0.5rem var(--invokeai-colors-error-400)',
};
// const requiredConnectionStyles: CSSProperties = {
// boxShadow: '0 0 0.5rem 0.5rem var(--invokeai-colors-error-400)',
// };
type FieldHandleProps = {
nodeId: string;
@ -39,8 +33,8 @@ type FieldHandleProps = {
};
const FieldHandle = (props: FieldHandleProps) => {
const { nodeId, field, isValidConnection, handleType, styles } = props;
const { name, title, type, description } = field;
const { field, isValidConnection, handleType, styles } = props;
const { name, type } = field;
return (
<Tooltip

4
invokeai/frontend/web/src/features/nodes/components/Flow.tsx
View File

@ -23,7 +23,6 @@ import TopRightPanel from './panels/TopRightPanel';
import TopCenterPanel from './panels/TopCenterPanel';
import BottomLeftPanel from './panels/BottomLeftPanel.tsx';
import MinimapPanel from './panels/MinimapPanel';
import NodeSearch from './search/NodeSearch';
const nodeTypes = { invocation: InvocationComponent };
@ -78,8 +77,7 @@ export const Flow = () => {
style: { strokeWidth: 2 },
}}
>
<NodeSearch />
{/* <TopLeftPanel /> */}
<TopLeftPanel />
<TopCenterPanel />
<TopRightPanel />
<BottomLeftPanel />

2
invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
View File

@ -1,6 +1,6 @@
import { Flex, Heading, Tooltip, Icon } from '@chakra-ui/react';
import { InvocationTemplate } from 'features/nodes/types/types';
import { memo, MutableRefObject } from 'react';
import { memo } from 'react';
import { FaInfoCircle } from 'react-icons/fa';
interface IAINodeHeaderProps {

2
invokeai/frontend/web/src/features/nodes/components/InputFieldComponent.tsx
View File

@ -22,7 +22,7 @@ type InputFieldComponentProps = {
// build an individual input element based on the schema
const InputFieldComponent = (props: InputFieldComponentProps) => {
const { nodeId, field, template } = props;
const { type, value } = field;
const { type } = field;
if (type === 'string' && template.type === 'string') {
return (

7
invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
View File

@ -1,16 +1,16 @@
import { Box, Image, Icon, Flex } from '@chakra-ui/react';
import { Box, Image } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks';
import SelectImagePlaceholder from 'common/components/SelectImagePlaceholder';
import { useGetUrl } from 'common/util/getUrl';
import useGetImageByNameAndType from 'features/gallery/hooks/useGetImageByName';
import useGetImageByUuid from 'features/gallery/hooks/useGetImageByUuid';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import {
ImageInputFieldTemplate,
ImageInputFieldValue,
} from 'features/nodes/types/types';
import { DragEvent, memo, useCallback, useState } from 'react';
import { FaImage } from 'react-icons/fa';
import { ImageType } from 'services/api';
import { FieldComponentProps } from './types';
@ -18,7 +18,6 @@ const ImageInputFieldComponent = (
props: FieldComponentProps<ImageInputFieldValue, ImageInputFieldTemplate>
) => {
const { nodeId, field } = props;
const { value } = field;
const getImageByNameAndType = useGetImageByNameAndType();
const dispatch = useAppDispatch();

2
invokeai/frontend/web/src/features/nodes/components/fields/ItemInputFieldComponent.tsx
View File

@ -3,7 +3,7 @@ import {
ItemInputFieldValue,
} from 'features/nodes/types/types';
import { memo } from 'react';
import { FaAddressCard, FaList } from 'react-icons/fa';
import { FaAddressCard } from 'react-icons/fa';
import { FieldComponentProps } from './types';
const ItemInputFieldComponent = (

8
invokeai/frontend/web/src/features/nodes/components/fields/ModelInputFieldComponent.tsx
View File

@ -1,17 +1,13 @@
import { Select } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import {
ModelInputFieldTemplate,
ModelInputFieldValue,
} from 'features/nodes/types/types';
import {
selectModelsById,
selectModelsIds,
} from 'features/system/store/modelSlice';
import { isEqual, map } from 'lodash-es';
import { selectModelsIds } from 'features/system/store/modelSlice';
import { isEqual } from 'lodash-es';
import { ChangeEvent, memo } from 'react';
import { FieldComponentProps } from './types';

4
invokeai/frontend/web/src/features/nodes/components/panels/TopLeftPanel.tsx
View File

@ -1,10 +1,10 @@
import { memo } from 'react';
import { Panel } from 'reactflow';
import AddNodeMenu from '../AddNodeMenu';
import NodeSearch from '../search/NodeSearch';
const TopLeftPanel = () => (
<Panel position="top-left">
<AddNodeMenu />
<NodeSearch />
</Panel>
);

25
invokeai/frontend/web/src/features/nodes/components/search/NodeSearch.tsx
View File

@ -2,7 +2,6 @@ import { Box, Flex } from '@chakra-ui/layout';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInput from 'common/components/IAIInput';
import { Panel } from 'reactflow';
import { map } from 'lodash-es';
import {
ChangeEvent,
@ -192,19 +191,17 @@ const NodeSearch = () => {
};
return (
<Panel position="top-left">
<Flex
flexDirection="column"
tabIndex={1}
onKeyDown={searchKeyHandler}
onFocus={() => setShowNodeList(true)}
onBlur={searchInputBlurHandler}
ref={nodeSearchRef}
>
<IAIInput value={searchText} onChange={findNode} />
{showNodeList && renderNodeList()}
</Flex>
</Panel>
<Flex
flexDirection="column"
tabIndex={1}
onKeyDown={searchKeyHandler}
onFocus={() => setShowNodeList(true)}
onBlur={searchInputBlurHandler}
ref={nodeSearchRef}
>
<IAIInput value={searchText} onChange={findNode} />
{showNodeList && renderNodeList()}
</Flex>
);
};

2
invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
View File

@ -11,7 +11,7 @@ import {
NodeChange,
OnConnectStartParams,
} from 'reactflow';
import { ColorField, Graph, ImageField } from 'services/api';
import { ImageField } from 'services/api';
import { receivedOpenAPISchema } from 'services/thunks/schema';
import { InvocationTemplate, InvocationValue } from '../types/types';
import { parseSchema } from '../util/parseSchema';

1
invokeai/frontend/web/src/features/nodes/types/constants.ts
View File

@ -1,4 +1,3 @@
import { getCSSVar } from '@chakra-ui/utils';
import { FieldType, FieldUIConfig } from './types';
export const HANDLE_TOOLTIP_OPEN_DELAY = 500;

2
invokeai/frontend/web/src/features/nodes/types/types.ts
View File

@ -1,9 +1,7 @@
import { Image } from 'app/types/invokeai';
import { OpenAPIV3 } from 'openapi-types';
import { RgbaColor } from 'react-colorful';
import { ImageField } from 'services/api';
import { AnyInvocationType } from 'services/events/types';
import { O } from 'ts-toolbelt';
export type InvocationValue = {
id: string;

2
invokeai/frontend/web/src/features/nodes/util/fieldTemplateBuilders.ts
View File

@ -234,7 +234,6 @@ const buildEnumInputFieldTemplate = ({
};
const buildArrayInputFieldTemplate = ({
schemaObject,
baseField,
}: BuildInputFieldArg): ArrayInputFieldTemplate => {
const template: ArrayInputFieldTemplate = {
@ -249,7 +248,6 @@ const buildArrayInputFieldTemplate = ({
};
const buildItemInputFieldTemplate = ({
schemaObject,
baseField,
}: BuildInputFieldArg): ItemInputFieldTemplate => {
const template: ItemInputFieldTemplate = {

16
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts
View File

@ -1,8 +1,6 @@
import { RootState } from 'app/store/store';
import {
DataURLToImageInvocation,
Edge,
Graph,
ImageToImageInvocation,
InpaintInvocation,
IterateInvocation,
@ -15,10 +13,8 @@ import { buildTxt2ImgNode } from '../nodeBuilders/buildTextToImageNode';
import { buildRangeNode } from '../nodeBuilders/buildRangeNode';
import { buildIterateNode } from '../nodeBuilders/buildIterateNode';
import { buildEdges } from '../edgeBuilders/buildEdges';
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
import { getCanvasData } from 'features/canvas/util/getCanvasData';
import { getGenerationMode } from '../getGenerationMode';
import { v4 as uuidv4 } from 'uuid';
import { log } from 'app/logging/useLogger';
import { buildInpaintNode } from '../nodeBuilders/buildInpaintNode';
@ -73,9 +69,7 @@ export const buildCanvasGraphAndBlobs = async (
}
const {
baseDataURL,
baseBlob,
maskDataURL,
maskBlob,
baseIsPartiallyTransparent,
baseIsFullyTransparent,
@ -112,14 +106,8 @@ export const buildCanvasGraphAndBlobs = async (
}
if (baseNode.type === 'inpaint') {
const {
seamSize,
seamBlur,
seamSteps,
seamStrength,
tileSize,
infillMethod,
} = state.generation;
const { seamSize, seamBlur, seamSteps, seamStrength, tileSize } =
state.generation;
// generationParameters.invert_mask = shouldPreserveMaskedArea;
// if (boundingBoxScale !== 'none') {

5
invokeai/frontend/web/src/features/nodes/util/nodeBuilders/buildImageToImageNode.ts
View File

@ -13,7 +13,7 @@ export const buildImg2ImgNode = (
overrides: O.Partial<ImageToImageInvocation, 'deep'> = {}
): ImageToImageInvocation => {
const nodeId = uuidv4();
const { generation, system, models } = state;
const { generation } = state;
const {
prompt,
@ -28,9 +28,6 @@ export const buildImg2ImgNode = (
img2imgStrength: strength,
shouldFitToWidthHeight: fit,
shouldRandomizeSeed,
shouldUseSeamless,
seamlessXAxis,
seamlessYAxis,
} = generation;
const initialImage = initialImageSelector(state);

9
invokeai/frontend/web/src/features/nodes/util/nodeBuilders/buildInpaintNode.ts
View File

@ -1,11 +1,6 @@
import { v4 as uuidv4 } from 'uuid';
import { RootState } from 'app/store/store';
import {
Edge,
ImageToImageInvocation,
InpaintInvocation,
TextToImageInvocation,
} from 'services/api';
import { InpaintInvocation } from 'services/api';
import { initialImageSelector } from 'features/parameters/store/generationSelectors';
import { O } from 'ts-toolbelt';
@ -14,7 +9,7 @@ export const buildInpaintNode = (
overrides: O.Partial<InpaintInvocation, 'deep'> = {}
): InpaintInvocation => {
const nodeId = uuidv4();
const { generation, system, models } = state;
const { generation, models } = state;
const { selectedModelName } = models;

2
invokeai/frontend/web/src/features/nodes/util/nodeBuilders/buildTextToImageNode.ts
View File

@ -8,7 +8,7 @@ export const buildTxt2ImgNode = (
overrides: O.Partial<TextToImageInvocation, 'deep'> = {}
): TextToImageInvocation => {
const nodeId = uuidv4();
const { generation, models } = state;
const { generation } = state;
const {
prompt,

20
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageSettings.tsx
View File

@ -1,27 +1,11 @@
import {
Box,
ButtonGroup,
Collapse,
Flex,
Heading,
HStack,
Image,
Spacer,
useDisclosure,
VStack,
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { VStack } from '@chakra-ui/react';
import IAIButton from 'common/components/IAIButton';
import ImageToImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit';
import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
import IAIIconButton from 'common/components/IAIIconButton';
import { useTranslation } from 'react-i18next';
import InitialImagePreview from './InitialImagePreview';
import { useState } from 'react';
import { FaUndo, FaUpload } from 'react-icons/fa';
import InitialImageButtons from 'common/components/ImageToImageSettingsHeader';
import InitialImageButtons from 'common/components/ImageToImageButtons';
export default function ImageToImageSettings() {
const { t } = useTranslation();

5
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageToggle.tsx
View File

@ -1,11 +1,9 @@
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { isImageToImageEnabledChanged } from 'features/parameters/store/generationSlice';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { shouldShowImageParametersChanged } from 'features/ui/store/uiSlice';
import { ChangeEvent } from 'react';
@ -25,8 +23,7 @@ const selector = createSelector(
);
export default function ImageToImageToggle() {
const { isImageToImageEnabled, shouldShowImageParameters } =
useAppSelector(selector);
const { shouldShowImageParameters } = useAppSelector(selector);
const { t } = useTranslation();

15
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
View File

@ -1,24 +1,16 @@
import { Box, Flex, Image, Spinner, Text } from '@chakra-ui/react';
import { Flex, Image, Spinner } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import SelectImagePlaceholder from 'common/components/SelectImagePlaceholder';
import { useGetUrl } from 'common/util/getUrl';
import useGetImageByNameAndType from 'features/gallery/hooks/useGetImageByName';
import generationSlice, {
clearInitialImage,
initialImageChanged,
} from 'features/parameters/store/generationSlice';
import { clearInitialImage } from 'features/parameters/store/generationSlice';
import { addToast } from 'features/system/store/systemSlice';
import { isEqual } from 'lodash-es';
import { DragEvent, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ImageType } from 'services/api';
import ImageToImageOverlay from 'common/components/ImageToImageOverlay';
import {
generationSelector,
initialImageSelector,
} from 'features/parameters/store/generationSelectors';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { initialImageSelected } from 'features/parameters/store/actions';
const selector = createSelector(
@ -40,7 +32,6 @@ const InitialImagePreview = () => {
const { t } = useTranslation();
const [isLoaded, setIsLoaded] = useState(false);
const getImageByNameAndType = useGetImageByNameAndType();
const onError = () => {
dispatch(

3
invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx
View File

@ -22,8 +22,7 @@ const selector = createSelector(
const ParamSeamlessCollapse = () => {
const { t } = useTranslation();
const { shouldUseSeamless, seamlessXAxis, seamlessYAxis } =
useAppSelector(selector);
const { shouldUseSeamless } = useAppSelector(selector);
const dispatch = useAppDispatch();

3
invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeed.tsx
View File

@ -1,12 +1,9 @@
import { Flex, HStack } from '@chakra-ui/react';
import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';
import { setSeed } from 'features/parameters/store/generationSlice';
import { useTranslation } from 'react-i18next';
import ParamSeedShuffle from './ParamSeedShuffle';
import ParamSeedRandomize from './ParamSeedRandomize';
export default function ParamSeed() {
const seed = useAppSelector((state: RootState) => state.generation.seed);

2
invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedShuffle.tsx
View File

@ -3,11 +3,9 @@ import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton';
import IAIIconButton from 'common/components/IAIIconButton';
import randomInt from 'common/util/randomInt';
import { setSeed } from 'features/parameters/store/generationSlice';
import { useTranslation } from 'react-i18next';
import { FaRandom } from 'react-icons/fa';
export default function ParamSeedShuffle() {
const dispatch = useAppDispatch();

3
invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx
View File

@ -20,7 +20,6 @@ import {
MenuList,
MenuOptionGroup,
MenuItemOption,
IconButton,
} from '@chakra-ui/react';
import { useHotkeys } from 'react-hotkeys-hook';
@ -28,8 +27,6 @@ import { useTranslation } from 'react-i18next';
import { MdCancel, MdCancelScheduleSend } from 'react-icons/md';
import { sessionCanceled } from 'services/thunks/session';
import { BiChevronDown } from 'react-icons/bi';
import { FaChevronDown } from 'react-icons/fa';
import { ChevronDownIcon } from '@chakra-ui/icons';
const cancelButtonSelector = createSelector(

7
invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx
View File

@ -1,18 +1,11 @@
import { Flex } from '@chakra-ui/react';
import { useAppSelector } from 'app/store/storeHooks';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import CancelButton from './CancelButton';
import InvokeButton from './InvokeButton';
import LoopbackButton from './Loopback';
import IAICheckbox from 'common/components/IAICheckbox';
import IAISwitch from 'common/components/IAISwitch';
/**
* Buttons to start and cancel image generation.
*/
const ProcessButtons = () => {
const activeTabName = useAppSelector(activeTabNameSelector);
return (
<Flex gap={2}>
<InvokeButton />

6
invokeai/frontend/web/src/features/parameters/hooks/useParameters.ts
View File

@ -1,11 +1,11 @@
import { UseToastOptions, useToast } from '@chakra-ui/react';
import { useToast } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks';
import { isFinite, isString } from 'lodash-es';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import useSetBothPrompts from './usePrompt';
import { initialImageChanged, setSeed } from '../store/generationSlice';
import { isImage, isImageField } from 'services/types/guards';
import { setSeed } from '../store/generationSlice';
import { isImageField } from 'services/types/guards';
import { NUMPY_RAND_MAX } from 'app/constants';
import { initialImageSelected } from '../store/actions';
import { Image } from 'app/types/invokeai';

3
invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
View File

@ -1,11 +1,8 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import * as InvokeAI from 'app/types/invokeai';
import { getPromptAndNegative } from 'common/util/getPromptAndNegative';
import promptToString from 'common/util/promptToString';
import { seedWeightsToString } from 'common/util/seedWeightPairs';
import { clamp } from 'lodash-es';
import { ImageField, ImageType } from 'services/api';
export interface GenerationState {
cfgScale: number;

1
invokeai/frontend/web/src/features/parameters/store/hiresSlice.ts
View File

@ -1,6 +1,5 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import { FACETOOL_TYPES } from 'app/constants';
export interface HiresState {
codeformerFidelity: number;

11
invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
View File

@ -5,16 +5,9 @@ import { useTranslation } from 'react-i18next';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISelect from 'common/components/IAISelect';
import {
// modelSelected,
selectedModelSelector,
selectModelsById,
selectModelsIds,
} from '../store/modelSlice';
import { selectModelsById, selectModelsIds } from '../store/modelSlice';
import { RootState } from 'app/store/store';
import generationSlice, {
modelSelected,
} from 'features/parameters/store/generationSlice';
import { modelSelected } from 'features/parameters/store/generationSlice';
import { generationSelector } from 'features/parameters/store/generationSelectors';
const selector = createSelector(

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

@ -1,6 +1,5 @@
import { Flex, Grid } from '@chakra-ui/react';
import { memo, useState } from 'react';
import ModelSelect from './ModelSelect';
import StatusIndicator from './StatusIndicator';
import InvokeAILogoComponent from './InvokeAILogoComponent';

1
invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
View File

@ -43,7 +43,6 @@ const StatusIndicator = () => {
currentIteration,
totalIterations,
statusTranslationKey,
currentStatusHasSteps,
} = useAppSelector(statusIndicatorSelector);
const { t } = useTranslation();
const ref = useRef(null);

1
invokeai/frontend/web/src/features/system/hooks/useIsApplicationReady.ts
View File

@ -1,5 +1,4 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { useMemo } from 'react';
import { configSelector } from '../store/configSelectors';

2
invokeai/frontend/web/src/features/system/store/modelSelectors.ts
View File

@ -1,5 +1,3 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { reduce } from 'lodash-es';
export const modelSelector = (state: RootState) => state.models;

3
invokeai/frontend/web/src/features/system/store/modelSlice.ts
View File

@ -1,7 +1,6 @@
import { createEntityAdapter, PayloadAction } from '@reduxjs/toolkit';
import { createEntityAdapter } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { keys, sample } from 'lodash-es';
import { CkptModelInfo, DiffusersModelInfo } from 'services/api';
import { receivedModels } from 'services/thunks/model';

31
invokeai/frontend/web/src/features/system/store/systemSlice.ts
View File

@ -15,7 +15,6 @@ import {
} from 'services/events/actions';
import { ProgressImage } from 'services/events/types';
import { initialImageChanged } from 'features/parameters/store/generationSlice';
import { makeToast } from '../hooks/useToastWatcher';
import { sessionCanceled, sessionInvoked } from 'services/thunks/session';
import { receivedModels } from 'services/thunks/model';
@ -284,8 +283,7 @@ export const systemSlice = createSlice({
/**
* Socket Connected
*/
builder.addCase(socketConnected, (state, action) => {
const { timestamp } = action.payload;
builder.addCase(socketConnected, (state) => {
state.isConnected = true;
state.isCancelable = true;
state.isProcessing = false;
@ -300,9 +298,7 @@ export const systemSlice = createSlice({
/**
* Socket Disconnected
*/
builder.addCase(socketDisconnected, (state, action) => {
const { timestamp } = action.payload;
builder.addCase(socketDisconnected, (state) => {
state.isConnected = false;
state.isProcessing = false;
state.isCancelable = true;
@ -317,7 +313,7 @@ export const systemSlice = createSlice({
/**
* Invocation Started
*/
builder.addCase(invocationStarted, (state, action) => {
builder.addCase(invocationStarted, (state) => {
state.isCancelable = true;
state.isProcessing = true;
state.currentStatusHasSteps = false;
@ -332,14 +328,7 @@ export const systemSlice = createSlice({
* Generator Progress
*/
builder.addCase(generatorProgress, (state, action) => {
const {
step,
total_steps,
progress_image,
node,
source_node_id,
graph_execution_state_id,
} = action.payload.data;
const { step, total_steps, progress_image } = action.payload.data;
state.isProcessing = true;
state.isCancelable = true;
@ -356,7 +345,7 @@ export const systemSlice = createSlice({
* Invocation Complete
*/
builder.addCase(invocationComplete, (state, action) => {
const { data, timestamp } = action.payload;
const { data } = action.payload;
// state.currentIteration = 0;
// state.totalIterations = 0;
@ -374,9 +363,7 @@ export const systemSlice = createSlice({
/**
* Invocation Error
*/
builder.addCase(invocationError, (state, action) => {
const { data, timestamp } = action.payload;
builder.addCase(invocationError, (state) => {
state.isProcessing = false;
state.isCancelable = true;
// state.currentIteration = 0;
@ -410,8 +397,6 @@ export const systemSlice = createSlice({
* Session Canceled
*/
builder.addCase(sessionCanceled.fulfilled, (state, action) => {
const { timestamp } = action.payload;
state.canceledSession = action.meta.arg.sessionId;
state.isProcessing = false;
state.isCancelable = false;
@ -428,9 +413,7 @@ export const systemSlice = createSlice({
/**
* Session Canceled
*/
builder.addCase(graphExecutionStateComplete, (state, action) => {
const { timestamp } = action.payload;
builder.addCase(graphExecutionStateComplete, (state) => {
state.isProcessing = false;
state.isCancelable = false;
state.isCancelScheduled = false;

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

@ -81,12 +81,8 @@ const InvokeTabs = () => {
(state: RootState) => state.lightbox.isLightboxOpen
);
const {
shouldPinGallery,
shouldPinParametersPanel,
shouldShowGallery,
shouldShowParametersPanel,
} = useAppSelector((state: RootState) => state.ui);
const { shouldPinGallery, shouldPinParametersPanel, shouldShowGallery } =
useAppSelector((state: RootState) => state.ui);
const { t } = useTranslation();

3
invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
View File

@ -1,8 +1,7 @@
import { isEqual } from 'lodash-es';
import { createSelector } from '@reduxjs/toolkit';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { PropsWithChildren, memo, useMemo } from 'react';
import { memo, useMemo } from 'react';
import { Box, Flex } from '@chakra-ui/react';
import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
import OverlayScrollable from './common/OverlayScrollable';

38
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea.tsx
View File

@ -1,19 +1,10 @@
import { Box, Flex } from '@chakra-ui/react';
import { useAppSelector } from 'app/store/storeHooks';
import { memo } from 'react';
import PinParametersPanelButton from '../../PinParametersPanelButton';
import { RootState } from 'app/store/store';
import Scrollable from '../../common/Scrollable';
import ParametersSlide from '../../ParametersDrawer';
import UnifiedCanvasParameters from './UnifiedCanvasParameters';
import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta';
import UnifiedCanvasContent from './UnifiedCanvasContent';
const CanvasWorkspace = () => {
const shouldPinParametersPanel = useAppSelector(
(state: RootState) => state.ui.shouldPinParametersPanel
);
const shouldUseCanvasBetaLayout = useAppSelector(
(state: RootState) => state.ui.shouldUseCanvasBetaLayout
);
@ -23,35 +14,6 @@ const CanvasWorkspace = () => {
) : (
<UnifiedCanvasContent />
);
return (
<Flex
flexDirection={{ base: 'column-reverse', xl: 'row' }}
w="full"
h="full"
gap={4}
>
{/* {shouldPinParametersPanel ? (
<Box width="28rem" flexShrink={0} position="relative">
<Scrollable>
<UnifiedCanvasParameters />
</Scrollable>
<PinParametersPanelButton
sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
/>
</Box>
) : (
<ParametersSlide>
<UnifiedCanvasParameters />
</ParametersSlide>
)} */}
{shouldUseCanvasBetaLayout ? (
<UnifiedCanvasContentBeta />
) : (
<UnifiedCanvasContent />
)}
</Flex>
);
};
export default memo(CanvasWorkspace);

2
invokeai/frontend/web/src/services/events/actions.ts
View File

@ -1,4 +1,4 @@
import { AnyAction, createAction } from '@reduxjs/toolkit';
import { createAction } from '@reduxjs/toolkit';
import {
GeneratorProgressEvent,
GraphExecutionStateCompleteEvent,

4
invokeai/frontend/web/src/services/util/deserializeImageField.ts
View File

@ -1,6 +1,4 @@
import { Image } from 'app/types/invokeai';
import { ImageField, ImageType } from 'services/api';
import { AnyInvocation } from 'services/events/types';
import { ImageType } from 'services/api';
export const buildImageUrls = (
imageType: ImageType,

4
invokeai/frontend/web/src/services/util/makeGraphOfXImages.ts
View File

@ -12,12 +12,12 @@ export const makeGraphOfXImages = (numberOfImages: string) =>
prompt: 'pizza',
steps: 50,
seed: 123,
sampler_name: 'ddim',
scheduler: 'ddim',
})
)
.reduce(
(acc, val: TextToImageInvocation) => {
acc.nodes![val.id] = val;
if (acc.nodes) acc.nodes[val.id] = val;
return acc;
},
{ nodes: {} } as Graph

2
invokeai/frontend/web/src/theme/util/constants.ts
View File

@ -20,4 +20,4 @@ export const APP_TEXT_TO_IMAGE_HEIGHT =
// option bar
export const OPTIONS_BAR_MAX_WIDTH = '22.5rem';
export const PARAMETERS_PANEL_WIDTH = '30rem';
export const PARAMETERS_PANEL_WIDTH = '28rem';