diff --git a/web/src/app/home/bots/page.tsx b/web/src/app/home/bots/page.tsx index 0b7b1114..b3e7e168 100644 --- a/web/src/app/home/bots/page.tsx +++ b/web/src/app/home/bots/page.tsx @@ -151,8 +151,8 @@ export default function BotConfigPage() { ); })} diff --git a/web/src/app/home/models/LLMConfig.module.css b/web/src/app/home/models/LLMConfig.module.css index 7dfb3115..ce47b6fc 100644 --- a/web/src/app/home/models/LLMConfig.module.css +++ b/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; -} - - - - diff --git a/web/src/app/home/models/component/llm-card/LLMCard.module.css b/web/src/app/home/models/component/llm-card/LLMCard.module.css new file mode 100644 index 00000000..54c21575 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/src/app/home/models/component/llm-card/LLMCard.tsx b/web/src/app/home/models/component/llm-card/LLMCard.tsx index 96040fa9..2f902904 100644 --- a/web/src/app/home/models/component/llm-card/LLMCard.tsx +++ b/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':
+ + 视觉能力 +
, + 'func_call':
+ + 函数调用 +
, + } + + return abilities.map((ability) => { + return abilityBadges[ability as keyof typeof abilityBadges]; + }); +} + export default function LLMCard({ cardVO }: { cardVO: LLMCardVO }) { return (
- {/* icon和基本信息 */}
- {/* icon */} -
ICO
- {/* bot基本信息 */} + icon +
+ {/* 名称 */}
{cardVO.name}
-
- 厂商：{cardVO.company} + {/* 厂商 */} +
+ + + {cardVO.providerLabel} + +
+ {/* baseURL */} +
+ + + {cardVO.baseURL} + +
+ {/* 能力 */} +
+ {checkAbilityBadges(cardVO.abilities)}
+
- {/* URL和创建时间 */} -
URL：{cardVO.URL}
); } diff --git a/web/src/app/home/models/component/llm-card/LLMCardVO.ts b/web/src/app/home/models/component/llm-card/LLMCardVO.ts index 7f731fcd..274cede1 100644 --- a/web/src/app/home/models/component/llm-card/LLMCardVO.ts +++ b/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; } } diff --git a/web/src/app/home/models/page.tsx b/web/src/app/home/models/page.tsx index 3d7262e4..4904118f 100644 --- a/web/src/app/home/models/page.tsx +++ b/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() { {cardList.length > 0 && (
+ + {cardList.map((cardVO) => { return (
); })} -
)} diff --git a/web/src/app/home/pipelines/page.tsx b/web/src/app/home/pipelines/page.tsx index 96a8dfe2..7349b27a 100644 --- a/web/src/app/home/pipelines/page.tsx +++ b/web/src/app/home/pipelines/page.tsx @@ -109,9 +109,8 @@ export default function PluginConfigPage() {
)} { setModalOpen(true); }} diff --git a/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx b/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx index 7dd3e11a..58d41b52 100644 --- a/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx +++ b/web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx @@ -91,8 +91,8 @@ export default function PluginInstalledComponent() { ); })} { setModalOpen(true); }} diff --git a/web/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx b/web/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx index 17d86f05..dd65e889 100644 --- a/web/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx +++ b/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 (