Merge pull request #362 from SuanmoSuanyangTechnology/feature/model_v2_zy

feat(web): move create custom model  to model list

web/src/api/models.ts

@@ -66,9 +66,9 @@ export const addModelPlaza = (model_base_id: string) => {
 }
 // Create custom model
 export const addCustomModel = (data: CustomModelForm) => {
-  return request.post('/models/model_plaza', data)
+  return request.post('/models', data)
 }
 // Update custom model
 export const updateCustomModel = (model_base_id: string, data: CustomModelForm) => {
-  return request.put(`/models/model_plaza/${model_base_id}`, data)
+  return request.put(`/models/${model_base_id}`, data)
 }

web/src/components/Upload/UploadImages.tsx

@@ -93,7 +93,7 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
   onChange,
   disabled = false,
   fileSize,
-  fileType = ['png', 'jpg', 'gif'],
+  fileType = ['png', 'jpg', 'gif', 'svg'],
   isAutoUpload = true,
   maxCount = 1,
   className = 'rb:size-24! rb:leading-1!',

web/src/views/ModelManagement/List.tsx

@@ -10,11 +10,11 @@
  * Shows model tags and allows viewing model details
  */
 
-import { useRef, useState, useEffect, type FC } from 'react';
+import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { Button, Flex, Row, Col } from 'antd'
 import { useTranslation } from 'react-i18next';
 
-import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef } from './types'
+import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef, ModelListItem, BaseRef } from './types'
 import RbCard from '@/components/RbCard/Card'
 import { getModelNewList } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
@@ -26,11 +26,12 @@ import { getLogoUrl } from './utils'
 /**
  * Model list component
  */
-const ModelList: FC<{ query: any }> = ({ query }) => {
+const ModelList = forwardRef<BaseRef, { query: any; handleEdit: (vo?: ModelListItem) => void; }> (({ query, handleEdit }, ref) => {
   const { t } = useTranslation();
   const keyConfigModalRef = useRef<KeyConfigModalRef>(null)
   const modelListDetailRef = useRef<ModelListDetailRef>(null)
   const [list, setList] = useState<ProviderModelItem[]>([])
+
   useEffect(() => {
     getList()
   }, [query])
@@ -54,6 +55,11 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
     keyConfigModalRef.current?.handleOpen(vo)
   }
 
+  /** Expose methods to parent component */
+  useImperativeHandle(ref, () => ({
+    getList,
+    modelListDetailRefresh: () => modelListDetailRef.current?.handleRefresh()
+  }));
   return (
     <>
       {list.length === 0
@@ -96,9 +102,10 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
       <ModelListDetail
         ref={modelListDetailRef}
         refresh={getList}
+        handleEdit={handleEdit}
       />
     </>
   )
-}
+})
 
 export default ModelList

web/src/views/ModelManagement/Square.tsx

@@ -26,7 +26,7 @@ import { getLogoUrl } from './utils'
 /**
  * Model square component
  */
