From 7e8b5f1f635339c69de4630f6e095545f58d6f3a Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 1 Apr 2025 10:56:06 +0800
Subject: [PATCH] fix: model filter by worker

---
 .../image-editor/hooks/use-drawing.ts         |  38 +++----
 src/components/image-editor/index.tsx         |  60 +++++-----
 src/components/page-tools/index.tsx           |   2 +-
 src/components/seal-form/wrapper/index.tsx    |  24 ++--
 src/global.less                               |   4 +
 .../playground/components/dynamic-params.tsx  |   1 +
 .../components/ground-embedding.tsx           |   5 +-
 .../playground/components/ground-reranker.tsx |   7 +-
 .../components/model-parameters.tsx           | 106 ------------------
 src/pages/playground/style/rerank.less        |   1 +
 .../resources/components/model-files.tsx      |   2 +-
 src/pages/resources/components/workers.tsx    |   4 +-
 12 files changed, 72 insertions(+), 182 deletions(-)
 delete mode 100644 src/pages/playground/components/model-parameters.tsx

diff --git a/src/components/image-editor/hooks/use-drawing.ts b/src/components/image-editor/hooks/use-drawing.ts
index e70637b2..dd0875db 100644
--- a/src/components/image-editor/hooks/use-drawing.ts
+++ b/src/components/image-editor/hooks/use-drawing.ts
@@ -127,32 +127,26 @@ export default function useDrawing(props: {
     offCtx!.setTransform(scale, 0, 0, scale, translateX, translateY);
   }, []);
 
-  const getTransformedPoint = useCallback(
-    (offsetX: number, offsetY: number) => {
-      const { current: scale } = autoScale;
-      console.log('lineWidth:----------', lineWidth, autoScale.current);
+  const getTransformedPoint = (offsetX: number, offsetY: number) => {
+    const { current: scale } = autoScale;
+    console.log('lineWidth:----------', lineWidth, autoScale.current);
 
-      const { x: translateX, y: translateY } = translatePos.current;
+    const { x: translateX, y: translateY } = translatePos.current;
 
-      const transformedX = (offsetX - translateX) / scale;
-      const transformedY = (offsetY - translateY) / scale;
+    const transformedX = (offsetX - translateX) / scale;
+    const transformedY = (offsetY - translateY) / scale;
 
-      return {
-        x: transformedX,
-        y: transformedY
-      };
-    },
-    []
-  );
+    return {
+      x: transformedX,
+      y: transformedY
+    };
+  };
 
