add mask rerun button

lama_cleaner/app/src/components/Editor/Editor.tsx

@@ -1229,7 +1229,7 @@ export default function Editor() {
             onClick={download}
           />
 
-          {settings.runInpaintingManually && (
+          {settings.runInpaintingManually && !isSD && (
             <Button
               toolTip="Run Inpainting"
               tooltipPosition="top"

lama_cleaner/app/src/components/Header/Header.tsx

@@ -1,7 +1,13 @@
 import { ArrowLeftIcon, UploadIcon } from '@heroicons/react/outline'
+import { PlayIcon } from '@radix-ui/react-icons'
 import React, { useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { fileState, isInpaintingState, isSDState } from '../../store/Atoms'
+import {
+  fileState,
+  isInpaintingState,
+  isSDState,
+  maskState,
+} from '../../store/Atoms'
 import Button from '../shared/Button'
 import Shortcuts from '../Shortcuts/Shortcuts'
 import { ThemeChanger } from './ThemeChanger'
@@ -13,6 +19,7 @@ import emitter, { EVENT_CUSTOM_MASK } from '../../event'
 const Header = () => {
   const isInpainting = useRecoilValue(isInpaintingState)
   const [file, setFile] = useRecoilState(fileState)
+  const [mask, setMask] = useRecoilState(maskState)
   const [uploadElemId] = useState(`file-upload-${Math.random().toString()}`)
   const [maskUploadElemId] = useState(`mask-upload-${Math.random().toString()}`)
   const isSD = useRecoilValue(isSDState)
@@ -29,7 +36,11 @@ const Header = () => {
           }}
         >
           <label htmlFor={uploadElemId}>
-            <Button icon={<UploadIcon />} style={{ border: 0 }}>
+            <Button
+              icon={<UploadIcon />}
+              style={{ border: 0 }}
+              disabled={isInpainting}
+            >
               <input
                 style={{ display: 'none' }}
                 id={uploadElemId}
@@ -47,33 +58,51 @@ const Header = () => {
             </Button>
           </label>
 
-          <label
-            htmlFor={maskUploadElemId}
-            style={{ visibility: file ? 'visible' : 'hidden' }}
+          <div
+            style={{
+              visibility: file ? 'visible' : 'hidden',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
           >
-            <Button style={{ border: 0 }} disabled={isInpainting}>
-              <input
-                style={{ display: 'none' }}
-                id={maskUploadElemId}
-                name={maskUploadElemId}
-                type="file"
-                onClick={e => {
-                  const element = e.target as HTMLInputElement
-                  element.value = ''
-                }}
-                onChange={ev => {
-                  const newFile = ev.currentTarget.files?.[0]
-                  if (newFile) {
-                    // TODO: check mask size
-                    console.info('Send custom mask')
-                    emitter.emit(EVENT_CUSTOM_MASK, { mask: newFile })
-                  }
-                }}
-                accept="image/png, image/jpeg"
-              />
-              Mask
-            </Button>
-          </label>
+            <label htmlFor={maskUploadElemId}>
+              <Button style={{ border: 0 }} disabled={isInpainting}>
+                <input
+                  style={{ display: 'none' }}
+                  id={maskUploadElemId}
+                  name={maskUploadElemId}
+                  type="file"
+                  onClick={e => {
+                    const element = e.target as HTMLInputElement
+                    element.value = ''
+                  }}
+                  onChange={ev => {
+                    const newFile = ev.currentTarget.files?.[0]
+                    if (newFile) {
+                      // TODO: check mask size
+                      console.info('Send custom mask')
+                      emitter.emit(EVENT_CUSTOM_MASK, { mask: newFile })
+                      setMask(newFile)
+                    }
+                  }}
+                  accept="image/png, image/jpeg"
+                />
+                Mask
+              </Button>
+            </label>
+            <Button
+              style={{
+                visibility: mask ? 'visible' : 'hidden',
+              }}
+              icon={<PlayIcon />}
+              onClick={() => {
+                if (mask) {
+                  emitter.emit(EVENT_CUSTOM_MASK, { mask })
+                }
+              }}
+            />
+          </div>
         </div>
 
         {isSD && file ? <PromptInput /> : <></>}

lama_cleaner/app/src/store/Atoms.tsx

@@ -18,6 +18,11 @@ export const fileState = atom<File | undefined>({
   default: undefined,
 })
 
+export const maskState = atom<File | undefined>({
+  key: 'maskState',
+  default: undefined,
+})
+
 export interface Rect {
   x: number
   y: number