Browse Source

feat: 调整主动学习表单项的位置

pull/206/head
zhaowei 9 months ago
parent
commit
bd8fe62052
6 changed files with 198 additions and 199 deletions
  1. +14
    -14
      react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx
  2. +148
    -149
      react-ui/src/pages/ActiveLearn/components/CreateForm/ExecuteConfig.tsx
  3. +1
    -1
      react-ui/src/pages/AutoML/components/CreateForm/ExecuteConfig.tsx
  4. +1
    -1
      react-ui/src/pages/AutoML/components/ExperimentList/index.tsx
  5. +34
    -27
      react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
  6. +0
    -7
      react-ui/src/utils/downloadfile.ts

+ 14
- 14
react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx View File

@@ -89,9 +89,17 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo
label: 'epochs', label: 'epochs',
value: info.epochs, value: info.epochs,
}, },
{
label: 'batch_size',
value: info.batch_size,
},
]; ];


const lossInfo = [ const lossInfo = [
{
label: '学习率',
value: info.lr,
},
{ {
label: 'loss文件路径', label: 'loss文件路径',
value: info.loss_py, value: info.loss_py,
@@ -100,10 +108,6 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo
label: 'loss类名', label: 'loss类名',
value: info.loss_class_name, value: info.loss_class_name,
}, },
{
label: '学习率',
value: info.lr,
},
]; ];


const algorithmInfo = [ const algorithmInfo = [
@@ -130,12 +134,6 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo
value: info.task_type, value: info.task_type,
format: formatEnum(autoMLTaskTypeOptions), format: formatEnum(autoMLTaskTypeOptions),
}, },
{
label: '框架类型',
value: info.framework_type,
format: formatEnum(frameworkTypeOptions),
},
...diffInfo,
{ {
label: '代码配置', label: '代码配置',
value: info.code_config, value: info.code_config,
@@ -164,6 +162,12 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo
value: info.computing_resource_id, value: info.computing_resource_id,
format: getResourceDescription, format: getResourceDescription,
}, },
{
label: '框架类型',
value: info.framework_type,
format: formatEnum(frameworkTypeOptions),
},
...diffInfo,
{ {
label: '是否打乱', label: '是否打乱',
value: info.shuffle, value: info.shuffle,
@@ -198,10 +202,6 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo
label: '检查点轮数', label: '检查点轮数',
value: info.checkpoint_num, value: info.checkpoint_num,
}, },
{
label: 'batch_size',
value: info.batch_size,
},
]; ];
}, [info, getResourceDescription]); }, [info, getResourceDescription]);




+ 148
- 149
react-ui/src/pages/ActiveLearn/components/CreateForm/ExecuteConfig.tsx View File

