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

fix: edit model config

Browse Source
This commit is contained in:
jialin
2024-09-05 14:53:14 +08:00
parent 55ca15bdc6
commit a6e5ec0a08
2 changed files with 203 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/data-form.tsx
+77 -70
View File
@@ -50,6 +50,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const intl = useIntl(); const intl = useIntl();
const wokerSelector = Form.useWatch('worker_selector', form); const wokerSelector = Form.useWatch('worker_selector', form);
const [scheduleType, setScheduleType] = React.useState('auto');
const handleSumit = () => { const handleSumit = () => {
form.submit(); form.submit();
@@ -251,47 +252,49 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
min={0} min={0}
></SealInput.Number> ></SealInput.Number>
</Form.Item> </Form.Item>
<Form.Item<FormData> name="placement_strategy"> {scheduleType === 'auto' && (
<SealSelect <Form.Item<FormData> name="placement_strategy">
label={intl.formatMessage({ <SealSelect
id: 'resources.form.placementStrategy' label={intl.formatMessage({
})} id: 'resources.form.placementStrategy'
options={placementStrategyOptions} })}
description={ options={placementStrategyOptions}
<div> description={
<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> <div>
<Typography.Title <div className="m-b-8">
level={5} <Typography.Title
style={{ color: 'var(--color-white-1)', marginRight: 10 }} level={5}
> style={{
Binpack: color: 'var(--color-white-1)',
</Typography.Title> marginRight: 10
<Typography.Text style={{ color: 'var(--color-white-1)' }}> }}
{intl.formatMessage({ >
id: 'resources.form.binpack.tips' Spread:
})} </Typography.Title>
</Typography.Text> <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> </div>
</div> }
} ></SealSelect>
></SealSelect> </Form.Item>
</Form.Item> )}
<div style={{ marginBottom: 24 }}> <div style={{ marginBottom: 24 }}>
<FormItemWrapper noWrapperStyle> <FormItemWrapper noWrapperStyle>
<Form.Item<FormData> <Form.Item<FormData>
@@ -309,39 +312,43 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
</Form.Item> </Form.Item>
</FormItemWrapper> </FormItemWrapper>
</div> </div>
<div style={{ marginBottom: 24 }}> {scheduleType === 'auto' && (
<FormItemWrapper noWrapperStyle> <div style={{ marginBottom: 24 }}>
<Form.Item<FormData> <FormItemWrapper noWrapperStyle>
name="distributed_inference_across_workers" <Form.Item<FormData>
valuePropName="checked" name="distributed_inference_across_workers"
style={{ padding: '0 10px', marginBottom: 0 }} valuePropName="checked"
> style={{ padding: '0 10px', marginBottom: 0 }}
<Checkbox> >
<span style={{ color: 'var(--ant-color-text-tertiary)' }}> <Checkbox>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enableDistributedInferenceAcrossWorkers'
})}
</span>
</Checkbox>
</Form.Item>
</FormItemWrapper>
</div>
)}
{scheduleType === 'auto' && (
<Form.Item<FormData> name="worker_selector">
<LabelSelector
label={intl.formatMessage({
id: 'resources.form.workerSelector'
})}
labels={wokerSelector}
onChange={handleWorkerLabelsChange}
description={
<span>
{intl.formatMessage({ {intl.formatMessage({
id: 'resources.form.enableDistributedInferenceAcrossWorkers' id: 'resources.form.workerSelector.description'
})} })}
</span> </span>
</Checkbox> }
</Form.Item> ></LabelSelector>
</FormItemWrapper> </Form.Item>
</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 [ return [
@@ -355,7 +362,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
children children
} }
]; ];
}, []); }, [scheduleType]);
useEffect(() => { useEffect(() => {
handleOnSelectModel(); handleOnSelectModel();
src/pages/llmodels/components/update-modal.tsx
+126 -129
View File
@@ -11,7 +11,7 @@ import { RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Checkbox, Collapse, Form, Modal, Typography } from 'antd'; import { Checkbox, Collapse, Form, Modal, Typography } from 'antd';
import _ from 'lodash'; import _ from 'lodash';
import { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { memo, useCallback, useEffect, useState } from 'react';
import SimpleBar from 'simplebar-react'; import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css'; import 'simplebar-react/dist/simplebar.min.css';
import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis'; import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
@@ -287,139 +287,136 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
form.submit(); form.submit();
}; };
const collapseItems = useMemo(() => { const collapseItems = [
const children = ( {
<> key: '1',
<Form.Item<FormData> label: (
name="replicas" <span style={{ fontWeight: 'var(--font-weight-medium)' }}>
rules={[ {intl.formatMessage({ id: 'resources.form.advanced' })}
{ </span>
required: true, ),
message: intl.formatMessage( children: (
{ <>
id: 'common.form.rule.input' <Form.Item<FormData>
}, name="replicas"
{ rules={[
name: intl.formatMessage({ id: 'models.form.replicas' }) {
} required: true,
) message: intl.formatMessage(
} {
]} id: 'common.form.rule.input'
> },
<SealInput.Number {
style={{ width: '100%' }} name: intl.formatMessage({ id: 'models.form.replicas' })
label={intl.formatMessage({ }
id: 'models.form.replicas' )
})} }
required ]}
min={0} >
></SealInput.Number> <SealInput.Number
</Form.Item> style={{ width: '100%' }}
<Form.Item<FormData> name="placement_strategy"> label={intl.formatMessage({
<SealSelect id: 'models.form.replicas'
label={intl.formatMessage({ })}
id: 'resources.form.placementStrategy' required
})} min={0}
options={placementStrategyOptions} ></SealInput.Number>
description={ </Form.Item>
<div> <Form.Item<FormData> name="placement_strategy">
<div className="m-b-8"> <SealSelect
<Typography.Title label={intl.formatMessage({
level={5} id: 'resources.form.placementStrategy'
style={{ })}
color: 'var(--color-white-1)', options={placementStrategyOptions}
marginRight: 10 description={
}}
>
Spread:
</Typography.Title>
<Typography.Text style={{ color: 'var(--color-white-1)' }}>
{intl.formatMessage({
id: 'resources.form.spread.tips'
})}
</Typography.Text>
</div>
<div> <div>
<Typography.Title <div className="m-b-8">
level={5} <Typography.Title
style={{ color: 'var(--color-white-1)', marginRight: 10 }} level={5}
> style={{
Binpack: color: 'var(--color-white-1)',
</Typography.Title> marginRight: 10
<Typography.Text style={{ color: 'var(--color-white-1)' }}> }}
{intl.formatMessage({ >
id: 'resources.form.binpack.tips' Spread:
})} </Typography.Title>
</Typography.Text> <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> </div>
</div> }
} ></SealSelect>
></SealSelect> </Form.Item>
</Form.Item> <div style={{ marginBottom: 24 }}>
<div style={{ marginBottom: 24 }}> <FormItemWrapper noWrapperStyle>
<FormItemWrapper noWrapperStyle> <Form.Item<FormData>
<Form.Item<FormData> name="partial_offload"
name="partial_offload" valuePropName="checked"
valuePropName="checked" style={{ padding: '0 10px', marginBottom: 0 }}
style={{ padding: '0 10px', marginBottom: 0 }} >
> <Checkbox>
<Checkbox> <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
<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={form.getFieldValue('worker_selector')}
onChange={handleWorkerLabelsChange}
description={
<span>
{intl.formatMessage({ {intl.formatMessage({
id: 'resources.form.enablePartialOffload' id: 'resources.form.workerSelector.description'
})} })}
</span> </span>
</Checkbox> }
</Form.Item> ></LabelSelector>
</FormItemWrapper> </Form.Item>
</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={form.getFieldValue('worker_selector')}
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
}
];
}, []);
return ( return (
<Modal <Modal