root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: display the direct command in add worker

Browse Source
This commit is contained in:
jialin
2024-12-23 16:33:08 +08:00
parent 4391705c9a
commit e7de1896ea
32 changed files with 359 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/advance-config.tsx
+15
View File
@@ -153,6 +153,21 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
const collapseItems = useMemo(() => {
const children = (
<>
{/* <Form.Item<FormData> name="labels">
<ListInput
placeholder={
backendParamsHolderTips[backend]
? intl.formatMessage({
id: backendParamsHolderTips[backend].holder
})
: ''
}
btnText="models.form.button.addlabel"
label="Labels"
dataList={form.getFieldValue('backend_parameters') || []}
options={modelLabels}
></ListInput>
</Form.Item> */}
<Form.Item name="scheduleType">
<SealSelect
label={intl.formatMessage({ id: 'models.form.scheduletype' })}
src/pages/llmodels/components/data-form.tsx
+47 -31
View File
@@ -508,38 +508,54 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item name="backend" id="backend-field">
<SealSelect
onChange={handleBackendChange}
label={intl.formatMessage({ id: 'models.form.backend' })}
options={[
{
label: `llama-box`,
value: backendOptionsMap.llamaBox,
disabled:
props.source === modelSourceMap.local_path_value
? false
: !isGGUF
},
{
label: 'vLLM',
value: backendOptionsMap.vllm,
disabled:
props.source === modelSourceMap.local_path_value
? false
: isGGUF
},
{
label: 'vox-box',
value: backendOptionsMap.voxBox,
disabled: props.source === modelSourceMap.ollama_library_value
<Form.Item name="backend">
<div id="backend-field">
<SealSelect
onChange={handleBackendChange}
label={intl.formatMessage({ id: 'models.form.backend' })}
description={
<div>
<div>
1.{' '}
{intl.formatMessage({ id: 'models.form.backend.llamabox' })}
</div>
<div>
2. {intl.formatMessage({ id: 'models.form.backend.vllm' })}
</div>
<div>
3. {intl.formatMessage({ id: 'models.form.backend.voxbox' })}
</div>
</div>
}
]}
disabled={
action === PageAction.EDIT &&
props.source !== modelSourceMap.local_path_value
}
></SealSelect>
options={[
{
label: `llama-box`,
value: backendOptionsMap.llamaBox,
disabled:
props.source === modelSourceMap.local_path_value
? false
: !isGGUF
},
{
label: 'vLLM',
value: backendOptionsMap.vllm,
disabled:
props.source === modelSourceMap.local_path_value
? false
: isGGUF
},
{
label: 'vox-box',
value: backendOptionsMap.voxBox,
disabled: props.source === modelSourceMap.ollama_library_value
}
]}
disabled={
action === PageAction.EDIT &&
props.source !== modelSourceMap.local_path_value
}
></SealSelect>
</div>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
src/pages/llmodels/components/deploy-modal.tsx
+7 -5
View File
@@ -1,6 +1,5 @@
import ModalFooter from '@/components/modal-footer';
import { PageActionType } from '@/config/types';
import useDriver from '@/hooks/use-driver';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Drawer } from 'antd';
@@ -58,9 +57,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
modelSourceMap.huggingface_value,
modelSourceMap.modelscope_value
];
const { start } = useDriver({
steps
});
// const { start } = useDriver({
// steps,
// id: 'deploy-model'
// });
const form = useRef<any>({});
const intl = useIntl();
const [selectedModel, setSelectedModel] = useState<any>({});
@@ -128,7 +128,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
// useEffect(() => {
// if (open && loadfinish) {
// start();
// setTimeout(() => {
// start();
// }, 1000);
// }
// }, [loadfinish, open]);
src/pages/llmodels/components/instance-item.tsx
+4 -4
View File
@@ -8,8 +8,8 @@ import {
ListItem as WorkerListItem
} from '@/pages/resources/config/types';
import {
DeleteOutlined,
FieldTimeOutlined,
FileSyncOutlined,
InfoCircleOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
@@ -71,12 +71,12 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
icon: <FieldTimeOutlined />
},
{
label: 'common.button.recreate',
label: 'common.button.delrecreate',
key: 'delete',
props: {
danger: false
danger: true
},
icon: <FileSyncOutlined />
icon: <DeleteOutlined />
}
];
src/pages/llmodels/components/search-model.tsx
+13 -2
View File
@@ -1,4 +1,8 @@
import { BulbOutlined, InfoCircleOutlined } from '@ant-design/icons';
import {
BulbOutlined,
QuestionCircleOutlined,
WarningOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Checkbox, Select, Tooltip } from 'antd';
import _ from 'lodash';
@@ -233,6 +237,12 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
onChange={handleSearchInputChange}
modelSource={modelSource}
></SearchInput>
<div className="gguf-tips">
<WarningOutlined className="font-size-14 m-r-5 warning" />
<span>
{intl.formatMessage({ id: 'models.form.search.gguftips' })}
</span>
</div>
<div className={SearchStyle.filter}>
<span>
<span className="value">
@@ -268,7 +278,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
}
>
GGUF
<InfoCircleOutlined className="m-l-4" />
<QuestionCircleOutlined className="m-l-4" />
</Tooltip>
</Checkbox>
</span>
@@ -318,6 +328,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
</div>
)}
</div>
{
<SearchResult
loading={dataSource.loading}
src/pages/llmodels/components/search-result.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
);
};
return (
<SimpleBar style={{ height: 'calc(100vh - 194px)' }}>
<SimpleBar style={{ height: 'calc(100vh - 224px)' }}>
<div style={{ ...props.style }} className="search-result-wrap">
<Spin spinning={props.loading}>
<div style={{ minHeight: 200 }}>
src/pages/llmodels/components/table-list.tsx
+1 -1
View File
@@ -449,7 +449,7 @@ const Models: React.FC<ModelsProps> = ({
const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
modalRef.current.show({
content: 'models.instances',
okText: 'common.button.recreate',
okText: 'common.button.delrecreate',
name: row.name,
async onOk() {
await deleteModelInstance(row.id);
src/pages/llmodels/config/index.ts
+8
View File
@@ -345,3 +345,11 @@ export const getVllmCliArgs = (inputString: string) => {
return result;
};
export const modelLabels = [
{ label: 'Image', value: 'image_only' },
{ label: 'Text-to-speech', value: 'text_to_speech' },
{ label: 'Speech-to-text', value: 'speech_to_text' },
{ label: 'reranker', value: 'reranker' },
{ label: 'Embedding', value: 'embedding_only' }
];
src/pages/llmodels/config/llama-config.ts
+4
View File
@@ -104,6 +104,10 @@ const options = [
{
label: '--image-no-vae-tiling',
value: '--image-no-vae-tiling'
},
{
label: '--mmproj',
value: '--mmproj'
}
];
src/pages/llmodels/style/search-result.less
+11
View File
@@ -8,6 +8,17 @@
// height: calc(100vh - 194px);
}
.gguf-tips {
display: flex;
align-items: center;
padding: 8px 0;
color: var(--ant-color-text-secondary);
.warning {
color: var(--ant-color-warning);
}
}
.search-bar {
left: 0;
right: 0;
src/pages/resources/components/add-worker.tsx
+28 -45
View File
@@ -1,8 +1,8 @@
import HighlightCode from '@/components/highlight-code';
import { useIntl } from '@umijs/max';
import { Modal } from 'antd';
import { Modal, Tabs, TabsProps } from 'antd';
import React from 'react';
import { addWorkerGuide } from '../config';
import ContainerInstall from './container-install';
import ScriptInstall from './script-install';
type ViewModalProps = {
open: boolean;
@@ -12,8 +12,21 @@ type ViewModalProps = {
const AddWorker: React.FC<ViewModalProps> = (props) => {
const { open, onCancel } = props || {};
const intl = useIntl();
const [token, setToken] = React.useState('');
const [activeKey, setActiveKey] = React.useState('script');
const origin = window.location.origin;
const items: TabsProps['items'] = [
{
key: 'script',
label: 'Script Installation',
children: <ScriptInstall token={token}></ScriptInstall>
},
{
key: 'container',
label: 'Container Installation',
children: <ContainerInstall token={token} />
}
];
return (
<Modal
@@ -26,49 +39,19 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
maskClosable={false}
keyboard={false}
width={600}
styles={{
body: {
height: 310
}
}}
footer={null}
>
<div>
<h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
<HighlightCode
code={addWorkerGuide.mac.getToken}
theme="dark"
></HighlightCode>
<h4>Windows </h4>
<HighlightCode
code={addWorkerGuide.win.getToken}
theme="dark"
></HighlightCode>
<h3>
2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
<span
className="font-size-12"
style={{ color: 'var(--ant-color-text-tertiary)' }}
dangerouslySetInnerHTML={{
__html: `(${intl.formatMessage({
id: 'resources.worker.add.step2.tips'
})})`
}}
></span>
</h3>
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
<HighlightCode
code={addWorkerGuide.mac.registerWorker(origin)}
theme="dark"
></HighlightCode>
<h4>Windows </h4>
<HighlightCode
theme="dark"
code={addWorkerGuide.win.registerWorker(origin)}
></HighlightCode>
<h4>Docker </h4>
<HighlightCode
theme="dark"
code={addWorkerGuide.docker.registerWorker(origin)}
></HighlightCode>
<h3>3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}</h3>
</div>
<Tabs
items={items}
activeKey={activeKey}
type="card"
onChange={(key) => setActiveKey(key)}
></Tabs>
</Modal>
);
};
src/pages/resources/components/container-install.tsx
+86
View File
@@ -0,0 +1,86 @@
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 { 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';
}
if (activeKey === 'cuda') {
return addWorkerGuide.docker.registerWorker({
server: origin,
tag: version,
token: props.token
});
}
return addWorkerGuide.docker.registerWorker({
server: origin,
tag: `${version}-${activeKey}`,
token: props.token
});
}, [versionInfo, activeKey, props.token, origin]);
return (
<div className="container-install">
<div className="notes">
<span>
1.{' '}
<span>
{intl.formatMessage({ id: 'resources.worker.container.supported' })}
</span>
<WarningOutlined
style={{ color: 'var(--ant-color-warning)' }}
className="font-size-14 m-l-5"
/>
</span>
<span>
2.{' '}
{intl.formatMessage(
{ id: 'resources.worker.current.version' },
{ version: versionInfo.version }
)}
</span>
<span>
3. {intl.formatMessage({ id: 'resources.worker.select.command' })}
</span>
</div>
<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>
<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);
src/pages/resources/components/script-install.tsx
+40
View File
@@ -0,0 +1,40 @@
import HighlightCode from '@/components/highlight-code';
import { BulbOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import React from 'react';
import { addWorkerGuide } from '../config';
type ViewModalProps = { token: string };
const AddWorker: React.FC<ViewModalProps> = (props) => {
const intl = useIntl();
const origin = window.location.origin;
return (
<div>
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
<HighlightCode
code={addWorkerGuide.mac.registerWorker({
server: origin,
token: props.token
})}
theme="dark"
></HighlightCode>
<h4>Windows </h4>
<HighlightCode
theme="dark"
code={addWorkerGuide.win.registerWorker({
server: origin,
token: props.token
})}
></HighlightCode>
<h3>
<BulbOutlined className="m-r-5"></BulbOutlined>
{intl.formatMessage({ id: 'resources.worker.add.step3' })}
</h3>
</div>
);
};
export default React.memo(AddWorker);
src/pages/resources/components/styles/installation.less
+13
View File
@@ -0,0 +1,13 @@
.container-install {
.notes {
padding: 10px 0;
display: flex;
flex-direction: column;
gap: 5px;
border-left: 2px solid var(--ant-color-split);
margin-bottom: 20px;
padding-left: 16px;
background: var(--color-fill-sider);
border-radius: 2px;
}
}
src/pages/resources/config/index.ts
+13 -6
View File
@@ -18,22 +18,29 @@ export const status: any = {
export const addWorkerGuide = {
mac: {
getToken: 'cat /var/lib/gpustack/token',
registerWorker(server: string) {
return `curl -sfL https://get.gpustack.ai | sh -s - --server-url ${server} --token mytoken`;
registerWorker(params: { server: string; token: string }) {
return `curl -sfL https://get.gpustack.ai | sh -s - --server-url ${params.server} --token ${params.token}`;
}
},
win: {
getToken:
'Get-Content -Path (Join-Path -Path $env:APPDATA -ChildPath "gpustack\\token") -Raw',
registerWorker(server: string) {
return `Invoke-Expression "& { $((Invoke-WebRequest -Uri "https://get.gpustack.ai" -UseBasicParsing).Content) } --server-url ${server} --token mytoken"`;
registerWorker(params: { server: string; token: string }) {
return `Invoke-Expression "& { $((Invoke-WebRequest -Uri "https://get.gpustack.ai" -UseBasicParsing).Content) } --server-url ${params.server} --token ${params.token}"`;
}
},
docker: {
getToken:
'Get-Content -Path (Join-Path -Path $env:APPDATA -ChildPath "gpustack\\token") -Raw',
registerWorker(server: string) {
return `docker run -d --gpus all --ipc=host --network=host gpustack/gpustack --server-url ${server} --token mytoken`;
registerWorker(params: { server: string; tag: string; token: string }) {
return `docker run -d --gpus all --ipc=host --network=host gpustack/gpustack:${params.tag} --server-url ${params.server} --token ${params.token}`;
}
}
};
export const containerInstallOptions = [
{ label: 'CUDA', value: 'cuda' },
{ label: 'CANN', value: 'npu' },
{ label: 'MUSA', value: 'musa' },
{ label: 'CPU', value: 'cpu' }
];