-const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPlazaItem) => void; }>(({ query, handleEdit }, ref) => {
+const ModelSquare = forwardRef <BaseRef, { query: any; }>(({ query }, ref) => {
   const { t } = useTranslation();
   const { message } = App.useApp()
   const modelSquareDetailRef = useRef<ModelSquareDetailRef>(null)
@@ -96,7 +96,6 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
                     <Flex justify="space-between">
                       <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
                       <Space>
-                        {!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
                         {item.is_added
                           ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
                           : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>
@@ -114,7 +113,6 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
       <ModelSquareDetail
         ref={modelSquareDetailRef}
         refresh={getList}
-        handleEdit={handleEdit}
       />
     </>
   )

web/src/views/ModelManagement/components/CustomModelModal.tsx

@@ -11,10 +11,10 @@
  */
 
 import { forwardRef, useImperativeHandle, useState } from 'react';
-import { Form, Input, App, Select } from 'antd';
+import { Form, Input, App } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import type { CustomModelForm, ModelPlazaItem, CustomModelModalRef, CustomModelModalProps } from '../types';
+import type { CustomModelForm, ModelListItem, CustomModelModalRef, CustomModelModalProps } from '../types';
 import RbModal from '@/components/RbModal'
 import CustomSelect from '@/components/CustomSelect'
 import UploadImages from '@/components/Upload/UploadImages'
@@ -30,22 +30,21 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
   const { t } = useTranslation();
   const { message } = App.useApp();
   const [visible, setVisible] = useState(false);
-  const [model, setModel] = useState<ModelPlazaItem>({} as ModelPlazaItem);
+  const [model, setModel] = useState<ModelListItem>({} as ModelListItem);
   const [isEdit, setIsEdit] = useState(false);
   const [form] = Form.useForm<CustomModelForm>();
   const [loading, setLoading] = useState(false)
-  const formValues = Form.useWatch([], form)
 
   /** Close modal and reset state */
   const handleClose = () => {
-    setModel({} as ModelPlazaItem);
+    setModel({} as ModelListItem);
     form.resetFields();
     setLoading(false)
     setVisible(false);
   };
 
   /** Open modal with optional model data for editing */
-  const handleOpen = (model?: ModelPlazaItem) => {
+  const handleOpen = (model?: ModelListItem) => {
     if (model) {
       setIsEdit(true);
       setModel(model);
@@ -66,7 +65,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
     const res = isEdit ? updateCustomModel(model.id, rest) : addCustomModel(data)
 
     res.then(() => {
-      refresh && refresh()
+      refresh && refresh(isEdit)
       handleClose()
       message.success(isEdit ? t('common.updateSuccess') : t('common.createSuccess'))
     })
@@ -79,12 +78,10 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
     form
       .validateFields()
       .then((values) => {
-        setLoading(true)
         const { logo, ...rest } = values;
         let formData: CustomModelForm = {
           ...rest
         }
-        formData.is_official = false;
 
         if (typeof logo === 'object' && logo?.response?.data.file_id) {
           getFileLink(logo?.response?.data.file_id)
@@ -111,8 +108,6 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
     handleOpen,
   }));
 
-  console.log('formValues', formValues)
-
   return (
     <RbModal
       title={isEdit ? `${model.name} - ${t('modelNew.modelConfiguration')}` : t('modelNew.createCustomModel')}
@@ -174,11 +169,22 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
         >
           <Input.TextArea placeholder={t('common.pleaseEnter')} />
         </Form.Item>
+
+
         <Form.Item
-          name="tags"
-          label={t('modelNew.tags')}
+          name={["api_keys", 0, "api_key"]}
+          label={t('modelNew.api_key')}
+          rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('modelNew.api_key') }) }]}
         >
-          <Select mode="tags" placeholder={t('common.pleaseEnter')} />
+          <Input.Password placeholder={t('common.pleaseEnter')} />
+        </Form.Item>
+
+        <Form.Item
+          name={["api_keys", 0, "api_base"]}
+          label={t('modelNew.api_base')}
+          rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('modelNew.api_base') }) }]}
+        >
+          <Input placeholder="https://api.example.com/v1" />
         </Form.Item>
       </Form>
     </RbModal>

web/src/views/ModelManagement/components/ModelListDetail.tsx

@@ -30,12 +30,13 @@ import CustomSelect from '@/components/CustomSelect'
 interface ModelListDetailProps {
   /** Callback to refresh parent list */
   refresh?: () => void;
+  handleEdit: (vo?: ModelListItem) => void;
 }
 
 /**
  * Model list detail drawer component
  */
