fix(web): model bugfix

web/src/assets/images/model/bedrock.svg

@@ -0,0 +1,15 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_16762_59518)">
+<path d="M12.6667 0H3.33333C1.49238 0 0 1.49238 0 3.33333V12.6667C0 14.5076 1.49238 16 3.33333 16H12.6667C14.5076 16 16 14.5076 16 12.6667V3.33333C16 1.49238 14.5076 0 12.6667 0Z" fill="url(#paint0_linear_16762_59518)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99984 12.093L6.3825 12.6323L5.75184 12.2116L6.4385 11.9823L6.22784 11.3503L5.04917 11.743L4.6665 11.4883V9.66631C4.6665 9.54031 4.59517 9.42497 4.4825 9.3683L3.33317 8.79364V7.20564L4.33317 6.70564L5.33317 7.20564V8.33297C5.33317 8.45964 5.4045 8.57497 5.51717 8.63164L6.8505 9.29831L7.14917 8.70164L5.99984 8.12697V7.20564L7.14917 6.63164C7.26184 6.57497 7.33317 6.45964 7.33317 6.33297V5.33297H6.6665V6.12697L5.6665 6.62697L4.6665 6.12697V4.51164L5.33317 4.06697V5.33297H5.99984V3.62297L6.3825 3.36764L7.99984 3.90697V12.093ZM11.6665 11.333C11.8498 11.333 11.9998 11.4823 11.9998 11.6663C11.9998 11.8503 11.8498 11.9996 11.6665 11.9996C11.4832 11.9996 11.3332 11.8503 11.3332 11.6663C11.3332 11.4823 11.4832 11.333 11.6665 11.333ZM10.9998 3.99964C11.1832 3.99964 11.3332 4.14897 11.3332 4.33297C11.3332 4.51697 11.1832 4.6663 10.9998 4.6663C10.8165 4.6663 10.6665 4.51697 10.6665 4.33297C10.6665 4.14897 10.8165 3.99964 10.9998 3.99964ZM12.3332 7.99964C12.5165 7.99964 12.6665 8.14897 12.6665 8.33297C12.6665 8.51697 12.5165 8.66631 12.3332 8.66631C12.1498 8.66631 11.9998 8.51697 11.9998 8.33297C11.9998 8.14897 12.1498 7.99964 12.3332 7.99964ZM11.3945 8.66631C11.5325 9.05364 11.8992 9.33297 12.3332 9.33297C12.8845 9.33297 13.3332 8.88497 13.3332 8.33297C13.3332 7.78164 12.8845 7.33297 12.3332 7.33297C11.8992 7.33297 11.5325 7.61297 11.3945 7.99964H8.6665V6.66631H10.9998C11.1838 6.66631 11.3332 6.51764 11.3332 6.33297V5.27164C11.7205 5.13364 11.9998 4.76697 11.9998 4.33297C11.9998 3.78164 11.5512 3.33297 10.9998 3.33297C10.4485 3.33297 9.99984 3.78164 9.99984 4.33297C9.99984 4.76697 10.2792 5.13364 10.6665 5.27164V5.99964H8.6665V3.6663C8.6665 3.52297 8.5745 3.39564 8.4385 3.3503L6.4385 2.68364C6.3405 2.65097 6.23384 2.66564 6.1485 2.7223L4.1485 4.05564C4.05584 4.11764 3.99984 4.22164 3.99984 4.33297V6.12697L2.8505 6.70164C2.73784 6.75831 2.6665 6.87364 2.6665 6.99964V8.99964C2.6665 9.12631 2.73784 9.24164 2.8505 9.29831L3.99984 9.87231V11.6663C3.99984 11.7776 4.05584 11.8823 4.1485 11.9436L6.1485 13.277C6.20384 13.3143 6.26784 13.333 6.33317 13.333C6.3685 13.333 6.40384 13.3276 6.4385 13.3156L8.4385 12.649C8.5745 12.6043 8.6665 12.477 8.6665 12.333V10.6663H10.1952L10.7638 11.2356L10.7725 11.227C10.7072 11.3603 10.6665 11.5083 10.6665 11.6663C10.6665 12.2176 11.1152 12.6663 11.6665 12.6663C12.2178 12.6663 12.6665 12.2176 12.6665 11.6663C12.6665 11.115 12.2178 10.6663 11.6665 10.6663C11.5078 10.6663 11.3598 10.707 11.2272 10.773L11.2358 10.7643L10.5692 10.0976C10.5065 10.035 10.4218 9.99964 10.3332 9.99964H8.6665V8.66631H11.3945Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_16762_59518" x1="0" y1="1600" x2="1600" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#055F4E"/>
+<stop offset="1" stop-color="#56C0A7"/>
+</linearGradient>
+<clipPath id="clip0_16762_59518">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

