got the inpainting mask sent to the server

ui/frontend/build_src/src/components/molecules/drawImage/index.tsx

@@ -14,6 +14,7 @@ interface DrawImageProps {
   brushShape: string;
   brushColor: string;
   isErasing: boolean;
+  setData: (data: string) => void;
 }
 
 export default function DrawImage({
@@ -22,6 +23,7 @@ export default function DrawImage({
   brushShape,
   brushColor,
   isErasing,
+  setData,
 }: DrawImageProps) {
   const drawingRef = useRef<HTMLCanvasElement>(null);
   const cursorRef = useRef<HTMLCanvasElement>(null);
@@ -74,7 +76,8 @@ export default function DrawImage({
     const canvas = drawingRef.current;
     if (canvas != null) {
       const data = canvas.toDataURL();
-      // TODO: SEND THIS TO THE STATE
+      debugger;
+      setData(data);
     }
   };
 

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx

@@ -50,6 +50,7 @@ export default function SeedImage(_props: any) {
   const _handleClearImage = () => {
     setRequestOption("init_image", undefined);
 
+    setRequestOption("mask", undefined);
     if (isInPaintingMode) {
       toggleInpainting();
     }
@@ -82,7 +83,7 @@ export default function SeedImage(_props: any) {
                 X
               </button>
             </div>
-            {/* <label>
+            <label>
               <input
                 type="checkbox"
                 onChange={(e) => {
@@ -91,7 +92,7 @@ export default function SeedImage(_props: any) {
                 checked={isInPaintingMode}
               ></input>
               {t("in-paint.txt")}
-            </label> */}
+            </label>
           </>
         )}
       </div>

ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx

@@ -11,7 +11,7 @@ import {
 
 export default function InpaintingPanel() {
   // no idea if this is the right typing
-  const drawingRef = useRef(null);
+  // const drawingRef = useRef(null);
 
   const [brushSize, setBrushSize] = useState("20");
   const [brushShape, setBrushShape] = useState("round");
@@ -22,6 +22,13 @@ export default function InpaintingPanel() {
     state.getValueForRequestKey("init_image")
   );
 
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const setMask = (data: string) => {
+    setRequestOption("mask", data);
+  }
+
+
   const _handleBrushMask = () => {
     setIsErasing(false);
   };
@@ -30,15 +37,6 @@ export default function InpaintingPanel() {
     setIsErasing(true);
   };
 
-  const _handleFillMask = () => {
-    console.log("fill mask!!", drawingRef);
-
-    // drawingRef.current?.fillCanvas();
-  };
-
-  const _handleClearAll = () => {
-    console.log("clear all");
-  };
 
   const _handleBrushSize = (event: ChangeEvent<HTMLInputElement>) => {
     setBrushSize(event.target.value);
@@ -53,17 +51,18 @@ export default function InpaintingPanel() {
         brushShape={brushShape}
         brushColor={brushColor}
         isErasing={isErasing}
+        setData={setMask}
       />
       <div className={InpaintingControls}>
         <div className={InpaintingControlRow}>
           <button onClick={_handleBrushMask}>Mask</button>
           <button onClick={_handleBrushErase}>Erase</button>
-          <button disabled onClick={_handleFillMask}>
+          {/* <button disabled onClick={_handleFillMask}>
             Fill
           </button>
           <button disabled onClick={_handleClearAll}>
             Clear
-          </button>
+          </button> */}
 
           <label>
             Brush Size
@@ -93,20 +92,20 @@ export default function InpaintingPanel() {
             Square Brush
           </button>
 
-          <button
+          {/* <button
             onClick={() => {
               setBrushColor("#000");
             }}
           >
             Dark Brush
-          </button>
-          <button
+          </button> */}
+          {/* <button
             onClick={() => {
               setBrushColor("#fff");
             }}
           >
             Light Brush
-          </button>
+          </button> */}
         </div>
       </div>
     </div>

ui/frontend/build_src/src/stores/imageCreateStore.ts

@@ -71,9 +71,11 @@ export interface ImageRequest {
   show_only_filtered_image: boolean;
   init_image: undefined | string;
   prompt_strength: undefined | number;
+  mask: undefined | string;
   sampler: typeof SAMPLER_OPTIONS[number];
   stream_progress_updates: true;
   stream_image_progress: boolean;
+
 }
 
 export interface ModifierPreview {
@@ -155,7 +157,8 @@ export const useImageCreate = create<ImageCreateState>(
       init_image: undefined,
       sampler: "plms",
       stream_progress_updates: true,
-      stream_image_progress: false
+      stream_image_progress: false,
+      mask: undefined,
     },
 
     // selected tags
@@ -217,15 +220,6 @@ export const useImageCreate = create<ImageCreateState>(
             state.tagMap[category] = [tag];
           }
 
-
-          // const index = state.tags.indexOf(tag);
-          // if (index > -1) {
-          //   state.tags.splice(index, 1);
-          // } else {
-          //   state.tags.push(tag);
-          // }
-
-
         })
       );
     },
@@ -307,7 +301,7 @@ export const useImageCreate = create<ImageCreateState>(
       ) {
         request.show_only_filtered_image = false;
       }
-
+      debugger;
       return request;
     },