141 lines
3.9 KiB
TypeScript
141 lines
3.9 KiB
TypeScript
import { IconButton } from "@/app/components/button";
|
|
import GithubIcon from "@/app/icons/github.svg";
|
|
import SDIcon from "@/app/icons/sd.svg";
|
|
import ReturnIcon from "@/app/icons/return.svg";
|
|
import HistoryIcon from "@/app/icons/history.svg";
|
|
import Locale from "@/app/locales";
|
|
|
|
import { Path, REPO_URL } from "@/app/constant";
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
import dynamic from "next/dynamic";
|
|
import {
|
|
SideBarContainer,
|
|
SideBarBody,
|
|
SideBarHeader,
|
|
SideBarTail,
|
|
useDragSideBar,
|
|
useHotKey,
|
|
} from "@/app/components/sidebar";
|
|
|
|
import { getParams, getModelParamBasicData } from "./sd-panel";
|
|
import { useSdStore } from "@/app/store/sd";
|
|
import { showToast } from "@/app/components/ui-lib";
|
|
import { useMobileScreen } from "@/app/utils";
|
|
|
|
const SdPanel = dynamic(
|
|
async () => (await import("@/app/components/sd")).SdPanel,
|
|
{
|
|
loading: () => null,
|
|
},
|
|
);
|
|
|
|
export function SideBar(props: { className?: string }) {
|
|
useHotKey();
|
|
const isMobileScreen = useMobileScreen();
|
|
const { onDragStart, shouldNarrow } = useDragSideBar();
|
|
const navigate = useNavigate();
|
|
const sdStore = useSdStore();
|
|
const currentModel = sdStore.currentModel;
|
|
const params = sdStore.currentParams;
|
|
const setParams = sdStore.setCurrentParams;
|
|
|
|
const handleSubmit = () => {
|
|
const columns = getParams?.(currentModel, params);
|
|
const reqParams: any = {};
|
|
for (let i = 0; i < columns.length; i++) {
|
|
const item = columns[i];
|
|
reqParams[item.value] = params[item.value] ?? null;
|
|
if (item.required) {
|
|
if (!reqParams[item.value]) {
|
|
showToast(Locale.SdPanel.ParamIsRequired(item.name));
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
let data: any = {
|
|
model: currentModel.value,
|
|
model_name: currentModel.name,
|
|
status: "wait",
|
|
params: reqParams,
|
|
created_at: new Date().toLocaleString(),
|
|
img_data: "",
|
|
};
|
|
sdStore.sendTask(data, () => {
|
|
setParams(getModelParamBasicData(columns, params, true));
|
|
navigate(Path.SdNew);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<SideBarContainer
|
|
onDragStart={onDragStart}
|
|
shouldNarrow={shouldNarrow}
|
|
{...props}
|
|
>
|
|
{isMobileScreen ? (
|
|
<div
|
|
className="window-header"
|
|
data-tauri-drag-region
|
|
style={{
|
|
paddingLeft: 0,
|
|
paddingRight: 0,
|
|
}}
|
|
>
|
|
<div className="window-actions">
|
|
<div className="window-action-button">
|
|
<IconButton
|
|
icon={<ReturnIcon />}
|
|
bordered
|
|
title={Locale.Sd.Actions.ReturnHome}
|
|
onClick={() => navigate(Path.Home)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<SDIcon width={50} height={50} />
|
|
<div className="window-actions">
|
|
<div className="window-action-button">
|
|
<IconButton
|
|
icon={<HistoryIcon />}
|
|
bordered
|
|
title={Locale.Sd.Actions.History}
|
|
onClick={() => navigate(Path.SdNew)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<SideBarHeader
|
|
title={
|
|
<IconButton
|
|
icon={<ReturnIcon />}
|
|
bordered
|
|
title={Locale.Sd.Actions.ReturnHome}
|
|
onClick={() => navigate(Path.Home)}
|
|
/>
|
|
}
|
|
logo={<SDIcon width={38} height={"100%"} />}
|
|
></SideBarHeader>
|
|
)}
|
|
<SideBarBody>
|
|
<SdPanel />
|
|
</SideBarBody>
|
|
<SideBarTail
|
|
primaryAction={
|
|
<a href={REPO_URL} target="_blank" rel="noopener noreferrer">
|
|
<IconButton icon={<GithubIcon />} shadow />
|
|
</a>
|
|
}
|
|
secondaryAction={
|
|
<IconButton
|
|
text={Locale.SdPanel.Submit}
|
|
type="primary"
|
|
shadow
|
|
onClick={handleSubmit}
|
|
></IconButton>
|
|
}
|
|
/>
|
|
</SideBarContainer>
|
|
);
|
|
}
|