make llm config supporting array config

This commit is contained in:
geekgeekrun
2025-04-12 14:36:33 +08:00
parent 17c5a40f8d
commit 924febd5e0
3 changed files with 134 additions and 62 deletions
@@ -1,6 +1,8 @@
{ [{
"providerCompleteApiUrl": "", "providerCompleteApiUrl": "",
"providerApiSecret": "", "providerApiSecret": "",
"model": "", "model": "",
"enabled": true,
"serveWeight": 100,
"_extra": {} "_extra": {}
} }]
@@ -10,8 +10,8 @@ export function createLlmConfigWindow(
llmConfigWindow!.show() llmConfigWindow!.show()
} }
llmConfigWindow = new BrowserWindow({ llmConfigWindow = new BrowserWindow({
width: 540, width: 576,
height: 400, height: 800,
resizable: false, resizable: false,
show: false, show: false,
autoHideMenuBar: true, autoHideMenuBar: true,
@@ -1,19 +1,7 @@
<template> <template>
<div class="llm-config-page"> <div class="llm-config-page">
<div class="mt1em mb1em flex flex-items-center flex-justify-between"> <div class="mt1em mb1em">
<span>大语言模型设置</span> <span>大语言模型设置</span>
<el-dropdown @command="(item) => handlePresetClick(item)">
<el-button size="small"
>配置模板 <el-icon class="el-icon--right"><arrow-down /></el-icon
></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in llmPresetList" :key="item.name" :command="item">{{
item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> </div>
<el-form <el-form
ref="formRef" ref="formRef"
@@ -22,36 +10,98 @@
label-position="top" label-position="top"
class="llm-config-form" class="llm-config-form"
> >
<el-form-item prop="providerCompleteApiUrl" label="服务提供商 Base Url"> <div v-for="(conf, index) in formContent" :key="index">
<el-input <div>
v-model="formContent.providerCompleteApiUrl" <el-form-item prop="providerCompleteApiUrl">
:autosize="{ <div
minRows: 10, class="el-form-item__label flex-items-center flex-justify-between w-full pr0px"
maxRows: 10 :style="{ display: 'flex' }"
}" >
font-size-12px <div>服务提供商 Base Url</div>
></el-input> <el-dropdown @command="(item) => handlePresetClick(item, index)">
</el-form-item> <el-button size="small"
<el-form-item prop="providerCompleteApiUrl" label="要使用的模型"> >配置模板 <el-icon class="el-icon--right"><arrow-down /></el-icon
<el-input ></el-button>
v-model="formContent.model" <template #dropdown>
:autosize="{ <el-dropdown-menu>
minRows: 10, <el-dropdown-item
maxRows: 10 v-for="item in llmPresetList"
}" :key="item.name"
font-size-12px :command="item"
></el-input> >{{ item.name }}</el-dropdown-item
</el-form-item> >
<el-form-item prop="providerApiSecret" label="从服务提供商处获取的 API Secret"> </el-dropdown-menu>
<el-input </template>
v-model="formContent.providerApiSecret" </el-dropdown>
:autosize="{ </div>
minRows: 10, <el-input
maxRows: 10 v-model="conf.providerCompleteApiUrl"
}" :autosize="{
font-size-12px minRows: 10,
></el-input> maxRows: 10
</el-form-item> }"
font-size-12px
></el-input>
</el-form-item>
<el-form-item prop="model" label="要使用的模型">
<el-input
v-model="conf.model"
:autosize="{
minRows: 10,
maxRows: 10
}"
font-size-12px
></el-input>
</el-form-item>
<el-form-item prop="providerApiSecret" label="从服务提供商处获取的 API Secret">
<el-input
v-model="conf.providerApiSecret"
:autosize="{
minRows: 10,
maxRows: 10
}"
font-size-12px
></el-input>
</el-form-item>
<div class="serve-weight-config">
<div class="flex">
<el-form-item prop="enabled">
<div class="el-form-item__label">启用</div>
<el-checkbox
v-model="conf.enabled"
:autosize="{
minRows: 10,
maxRows: 10
}"
font-size-12px
></el-checkbox>
</el-form-item>
<el-form-item prop="serveWeight" class="ml40px">
<div class="el-form-item__label">权重</div>
<el-input-number
v-model="conf.serveWeight"
:autosize="{
minRows: 10,
maxRows: 10
}"
:min="0"
:max="100"
:step="1"
step-strictly
:precision="0"
font-size-12px
placeholder="0 ~ 100"
></el-input-number>
</el-form-item>
</div>
<div class="flex">
<!-- <el-form-item class="ml20px">
<el-button type="text">测试设置</el-button>
</el-form-item> -->
</div>
</div>
</div>
</div>
</el-form> </el-form>
<footer flex mt20px pb20px flex-justify-between> <footer flex mt20px pb20px flex-justify-between>
<div> <div>
@@ -74,14 +124,20 @@ interface LlmConfigItem {
providerCompleteApiUrl: string providerCompleteApiUrl: string
providerApiSecret: string providerApiSecret: string
model: string model: string
serveWeight: number
enabled: true
} }
const formRef = ref<InstanceType<typeof ElForm>>() const formRef = ref<InstanceType<typeof ElForm>>()
const formContent = ref<LlmConfigItem>({ const formContent = ref<LlmConfigItem[]>([
providerCompleteApiUrl: '', {
providerApiSecret: '', providerCompleteApiUrl: '',
model: '' providerApiSecret: '',
}) model: '',
serveWeight: 10,
enabled: true
}
])
const formRules = {} const formRules = {}
@@ -112,7 +168,9 @@ const llmPresetList: {
config: { config: {
model: 'deepseek-chat', model: 'deepseek-chat',
providerApiSecret: '', providerApiSecret: '',
providerCompleteApiUrl: 'https://api.deepseek.com/v1' providerCompleteApiUrl: 'https://api.deepseek.com/v1',
serveWeight: 100,
enabled: true
} }
}, },
// TODO: // TODO:
@@ -121,7 +179,9 @@ const llmPresetList: {
// config: { // config: {
// model: 'deepseek-r1:14b', // model: 'deepseek-r1:14b',
// providerApiSecret: 'ollama', // providerApiSecret: 'ollama',
// providerCompleteApiUrl: 'http://127.0.0.1:11434/v1' // providerCompleteApiUrl: 'http://127.0.0.1:11434/v1',
// serveWeight: 10,
// enabled: true
// } // }
// }, // },
{ {
@@ -129,18 +189,20 @@ const llmPresetList: {
config: { config: {
model: 'qwen2.5:7b', model: 'qwen2.5:7b',
providerApiSecret: 'ollama', providerApiSecret: 'ollama',
providerCompleteApiUrl: 'http://127.0.0.1:11434/v1' providerCompleteApiUrl: 'http://127.0.0.1:11434/v1',
serveWeight: 10,
enabled: true
} }
} }
] ]
function handlePresetClick(selected: (typeof llmPresetList)[number]) { function handlePresetClick(selected: (typeof llmPresetList)[number], index) {
for (const k of Object.keys(formContent.value)) { for (const k of Object.keys(formContent.value[index])) {
formContent.value[k] = selected.config[k] formContent.value[index][k] = selected.config[k]
} }
} }
function handleTestAvailability() {} // function handleTestAvailability() {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -152,12 +214,20 @@ function handleTestAvailability() {}
<style lang="scss"> <style lang="scss">
.llm-config-form.el-form { .llm-config-form.el-form {
.el-form-item__label {
width: 20em;
}
.el-form-item__error--inline { .el-form-item__error--inline {
margin-left: 0; margin-left: 0;
margin-top: 10px; margin-top: 10px;
} }
.serve-weight-config {
display: flex;
justify-content: space-between;
.el-form-item__label {
margin-bottom: 0;
}
.el-form-item__content {
display: flex;
flex-wrap: nowrap;
}
}
} }
</style> </style>