468 lines
20 KiB
TypeScript
468 lines
20 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Search, Filter, Plus, BrainCircuit, Trash2, Key, Settings2, Server, Thermometer, Pencil, Play } from 'lucide-react';
|
|
import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI';
|
|
import { LLMModel } from '../types';
|
|
import { createLLMModel, deleteLLMModel, fetchLLMModels, previewLLMModel, updateLLMModel } from '../services/backendApi';
|
|
|
|
const maskApiKey = (key?: string) => {
|
|
if (!key) return '********';
|
|
if (key.length < 8) return '********';
|
|
return `${key.slice(0, 3)}****${key.slice(-4)}`;
|
|
};
|
|
|
|
export const LLMLibraryPage: React.FC = () => {
|
|
const [models, setModels] = useState<LLMModel[]>([]);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [vendorFilter, setVendorFilter] = useState<string>('all');
|
|
const [typeFilter, setTypeFilter] = useState<string>('all');
|
|
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
|
const [editingModel, setEditingModel] = useState<LLMModel | null>(null);
|
|
const [previewingModel, setPreviewingModel] = useState<LLMModel | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
setModels(await fetchLLMModels());
|
|
} catch (error) {
|
|
console.error(error);
|
|
setModels([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
load();
|
|
}, []);
|
|
|
|
const filteredModels = models.filter((m) => {
|
|
const q = searchTerm.toLowerCase();
|
|
const matchesSearch =
|
|
m.name.toLowerCase().includes(q) ||
|
|
(m.modelName || '').toLowerCase().includes(q) ||
|
|
(m.baseUrl || '').toLowerCase().includes(q);
|
|
const matchesVendor = vendorFilter === 'all' || m.vendor === vendorFilter;
|
|
const matchesType = typeFilter === 'all' || m.type === typeFilter;
|
|
return matchesSearch && matchesVendor && matchesType;
|
|
});
|
|
|
|
const handleCreate = async (data: Partial<LLMModel>) => {
|
|
const created = await createLLMModel(data);
|
|
setModels((prev) => [created, ...prev]);
|
|
setIsAddModalOpen(false);
|
|
};
|
|
|
|
const handleUpdate = async (id: string, data: Partial<LLMModel>) => {
|
|
const updated = await updateLLMModel(id, data);
|
|
setModels((prev) => prev.map((item) => (item.id === id ? updated : item)));
|
|
setEditingModel(null);
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('确认删除该模型配置吗？')) return;
|
|
await deleteLLMModel(id);
|
|
setModels((prev) => prev.filter((item) => item.id !== id));
|
|
};
|
|
|
|
const vendorOptions = Array.from(new Set(models.map((m) => m.vendor).filter(Boolean)));
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in py-4 pb-10">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold tracking-tight text-white">模型接入</h1>
|
|
<Button onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
|
|
<Plus className="mr-2 h-4 w-4" /> 添加模型
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
|
|
<div className="relative col-span-1 md:col-span-2">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="搜索模型名称/Model Name..."
|
|
className="pl-9 border-0 bg-white/5"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Filter className="h-4 w-4 text-muted-foreground" />
|
|
<select
|
|
className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
|
|
value={vendorFilter}
|
|
onChange={(e) => setVendorFilter(e.target.value)}
|
|
>
|
|
<option value="all">所有厂商</option>
|
|
{vendorOptions.map((vendor) => (
|
|
<option key={vendor} value={vendor}>{vendor}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<select
|
|
className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
|
|
value={typeFilter}
|
|
onChange={(e) => setTypeFilter(e.target.value)}
|
|
>
|
|
<option value="all">所有类型</option>
|
|
<option value="text">文本 (Text)</option>
|
|
<option value="embedding">嵌入 (Embedding)</option>
|
|
<option value="rerank">重排 (Rerank)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>模型名称</TableHead>
|
|
<TableHead>厂商</TableHead>
|
|
<TableHead>类型</TableHead>
|
|
<TableHead>模型标识</TableHead>
|
|
<TableHead>Base URL</TableHead>
|
|
<TableHead>API Key</TableHead>
|
|
<TableHead className="text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<tbody>
|
|
{!isLoading && filteredModels.map((model) => (
|
|
<TableRow key={model.id}>
|
|
<TableCell className="font-medium text-white flex items-center">
|
|
<BrainCircuit className="w-4 h-4 mr-2 text-primary" />
|
|
{model.name}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline">{model.vendor}</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant={model.type === 'text' ? 'default' : 'outline'} className={model.type !== 'text' ? 'text-blue-400 border-blue-400/20 bg-blue-400/5' : ''}>
|
|
{model.type.toUpperCase()}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="font-mono text-xs text-muted-foreground">{model.modelName || '-'}</TableCell>
|
|
<TableCell className="font-mono text-xs text-muted-foreground max-w-[240px] truncate">{model.baseUrl}</TableCell>
|
|
<TableCell className="font-mono text-xs text-muted-foreground">{maskApiKey(model.apiKey)}</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button variant="ghost" size="icon" onClick={() => setPreviewingModel(model)} disabled={model.type !== 'text'} title={model.type !== 'text' ? '仅 text 模型可预览' : '预览模型'}>
|
|
<Play className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" onClick={() => setEditingModel(model)}>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" onClick={() => handleDelete(model.id)} className="text-muted-foreground hover:text-destructive transition-colors">
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{!isLoading && filteredModels.length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">暂无模型数据</TableCell>
|
|
</TableRow>
|
|
)}
|
|
{isLoading && (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">加载中...</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<LLMModelModal isOpen={isAddModalOpen} onClose={() => setIsAddModalOpen(false)} onSubmit={handleCreate} />
|
|
|
|
<LLMModelModal
|
|
isOpen={!!editingModel}
|
|
onClose={() => setEditingModel(null)}
|
|
onSubmit={(data) => handleUpdate(editingModel!.id, data)}
|
|
initialModel={editingModel || undefined}
|
|
/>
|
|
|
|
<LLMPreviewModal
|
|
isOpen={!!previewingModel}
|
|
onClose={() => setPreviewingModel(null)}
|
|
model={previewingModel}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const LLMModelModal: React.FC<{
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (model: Partial<LLMModel>) => Promise<void>;
|
|
initialModel?: LLMModel;
|
|
}> = ({ isOpen, onClose, onSubmit, initialModel }) => {
|
|
const [name, setName] = useState('');
|
|
const [vendor, setVendor] = useState('OpenAI Compatible');
|
|
const [type, setType] = useState<'text' | 'embedding' | 'rerank'>('text');
|
|
const [modelName, setModelName] = useState('');
|
|
const [baseUrl, setBaseUrl] = useState('');
|
|
const [apiKey, setApiKey] = useState('');
|
|
const [temperature, setTemperature] = useState(0.7);
|
|
const [contextLength, setContextLength] = useState(8192);
|
|
const [enabled, setEnabled] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
if (initialModel) {
|
|
setName(initialModel.name || '');
|
|
setVendor(initialModel.vendor || 'OpenAI Compatible');
|
|
setType(initialModel.type || 'text');
|
|
setModelName(initialModel.modelName || '');
|
|
setBaseUrl(initialModel.baseUrl || '');
|
|
setApiKey(initialModel.apiKey || '');
|
|
setTemperature(initialModel.temperature ?? 0.7);
|
|
setContextLength(initialModel.contextLength ?? 8192);
|
|
setEnabled(initialModel.enabled ?? true);
|
|
return;
|
|
}
|
|
|
|
setName('');
|
|
setVendor('OpenAI Compatible');
|
|
setType('text');
|
|
setModelName('');
|
|
setBaseUrl('');
|
|
setApiKey('');
|
|
setTemperature(0.7);
|
|
setContextLength(8192);
|
|
setEnabled(true);
|
|
}, [initialModel, isOpen]);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!name.trim() || !baseUrl.trim() || !apiKey.trim()) {
|
|
alert('请填写完整信息');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setSaving(true);
|
|
await onSubmit({
|
|
name: name.trim(),
|
|
vendor: vendor.trim(),
|
|
type,
|
|
modelName: modelName.trim() || undefined,
|
|
baseUrl: baseUrl.trim(),
|
|
apiKey: apiKey.trim(),
|
|
temperature: type === 'text' ? temperature : undefined,
|
|
contextLength: contextLength > 0 ? contextLength : undefined,
|
|
enabled,
|
|
});
|
|
} catch (error: any) {
|
|
alert(error?.message || '保存失败');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={initialModel ? '编辑大模型' : '添加大模型'}
|
|
footer={
|
|
<>
|
|
<Button variant="ghost" onClick={onClose}>取消</Button>
|
|
<Button onClick={handleSubmit} disabled={saving}>{saving ? '保存中...' : (initialModel ? '保存修改' : '确认添加')}</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="space-y-4 max-h-[75vh] overflow-y-auto px-1 custom-scrollbar">
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">厂商 (Vendor)</label>
|
|
<select
|
|
className="flex h-10 w-full rounded-md border border-white/10 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground appearance-none cursor-pointer [&>option]:bg-card"
|
|
value={vendor}
|
|
onChange={(e) => setVendor(e.target.value)}
|
|
>
|
|
<option value="OpenAI Compatible">OpenAI Compatible</option>
|
|
<option value="OpenAI">OpenAI</option>
|
|
<option value="SiliconFlow">SiliconFlow</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">模型类型 (Type)</label>
|
|
<div className="flex bg-white/5 p-1 rounded-lg border border-white/10">
|
|
{(['text', 'embedding', 'rerank'] as const).map((t) => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setType(t)}
|
|
className={`flex-1 flex items-center justify-center py-1.5 text-xs font-bold rounded-md transition-all ${type === t ? 'bg-primary text-primary-foreground shadow-lg' : 'text-muted-foreground hover:text-foreground'}`}
|
|
>
|
|
{t === 'text' && <Settings2 className="w-3 h-3 mr-1.5" />}
|
|
{t === 'embedding' && <BrainCircuit className="w-3 h-3 mr-1.5" />}
|
|
{t === 'rerank' && <Filter className="w-3 h-3 mr-1.5" />}
|
|
{t === 'text' ? '文本' : t === 'embedding' ? '嵌入' : '重排'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">模型名称 (Display Name)</label>
|
|
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="例如: GPT4o-Prod" />
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">模型标识 (model_name)</label>
|
|
<Input value={modelName} onChange={(e) => setModelName(e.target.value)} placeholder="例如: gpt-4o-mini" />
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block flex items-center"><Server className="w-3 h-3 mr-1.5" /> Base URL</label>
|
|
<Input value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)} placeholder="https://api.openai.com/v1" className="font-mono text-xs" />
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block flex items-center"><Key className="w-3 h-3 mr-1.5" /> API Key</label>
|
|
<Input type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="sk-..." className="font-mono text-xs" />
|
|
</div>
|
|
|
|
{type === 'text' && (
|
|
<div className="space-y-3 pt-2">
|
|
<div className="flex justify-between items-center mb-1">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block flex items-center"><Thermometer className="w-3 h-3 mr-1.5" /> 温度 (Temperature)</label>
|
|
<span className="text-[10px] font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">{temperature.toFixed(1)}</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.1"
|
|
value={temperature}
|
|
onChange={(e) => setTemperature(parseFloat(e.target.value))}
|
|
className="w-full h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">上下文长度 (context_length)</label>
|
|
<Input type="number" min={1} value={contextLength} onChange={(e) => setContextLength(parseInt(e.target.value || '0', 10))} />
|
|
</div>
|
|
|
|
<label className="flex items-center space-x-2 text-xs text-muted-foreground">
|
|
<input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
|
|
<span>启用</span>
|
|
</label>
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const LLMPreviewModal: React.FC<{
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
model: LLMModel | null;
|
|
}> = ({ isOpen, onClose, model }) => {
|
|
const [systemPrompt, setSystemPrompt] = useState('You are a concise helpful assistant.');
|
|
const [message, setMessage] = useState('Hello, please introduce yourself in one sentence.');
|
|
const [temperature, setTemperature] = useState(0.7);
|
|
const [maxTokens, setMaxTokens] = useState(256);
|
|
const [reply, setReply] = useState('');
|
|
const [latency, setLatency] = useState<number | null>(null);
|
|
const [usage, setUsage] = useState<Record<string, number> | null>(null);
|
|
const [isRunning, setIsRunning] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
setReply('');
|
|
setLatency(null);
|
|
setUsage(null);
|
|
setTemperature(model?.temperature ?? 0.7);
|
|
}, [isOpen, model]);
|
|
|
|
const runPreview = async () => {
|
|
if (!model?.id) return;
|
|
if (!message.trim()) {
|
|
alert('请输入测试消息');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsRunning(true);
|
|
const result = await previewLLMModel(model.id, {
|
|
message,
|
|
system_prompt: systemPrompt || undefined,
|
|
max_tokens: maxTokens,
|
|
temperature,
|
|
});
|
|
setReply(result.reply || result.error || '无返回内容');
|
|
setLatency(result.latency_ms ?? null);
|
|
setUsage(result.usage || null);
|
|
} catch (error: any) {
|
|
alert(error?.message || '预览失败');
|
|
} finally {
|
|
setIsRunning(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={`预览模型: ${model?.name || ''}`}
|
|
footer={
|
|
<>
|
|
<Button variant="ghost" onClick={onClose}>关闭</Button>
|
|
<Button onClick={runPreview} disabled={isRunning}>{isRunning ? '请求中...' : '开始预览'}</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">System Prompt</label>
|
|
<textarea
|
|
value={systemPrompt}
|
|
onChange={(e) => setSystemPrompt(e.target.value)}
|
|
className="flex min-h-[70px] w-full rounded-md border-0 bg-white/5 px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-white"
|
|
placeholder="可选系统提示词"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">User Message</label>
|
|
<textarea
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
className="flex min-h-[90px] w-full rounded-md border-0 bg-white/5 px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-white"
|
|
placeholder="输入用户消息"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">Temperature</label>
|
|
<Input type="number" min={0} max={2} step={0.1} value={temperature} onChange={(e) => setTemperature(parseFloat(e.target.value || '0'))} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">Max Tokens</label>
|
|
<Input type="number" min={1} value={maxTokens} onChange={(e) => setMaxTokens(parseInt(e.target.value || '1', 10))} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-primary/20 bg-primary/5 p-3 space-y-2">
|
|
<div className="flex items-center justify-between text-xs text-primary">
|
|
<span>模型回复</span>
|
|
<span>{latency !== null ? `Latency: ${latency}ms` : ''}</span>
|
|
</div>
|
|
<textarea
|
|
readOnly
|
|
value={reply}
|
|
className="flex min-h-[140px] w-full rounded-md border-0 bg-black/20 px-3 py-2 text-sm shadow-sm text-white"
|
|
placeholder="回复会显示在这里"
|
|
/>
|
|
{usage && (
|
|
<div className="text-xs text-muted-foreground font-mono">
|
|
prompt: {usage.prompt_tokens ?? '-'} | completion: {usage.completion_tokens ?? '-'} | total: {usage.total_tokens ?? '-'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
};
|