111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import { GPUStackVersionAtom } from '@/atoms/user';
|
|
import { getAtomStorage } from '@/atoms/utils';
|
|
import HighlightCode from '@/components/highlight-code';
|
|
import { BulbOutlined, WarningOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Radio } from 'antd';
|
|
import React from 'react';
|
|
import { addWorkerGuide, containerInstallOptions } from '../config';
|
|
import './styles/installation.less';
|
|
|
|
type ViewModalProps = {
|
|
token: string;
|
|
};
|
|
|
|
const AddWorker: React.FC<ViewModalProps> = (props) => {
|
|
const intl = useIntl();
|
|
|
|
const origin = window.location.origin;
|
|
const [activeKey, setActiveKey] = React.useState('cuda');
|
|
const versionInfo = getAtomStorage(GPUStackVersionAtom);
|
|
|
|
const code = React.useMemo(() => {
|
|
let version = versionInfo?.version;
|
|
if (!version || !versionInfo.isProduction) {
|
|
version = 'main';
|
|
}
|
|
|
|
const commandCode = addWorkerGuide[activeKey];
|
|
|
|
if (activeKey === 'cuda') {
|
|
return commandCode?.registerWorker({
|
|
server: origin,
|
|
tag: version,
|
|
token: props.token
|
|
});
|
|
}
|
|
return commandCode?.registerWorker({
|
|
server: origin,
|
|
tag: `${version}-${activeKey}`,
|
|
token: props.token
|
|
});
|
|
}, [versionInfo, activeKey, props.token, origin]);
|
|
|
|
return (
|
|
<div className="container-install">
|
|
<ul className="notes">
|
|
<li>
|
|
<span>
|
|
{intl.formatMessage({ id: 'resources.worker.container.supported' })}
|
|
</span>
|
|
<WarningOutlined
|
|
style={{ color: 'var(--ant-color-warning)' }}
|
|
className="font-size-14 m-l-5"
|
|
/>
|
|
</li>
|
|
<li>
|
|
{intl.formatMessage(
|
|
{ id: 'resources.worker.current.version' },
|
|
{ version: versionInfo.version }
|
|
)}
|
|
</li>
|
|
<li>{intl.formatMessage({ id: 'resources.worker.select.command' })}</li>
|
|
<li>
|
|
<span>
|
|
{intl.formatMessage({ id: 'resources.worker.driver.install' })}
|
|
</span>
|
|
<WarningOutlined
|
|
style={{ color: 'var(--ant-color-warning)' }}
|
|
className="font-size-14 m-l-5"
|
|
/>
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
href="https://docs.gpustack.ai/latest/installation/installation-requirements/"
|
|
target="_blank"
|
|
>
|
|
{intl.formatMessage({ id: 'playground.audio.enablemic.doc' })}
|
|
</Button>
|
|
</li>
|
|
</ul>
|
|
<div className="m-b-20">
|
|
<Radio.Group
|
|
block
|
|
options={containerInstallOptions}
|
|
defaultValue={activeKey}
|
|
value={activeKey}
|
|
optionType="button"
|
|
buttonStyle="solid"
|
|
onChange={(e) => setActiveKey(e.target.value)}
|
|
size="small"
|
|
/>
|
|
</div>
|
|
{activeKey === 'npu' && (
|
|
<div
|
|
className="m-b-8 text-tertiary"
|
|
dangerouslySetInnerHTML={{
|
|
__html: intl.formatMessage({ id: 'resources.worker.cann.tips' })
|
|
}}
|
|
></div>
|
|
)}
|
|
<HighlightCode theme="dark" code={code}></HighlightCode>
|
|
<h3>
|
|
<BulbOutlined className="m-r-5"></BulbOutlined>
|
|
{intl.formatMessage({ id: 'resources.worker.add.step3' })}
|
|
</h3>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AddWorker);
|