88 lines
1.8 KiB
TypeScript
88 lines
1.8 KiB
TypeScript
import { RotateCw, Image } from "lucide-react";
|
|
import { ActionIcon, Tooltip } from "@mantine/core";
|
|
import { useStore } from "../lib/states";
|
|
|
|
const Header = () => {
|
|
const [
|
|
file,
|
|
isInpainting,
|
|
model,
|
|
setFile,
|
|
runInpainting,
|
|
showPrevMask,
|
|
hidePrevMask,
|
|
] = useStore((state) => [
|
|
state.file,
|
|
state.isInpainting,
|
|
state.settings.model,
|
|
state.setFile,
|
|
state.runInpainting,
|
|
state.showPrevMask,
|
|
state.hidePrevMask,
|
|
]);
|
|
|
|
const handleRerunLastMask = () => {
|
|
runInpainting();
|
|
};
|
|
|
|
const onRerunMouseEnter = () => {
|
|
showPrevMask();
|
|
};
|
|
|
|
const onRerunMouseLeave = () => {
|
|
hidePrevMask();
|
|
};
|
|
|
|
return (
|
|
<header className="h-[60px] px-6 py-4 absolute top-[0] flex justify-between items-center w-full z-20 border-b backdrop-filter backdrop-blur-md">
|
|
<div className="flex items-center gap-1">
|
|
<Tooltip label="Upload image">
|
|
<ActionIcon
|
|
size={36}
|
|
variant="default"
|
|
disabled={isInpainting}
|
|
component="label"
|
|
>
|
|
<Image />
|
|
|
|
<input
|
|
className="hidden"
|
|
type="file"
|
|
onChange={(ev) => {
|
|
const newFile = ev.currentTarget.files?.[0];
|
|
if (newFile) {
|
|
setFile(newFile);
|
|
}
|
|
}}
|
|
accept="image/png, image/jpeg"
|
|
/>
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
|
|
{file && !model.need_prompt ? (
|
|
<Tooltip label="Rerun previous mask">
|
|
<ActionIcon
|
|
size={36}
|
|
variant="default"
|
|
disabled={isInpainting}
|
|
onClick={handleRerunLastMask}
|
|
onMouseEnter={onRerunMouseEnter}
|
|
onMouseLeave={onRerunMouseLeave}
|
|
>
|
|
<div className="icon-button-icon-wrapper">
|
|
<RotateCw />
|
|
</div>
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-1"></div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|