xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-02 12:05:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: load requesters & llm models from api

Browse Source
This commit is contained in:
Junyan Qin
2025-04-27 13:58:06 +08:00
parent 5672bdb406
commit 43d73bc493
5 changed files with 54 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -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;
}
}

4
web_ui/src/app/home/models/component/llm-form/ChooseAdapterEntity.ts Normal file
View File

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

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

@@ -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={[
{value: 'OpenAI', label: 'OpenAI'},
{value: 'OLAMA', label: 'OLAMA'},
{value: 'DeepSeek', label: 'DeepSeek'},
]}
options={requesterNameList}
/>
</Form.Item>

75
web_ui/src/app/home/models/page.tsx
View File

@@ -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[]>([
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 [cardList, setCardList] = useState<LLMCardVO[]>([])
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)