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

feat: depoly model advanced

Browse Source
This commit is contained in:
jialin
2024-09-04 14:32:36 +08:00
parent 01101678b3
commit ca595da0c7
23 changed files with 1032 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/data-form.tsx
+180 -29
View File
@@ -1,14 +1,28 @@
import LabelSelector from '@/components/label-selector';
import SealAutoComplete from '@/components/seal-form/auto-complete';
import FormItemWrapper from '@/components/seal-form/components/wrapper';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { Checkbox, Collapse, Form, Typography } from 'antd';
import _ from 'lodash';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { modelSourceMap, ollamaModelOptions } from '../config';
import React, {
forwardRef,
useCallback,
useEffect,
useImperativeHandle,
useMemo
} from 'react';
import {
modelSourceMap,
ollamaModelOptions,
placementStrategyOptions
} from '../config';
import { FormData } from '../config/types';
import dataformStyles from '../style/data-form.less';
interface DataFormProps {
ref?: any;
@@ -35,6 +49,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
const { action, repo, onOk } = props;
const [form] = Form.useForm();
const intl = useIntl();
const wokerSelector = Form.useWatch('worker_selector', form);
const handleSumit = () => {
form.submit();
@@ -81,6 +96,13 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
};
const handleWorkerLabelsChange = useCallback(
(labels: Record<string, any>) => {
form.setFieldValue('worker_selector', labels);
},
[]
);
const renderHuggingfaceFields = () => {
return (
<>
@@ -201,6 +223,140 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
};
const collapseItems = useMemo(() => {
const children = (
<>
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'models.form.replicas' })
}
)
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="placement_strategy">
<SealSelect
label={intl.formatMessage({
id: 'resources.form.placementStrategy'
})}
options={placementStrategyOptions}
description={
<div>
<div className="m-b-8">
<Typography.Title
level={5}
style={{
color: 'var(--color-white-1)',
marginRight: 10
}}
>
Spread:
</Typography.Title>
<Typography.Text style={{ color: 'var(--color-white-1)' }}>
{intl.formatMessage({
id: 'resources.form.spread.tips'
})}
</Typography.Text>
</div>
<div>
<Typography.Title
level={5}
style={{ color: 'var(--color-white-1)', marginRight: 10 }}
>
Binpack:
</Typography.Title>
<Typography.Text style={{ color: 'var(--color-white-1)' }}>
{intl.formatMessage({
id: 'resources.form.binpack.tips'
})}
</Typography.Text>
</div>
</div>
}
></SealSelect>
</Form.Item>
<div style={{ marginBottom: 24 }}>
<FormItemWrapper noWrapperStyle>
<Form.Item<FormData>
name="partial_offload"
valuePropName="checked"
style={{ padding: '0 10px', marginBottom: 0 }}
>
<Checkbox>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enablePartialOffload'
})}
</span>
</Checkbox>
</Form.Item>
</FormItemWrapper>
</div>
<div style={{ marginBottom: 24 }}>
<FormItemWrapper noWrapperStyle>
<Form.Item<FormData>
name="distributed_inference_across_workers"
valuePropName="checked"
style={{ padding: '0 10px', marginBottom: 0 }}
>
<Checkbox>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enableDistributedInferenceAcrossWorkers'
})}
</span>
</Checkbox>
</Form.Item>
</FormItemWrapper>
</div>
<Form.Item<FormData> name="worker_selector">
<LabelSelector
label={intl.formatMessage({
id: 'resources.form.workerSelector'
})}
labels={wokerSelector}
onChange={handleWorkerLabelsChange}
description={
<span>
{intl.formatMessage({
id: 'resources.form.workerSelector.description'
})}
</span>
}
></LabelSelector>
</Form.Item>
</>
);
return [
{
key: '1',
label: (
<span style={{ fontWeight: 'var(--font-weight-medium)' }}>
{intl.formatMessage({ id: 'resources.form.advanced' })}
</span>
),
children
}
];
}, []);
useEffect(() => {
handleOnSelectModel();
}, [repo]);
@@ -213,7 +369,13 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
preserve={false}
style={{ padding: '16px 24px' }}
clearOnDestroy={true}
initialValues={{ replicas: 1, source: props.source }}
initialValues={{
replicas: 1,
source: props.source,
placement_strategy: 'spread',
partial_offload: true,
distributed_inference_across_workers: true
}}
>
<Form.Item<FormData>
name="name"
@@ -262,31 +424,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
</Form.Item>
{renderFieldsBySource()}
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'models.form.replicas' })
}
)
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
@@ -294,6 +431,20 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
})}
></SealInput.TextArea>
</Form.Item>
<Collapse
expandIconPosition="start"
bordered={false}
ghost
className={dataformStyles['advanced-collapse']}
expandIcon={({ isActive }) => (
<RightOutlined
rotate={isActive ? 90 : 0}
style={{ fontSize: '12px' }}
/>
)}
items={collapseItems}
></Collapse>
</Form>
);
});