organized draw image

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,10 +42,17 @@ export default function SeedImage(_props: any) {
     }
   };
 
+  const toggleInpainting = useImageCreate((state) => state.toggleInpainting);
+
   const _handleClearImage = () => {
     setRequestOption("init_image", undefined);
+
+    if (isInPaintingMode) {
+      toggleInpainting();
     };
 
+  }
+
   return (
     <div className={ImageInputDisplay}>
       <div>
@@ -63,10 +74,23 @@ export default function SeedImage(_props: any) {
       <div className={ImageFixer}>
         {init_image && (
           <>
+            <div>
               <img src={init_image} width="100" height="100" />
               <button className={XButton} onClick={_handleClearImage}>
                 X
               </button>
+            </div>
+            <label>
+              <input
+                type="checkbox"
+                onChange={(e) => {
+                  toggleInpainting()
+                }}
+                checked={isInPaintingMode}
+              >
+              </input>
+              Use for Inpainting
+            </label>
           </>
         )}
       </div>

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<HTMLAudioElement>(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,11 +106,17 @@ export default function DisplayPanel() {
   return (
     <div className={displayPanel}>
       <AudioDing ref={dingRef}></AudioDing>
-      {completedImages.length > 0 && (
       <div className={displayContainer}>
+        {isInPaintingMode &&
+          <DrawImage imageData={init_image}></DrawImage>
+
+        }
+
+        {completedImages.length > 0 && (
+          <>
             <div className={CurrentDisplay}>
-            {/* TODO Put the in painting controls here */}
-            {/* <DrawImage imageData={completedImages[0].data}></DrawImage> */}
+
+
 
               <GeneratedImage
                 key={completedImages[0].id}
@@ -132,8 +146,11 @@ export default function DisplayPanel() {
                 }
               })}
             </div>
-        </div>
+          </>
         )}
+
+      </div>
+
     </div>
   );
 }

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;
@@ -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<ImageCreateState>(
 
     allModifiers: [[[]]] as ModifiersOptionList,
 
+    isInpainting: false,
+
     setParallelCount: (count: number) =>
       set(
         produce((state) => {
@@ -280,5 +282,14 @@ export const useImageCreate = create<ImageCreateState>(
     isSoundEnabled: () => {
       return get().uiOptions.isSoundEnabled;
     },
+
+    toggleInpainting: () => {
+      set(
+        produce((state) => {
+          state.isInpainting = !state.isInpainting;
+        })
+      );
+    }
+
   }))
 );