feat: depoly model advanced

2024-09-04 14:32:36 +08:00
parent 01101678b3
commit ca595da0c7
23 changed files with 1032 additions and 217 deletions
@@ -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>
  );
 });
@@ -1,17 +1,23 @@
+import LabelSelector from '@/components/label-selector';
 import ModalFooter from '@/components/modal-footer';
 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 { convertFileSize } from '@/utils';
+import { RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Checkbox, Collapse, Form, Modal, Typography } from 'antd';
 import _ from 'lodash';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
 import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
-import { modelSourceMap } from '../config';
+import { modelSourceMap, placementStrategyOptions } from '../config';
 import { FormData, ListItem } from '../config/types';
+import dataformStyles from '../style/data-form.less';

 type AddModalProps = {
  title: string;
@@ -35,13 +41,14 @@ const sourceOptions = [
  }
 ];

-const AddModal: React.FC<AddModalProps> = (props) => {
+const UpdateModal: React.FC<AddModalProps> = (props) => {
  console.log('addmodel====');
  const { title, action, open, onOk, onCancel } = props || {};
  const [form] = Form.useForm();
  const intl = useIntl();
  const [loading, setLoading] = useState(false);
  const modelSource = Form.useWatch('source', form);
+  const wokerSelector = Form.useWatch('worker_selector', form);
  const [repoOptions, setRepoOptions] = useState<
    { label: string; value: string }[]
  >([]);
@@ -254,6 +261,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
    }
  };

+  const handleWorkerLabelsChange = useCallback(
+    (labels: Record<string, any>) => {
+      console.log('labels========', labels);
+      form.setFieldValue('worker_selector', labels);
+    },
+    []
+  );
+
  const handleOnSelectModel = useCallback((item: any) => {
    const repo = item.name;
    if (form.getFieldValue('source') === modelSourceMap.huggingface_value) {
@@ -272,71 +287,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
    form.submit();
  };

-  return (
-    <Modal
-      title={title}
-      open={open}
-      centered={true}
-      onOk={handleSumit}
-      onCancel={onCancel}
-      destroyOnClose={true}
-      closeIcon={true}
-      maskClosable={false}
-      keyboard={false}
-      width={600}
-      styles={{}}
-      footer={
-        <ModalFooter onCancel={onCancel} onOk={handleSumit}></ModalFooter>
-      }
-    >
-      <Form name="addModalForm" form={form} onFinish={onOk} preserve={false}>
-        <Form.Item<FormData>
-          name="name"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'common.table.name' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({
-              id: 'common.table.name'
-            })}
-            required
-          ></SealInput.Input>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="source"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.select'
-                },
-                { name: intl.formatMessage({ id: 'models.form.source' }) }
-              )
-            }
-          ]}
-        >
-          {action === PageAction.EDIT && (
-            <SealSelect
-              disabled={true}
-              label={intl.formatMessage({
-                id: 'models.form.source'
-              })}
-              options={sourceOptions}
-              required
-            ></SealSelect>
-          )}
-        </Form.Item>
-        {renderFieldsBySource()}
+  const collapseItems = useMemo(() => {
+    const children = (
+      <>
        <Form.Item<FormData>
          name="replicas"
          rules={[
@@ -346,7 +299,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                {
                  id: 'common.form.rule.input'
                },
-                { name: intl.formatMessage({ id: 'models.form.replicas' }) }
+                {
+                  name: intl.formatMessage({ id: 'models.form.replicas' })
+                }
              )
            }
          ]}
@@ -360,16 +315,229 @@ const AddModal: React.FC<AddModalProps> = (props) => {
            min={0}
          ></SealInput.Number>
        </Form.Item>
-        <Form.Item<FormData> name="description">
-          <SealInput.TextArea
+        <Form.Item<FormData> name="placement_strategy">
+          <SealSelect
            label={intl.formatMessage({
-              id: 'common.table.description'
+              id: 'resources.form.placementStrategy'
            })}
-          ></SealInput.TextArea>
+            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>
-      </Form>
+        <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={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 (
+    <Modal
+      title={title}
+      open={open}
+      centered={true}
+      onOk={handleSumit}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      styles={{
+        content: {
+          padding: '0px'
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          paddingBottom: '0'
+        },
+        body: {
+          padding: '0'
+        },
+        footer: {
+          padding: '0 var(--ant-modal-content-padding)'
+        }
+      }}
+      footer={
+        <ModalFooter onCancel={onCancel} onOk={handleSumit}></ModalFooter>
+      }
+    >
+      <SimpleBar
+        style={{
+          maxHeight: '550px'
+        }}
+      >
+        <Form
+          name="addModalForm"
+          form={form}
+          onFinish={onOk}
+          preserve={false}
+          style={{
+            padding: 'var(--ant-modal-content-padding)',
+            paddingBlock: 0
+          }}
+        >
+          <Form.Item<FormData>
+            name="name"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  {
+                    id: 'common.form.rule.input'
+                  },
+                  { name: intl.formatMessage({ id: 'common.table.name' }) }
+                )
+              }
+            ]}
+          >
+            <SealInput.Input
+              label={intl.formatMessage({
+                id: 'common.table.name'
+              })}
+              required
+            ></SealInput.Input>
+          </Form.Item>
+          <Form.Item<FormData>
+            name="source"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  {
+                    id: 'common.form.rule.select'
+                  },
+                  { name: intl.formatMessage({ id: 'models.form.source' }) }
+                )
+              }
+            ]}
+          >
+            {action === PageAction.EDIT && (
+              <SealSelect
+                disabled={true}
+                label={intl.formatMessage({
+                  id: 'models.form.source'
+                })}
+                options={sourceOptions}
+                required
+              ></SealSelect>
+            )}
+          </Form.Item>
+          {renderFieldsBySource()}
+          <Form.Item<FormData> name="description">
+            <SealInput.TextArea
+              label={intl.formatMessage({
+                id: 'common.table.description'
+              })}
+            ></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>
+      </SimpleBar>
    </Modal>
  );
 };

-export default memo(AddModal);
+export default memo(UpdateModal);
@@ -147,3 +147,14 @@ export const ModelSortType = {
  downloads: 'downloads',
  lastModified: 'lastModified'
 };
+
+export const placementStrategyOptions = [
+  {
+    label: 'Spread',
+    value: 'spread'
+  },
+  {
+    label: 'Binpack',
+    value: 'binpack'
+  }
+];
@@ -21,6 +21,10 @@ export interface FormData {
  huggingface_filename: string;
  s3_address: string;
  ollama_library_model_name: 'string';
+  distributed_inference_across_workers?: boolean;
+  placement_strategy?: string;
+  partial_offload?: boolean;
+  worker_selector?: object;
  name: string;
  replicas: number;
  description: string;
@@ -0,0 +1,22 @@
+.advanced-collapse {
+  :global {
+    .ant-collapse-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px !important;
+      padding-inline: 5px !important;
+      padding-block: 5px !important;
+      border-radius: var(--border-radius-base) !important;
+      font-size: var(--font-size-middle) !important;
+
+      &:hover {
+        background-color: var(--color-fill-sider) !important;
+      }
+    }
+
+    .ant-collapse-content-box {
+      padding-inline: 0 !important;
+      padding-block: 0 !important;
+    }
+  }
+}