web/src/assets/images/model/xinference.svg

@@ -0,0 +1,24 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Xorbits Square" clip-path="url(#clip0_9850_26870)">
+<path id="Vector" d="M8.00391 12.3124C8.69334 13.0754 9.47526 13.7494 10.3316 14.3188C11.0667 14.8105 11.8509 15.2245 12.6716 15.5541C14.1617 14.1465 15.3959 12.4907 16.3192 10.6606L21.7051 0L12.3133 7.38353C10.5832 8.74456 9.12178 10.416 8.00391 12.3124Z" fill="url(#paint0_linear_9850_26870)"/>
+<path id="Vector_2" d="M7.23504 18.9512C6.56092 18.5012 5.92386 18.0265 5.3221 17.5394L2.06445 24L7.91975 19.3959C7.69034 19.2494 7.46092 19.103 7.23504 18.9512Z" fill="url(#paint1_linear_9850_26870)"/>
+<path id="Vector_3" d="M19.3161 8.57474C21.0808 10.9147 21.5961 13.5159 20.3996 15.3053C18.6526 17.9189 13.9161 17.8183 9.82024 15.0812C5.72435 12.3441 3.82024 8.0065 5.56729 5.39297C6.76377 3.60356 9.36318 3.0865 12.2008 3.81886C7.29318 1.73474 2.62376 1.94121 0.813177 4.64474C-1.45976 8.04709 1.64435 14.1177 7.74494 18.1889C13.8455 22.26 20.6361 22.8124 22.9091 19.4118C24.7179 16.703 23.1173 12.3106 19.3161 8.57474Z" fill="url(#paint2_linear_9850_26870)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_9850_26870" x1="2.15214" y1="24.3018" x2="21.2921" y2="0.0988218" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E9A85E"/>
+<stop offset="1" stop-color="#F52B76"/>
+</linearGradient>
+<linearGradient id="paint1_linear_9850_26870" x1="2.06269" y1="24.2294" x2="21.2027" y2="0.028252" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E9A85E"/>
+<stop offset="1" stop-color="#F52B76"/>
+</linearGradient>
+<linearGradient id="paint2_linear_9850_26870" x1="-0.613606" y1="3.843" x2="21.4449" y2="18.7258" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6A0CF5"/>
+<stop offset="1" stop-color="#AB66F3"/>
+</linearGradient>
+<clipPath id="clip0_9850_26870">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

web/src/views/ModelManagement/List.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect, type FC } from 'react';
-import { Button, Space, Row, Col } from 'antd'
+import { Button, Flex, Row, Col } from 'antd'
 import { useTranslation } from 'react-i18next';
 
 import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef } from './types'
@@ -9,6 +9,7 @@ import PageEmpty from '@/components/Empty/PageEmpty';
 import Tag from '@/components/Tag';
 import KeyConfigModal from './components/KeyConfigModal'
 import ModelListDetail from './components/ModelListDetail'
+import { getLogoUrl } from './utils'
 
 const ModelList: FC<{ query: any }> = ({ query }) => {
   const { t } = useTranslation();
@@ -46,22 +47,25 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
               <RbCard
                 key={item.provider}
                 title={item.provider}
-                avatarUrl={item.logo}
+                avatarUrl={getLogoUrl(item.logo)}
                 avatar={
                   <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                     {item.provider[0]}
                   </div>
                 }
+                bodyClassName="rb:relative rb:pb-[64px]! rb:h-[calc(100%-64px)]!"
               >
-                <Space>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Space>
-                <Row gutter={12} className="rb:mt-4">
-                  <Col span={12}>
-                    <Button block onClick={() => handleShowModel(item)}>{t('modelNew.showModel')}</Button>
-                  </Col>
-                  <Col span={12}>
-                    <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
-                  </Col>
-                </Row>
+                <Flex gap={8} wrap>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Flex>
+                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
+                  <Row gutter={12}>
+                    <Col span={12}>
+                      <Button block onClick={() => handleShowModel(item)}>{t('modelNew.showModel')}</Button>
+                    </Col>
+                    <Col span={12}>
+                      <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
+                    </Col>
+                  </Row>
+                </div>
               </RbCard>
             ))}
           </div>

