diff --git a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx index 1e8ba38e..65fc473d 100644 --- a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx +++ b/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(null); const cursorRef = useRef(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); } }; 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 4632f9b0..05aa8adb 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 @@ -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 - {/* )} diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx index 926bbcfd..8ba66dd2 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/inpaintingPanel/index.tsx +++ b/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) => { setBrushSize(event.target.value); @@ -53,17 +51,18 @@ export default function InpaintingPanel() { brushShape={brushShape} brushColor={brushColor} isErasing={isErasing} + setData={setMask} />
- + */}
diff --git a/ui/frontend/build_src/src/stores/imageCreateStore.ts b/ui/frontend/build_src/src/stores/imageCreateStore.ts index a696ac4a..564a0d28 100644 --- a/ui/frontend/build_src/src/stores/imageCreateStore.ts +++ b/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( 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( 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( ) { request.show_only_filtered_image = false; } - + debugger; return request; },