diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
index 58aeddaf..e004e447 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
@@ -18,6 +18,10 @@ export default function SeedImage(_props: any) {
const init_image = useImageCreate((state) =>
state.getValueForRequestKey("init_image")
);
+
+ const isInPaintingMode = useImageCreate((state) => state.isInpainting);
+
+
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const _startFileSelect = () => {
@@ -38,9 +42,16 @@ export default function SeedImage(_props: any) {
}
};
+ const toggleInpainting = useImageCreate((state) => state.toggleInpainting);
+
const _handleClearImage = () => {
setRequestOption("init_image", undefined);
- };
+
+ if (isInPaintingMode) {
+ toggleInpainting();
+ };
+
+ }
return (
@@ -63,10 +74,23 @@ export default function SeedImage(_props: any) {
{init_image && (
<>
-

-
+
+

+
+
+
>
)}
diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
index db498623..0891306d 100644
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
@@ -10,7 +10,7 @@ import { doMakeImage, MakeImageKey } from "../../../api";
import AudioDing from "./audioDing";
import GeneratedImage from "../../molecules/generatedImage";
-// import DrawImage from "../../molecules/drawImage";
+import DrawImage from "../../molecules/drawImage";
import {
displayPanel,
@@ -29,6 +29,9 @@ export default function DisplayPanel() {
const dingRef = useRef
(null);
const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
+ const isInPaintingMode = useImageCreate((state) => state.isInpainting);
+
+
/* FETCHING */
// @ts-ignore
const { id, options } = useImageQueue((state) => state.firstInQueue());
@@ -62,6 +65,11 @@ export default function DisplayPanel() {
);
const completedIds = useImageQueue((state) => state.completedImageIds);
+
+ const init_image = useImageCreate((state) =>
+ state.getValueForRequestKey("init_image")
+ );
+
useEffect(() => {
const testReq = {} as ImageRequest;
const completedQueries = completedIds.map((id) => {
@@ -98,42 +106,51 @@ export default function DisplayPanel() {
return (
- {completedImages.length > 0 && (
-
-
- {/* TODO Put the in painting controls here */}
- {/*
*/}
+
+ {isInPaintingMode &&
+
-
-
+ }
-
- {completedImages.map((image, index) => {
- if (void 0 !== image) {
- if (index == 0) {
+ {completedImages.length > 0 && (
+ <>
+
+
+
+
+
+
+
+
+ {completedImages.map((image, index) => {
+ if (void 0 !== image) {
+ if (index == 0) {
+ return null;
+ }
+
+ return (
+
+ );
+ } else {
+ console.warn("image is undefined", image, index);
return null;
}
+ })}
+
+ >
+ )}
+
+
- return (
-
- );
- } else {
- console.warn("image is undefined", image, index);
- return null;
- }
- })}
-
-
- )}
);
}
diff --git a/ui/frontend/build_src/src/stores/imageCreateStore.ts b/ui/frontend/build_src/src/stores/imageCreateStore.ts
index 18dde199..0422312a 100644
--- a/ui/frontend/build_src/src/stores/imageCreateStore.ts
+++ b/ui/frontend/build_src/src/stores/imageCreateStore.ts
@@ -5,8 +5,6 @@ import { devtools } from "zustand/middleware";
import { useRandomSeed } from "../utils";
export type ImageCreationUiOptions = {
- // isCheckedUseUpscaling: boolean;
- // isCheckUseFaceCorrection: boolean;
isUseRandomSeed: boolean;
isUseAutoSave: boolean;
isSoundEnabled: boolean;
@@ -19,37 +17,37 @@ export type ImageRequest = {
num_inference_steps: number;
guidance_scale: number;
width:
- | 128
- | 192
- | 256
- | 320
- | 384
- | 448
- | 512
- | 576
- | 640
- | 704
- | 768
- | 832
- | 896
- | 960
- | 1024;
+ | 128
+ | 192
+ | 256
+ | 320
+ | 384
+ | 448
+ | 512
+ | 576
+ | 640
+ | 704
+ | 768
+ | 832
+ | 896
+ | 960
+ | 1024;
height:
- | 128
- | 192
- | 256
- | 320
- | 384
- | 448
- | 512
- | 576
- | 640
- | 704
- | 768
- | 832
- | 896
- | 960
- | 1024;
+ | 128
+ | 192
+ | 256
+ | 320
+ | 384
+ | 448
+ | 512
+ | 576
+ | 640
+ | 704
+ | 768
+ | 832
+ | 896
+ | 960
+ | 1024;
// allow_nsfw: boolean;
turbo: boolean;
use_cpu: boolean;
@@ -71,6 +69,7 @@ interface ImageCreateState {
requestOptions: ImageRequest;
allModifiers: ModifiersOptionList;
tags: string[];
+ isInpainting: boolean;
setParallelCount: (count: number) => void;
setRequestOptions: (key: keyof ImageRequest, value: any) => void;
@@ -94,6 +93,7 @@ interface ImageCreateState {
isUseAutoSave: () => boolean;
toggleSoundEnabled: () => void;
isSoundEnabled: () => boolean;
+ toggleInpainting: () => void;
}
// devtools breaks TS
@@ -134,6 +134,8 @@ export const useImageCreate = create(
allModifiers: [[[]]] as ModifiersOptionList,
+ isInpainting: false,
+
setParallelCount: (count: number) =>
set(
produce((state) => {
@@ -217,7 +219,7 @@ export const useImageCreate = create(
produce((state) => {
const isSeting =
typeof state.getValueForRequestKey("use_face_correction") ===
- "string"
+ "string"
? null
: "GFPGANv1.3";
state.requestOptions.use_face_correction = isSeting;
@@ -280,5 +282,14 @@ export const useImageCreate = create(
isSoundEnabled: () => {
return get().uiOptions.isSoundEnabled;
},
+
+ toggleInpainting: () => {
+ set(
+ produce((state) => {
+ state.isInpainting = !state.isInpainting;
+ })
+ );
+ }
+
}))
);