145 lines
4.1 KiB
TypeScript
145 lines
4.1 KiB
TypeScript
import { IconButton } from '@/app/components/button';
|
|
import {
|
|
SideBarBody,
|
|
SideBarContainer,
|
|
SideBarHeader,
|
|
SideBarTail,
|
|
useDragSideBar,
|
|
useHotKey,
|
|
} from '@/app/components/sidebar';
|
|
import { showToast } from '@/app/components/ui-lib';
|
|
import { Path, REPO_URL } from '@/app/constant';
|
|
import GithubIcon from '@/app/icons/github.svg';
|
|
import HistoryIcon from '@/app/icons/history.svg';
|
|
|
|
import ReturnIcon from '@/app/icons/return.svg';
|
|
|
|
import SDIcon from '@/app/icons/sd.svg';
|
|
import Locale from '@/app/locales';
|
|
import { useSdStore } from '@/app/store/sd';
|
|
|
|
import { useMobileScreen } from '@/app/utils';
|
|
import dynamic from 'next/dynamic';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { getModelParamBasicData, getParams } from './sd-panel';
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
const 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>
|
|
);
|
|
}
|