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

Fixes: inpainting bug "images do not match"

Browse Source
This commit is contained in:
psychedelicious 2022-10-30 18:07:06 +11:00
parent c0c32d9daa
commit ac1469bbd3
13 changed files with 71 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/dist/assets/index.1d211108.js → frontend/dist/assets/index.616d87b3.js vendored
View File

File diff suppressed because one or more lines are too long

2
frontend/dist/index.html vendored
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InvokeAI - A Stable Diffusion Toolkit</title>
<link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
<script type="module" crossorigin src="./assets/index.1d211108.js"></script>
<script type="module" crossorigin src="./assets/index.616d87b3.js"></script>
<link rel="stylesheet" href="./assets/index.64a76932.css">
</head>

2
frontend/src/app/socketio/listeners.ts
View File

@ -269,7 +269,7 @@ const makeSocketIOListeners = (
* Callback to run when we receive a 'imageDeleted' event.
*/
onImageDeleted: (data: InvokeAI.ImageDeletedResponse) => {
const { url, uuid, category } = data;
const { url } = data;
// remove image from gallery
dispatch(removeImage(data));

25
frontend/src/common/util/parameterTranslation.ts
View File

@ -100,30 +100,15 @@ export const frontendToBackendParameters = (
if (generationMode === 'inpainting' && maskImageElement) {
const {
lines,
boundingBoxCoordinate: { x, y },
boundingBoxDimensions: { width, height },
shouldShowBoundingBox,
boundingBoxCoordinate,
boundingBoxDimensions,
inpaintReplace,
shouldUseInpaintReplace,
} = inpaintingState;
let bx = x,
by = y,
bwidth = width,
bheight = height;
if (!shouldShowBoundingBox) {
bx = 0;
by = 0;
bwidth = maskImageElement.width;
bheight = maskImageElement.height;
}
const boundingBox = {
x: bx,
y: by,
width: bwidth,
height: bheight,
...boundingBoxCoordinate,
...boundingBoxDimensions,
};
if (shouldUseInpaintReplace) {
@ -134,7 +119,7 @@ export const frontendToBackendParameters = (
generationParameters.strength = img2imgStrength;
generationParameters.fit = false;
const maskDataURL = generateMask(maskImageElement, lines, boundingBox);
const maskDataURL = generateMask(maskImageElement, lines);
generationParameters.init_mask = maskDataURL.split(
'data:image/png;base64,'

4
frontend/src/features/gallery/CurrentImagePreview.tsx
View File

@ -62,11 +62,11 @@ export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
};
const handleClickPrevButton = () => {
dispatch(selectPrevImage(currentCategory));
dispatch(selectPrevImage());
};
const handleClickNextButton = () => {
dispatch(selectNextImage(currentCategory));
dispatch(selectNextImage());
};
return (

20
frontend/src/features/gallery/ImageGallery.tsx
View File

@ -147,21 +147,13 @@ export default function ImageGallery() {
[shouldShowGallery]
);
useHotkeys(
'left',
() => {
dispatch(selectPrevImage(currentCategory));
},
[currentCategory]
);
useHotkeys('left', () => {
dispatch(selectPrevImage());
});
useHotkeys(
'right',
() => {
dispatch(selectNextImage(currentCategory));
},
[currentCategory]
);
useHotkeys('right', () => {
dispatch(selectNextImage());
});
useHotkeys(
'shift+p',

6
frontend/src/features/gallery/gallerySlice.ts
View File

@ -154,8 +154,7 @@ export const gallerySlice = createSlice({
clearIntermediateImage: (state) => {
state.intermediateImage = undefined;
},
selectNextImage: (state, action: PayloadAction<GalleryCategory>) => {
const category = action.payload;
selectNextImage: (state) => {
const { currentImage } = state;
if (!currentImage) return;
const tempImages =
@ -172,8 +171,7 @@ export const gallerySlice = createSlice({
}
}
},
selectPrevImage: (state, action: PayloadAction<GalleryCategory>) => {
const category = action.payload;
selectPrevImage: (state) => {
const { currentImage } = state;
if (!currentImage) return;
const tempImages =

40
frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.tsx
View File

@ -1,7 +1,6 @@
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash';
import { ChangeEvent } from 'react';
import { BiReset } from 'react-icons/bi';
import {
@ -14,13 +13,11 @@ import IAIIconButton from '../../../../common/components/IAIIconButton';
import IAINumberInput from '../../../../common/components/IAINumberInput';
import IAISlider from '../../../../common/components/IAISlider';
import IAISwitch from '../../../../common/components/IAISwitch';
import { roundDownToMultiple } from '../../../../common/util/roundDownToMultiple';
import {
InpaintingState,
setBoundingBoxDimensions,
setShouldLockBoundingBox,
setShouldShowBoundingBox,
setShouldShowBoundingBoxFill,
} from '../../../tabs/Inpainting/inpaintingSlice';
@ -30,7 +27,6 @@ const boundingBoxDimensionsSelector = createSelector(
const {
canvasDimensions,
boundingBoxDimensions,
shouldShowBoundingBox,
shouldShowBoundingBoxFill,
pastLines,
futureLines,
@ -39,7 +35,6 @@ const boundingBoxDimensionsSelector = createSelector(
return {
canvasDimensions,
boundingBoxDimensions,
shouldShowBoundingBox,
shouldShowBoundingBoxFill,
pastLines,
futureLines,
@ -58,22 +53,28 @@ const BoundingBoxSettings = () => {
const {
canvasDimensions,
boundingBoxDimensions,
shouldShowBoundingBox,
shouldShowBoundingBoxFill,
shouldLockBoundingBox,
} = useAppSelector(boundingBoxDimensionsSelector);
const handleChangeBoundingBoxWidth = (v: number) => {
dispatch(setBoundingBoxDimensions({ ...boundingBoxDimensions, width: Math.floor(v) }));
dispatch(
setBoundingBoxDimensions({
...boundingBoxDimensions,
width: Math.floor(v),
})
);
};
const handleChangeBoundingBoxHeight = (v: number) => {
dispatch(setBoundingBoxDimensions({ ...boundingBoxDimensions, height: Math.floor(v) }));
dispatch(
setBoundingBoxDimensions({
...boundingBoxDimensions,
height: Math.floor(v),
})
);
};
const handleShowBoundingBox = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldShowBoundingBox(e.target.checked));
const handleChangeShouldShowBoundingBoxFill = () => {
dispatch(setShouldShowBoundingBoxFill(!shouldShowBoundingBoxFill));
};
@ -104,11 +105,6 @@ const BoundingBoxSettings = () => {
<div className="inpainting-bounding-box-settings">
<div className="inpainting-bounding-box-header">
<p>Inpaint Box</p>
<IAISwitch
isChecked={shouldShowBoundingBox}
width={'auto'}
onChange={handleShowBoundingBox}
/>
</div>
<div className="inpainting-bounding-box-settings-items">
<div className="inpainting-bounding-box-dimensions-slider-numberinput">
@ -119,7 +115,6 @@ const BoundingBoxSettings = () => {
step={64}
value={boundingBoxDimensions.width}
onChange={handleChangeBoundingBoxWidth}
isDisabled={!shouldShowBoundingBox}
width={'5rem'}
/>
<IAINumberInput
@ -128,7 +123,6 @@ const BoundingBoxSettings = () => {
min={64}
max={roundDownToMultiple(canvasDimensions.width, 64)}
step={64}
isDisabled={!shouldShowBoundingBox}
width={'5rem'}
/>
<IAIIconButton
@ -138,10 +132,7 @@ const BoundingBoxSettings = () => {
onClick={handleResetWidth}
icon={<BiReset />}
styleClass="inpainting-bounding-box-reset-icon-btn"
isDisabled={
!shouldShowBoundingBox ||
canvasDimensions.width === boundingBoxDimensions.width
}
isDisabled={canvasDimensions.width === boundingBoxDimensions.width}
/>
</div>
<div className="inpainting-bounding-box-dimensions-slider-numberinput">
@ -152,7 +143,6 @@ const BoundingBoxSettings = () => {
step={64}
value={boundingBoxDimensions.height}
onChange={handleChangeBoundingBoxHeight}
isDisabled={!shouldShowBoundingBox}
width={'5rem'}
/>
<IAINumberInput
@ -162,7 +152,6 @@ const BoundingBoxSettings = () => {
max={roundDownToMultiple(canvasDimensions.height, 64)}
step={64}
padding="0"
isDisabled={!shouldShowBoundingBox}
width={'5rem'}
/>
<IAIIconButton
@ -173,7 +162,6 @@ const BoundingBoxSettings = () => {
icon={<BiReset />}
styleClass="inpainting-bounding-box-reset-icon-btn"
isDisabled={
!shouldShowBoundingBox ||
canvasDimensions.height === boundingBoxDimensions.height
}
/>
@ -184,14 +172,12 @@ const BoundingBoxSettings = () => {
isChecked={shouldShowBoundingBoxFill}
onChange={handleChangeShouldShowBoundingBoxFill}
styleClass="inpainting-bounding-box-darken"
isDisabled={!shouldShowBoundingBox}
/>
<IAICheckbox
label="Lock Bounding Box"
isChecked={shouldLockBoundingBox}
onChange={handleChangeShouldLockBoundingBox}
styleClass="inpainting-bounding-box-darken"
isDisabled={!shouldShowBoundingBox}
/>
</Flex>
</div>

5
frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx
View File

@ -56,7 +56,6 @@ const InpaintingCanvas = () => {
shouldShowBoundingBoxFill,
isDrawing,
shouldLockBoundingBox,
shouldShowBoundingBox,
boundingBoxDimensions,
} = useAppSelector(inpaintingCanvasSelector);
@ -301,10 +300,10 @@ const InpaintingCanvas = () => {
)}
</Layer>
<Layer>
{shouldShowBoundingBox && shouldShowBoundingBoxFill && (
{shouldShowBoundingBoxFill && (
<InpaintingBoundingBoxPreviewOverlay />
)}
{shouldShowBoundingBox && <InpaintingBoundingBoxPreview />}
<InpaintingBoundingBoxPreview />
{shouldLockBoundingBox && (
<InpaintingCanvasBrushPreviewOutline />
)}

5
frontend/src/features/tabs/Inpainting/InpaintingControls.tsx
View File

@ -51,7 +51,6 @@ const InpaintingControls = () => {
isMaskEmpty,
activeTabName,
showDualDisplay,
shouldShowBoundingBox
} = useAppSelector(inpaintingControlsSelector);
const dispatch = useAppDispatch();
@ -161,9 +160,9 @@ const InpaintingControls = () => {
dispatch(toggleShouldLockBoundingBox());
},
{
enabled: activeTabName === 'inpainting' && shouldShowMask && shouldShowBoundingBox,
enabled: activeTabName === 'inpainting' && shouldShowMask,
},
[activeTabName, shouldShowMask, shouldShowBoundingBox]
[activeTabName, shouldShowMask]
);
// Undo

6
frontend/src/features/tabs/Inpainting/inpaintingSlice.ts
View File

@ -37,7 +37,6 @@ export interface InpaintingState {
boundingBoxDimensions: Dimensions;
boundingBoxCoordinate: Vector2d;
boundingBoxPreviewFill: RgbaColor;
shouldShowBoundingBox: boolean;
shouldShowBoundingBoxFill: boolean;
lines: MaskLine[];
pastLines: MaskLine[][];
@ -64,7 +63,6 @@ const initialInpaintingState: InpaintingState = {
boundingBoxDimensions: { width: 64, height: 64 },
boundingBoxCoordinate: { x: 0, y: 0 },
boundingBoxPreviewFill: { r: 0, g: 0, b: 0, a: 0.7 },
shouldShowBoundingBox: false,
shouldShowBoundingBoxFill: false,
cursorPosition: null,
lines: [],
@ -304,9 +302,6 @@ export const inpaintingSlice = createSlice({
setIsDrawing: (state, action: PayloadAction<boolean>) => {
state.isDrawing = action.payload;
},
setShouldShowBoundingBox: (state, action: PayloadAction<boolean>) => {
state.shouldShowBoundingBox = action.payload;
},
setClearBrushHistory: (state) => {
state.pastLines = [];
state.futureLines = [];
@ -352,7 +347,6 @@ export const {
setShouldShowBoundingBoxFill,
setIsDrawing,
setShouldShowBrush,
setShouldShowBoundingBox,
setClearBrushHistory,
setShouldUseInpaintReplace,
setInpaintReplace,

5
frontend/src/features/tabs/Inpainting/inpaintingSliceSelectors.ts
View File

@ -3,7 +3,6 @@ import _ from 'lodash';
import { RootState } from '../../../app/store';
import { activeTabNameSelector } from '../../options/optionsSelectors';
import { OptionsState } from '../../options/optionsSlice';
import { tabMap } from '../InvokeTabs';
import { InpaintingState } from './inpaintingSlice';
import { rgbaColorToRgbString } from './util/colorToString';
@ -36,7 +35,6 @@ export const inpaintingControlsSelector = createSelector(
pastLines,
futureLines,
shouldShowBoundingBoxFill,
shouldShowBoundingBox,
} = inpainting;
const { showDualDisplay } = options;
@ -54,7 +52,6 @@ export const inpaintingControlsSelector = createSelector(
activeTabName,
showDualDisplay,
shouldShowBoundingBoxFill,
shouldShowBoundingBox,
};
},
{
@ -79,7 +76,6 @@ export const inpaintingCanvasSelector = createSelector(
shouldShowBoundingBoxFill,
isDrawing,
shouldLockBoundingBox,
shouldShowBoundingBox,
boundingBoxDimensions,
} = inpainting;
return {
@ -94,7 +90,6 @@ export const inpaintingCanvasSelector = createSelector(
shouldShowBoundingBoxFill,
isDrawing,
shouldLockBoundingBox,
shouldShowBoundingBox,
boundingBoxDimensions,
};
},

7
frontend/src/features/tabs/Inpainting/util/generateMask.ts
View File

@ -1,5 +1,4 @@
import Konva from 'konva';
import { IRect } from 'konva/lib/types';
import { MaskLine } from '../inpaintingSlice';
/**
@ -12,11 +11,7 @@ import { MaskLine } from '../inpaintingSlice';
* drawing the mask and compositing everything correctly to output a valid
* mask image.
*/
const generateMask = (
image: HTMLImageElement,
lines: MaskLine[],
boundingBox: IRect
) => {
const generateMask = (image: HTMLImageElement, lines: MaskLine[]) => {
const { width, height } = image;
const offscreenContainer = document.createElement('div');