feat: load requesters & llm models from api

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

@@ -31,9 +31,6 @@ export default function LLMCard({
             <div className={`${styles.urlAndUpdateText}`}>
                 URL：{cardVO.URL}
             </div>
-            <div className={`${styles.urlAndUpdateText}`}>
-                更新时间：{cardVO.updateTime}
-            </div>
         </div>
     );
 }

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

@@ -4,7 +4,6 @@ export interface ILLMCardVO {
     model: string;
     company: string;
     URL: string;
-    updateTime: string;
 }
 
 export class LLMCardVO implements ILLMCardVO {
@@ -13,7 +12,6 @@ export class LLMCardVO implements ILLMCardVO {
     model: string;
     company: string;
     URL: string;
-    updateTime: string;
 
     constructor(props: ILLMCardVO) {
         this.id = props.id;
@@ -21,7 +19,6 @@ export class LLMCardVO implements ILLMCardVO {
         this.model = props.model;
         this.company = props.company;
         this.URL = props.URL;
-        this.updateTime = props.updateTime;
     }
 
 }

web_ui/src/app/home/models/component/llm-form/ChooseAdapterEntity.ts

@@ -0,0 +1,4 @@
+export interface IChooseRequesterEntity {
+    label: string
+    value: string
+}

web_ui/src/app/home/models/component/llm-form/LLMForm.tsx

@@ -2,6 +2,8 @@ import styles from "@/app/home/models/LLMConfig.module.css";
 import {Button, Form, Input, Select, SelectProps, Space} from "antd";
 import {ICreateLLMField} from "@/app/home/models/ICreateLLMField";
 import {useEffect, useState} from "react";
+import {IChooseRequesterEntity} from "@/app/home/models/component/llm-form/ChooseAdapterEntity";
+import { httpClient } from "@/app/infra/http/HttpClient";
 
 export default function LLMForm({
     editMode,
@@ -27,7 +29,10 @@ export default function LLMForm({
             value: 'vision',
         },
     ];
+    const [requesterNameList, setRequesterNameList] = useState<IChooseRequesterEntity[]>([])
+
     useEffect(() => {
+        initLLMModelFormComponent()
         if (editMode && initLLMId) {
             getLLMConfig(initLLMId).then(val => {
                 form.setFieldsValue(val)
@@ -35,7 +40,18 @@ export default function LLMForm({
         } else {
             form.resetFields()
         }
-    })
+    }, [])
+
+    async function initLLMModelFormComponent() {
+        const requesterNameList = await httpClient.getProviderRequesters()
+        setRequesterNameList(requesterNameList.requesters.map(item => {
+            return {
+                label: item.label.zh_CN,
+                value: item.name
+            }
+        }))
+        // TODO 拉取初始化表单信息
+    }
 
     async function getLLMConfig(id: string): Promise<ICreateLLMField> {
         return {
@@ -102,11 +118,7 @@ export default function LLMForm({
                         style={{width: 120}}
                         onChange={() => {
                         }}
-                        options={[
+                        options={requesterNameList}
-                            {value: 'OpenAI', label: 'OpenAI'},
-                            {value: 'OLAMA', label: 'OLAMA'},
-                            {value: 'DeepSeek', label: 'DeepSeek'},
-                        ]}
                     />
                 </Form.Item>
 

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

@@ -1,6 +1,6 @@
 "use client"
 
-import {useState} from "react";
+import {useState, useEffect} from "react";
 import {LLMCardVO} from "@/app/home/models/component/llm-card/LLMCardVO";
 import styles from "./LLMConfig.module.css"
 import EmptyAndCreateComponent from "@/app/home/components/empty-and-create-component/EmptyAndCreateComponent";
@@ -8,54 +8,43 @@ import {Modal} from "antd";
 import LLMCard from "@/app/home/models/component/llm-card/LLMCard";
 import LLMForm from "@/app/home/models/component/llm-form/LLMForm";
 import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
+import { httpClient } from "@/app/infra/http/HttpClient";
+import { LLMModel } from "@/app/infra/api/api-types";
 
 export default function LLMConfigPage() {
-    const [cardList, setCardList] = useState<LLMCardVO[]>([
+    const [cardList, setCardList] = useState<LLMCardVO[]>([])
-        new LLMCardVO({
-            id: "1",
-            name: "测试模型",
-            model: "GPT-4o",
-            URL: "www.openai.com",
-            company: "OpenAI",
-            updateTime: "2025.1.2"
-        }),
-        new LLMCardVO({
-            id: "2",
-            name: "测试模型",
-            model: "GPT-4o",
-            URL: "www.openai.com",
-            company: "OpenAI",
-            updateTime: "2025.1.2"
-        }),
-        new LLMCardVO({
-            id: "3",
-            name: "测试模型",
-            model: "GPT-4o",
-            URL: "www.openai.com",
-            company: "OpenAI",
-            updateTime: "2025.1.2"
-        }),
-        new LLMCardVO({
-            id: "4",
-            name: "测试模型",
-            model: "GPT-4o",
-            URL: "www.openai.com",
-            company: "OpenAI",
-            updateTime: "2025.1.2"
-        }),
-        new LLMCardVO({
-            id: "5",
-            name: "测试模型",
-            model: "GPT-4o",
-            URL: "www.openai.com",
-            company: "OpenAI",
-            updateTime: "2025.1.2"
-        }),
-    ])
     const [modalOpen, setModalOpen] = useState<boolean>(false);
     const [isEditForm, setIsEditForm] = useState(false)
     const [nowSelectedLLM, setNowSelectedLLM] = useState<LLMCardVO | null>(null)
 
+    useEffect(() => {
+        getLLMModelList().then((llmModelList) => {
+            setCardList(llmModelList)
+        })
+    }, [])
+
+    function getLLMModelList(): Promise<LLMCardVO[]> {
+        return new Promise((resolve) => {
+            httpClient.getProviderLLMModels().then((resp) => {
+                const llmModelList: LLMCardVO[] = resp.models.map((model: LLMModel) => {
+                    console.log("model", model)
+                    return new LLMCardVO({
+                        id: model.uuid,
+                        name: model.name,
+                        model: model.name,
+                        company: model.requester,
+                        URL: model.requester_config.base_url,
+                    })
+                })
+                resolve(llmModelList)
+            }).catch((err) => {
+                // TODO error toast
+                console.error("get LLM model list error", err)
+                resolve([])
+            })
+        })
+    }
+
     function selectLLM(cardVO: LLMCardVO) {
         setIsEditForm(true)
         setNowSelectedLLM(cardVO)