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; + }) + ); + } + })) );