perf: styles of model config page

web/src/app/home/bots/page.tsx

@@ -151,8 +151,8 @@ export default function BotConfigPage() {
             );
           })}
           <CreateCardComponent
-            height={200}
-            plusSize={90}
+            height={'200px'}
+            plusSize={'90px'}
             onClick={handleCreateBotClick}
           />
         </div>

web/src/app/home/models/LLMConfig.module.css

@@ -17,7 +17,7 @@
     display: grid;
     grid-template-rows: repeat(auto-fill, minmax(220px, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-    gap: 15px;
+    gap: 2rem;
     justify-items: center;
     align-items: center;
 }
@@ -30,61 +30,3 @@
     align-items: center;
     justify-content: center;
 }
-
-.cardContainer {
-    width: 360px;
-    height: 200px;
-    background-color: #FFF;
-    border-radius: 9px;
-    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-evenly;
-}
-
-.iconBasicInfoContainer {
-    width: 300px;
-    height: 100px;
-    margin-left: 20px;
-    display: flex;
-    flex-direction: row;
-}
-
-.icon {
-    width: 90px;
-    height: 90px;
-    border-radius: 5px;
-    font-size: 40px;
-    line-height: 90px;
-    text-align: center;
-    color: #ffffff;
-    background: rgba(96, 149, 209, 0.31);
-    border: 1px solid rgba(96, 149, 209, 0.31);
-}
-
-.basicInfoContainer {
-    width: 200px;
-    height: 90px;
-    padding-left: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
-}
-
-.basicInfoText {
-
-}
-
-.bigText {
-    font-size: 20px;
-}
-
-.urlAndUpdateText {
-    margin-left: 20px;
-}
-
-
-
-

web/src/app/home/models/component/llm-card/LLMCard.module.css

@@ -0,0 +1,106 @@
+.cardContainer {
+    width: 24rem;
+    height: 10rem;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    padding: 1.2rem;
+}
+
+.iconBasicInfoContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 0.8rem;
+    user-select: none;
+}
+
+.iconImage {
+    width: 4rem;
+    height: 4rem;
+    margin: 0.2rem;
+    border-radius: 50%;
+}
+
+.basicInfoContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+
+.basicInfoText {
+    font-size: 1.4rem;
+    font-weight: bold;
+}
+
+.providerContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.2rem;
+}
+
+.providerIcon {
+    width: 1.2rem;
+    height: 1.2rem;
+    color: #626262;
+}
+
+.providerLabel {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #626262;
+}
+
+.baseURLContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.2rem;
+}
+
+.baseURLIcon {
+    width: 1.2rem;
+    height: 1.2rem;
+    color: #626262;
+}
+
+.baseURLText {
+    font-size: 1rem;
+    color: #626262;
+}
+
+.abilitiesContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.4rem;
+}
+
+.abilityBadge {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.2rem;
+    height: 1.6rem;
+    padding: 0.5rem;
+    border-radius: 0.8rem;
+    background-color: #66baff80;
+}
+
+.abilityIcon {
+    width: 1.2rem;
+    height: 1.2rem;
+    color: #2288ee;
+}
+
+.abilityLabel {
+    font-size: 1rem;
+    font-weight: 300;
+    color: #2288ee;
+}

web/src/app/home/models/component/llm-card/LLMCard.tsx

@@ -1,25 +1,56 @@
-import styles from '../../LLMConfig.module.css';
+import styles from './LLMCard.module.css';
 import { LLMCardVO } from '@/app/home/models/component/llm-card/LLMCardVO';
 
