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,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 (
     <div className={ImageInputDisplay}>
@@ -63,10 +74,23 @@ export default function SeedImage(_props: any) {
       <div className={ImageFixer}>
         {init_image && (
           <>
-            <img src={init_image} width="100" height="100" />
-            <button className={XButton} onClick={_handleClearImage}>
-              X
-            </button>
+            <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,42 +106,51 @@ export default function DisplayPanel() {
   return (
     <div className={displayPanel}>
       <AudioDing ref={dingRef}></AudioDing>
-      {completedImages.length > 0 && (
-        <div className={displayContainer}>
-          <div className={CurrentDisplay}>
-            {/* TODO Put the in painting controls here */}
-            {/* <DrawImage imageData={completedImages[0].data}></DrawImage> */}
+      <div className={displayContainer}>
+        {isInPaintingMode &&
+          <DrawImage imageData={init_image}></DrawImage>
 
-            <GeneratedImage
-              key={completedImages[0].id}
-              imageData={completedImages[0].data}
-              metadata={completedImages[0].info}
-            />
-          </div>
+        }
 
-          <div className={previousImages}>
-            {completedImages.map((image, index) => {
-              if (void 0 !== image) {
-                if (index == 0) {
+        {completedImages.length > 0 && (
+          <>
+            <div className={CurrentDisplay}>
+
+
+
+              <GeneratedImage
+                key={completedImages[0].id}
+                imageData={completedImages[0].data}
+                metadata={completedImages[0].info}
+              />
+            </div>
+
+            <div className={previousImages}>
+              {completedImages.map((image, index) => {
+                if (void 0 !== image) {
+                  if (index == 0) {
+                    return null;
+                  }
+
+                  return (
+                    <GeneratedImage
+                      className={previousImage}
+                      key={image.id}
+                      imageData={image.data}
+                      metadata={image.info}
+                    />
+                  );
+                } else {
+                  console.warn("image is undefined", image, index);
                   return null;
                 }
+              })}
+            </div>
+          </>
+        )}
+
+      </div>
 
-                return (
-                  <GeneratedImage
-                    className={previousImage}
-                    key={image.id}
-                    imageData={image.data}
-                    metadata={image.info}
-                  />
-                );
-              } else {
-                console.warn("image is undefined", image, index);
-                return null;
-              }
-            })}
-          </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;
@@ -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<ImageCreateState>(
 
     allModifiers: [[[]]] as ModifiersOptionList,
 
+    isInpainting: false,
+
     setParallelCount: (count: number) =>
       set(
         produce((state) => {
@@ -217,7 +219,7 @@ export const useImageCreate = create<ImageCreateState>(
         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<ImageCreateState>(
     isSoundEnabled: () => {
       return get().uiOptions.isSoundEnabled;
     },
+
+    toggleInpainting: () => {
+      set(
+        produce((state) => {
+          state.isInpainting = !state.isInpainting;
+        })
+      );
+    }
+
   }))
 );