From 3d32ec721028825fe314d04179742beb5356fa78 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Mon, 14 Apr 2025 19:28:23 +0800
Subject: [PATCH] chore: allow switch backend between vllm and mindie

---
 src/components/overlay-scroller/index.tsx     |  4 +--
 src/components/page-tools/index.tsx           |  8 ++++-
 .../llmodels/components/search-model.tsx      |  1 +
 src/pages/llmodels/components/table-list.tsx  |  2 +-
 .../llmodels/components/update-modal.tsx      | 28 +++++++++++++-----
 src/pages/llmodels/download/index.tsx         |  3 ++
 .../resources/components/model-files.tsx      | 29 ++++++++++++-------
 7 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/components/overlay-scroller/index.tsx b/src/components/overlay-scroller/index.tsx
index 9ed5e173..6e0896e3 100644
--- a/src/components/overlay-scroller/index.tsx
+++ b/src/components/overlay-scroller/index.tsx
@@ -8,7 +8,6 @@ const Wrapper = styled.div<{ $maxHeight?: number }>`
     typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
   overflow-y: auto;
   width: 100%;
-  padding-inline: 8px;
 `;
 
 const OverlayScroller: React.FC<any> = ({
@@ -38,6 +37,8 @@ const OverlayScroller: React.FC<any> = ({
       hidden={false}
       as="div"
       style={{
+        paddingInlineStart: 8,
+        paddingInlineEnd: 8,
         ...style
       }}
     >
@@ -51,7 +52,6 @@ export const TooltipOverlayScroller: React.FC<
 > = ({ children, maxHeight, title, ...rest }) => {
   return (
     <Tooltip
-      destroyTooltipOnHide
       overlayInnerStyle={{
         width: 'max-content',
         maxWidth: 300,
diff --git a/src/components/page-tools/index.tsx b/src/components/page-tools/index.tsx
index a6b9d479..c2fbde87 100644
--- a/src/components/page-tools/index.tsx
+++ b/src/components/page-tools/index.tsx
@@ -146,7 +146,13 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
         </Button>
       </Space>
     );
-  }, [actionItems, actionType, rowSelection?.selectedRowKeys, intl]);
+  }, [
+    actionItems,
+    actionType,
+    rowSelection?.selectedRowKeys,
+    handleClickPrimary,
+    intl
+  ]);
 
   return (
     <PageTools
diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx
index 998fbae8..23089996 100644
--- a/src/pages/llmodels/components/search-model.tsx
+++ b/src/pages/llmodels/components/search-model.tsx
@@ -68,6 +68,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     modelSourceMap.huggingface_value,
     modelSourceMap.modelscope_value
   ];
+  console.log('hasLinuxWorker---------:', hasLinuxWorker);
   const [isEvaluating, setIsEvaluating] = useState<boolean>(false);
   const [current, setCurrent] = useState<string>('');
   const currentRef = useRef<string>('');
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index 3b3deec0..cb142fc8 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/src/pages/llmodels/components/table-list.tsx
@@ -529,7 +529,7 @@ const Models: React.FC<ModelsProps> = ({
 
     const config = modalConfig[item.key];
     const hasLinuxWorker = workerList.some(
-      (worker) => worker.labels?.os === 'linux'
+      (worker) => _.toLower(worker.labels?.os) === 'linux'
     );
 
     if (config) {
diff --git a/src/pages/llmodels/components/update-modal.tsx b/src/pages/llmodels/components/update-modal.tsx
index fc1b5833..30bb2e8c 100644
--- a/src/pages/llmodels/components/update-modal.tsx
+++ b/src/pages/llmodels/components/update-modal.tsx
@@ -169,8 +169,13 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     const isEndwithGGUF = _.endsWith(value, '.gguf');
     const isBlobFile = value.split('/').pop().includes('sha256');
     let backend = backendOptionsMap.llamaBox;
+    const isVllmOrAscend = [
+      backendOptionsMap.vllm,
+      backendOptionsMap.ascendMindie
+    ].includes(form.getFieldValue('backend'));
+
     if (!isEndwithGGUF || !isBlobFile) {
-      backend = backendOptionsMap.vllm;
+      backend = isVllmOrAscend ? formData!.backend : backendOptionsMap.vllm;
     }
     form.setFieldValue('backend', backend);
     handleBackendChange?.(backend);
@@ -399,6 +404,13 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     );
   }, [warningStatus.show, warningStatus.type, warningStatus.isDefault]);
 
+  const isVllmOrAscend = useMemo(() => {
+    return (
+      formData?.backend === backendOptionsMap.vllm ||
+      formData?.backend === backendOptionsMap.ascendMindie
+    );
+  }, [formData?.backend]);
+
   useEffect(() => {
     if (open && formData) {
       setOriginalFormData();
@@ -563,7 +575,8 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                     label: backendLabelMap[backendOptionsMap.vllm],
                     value: backendOptionsMap.vllm,
                     disabled:
-                      formData?.source === modelSourceMap.local_path_value
+                      formData?.source === modelSourceMap.local_path_value ||
+                      isVllmOrAscend
                         ? false
                         : isGGUF
                   },
@@ -571,7 +584,8 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                     label: backendLabelMap[backendOptionsMap.ascendMindie],
                     value: backendOptionsMap.ascendMindie,
                     disabled:
-                      formData?.source === modelSourceMap.local_path_value
+                      formData?.source === modelSourceMap.local_path_value ||
+                      isVllmOrAscend
                         ? false
                         : isGGUF
                   },
@@ -579,14 +593,14 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                     label: backendLabelMap[backendOptionsMap.voxBox],
                     value: backendOptionsMap.voxBox,
                     disabled:
-                      formData?.source === modelSourceMap.local_path_value
-                        ? false
-                        : isGGUF
+                      formData?.source !== modelSourceMap.local_path_value ||
+                      !isVllmOrAscend
                   }
                 ]}
                 disabled={
                   action === PageAction.EDIT &&
-                  formData?.source !== modelSourceMap.local_path_value
+                  formData?.source !== modelSourceMap.local_path_value &&
+                  !isVllmOrAscend
                 }
               ></SealSelect>
             </Form.Item>
diff --git a/src/pages/llmodels/download/index.tsx b/src/pages/llmodels/download/index.tsx
index 60fe29ee..d3ed9a78 100644
--- a/src/pages/llmodels/download/index.tsx
+++ b/src/pages/llmodels/download/index.tsx
@@ -19,6 +19,7 @@ type AddModalProps = {
   open: boolean;
   source: string;
   width?: string | number;
+  hasLinuxWorker?: boolean;
   workersList: Global.BaseOption<number>[];
   onOk: (values: FormData) => void;
   onCancel: () => void;
@@ -31,6 +32,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
     open,
     onOk,
     onCancel,
+    hasLinuxWorker,
     source,
     width = 600
   } = props || {};
@@ -172,6 +174,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
             >
               <ColumnWrapper>
                 <SearchModel
+                  hasLinuxWorker={hasLinuxWorker}
                   modelSource={props.source}
                   onSelectModel={handleOnSelectModel}
                   isDownload={true}
diff --git a/src/pages/resources/components/model-files.tsx b/src/pages/resources/components/model-files.tsx
index 73d75997..84649fe2 100644
--- a/src/pages/resources/components/model-files.tsx
+++ b/src/pages/resources/components/model-files.tsx
@@ -31,7 +31,7 @@ import { ConfigProvider, Empty, Table, Tag, Typography, message } from 'antd';
 import dayjs from 'dayjs';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import {
   useGenerateFormEditInitialValues,
@@ -92,7 +92,7 @@ const PathWrapper = styled.div`
 const ItemWrapper = styled.ul`
   max-width: 300px;
   margin: 0;
-  padding-inline: 15px 0;
+  padding-inline: 13px 0;
   word-break: break-word;
   li {
     line-height: 1.6;
@@ -203,17 +203,17 @@ const ModelFiles = () => {
     useGenerateModelFileOptions();
   const intl = useIntl();
   const { showSuccess } = useAppUtils();
-  const [workersList, setWorkersList] = useState<Global.BaseOption<number>[]>(
-    []
-  );
+  const [workersList, setWorkersList] = useState<any[]>([]);
   const [downloadModalStatus, setDownlaodMoalStatus] = useState<{
     show: boolean;
     width: number | string;
     source: string;
+    hasLinuxWorker: boolean;
     gpuOptions: any[];
   }>({
     show: false,
     width: 600,
+    hasLinuxWorker: false,
     source: modelSourceMap.huggingface_value,
     gpuOptions: []
   });
@@ -388,12 +388,18 @@ const ModelFiles = () => {
     return <div></div>;
   };
 
-  const handleClickDropdown = (item: any) => {
-    const config = modalConfig[item.key];
-    if (config) {
-      setDownlaodMoalStatus({ ...config, gpuOptions: [] });
-    }
-  };
+  const handleClickDropdown = useCallback(
+    (item: any) => {
+      const config = modalConfig[item.key];
+      const hasLinuxWorker = workersList.some(
+        (worker) => _.toLower(worker.labels?.os) === 'linux'
+      );
+      if (config) {
+        setDownlaodMoalStatus({ ...config, hasLinuxWorker, gpuOptions: [] });
+      }
+    },
+    [workersList]
+  );
 
   const handleDownloadCancel = () => {
     setDownlaodMoalStatus({
@@ -617,6 +623,7 @@ const ModelFiles = () => {
         open={downloadModalStatus.show}
         source={downloadModalStatus.source}
         width={downloadModalStatus.width}
+        hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
         workersList={workersList.filter(
           (item: any) => item.state === WorkerStatusMap.ready
         )}