+function checkAbilityBadges(abilities: string[]) {
+
+  const abilityBadges = {
+    'vision': <div key="vision" className={`${styles.abilityBadge}`}>
+      <svg className={`${styles.abilityIcon}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 11.4872 7.07719 10.9925 7.22057 10.5268C7.61175 11.3954 8.48527 12 9.5 12C10.8807 12 12 10.8807 12 9.5C12 8.48527 11.3954 7.61175 10.5269 7.21995C10.9925 7.07719 11.4872 7 12 7Z"></path></svg>
+      <span className={`${styles.abilityLabel}`}>视觉能力</span>
+    </div>,
+    'func_call': <div key="func_call" className={`${styles.abilityBadge}`}>
+      <svg className={`${styles.abilityIcon}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27158C6.56252 2.8332 7.9923 3.10749 8.97927 4.09446C10.1002 5.21537 10.3019 6.90741 9.5843 8.23385L20.293 18.9437L18.8788 20.3579L8.16982 9.64875C6.84325 10.3669 5.15069 10.1654 4.02952 9.04421C3.04227 8.05696 2.7681 6.62665 3.20701 5.39332L5.44373 7.63C6.02952 8.21578 6.97927 8.21578 7.56505 7.63C8.15084 7.04421 8.15084 6.09446 7.56505 5.50868L5.32943 3.27158ZM15.6968 5.15512L18.8788 3.38736L20.293 4.80157L18.5252 7.98355L16.7574 8.3371L14.6361 10.4584L13.2219 9.04421L15.3432 6.92289L15.6968 5.15512ZM8.97927 13.2868L10.3935 14.7011L5.09018 20.0044C4.69966 20.3949 4.06649 20.3949 3.67597 20.0044C3.31334 19.6417 3.28744 19.0699 3.59826 18.6774L3.67597 18.5902L8.97927 13.2868Z"></path></svg>
+      <span className={`${styles.abilityLabel}`}>函数调用</span>
+    </div>,
+  }
+
+  return abilities.map((ability) => {
+    return abilityBadges[ability as keyof typeof abilityBadges];
+  });
+}
+
 export default function LLMCard({ cardVO }: { cardVO: LLMCardVO }) {
   return (
     <div className={`${styles.cardContainer}`}>
-      {/*  icon和基本信息  */}
       <div className={`${styles.iconBasicInfoContainer}`}>
-        {/*  icon  */}
-        <div className={`${styles.icon}`}>ICO</div>
-        {/*  bot基本信息  */}
+        <img className={`${styles.iconImage}`} src={cardVO.iconURL} alt="icon" />
+
         <div className={`${styles.basicInfoContainer}`}>
+          {/* 名称 */}
           <div className={`${styles.basicInfoText}  ${styles.bigText}`}>
             {cardVO.name}
           </div>
-          <div className={`${styles.basicInfoText}`}>
-            厂商：{cardVO.company}
+          {/* 厂商 */}
+          <div className={`${styles.providerContainer}`}>
+          <svg className={`${styles.providerIcon}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="currentColor"><path d="M21 13.2422V20H22V22H2V20H3V13.2422C1.79401 12.435 1 11.0602 1 9.5C1 8.67286 1.22443 7.87621 1.63322 7.19746L4.3453 2.5C4.52393 2.1906 4.85406 2 5.21132 2H18.7887C19.1459 2 19.4761 2.1906 19.6547 2.5L22.3575 7.18172C22.7756 7.87621 23 8.67286 23 9.5C23 11.0602 22.206 12.435 21 13.2422ZM19 13.9725C18.8358 13.9907 18.669 14 18.5 14C17.2409 14 16.0789 13.478 15.25 12.6132C14.4211 13.478 13.2591 14 12 14C10.7409 14 9.5789 13.478 8.75 12.6132C7.9211 13.478 6.75911 14 5.5 14C5.331 14 5.16417 13.9907 5 13.9725V20H19V13.9725ZM5.78865 4L3.35598 8.21321C3.12409 8.59843 3 9.0389 3 9.5C3 10.8807 4.11929 12 5.5 12C6.53096 12 7.44467 11.3703 7.82179 10.4295C8.1574 9.59223 9.3426 9.59223 9.67821 10.4295C10.0553 11.3703 10.969 12 12 12C13.031 12 13.9447 11.3703 14.3218 10.4295C14.6574 9.59223 15.8426 9.59223 16.1782 10.4295C16.5553 11.3703 17.469 12 18.5 12C19.8807 12 21 10.8807 21 9.5C21 9.0389 20.8759 8.59843 20.6347 8.19746L18.2113 4H5.78865Z"></path></svg>
+            <span className={`${styles.providerLabel}`}>
+              {cardVO.providerLabel}
+            </span>
+          </div>
+          {/* baseURL */}
+          <div className={`${styles.baseURLContainer}`}>
+            <svg className={`${styles.baseURLIcon}`}  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(98,98,98,1)"><path d="M13.0607 8.11097L14.4749 9.52518C17.2086 12.2589 17.2086 16.691 14.4749 19.4247L14.1214 19.7782C11.3877 22.5119 6.95555 22.5119 4.22188 19.7782C1.48821 17.0446 1.48821 12.6124 4.22188 9.87874L5.6361 11.293C3.68348 13.2456 3.68348 16.4114 5.6361 18.364C7.58872 20.3166 10.7545 20.3166 12.7072 18.364L13.0607 18.0105C15.0133 16.0578 15.0133 12.892 13.0607 10.9394L11.6465 9.52518L13.0607 8.11097ZM19.7782 14.1214L18.364 12.7072C20.3166 10.7545 20.3166 7.58872 18.364 5.6361C16.4114 3.68348 13.2456 3.68348 11.293 5.6361L10.9394 5.98965C8.98678 7.94227 8.98678 11.1081 10.9394 13.0607L12.3536 14.4749L10.9394 15.8891L9.52518 14.4749C6.79151 11.7413 6.79151 7.30911 9.52518 4.57544L9.87874 4.22188C12.6124 1.48821 17.0446 1.48821 19.7782 4.22188C22.5119 6.95555 22.5119 11.3877 19.7782 14.1214Z"></path></svg>
+            <span className={`${styles.baseURLText}`}>
+              {cardVO.baseURL}
+            </span>
+          </div>
+          {/* 能力 */}
+          <div className={`${styles.abilitiesContainer}`}>
+            {checkAbilityBadges(cardVO.abilities)}
           </div>
         </div>
+
       </div>
-      {/*  URL和创建时间  */}
-      <div className={`${styles.urlAndUpdateText}`}>URL：{cardVO.URL}</div>
     </div>
   );
 }

web/src/app/home/models/component/llm-card/LLMCardVO.ts

@@ -1,20 +1,26 @@
 export interface ILLMCardVO {
   id: string;
+  iconURL: string;
   name: string;
-  company: string;
-  URL: string;
+  providerLabel: string;
+  baseURL: string;
+  abilities: string[];
 }
 
 export class LLMCardVO implements ILLMCardVO {
   id: string;
+  iconURL: string;
+  providerLabel: string;
   name: string;
-  company: string;
-  URL: string;
+  baseURL: string;
+  abilities: string[];
 
   constructor(props: ILLMCardVO) {
     this.id = props.id;
+    this.iconURL = props.iconURL;
+    this.providerLabel = props.providerLabel;
     this.name = props.name;
-    this.company = props.company;
-    this.URL = props.URL;
+    this.baseURL = props.baseURL;
+    this.abilities = props.abilities;
   }
 }

web/src/app/home/models/page.tsx

@@ -29,9 +29,11 @@ export default function LLMConfigPage() {
           console.log('model', model);
           return new LLMCardVO({
             id: model.uuid,
+            iconURL: httpClient.getProviderRequesterIconURL(model.requester),
             name: model.name,
-            company: model.requester,
-            URL: model.requester_config?.base_url,
+            providerLabel: model.requester.substring(0, 10),
+            baseURL: model.requester_config?.base_url,
+            abilities: model.abilities,
           });
         });
         console.log('get llmModelList', llmModelList);
@@ -85,6 +87,13 @@ export default function LLMConfigPage() {
       </Modal>
       {cardList.length > 0 && (
         <div className={`${styles.modelListContainer}`}>
+
+          <CreateCardComponent
+            width={'24rem'}
+            height={'10rem'}
+            plusSize={'90px'}
+            onClick={handleCreateModelClick}
+          />
           {cardList.map((cardVO) => {
             return (
               <div
@@ -97,12 +106,6 @@ export default function LLMConfigPage() {
               </div>
             );
           })}
-          <CreateCardComponent
-            width={360}
-            height={200}
-            plusSize={90}
-            onClick={handleCreateModelClick}
-          />
         </div>
       )}
 

web/src/app/home/pipelines/page.tsx

@@ -109,9 +109,8 @@ export default function PluginConfigPage() {
         </div>
       )}
       <CreateCardComponent
-        width={360}
-        height={200}
-        plusSize={90}
+        height={'200px'}
+        plusSize={'90px'}
         onClick={() => {
           setModalOpen(true);
         }}

web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx

@@ -91,8 +91,8 @@ export default function PluginInstalledComponent() {
         );
       })}
       <CreateCardComponent
-        height={140}
-        plusSize={90}
+        height={'140px'}
+        plusSize={'90px'}
         onClick={() => {
           setModalOpen(true);
         }}

web/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx

@@ -4,17 +4,19 @@ export default function CreateCardComponent({
   height,
   plusSize,
   onClick,
+  width = '100%',
 }: {
-  height: number;
-  plusSize: number;
+  height: string;
+  plusSize: string;
   onClick: () => void;
+  width?: string;
 }) {
   return (
     <div
       className={`${styles.cardContainer} ${styles.createCardContainer} `}
       style={{
-        width: `100%`,
-        height: `${height}px`,
+        width: `${width}`,
+        height: `${height}`,
         fontSize: `${plusSize}px`,
       }}
       onClick={onClick}

web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css

@@ -1,9 +1,7 @@
 .cardContainer {
-    width: 360px;
-    height: 200px;
     background-color: #FFF;
     border-radius: 9px;
-    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     align-items: center;