ci4sManagement-cloud/react-ui/src/pages/ActiveLearn/components/CreateForm/ExecuteConfig.tsx

import CodeSelect from '@/components/CodeSelect';
import ParameterSelect from '@/components/ParameterSelect';
import ResourceSelect, {
  requiredValidator,
  ResourceSelectorType,
} from '@/components/ResourceSelect';
import SubAreaTitle from '@/components/SubAreaTitle';
import { AutoMLTaskType, autoMLTaskTypeOptions } from '@/enums';
import { Col, Form, Input, InputNumber, Radio, Row, Select, Switch } from 'antd';
import {
  classifierAlgorithms,
  FrameworkType,
  frameworkTypeOptions,
  queryStrategies,
  regressorAlgorithms,
} from './utils';

function ExecuteConfig() {
  const form = Form.useFormInstance();
  return (
    <>
      <SubAreaTitle
        title="配置信息"
        image={require('@/assets/img/model-deployment.png')}
        style={{ marginTop: '20px', marginBottom: '24px' }}
      ></SubAreaTitle>

      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="任务类型"
            name="task_type"
            rules={[{ required: true, message: '请选择任务类型' }]}
          >
            <Radio.Group
              options={autoMLTaskTypeOptions}
              onChange={() => form.resetFields(['metrics'])}
            ></Radio.Group>
          </Form.Item>
        </Col>
      </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}>
        <Col span={10}>
          <Form.Item
            label="框架类型"
            name="framework_type"
            rules={[
              {
                required: true,
                message: '请选择框架类型',
              },
            ]}
          >
            <Select
              placeholder="请选择框架类型"
              options={frameworkTypeOptions}
              showSearch
              allowClear
            />
          </Form.Item>
        </Col>
      </Row>

      <Form.Item dependencies={['task_type', 'framework_type']} noStyle>
        {({ getFieldValue }) => {
          const taskType = getFieldValue('task_type');
          const frameworkType = getFieldValue('framework_type');
          if (frameworkType === FrameworkType.Keras || frameworkType === FrameworkType.Pytorch) {
            return (
              <>
                <Row gutter={8}>
                  <Col span={10}>
                    <Form.Item label="预训练模型" name="model">
                      <ResourceSelect
                        type={ResourceSelectorType.Model}
                        placeholder="请选择模型"
                        canInput={false}
                        size="large"
                      />
                    </Form.Item>
                  </Col>
                </Row>
                <Row gutter={8}>
                  <Col span={10}>
                    <Form.Item
                      label="模型文件路径"
                      name="model_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="model_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="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}>
                  <Col span={10}>
                    <Form.Item
                      label="epochs"
                      name="epochs"
                      rules={[
                        {
                          required: true,
                          message: '请输入 epochs',
                        },
                      ]}
                    >
                      <InputNumber placeholder="请输入 epochs" min={0} precision={0} />
                    </Form.Item>
                  </Col>
                </Row>
                {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}>
                      <Col span={10}>
                        <Form.Item
                          label="loss 文件路径"
                          name="loss_py"
                          rules={[
                            {
                              required: true,
                              message: '请输入 loss 文件路径',
                            },
                          ]}
                        >
                          <Input
                            placeholder="请输入 loss 文件路径"
                            maxLength={64}
                            showCount
                            allowClear
                          />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Row gutter={8}>
                      <Col span={10}>
                        <Form.Item
                          label="loss 类名"
                          name="loss_class_name"
                          rules={[
                            {
                              required: true,
                              message: '请输入 loss 类名',
                            },
                          ]}
                        >
                          <Input
                            placeholder="请输入 loss 类名"
                            maxLength={64}
                            showCount
                            allowClear
                          />
                        </Form.Item>
                      </Col>
                    </Row>
                  </>
                ) : null}
              </>
            );
          } else if (frameworkType === FrameworkType.Sklearn) {
            if (taskType === AutoMLTaskType.Classification) {
              return (
                <>
                  <Row gutter={8}>
                    <Col span={10}>
                      <Form.Item
                        label="分类算法"
                        name="classifier_alg"
                        rules={[
                          {
                            required: true,
                            message: '请选择分类算法',
                          },
                        ]}
                      >
                        <Select
                          placeholder="请选择分类算法"
                          options={classifierAlgorithms}
                          showSearch
                          allowClear
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </>
              );
            } else {
              return (
                <>
                  <Row gutter={8}>
                    <Col span={10}>
                      <Form.Item
                        label="回归算法"
                        name="regressor_alg"
                        rules={[
                          {
                            required: true,
                            message: '请选择回归算法',
                          },
                        ]}
                      >
                        <Select
                          placeholder="请选择回归算法"
                          options={regressorAlgorithms}
                          showSearch
                          allowClear
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </>
              );
            }
          } else {
            return null;
          }
        }}
      </Form.Item>

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

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

      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="训练集数据量"
            name="train_size"
            rules={[
              {
                required: true,
                message: '请输入训练集数据量',
              },
            ]}
          >
            <InputNumber placeholder="请输入训练集数据量" min={0} precision={0} />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="初始训练数据量"
            name="initial_num"
            rules={[
              {
                required: true,
                message: '请输入初始训练数据量',
              },
            ]}
          >
            <InputNumber placeholder="请输入初始训练数据量" min={0} precision={0} />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="查询次数"
            name="queries_num"
            rules={[
              {
                required: true,
                message: '请输入查询次数量',
              },
            ]}
          >
            <InputNumber placeholder="请输入查询次数" min={0} precision={0} />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="每次查询数据量"
            name="instances_num"
            rules={[
              {
                required: true,
                message: '请输入每次查询数据量',
              },
            ]}
          >
            <InputNumber placeholder="请输入每次查询数据量" min={0} precision={0} />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="查询策略"
            name="query_strategy"
            rules={[
              {
                required: true,
                message: '请选择查询策略',
              },
            ]}
          >
            <Select placeholder="请选择查询策略" options={queryStrategies} showSearch allowClear />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="检查点轮数"
            name="checkpoint_num"
            rules={[
              {
                required: true,
                message: '请输入检查点轮数',
              },
            ]}
            tooltip="多少轮查询保存一次模型参数"
          >
            <InputNumber placeholder="请输入检查点轮数" min={0} precision={0} />
          </Form.Item>
        </Col>
      </Row>
    </>
  );
}

export default ExecuteConfig;