feat: model category

src/components/seal-form/components/wrapper.less

@@ -163,6 +163,7 @@
   }
 
   :global(.ant-select-selector) {
+    flex: 1;
     border: none !important;
     padding-block: 5px;
     padding-inline: @input-inner-padding !important;

src/locales/en-US/common.ts

@@ -219,5 +219,6 @@ export default {
   'common.button.recreate': 'Recreate',
   'common.button.delrecreate': 'Delete (Recreate)',
   'common.options.all': 'All',
-  'common.options.none': 'None'
+  'common.options.none': 'None',
+  'common.options.auto': 'Auto'
 };

src/locales/en-US/models.ts

@@ -44,6 +44,7 @@ export default {
   'models.search.unsupport':
     'This model is not supported and may be unusable after deployment.',
   'models.form.scheduletype': 'Schedule Type',
+  'models.form.categories': 'Model Category',
   'models.form.scheduletype.auto': 'Auto',
   'models.form.scheduletype.manual': 'Manual',
   'models.form.scheduletype.auto.tips':

src/locales/zh-CN/common.ts

@@ -212,5 +212,6 @@ export default {
   'common.button.recreate': '重新创建',
   'common.button.delrecreate': '删除(重建)',
   'common.options.all': '全部',
-  'common.options.none': '无'
+  'common.options.none': '无',
+  'common.options.auto': '自动'
 };

src/locales/zh-CN/models.ts

@@ -42,6 +42,7 @@ export default {
   'models.search.networkerror': '网络连接异常!',
   'models.search.hfvisit': '请确保您可以访问',
   'models.search.unsupport': '暂不支持该模型，部署后可能无法使用',
+  'models.form.categories': '模型类别',
   'models.form.scheduletype': '调度方式',
   'models.form.scheduletype.auto': '自动',
   'models.form.scheduletype.manual': '手动',

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

@@ -20,6 +20,7 @@ import React, { useCallback, useMemo } from 'react';
 import {
   backendOptionsMap,
   backendParamsHolderTips,
+  modelCategories,
   placementStrategyOptions
 } from '../config';
 import llamaConfig from '../config/llama-config';
@@ -153,21 +154,16 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   const collapseItems = useMemo(() => {
     const children = (
       <>
-        {/* <Form.Item<FormData> name="labels">
-          <ListInput
-            placeholder={
-              backendParamsHolderTips[backend]
-                ? intl.formatMessage({
-                    id: backendParamsHolderTips[backend].holder
-                  })
-                : ''
-            }
-            btnText="models.form.button.addlabel"
-            label="Labels"
-            dataList={form.getFieldValue('backend_parameters') || []}
-            options={modelLabels}
-          ></ListInput>
-        </Form.Item> */}
+        <Form.Item<FormData> name="categories">
+          <SealSelect
+            allowNull
+            maxCount={1}
+            label={intl.formatMessage({
+              id: 'models.form.categories'
+            })}
+            options={modelCategories}
+          ></SealSelect>
+        </Form.Item>
         <Form.Item name="scheduleType">
           <SealSelect
             label={intl.formatMessage({ id: 'models.form.scheduletype' })}
@@ -247,7 +243,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
         )}
         {scheduleType === 'manual' && (
           <Form.Item<FormData>
-            name="gpu_selector"
+            name={['gpu_selector', 'gpu_ids']}
             rules={[
               {
                 required: true,
@@ -265,6 +261,8 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             <SealSelect
               label={intl.formatMessage({ id: 'models.form.gpuselector' })}
               required
+              mode="multiple"
+              maxLength={1}
             >
               {gpuOptions.map((item) => (
                 <Select.Option key={item.value} value={item.value}>

src/pages/llmodels/components/data-form.tsx

@@ -86,7 +86,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
       return {
         ...item,
         label: item.name,
-        value: `${item.worker_name}-${item.name}-${item.index}`
+        value: item.id
       };
     });
     console.log('queryGPUList========', list);
@@ -381,23 +381,15 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   }, []);
 
   const handleOk = (formdata: FormData) => {
-    const gpu = _.find(gpuOptions, (item: any) => {
-      return item.value === formdata.gpu_selector;
-    });
-    if (gpu) {
-      onOk({
-        ..._.omit(formdata, ['scheduleType']),
-        gpu_selector: {
-          gpu_name: gpu.name,
-          gpu_index: gpu.index,
-          worker_name: gpu.worker_name
-        }
-      });
+    let data = _.cloneDeep(formdata);
+    if (data.categories) {
+      data.categories = [data.categories];
     } else {
-      onOk({
-        ..._.omit(formdata, ['scheduleType'])
-      });
+      data.categories = [];
     }
+    onOk({
+      ..._.omit(data, ['scheduleType'])
+    });
   };
 
   useEffect(() => {
@@ -430,6 +422,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         placement_strategy: 'spread',
         cpu_offloading: true,
         scheduleType: 'auto',
+        categories: null,
         distributed_inference_across_workers: true
       }}
     >

src/pages/llmodels/components/table-list.tsx

@@ -44,6 +44,7 @@ import {
 import {
   InstanceRealLogStatus,
   getSourceRepoConfigValue,
+  modelCategoriesMap,
   modelSourceMap
 } from '../config';
 import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
@@ -556,7 +557,7 @@ const Models: React.FC<ModelsProps> = ({
 
   const renderModelTags = useCallback(
     (record: ListItem) => {
-      if (record.reranker) {
+      if (record.categories?.includes(modelCategoriesMap.reranker)) {
         return (
           <Tag
             icon={<IconFont type="icon-rank1"></IconFont>}
@@ -574,7 +575,7 @@ const Models: React.FC<ModelsProps> = ({
         );
       }
 
-      if (record.embedding_only && !record.reranker) {
+      if (record.categories?.includes(modelCategoriesMap.embedding)) {
         return (
           <Tag
             icon={<IconFont type="icon-cube"></IconFont>}
@@ -591,7 +592,7 @@ const Models: React.FC<ModelsProps> = ({
           </Tag>
         );
       }
-      if (record.text_to_speech) {
+      if (record.categories?.includes(modelCategoriesMap.text_to_speech)) {
         return (
           <Tag
             icon={<IconFont type="icon-sound-wave"></IconFont>}
@@ -608,7 +609,7 @@ const Models: React.FC<ModelsProps> = ({
           </Tag>
         );
       }
-      if (record.speech_to_text) {
+      if (record.categories?.includes(modelCategoriesMap.speech_to_text)) {
         return (
           <Tag
             icon={<AudioOutlined />}
@@ -625,7 +626,7 @@ const Models: React.FC<ModelsProps> = ({
           </Tag>
         );
       }
-      if (record.image_only) {
+      if (record.categories?.includes(modelCategoriesMap.image)) {
         return (
           <Tag
             icon={<PictureOutlined />}

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

@@ -88,6 +88,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
       const formData = {
         ...result.values,
         ..._.omit(props.data, result.omits),
+        categories: props.data?.categories?.length
+          ? props.data.categories[0]
+          : null,
         scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
         gpu_selector: props.data?.gpu_selector
           ? `${props.data?.gpu_selector.worker_name}-${props.data?.gpu_selector.gpu_name}-${props.data?.gpu_selector.gpu_index}`
@@ -303,6 +306,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
 
       onOk({
         ..._.omit(formdata, ['scheduleType']),
+        categories: formdata.categories ? [formdata.categories] : [],
         worker_selector: null,
         gpu_selector: gpu
           ? {
@@ -316,6 +320,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     } else {
       onOk({
         ..._.omit(formdata, ['scheduleType']),
+        categories: formdata.categories ? [formdata.categories] : [],
         gpu_selector: null,
         ...obj
       });

src/pages/llmodels/config/index.ts

@@ -240,6 +240,23 @@ export const placementStrategyOptions = [
   }
 ];
 
+export const modelCategoriesMap = {
+  image: 'image',
+  text_to_speech: 'text_to_speech',
+  speech_to_text: 'speech_to_text',
+  embedding: 'embedding',
+  reranker: 'reranker'
+};
+
+export const modelCategories = [
+  { label: 'common.options.auto', value: null, locale: true },
+  { label: 'Image', value: 'image' },
+  { label: 'Text-to-speech', value: 'text_to_speech' },
+  { label: 'Speech-to-text', value: 'speech_to_text' },
+  { label: 'Embedding', value: 'embedding' },
+  { label: 'Reranker', value: 'reranker' }
+];
+
 export const sourceRepoConfig = {
   [modelSourceMap.huggingface_value]: {
     repo_id: 'huggingface_repo_id',

src/pages/llmodels/config/types.ts

@@ -1,6 +1,7 @@
 export interface ListItem {
   source: string;
   backend: string;
+  categories?: string[];
   reranker: boolean;
   image_only?: boolean;
   huggingface_repo_id: string;
@@ -23,15 +24,14 @@ export interface ListItem {
   created_at: string;
   updated_at: string;
   gpu_selector?: {
-    worker_name: string;
-    gpu_index: number;
-    gpu_name: string;
+    gpu_ids: string[];
   };
   worker_selector?: object;
 }
 
 export interface FormData {
   backend?: string;
+  categories?: string;
   backend_parameters?: string[];
   backend_version?: string;
   source: string;
@@ -46,9 +46,7 @@ export interface FormData {
   model_scope_model_id?: string;
   model_scope_file_path?: string;
   gpu_selector?: {
-    worker_name: string;
-    gpu_index: number;
-    gpu_name: string;
+    gpu_ids: string[];
   };
   placement_strategy?: string;
   cpu_offloading?: boolean;

src/pages/playground/embedding.tsx

@@ -30,8 +30,7 @@ const PlaygroundEmbedding: React.FC = () => {
     const getModelListByEmbedding = async () => {
       try {
         const params = {
-          embedding_only: true,
-          reranker: false
+          categories: 'embedding'
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {

src/pages/playground/images.tsx

@@ -85,7 +85,7 @@ const TextToImages: React.FC = () => {
     const getModelList = async () => {
       try {
         const params = {
-          image_only: true
+          categories: 'image'
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {

src/pages/playground/index.tsx

@@ -79,11 +79,7 @@ const Playground: React.FC = () => {
     const getModelList = async () => {
       try {
         const params = {
-          embedding_only: false,
-          image_only: false,
-          reranker: false,
-          text_to_speech: false,
-          speech_to_text: false
+          categories: ''
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {

src/pages/playground/rerank.tsx

@@ -32,7 +32,7 @@ const PlaygroundRerank: React.FC = () => {
     const getModelListByReranker = async () => {
       try {
         const params = {
-          reranker: true
+          categories: 'reranker'
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {

src/pages/playground/speech.tsx

@@ -102,7 +102,7 @@ const Playground: React.FC = () => {
     const getTextToSpeechModels = async () => {
       try {
         const params = {
-          text_to_speech: true
+          categories: 'text_to_speech'
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {
@@ -120,7 +120,7 @@ const Playground: React.FC = () => {
     const getSpeechToText = async () => {
       try {
         const params = {
-          speech_to_text: true
+          categories: 'speech_to_text'
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {