update file manager
This commit is contained in:
parent
39397fc829
commit
2e8e52f7a5
@ -5,11 +5,20 @@ import useInputImage from './hooks/useInputImage'
|
||||
import LandingPage from './components/LandingPage/LandingPage'
|
||||
import { themeState } from './components/Header/ThemeChanger'
|
||||
import Workspace from './components/Workspace'
|
||||
import { fileState, isDisableModelSwitchState, toastState } from './store/Atoms'
|
||||
import {
|
||||
enableFileManagerState,
|
||||
fileState,
|
||||
isDisableModelSwitchState,
|
||||
toastState,
|
||||
} from './store/Atoms'
|
||||
import { keepGUIAlive } from './utils'
|
||||
import Header from './components/Header/Header'
|
||||
import useHotKey from './hooks/useHotkey'
|
||||
import { getIsDisableModelSwitch, isDesktop } from './adapters/inpainting'
|
||||
import {
|
||||
getEnableFileManager,
|
||||
getIsDisableModelSwitch,
|
||||
isDesktop,
|
||||
} from './adapters/inpainting'
|
||||
|
||||
const SUPPORTED_FILE_TYPE = [
|
||||
'image/jpeg',
|
||||
@ -27,6 +36,9 @@ function App() {
|
||||
const [isDisableModelSwitch, setIsDisableModelSwitch] = useRecoilState(
|
||||
isDisableModelSwitchState
|
||||
)
|
||||
const [enableFileManager, setEnableFileManager] = useRecoilState(
|
||||
enableFileManagerState
|
||||
)
|
||||
|
||||
// Set Input Image
|
||||
useEffect(() => {
|
||||
@ -53,6 +65,12 @@ function App() {
|
||||
}
|
||||
|
||||
fetchData()
|
||||
|
||||
const fetchData2 = async () => {
|
||||
const isEnabled = await getEnableFileManager().then(res => res.text())
|
||||
setEnableFileManager(isEnabled === 'true')
|
||||
}
|
||||
fetchData2()
|
||||
}, [])
|
||||
|
||||
// Dark Mode Hotkey
|
||||
|
@ -110,6 +110,12 @@ export function getIsDisableModelSwitch() {
|
||||
})
|
||||
}
|
||||
|
||||
export function getEnableFileManager() {
|
||||
return fetch(`${API_ENDPOINT}/is_enable_file_manager`, {
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
|
||||
export function switchModel(name: string) {
|
||||
const fd = new FormData()
|
||||
fd.append('name', name)
|
||||
@ -166,9 +172,12 @@ export async function postInteractiveSeg(
|
||||
}
|
||||
|
||||
export async function getMediaFile(filename: string) {
|
||||
const res = await fetch(`${API_ENDPOINT}/media/${filename}`, {
|
||||
method: 'GET',
|
||||
})
|
||||
const res = await fetch(
|
||||
`${API_ENDPOINT}/media/${encodeURIComponent(filename)}`,
|
||||
{
|
||||
method: 'GET',
|
||||
}
|
||||
)
|
||||
if (res.ok) {
|
||||
const blob = await res.blob()
|
||||
const file = new File([blob], filename)
|
||||
@ -177,3 +186,15 @@ export async function getMediaFile(filename: string) {
|
||||
const errMsg = await res.text()
|
||||
throw new Error(errMsg)
|
||||
}
|
||||
|
||||
export async function getMedias() {
|
||||
const res = await fetch(`${API_ENDPOINT}/medias`, {
|
||||
method: 'GET',
|
||||
})
|
||||
if (res.ok) {
|
||||
const filenames = await res.json()
|
||||
return filenames
|
||||
}
|
||||
const errMsg = await res.text()
|
||||
throw new Error(errMsg)
|
||||
}
|
||||
|
@ -4,12 +4,13 @@ import React, {
|
||||
useMemo,
|
||||
useState,
|
||||
useCallback,
|
||||
useRef,
|
||||
} from 'react'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import PhotoAlbum, { RenderPhoto } from 'react-photo-album'
|
||||
import * as ScrollArea from '@radix-ui/react-scroll-area'
|
||||
import Modal from '../shared/Modal'
|
||||
import Button from '../shared/Button'
|
||||
import { toastState } from '../../store/Atoms'
|
||||
import { getMedias } from '../../adapters/inpainting'
|
||||
|
||||
interface Photo {
|
||||
src: string
|
||||
@ -54,6 +55,7 @@ export default function FileManager(props: Props) {
|
||||
const [filenames, setFileNames] = useState<Filename[]>([])
|
||||
const [scrollTop, setScrollTop] = useState(0)
|
||||
const [closeScrollTop, setCloseScrollTop] = useState(0)
|
||||
const [toastVal, setToastState] = useRecoilState(toastState)
|
||||
|
||||
useEffect(() => {
|
||||
if (!show) {
|
||||
@ -81,15 +83,22 @@ export default function FileManager(props: Props) {
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const res = await fetch('/medias')
|
||||
if (res.ok) {
|
||||
const newFilenames = await res.json()
|
||||
try {
|
||||
const newFilenames = await getMedias()
|
||||
setFileNames(newFilenames)
|
||||
} catch (e: any) {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: e.message ? e.message : e.toString(),
|
||||
state: 'error',
|
||||
duration: 2000,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
fetchData()
|
||||
}, [])
|
||||
if (show) {
|
||||
fetchData()
|
||||
}
|
||||
}, [show])
|
||||
|
||||
const onScroll = (event: SyntheticEvent) => {
|
||||
setScrollTop(event.currentTarget.scrollTop)
|
||||
|
@ -17,10 +17,6 @@
|
||||
margin-top: -11rem;
|
||||
animation: slideDown 0.2s ease-out;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* reset */
|
||||
|
@ -62,92 +62,10 @@ export default function SettingModal(props: SettingModalProps) {
|
||||
className="modal-setting"
|
||||
show={setting.show}
|
||||
>
|
||||
<Tabs.Root
|
||||
className="TabsRoot"
|
||||
defaultValue="tab1"
|
||||
orientation="vertical"
|
||||
>
|
||||
<Tabs.List className="TabsList">
|
||||
<Tabs.Trigger className="TabsTrigger" value="tab1">
|
||||
Model
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger className="TabsTrigger" value="tab2">
|
||||
File
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content className="TabsContent" value="tab1">
|
||||
{isSD || isPaintByExample ? (
|
||||
<></>
|
||||
) : (
|
||||
<ManualRunInpaintingSettingBlock />
|
||||
)}
|
||||
<ModelSettingBlock />
|
||||
{isSD ? <></> : <HDSettingBlock />}
|
||||
</Tabs.Content>
|
||||
<Tabs.Content className="TabsContent" value="tab2">
|
||||
<DownloadMaskSettingBlock />
|
||||
<SettingBlock
|
||||
title="File Manager"
|
||||
desc="Toggle File Manager"
|
||||
input={
|
||||
<Switch
|
||||
checked={setting.enableFileManager}
|
||||
onCheckedChange={checked => {
|
||||
setSettingState(old => {
|
||||
return { ...old, enableFileManager: checked }
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SwitchThumb />
|
||||
</Switch>
|
||||
}
|
||||
optionDesc={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
<div className="folder-path-block">
|
||||
<span>Image directory</span>
|
||||
<TextInput
|
||||
disabled={!setting.enableFileManager}
|
||||
value={setting.imageDirectory}
|
||||
placeholder="Image directory"
|
||||
className="folder-path"
|
||||
onInput={(evt: FormEvent<HTMLInputElement>) => {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
const target = evt.target as HTMLInputElement
|
||||
setSettingState(old => {
|
||||
return { ...old, imageDirectory: target.value }
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="folder-path-block">
|
||||
<span>Output directory</span>
|
||||
<TextInput
|
||||
disabled={!setting.enableFileManager}
|
||||
value={setting.outputDirectory}
|
||||
placeholder="Output directory"
|
||||
className="folder-path"
|
||||
onInput={(evt: FormEvent<HTMLInputElement>) => {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
const target = evt.target as HTMLInputElement
|
||||
setSettingState(old => {
|
||||
return { ...old, outputDirectory: target.value }
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
<DownloadMaskSettingBlock />
|
||||
{isSD || isPaintByExample ? <></> : <ManualRunInpaintingSettingBlock />}
|
||||
<ModelSettingBlock />
|
||||
{isSD ? <></> : <HDSettingBlock />}
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
@ -42,6 +42,7 @@ interface AppState {
|
||||
isInteractiveSegRunning: boolean
|
||||
interactiveSegClicks: number[][]
|
||||
showFileManager: boolean
|
||||
enableFileManager: boolean
|
||||
}
|
||||
|
||||
export const appState = atom<AppState>({
|
||||
@ -55,6 +56,7 @@ export const appState = atom<AppState>({
|
||||
isInteractiveSegRunning: false,
|
||||
interactiveSegClicks: [],
|
||||
showFileManager: false,
|
||||
enableFileManager: false,
|
||||
},
|
||||
})
|
||||
|
||||
@ -95,12 +97,12 @@ export const showFileManagerState = selector({
|
||||
export const enableFileManagerState = selector({
|
||||
key: 'enableFileManagerState',
|
||||
get: ({ get }) => {
|
||||
const app = get(settingState)
|
||||
const app = get(appState)
|
||||
return app.enableFileManager
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(settingState)
|
||||
set(settingState, { ...app, enableFileManager: newValue })
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, enableFileManager: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
@ -257,9 +259,6 @@ export interface Settings {
|
||||
show: boolean
|
||||
showCroper: boolean
|
||||
downloadMask: boolean
|
||||
enableFileManager: boolean
|
||||
imageDirectory: string
|
||||
outputDirectory: string
|
||||
graduallyInpainting: boolean
|
||||
runInpaintingManually: boolean
|
||||
model: AIModel
|
||||
@ -388,9 +387,6 @@ export enum SDMode {
|
||||
export const settingStateDefault: Settings = {
|
||||
show: false,
|
||||
showCroper: false,
|
||||
enableFileManager: false,
|
||||
imageDirectory: '',
|
||||
outputDirectory: '',
|
||||
downloadMask: false,
|
||||
graduallyInpainting: true,
|
||||
runInpaintingManually: false,
|
||||
|
@ -80,6 +80,7 @@ interactive_seg_model: InteractiveSeg = None
|
||||
device = None
|
||||
input_image_path: str = None
|
||||
is_disable_model_switch: bool = False
|
||||
is_enable_file_manager: bool = False
|
||||
is_desktop: bool = False
|
||||
|
||||
|
||||
@ -273,6 +274,12 @@ def get_is_disable_model_switch():
|
||||
return res, 200
|
||||
|
||||
|
||||
@app.route("/is_enable_file_manager")
|
||||
def get_is_enable_file_manager():
|
||||
res = 'true' if is_enable_file_manager else 'false'
|
||||
return res, 200
|
||||
|
||||
|
||||
@app.route("/model_downloaded/<name>")
|
||||
def model_downloaded(name):
|
||||
return str(model.is_downloaded(name)), 200
|
||||
@ -325,6 +332,7 @@ def main(args):
|
||||
global device
|
||||
global input_image_path
|
||||
global is_disable_model_switch
|
||||
global is_enable_file_manager
|
||||
global is_desktop
|
||||
|
||||
device = torch.device(args.device)
|
||||
@ -336,6 +344,7 @@ def main(args):
|
||||
if os.path.isdir(args.input):
|
||||
app.config["THUMBNAIL_MEDIA_ROOT"] = args.input
|
||||
app.config["THUMBNAIL_MEDIA_THUMBNAIL_ROOT"] = os.path.join(args.output_dir, 'thumbnails')
|
||||
is_enable_file_manager = True
|
||||
else:
|
||||
input_image_path = args.input
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user