-const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({ refresh }, ref) => {
+const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({ refresh, handleEdit }, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [data, setData] = useState<ProviderModelItem>({} as ProviderModelItem)
@@ -95,7 +96,8 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
 
   /** Expose methods to parent component */
   useImperativeHandle(ref, () => ({
-      handleOpen,
+    handleOpen,
+    handleRefresh,
   }));
 
   /** Filter models by selected type */
@@ -149,7 +151,10 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
               </Tooltip>
               <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
                 <Row gutter={12}>
-                  <Col span={24}>
+                  <Col span={12}>
+                    <Button block onClick={() => handleEdit(item)}>{t('modelNew.modelConfiguration')}</Button>
+                  </Col>
+                  <Col span={12}>
                     <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
                   </Col>
                 </Row>

web/src/views/ModelManagement/components/ModelSquareDetail.tsx

@@ -29,14 +29,12 @@ import { getLogoUrl } from '../utils'
 interface ModelSquareDetailProps {
   /** Callback to refresh parent list */
   refresh: () => void;
-  /** Callback to edit model */
-  handleEdit: (vo: ModelPlazaItem) => void;
 }
 
 /**
  * Model square detail drawer component
  */
-const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh, handleEdit }, ref) => {
+const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh }, ref) => {
   const { t } = useTranslation();
   const { message } = App.useApp()
   const [model, setModel] = useState<ModelPlaza>({} as ModelPlaza)
@@ -112,7 +110,6 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
                   <Flex justify="space-between">
                     <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
                     <Space>
-                      {!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
                       {item.is_added
                         ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
                         : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>

web/src/views/ModelManagement/index.tsx

@@ -15,7 +15,7 @@ import { Button, Flex, Space, type SegmentedProps, Form } from 'antd'
 import { useTranslation } from 'react-i18next';
 
 import GroupModelModal from './components/GroupModelModal'
-import type { ModelListItem, GroupModelModalRef, CustomModelModalRef, ModelPlazaItem, BaseRef, Query } from './types'
+import type { ModelListItem, GroupModelModalRef, CustomModelModalRef, BaseRef, Query } from './types'
 import SearchInput from '@/components/SearchInput'
 import PageTabs from '@/components/PageTabs'
 import GroupModel from './Group'
@@ -38,7 +38,7 @@ const tabKeys = ['group', 'list', 'square']
   const configModalRef = useRef<GroupModelModalRef>(null)
   const customModelModalRef = useRef<CustomModelModalRef>(null)
   const groupRef = useRef<BaseRef>(null)
-  const squareRef = useRef<BaseRef>(null)
+  const modelListRef = useRef<BaseRef>(null)
   const [form] = Form.useForm<Query>()
   const query = Form.useWatch([], form)
 
@@ -56,24 +56,29 @@ const tabKeys = ['group', 'list', 'square']
   }
 
   /** Open edit modal based on active tab */
-  const handleEdit = (vo?: ModelListItem | ModelPlazaItem) => {
+  const handleEdit = (vo?: ModelListItem | ModelListItem) => {
     switch(activeTab) {
       case 'group':
         configModalRef?.current?.handleOpen(vo as ModelListItem)
         break
-      case 'square':
-        customModelModalRef?.current?.handleOpen(vo as ModelPlazaItem)
+      case 'list':
+        customModelModalRef?.current?.handleOpen(vo as ModelListItem)
         break
     }
   }
   /** Refresh list based on active tab */
-  const handleRefresh = () => {
+  const handleRefresh = (isEdit?: boolean) => {
     switch (activeTab) {
       case 'group':
         groupRef.current?.getList()
         break
-      case 'square':
-        squareRef.current?.getList()
+      case 'list':
+        console.log('isEdit', isEdit)
+        if (isEdit) {
+          modelListRef.current?.modelListDetailRefresh?.()
+        } else {
+          modelListRef.current?.getList()
+        }
         break
     }
   }
@@ -122,15 +127,15 @@ const tabKeys = ['group', 'list', 'square']
               </Form.Item>
             }
             {activeTab === 'group' && <Button type="primary" onClick={() => handleEdit()}>+ {t('modelNew.createGroupModel')}</Button>}
-            {activeTab === 'square' && <Button type="primary" onClick={() => handleEdit()}>+ {t('modelNew.createCustomModel')}</Button>}
+            {activeTab === 'list' && <Button type="primary" onClick={() => handleEdit()}>+ {t('modelNew.createCustomModel')}</Button>}
           </Space>
         </Form>
       </Flex>
 
       <div className="rb:w-full rb:h-[calc(100%-48px)] rb:my-4">
         {activeTab === 'group' && <GroupModel ref={groupRef} query={query} handleEdit={handleEdit} />}
-        {activeTab === 'list' && <ModelList query={query} />}
-        {activeTab === 'square' && <ModelSquare ref={squareRef} query={query} handleEdit={handleEdit} />}
+        {activeTab === 'list' && <ModelList ref={modelListRef} query={query} handleEdit={handleEdit} />}
+        {activeTab === 'square' && <ModelSquare query={query} />}
       </div>
       <GroupModelModal
         ref={configModalRef}

web/src/views/ModelManagement/types.ts

@@ -80,6 +80,7 @@ export interface GroupModelModalProps {
 export interface ModelListDetailRef {
   /** Open detail drawer with provider model data */
   handleOpen: (vo: ProviderModelItem) => void;
+  handleRefresh: () => void;
 }
 
 /**
@@ -284,10 +285,12 @@ export interface CustomModelForm {
   logo?: any;
   /** Model description */
   description: string;
-  /** Whether model is official */
-  is_official: boolean;
-  /** Model tags */
-  tags: string[];
+  api_keys: Array<{
+    /** API key value */
+    api_key: string;
+    /** API base URL */
+    api_base: string;
+  }>
 }
 
 /**
@@ -295,7 +298,7 @@ export interface CustomModelForm {
  */
 export interface CustomModelModalRef {
   /** Open modal with optional model plaza item */
-  handleOpen: (vo?: ModelPlazaItem) => void;
+  handleOpen: (vo?: ModelListItem) => void;
 }
 
 /**
@@ -303,7 +306,7 @@ export interface CustomModelModalRef {
  */
 export interface CustomModelModalProps {
   /** Callback to refresh model list */
-  refresh?: () => void;
+  refresh?: (flag?: boolean) => void;
 }
 
 /**
@@ -312,4 +315,5 @@ export interface CustomModelModalProps {
 export interface BaseRef {
   /** Refresh list data */
   getList: () => void;
+  modelListDetailRefresh?: () => void;
 }