@@ -40,6 +40,120 @@ function ExecuteConfig() {
</Col> </Col>
</Row> </Row>


<Row gutter={8}>
<Col span={10}>
<Form.Item
label="代码配置"
name="code_config"
rules={[
{
validator: requiredValidator,
message: '请选择代码配置',
},
]}
required
>
<CodeSelect placeholder="请选择代码配置" canInput={false} size="large" />
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="数据集"
name="dataset"
rules={[
{
validator: requiredValidator,
message: '请选择数据集',
},
]}
required
>
<ResourceSelect
type={ResourceSelectorType.Dataset}
placeholder="请选择数据集"
canInput={false}
size="large"
/>
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="数据集处理文件路径"
name="dataset_py"
rules={[
{
required: true,
message: '请输入数据集处理文件路径',
},
]}
>
<Input placeholder="请输入数据集处理文件路径" maxLength={64} showCount allowClear />
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="数据集类名"
name="dataset_class_name"
rules={[
{
required: true,
message: '请输入数据集类名',
},
]}
>
<Input placeholder="请输入数据集类名" maxLength={64} showCount allowClear />
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="镜像"
name="image"
rules={[
{
validator: requiredValidator,
message: '请选择镜像',
},
]}
required
>
<ResourceSelect
type={ResourceSelectorType.Mirror}
placeholder="请选择镜像"
canInput={false}
/>
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="资源规格"
name="computing_resource_id"
rules={[
{
required: true,
message: '请选择资源规格',
},
]}
>
<ParameterSelect dataType="resource" placeholder="请选择资源规格" />
</Form.Item>
</Col>
</Row>

<Row gutter={8}> <Row gutter={8}>
<Col span={10}> <Col span={10}>
<Form.Item <Form.Item
@@ -113,6 +227,22 @@ function ExecuteConfig() {
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row gutter={8}>
<Col span={10}>
<Form.Item
label="batch_size"
name="batch_size"
rules={[
{
required: true,
message: '请输入 batch_size',
},
]}
>
<InputNumber placeholder="请输入 batch_size" min={0} precision={0} />
</Form.Item>
</Col>
</Row>
<Row gutter={8}> <Row gutter={8}>
<Col span={10}> <Col span={10}>
<Form.Item <Form.Item
@@ -131,6 +261,22 @@ function ExecuteConfig() {
</Row> </Row>
{frameworkType === FrameworkType.Pytorch ? ( {frameworkType === FrameworkType.Pytorch ? (
<> <>
<Row gutter={8}>
<Col span={10}>
<Form.Item
label="学习率"
name="lr"
rules={[
{
required: true,
message: '请输入学习率',
},
]}
>
<InputNumber placeholder="请输入学习率" min={0} />
</Form.Item>
</Col>
</Row>
<Row gutter={8}> <Row gutter={8}>
<Col span={10}> <Col span={10}>
<Form.Item <Form.Item
@@ -173,22 +319,6 @@ function ExecuteConfig() {
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row gutter={8}>
<Col span={10}>
<Form.Item
label="学习率"
name="lr"
rules={[
{
required: true,
message: '请输入学习率',
},
]}
>
<InputNumber placeholder="请输入学习率" min={0} />
</Form.Item>
</Col>
</Row>
</> </>
) : null} ) : null}
</> </>
@@ -255,75 +385,8 @@ function ExecuteConfig() {


<Row gutter={8}> <Row gutter={8}>
<Col span={10}> <Col span={10}>
<Form.Item
label="代码配置"
name="code_config"
rules={[
{
validator: requiredValidator,
message: '请选择代码配置',
},
]}
required
>
<CodeSelect placeholder="请选择代码配置" canInput={false} size="large" />
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="数据集"
name="dataset"
rules={[
{
validator: requiredValidator,
message: '请选择数据集',
},
]}
required
>
<ResourceSelect
type={ResourceSelectorType.Dataset}
placeholder="请选择数据集"
canInput={false}
size="large"
/>
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="数据集处理文件路径"
name="dataset_py"
rules={[
{
required: true,
message: '请输入数据集处理文件路径',
},
]}
>
<Input placeholder="请输入数据集处理文件路径" maxLength={64} showCount allowClear />
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="数据集类名"
name="dataset_class_name"
rules={[
{
required: true,
message: '请输入数据集类名',
},
]}
>
<Input placeholder="请输入数据集类名" maxLength={64} showCount allowClear />
<Form.Item label="是否随机打乱" name="shuffle" valuePropName="checked">
<Switch />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
@@ -345,53 +408,6 @@ function ExecuteConfig() {
</Col> </Col>
</Row> </Row>


<Row gutter={8}>
<Col span={10}>
<Form.Item
label="镜像"
name="image"
rules={[
{
validator: requiredValidator,
message: '请选择镜像',
},
]}
required
>
<ResourceSelect
type={ResourceSelectorType.Mirror}
placeholder="请选择镜像"
canInput={false}
/>
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="资源规格"
name="computing_resource_id"
rules={[
{
required: true,
message: '请选择资源规格',
},
]}
>
<ParameterSelect dataType="resource" placeholder="请选择资源规格" />
</Form.Item>
</Col>
</Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item label="是否随机打乱" name="shuffle" valuePropName="checked">
<Switch />
</Form.Item>
</Col>
</Row>

<Row gutter={8}> <Row gutter={8}>
<Col span={10}> <Col span={10}>
<Form.Item <Form.Item
@@ -494,23 +510,6 @@ function ExecuteConfig() {
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>

<Row gutter={8}>
<Col span={10}>
<Form.Item
label="batch_size"
name="batch_size"
rules={[
{
required: true,
message: '请输入 batch_size',
},
]}
>
<InputNumber placeholder="请输入 batch_size" min={0} precision={0} />
</Form.Item>
</Col>
</Row>
</> </>
); );
} }


+ 1
- 1
react-ui/src/pages/AutoML/components/CreateForm/ExecuteConfig.tsx View File

@@ -305,7 +305,7 @@ function ExecuteConfig() {
name="max_models_on_disc" name="max_models_on_disc"
tooltip="定义在磁盘中保存的模型的最大数量。额外的模型数量将被永久删除,它设置了一个集成可以使用多少个模型的上限。必须是大于等于1的整数,默认50" tooltip="定义在磁盘中保存的模型的最大数量。额外的模型数量将被永久删除,它设置了一个集成可以使用多少个模型的上限。必须是大于等于1的整数,默认50"
> >
<InputNumber placeholder="请输入最大数量" min={0} precision={0} />
<InputNumber placeholder="请输入最大数量" min={1} precision={0} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>


+ 1
- 1
react-ui/src/pages/AutoML/components/ExperimentList/index.tsx View File

@@ -357,7 +357,7 @@ function ExperimentList({ type }: ExperimentListProps) {


return ( return (
<div className={styles['experiment-list']}> <div className={styles['experiment-list']}>
<PageTitle title={config.title}></PageTitle>
<PageTitle title={config.title + '实验列表'}></PageTitle>
<div className={styles['experiment-list__content']}> <div className={styles['experiment-list__content']}>
<div className={styles['experiment-list__content__filter']}> <div className={styles['experiment-list__content__filter']}>
<Input.Search <Input.Search


+ 34
- 27
react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx View File

@@ -3,7 +3,7 @@ import { ExperimentStatus, experimentStatusInfo } from '@/pages/Experiment/statu
import { ExperimentInstance } from '@/types'; import { ExperimentInstance } from '@/types';
import { elapsedTime, formatDate } from '@/utils/date'; import { elapsedTime, formatDate } from '@/utils/date';
import { useNavigate } from '@umijs/max'; import { useNavigate } from '@umijs/max';
import { Button } from 'antd';
import { Button, Empty } from 'antd';
import styles from './index.less'; import styles from './index.less';
type ExperimentTableProps = { type ExperimentTableProps = {
tableData: ExperimentInstance[]; tableData: ExperimentInstance[];
@@ -24,33 +24,40 @@ function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
<div className={styles['experiment-table__date']}>开始时间</div> <div className={styles['experiment-table__date']}>开始时间</div>
<div className={styles['experiment-table__operation']}>操作</div> <div className={styles['experiment-table__operation']}>操作</div>
</div> </div>
{tableData?.map((item) => (
<div className={styles['experiment-table__content']} key={item.id}>
<div className={styles['experiment-table__status']} style={{ paddingLeft: '6.5px' }}>
<img
src={experimentStatusInfo[item.status as ExperimentStatus]?.icon}
width={17}
height={17}
draggable={false}
alt=""
/>
{Array.isArray(tableData) && tableData.length > 0 ? (
tableData.map((item) => (
<div className={styles['experiment-table__content']} key={item.id}>
<div className={styles['experiment-table__status']} style={{ paddingLeft: '6.5px' }}>
<img
src={experimentStatusInfo[item.status as ExperimentStatus]?.icon}
width={17}
height={17}
draggable={false}
alt=""
/>
</div>
<div className={styles['experiment-table__duration']}>
{elapsedTime(item.create_time, item.finish_time)}
</div>
<div className={styles['experiment-table__date']}>{formatDate(item.create_time)}</div>
<div className={styles['experiment-table__operation']}>
<Button
size="small"
type="link"
icon={<KFIcon type="icon-xiangqing2" font={14} />}
onClick={() => gotoExperiment(item)}
>
详情
</Button>
</div>
</div> </div>
<div className={styles['experiment-table__duration']}>
{elapsedTime(item.create_time, item.finish_time)}
</div>
<div className={styles['experiment-table__date']}>{formatDate(item.create_time)}</div>
<div className={styles['experiment-table__operation']}>
<Button
size="small"
type="link"
icon={<KFIcon type="icon-xiangqing2" font={14} />}
onClick={() => gotoExperiment(item)}
>
详情
</Button>
</div>
</div>
))}
))
) : (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
imageStyle={{ height: '40px', marginTop: '-10px' }}
/>
)}
</div> </div>
); );
} }


+ 0
- 7
react-ui/src/utils/downloadfile.ts View File

@@ -91,10 +91,3 @@ export function downloadCommonFile(url: string, type: string, fileName: string =
resolveBlob(res, type, fileName); resolveBlob(res, type, fileName);
}); });
} }

/**
* @deprecated 无效
*/
export function download(fileName: string) {
window.location.href = `/api/common/download?fileName=${encodeURI(fileName)}&delete=${true}`;
}

Loading…
Cancel
Save