web/src/views/ModelManagement/Square.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Button, Space, App, Divider, Flex } from 'antd'
+import { Button, Space, App, Divider, Flex, Tooltip } from 'antd'
 import { UsergroupAddOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 
@@ -9,6 +9,7 @@ import { getModelPlaza, addModelPlaza } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import Tag from '@/components/Tag';
 import ModelSquareDetail from './components/ModelSquareDetail'
+import { getLogoUrl } from './utils'
 
 const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPlazaItem) => void; }>(({ query, handleEdit }, ref) => {
   const { t } = useTranslation();
@@ -46,7 +47,7 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
         : list.map(vo => (
           <div key={vo.provider}>
             <div className="rb:flex rb:justify-between rb:items-center rb:bg-[rgba(21,94,239,0.12)] rb:px-4 rb:py-2.5 rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">
-              <div className="rb:font-medium">{vo.provider}</div>
+              <div className="rb:font-medium">{t(`modelNew.${vo.provider}`)}</div>
               <Button type="link" onClick={() => handleMore(vo)}>{t('modelNew.viewAll')}({t(`modelNew.modelCount`, { count: vo.models.length })})&gt;</Button>
             </div>
 
@@ -55,27 +56,32 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
                 <RbCard
                   key={item.id}
                   title={item.name}
-                  avatarUrl={item.logo}
+                  subTitle={<Tag>{t(`modelNew.${item.type}`)}</Tag>}
+                  avatarUrl={getLogoUrl(item.logo)}
                   avatar={
                     <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                       {item.name[0]}
                     </div>
                   }
+                  bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
                 >
-                  <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-3 rb:h-9">{item.description}</div>
-                  <Space size={8} className="rb:mt-3">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Space>
-                  <Divider size="middle" />
-                  <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)}>+ {t('common.add')}</Button>
-                      }
-                    </Space>
-                  </Flex>
+                  <Tooltip title={item.description}>
+                    <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
+                  </Tooltip>
+                  <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
+                  <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
+                    <Divider size="middle" />
+                    <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)}>+ {t('common.add')}</Button>
+                        }
+                      </Space>
+                    </Flex>
+                  </div>
                 </RbCard>
               ))}
             </div>

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

@@ -1,6 +1,6 @@
 import { useState, useImperativeHandle, forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Switch, Row, Col, Space } from 'antd'
+import { Button, Switch, Row, Col, Space, Tooltip } from 'antd'
 
 import type { ProviderModelItem, ModelListItem, ModelListDetailRef, MultiKeyConfigModalRef } from '../types';
 import RbDrawer from '@/components/RbDrawer';
@@ -9,6 +9,7 @@ import Tag from '@/components/Tag';
 import PageEmpty from '@/components/Empty/PageEmpty';
 import MultiKeyConfigModal from './MultiKeyConfigModal'
 import { getModelNewList, updateModelStatus } from '@/api/models'
+import { getLogoUrl } from '../utils'
 
 interface ModelListDetailProps {
   refresh?: () => void;
@@ -80,21 +81,25 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
                 <Tag>{t(`modelNew.${item.type}`)}</Tag>
                 <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
               </Space>}
-              avatarUrl={item.logo}
+              avatarUrl={getLogoUrl(item.logo)}
               avatar={
                 <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                   {item.name[0]}
                 </div>
               }
               extra={<Switch defaultChecked={item.is_active} disabled={loading} onChange={() => handleChange(item)} />}
+              bodyClassName="rb:relative rb:pb-[64px]! rb:h-[calc(100%-64px)]!"
             >