-  const getTransformLineWidth = useCallback(
-    (w = 1) => {
-      console.log('lineWidth:', lineWidth, autoScale.current);
-      const width = w || lineWidth;
-      return width / autoScale.current;
-    },
-    [lineWidth]
-  );
+  const getTransformLineWidth = (w = 1) => {
+    console.log('lineWidth:', lineWidth, autoScale.current);
+    const width = w || lineWidth;
+    return width / autoScale.current;
+  };
 
   const drawLine = useCallback(
     (
diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx
index e481ce42..f937db68 100644
--- a/src/components/image-editor/index.tsx
+++ b/src/components/image-editor/index.tsx
@@ -27,6 +27,7 @@ const LoadWrapper = styled.div<{ width?: number; height?: number }>`
   width: ${(props) => `${props.width}px` || '100%'};
   z-index: 100;
 `;
+
 const Loading = (props: { width: number; height: number }) => {
   const { width, height } = props;
   return (
@@ -161,37 +162,35 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       link.click();
     }, [generateMask]);
 
-    const drawFillRect = useCallback(
-      (
-        ctx: CanvasRenderingContext2D,
-        stroke: Stroke | Point[],
-        options: {
-          lineWidth?: number;
-          color: string;
-          isInitial?: boolean;
-        }
-      ) => {
-        const { color, isInitial } = options;
+    const drawFillRect = (
+      ctx: CanvasRenderingContext2D,
+      stroke: Stroke | Point[],
+      options: {
+        lineWidth?: number;
+        color: string;
+        isInitial?: boolean;
+      }
+    ) => {
+      const { color, isInitial } = options;
 
-        stroke.forEach((point) => {
-          const { x, y } = getTransformedPoint(point.x, point.y);
-          const width = getTransformLineWidth(point.lineWidth);
-          if (isInitial) {
-            ctx.save();
-            ctx.fillStyle = 'rgba(0,0,0,1)';
-            ctx.globalCompositeOperation = 'destination-out';
-            ctx.fillRect(x - width / 2, y - width / 2, width, width);
-            ctx.restore();
-          }
-
-          // draw the new stroke
-          ctx.globalCompositeOperation = 'source-over';
-          ctx.fillStyle = color;
+      stroke.forEach((point) => {
+        const { x, y } = getTransformedPoint(point.x, point.y);
+        const width = getTransformLineWidth(point.lineWidth);
+        console.log('Drawing stroke:', point, width);
+        if (isInitial) {
+          ctx.save();
+          ctx.fillStyle = 'rgba(0,0,0,1)';
+          ctx.globalCompositeOperation = 'destination-out';
           ctx.fillRect(x - width / 2, y - width / 2, width, width);
-        });
-      },
-      [getTransformLineWidth, getTransformedPoint]
-    );
+          ctx.restore();
+        }
+
+        // draw the new stroke
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.fillStyle = color;
+        ctx.fillRect(x - width / 2, y - width / 2, width, width);
+      });
+    };
 
     const onReset = useCallback(() => {
       clearOverlayCanvas();
@@ -210,12 +209,13 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       const overlayCanvas = overlayCanvasRef.current!;
       const overlayCtx = overlayCanvas.getContext('2d')!;
 
-      strokes.forEach((stroke: Point[]) => {
+      strokes.forEach((stroke: Point[], index) => {
         drawFillRect(overlayCtx, stroke, {
           color: COLOR,
           isInitial: isInitial
         });
       });
+      console.log('Loading mask pixels-------:');
     };
 
     const redrawStrokes = (strokes: Stroke[]) => {
diff --git a/src/components/page-tools/index.tsx b/src/components/page-tools/index.tsx
index 77d059f1..279063f1 100644
--- a/src/components/page-tools/index.tsx
+++ b/src/components/page-tools/index.tsx
@@ -60,7 +60,7 @@ interface FilterBarProps {
   handleClickPrimary: (item: any) => void;
   rowSelection: any;
   actionItems: ActionItem[];
-  selectOptions?: Global.BaseListItem<string>[];
+  selectOptions?: Global.BaseOption<string | number>[];
   showSelect?: boolean;
   buttonText: string;
   buttonIcon?: React.ReactNode;
diff --git a/src/components/seal-form/wrapper/index.tsx b/src/components/seal-form/wrapper/index.tsx
index eb1b2d90..6962965a 100644
--- a/src/components/seal-form/wrapper/index.tsx
+++ b/src/components/seal-form/wrapper/index.tsx
@@ -87,13 +87,13 @@ const WrapperBox = styled.div`
 
 // wrapper
 const InnerWrapper = styled.div.attrs<{
-  noWrapperStyle?: boolean;
-  nolabel?: boolean;
+  $noWrapperStyle?: boolean;
+  $nolabel?: boolean;
 }>((props) => ({
   className: classNames({
     __wrapper__: true,
-    'no-wrapper-style': props.noWrapperStyle,
-    'no-label': props.nolabel
+    'no-wrapper-style': props.$noWrapperStyle,
+    'no-label': props.$nolabel
   })
 }))`
   position: relative;
@@ -118,13 +118,13 @@ const InnerWrapper = styled.div.attrs<{
 
 // label
 export const Label = styled.div.attrs<{
-  isFocus?: boolean;
-  hasPrefix?: boolean;
+  $isFocus?: boolean;
+  $hasPrefix?: boolean;
 }>((props) => ({
   className: classNames({
-    'isfoucs-has-value': props.isFocus,
-    'blur-no-value': !props.isFocus,
-    'has-prefix': props.hasPrefix
+    'isfoucs-has-value': props.$isFocus,
+    'blur-no-value': !props.$isFocus,
+    'has-prefix': props.$hasPrefix
   })
 }))`
   position: absolute;
@@ -204,12 +204,12 @@ const Wrapper: FC<WrapperProps> = ({
   return (
     <WrapperBox className={wrapperClass}>
       <InnerWrapper
-        noWrapperStyle={noWrapperStyle}
-        nolabel={!label}
+        $noWrapperStyle={noWrapperStyle}
+        $nolabel={!label}
         onClick={onClick}
       >
         {label && (
-          <Label isFocus={isFocus} hasPrefix={hasPrefix} onClick={onClick}>
+          <Label $isFocus={isFocus} $hasPrefix={hasPrefix} onClick={onClick}>
             <LabelInfo
               label={label}
               required={required}
diff --git a/src/global.less b/src/global.less
index 90ef7c8d..4f6c3dc5 100644
--- a/src/global.less
+++ b/src/global.less
@@ -900,3 +900,7 @@ body {
   color: var(--ant-color-text-tertiary);
   font-weight: var(--font-weight-medium);
 }
+
+.ant-progress-line {
+  font-size: var(--font-size-small);
+}
diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx
index 4ddebb38..c705bdcd 100644
--- a/src/pages/playground/components/dynamic-params.tsx
+++ b/src/pages/playground/components/dynamic-params.tsx
@@ -79,6 +79,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
           ])
         );
         form.setFieldsValue(normalizedValues);
+        console.log('handleValuesChange', normalizedValues, allValues);
         onValuesChange?.(normalizedValues, {
           ...allValues,
           ...normalizedValues
diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx
index 4c9298fc..9f135890 100644
--- a/src/pages/playground/components/ground-embedding.tsx
+++ b/src/pages/playground/components/ground-embedding.tsx
@@ -19,7 +19,7 @@ import _ from 'lodash';
 import { PCA } from 'ml-pca';
 import 'overlayscrollbars/overlayscrollbars.css';
 import { Resizable } from 're-resizable';
-import {
+import React, {
   forwardRef,
   useCallback,
   useEffect,
@@ -438,9 +438,8 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
       if (changeValues.model) {
         setScatterData([]);
         setTokenResult(null);
-      } else {
-        handleOnValuesChange(changeValues, allValues);
       }
+      handleOnValuesChange(changeValues, allValues);
     },
     []
   );
diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx
index 0690fcc1..cb62472d 100644
--- a/src/pages/playground/components/ground-reranker.tsx
+++ b/src/pages/playground/components/ground-reranker.tsx
@@ -13,7 +13,7 @@ import { Button, Checkbox, Form, Input, Spin, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
-import {
+import React, {
   forwardRef,
   useCallback,
   useEffect,
@@ -113,7 +113,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [sortIndexMap, setSortIndexMap] = useState<number[]>([]);
   const [queryValue, setQueryValue] = useState<string>('');
   const selectionTextRef = useRef<any>(null);
-  const [metaData, setMetaData] = useState<any>({});
 
   const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
     useOverlayScroller();
@@ -353,7 +352,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
       if (!multiplePasteEnable.current) return;
       const text = e.clipboardData.getData('text');
       if (text) {
-        const currentContent = textList[index]?.text;
         const dataLlist = text.split('\n').map((item: string) => {
           return {
             text: item?.trim(),
@@ -432,9 +430,8 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   const onValuesChange = useCallback((changedValues: any, allValues: any) => {
     if (changedValues.model) {
       setTokenResult(null);
-    } else {
-      handleOnValuesChange(changedValues, allValues);
     }
+    handleOnValuesChange(changedValues, allValues);
   }, []);
 
   // useHotkeys(
diff --git a/src/pages/playground/components/model-parameters.tsx b/src/pages/playground/components/model-parameters.tsx
deleted file mode 100644
index 5cb3684b..00000000
--- a/src/pages/playground/components/model-parameters.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import FieldComponent from '@/components/seal-form/field-component';
-import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
-import _ from 'lodash';
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useMemo
-} from 'react';
-import { ParamsSchema } from '../config/types';
-
-type ParamsSettingsProps = {
-  ref?: any;
-  style?: React.CSSProperties;
-  onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
-  paramsConfig?: ParamsSchema[];
-  initialValues?: Record<string, any>;
-  extra?: React.ReactNode;
-};
-
-const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
-  ({ onValuesChange, style, paramsConfig, initialValues, extra }, ref) => {
-    const intl = useIntl();
-    const [form] = Form.useForm();
-    const formId = useId();
-
-    useImperativeHandle(ref, () => ({
-      form
-    }));
-
-    useEffect(() => {
-      form.setFieldsValue({
-        ...initialValues
-      });
-    }, [initialValues]);
-
-    const handleOnFinish = (values: any) => {
-      console.log('handleOnFinish', values);
-    };
-
-    const handleOnFinishFailed = (errorInfo: any) => {
-      console.log('handleOnFinishFailed', errorInfo);
-    };
-
-    const handleValuesChange = useCallback(
-      (changedValues: any, allValues: any) => {
-        onValuesChange?.(changedValues, allValues);
-      },
-      [onValuesChange]
-    );
-
-    const renderFields = useMemo(() => {
-      if (!paramsConfig) {
-        return null;
-      }
-      const formValues = form?.getFieldsValue();
-      return paramsConfig?.map((item: ParamsSchema) => {
-        return (
-          <Form.Item name={item.name} rules={item.rules} key={item.name}>
-            <FieldComponent
-              disabled={
-                item.disabledConfig
-                  ? item.disabledConfig?.when?.(formValues)
-                  : item.disabled
-              }
-              description={
-                item.description?.isLocalized
-                  ? intl.formatMessage({ id: item.description.text })
-                  : item.description?.text
-              }
-              onChange={null}
-              {..._.omit(item, [
-                'name',
-                'rules',
-                'disabledConfig',
-                'description'
-              ])}
-            ></FieldComponent>
-          </Form.Item>
-        );
-      });
-    }, [paramsConfig, intl]);
-
-    return (
-      <Form
-        style={{ ...style }}
-        name={formId}
-        form={form}
-        onValuesChange={handleValuesChange}
-        onFinish={handleOnFinish}
-        onFinishFailed={handleOnFinishFailed}
-      >
-        <div>
-          {renderFields}
-          {extra}
-        </div>
-      </Form>
-    );
-  }
-);
-
-export default memo(ParamsSettings);
diff --git a/src/pages/playground/style/rerank.less b/src/pages/playground/style/rerank.less
index 72b08ff6..5a49f072 100644
--- a/src/pages/playground/style/rerank.less
+++ b/src/pages/playground/style/rerank.less
@@ -77,6 +77,7 @@
       border-radius: 4px;
       align-items: center;
       transform: scale(0.85);
+      font-weight: var(--font-weight-500);
     }
   }
 }
diff --git a/src/pages/resources/components/model-files.tsx b/src/pages/resources/components/model-files.tsx
index 7740bec4..b95cafb1 100644
--- a/src/pages/resources/components/model-files.tsx
+++ b/src/pages/resources/components/model-files.tsx
@@ -529,7 +529,7 @@ const ModelFiles = () => {
         handleDeleteByBatch={handleDeleteByBatch}
         handleClickPrimary={handleClickDropdown}
         handleSearch={handleSearch}
-        selectOptions={onLineSourceOptions}
+        selectOptions={workersList}
         handleInputChange={handleNameChange}
         rowSelection={rowSelection}
         actionItems={onLineSourceOptions}
diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx
index bf3ec28c..a735a04f 100644
--- a/src/pages/resources/components/workers.tsx
+++ b/src/pages/resources/components/workers.tsx
@@ -308,8 +308,8 @@ const Workers: React.FC = () => {
                           borderRadius: 12
                         }}
                       >
-                        <span className="font-600">{key}</span>
-                        <span className="text-tertiary">:{value}</span>
+                        <span>{key}</span>
+                        <span>:{value}</span>
                       </AutoTooltip>
                     );
                   })}