mirror of
https://github.com/yuruotong1/autoMate.git
synced 2026-03-22 13:07:17 +08:00
closes #13
This commit is contained in:
yuruo
@@ -1,169 +1,170 @@
|
||||
import { Button, Form, Input, Select, Space, message } from 'antd';
|
||||
import styles from './styles.module.scss'
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useLoaderData } from 'react-router-dom';
|
||||
import { localServerBaseUrl } from '@renderer/config';
|
||||
|
||||
export function Setting(){
|
||||
export function Setting() {
|
||||
const [form] = Form.useForm();
|
||||
const config = useLoaderData() as ConfigDataType
|
||||
form.setFieldsValue(config);
|
||||
const { Option } = Select;
|
||||
const tailLayout = {
|
||||
wrapperCol: { offset: 6, span: 16 },
|
||||
wrapperCol: { offset: 6, span: 16 },
|
||||
};
|
||||
const [keys, setKeys] = useState<string[]>([])
|
||||
const onModelChange = (value: string) => {
|
||||
switch (value) {
|
||||
case 'openai':
|
||||
form.setFieldsValue({ model: 'gpt-4-turbo', base_url: "https://api.openai.com/v1" });
|
||||
break;
|
||||
case 'ollama':
|
||||
form.setFieldsValue({ model: 'ollama/codeqwen:latest', api_base: "http://localhost:11434" });
|
||||
break;
|
||||
default:
|
||||
}
|
||||
};
|
||||
|
||||
const [keys, setKeys] = useState<string[]>([])
|
||||
const onModelChange = (value: string) => {
|
||||
switch (value) {
|
||||
case 'openai':
|
||||
form.setFieldsValue({ model: 'gpt-4-turbo', base_url:"https://api.openai.com/v1"});
|
||||
break;
|
||||
case 'ollama':
|
||||
form.setFieldsValue({ model: 'ollama/llama2',api_base: "http://localhost:11434" });
|
||||
break;
|
||||
default:
|
||||
}
|
||||
};
|
||||
const onFinish = async (values: any) => {
|
||||
// 注册快捷键
|
||||
window.api.shortCut()
|
||||
await window.api.sql(`update config set content=@content where id = 1`,
|
||||
'update',
|
||||
{
|
||||
content: JSON.stringify(values)
|
||||
})
|
||||
// window.close();
|
||||
};
|
||||
|
||||
const onFinish = async (values: any) => {
|
||||
// 注册快捷键
|
||||
window.api.shortCut()
|
||||
await window.api.sql(`update config set content=@content where id = 1`,
|
||||
'update',
|
||||
{
|
||||
content: JSON.stringify(values)
|
||||
})
|
||||
// window.close();
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
window.close()
|
||||
};
|
||||
const onClose = () => {
|
||||
window.close()
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.settingPage}>
|
||||
<h1>Setting</h1>
|
||||
<Form
|
||||
form={form}
|
||||
name="control-hooks"
|
||||
onFinish={onFinish}
|
||||
>
|
||||
<section>
|
||||
<h5>快捷键定义</h5>
|
||||
<Form.Item name="shortcut" label="呼出快捷键" rules={[{ required: true }]}>
|
||||
<Input
|
||||
type="text"
|
||||
readOnly
|
||||
onKeyDown={(e) => {
|
||||
if (e.metaKey || e.ctrlKey || e.altKey) {
|
||||
const code = e.code.replace(/Left|Right|Key|Digit/, '')
|
||||
if (keys.includes(code)) return
|
||||
keys.push(code)
|
||||
setKeys(keys)
|
||||
// 如果以数字或字母或者空格结尾
|
||||
if (code.match(/^(\w|\s)$/gi)) {
|
||||
e.currentTarget.value = keys.join('+')
|
||||
form.setFieldsValue({shortcut: e.currentTarget.value})
|
||||
setKeys([])
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
<div className='flex flex-row justify-between items-center mb-3'>
|
||||
<h5>大模型配置信息</h5>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const hide = message.loading('检测中...', 0);
|
||||
try {
|
||||
const res = await fetch(`${localServerBaseUrl}/llm`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(
|
||||
{ "messages": [{ "role": "user", "content": "hello" }],
|
||||
"llm_config": JSON.stringify(form.getFieldValue("llm"))}),
|
||||
}
|
||||
)
|
||||
hide();
|
||||
if (res.ok) {
|
||||
message.success('连接成功')
|
||||
} else {
|
||||
message.error(`连接失败，请检查配置信息是否正确：\n${res.statusText}`)
|
||||
}
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(`连接失败，请检查配置信息是否正确：\n${error}`)
|
||||
}
|
||||
}}>检查连接</Button>
|
||||
return (
|
||||
<div className={styles.settingPage}>
|
||||
<h1>Setting</h1>
|
||||
<Form
|
||||
form={form}
|
||||
name="control-hooks"
|
||||
onFinish={onFinish}
|
||||
>
|
||||
<section>
|
||||
<h5>快捷键定义</h5>
|
||||
<Form.Item name="shortcut" label="呼出快捷键" rules={[{ required: true }]}>
|
||||
<Input
|
||||
type="text"
|
||||
readOnly
|
||||
onKeyDown={(e) => {
|
||||
if (e.metaKey || e.ctrlKey || e.altKey) {
|
||||
const code = e.code.replace(/Left|Right|Key|Digit/, '')
|
||||
if (keys.includes(code)) return
|
||||
keys.push(code)
|
||||
setKeys(keys)
|
||||
// 如果以数字或字母或者空格结尾
|
||||
if (code.match(/^(\w|\s)$/gi)) {
|
||||
e.currentTarget.value = keys.join('+')
|
||||
form.setFieldsValue({ shortcut: e.currentTarget.value })
|
||||
setKeys([])
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
<div className='flex flex-row justify-between items-center mb-3'>
|
||||
<h5>大模型配置信息</h5>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const hide = message.loading('检测中...', 0);
|
||||
try {
|
||||
const res = await fetch(`${localServerBaseUrl}/llm`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(
|
||||
{
|
||||
"messages": [{ "role": "user", "content": "hello" }],
|
||||
"llm_config": JSON.stringify(form.getFieldValue("llm"))
|
||||
}),
|
||||
}
|
||||
)
|
||||
hide();
|
||||
if (res.ok) {
|
||||
message.success('连接成功')
|
||||
} else {
|
||||
message.error(`连接失败，请检查配置信息是否正确：\n${res.statusText}`)
|
||||
}
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(`连接失败，请检查配置信息是否正确：\n${error}`)
|
||||
}
|
||||
}}>检查连接</Button>
|
||||
</div>
|
||||
<Form.Item name="format" label="格式" rules={[{ required: true }]}>
|
||||
<Select
|
||||
placeholder="选择格式，一般OpenAI格式为万能格式"
|
||||
onChange={onModelChange}
|
||||
allowClear
|
||||
>
|
||||
<Option value="openai">OpenAI</Option>
|
||||
<Option value="ollama">Ollama</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name={["llm", "model"]} label="model" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.format !== currentValues.format}
|
||||
>
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('format') === 'openai' ? (
|
||||
<div>
|
||||
<Form.Item name={["llm", "api_key"]} label="api_key" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={["llm", "base_url"]} label="base_url" rules={[{ required: false }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.format !== currentValues.format}
|
||||
>
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('format') === 'ollama' ? (
|
||||
<Form.Item name={["llm", "api_base"]} label="api_base" rules={[{ required: false }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
) : null
|
||||
}
|
||||
</Form.Item>
|
||||
</section>
|
||||
<div className='mt-10 flex justify-center items-center'>
|
||||
<Form.Item {...tailLayout} >
|
||||
<Space>
|
||||
<Button htmlType="button" onClick={onClose} className='mr-5'>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="primary" htmlType="submit" >
|
||||
保存
|
||||
</Button>
|
||||
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
<Form.Item name="format" label="格式" rules={[{ required: true }]}>
|
||||
<Select
|
||||
placeholder="选择格式，一般OpenAI格式为万能格式"
|
||||
onChange={onModelChange}
|
||||
allowClear
|
||||
>
|
||||
<Option value="openai">OpenAI</Option>
|
||||
<Option value="ollama">Ollama</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name={["llm", "model"]} label="model" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.format !== currentValues.format}
|
||||
>
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('format') === 'openai' ? (
|
||||
<div>
|
||||
<Form.Item name={["llm", "api_key"]} label="api_key" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={["llm", "base_url"]} label="base_url" rules={[{ required: false }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.format !== currentValues.format}
|
||||
>
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('format') === 'ollama' ? (
|
||||
<Form.Item name={["llm", "api_base"]} label="api_base" rules={[{ required: false }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
) : null
|
||||
}
|
||||
</Form.Item>
|
||||
</section>
|
||||
<div className='mt-10 flex justify-center items-center'>
|
||||
<Form.Item {...tailLayout} >
|
||||
<Space>
|
||||
<Button htmlType="button" onClick={onClose} className='mr-5'>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="primary" htmlType="submit" >
|
||||
保存
|
||||
</Button>
|
||||
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user