468 lines
15 KiB
TypeScript
468 lines
15 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Card, Form, Input, InputNumber, Button, Space, Divider, Select, Spin, Tag, App } from 'antd';
|
||
import { ApiOutlined, SaveOutlined, SyncOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
||
import { OllamaService } from '../utils/ollama';
|
||
import { useOllama } from '../contexts/OllamaContext';
|
||
|
||
const { Option } = Select;
|
||
|
||
interface ModelInfo {
|
||
name: string;
|
||
size?: number;
|
||
modified?: string;
|
||
}
|
||
|
||
const ModelSettings: React.FC = () => {
|
||
const [form] = Form.useForm();
|
||
const [loading, setLoading] = useState(false);
|
||
const [testing, setTesting] = useState(false);
|
||
const [detectingModels, setDetectingModels] = useState(false);
|
||
const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
|
||
const [connectionStatus, setConnectionStatus] = useState<'unknown' | 'success' | 'error'>('unknown');
|
||
const [currentModel, setCurrentModel] = useState<string>('');
|
||
const { status, refreshModels } = useOllama();
|
||
const { message: messageApi } = App.useApp();
|
||
|
||
useEffect(() => {
|
||
const loadConfig = async () => {
|
||
// 从 localStorage 加载配置
|
||
const configData = localStorage.getItem('ai_system_config');
|
||
const config = configData ? JSON.parse(configData) : {
|
||
ollamaUrl: 'http://localhost:11434',
|
||
model: '',
|
||
temperature: 0.7,
|
||
topP: 0.9,
|
||
maxTokens: 2000
|
||
};
|
||
|
||
form.setFieldsValue(config);
|
||
setCurrentModel(config.model || '');
|
||
|
||
// 如果已连接且有模型，自动显示当前状态
|
||
if (status.isConnected && status.availableModels.length > 0) {
|
||
setAvailableModels(status.availableModels);
|
||
setConnectionStatus('success');
|
||
}
|
||
};
|
||
loadConfig();
|
||
}, [form, status]);
|
||
|
||
const handleDetectModels = async () => {
|
||
setDetectingModels(true);
|
||
setConnectionStatus('unknown');
|
||
try {
|
||
const values = await form.validateFields(['ollamaUrl']);
|
||
const ollamaService = new OllamaService(values);
|
||
|
||
// 测试连接
|
||
const isConnected = await ollamaService.testConnection();
|
||
if (!isConnected) {
|
||
setConnectionStatus('error');
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: '无法连接到 Ollama 服务，请检查服务地址和状态',
|
||
});
|
||
setAvailableModels([]);
|
||
return;
|
||
}
|
||
|
||
// 获取模型列表
|
||
const models = await ollamaService.getAvailableModelsWithInfo();
|
||
setAvailableModels(models);
|
||
setConnectionStatus('success');
|
||
|
||
if (models.length === 0) {
|
||
messageApi.open({
|
||
type: 'warning',
|
||
content: '未检测到已安装的模型，请先使用 ollama pull 命令安装模型',
|
||
});
|
||
} else {
|
||
messageApi.open({
|
||
type: 'success',
|
||
content: `成功检测到 ${models.length} 个已安装模型`,
|
||
});
|
||
|
||
// 如果当前模型不在列表中，清空选择
|
||
if (currentModel && !models.find(m => m.name === currentModel)) {
|
||
form.setFieldValue('model', undefined);
|
||
setCurrentModel('');
|
||
messageApi.open({
|
||
type: 'warning',
|
||
content: '当前选择的模型未在本地安装，请重新选择',
|
||
});
|
||
}
|
||
}
|
||
|
||
// 刷新全局状态
|
||
await refreshModels();
|
||
} catch (error) {
|
||
setConnectionStatus('error');
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: '模型检测失败，请检查 Ollama 服务状态',
|
||
});
|
||
setAvailableModels([]);
|
||
} finally {
|
||
setDetectingModels(false);
|
||
}
|
||
};
|
||
|
||
const handleTestConnection = async () => {
|
||
setTesting(true);
|
||
setConnectionStatus('unknown');
|
||
try {
|
||
const values = await form.validateFields();
|
||
const ollamaService = new OllamaService(values);
|
||
const isConnected = await ollamaService.testConnection();
|
||
|
||
if (isConnected) {
|
||
setConnectionStatus('success');
|
||
messageApi.open({
|
||
type: 'success',
|
||
content: 'Ollama 服务连接成功！',
|
||
});
|
||
await refreshModels();
|
||
} else {
|
||
setConnectionStatus('error');
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: 'Ollama 服务连接失败，请检查服务地址',
|
||
});
|
||
}
|
||
} catch (error) {
|
||
setConnectionStatus('error');
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: '连接测试失败，请检查配置',
|
||
});
|
||
} finally {
|
||
setTesting(false);
|
||
}
|
||
};
|
||
|
||
const handleModelChange = (value: string) => {
|
||
setCurrentModel(value);
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const values = await form.validateFields();
|
||
|
||
// 验证选择的模型是否可用
|
||
if (currentModel && availableModels.length > 0) {
|
||
const modelExists = availableModels.find(m => m.name === currentModel);
|
||
if (!modelExists) {
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: '请选择本地已安装的模型，或点击"检测模型"刷新列表',
|
||
});
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 确保包含当前选择的模型
|
||
const configToSave = {
|
||
...values,
|
||
model: currentModel || values.model
|
||
};
|
||
|
||
// 保存到 localStorage
|
||
localStorage.setItem('ai_system_config', JSON.stringify(configToSave));
|
||
|
||
// 显示保存成功提示
|
||
messageApi.open({
|
||
type: 'success',
|
||
content: '配置保存成功！',
|
||
});
|
||
|
||
// 更新当前模型显示
|
||
setCurrentModel(configToSave.model);
|
||
|
||
// 刷新全局状态
|
||
await refreshModels();
|
||
} catch (error) {
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: '配置保存失败，请检查输入',
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const formatModelSize = (bytes?: number) => {
|
||
if (!bytes) return '未知';
|
||
const gb = bytes / (1024 * 1024 * 1024);
|
||
return `${gb.toFixed(2)} GB`;
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ marginBottom: '24px' }}>
|
||
<h2 style={{ margin: 0, fontSize: '20px', fontWeight: 600, color: '#262626' }}>模型设置</h2>
|
||
<p style={{ margin: '8px 0 0 0', color: '#8c8c8c', fontSize: '14px' }}>配置本地 Ollama 服务和 AI 模型参数</p>
|
||
</div>
|
||
|
||
<div style={{
|
||
background: 'white',
|
||
borderRadius: '8px',
|
||
border: '1px solid #f0f0f0',
|
||
marginBottom: '16px',
|
||
overflow: 'hidden'
|
||
}}>
|
||
<div style={{
|
||
padding: '16px 24px',
|
||
background: '#fafafa',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '12px'
|
||
}}>
|
||
<div style={{
|
||
width: '8px',
|
||
height: '8px',
|
||
borderRadius: '50%',
|
||
background: connectionStatus === 'success' ? '#52c41a' : connectionStatus === 'error' ? '#ff4d4f' : '#faad14'
|
||
}} />
|
||
<div>
|
||
<div style={{ fontWeight: 500, color: '#262626' }}>
|
||
{connectionStatus === 'success' ? '服务正常' : connectionStatus === 'error' ? '服务异常' : '未检测'}
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>
|
||
{availableModels.length > 0
|
||
? `已安装 ${availableModels.length} 个模型`
|
||
: connectionStatus === 'success'
|
||
? '未安装模型'
|
||
: '请先连接服务'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Card bordered={false} style={{ boxShadow: 'none' }}>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
initialValues={{
|
||
ollamaUrl: 'http://localhost:11434',
|
||
model: '',
|
||
temperature: 0.7,
|
||
topP: 0.9,
|
||
maxTokens: 2000
|
||
}}
|
||
>
|
||
<div style={{ marginBottom: '24px' }}>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
fontWeight: 500,
|
||
color: '#262626',
|
||
marginBottom: '16px'
|
||
}}>
|
||
服务配置
|
||
</div>
|
||
|
||
<Form.Item
|
||
label={<span style={{ color: '#595959' }}>Ollama 服务地址</span>}
|
||
name="ollamaUrl"
|
||
rules={[{ required: true, message: '请输入Ollama服务地址' }]}
|
||
>
|
||
<Input
|
||
placeholder="http://localhost:11434"
|
||
style={{ borderRadius: '6px' }}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Space style={{ marginBottom: '16px' }}>
|
||
<Button
|
||
icon={<ApiOutlined />}
|
||
onClick={handleTestConnection}
|
||
loading={testing}
|
||
style={{ borderRadius: '6px' }}
|
||
>
|
||
测试连接
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
icon={<SyncOutlined />}
|
||
onClick={handleDetectModels}
|
||
loading={detectingModels}
|
||
style={{ borderRadius: '6px' }}
|
||
>
|
||
检测模型
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '24px' }}>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
fontWeight: 500,
|
||
color: '#262626',
|
||
marginBottom: '16px'
|
||
}}>
|
||
模型选择
|
||
</div>
|
||
|
||
<Form.Item
|
||
label={
|
||
<Space>
|
||
<span style={{ color: '#595959' }}>AI 模型</span>
|
||
{availableModels.length > 0 && (
|
||
<Tag color="success">{availableModels.length} 个可用</Tag>
|
||
)}
|
||
</Space>
|
||
}
|
||
name="model"
|
||
rules={[{
|
||
required: true,
|
||
message: '请选择AI模型'
|
||
}]}
|
||
tooltip="只能选择本地已安装的模型"
|
||
>
|
||
<Select
|
||
placeholder={availableModels.length === 0 ? "请先点击检测模型" : "选择AI模型"}
|
||
showSearch
|
||
allowClear
|
||
onChange={handleModelChange}
|
||
notFoundContent={detectingModels ? <Spin size="small" /> : "未检测到可用模型"}
|
||
disabled={availableModels.length === 0}
|
||
style={{ borderRadius: '6px' }}
|
||
>
|
||
{availableModels.map(model => (
|
||
<Option key={model.name} value={model.name}>
|
||
<Space>
|
||
<span>{model.name}</span>
|
||
{model.size && (
|
||
<span style={{ color: '#8c8c8c', fontSize: '12px' }}>
|
||
({formatModelSize(model.size)})
|
||
</span>
|
||
)}
|
||
</Space>
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
{currentModel && (
|
||
<div style={{
|
||
padding: '12px',
|
||
background: '#f6ffed',
|
||
border: '1px solid #b7eb8f',
|
||
borderRadius: '6px',
|
||
marginBottom: '16px'
|
||
}}>
|
||
<Space>
|
||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||
<span style={{ color: '#52c41a', fontSize: '14px' }}>
|
||
当前使用模型: {currentModel}
|
||
</span>
|
||
</Space>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '24px' }}>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
fontWeight: 500,
|
||
color: '#262626',
|
||
marginBottom: '16px'
|
||
}}>
|
||
生成参数
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
|
||
<Form.Item
|
||
label={<span style={{ color: '#595959' }}>温度</span>}
|
||
name="temperature"
|
||
rules={[{ required: true, message: '请输入温度值' }]}
|
||
tooltip="控制生成文本的随机性"
|
||
>
|
||
<InputNumber
|
||
min={0}
|
||
max={2}
|
||
step={0.1}
|
||
precision={1}
|
||
style={{ width: '100%', borderRadius: '6px' }}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={<span style={{ color: '#595959' }}>Top P</span>}
|
||
name="topP"
|
||
rules={[{ required: true, message: '请输入Top P值' }]}
|
||
tooltip="控制生成文本的多样性"
|
||
>
|
||
<InputNumber
|
||
min={0}
|
||
max={1}
|
||
step={0.1}
|
||
precision={1}
|
||
style={{ width: '100%', borderRadius: '6px' }}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={<span style={{ color: '#595959' }}>最大 Tokens</span>}
|
||
name="maxTokens"
|
||
rules={[{ required: true, message: '请输入最大生成长度' }]}
|
||
>
|
||
<InputNumber
|
||
min={100}
|
||
max={8000}
|
||
step={100}
|
||
style={{ width: '100%', borderRadius: '6px' }}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
|
||
<Form.Item style={{ marginBottom: 0 }}>
|
||
<Button
|
||
type="primary"
|
||
icon={<SaveOutlined />}
|
||
onClick={handleSave}
|
||
loading={loading}
|
||
size="large"
|
||
style={{ borderRadius: '6px', minWidth: '120px' }}
|
||
>
|
||
保存配置
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
<Divider style={{ margin: '32px 0' }} />
|
||
|
||
<div>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
fontWeight: 500,
|
||
color: '#262626',
|
||
marginBottom: '16px'
|
||
}}>
|
||
使用说明
|
||
</div>
|
||
<ul style={{
|
||
margin: 0,
|
||
paddingLeft: '20px',
|
||
color: '#595959',
|
||
fontSize: '14px',
|
||
lineHeight: '1.8'
|
||
}}>
|
||
<li>确保 Ollama 服务正在运行（默认端口 11434）</li>
|
||
<li>点击"测试连接"验证 Ollama 服务是否正常</li>
|
||
<li>点击"检测模型"获取本地已安装的模型列表</li>
|
||
<li>模型选择限制为只能使用本地已安装的模型</li>
|
||
<li>如需新模型，请使用命令：ollama pull 模型名</li>
|
||
<li>推荐：qwen3:8b起步</li>
|
||
<li>温度参数控制生成文本的随机性，建议值为 0.7</li>
|
||
</ul>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ModelSettings; |