feat: add cluster detail page

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

@@ -3,7 +3,6 @@ import ModalFooter from '@/components/modal-footer';
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import { PageActionType } from '@/config/types';
 import useDeferredRequest from '@/hooks/use-deferred-request';
-import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
 import _ from 'lodash';
@@ -500,14 +499,7 @@ const AddModal: FC<AddModalProps> = (props) => {
 
   return (
     <GSDrawer
-      title={
-        <div className="flex-between flex-center">
-          <span>{title}</span>
-          <Button type="text" size="small" onClick={handleCancel}>
-            <CloseOutlined></CloseOutlined>
-          </Button>
-        </div>
-      }
+      title={title}
       open={open}
       onClose={handleCancel}
       destroyOnClose={true}

src/pages/llmodels/config/button-actions.ts

@@ -193,7 +193,6 @@ export const modelFileActions = [
 
 export const categoryToPathMap: Record<string, string> = {
   [modelCategoriesMap.llm]: '/playground/chat',
-  [modelCategoriesMap.image]: '/playground/text-to-image',
   [modelCategoriesMap.text_to_speech]: '/playground/speech?type=tts',
   [modelCategoriesMap.speech_to_text]: '/playground/speech?type=stt',
   [modelCategoriesMap.reranker]: '/playground/rerank',

src/pages/llmodels/config/index.ts

@@ -330,14 +330,17 @@ export const modelCategoriesMap = {
   llm: 'llm'
 };
 
+export const categoryOptions = [
+  { label: 'LLM', value: modelCategoriesMap.llm },
+  { label: 'Embedding', value: modelCategoriesMap.embedding },
+  { label: 'Reranker', value: modelCategoriesMap.reranker },
+  { label: 'Text-to-Speech', value: modelCategoriesMap.text_to_speech },
+  { label: 'Speech-to-Text', value: modelCategoriesMap.speech_to_text }
+];
+
 export const modelCategories = [
   { label: 'common.options.auto', value: null, locale: true },
-  { label: 'LLM', value: modelCategoriesMap.llm },
-  { label: 'Image', value: modelCategoriesMap.image },
-  { label: 'Text-to-Speech', value: modelCategoriesMap.text_to_speech },
-  { label: 'Speech-to-Text', value: modelCategoriesMap.speech_to_text },
-  { label: 'Embedding', value: modelCategoriesMap.embedding },
-  { label: 'Reranker', value: modelCategoriesMap.reranker }
+  ...categoryOptions
 ];
 
 export const sourceRepoConfig = {

src/pages/llmodels/config/types.ts

@@ -86,8 +86,6 @@ export interface DistributedServerItem {
 }
 
 export interface DistributedServers {
-  rpc_servers: DistributedServerItem[];
-  ray_actors: DistributedServerItem[];
   subordinate_workers: DistributedServerItem[];
 }
 export interface ModelInstanceListItem {

src/pages/llmodels/download/index.tsx

@@ -1,8 +1,6 @@
 import ModalFooter from '@/components/modal-footer';
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
-import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button } from 'antd';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ColumnWrapper from '../components/column-wrapper';
@@ -127,22 +125,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
 
   return (
     <GSDrawer
-      title={
-        <div className="flex-between flex-center">
-          <span
-            style={{
-              color: 'var(--ant-color-text)',
-              fontWeight: 'var(--font-weight-medium)',
-              fontSize: 'var(--font-size-middle)'
-            }}
-          >
-            {title}
-          </span>
-          <Button type="text" size="small" onClick={handleCancel}>
-            <CloseOutlined></CloseOutlined>
-          </Button>
-        </div>
-      }
+      title={title}
       open={open}
       onClose={handleCancel}
       destroyOnClose={true}

src/pages/llmodels/user-models.tsx

@@ -5,19 +5,28 @@ import CardSkeleton from '@/components/templates/card-skelton';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { useIntl } from '@umijs/max';
+import { useIntl, useNavigate } from '@umijs/max';
 import { Button, Input, Select, Space } from 'antd';
 import React from 'react';
 import { MODELS_API, queryModelsList } from './apis';
 import ModelItem from './components/model-item';
+import { categoryOptions, modelCategoriesMap } from './config';
+import { categoryToPathMap } from './config/button-actions';
 
 const UserModels: React.FC = () => {
-  const { dataSource, queryParams, fetchData, handleSearch, handleNameChange } =
-    useTableFetch<any>({
-      fetchAPI: queryModelsList,
-      API: MODELS_API,
-      watch: false
-    });
+  const navigate = useNavigate();
+  const {
+    dataSource,
+    queryParams,
+    fetchData,
+    handleSearch,
+    handleQueryChange,
+    handleNameChange
+  } = useTableFetch<any>({
+    fetchAPI: queryModelsList,
+    API: MODELS_API,
+    watch: false
+  });
   const intl = useIntl();
 
   const loadMore = () => {
@@ -27,8 +36,30 @@ const UserModels: React.FC = () => {
     });
   };
 
+  const handleCategoryChange = (value: string) => {
+    handleQueryChange({
+      categories: value
+    });
+  };
+
   const handleOnClick = (model: any) => {
-    console.log('Deploying model:', model);
+    for (const [category, path] of Object.entries(categoryToPathMap)) {
+      if (
+        model.categories?.includes(category) &&
+        [
+          modelCategoriesMap.text_to_speech,
+          modelCategoriesMap.speech_to_text
+        ].includes(category)
+      ) {
+        navigate(`${path}&model=${model.name}`);
+        return;
+      }
+      if (model.categories?.includes(category)) {
+        navigate(`${path}?model=${model.name}`);
+        return;
+      }
+    }
+    navigate(`/playground/chat?model=${model.name}`);
   };
 
   const renderCard = (data: any) => {
@@ -72,7 +103,8 @@ const UserModels: React.FC = () => {
               style={{ width: 180 }}
               size="large"
               maxTagCount={1}
-              options={[]}
+              options={categoryOptions}
+              onChange={handleCategoryChange}
             ></Select>
             <Button
               type="text"