From 2e8e52f7a558e37f4bd507e6b2d1bf09203b0c27 Mon Sep 17 00:00:00 2001 From: Qing Date: Sun, 1 Jan 2023 22:36:11 +0800 Subject: [PATCH] update file manager --- lama_cleaner/app/src/App.tsx | 22 ++++- lama_cleaner/app/src/adapters/inpainting.ts | 27 +++++- .../components/FileManager/FileManager.tsx | 25 ++++-- .../app/src/components/Settings/Settings.scss | 4 - .../src/components/Settings/SettingsModal.tsx | 90 +------------------ lama_cleaner/app/src/store/Atoms.tsx | 14 ++- lama_cleaner/server.py | 9 ++ 7 files changed, 79 insertions(+), 112 deletions(-) diff --git a/lama_cleaner/app/src/App.tsx b/lama_cleaner/app/src/App.tsx index a4c665d..29ccd06 100644 --- a/lama_cleaner/app/src/App.tsx +++ b/lama_cleaner/app/src/App.tsx @@ -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 diff --git a/lama_cleaner/app/src/adapters/inpainting.ts b/lama_cleaner/app/src/adapters/inpainting.ts index 13c0021..5d202d5 100644 --- a/lama_cleaner/app/src/adapters/inpainting.ts +++ b/lama_cleaner/app/src/adapters/inpainting.ts @@ -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) +} diff --git a/lama_cleaner/app/src/components/FileManager/FileManager.tsx b/lama_cleaner/app/src/components/FileManager/FileManager.tsx index 2d820f0..857d3da 100644 --- a/lama_cleaner/app/src/components/FileManager/FileManager.tsx +++ b/lama_cleaner/app/src/components/FileManager/FileManager.tsx @@ -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([]) 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) diff --git a/lama_cleaner/app/src/components/Settings/Settings.scss b/lama_cleaner/app/src/components/Settings/Settings.scss index ec525c0..b181e73 100644 --- a/lama_cleaner/app/src/components/Settings/Settings.scss +++ b/lama_cleaner/app/src/components/Settings/Settings.scss @@ -17,10 +17,6 @@ margin-top: -11rem; animation: slideDown 0.2s ease-out; } - - .modal-header { - padding-left: 8px; - } } /* reset */ diff --git a/lama_cleaner/app/src/components/Settings/SettingsModal.tsx b/lama_cleaner/app/src/components/Settings/SettingsModal.tsx index 8a21f36..440a111 100644 --- a/lama_cleaner/app/src/components/Settings/SettingsModal.tsx +++ b/lama_cleaner/app/src/components/Settings/SettingsModal.tsx @@ -62,92 +62,10 @@ export default function SettingModal(props: SettingModalProps) { className="modal-setting" show={setting.show} > - - - - Model - - - File - - - - {isSD || isPaintByExample ? ( - <> - ) : ( - - )} - - {isSD ? <> : } - - - - { - setSettingState(old => { - return { ...old, enableFileManager: checked } - }) - }} - > - - - } - optionDesc={ -
-
- Image directory - ) => { - evt.preventDefault() - evt.stopPropagation() - const target = evt.target as HTMLInputElement - setSettingState(old => { - return { ...old, imageDirectory: target.value } - }) - }} - /> -
-
- Output directory - ) => { - evt.preventDefault() - evt.stopPropagation() - const target = evt.target as HTMLInputElement - setSettingState(old => { - return { ...old, outputDirectory: target.value } - }) - }} - /> -
-
- } - /> - - + + {isSD || isPaintByExample ? <> : } + + {isSD ? <> : } ) } diff --git a/lama_cleaner/app/src/store/Atoms.tsx b/lama_cleaner/app/src/store/Atoms.tsx index 4391ca4..f5566be 100644 --- a/lama_cleaner/app/src/store/Atoms.tsx +++ b/lama_cleaner/app/src/store/Atoms.tsx @@ -42,6 +42,7 @@ interface AppState { isInteractiveSegRunning: boolean interactiveSegClicks: number[][] showFileManager: boolean + enableFileManager: boolean } export const appState = atom({ @@ -55,6 +56,7 @@ export const appState = atom({ 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, diff --git a/lama_cleaner/server.py b/lama_cleaner/server.py index b14d4fb..663c345 100644 --- a/lama_cleaner/server.py +++ b/lama_cleaner/server.py @@ -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/") 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