wip
This commit is contained in:
Qing
parent
7463a599a9
commit
43433c50eb
@ -1,7 +1,7 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||||
import { nanoid } from "nanoid"
|
||||
import { useRecoilState, useSetRecoilState } from "recoil"
|
||||
import { fileState, serverConfigState } from "@/lib/store"
|
||||
import { useSetRecoilState } from "recoil"
|
||||
import { serverConfigState } from "@/lib/store"
|
||||
import useInputImage from "@/hooks/useInputImage"
|
||||
import { keepGUIAlive } from "@/lib/utils"
|
||||
import { getServerConfig, isDesktop } from "@/lib/api"
|
||||
@ -9,6 +9,7 @@ import Header from "@/components/Header"
|
||||
import Workspace from "@/components/Workspace"
|
||||
import FileSelect from "@/components/FileSelect"
|
||||
import { Toaster } from "./components/ui/toaster"
|
||||
import { useStore } from "./lib/states"
|
||||
|
||||
const SUPPORTED_FILE_TYPE = [
|
||||
"image/jpeg",
|
||||
@ -18,13 +19,15 @@ const SUPPORTED_FILE_TYPE = [
|
||||
"image/tiff",
|
||||
]
|
||||
function Home() {
|
||||
const [file, setFile] = useRecoilState(fileState)
|
||||
const [file, setFile] = useStore((state) => [state.file, state.setFile])
|
||||
|
||||
const userInputImage = useInputImage()
|
||||
const setServerConfigState = useSetRecoilState(serverConfigState)
|
||||
|
||||
// Set Input Image
|
||||
useEffect(() => {
|
||||
if (userInputImage) {
|
||||
setFile(userInputImage)
|
||||
}
|
||||
}, [userInputImage, setFile])
|
||||
|
||||
// Keeping GUI Window Open
|
||||
|
||||
@ -1,15 +1,6 @@
|
||||
import React, {
|
||||
SyntheticEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react"
|
||||
import {
|
||||
CursorArrowRaysIcon,
|
||||
ArrowsPointingOutIcon,
|
||||
ArrowDownTrayIcon,
|
||||
} from "@heroicons/react/24/outline"
|
||||
import { SyntheticEvent, useCallback, useEffect, useRef, useState } from "react"
|
||||
import { CursorArrowRaysIcon } from "@heroicons/react/24/outline"
|
||||
import { useToast } from "@/components/ui/use-toast"
|
||||
import {
|
||||
ReactZoomPanPinchRef,
|
||||
TransformComponent,
|
||||
@ -19,7 +10,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
|
||||
import { useWindowSize } from "react-use"
|
||||
// import { useWindowSize, useKey, useKeyPressEvent } from "@uidotdev/usehooks"
|
||||
import inpaint, { downloadToOutput, runPlugin } from "@/lib/api"
|
||||
import { Button, IconButton } from "@/components/ui/button"
|
||||
import { IconButton } from "@/components/ui/button"
|
||||
import {
|
||||
askWritePermission,
|
||||
copyCanvasImage,
|
||||
@ -29,30 +20,22 @@ import {
|
||||
loadImage,
|
||||
srcToFile,
|
||||
} from "@/lib/utils"
|
||||
import { Eraser, Eye, Redo, Undo } from "lucide-react"
|
||||
import { Eraser, Eye, Redo, Undo, Expand, Download } from "lucide-react"
|
||||
import {
|
||||
appState,
|
||||
brushSizeState,
|
||||
croperState,
|
||||
enableFileManagerState,
|
||||
fileState,
|
||||
imageHeightState,
|
||||
imageWidthState,
|
||||
interactiveSegClicksState,
|
||||
isDiffusionModelsState,
|
||||
isEnableAutoSavingState,
|
||||
isInpaintingState,
|
||||
isInteractiveSegRunningState,
|
||||
isInteractiveSegState,
|
||||
isPix2PixState,
|
||||
isPluginRunningState,
|
||||
isProcessingState,
|
||||
negativePropmtState,
|
||||
propmtState,
|
||||
runManuallyState,
|
||||
seedState,
|
||||
settingState,
|
||||
toastState,
|
||||
} from "@/lib/store"
|
||||
// import Croper from "../Croper/Croper"
|
||||
import emitter, {
|
||||
@ -71,8 +54,9 @@ import { Slider } from "./ui/slider"
|
||||
// import InteractiveSegReplaceModal from "../InteractiveSeg/ReplaceModal"
|
||||
import { PluginName } from "@/lib/types"
|
||||
import { useHotkeys } from "react-hotkeys-hook"
|
||||
import { useStore } from "@/lib/states"
|
||||
|
||||
const TOOLBAR_SIZE = 200
|
||||
const TOOLBAR_HEIGHT = 200
|
||||
const MIN_BRUSH_SIZE = 10
|
||||
const MAX_BRUSH_SIZE = 200
|
||||
const BRUSH_COLOR = "#ffcc00bb"
|
||||
@ -110,15 +94,45 @@ function mouseXY(ev: SyntheticEvent) {
|
||||
return { x: mouseEvent.offsetX, y: mouseEvent.offsetY }
|
||||
}
|
||||
|
||||
export default function Editor() {
|
||||
const [file, setFile] = useRecoilState(fileState)
|
||||
const promptVal = useRecoilValue(propmtState)
|
||||
interface EditorProps {
|
||||
file: File
|
||||
}
|
||||
|
||||
export default function Editor(props: EditorProps) {
|
||||
const { file } = props
|
||||
const { toast } = useToast()
|
||||
|
||||
const [
|
||||
isInpainting,
|
||||
imageWidth,
|
||||
imageHeight,
|
||||
baseBrushSize,
|
||||
brushScale,
|
||||
promptVal,
|
||||
setImageSize,
|
||||
setBrushSize,
|
||||
setIsInpainting,
|
||||
] = useStore((state) => [
|
||||
state.isInpainting,
|
||||
state.imageWidth,
|
||||
state.imageHeight,
|
||||
state.brushSize,
|
||||
state.brushSizeScale,
|
||||
state.prompt,
|
||||
state.setImageSize,
|
||||
state.setBrushSize,
|
||||
state.setIsInpainting,
|
||||
])
|
||||
const brushSize = baseBrushSize * brushScale
|
||||
|
||||
// 纯 local state
|
||||
const [showOriginal, setShowOriginal] = useState(false)
|
||||
|
||||
//
|
||||
const negativePromptVal = useRecoilValue(negativePropmtState)
|
||||
const settings = useRecoilValue(settingState)
|
||||
const [seedVal, setSeed] = useRecoilState(seedState)
|
||||
const croperRect = useRecoilValue(croperState)
|
||||
const setToastState = useSetRecoilState(toastState)
|
||||
const [isInpainting, setIsInpainting] = useRecoilState(isInpaintingState)
|
||||
const setIsPluginRunning = useSetRecoilState(isPluginRunningState)
|
||||
const isProcessing = useRecoilValue(isProcessingState)
|
||||
const runMannually = useRecoilValue(runManuallyState)
|
||||
@ -152,8 +166,6 @@ export default function Editor() {
|
||||
|
||||
const [clicks, setClicks] = useRecoilState(interactiveSegClicksState)
|
||||
|
||||
const [brushSize, setBrushSize] = useRecoilState(brushSizeState)
|
||||
|
||||
const [original, isOriginalLoaded] = useImage(file)
|
||||
const [renders, setRenders] = useState<HTMLImageElement[]>([])
|
||||
const [context, setContext] = useState<CanvasRenderingContext2D>()
|
||||
@ -175,7 +187,6 @@ export default function Editor() {
|
||||
brushSize: 20,
|
||||
})
|
||||
|
||||
const [showOriginal, setShowOriginal] = useState(false)
|
||||
const [scale, setScale] = useState<number>(1)
|
||||
const [panned, setPanned] = useState<boolean>(false)
|
||||
const [minScale, setMinScale] = useState<number>(1.0)
|
||||
@ -198,10 +209,6 @@ export default function Editor() {
|
||||
const enableFileManager = useRecoilValue(enableFileManagerState)
|
||||
const isEnableAutoSaving = useRecoilValue(isEnableAutoSavingState)
|
||||
|
||||
const [imageWidth, setImageWidth] = useRecoilState(imageWidthState)
|
||||
const [imageHeight, setImageHeight] = useRecoilState(imageHeightState)
|
||||
const app = useRecoilValue(appState)
|
||||
|
||||
const draw = useCallback(
|
||||
(render: HTMLImageElement, lineGroup: LineGroup) => {
|
||||
if (!context) {
|
||||
@ -422,11 +429,10 @@ export default function Editor() {
|
||||
// clear redo stack
|
||||
resetRedoState()
|
||||
} catch (e: any) {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: e.message ? e.message : e.toString(),
|
||||
state: "error",
|
||||
duration: 4000,
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Uh oh! Something went wrong.",
|
||||
description: e.message ? e.message : e.toString(),
|
||||
})
|
||||
drawOnCurrentRender([])
|
||||
}
|
||||
@ -464,11 +470,9 @@ export default function Editor() {
|
||||
} else if (isPix2Pix) {
|
||||
runInpainting(false, undefined, null)
|
||||
} else {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: "Please draw mask on picture",
|
||||
state: "error",
|
||||
duration: 1500,
|
||||
toast({
|
||||
variant: "destructive",
|
||||
description: "Please draw mask on picture.",
|
||||
})
|
||||
}
|
||||
emitter.emit(DREAM_BUTTON_MOUSE_LEAVE)
|
||||
@ -554,11 +558,9 @@ export default function Editor() {
|
||||
// 使用上一次 IS 的 mask 生成
|
||||
runInpainting(false, undefined, prevInteractiveSegMask, data.image)
|
||||
} else {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: "Please draw mask on picture",
|
||||
state: "error",
|
||||
duration: 1500,
|
||||
toast({
|
||||
variant: "destructive",
|
||||
description: "Please draw mask on picture.",
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -577,11 +579,9 @@ export default function Editor() {
|
||||
// 使用上一次 IS 的 mask 生成
|
||||
runInpainting(false, undefined, prevInteractiveSegMask)
|
||||
} else {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: "No mask to reuse",
|
||||
state: "error",
|
||||
duration: 1500,
|
||||
toast({
|
||||
variant: "destructive",
|
||||
description: "No mask to reuse",
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -628,8 +628,7 @@ export default function Editor() {
|
||||
const { blob } = res
|
||||
const newRender = new Image()
|
||||
await loadImage(newRender, blob)
|
||||
setImageHeight(newRender.height)
|
||||
setImageWidth(newRender.width)
|
||||
setImageSize(newRender.height, newRender.width)
|
||||
const newRenders = [...renders, newRender]
|
||||
setRenders(newRenders)
|
||||
const newLineGroups = [...lineGroups, []]
|
||||
@ -638,15 +637,12 @@ export default function Editor() {
|
||||
const end = new Date()
|
||||
const time = end.getTime() - start.getTime()
|
||||
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: `Run ${name} successfully in ${time / 1000}s`,
|
||||
state: "success",
|
||||
duration: 3000,
|
||||
toast({
|
||||
description: `Run ${name} successfully in ${time / 1000}s`,
|
||||
})
|
||||
|
||||
const rW = windowSize.width / newRender.width
|
||||
const rH = (windowSize.height - TOOLBAR_SIZE) / newRender.height
|
||||
const rH = (windowSize.height - TOOLBAR_HEIGHT) / newRender.height
|
||||
let s = 1.0
|
||||
if (rW < 1 || rH < 1) {
|
||||
s = Math.min(rW, rH)
|
||||
@ -655,11 +651,9 @@ export default function Editor() {
|
||||
setScale(s)
|
||||
viewportRef.current?.centerView(s, 1)
|
||||
} catch (e: any) {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: e.message ? e.message : e.toString(),
|
||||
state: "error",
|
||||
duration: 3000,
|
||||
toast({
|
||||
variant: "destructive",
|
||||
description: e.message ? e.message : e.toString(),
|
||||
})
|
||||
} finally {
|
||||
setIsPluginRunning(false)
|
||||
@ -671,8 +665,7 @@ export default function Editor() {
|
||||
getCurrentRender,
|
||||
setIsPluginRunning,
|
||||
isProcessing,
|
||||
setImageHeight,
|
||||
setImageWidth,
|
||||
setImageSize,
|
||||
lineGroups,
|
||||
viewportRef,
|
||||
windowSize,
|
||||
@ -753,11 +746,10 @@ export default function Editor() {
|
||||
}
|
||||
|
||||
const [width, height] = getCurrentWidthHeight()
|
||||
setImageWidth(width)
|
||||
setImageHeight(height)
|
||||
setImageSize(width, height)
|
||||
|
||||
const rW = windowSize.width / width
|
||||
const rH = (windowSize.height - TOOLBAR_SIZE) / height
|
||||
const rH = (windowSize.height - TOOLBAR_HEIGHT) / height
|
||||
|
||||
let s = 1.0
|
||||
if (rW < 1 || rH < 1) {
|
||||
@ -950,11 +942,9 @@ export default function Editor() {
|
||||
}
|
||||
img.src = blob
|
||||
} catch (e: any) {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: e.message ? e.message : e.toString(),
|
||||
state: "error",
|
||||
duration: 4000,
|
||||
toast({
|
||||
variant: "destructive",
|
||||
description: e.message ? e.message : e.toString(),
|
||||
})
|
||||
}
|
||||
setIsInteractiveSegRunning(false)
|
||||
@ -1280,18 +1270,14 @@ export default function Editor() {
|
||||
if ((enableFileManager || isEnableAutoSaving) && renders.length > 0) {
|
||||
try {
|
||||
downloadToOutput(renders[renders.length - 1], file.name, file.type)
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: `Save image success`,
|
||||
state: "success",
|
||||
duration: 2000,
|
||||
toast({
|
||||
description: "Save image success",
|
||||
})
|
||||
} catch (e: any) {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: e.message ? e.message : e.toString(),
|
||||
state: "error",
|
||||
duration: 2000,
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Uh oh! Something went wrong.",
|
||||
description: e.message ? e.message : e.toString(),
|
||||
})
|
||||
}
|
||||
return
|
||||
@ -1439,6 +1425,15 @@ export default function Editor() {
|
||||
}
|
||||
}
|
||||
|
||||
const renderBrush = (style: any) => {
|
||||
return (
|
||||
<div
|
||||
className="absolute rounded-[50%] border-[1px] border-[solid] border-[#ffcc00] pointer-events-none bg-[#ffcc00bb]"
|
||||
style={style}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const handleSliderChange = (value: number) => {
|
||||
setBrushSize(value)
|
||||
|
||||
@ -1591,24 +1586,16 @@ export default function Editor() {
|
||||
{showBrush &&
|
||||
!isInpainting &&
|
||||
!isPanning &&
|
||||
(isInteractiveSeg ? (
|
||||
renderInteractiveSegCursor()
|
||||
) : (
|
||||
<div
|
||||
className="absolute rounded-[50%] border-[1px] border-[solid] pointer-events-none"
|
||||
style={getBrushStyle(
|
||||
(isInteractiveSeg
|
||||
? renderInteractiveSegCursor()
|
||||
: renderBrush(
|
||||
getBrushStyle(
|
||||
isChangingBrushSizeByMouse ? changeBrushSizeByMouseInit.x : x,
|
||||
isChangingBrushSizeByMouse ? changeBrushSizeByMouseInit.y : y
|
||||
)}
|
||||
/>
|
||||
)
|
||||
))}
|
||||
|
||||
{showRefBrush && (
|
||||
<div
|
||||
className="absolute rounded-[50%] border-[1px] border-[solid] pointer-events-none"
|
||||
style={getBrushStyle(windowCenterX, windowCenterY)}
|
||||
/>
|
||||
)}
|
||||
{showRefBrush && renderBrush(getBrushStyle(windowCenterX, windowCenterY))}
|
||||
|
||||
<div className="fixed flex bottom-10 border px-4 py-2 rounded-[3rem] gap-8 items-center justify-center backdrop-filter backdrop-blur-md">
|
||||
<Slider
|
||||
@ -1617,7 +1604,7 @@ export default function Editor() {
|
||||
min={MIN_BRUSH_SIZE}
|
||||
max={MAX_BRUSH_SIZE}
|
||||
step={1}
|
||||
value={[brushSize]}
|
||||
value={[baseBrushSize]}
|
||||
onValueChange={(vals) => handleSliderChange(vals[0])}
|
||||
onClick={() => setShowRefBrush(false)}
|
||||
/>
|
||||
@ -1627,7 +1614,7 @@ export default function Editor() {
|
||||
disabled={scale === minScale && panned === false}
|
||||
onClick={resetZoom}
|
||||
>
|
||||
<ArrowsPointingOutIcon />
|
||||
<Expand />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Undo" onClick={undo} disabled={disableUndo()}>
|
||||
<Undo />
|
||||
@ -1662,10 +1649,9 @@ export default function Editor() {
|
||||
disabled={!renders.length}
|
||||
onClick={download}
|
||||
>
|
||||
<ArrowDownTrayIcon />
|
||||
<Download />
|
||||
</IconButton>
|
||||
|
||||
{settings.runInpaintingManually && !isDiffusionModels && (
|
||||
<IconButton
|
||||
tooltip="Run Inpainting"
|
||||
disabled={
|
||||
@ -1679,7 +1665,6 @@ export default function Editor() {
|
||||
>
|
||||
<Eraser />
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* <InteractiveSegReplaceModal
|
||||
|
||||
@ -7,28 +7,16 @@ import {
|
||||
FormEvent,
|
||||
} from "react"
|
||||
import _ from "lodash"
|
||||
import { useRecoilState } from "recoil"
|
||||
import PhotoAlbum from "react-photo-album"
|
||||
import {
|
||||
BarsArrowDownIcon,
|
||||
BarsArrowUpIcon,
|
||||
FolderIcon,
|
||||
} from "@heroicons/react/24/outline"
|
||||
import { BarsArrowDownIcon, BarsArrowUpIcon } from "@heroicons/react/24/outline"
|
||||
import {
|
||||
MagnifyingGlassIcon,
|
||||
ViewHorizontalIcon,
|
||||
ViewGridIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
import { useDebounce, useToggle } from "react-use"
|
||||
import { useToggle } from "react-use"
|
||||
import { useDebounce } from "@uidotdev/usehooks"
|
||||
import FlexSearch from "flexsearch/dist/flexsearch.bundle.js"
|
||||
import {
|
||||
fileManagerLayout,
|
||||
fileManagerSearchText,
|
||||
fileManagerSortBy,
|
||||
fileManagerSortOrder,
|
||||
SortBy,
|
||||
SortOrder,
|
||||
} from "@/lib/store"
|
||||
import { useToast } from "@/components/ui/use-toast"
|
||||
import { API_ENDPOINT, getMedias } from "@/lib/api"
|
||||
import { IconButton } from "./ui/button"
|
||||
@ -45,6 +33,9 @@ import {
|
||||
import { ScrollArea } from "./ui/scroll-area"
|
||||
import { DialogTrigger } from "@radix-ui/react-dialog"
|
||||
import { useHotkeys } from "react-hotkeys-hook"
|
||||
import { useStore } from "@/lib/states"
|
||||
import { SortBy, SortOrder } from "@/lib/types"
|
||||
import { FolderClosed } from "lucide-react"
|
||||
|
||||
interface Photo {
|
||||
src: string
|
||||
@ -83,6 +74,20 @@ export default function FileManager(props: Props) {
|
||||
const { onPhotoClick, photoWidth } = props
|
||||
const [open, toggleOpen] = useToggle(false)
|
||||
|
||||
const [
|
||||
fileManagerState,
|
||||
setFileManagerLayout,
|
||||
setFileManagerSortBy,
|
||||
setFileManagerSortOrder,
|
||||
setFileManagerSearchText,
|
||||
] = useStore((state) => [
|
||||
state.fileManagerState,
|
||||
state.setFileManagerLayout,
|
||||
state.setFileManagerSortBy,
|
||||
state.setFileManagerSortOrder,
|
||||
state.setFileManagerSearchText,
|
||||
])
|
||||
|
||||
useHotkeys("f", () => {
|
||||
toggleOpen()
|
||||
})
|
||||
@ -91,25 +96,11 @@ export default function FileManager(props: Props) {
|
||||
const [scrollTop, setScrollTop] = useState(0)
|
||||
const [closeScrollTop, setCloseScrollTop] = useState(0)
|
||||
|
||||
const [sortBy, setSortBy] = useRecoilState<SortBy>(fileManagerSortBy)
|
||||
const [sortOrder, setSortOrder] = useRecoilState(fileManagerSortOrder)
|
||||
const [layout, setLayout] = useRecoilState(fileManagerLayout)
|
||||
const [debouncedSearchText, setDebouncedSearchText] = useRecoilState(
|
||||
fileManagerSearchText
|
||||
)
|
||||
const ref = useRef(null)
|
||||
const [searchText, setSearchText] = useState(debouncedSearchText)
|
||||
const debouncedSearchText = useDebounce(fileManagerState.searchText, 300)
|
||||
const [tab, setTab] = useState(IMAGE_TAB)
|
||||
const [photos, setPhotos] = useState<Photo[]>([])
|
||||
|
||||
const [, cancel] = useDebounce(
|
||||
() => {
|
||||
setDebouncedSearchText(searchText)
|
||||
},
|
||||
300,
|
||||
[searchText]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setCloseScrollTop(scrollTop)
|
||||
@ -153,7 +144,11 @@ export default function FileManager(props: Props) {
|
||||
)
|
||||
}
|
||||
|
||||
filteredFilenames = _.orderBy(filteredFilenames, sortBy, sortOrder)
|
||||
filteredFilenames = _.orderBy(
|
||||
filteredFilenames,
|
||||
fileManagerState.sortBy,
|
||||
fileManagerState.sortOrder
|
||||
)
|
||||
|
||||
const newPhotos = filteredFilenames.map((filename: Filename) => {
|
||||
const width = photoWidth
|
||||
@ -171,7 +166,7 @@ export default function FileManager(props: Props) {
|
||||
}
|
||||
}
|
||||
fetchData()
|
||||
}, [tab, debouncedSearchText, sortBy, sortOrder, photoWidth, open])
|
||||
}, [tab, debouncedSearchText, fileManagerState, photoWidth, open])
|
||||
|
||||
const onScroll = (event: SyntheticEvent) => {
|
||||
setScrollTop(event.currentTarget.scrollTop)
|
||||
@ -190,19 +185,21 @@ export default function FileManager(props: Props) {
|
||||
<IconButton
|
||||
tooltip="Rows layout"
|
||||
onClick={() => {
|
||||
setLayout("rows")
|
||||
setFileManagerLayout("rows")
|
||||
}}
|
||||
>
|
||||
<ViewHorizontalIcon
|
||||
className={layout !== "rows" ? "opacity-50" : ""}
|
||||
className={fileManagerState.layout !== "rows" ? "opacity-50" : ""}
|
||||
/>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
tooltip="Grid layout"
|
||||
onClick={() => {
|
||||
setLayout("masonry")
|
||||
setFileManagerLayout("masonry")
|
||||
}}
|
||||
className={layout !== "masonry" ? "opacity-50" : ""}
|
||||
className={
|
||||
fileManagerState.layout !== "masonry" ? "opacity-50" : ""
|
||||
}
|
||||
>
|
||||
<ViewGridIcon />
|
||||
</IconButton>
|
||||
@ -213,9 +210,9 @@ export default function FileManager(props: Props) {
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={toggleOpen}>
|
||||
<DialogTrigger>
|
||||
<DialogTrigger asChild>
|
||||
<IconButton tooltip="File Manager">
|
||||
<FolderIcon />
|
||||
<FolderClosed />
|
||||
</IconButton>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="h-4/5 max-w-6xl">
|
||||
@ -225,14 +222,14 @@ export default function FileManager(props: Props) {
|
||||
<MagnifyingGlassIcon className="absolute left-[8px]" />
|
||||
<Input
|
||||
ref={ref}
|
||||
value={searchText}
|
||||
value={fileManagerState.searchText}
|
||||
className="w-[250px] pl-[30px]"
|
||||
tabIndex={-1}
|
||||
onInput={(evt: FormEvent<HTMLInputElement>) => {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
const target = evt.target as HTMLInputElement
|
||||
setSearchText(target.value)
|
||||
setFileManagerSearchText(target.value)
|
||||
}}
|
||||
placeholder="Search by file name"
|
||||
/>
|
||||
@ -248,17 +245,17 @@ export default function FileManager(props: Props) {
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1">
|
||||
<Select
|
||||
value={SortByMap[sortBy]}
|
||||
value={SortByMap[fileManagerState.sortBy]}
|
||||
onValueChange={(val) => {
|
||||
switch (val) {
|
||||
case SORT_BY_NAME:
|
||||
setSortBy(SortBy.NAME)
|
||||
setFileManagerSortBy(SortBy.NAME)
|
||||
break
|
||||
case SORT_BY_CREATED_TIME:
|
||||
setSortBy(SortBy.CTIME)
|
||||
setFileManagerSortBy(SortBy.CTIME)
|
||||
break
|
||||
case SORT_BY_MODIFIED_TIME:
|
||||
setSortBy(SortBy.MTIME)
|
||||
setFileManagerSortBy(SortBy.MTIME)
|
||||
break
|
||||
default:
|
||||
break
|
||||
@ -279,11 +276,11 @@ export default function FileManager(props: Props) {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{sortOrder === SortOrder.DESCENDING ? (
|
||||
{fileManagerState.sortOrder === SortOrder.DESCENDING ? (
|
||||
<IconButton
|
||||
tooltip="Descending Order"
|
||||
onClick={() => {
|
||||
setSortOrder(SortOrder.ASCENDING)
|
||||
setFileManagerSortOrder(SortOrder.ASCENDING)
|
||||
}}
|
||||
>
|
||||
<BarsArrowDownIcon />
|
||||
@ -292,7 +289,7 @@ export default function FileManager(props: Props) {
|
||||
<IconButton
|
||||
tooltip="Ascending Order"
|
||||
onClick={() => {
|
||||
setSortOrder(SortOrder.DESCENDING)
|
||||
setFileManagerSortOrder(SortOrder.DESCENDING)
|
||||
}}
|
||||
>
|
||||
<BarsArrowUpIcon />
|
||||
@ -308,7 +305,7 @@ export default function FileManager(props: Props) {
|
||||
ref={onRefChange}
|
||||
>
|
||||
<PhotoAlbum
|
||||
layout={layout}
|
||||
layout={fileManagerState.layout}
|
||||
photos={photos}
|
||||
spacing={12}
|
||||
padding={0}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react"
|
||||
import { useState } from "react"
|
||||
import useResolution from "@/hooks/useResolution"
|
||||
|
||||
type FileSelectProps = {
|
||||
@ -34,10 +34,10 @@ export default function FileSelect(props: FileSelectProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute flex w-screen h-screen justify-center items-center ">
|
||||
<div className="absolute flex w-screen h-screen justify-center items-center pointer-events-none">
|
||||
<label
|
||||
htmlFor={uploadElemId}
|
||||
className="grid cursor-pointer border-[2px] border-[dashed] rounded-lg min-w-[600px] hover:cursor-pointer hover:bg-primary hover:text-primary-foreground"
|
||||
className="grid border-[2px] border-[dashed] rounded-lg min-w-[600px] hover:bg-primary hover:text-primary-foreground pointer-events-auto"
|
||||
>
|
||||
<div
|
||||
className="grid p-16 w-full h-full"
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
import { FolderIcon, PhotoIcon } from "@heroicons/react/24/outline"
|
||||
import { PlayIcon } from "@radix-ui/react-icons"
|
||||
import React, { useCallback, useState } from "react"
|
||||
import { useRecoilState, useRecoilValue } from "recoil"
|
||||
import { useHotkeys } from "react-hotkeys-hook"
|
||||
import {
|
||||
enableFileManagerState,
|
||||
fileState,
|
||||
isInpaintingState,
|
||||
isPix2PixState,
|
||||
isSDState,
|
||||
maskState,
|
||||
runManuallyState,
|
||||
showFileManagerState,
|
||||
} from "@/lib/store"
|
||||
import { Button, IconButton, ImageUploadButton } from "@/components/ui/button"
|
||||
import { IconButton, ImageUploadButton } from "@/components/ui/button"
|
||||
import Shortcuts from "@/components/Shortcuts"
|
||||
// import SettingIcon from "../Settings/SettingIcon"
|
||||
// import PromptInput from "./PromptInput"
|
||||
@ -28,15 +24,19 @@ import { useImage } from "@/hooks/useImage"
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
|
||||
import PromptInput from "./PromptInput"
|
||||
import { RotateCw } from "lucide-react"
|
||||
import { RotateCw, Image } from "lucide-react"
|
||||
import FileManager from "./FileManager"
|
||||
import { getMediaFile } from "@/lib/api"
|
||||
import { useStore } from "@/lib/states"
|
||||
|
||||
const Header = () => {
|
||||
const isInpainting = useRecoilValue(isInpaintingState)
|
||||
const [file, setFile] = useRecoilState(fileState)
|
||||
const [file, isInpainting, setFile] = useStore((state) => [
|
||||
state.file,
|
||||
state.isInpainting,
|
||||
state.setFile,
|
||||
])
|
||||
const [mask, setMask] = useRecoilState(maskState)
|
||||
const [maskImage, maskImageLoaded] = useImage(mask)
|
||||
// const [maskImage, maskImageLoaded] = useImage(mask)
|
||||
const isSD = useRecoilValue(isSDState)
|
||||
const isPix2Pix = useRecoilValue(isPix2PixState)
|
||||
const runManually = useRecoilValue(runManuallyState)
|
||||
@ -88,15 +88,13 @@ const Header = () => {
|
||||
setFile(file)
|
||||
}}
|
||||
>
|
||||
<PhotoIcon />
|
||||
<Image />
|
||||
</ImageUploadButton>
|
||||
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
visibility: file ? "visible" : "hidden",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<ImageUploadButton
|
||||
@ -133,13 +131,13 @@ const Header = () => {
|
||||
<PlayIcon />
|
||||
</IconButton>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
{/* <PopoverContent>
|
||||
{maskImageLoaded ? (
|
||||
<img src={maskImage.src} alt="Custom mask" />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</PopoverContent>
|
||||
</PopoverContent> */}
|
||||
</Popover>
|
||||
) : (
|
||||
<></>
|
||||
@ -159,13 +157,11 @@ const Header = () => {
|
||||
|
||||
{isSD ? <PromptInput /> : <></>}
|
||||
|
||||
<div className="header-icons-wrapper">
|
||||
{/* <CoffeeIcon /> */}
|
||||
<div className="header-icons">
|
||||
<div>
|
||||
<Shortcuts />
|
||||
{/* <SettingIcon /> */}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
20
web_app/src/components/ImageSize.tsx
Normal file
20
web_app/src/components/ImageSize.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { useStore } from "@/lib/states"
|
||||
|
||||
const ImageSize = () => {
|
||||
const [imageWidth, imageHeight] = useStore((state) => [
|
||||
state.imageWidth,
|
||||
state.imageHeight,
|
||||
])
|
||||
|
||||
if (!imageWidth || !imageHeight) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border rounded-lg px-2 py-[6px] z-10">
|
||||
{imageWidth}x{imageHeight}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImageSize
|
||||
131
web_app/src/components/Plugins.tsx
Normal file
131
web_app/src/components/Plugins.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from "./ui/dropdown-menu"
|
||||
import { Button } from "./ui/button"
|
||||
import { Fullscreen, MousePointerClick, Slice, Smile } from "lucide-react"
|
||||
import { MixIcon } from "@radix-ui/react-icons"
|
||||
|
||||
export enum PluginName {
|
||||
RemoveBG = "RemoveBG",
|
||||
AnimeSeg = "AnimeSeg",
|
||||
RealESRGAN = "RealESRGAN",
|
||||
GFPGAN = "GFPGAN",
|
||||
RestoreFormer = "RestoreFormer",
|
||||
InteractiveSeg = "InteractiveSeg",
|
||||
}
|
||||
|
||||
const pluginMap = {
|
||||
[PluginName.RemoveBG]: {
|
||||
IconClass: Slice,
|
||||
showName: "RemoveBG",
|
||||
},
|
||||
[PluginName.AnimeSeg]: {
|
||||
IconClass: Slice,
|
||||
showName: "Anime Segmentation",
|
||||
},
|
||||
[PluginName.RealESRGAN]: {
|
||||
IconClass: Fullscreen,
|
||||
showName: "RealESRGAN 4x",
|
||||
},
|
||||
[PluginName.GFPGAN]: {
|
||||
IconClass: Smile,
|
||||
showName: "GFPGAN",
|
||||
},
|
||||
[PluginName.RestoreFormer]: {
|
||||
IconClass: Smile,
|
||||
showName: "RestoreFormer",
|
||||
},
|
||||
[PluginName.InteractiveSeg]: {
|
||||
IconClass: MousePointerClick,
|
||||
showName: "Interactive Segmentation",
|
||||
},
|
||||
}
|
||||
|
||||
const Plugins = () => {
|
||||
// const [open, toggleOpen] = useToggle(true)
|
||||
// const serverConfig = useRecoilValue(serverConfigState)
|
||||
// const isProcessing = useRecoilValue(isProcessingState)
|
||||
const plugins = [
|
||||
PluginName.RemoveBG,
|
||||
PluginName.AnimeSeg,
|
||||
PluginName.RealESRGAN,
|
||||
PluginName.GFPGAN,
|
||||
PluginName.RestoreFormer,
|
||||
PluginName.InteractiveSeg,
|
||||
]
|
||||
|
||||
if (plugins.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const onPluginClick = (pluginName: string) => {
|
||||
// if (!disabled) {
|
||||
// emitter.emit(pluginName)
|
||||
// }
|
||||
}
|
||||
|
||||
const onRealESRGANClick = (upscale: number) => {
|
||||
// if (!disabled) {
|
||||
// emitter.emit(PluginName.RealESRGAN, { upscale })
|
||||
// }
|
||||
}
|
||||
|
||||
const renderRealESRGANPlugin = () => {
|
||||
return (
|
||||
<DropdownMenuSub key="RealESRGAN">
|
||||
<DropdownMenuSubTrigger>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Fullscreen />
|
||||
RealESRGAN
|
||||
</div>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem onClick={() => onRealESRGANClick(2)}>
|
||||
upscale 2x
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => onRealESRGANClick(4)}>
|
||||
upscale 4x
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
)
|
||||
}
|
||||
|
||||
const renderPlugins = () => {
|
||||
return plugins.map((plugin: PluginName) => {
|
||||
const { IconClass, showName } = pluginMap[plugin]
|
||||
if (plugin === PluginName.RealESRGAN) {
|
||||
return renderRealESRGANPlugin()
|
||||
}
|
||||
return (
|
||||
<DropdownMenuItem key={plugin} onClick={() => onPluginClick(plugin)}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<IconClass className="p-1" />
|
||||
{showName}
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger className="border rounded-lg z-10">
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<MixIcon className="p-2" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="bottom" align="start">
|
||||
{renderPlugins()}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export default Plugins
|
||||
@ -1,18 +1,19 @@
|
||||
import React, { FormEvent } from "react"
|
||||
import { useRecoilState, useRecoilValue } from "recoil"
|
||||
import emitter, {
|
||||
DREAM_BUTTON_MOUSE_ENTER,
|
||||
DREAM_BUTTON_MOUSE_LEAVE,
|
||||
EVENT_PROMPT,
|
||||
} from "@/lib/event"
|
||||
import { appState, isInpaintingState, propmtState } from "@/lib/store"
|
||||
import { Button } from "./ui/button"
|
||||
import { Input } from "./ui/input"
|
||||
import { useStore } from "@/lib/states"
|
||||
|
||||
const PromptInput = () => {
|
||||
const app = useRecoilValue(appState)
|
||||
const [prompt, setPrompt] = useRecoilState(propmtState)
|
||||
const isInpainting = useRecoilValue(isInpaintingState)
|
||||
const [isInpainting, prompt, setPrompt] = useStore((state) => [
|
||||
state.isInpainting,
|
||||
state.prompt,
|
||||
state.setPrompt,
|
||||
])
|
||||
|
||||
const handleOnInput = (evt: FormEvent<HTMLInputElement>) => {
|
||||
evt.preventDefault()
|
||||
@ -22,7 +23,7 @@ const PromptInput = () => {
|
||||
}
|
||||
|
||||
const handleRepaintClick = () => {
|
||||
if (prompt.length !== 0 && !app.isInpainting) {
|
||||
if (prompt.length !== 0 && isInpainting) {
|
||||
emitter.emit(EVENT_PROMPT)
|
||||
}
|
||||
}
|
||||
@ -53,7 +54,7 @@ const PromptInput = () => {
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleRepaintClick}
|
||||
disabled={prompt.length === 0 || app.isInpainting}
|
||||
disabled={prompt.length === 0 || isInpainting}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Keyboard } from "lucide-react"
|
||||
import useHotKey from "@/hooks/useHotkey"
|
||||
import { IconButton } from "@/components/ui/button"
|
||||
import { useToggle } from "@uidotdev/usehooks"
|
||||
import {
|
||||
@ -10,6 +9,7 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "./ui/dialog"
|
||||
import { useHotkeys } from "react-hotkeys-hook"
|
||||
|
||||
interface ShortcutProps {
|
||||
content: string
|
||||
@ -21,7 +21,7 @@ function ShortCut(props: ShortcutProps) {
|
||||
|
||||
return (
|
||||
<div className="flex justify-between">
|
||||
<div className="shortcut-description">{content}</div>
|
||||
<div>{content}</div>
|
||||
<div className="flex gap-[8px]">
|
||||
{keys.map((k) => (
|
||||
// TODO: 优化快捷键显示
|
||||
@ -49,13 +49,13 @@ const CmdOrCtrl = () => {
|
||||
export function Shortcuts() {
|
||||
const [open, toggleOpen] = useToggle(false)
|
||||
|
||||
useHotKey("h", () => {
|
||||
useHotkeys("h", () => {
|
||||
toggleOpen()
|
||||
})
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={toggleOpen}>
|
||||
<DialogTrigger>
|
||||
<DialogTrigger asChild>
|
||||
<IconButton tooltip="Hotkeys">
|
||||
<Keyboard />
|
||||
</IconButton>
|
||||
@ -63,7 +63,7 @@ export function Shortcuts() {
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Hotkeys</DialogTitle>
|
||||
<DialogDescription className="flex gap-2 flex-col pt-4">
|
||||
<div className="flex gap-2 flex-col pt-4">
|
||||
<ShortCut content="Pan" keys={["Space + Drag"]} />
|
||||
<ShortCut content="Reset Zoom/Pan" keys={["Esc"]} />
|
||||
<ShortCut content="Decrease Brush Size" keys={["["]} />
|
||||
@ -87,7 +87,7 @@ export function Shortcuts() {
|
||||
<ShortCut content="Toggle Hotkeys Dialog" keys={["H"]} />
|
||||
<ShortCut content="Toggle Settings Dialog" keys={["S"]} />
|
||||
<ShortCut content="Toggle File Manager" keys={["F"]} />
|
||||
</DialogDescription>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -1,36 +1,28 @@
|
||||
import React, { useEffect } from "react"
|
||||
import { useEffect } from "react"
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
|
||||
import Editor from "./Editor"
|
||||
// import SettingModal from "./Settings/SettingsModal"
|
||||
// import Toast from "./shared/Toast"
|
||||
import {
|
||||
AIModel,
|
||||
fileState,
|
||||
isPaintByExampleState,
|
||||
isPix2PixState,
|
||||
isSDState,
|
||||
settingState,
|
||||
showFileManagerState,
|
||||
toastState,
|
||||
} from "@/lib/store"
|
||||
import {
|
||||
currentModel,
|
||||
getMediaFile,
|
||||
modelDownloaded,
|
||||
switchModel,
|
||||
} from "@/lib/api"
|
||||
import { currentModel, modelDownloaded, switchModel } from "@/lib/api"
|
||||
import { useStore } from "@/lib/states"
|
||||
import ImageSize from "./ImageSize"
|
||||
import Plugins from "./Plugins"
|
||||
// import SidePanel from "./SidePanel/SidePanel"
|
||||
// import PESidePanel from "./SidePanel/PESidePanel"
|
||||
// import FileManager from "./FileManager/FileManager"
|
||||
// import P2PSidePanel from "./SidePanel/P2PSidePanel"
|
||||
// import Plugins from "./Plugins/Plugins"
|
||||
// import Flex from "./shared/Layout"
|
||||
// import ImageSize from "./ImageSize/ImageSize"
|
||||
|
||||
const Workspace = () => {
|
||||
const setFile = useSetRecoilState(fileState)
|
||||
const file = useStore((state) => state.file)
|
||||
const [settings, setSettingState] = useRecoilState(settingState)
|
||||
const [toastVal, setToastState] = useRecoilState(toastState)
|
||||
const isSD = useRecoilValue(isSDState)
|
||||
const isPaintByExample = useRecoilValue(isPaintByExampleState)
|
||||
const isPix2Pix = useRecoilValue(isPix2PixState)
|
||||
@ -53,33 +45,34 @@ const Workspace = () => {
|
||||
loadingDuration = 9999999999
|
||||
}
|
||||
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: loadingMessage,
|
||||
state: "loading",
|
||||
duration: loadingDuration,
|
||||
})
|
||||
// TODO 修改成 Modal
|
||||
// setToastState({
|
||||
// open: true,
|
||||
// desc: loadingMessage,
|
||||
// state: "loading",
|
||||
// duration: loadingDuration,
|
||||
// })
|
||||
|
||||
switchModel(model)
|
||||
.then((res) => {
|
||||
if (res.ok) {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: `Switch to ${model} model success`,
|
||||
state: "success",
|
||||
duration: 3000,
|
||||
})
|
||||
// setToastState({
|
||||
// open: true,
|
||||
// desc: `Switch to ${model} model success`,
|
||||
// state: "success",
|
||||
// duration: 3000,
|
||||
// })
|
||||
} else {
|
||||
throw new Error("Server error")
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setToastState({
|
||||
open: true,
|
||||
desc: `Switch to ${model} model failed`,
|
||||
state: "error",
|
||||
duration: 3000,
|
||||
})
|
||||
// setToastState({
|
||||
// open: true,
|
||||
// desc: `Switch to ${model} model failed`,
|
||||
// state: "error",
|
||||
// duration: 3000,
|
||||
// })
|
||||
setSettingState((old) => {
|
||||
return { ...old, model: curModel as AIModel }
|
||||
})
|
||||
@ -101,12 +94,12 @@ const Workspace = () => {
|
||||
{/* {isSD ? <SidePanel /> : <></>}
|
||||
{isPaintByExample ? <PESidePanel /> : <></>}
|
||||
{isPix2Pix ? <P2PSidePanel /> : <></>}
|
||||
<Flex style={{ position: "absolute", top: 68, left: 24, gap: 12 }}>
|
||||
{/* <SettingModal onClose={onSettingClose} /> */}
|
||||
<div className="flex gap-3 absolute top-[68px] left-[24px] items-center">
|
||||
<Plugins />
|
||||
<ImageSize />
|
||||
</Flex>
|
||||
{/* <SettingModal onClose={onSettingClose} /> */}
|
||||
<Editor />
|
||||
</div>
|
||||
{file ? <Editor file={file} /> : <></>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -65,15 +65,22 @@ export interface IconButtonProps extends ButtonProps {
|
||||
tooltip: string
|
||||
}
|
||||
|
||||
const IconButton = (props: IconButtonProps) => {
|
||||
const { tooltip, children, ...rest } = props
|
||||
const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
|
||||
({ tooltip, children, ...rest }, ref) => {
|
||||
return (
|
||||
<>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" {...rest} asChild>
|
||||
<div className="p-[8px]">{children}</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
{...rest}
|
||||
ref={ref}
|
||||
tabIndex={-1}
|
||||
className="cursor-default"
|
||||
>
|
||||
<div className="icon-button-icon-wrapper">{children}</div>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
@ -84,6 +91,7 @@ const IconButton = (props: IconButtonProps) => {
|
||||
</>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export interface UploadButtonProps extends IconButtonProps {
|
||||
onFileUpload: (file: File) => void
|
||||
@ -106,7 +114,9 @@ const ImageUploadButton = (props: UploadButtonProps) => {
|
||||
return (
|
||||
<>
|
||||
<label htmlFor={uploadElemId}>
|
||||
<IconButton {...rest}>{children}</IconButton>
|
||||
<IconButton {...rest} asChild>
|
||||
{children}
|
||||
</IconButton>
|
||||
</label>
|
||||
<Input
|
||||
style={{ display: "none" }}
|
||||
|
||||
@ -39,6 +39,7 @@ const DialogContent = React.forwardRef<
|
||||
"fixed left-[50%] top-[50%] z-50 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
onCloseAutoFocus={(event) => event.preventDefault()}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
||||
203
web_app/src/components/ui/dropdown-menu.tsx
Normal file
203
web_app/src/components/ui/dropdown-menu.tsx
Normal file
@ -0,0 +1,203 @@
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
DotFilledIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<DotFilledIcon className="h-4 w-4 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
}
|
||||
@ -26,6 +26,11 @@
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
|
||||
.icon-button-icon-wrapper svg {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
import { Options, useHotkeys } from "react-hotkeys-hook"
|
||||
import { useRecoilValue } from "recoil"
|
||||
import { appState } from "@/lib/store"
|
||||
|
||||
const useHotKey = (
|
||||
keys: string,
|
||||
callback: any,
|
||||
options?: Options,
|
||||
deps?: any[]
|
||||
) => {
|
||||
const app = useRecoilValue(appState)
|
||||
|
||||
const ref = useHotkeys(
|
||||
keys,
|
||||
callback,
|
||||
{ ...options, enabled: !app.disableShortCuts },
|
||||
deps
|
||||
)
|
||||
return ref
|
||||
}
|
||||
|
||||
export default useHotKey
|
||||
@ -1,11 +1,11 @@
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
function useImage(file?: File): [HTMLImageElement, boolean] {
|
||||
function useImage(file: File | null): [HTMLImageElement, boolean] {
|
||||
const [image] = useState(new Image())
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (file === undefined) {
|
||||
if (!file) {
|
||||
return
|
||||
}
|
||||
image.onload = () => {
|
||||
|
||||
@ -2,7 +2,7 @@ import { API_ENDPOINT } from "@/lib/api"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
|
||||
export default function useInputImage() {
|
||||
const [inputImage, setInputImage] = useState<File>()
|
||||
const [inputImage, setInputImage] = useState<File | null>(null)
|
||||
|
||||
const fetchInputImage = useCallback(() => {
|
||||
const headers = new Headers()
|
||||
|
||||
2
web_app/src/lib/const.ts
Normal file
2
web_app/src/lib/const.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export const ACCENT_COLOR = "#ffcc00bb"
|
||||
export const DEFAULT_BRUSH_SIZE = 40
|
||||
118
web_app/src/lib/states.ts
Normal file
118
web_app/src/lib/states.ts
Normal file
@ -0,0 +1,118 @@
|
||||
import { create, StoreApi, UseBoundStore } from "zustand"
|
||||
import { persist } from "zustand/middleware"
|
||||
import { immer } from "zustand/middleware/immer"
|
||||
import { SortBy, SortOrder } from "./types"
|
||||
import { DEFAULT_BRUSH_SIZE } from "./const"
|
||||
|
||||
type FileManagerState = {
|
||||
sortBy: SortBy
|
||||
sortOrder: SortOrder
|
||||
layout: "rows" | "masonry"
|
||||
searchText: string
|
||||
}
|
||||
|
||||
type AppState = {
|
||||
file: File | null
|
||||
imageHeight: number
|
||||
imageWidth: number
|
||||
brushSize: number
|
||||
brushSizeScale: number
|
||||
|
||||
isInpainting: boolean
|
||||
isInteractiveSeg: boolean // 是否正处于 sam 状态
|
||||
isInteractiveSegRunning: boolean
|
||||
interactiveSegClicks: number[][]
|
||||
|
||||
prompt: string
|
||||
|
||||
fileManagerState: FileManagerState
|
||||
}
|
||||
|
||||
type AppAction = {
|
||||
setFile: (file: File) => void
|
||||
setIsInpainting: (newValue: boolean) => void
|
||||
setBrushSize: (newValue: number) => void
|
||||
setImageSize: (width: number, height: number) => void
|
||||
setFileManagerSortBy: (newValue: SortBy) => void
|
||||
setFileManagerSortOrder: (newValue: SortOrder) => void
|
||||
setFileManagerLayout: (
|
||||
newValue: AppState["fileManagerState"]["layout"]
|
||||
) => void
|
||||
setFileManagerSearchText: (newValue: string) => void
|
||||
setPrompt: (newValue: string) => void
|
||||
}
|
||||
|
||||
export const useStore = create<AppState & AppAction>()(
|
||||
immer(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
file: null,
|
||||
imageHeight: 0,
|
||||
imageWidth: 0,
|
||||
brushSize: DEFAULT_BRUSH_SIZE,
|
||||
brushSizeScale: 1,
|
||||
isInpainting: false,
|
||||
isInteractiveSeg: false,
|
||||
isInteractiveSegRunning: false,
|
||||
interactiveSegClicks: [],
|
||||
prompt: "",
|
||||
fileManagerState: {
|
||||
sortBy: SortBy.CTIME,
|
||||
sortOrder: SortOrder.DESCENDING,
|
||||
layout: "masonry",
|
||||
searchText: "",
|
||||
},
|
||||
setIsInpainting: (newValue: boolean) =>
|
||||
set((state: AppState) => {
|
||||
state.isInpainting = newValue
|
||||
}),
|
||||
setFile: (file: File) =>
|
||||
set((state: AppState) => {
|
||||
// TODO: 清空各种状态
|
||||
state.file = file
|
||||
}),
|
||||
setBrushSize: (newValue: number) =>
|
||||
set((state: AppState) => {
|
||||
state.brushSize = newValue
|
||||
}),
|
||||
setImageSize: (width: number, height: number) => {
|
||||
// 根据图片尺寸调整 brushSize 的 scale
|
||||
set((state: AppState) => {
|
||||
state.imageWidth = width
|
||||
state.imageHeight = height
|
||||
state.brushSizeScale = Math.max(Math.min(width, height), 512) / 512
|
||||
})
|
||||
},
|
||||
setPrompt: (newValue: string) =>
|
||||
set((state: AppState) => {
|
||||
state.prompt = newValue
|
||||
}),
|
||||
setFileManagerSortBy: (newValue: SortBy) =>
|
||||
set((state: AppState) => {
|
||||
state.fileManagerState.sortBy = newValue
|
||||
}),
|
||||
setFileManagerSortOrder: (newValue: SortOrder) =>
|
||||
set((state: AppState) => {
|
||||
state.fileManagerState.sortOrder = newValue
|
||||
}),
|
||||
setFileManagerLayout: (newValue: "rows" | "masonry") =>
|
||||
set((state: AppState) => {
|
||||
state.fileManagerState.layout = newValue
|
||||
}),
|
||||
setFileManagerSearchText: (newValue: string) =>
|
||||
set((state: AppState) => {
|
||||
state.fileManagerState.searchText = newValue
|
||||
}),
|
||||
}),
|
||||
{
|
||||
name: "ZUSTAND_STATE", // name of the item in the storage (must be unique)
|
||||
partialize: (state) =>
|
||||
Object.fromEntries(
|
||||
Object.entries(state).filter(([key]) =>
|
||||
["fileManagerState", "prompt"].includes(key)
|
||||
)
|
||||
),
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
@ -1,23 +1,6 @@
|
||||
import { atom, selector } from "recoil"
|
||||
import _ from "lodash"
|
||||
|
||||
export enum HDStrategy {
|
||||
ORIGINAL = "Original",
|
||||
RESIZE = "Resize",
|
||||
CROP = "Crop",
|
||||
}
|
||||
|
||||
export enum LDMSampler {
|
||||
ddim = "ddim",
|
||||
plms = "plms",
|
||||
}
|
||||
|
||||
function strEnum<T extends string>(o: Array<T>): { [K in T]: K } {
|
||||
return o.reduce((res, key) => {
|
||||
res[key] = key
|
||||
return res
|
||||
}, Object.create(null))
|
||||
}
|
||||
import { CV2Flag, HDStrategy, LDMSampler, ModelsHDSettings } from "./types"
|
||||
|
||||
export enum AIModel {
|
||||
LAMA = "lama",
|
||||
@ -75,18 +58,12 @@ export interface Rect {
|
||||
}
|
||||
|
||||
interface AppState {
|
||||
file: File | undefined
|
||||
imageHeight: number
|
||||
imageWidth: number
|
||||
disableShortCuts: boolean
|
||||
isInpainting: boolean
|
||||
isDisableModelSwitch: boolean
|
||||
isEnableAutoSaving: boolean
|
||||
isInteractiveSeg: boolean
|
||||
isInteractiveSegRunning: boolean
|
||||
interactiveSegClicks: number[][]
|
||||
enableFileManager: boolean
|
||||
brushSize: number
|
||||
isControlNet: boolean
|
||||
controlNetMethod: string
|
||||
plugins: string[]
|
||||
@ -96,18 +73,12 @@ interface AppState {
|
||||
export const appState = atom<AppState>({
|
||||
key: "appState",
|
||||
default: {
|
||||
file: undefined,
|
||||
imageHeight: 0,
|
||||
imageWidth: 0,
|
||||
disableShortCuts: false,
|
||||
isInpainting: false,
|
||||
isDisableModelSwitch: false,
|
||||
isEnableAutoSaving: false,
|
||||
isInteractiveSeg: false,
|
||||
isInteractiveSegRunning: false,
|
||||
interactiveSegClicks: [],
|
||||
enableFileManager: false,
|
||||
brushSize: 40,
|
||||
isControlNet: false,
|
||||
controlNetMethod: ControlNetMethod.canny,
|
||||
plugins: [],
|
||||
@ -115,28 +86,11 @@ export const appState = atom<AppState>({
|
||||
},
|
||||
})
|
||||
|
||||
export const propmtState = atom<string>({
|
||||
key: "promptState",
|
||||
default: "",
|
||||
})
|
||||
|
||||
export const negativePropmtState = atom<string>({
|
||||
key: "negativePromptState",
|
||||
default: "",
|
||||
})
|
||||
|
||||
export const isInpaintingState = selector({
|
||||
key: "isInpainting",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.isInpainting
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, isInpainting: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const isPluginRunningState = selector({
|
||||
key: "isPluginRunningState",
|
||||
get: ({ get }) => {
|
||||
@ -175,42 +129,6 @@ export const serverConfigState = selector({
|
||||
},
|
||||
})
|
||||
|
||||
export const brushSizeState = selector({
|
||||
key: "brushSizeState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.brushSize
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, brushSize: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const imageHeightState = selector({
|
||||
key: "imageHeightState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.imageHeight
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, imageHeight: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const imageWidthState = selector({
|
||||
key: "imageWidthState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.imageWidth
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, imageWidth: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const enableFileManagerState = selector({
|
||||
key: "enableFileManagerState",
|
||||
get: ({ get }) => {
|
||||
@ -223,30 +141,6 @@ export const enableFileManagerState = selector({
|
||||
},
|
||||
})
|
||||
|
||||
export const fileState = selector({
|
||||
key: "fileState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.file
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, {
|
||||
...app,
|
||||
file: newValue,
|
||||
interactiveSegClicks: [],
|
||||
isInteractiveSeg: false,
|
||||
isInteractiveSegRunning: false,
|
||||
})
|
||||
|
||||
const setting = get(settingState)
|
||||
set(settingState, {
|
||||
...setting,
|
||||
sdScale: 100,
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
export const isInteractiveSegState = selector({
|
||||
key: "isInteractiveSegState",
|
||||
get: ({ get }) => {
|
||||
@ -275,9 +169,7 @@ export const isProcessingState = selector({
|
||||
key: "isProcessingState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return (
|
||||
app.isInteractiveSegRunning || app.isPluginRunning || app.isInpainting
|
||||
)
|
||||
return app.isInteractiveSegRunning || app.isPluginRunning
|
||||
},
|
||||
})
|
||||
|
||||
@ -339,20 +231,6 @@ export const croperState = atom<Rect>({
|
||||
},
|
||||
})
|
||||
|
||||
export const SIDE_PANEL_TAB = strEnum(["inpainting", "outpainting"])
|
||||
export type SIDE_PANEL_TAB_TYPE = keyof typeof SIDE_PANEL_TAB
|
||||
|
||||
export interface SidePanelState {
|
||||
tab: SIDE_PANEL_TAB_TYPE
|
||||
}
|
||||
|
||||
export const sidePanelTabState = atom<SidePanelState>({
|
||||
key: "sidePanelTabState",
|
||||
default: {
|
||||
tab: SIDE_PANEL_TAB.inpainting,
|
||||
},
|
||||
})
|
||||
|
||||
export const croperX = selector({
|
||||
key: "croperX",
|
||||
get: ({ get }) => get(croperState).x,
|
||||
@ -435,43 +313,6 @@ export const extenderWidth = selector({
|
||||
},
|
||||
})
|
||||
|
||||
interface ToastAtomState {
|
||||
open: boolean
|
||||
desc: string
|
||||
state: ToastState
|
||||
duration: number
|
||||
}
|
||||
|
||||
export const toastState = atom<ToastAtomState>({
|
||||
key: "toastState",
|
||||
default: {
|
||||
open: false,
|
||||
desc: "",
|
||||
state: "default",
|
||||
duration: 3000,
|
||||
},
|
||||
})
|
||||
|
||||
export const shortcutsState = atom<boolean>({
|
||||
key: "shortcutsState",
|
||||
default: false,
|
||||
})
|
||||
|
||||
export interface HDSettings {
|
||||
hdStrategy: HDStrategy
|
||||
hdStrategyResizeLimit: number
|
||||
hdStrategyCropTrigerSize: number
|
||||
hdStrategyCropMargin: number
|
||||
enabled: boolean
|
||||
}
|
||||
|
||||
type ModelsHDSettings = { [key in AIModel]: HDSettings }
|
||||
|
||||
export enum CV2Flag {
|
||||
INPAINT_NS = "INPAINT_NS",
|
||||
INPAINT_TELEA = "INPAINT_TELEA",
|
||||
}
|
||||
|
||||
export interface Settings {
|
||||
show: boolean
|
||||
showCroper: boolean
|
||||
@ -490,7 +331,6 @@ export interface Settings {
|
||||
|
||||
// For SD
|
||||
sdMaskBlur: number
|
||||
sdMode: SDMode
|
||||
sdStrength: number
|
||||
sdSteps: number
|
||||
sdGuidanceScale: number
|
||||
@ -656,7 +496,6 @@ export const settingStateDefault: Settings = {
|
||||
|
||||
// SD
|
||||
sdMaskBlur: 5,
|
||||
sdMode: SDMode.inpainting,
|
||||
sdStrength: 0.75,
|
||||
sdSteps: 50,
|
||||
sdGuidanceScale: 7.5,
|
||||
@ -819,70 +658,3 @@ export const isDiffusionModelsState = selector({
|
||||
return isSD || isPaintByExample || isPix2Pix
|
||||
},
|
||||
})
|
||||
|
||||
export enum SortBy {
|
||||
NAME = "name",
|
||||
CTIME = "ctime",
|
||||
MTIME = "mtime",
|
||||
}
|
||||
|
||||
export enum SortOrder {
|
||||
DESCENDING = "desc",
|
||||
ASCENDING = "asc",
|
||||
}
|
||||
|
||||
interface FileManagerState {
|
||||
sortBy: SortBy
|
||||
sortOrder: SortOrder
|
||||
layout: "rows" | "masonry"
|
||||
searchText: string
|
||||
}
|
||||
|
||||
const FILE_MANAGER_STATE_KEY = "fileManagerState"
|
||||
|
||||
export const fileManagerState = atom<FileManagerState>({
|
||||
key: FILE_MANAGER_STATE_KEY,
|
||||
default: {
|
||||
sortBy: SortBy.CTIME,
|
||||
sortOrder: SortOrder.DESCENDING,
|
||||
layout: "masonry",
|
||||
searchText: "",
|
||||
},
|
||||
effects: [localStorageEffect(FILE_MANAGER_STATE_KEY)],
|
||||
})
|
||||
|
||||
export const fileManagerSortBy = selector({
|
||||
key: "fileManagerSortBy",
|
||||
get: ({ get }) => get(fileManagerState).sortBy,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const val = get(fileManagerState)
|
||||
set(fileManagerState, { ...val, sortBy: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const fileManagerSortOrder = selector({
|
||||
key: "fileManagerSortOrder",
|
||||
get: ({ get }) => get(fileManagerState).sortOrder,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const val = get(fileManagerState)
|
||||
set(fileManagerState, { ...val, sortOrder: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const fileManagerLayout = selector({
|
||||
key: "fileManagerLayout",
|
||||
get: ({ get }) => get(fileManagerState).layout,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const val = get(fileManagerState)
|
||||
set(fileManagerState, { ...val, layout: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const fileManagerSearchText = selector({
|
||||
key: "fileManagerSearchText",
|
||||
get: ({ get }) => get(fileManagerState).searchText,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const val = get(fileManagerState)
|
||||
set(fileManagerState, { ...val, searchText: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
@ -6,3 +6,40 @@ export enum PluginName {
|
||||
RestoreFormer = "RestoreFormer",
|
||||
InteractiveSeg = "InteractiveSeg",
|
||||
}
|
||||
|
||||
export enum SortBy {
|
||||
NAME = "name",
|
||||
CTIME = "ctime",
|
||||
MTIME = "mtime",
|
||||
}
|
||||
|
||||
export enum SortOrder {
|
||||
DESCENDING = "desc",
|
||||
ASCENDING = "asc",
|
||||
}
|
||||
|
||||
export enum HDStrategy {
|
||||
ORIGINAL = "Original",
|
||||
RESIZE = "Resize",
|
||||
CROP = "Crop",
|
||||
}
|
||||
|
||||
export enum LDMSampler {
|
||||
ddim = "ddim",
|
||||
plms = "plms",
|
||||
}
|
||||
|
||||
export enum CV2Flag {
|
||||
INPAINT_NS = "INPAINT_NS",
|
||||
INPAINT_TELEA = "INPAINT_TELEA",
|
||||
}
|
||||
|
||||
export interface HDSettings {
|
||||
hdStrategy: HDStrategy
|
||||
hdStrategyResizeLimit: number
|
||||
hdStrategyCropTrigerSize: number
|
||||
hdStrategyCropMargin: number
|
||||
enabled: boolean
|
||||
}
|
||||
|
||||
export type ModelsHDSettings = { [key in AIModel]: HDSettings }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user