let5see/IOPaint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add mask rerun button

Browse Source
This commit is contained in:
Qing
2022-11-15 21:53:16 +08:00
parent d7c3149f67
commit c54950c05c
6 changed files with 70 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
lama_cleaner/app/src/components/Header/Header.tsx
View File

@@ -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 /> : <></>}