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
@@ -42,6 +42,10 @@
  margin-right: 2px;
 }

+.m-r-0 {
+  margin-right: 0;
+}
+
 .m-r-8 {
  margin-right: 8px;
 }
@@ -0,0 +1,79 @@
+import { Tag, Tooltip } from 'antd';
+import debounce from 'lodash/debounce';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+
+interface AutoTooltipProps extends React.ComponentProps<typeof Tag> {
+  children: React.ReactNode;
+  maxWidth?: number | string;
+  color?: string;
+  style?: React.CSSProperties;
+  ghost?: boolean;
+}
+
+const AutoTooltip: React.FC<AutoTooltipProps> = ({
+  children,
+  maxWidth = '100%',
+  ghost = false,
+  ...tagProps
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  const checkOverflow = useCallback(() => {
+    if (contentRef.current) {
+      const { scrollWidth, clientWidth } = contentRef.current;
+      setIsOverflowing(scrollWidth > clientWidth);
+    }
+  }, []);
+
+  const debouncedCheckOverflow = useMemo(
+    () => debounce(checkOverflow, 200),
+    [checkOverflow]
+  );
+
+  useEffect(() => {
+    checkOverflow();
+    window.addEventListener('resize', debouncedCheckOverflow);
+    return () => {
+      window.removeEventListener('resize', debouncedCheckOverflow);
+      debouncedCheckOverflow.cancel();
+    };
+  }, [checkOverflow, debouncedCheckOverflow]);
+
+  useEffect(() => {
+    checkOverflow();
+  }, [children, checkOverflow]);
+
+  const tagStyle = useMemo(
+    () => ({
+      maxWidth,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap' as const,
+      ...tagProps.style
+    }),
+    [maxWidth, tagProps.style]
+  );
+
+  return (
+    <Tooltip title={isOverflowing ? children : ''}>
+      {ghost ? (
+        <div ref={contentRef} style={tagStyle}>
+          {children}
+        </div>
+      ) : (
+        <Tag {...tagProps} ref={contentRef} style={tagStyle}>
+          {children}
+        </Tag>
+      )}
+    </Tooltip>
+  );
+};
+
+export default React.memo(AutoTooltip);
@@ -1,99 +1,58 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
 import _ from 'lodash';
-import React, { useEffect } from 'react';
-import LabelItem from './label-item';
-import Wrapper from './wrapper';
+import React, { useCallback, useEffect, useState } from 'react';
+import Inner from './inner';

 interface LabelSelectorProps {
  labels: Record<string, any>;
  label?: string;
+  description?: React.ReactNode;
  onChange?: (labels: Record<string, any>) => void;
 }

 const LabelSelector: React.FC<LabelSelectorProps> = ({
  labels,
  onChange,
-  label
+  label,
+  description
 }) => {
-  const [labelList, setLabelList] = React.useState<any[]>([]);
+  const [labelsData, setLabelsData] = useState({});
+  const [labelList, setLabelList] = useState<{ key: string; value: string }[]>(
+    []
+  );

  useEffect(() => {
-    const list = _.map(_.keys(labels), (key: string) => {
-      return {
-        key,
-        value: labels[key]
-      };
-    });
-    setLabelList(list);
+    if (!_.isEqual(labels, labelsData)) {
+      setLabelsData(labels || {});
+      const list = _.map(_.keys(labels), (key: string) => {
+        return {
+          key,
+          value: labels[key]
+        };
+      });
+      setLabelList(list);
+    }
  }, [labels]);

-  const handleOnChange = (index: string, label: any) => {
-    const list = _.cloneDeep(labelList);
-    list[index] = label;
-    const newLabels = _.reduce(
-      list,
-      (result: any, item: any) => {
-        result[item.key] = item.value;
-        return result;
-      },
-      {}
-    );
-    onChange?.(newLabels);
-  };
-
-  const handleAddLabel = () => {
-    setLabelList([
-      ...labelList,
-      {
-        key: '',
-        value: ''
-      }
-    ]);
-  };
-
-  const handleOnDelete = (index: string) => {
-    const list = _.cloneDeep(labelList);
-    list.splice(parseInt(index), 1);
-    setLabelList(list);
-    const newLabels = _.reduce(
-      list,
-      (result: any, item: any) => {
-        result[item.key] = item.value;
-        return result;
-      },
-      {}
-    );
-    onChange?.(newLabels);
+  const handleLabelListChange = useCallback(
+    (list: { key: string; value: string }[]) => {
+      setLabelList(list);
+    },
+    [setLabelList]
+  );
+  const handleLabelsChange = (data: Record<string, any>) => {
+    setLabelsData(data);
+    onChange?.(data);
  };

  return (
-    <Wrapper label={label}>
-      {_.map(labelList, (item: any, index: string) => {
-        return (
-          <LabelItem
-            key={index}
-            label={{
-              key: item.key,
-              value: item.value
-            }}
-            seperator=":"
-            onDelete={() => handleOnDelete(index)}
-            onChange={(obj) => handleOnChange(index, obj)}
-          />
-        );
-      })}
-      <div>
-        <Button
-          size="small"
-          type="default"
-          shape="circle"
-          style={{ marginTop: 16 }}
-        >
-          <PlusOutlined className="font-size-14" onClick={handleAddLabel} />
-        </Button>
-      </div>
-    </Wrapper>
+    <Inner
+      label={label}
+      description={description}
+      labels={labelsData}
+      labelList={labelList}
+      onChange={handleLabelsChange}
+      onLabelListChange={handleLabelListChange}
+    />
  );
 };

@@ -0,0 +1,109 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import _ from 'lodash';
+import React, { useRef } from 'react';
+import LabelItem from './label-item';
+import Wrapper from './wrapper';
+interface LabelSelectorProps {
+  labels: Record<string, any>;
+  label?: string;
+  labelList: Array<{ key: string; value: string }>;
+  onLabelListChange: (list: { key: string; value: string }[]) => void;
+  onChange?: (labels: Record<string, any>) => void;
+  description?: React.ReactNode;
+}
+
+const Inner: React.FC<LabelSelectorProps> = ({
+  labels,
+  labelList,
+  onChange,
+  onLabelListChange,
+  label,
+  description
+}) => {
+  const intl = useIntl();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const updateLabels = (list: { key: string; value: string }[]) => {
+    const newLabels = _.reduce(
+      list,
+      (result: any, item: any) => {
+        if (item.key) {
+          result[item.key] = item.value;
+        }
+        return result;
+      },
+      {}
+    );
+    onChange?.(newLabels);
+  };
+  const handleOnChange = (index: string, label: any) => {
+    const list = _.cloneDeep(labelList);
+    list[index] = label;
+    onLabelListChange(list);
+    updateLabels(list);
+  };
+
+  const handleAddLabel = () => {
+    const newLabelList = [
+      ...labelList,
+      {
+        key: '',
+        value: ''
+      }
+    ];
+    onLabelListChange(newLabelList);
+    updateLabels(newLabelList);
+
+    setTimeout(() => {
+      // button scroll to view
+      buttonRef.current?.scrollIntoView?.({ behavior: 'smooth' });
+    }, 100);
+  };
+
+  const handleOnDelete = (index: string) => {
+    const list = _.cloneDeep(labelList);
+    list.splice(parseInt(index), 1);
+    onLabelListChange(list);
+    updateLabels(list);
+  };
+
+  return (
+    <Wrapper label={label} description={description}>
+      <>
+        {_.map(labelList, (item: any, index: string) => {
+          return (
+            <LabelItem
+              key={index}
+              label={item}
+              seperator=":"
+              labelList={labelList}
+              onDelete={() => handleOnDelete(index)}
+              onChange={(obj) => handleOnChange(index, obj)}
+            />
+          );
+        })}
+        <div className="flex justify-center">
+          <Button
+            ref={buttonRef}
+            type="text"
+            block
+            style={{
+              marginTop: 16,
+              backgroundColor: 'var(--ant-color-fill-secondary)'
+            }}
+            onClick={handleAddLabel}
+          >
+            <PlusOutlined className="font-size-14" />{' '}
+            {intl.formatMessage({
+              id: 'common.button.addLabel'
+            })}
+          </Button>
+        </div>
+      </>
+    </Wrapper>
+  );
+};
+
+export default React.memo(Inner);
@@ -1,9 +1,10 @@
 import SealInput from '@/components/seal-form/seal-input';
 import { MinusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
-import React from 'react';
+import { useIntl } from '@umijs/max';
+import { Button, Tooltip } from 'antd';
+import _ from 'lodash';
+import React, { useState } from 'react';
 import './styles/label-item.less';
-
 interface LabelItemProps {
  label: {
    key: string;
@@ -15,16 +16,21 @@ interface LabelItemProps {
  valueAddon?: React.ReactNode;
  seperator?: string;
  onDelete?: () => void;
+  labelList: { key: string; value: string }[];
  onChange?: (params: { key: string; value: string }) => void;
 }
 const LabelItem: React.FC<LabelItemProps> = ({
  label,
+  labelList,
  seperator,
  keyAddon,
  valueAddon,
  onChange,
  onDelete
 }) => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+
  const handleOnValueChange = (e: any) => {
    const value = e.target.value;
    onChange?.({
@@ -36,20 +42,47 @@ const LabelItem: React.FC<LabelItemProps> = ({
  const handleOnKeyChange = (e: any) => {
    const key = e.target.value;
    onChange?.({
-      key: key,
+      key,
      value: label.value
    });
  };

+  const handleKeyOnBlur = (e: any) => {
+    const val = e.target.value;
+    // has duplicate key
+    const duplicates = _.filter(
+      labelList,
+      (item: Global.BaseListItem) => val && val === item.key
+    );
+    if (duplicates.length > 1) {
+      setOpen(true);
+      onChange?.({
+        key: '',
+        value: label.value
+      });
+      setTimeout(() => {
+        setOpen(false);
+      }, 1000);
+    } else {
+      setOpen(false);
+    }
+  };
+
  return (
    <div className="label-item">
      <div className="label-key">
        {keyAddon ?? (
-          <SealInput.Input
-            label="Key"
-            value={label.key}
-            onChange={handleOnKeyChange}
-          ></SealInput.Input>
+          <Tooltip
+            open={open}
+            title={intl.formatMessage({ id: 'resources.table.key.tips' })}
+          >
+            <SealInput.Input
+              label="Key"
+              value={label.key}
+              onChange={handleOnKeyChange}
+              onBlur={handleKeyOnBlur}
+            ></SealInput.Input>
+          </Tooltip>
        )}
      </div>
      {seperator && <span className="seprator">{seperator}</span>}
@@ -75,4 +108,4 @@ const LabelItem: React.FC<LabelItemProps> = ({
  );
 };

-export default LabelItem;
+export default React.memo(LabelItem);
@@ -1,7 +1,7 @@
 .wrapper {
  position: relative;
-  padding: 16px 24px;
-  padding-top: 30px;
+  padding: 16px;
+  padding-top: 34px;
  border: 1px solid var(--ant-color-border);
  border-radius: var(--border-radius-base);
  display: flex;
@@ -12,7 +12,8 @@
      position: absolute;
      left: 24px;
      line-height: 1;
-      top: 10px;
+      top: 12px;
+      color: var(--ant-color-text-tertiary);
    }
  }
 }
@@ -4,13 +4,14 @@ import styles from './styles/wrapper.less';

 const Wrapper: React.FC<{
  label?: string;
+  description?: React.ReactNode;
  children: React.ReactNode;
-}> = ({ children, label }) => {
+}> = ({ children, label, description }) => {
  return (
    <div className={styles['wrapper']}>
      {label && (
        <span className="label">
-          <LabelInfo label={label}></LabelInfo>
+          <LabelInfo label={label} description={description}></LabelInfo>
        </span>
      )}
      {children}
@@ -96,6 +96,10 @@
  flex: 1;
  padding-block: 20px 0;

+  &.no-wrapper-style {
+    padding-block: 0;
+  }
+
  .extra {
    position: absolute;
    right: 12px;
@@ -4,8 +4,9 @@ import LabelInfo from './label-info';
 import wrapperStyle from './wrapper.less';
 interface WrapperProps {
  children: React.ReactNode;
-  label: React.ReactNode;
-  isFocus: boolean;
+  label?: React.ReactNode;
+  noWrapperStyle?: boolean;
+  isFocus?: boolean;
  status?: string;
  required?: boolean;
  description?: React.ReactNode;
@@ -29,6 +30,7 @@ const Wrapper: React.FC<WrapperProps> = ({
  extra,
  variant,
  addAfter,
+  noWrapperStyle,
  onClick
 }) => {
  return (
@@ -42,7 +44,12 @@ const Wrapper: React.FC<WrapperProps> = ({
        className ? wrapperStyle[className] : ''
      )}
    >
-      <div className={classNames(wrapperStyle.wrapper)} onClick={onClick}>
+      <div
+        className={classNames(wrapperStyle.wrapper, {
+          [wrapperStyle['no-wrapper-style']]: noWrapperStyle
+        })}
+        onClick={onClick}
+      >
        <label
          onClick={onClick}
          className={classNames(
@@ -91,6 +91,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
    >
      <Input.TextArea
        {...rest}
+        autoSize={rest.autoSize || { minRows: 2, maxRows: 5 }}
        ref={inputRef}
        style={{ minHeight: '80px', ...style }}
        className="seal-textarea"
@@ -22,5 +22,15 @@ declare namespace Global {
    id: number;
  }

+  interface BaseListItem {
+    key: string;
+    value: string | number;
+  }
+
+  interface BaseOption {
+    label: string;
+    value: string | number;
+  }
+
  type SearchParams = Pagination & { search?: string };
 }
@@ -201,5 +201,6 @@ export default {
  'common.button.feedback': 'Feedback',
  'common.button.docs': 'Documentation',
  'common.button.version': 'Version',
-  'common.title.delete.confirm': 'Confirm delete'
+  'common.title.delete.confirm': 'Confirm delete',
+  'common.button.addLabel': 'Add Label'
 };
@@ -2,7 +2,23 @@ export default {
  'resources.title': 'Resources',
  'resources.nodes': 'Nodes',
  'resources.button.create': 'Add Worker',
+  'resources.button.edittags': 'Edit Labels',
+  'resources.button.update': 'Update Labels',
+  'resources.table.labels': 'Labels',
  'resources.table.hostname': 'Hostname',
+  'resources.table.key.tips': 'The same key exists.',
+  'resources.form.advanced': 'Advanced',
+  'resources.form.enablePartialOffload': 'Enable Partial Offload',
+  'resources.form.placementStrategy': 'Placement Strategy',
+  'resources.form.workerSelector': 'Matching Worker Labels',
+  'resources.form.enableDistributedInferenceAcrossWorkers':
+    'Enable Distributed Inference Across Workers',
+  'resources.form.spread.tips':
+    'Make the resources of the entire cluster relatively evenly distributed among all workers. It may produce more resource fragmentation on a single worker.',
+  'resources.form.binpack.tips':
+    'Prioritize the overall utilization of cluster resources, reducing resource fragmentation on Workers/GPUs.',
+  'resources.form.workerSelector.description':
+    'The scheduling system selects the most suitable GPU or Worker for deploying model instances based on predefined labels.',
  'resources.table.ip': 'IP',
  'resources.table.cpu': 'CPU',
  'resources.table.memory': 'RAM',
@@ -194,5 +194,6 @@ export default {
  'common.button.feedback': '反馈',
  'common.button.docs': '文档',
  'common.button.version': '版本',
-  'common.title.delete.confirm': '确认删除'
+  'common.title.delete.confirm': '确认删除',
+  'common.button.addLabel': '添加标签'
 };
@@ -1,8 +1,23 @@
 export default {
  'resources.title': '资源',
  'resources.button.create': '添加 Worker',
+  'resources.button.edittags': '编辑标签',
+  'resources.button.update': '更新标签',
  'resources.nodes': '节点',
  'resources.table.hostname': '主机名',
+  'resources.table.key.tips': '存在相同的 key.',
+  'resources.table.labels': '标签',
+  'resources.form.advanced': '高级',
+  'resources.form.enablePartialOffload': '开启半卸载',
+  'resources.form.placementStrategy': '放置策略',
+  'resources.form.workerSelector': '匹配的 Worker 标签',
+  'resources.form.enableDistributedInferenceAcrossWorkers': '跨节点分布式推理',
+  'resources.form.spread.tips':
+    '使得集群整体的资源在所有 Worker 之间分配地相对均匀。可能会在单个 Worker 上产生较多资源碎片。',
+  'resources.form.binpack.tips':
+    '优先考虑整体集群的资源最大化利用，减少 Worker/GPU 上的资源碎片。',
+  'resources.form.workerSelector.description':
+    '调度系统在部署模型实例时，会根据预定义的标签来选择最符合要求的 GPU 或 Worker。',
  'resources.table.ip': 'IP',
  'resources.table.cpu': 'CPU',
  'resources.table.memory': '内存',
@@ -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;
+    }
+  }
+}
@@ -29,3 +29,10 @@ export async function deleteWorker(id: string | number) {
    method: 'DELETE'
  });
 }
+
+export async function updateWorker(id: string | number, data: any) {
+  return request(`${WORKERS_API}/${id}`, {
+    method: 'PUT',
+    data
+  });
+}
@@ -0,0 +1,111 @@
+import LabelSelector from '@/components/label-selector';
+import ModalFooter from '@/components/modal-footer';
+import SealInput from '@/components/seal-form/seal-input';
+import { useIntl } from '@umijs/max';
+import { Form, Modal } from 'antd';
+import React from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
+
+type ViewModalProps = {
+  open: boolean;
+  onCancel: () => void;
+  onOk: (values: FormData) => Promise<void>;
+  data: {
+    name: string;
+    labels: object;
+  };
+};
+interface FormData {
+  labels: object;
+  name: string;
+}
+
+const UpdateLabels: React.FC<ViewModalProps> = (props) => {
+  const { open, onCancel, data, onOk } = props || {};
+  const intl = useIntl();
+  const [form] = Form.useForm();
+  const labels = Form.useWatch('labels', form);
+
+  const handleLabelsChange = (labels: object) => {
+    form.setFieldValue('labels', labels);
+  };
+
+  const handleSumit = () => {
+    form.submit();
+  };
+
+  return (
+    <Modal
+      title={intl.formatMessage({ id: 'resources.button.edittags' })}
+      open={open}
+      centered={true}
+      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 onOk={handleSumit} onCancel={onCancel}></ModalFooter>
+      }
+    >
+      <SimpleBar
+        style={{
+          maxHeight: '550px'
+        }}
+      >
+        <Form
+          name="deployModel"
+          form={form}
+          onFinish={onOk}
+          preserve={false}
+          clearOnDestroy={true}
+          initialValues={{
+            name: data.name,
+            labels: data.labels
+          }}
+          style={{
+            padding: 'var(--ant-modal-content-padding)',
+            paddingBlock: 0
+          }}
+        >
+          <Form.Item<FormData> name="name">
+            <SealInput.Input
+              label={intl.formatMessage({
+                id: 'common.table.name'
+              })}
+              disabled
+            />
+          </Form.Item>
+          <Form.Item<FormData> name="labels">
+            <LabelSelector
+              label={intl.formatMessage({
+                id: 'resources.table.labels'
+              })}
+              labels={labels}
+              onChange={handleLabelsChange}
+            ></LabelSelector>
+          </Form.Item>
+        </Form>
+      </SimpleBar>
+    </Modal>
+  );
+};
+
+export default React.memo(UpdateLabels);
@@ -1,4 +1,6 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
+import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
 import StatusTag from '@/components/status-tag';
@@ -10,19 +12,37 @@ import {
  DeleteOutlined,
  InfoCircleOutlined,
  PlusOutlined,
-  SyncOutlined
+  SyncOutlined,
+  TagsOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Space, Table, Tooltip } from 'antd';
+import { Button, Input, Space, Table, Tooltip, message } from 'antd';
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { deleteWorker, queryWorkersList } from '../apis';
+import { deleteWorker, queryWorkersList, updateWorker } from '../apis';
 import { WorkerStatusMapValue, status } from '../config';
 import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
 import AddWorker from './add-worker';
+import UpdateLabels from './update-labels';
 const { Column } = Table;

+const ActionList = [
+  {
+    label: 'resources.button.edittags',
+    key: 'edit',
+    icon: <TagsOutlined />
+  },
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    props: {
+      danger: true
+    },
+    icon: <DeleteOutlined />
+  }
+];
+
 const Resources: React.FC = () => {
  console.log('resources======workers');

@@ -47,6 +67,13 @@ const Resources: React.FC = () => {
    perPage: 10,
    search: ''
  });
+  const [updateLabelsData, setUpdateLabelsData] = useState<{
+    open: boolean;
+    data: ListItem;
+  }>({
+    open: false,
+    data: {} as ListItem
+  });

  const fetchData = useCallback(async () => {
    setDataSource((pre) => {
@@ -164,6 +191,52 @@ const Resources: React.FC = () => {
      0
    );
  };
+
+  const handleUpdateLabelsOk = useCallback(
+    async (values: Record<string, any>) => {
+      try {
+        console.log('updateLabelsData.data', updateLabelsData.data);
+        await updateWorker(updateLabelsData.data.id, {
+          ...updateLabelsData.data,
+          labels: values.labels
+        });
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
+        fetchData();
+        setUpdateLabelsData({ open: false, data: {} as ListItem });
+      } catch (error) {
+        console.log('error', error);
+      }
+    },
+    [updateLabelsData, fetchData]
+  );
+
+  const handleCancelUpdateLabels = useCallback(() => {
+    setUpdateLabelsData({
+      ...updateLabelsData,
+      open: false
+    });
+  }, []);
+
+  const handleUpdateLabels = (record: ListItem) => {
+    console.log('record', record);
+    setUpdateLabelsData({
+      open: true,
+      data: {
+        ...record
+      }
+    });
+  };
+
+  const handleSelect = (val: any, record: ListItem) => {
+    if (val === 'edit') {
+      handleUpdateLabels(record);
+      return;
+    }
+    if (val === 'delete') {
+      handleDelete(record);
+    }
+  };
+
  useEffect(() => {
    fetchData();
  }, [queryParams]);
@@ -236,6 +309,32 @@ const Resources: React.FC = () => {
          dataIndex="name"
          key="name"
        />
+        <Column
+          title={intl.formatMessage({ id: 'resources.table.labels' })}
+          dataIndex="labels"
+          key="labels"
+          width={200}
+          render={(text, record: ListItem) => {
+            return (
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: 6,
+                  maxWidth: 200
+                }}
+              >
+                {_.map(record.labels, (item: any, index: string) => {
+                  return (
+                    <AutoTooltip key={index} className="m-r-0" maxWidth={120}>
+                      {index}:{item}
+                    </AutoTooltip>
+                  );
+                })}
+              </div>
+            );
+          }}
+        />
        <Column
          title={intl.formatMessage({ id: 'common.table.status' })}
          dataIndex="state"
@@ -398,24 +497,25 @@ const Resources: React.FC = () => {
          key="operation"
          render={(text, record: ListItem) => {
            return (
-              <Space size={20}>
-                <Tooltip
-                  title={intl.formatMessage({ id: 'common.button.delete' })}
-                >
-                  <Button
-                    onClick={() => handleDelete(record)}
-                    size="small"
-                    danger
-                    icon={<DeleteOutlined></DeleteOutlined>}
-                  ></Button>
-                </Tooltip>
-              </Space>
+              <DropdownButtons
+                items={ActionList}
+                onSelect={(val) => handleSelect(val, record)}
+              ></DropdownButtons>
            );
          }}
        />
      </Table>
      <DeleteModal ref={modalRef}></DeleteModal>
      <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
+      <UpdateLabels
+        open={updateLabelsData.open}
+        onOk={handleUpdateLabelsOk}
+        onCancel={handleCancelUpdateLabels}
+        data={{
+          name: updateLabelsData.data.name,
+          labels: updateLabelsData.data.labels
+        }}
+      ></UpdateLabels>
    </>
  );
 };