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