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