fix: add version holder for backend

src/components/simple-table/index.less

@@ -8,22 +8,21 @@
     border-spacing: 0;
 
     td {
-      border-bottom: 1px solid var(--ant-color-split);
+      border-bottom: 1px solid var(--color-white-light-1);
     }
 
     th {
-      border-bottom: 1px solid var(--ant-color-split);
+      border-bottom: 1px solid var(--color-white-light-1);
     }
   }
 
   th {
     height: 36px;
     font-weight: 600;
-    color: var(--ant-color-text);
   }
 
   td {
-    color: var(--ant-color-text-secondary);
+    color: var(--color-white-quaternary);
   }
 
   .cell-span {
@@ -35,4 +34,16 @@
   .cell-header {
     font-weight: var(--font-weight-medium);
   }
+
+  &.light {
+    th {
+      color: var(--ant-color-text);
+      border-bottom: 1px solid var(--ant-color-split);
+    }
+
+    td {
+      color: var(--ant-color-text);
+      border-bottom: 1px solid var(--ant-color-split);
+    }
+  }
 }

src/components/simple-table/index.tsx

@@ -43,12 +43,12 @@ interface SimpleTableProps {
   rowKey: string;
 }
 const SimpleTabel: React.FC<SimpleTableProps> = (props) => {
-  const { columns, dataSource, rowKey, bordered = true } = props;
+  const { columns, dataSource, rowKey, theme, bordered = true } = props;
 
   return (
     <div>
       <table
-        className={classNames('simple-table', {
+        className={classNames('simple-table', theme, {
           'simple-table-bordered': bordered
         })}
       >

src/locales/en-US/common.ts

@@ -147,7 +147,7 @@ export default {
   'common.copy.notSupport': 'Your browser does not support Clipboard API',
   'common.title.basicInfo': 'Basic',
   'common.help.need': 'Need help?',
-  'common.help.eg': 'e.g.:',
+  'common.help.eg': 'e.g.,',
   'common.filter.label': 'Filters',
   'common.filter.isrequired.holder': 'Optional',
   'common.filter.isrequired.true': 'Required',

src/locales/en-US/models.ts

@@ -80,7 +80,7 @@ export default {
   'models.form.filePath': 'Model Path',
   'models.form.backendVersion': 'Backend Version',
   'models.form.backendVersion.tips':
-    'To use the desired version of {backend}, the system will automatically create a virtual environment in the online environment to install the corresponding version. After a GPUStack upgrade, the backend version will remain fixed. {link}',
+    'To use the desired version of {backend}{version}, the system will automatically create a virtual environment in the online environment to install the corresponding version. After a GPUStack upgrade, the backend version will remain fixed. {link}',
   'models.form.gpuselector': 'GPU Selector',
   'models.form.backend.llamabox':
     'For GGUF format models, supports Linux, macOS, and Windows.',

src/locales/ja-JP/models.ts

@@ -79,7 +79,7 @@ export default {
   'models.form.filePath': 'モデルパス',
   'models.form.backendVersion': 'バックエンドバージョン',
   'models.form.backendVersion.tips':
-    '希望する{backend}バージョンを使用するには、システムがオンライン環境で対応するバージョンをインストールする仮想環境を自動的に作成します。GPUStackのアップグレード後もバックエンドバージョンは固定されます。{link}',
+    '希望する{backend}{version}バージョンを使用するには、システムがオンライン環境で対応するバージョンをインストールする仮想環境を自動的に作成します。GPUStackのアップグレード後もバックエンドバージョンは固定されます。{link}',
   'models.form.gpuselector': 'GPUセレクター',
   'models.form.backend.llamabox':
     'GGUF形式のモデル用（Linux、macOS、Windowsをサポート）。',

src/locales/ru-RU/models.ts

@@ -80,7 +80,7 @@ export default {
   'models.form.filePath': 'Путь к модели',
   'models.form.backendVersion': 'Версия бэкенда',
   'models.form.backendVersion.tips':
-    'Чтобы использовать желаемую версию {backend}, система автоматически создаст виртуальную среду в онлайн-окружении для установки соответствующей версии. После обновления GPUStack версия бэкенда останется зафиксированной. {link}',
+    'Чтобы использовать желаемую версию {backend} {version}, система автоматически создаст виртуальную среду в онлайн-окружении для установки соответствующей версии. После обновления GPUStack версия бэкенда останется зафиксированной. {link}',
   'models.form.gpuselector': 'Селектор GPU',
   'models.form.backend.llamabox':
     'Для моделей формата GGUF. Поддержка Linux, macOS и Windows.',

src/locales/zh-CN/common.ts

@@ -141,7 +141,7 @@ export default {
   'common.copy.notSupport': '您的浏览器不支持剪贴板 API',
   'common.title.basicInfo': '基本信息',
   'common.help.need': '需要帮助？',
-  'common.help.eg': '例:',
+  'common.help.eg': '例如:',
   'common.filter.label': '筛选',
   'common.filter.isrequired.holder': '是否必填',
   'common.filter.isrequired.true': '必填',

src/locales/zh-CN/models.ts

@@ -79,7 +79,7 @@ export default {
   'models.form.filePath': '模型路径',
   'models.form.backendVersion': '后端版本',
   'models.form.backendVersion.tips':
-    '固定以使用期望的 {backend} 版本，在线环境会自动创建虚拟环境安装对应版本的 {backend}。在 GPUStack 升级后也将保持固定的后端版本。{link}',
+    '固定以使用期望的 {backend} 版本 {version}，在线环境会自动创建虚拟环境安装对应版本的 {backend}。在 GPUStack 升级后也将保持固定的后端版本。{link}',
   'models.form.gpuselector': 'GPU 选择器',
   'models.form.backend.llamabox':
     '用于 GGUF 格式模型，支持 Linux, macOS 和 Windows。',

src/pages/llmodels/catalog.tsx

@@ -42,7 +42,7 @@ const Catalog: React.FC = () => {
   });
   const [queryParams, setQueryParams] = useState({
     page: 1,
-    perPage: 30,
+    perPage: 24,
     search: '',
     categories: ''
   });

src/pages/llmodels/components/advance-config.tsx

@@ -124,21 +124,24 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
       return {
         backend: 'llama-box',
         releases: 'https://github.com/gpustack/llama-box/releases',
-        link: 'https://github.com/gpustack/llama-box?tab=readme-ov-file#usage'
+        link: 'https://github.com/gpustack/llama-box?tab=readme-ov-file#usage',
+        version: 'v0.0.140'
       };
     }
     if (backend === backendOptionsMap.vllm) {
       return {
         backend: 'vLLM',
         releases: 'https://github.com/vllm-project/vllm/releases',
-        link: 'https://docs.vllm.ai/en/stable/serving/openai_compatible_server.html#cli-reference'
+        link: 'https://docs.vllm.ai/en/stable/serving/openai_compatible_server.html#cli-reference',
+        version: 'v0.8.5'
       };
     }
     if (backend === backendOptionsMap.ascendMindie) {
       return {
         backend: 'Ascend MindIE',
         releases: '',
-        link: 'http://docs.gpustack.ai/latest/user-guide/inference-backends/#parameters-reference_2'
+        link: 'http://docs.gpustack.ai/latest/user-guide/inference-backends/#parameters-reference_2',
+        version: 'v0.1.0'
       };
     }
 
@@ -349,6 +352,11 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
 
         <Form.Item name="backend_version">
           <SealInput.Input
+            placeholder={
+              backendParamsTips?.version
+                ? `${intl.formatMessage({ id: 'common.help.eg' })} ${backendParamsTips?.version}`
+                : ''
+            }
             onBlur={handleBackendVersionOnBlur}
             label={intl.formatMessage({ id: 'models.form.backendVersion' })}
             description={intl.formatMessage(
@@ -357,6 +365,9 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
               },
               {
                 backend: backendLabelMap[backend],
+                version: backendParamsTips?.version
+                  ? `(${intl.formatMessage({ id: 'common.help.eg' })} ${backendParamsTips?.version})`
+                  : '',
                 link: backendParamsTips?.releases && (
                   <span
                     style={{

src/pages/llmodels/components/deploy-modal.tsx

@@ -145,12 +145,12 @@ const AddModal: FC<AddModalProps> = (props) => {
       categories: getCategory(item)
     });
 
-    if (
+    if (item.fakeName) {
-      item.fakeName &&
+      handleOnValuesChange?.({
-      !isHolderRef.current.model &&
+        changedValues: {},
-      !isHolderRef.current.file
+        allValues: form.current?.form?.getFieldsValue?.(),
-    ) {
+        source: props.source
-      handleShowCompatibleAlert(item.evaluateResult);
+      });
     }
   };
 
@@ -353,7 +353,6 @@ const AddModal: FC<AddModalProps> = (props) => {
                       modelSource={props.source}
                       onSelectFile={handleSelectModelFile}
                       collapsed={collapsed}
-                      displayEvaluateStatus={displayEvaluateStatus}
                       gpuOptions={props.gpuOptions}
                     ></HFModelFile>
                   )}

src/pages/llmodels/components/instance-item.tsx

@@ -160,10 +160,8 @@ const RenderWorkerDownloading = (props: {
     <Tooltip
       arrow={true}
       overlayInnerStyle={{
-        width: 300,
+        width: 300
-        backgroundColor: 'var(--color-spotlight-bg)'
       }}
-      overlayClassName="light-downloading-tooltip"
       title={
         <RenderRayactorDownloading
           severList={rayActors}
@@ -477,6 +475,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     return (
       <TooltipOverlayScroller
         toolTipProps={{
+          trigger: 'click',
           overlayInnerStyle: {
             width: 'max-content',
             maxWidth: '520px',

src/pages/llmodels/components/search-model.tsx

@@ -261,12 +261,17 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
       const currentItem = resultList.find(
         (item) => item.id === currentRef.current
       );
-      displayEvaluateStatus?.({
+
-        show: false,
+      // if item is GGUF, the evaluating would be do after selecting the model file.
-        flag: {
+      if (currentItem && !currentItem.isGGUF) {
-          model: false
+        displayEvaluateStatus?.({
-        }
+          show: false,
-      });
+          flag: {
+            model: false
+          }
+        });
+      }
+
       if (currentItem) {
         handleOnSelectModel(currentItem, true);
       }
@@ -292,12 +297,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
         return { ...pre };
       });
       setLoadingModel?.(true);
-      displayEvaluateStatus?.({
-        show: true,
-        flag: {
-          model: true
-        }
-      });
       cacheRepoOptions.current = [];
       let list: any[] = [];
       if (modelSource === modelSourceMap.huggingface_value) {
@@ -306,7 +305,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
         list = await getModelsFromModelscope(sort);
       }
       cacheRepoOptions.current = list;
-      console.log('list=========', list);
 
       setDataSource({
         repoOptions: list,
@@ -314,6 +312,12 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
         networkError: false,
         sortType: sort
       });
+      displayEvaluateStatus?.({
+        show: true,
+        flag: {
+          model: true
+        }
+      });
       handleOnSelectModel(list[0]);
       setLoadingModel?.(false);