-              
-              <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-3">{item.description}</div>
-              <Row gutter={12} className="rb:mt-4">
-                <Col span={24}>
-                  <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
-                </Col>
-              </Row>
+              <Tooltip title={item.description}>
+                <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2">{item.description}</div>
+              </Tooltip>
+              <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
+                <Row gutter={12}>
+                  <Col span={24}>
+                    <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
+                  </Col>
+                </Row>
+              </div>
             </RbCard>
           ))}
           </div>

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

@@ -1,6 +1,6 @@
 import { useState, useImperativeHandle, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Space, App, Flex } from 'antd'
+import { Button, Space, App, Flex, Tooltip, Divider } from 'antd'
 import { UsergroupAddOutlined } from '@ant-design/icons';
 
 import type { ModelPlaza, ModelPlazaItem, ModelSquareDetailRef } from '../types';
@@ -9,6 +9,7 @@ import { getModelPlaza, addModelPlaza } from '@/api/models'
 import RbCard from '@/components/RbCard/Card'
 import Tag from '@/components/Tag';
 import PageEmpty from '@/components/Empty/PageEmpty';
+import { getLogoUrl } from '../utils'
 
 interface ModelSquareDetailProps {
   refresh: () => void;
@@ -52,42 +53,49 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
 
   return (
     <RbDrawer
-      title={<>{model.provider} {t('modelNew.modelList')} ({list.length}{t('modelNew.item')})</>}
+      title={<>{t(`modelNew.${model.provider}`)} {t('modelNew.modelList')} ({list.length}{t('modelNew.item')})</>}
       open={open}
       onClose={handleClose}
     >
-      {list.length === 0 
-        ? <PageEmpty />
-        : <div className="rb:grid rb:grid-cols-2 rb:gap-4">
-          {list.map(item => (
-            <RbCard
-              key={item.id}
-              title={item.name}
-              avatarUrl={item.logo}
-              avatar={
-                <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                  {item.name[0]}
+      <div className="rb:h-full rb:overflow-y-auto">
+        {list.length === 0 
+          ? <PageEmpty />
+          : <div className="rb:grid rb:grid-cols-2 rb:gap-4">
+            {list.map(item => (
+              <RbCard
+                key={item.id}
+                title={item.name}
+                subTitle={<Tag>{t(`modelNew.${item.type}`)}</Tag>}
+                avatarUrl={getLogoUrl(item.logo)}
+                avatar={
+                  <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
+                    {item.name[0]}
+                  </div>
+                }
+                bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
+              >
+                <Tooltip title={item.description}>
+                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
+                </Tooltip>
+                <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
+                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
+                  <Divider size="middle" />
+                  <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)}>+ {t('common.add')}</Button>
+                      }
+                    </Space>
+                  </Flex>
                 </div>
-              }
-            >
-              <Tag>{t(`modelNew.${item.type}`)}</Tag>
-              <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-3 rb:h-9">{item.description}</div>
-              <Space size={8} className="rb:mt-3">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Space>
-
-              <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)}>+ {t('common.add')}</Button>
-                  }
-                </Space>
-              </Flex>
-            </RbCard>
-          ))}
-          </div>
-        }
+              </RbCard>
+            ))}
+            </div>
+          }
+      </div>
     </RbDrawer>
   );
 });

web/src/views/ModelManagement/utils.ts

@@ -0,0 +1,26 @@
+import bedrockIcon from '@/assets/images/model/bedrock.svg'
+import dashscopeIcon from '@/assets/images/model/dashscope.png'
+import gpustackIcon from '@/assets/images/model/gpustack.png'
+import ollamaIcon from '@/assets/images/model/ollama.svg'
+import openaiIcon from '@/assets/images/model/openai.svg'
+import xinferenceIcon from '@/assets/images/model/xinference.svg'
+
+export const ICONS = {
+  bedrock: bedrockIcon,
+  dashscope: dashscopeIcon,
+  gpustack: gpustackIcon,
+  ollama: ollamaIcon,
+  openai: openaiIcon,
+  xinference: xinferenceIcon
+}
+
+export const getLogoUrl = (logo?: string) => {
+  if (!logo) {
+    return undefined
+  }
+  if (logo.startsWith('http')) {
+    return logo
+  }
+
+  return ICONS[logo as keyof typeof ICONS] || undefined
+}