Update web page config
This commit is contained in:
Xin Wang
248
web/pages/LLMLibrary.tsx
Normal file
248
web/pages/LLMLibrary.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Search, Filter, Plus, BrainCircuit, Trash2, Key, Settings2, Server, Thermometer } from 'lucide-react';
|
||||
import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI';
|
||||
import { mockLLMModels } from '../services/mockData';
|
||||
import { LLMModel } from '../types';
|
||||
|
||||
export const LLMLibraryPage: React.FC = () => {
|
||||
const [models, setModels] = useState<LLMModel[]>(mockLLMModels);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [vendorFilter, setVendorFilter] = useState<string>('all');
|
||||
const [typeFilter, setTypeFilter] = useState<string>('all');
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
|
||||
// Form State
|
||||
const [newModel, setNewModel] = useState<Partial<LLMModel>>({
|
||||
vendor: 'OpenAI Compatible',
|
||||
type: 'text',
|
||||
temperature: 0.7
|
||||
});
|
||||
|
||||
const filteredModels = models.filter(m => {
|
||||
const matchesSearch = m.name.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesVendor = vendorFilter === 'all' || m.vendor === vendorFilter;
|
||||
const matchesType = typeFilter === 'all' || m.type === typeFilter;
|
||||
return matchesSearch && matchesVendor && matchesType;
|
||||
});
|
||||
|
||||
const handleAddModel = () => {
|
||||
if (!newModel.name || !newModel.baseUrl || !newModel.apiKey) {
|
||||
alert("请填写完整信息");
|
||||
return;
|
||||
}
|
||||
|
||||
const model: LLMModel = {
|
||||
id: `m_${Date.now()}`,
|
||||
name: newModel.name,
|
||||
vendor: newModel.vendor as string,
|
||||
type: newModel.type as 'text' | 'embedding' | 'rerank',
|
||||
baseUrl: newModel.baseUrl,
|
||||
apiKey: newModel.apiKey,
|
||||
temperature: newModel.type === 'text' ? newModel.temperature : undefined
|
||||
};
|
||||
|
||||
setModels([model, ...models]);
|
||||
setIsAddModalOpen(false);
|
||||
setNewModel({ vendor: 'OpenAI Compatible', type: 'text', temperature: 0.7, name: '', baseUrl: '', apiKey: '' });
|
||||
};
|
||||
|
||||
const handleDeleteModel = (id: string) => {
|
||||
if (confirm('确认删除该模型配置吗？')) {
|
||||
setModels(prev => prev.filter(m => m.id !== id));
|
||||
}
|
||||
};
|
||||
|
||||
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="搜索模型名称..."
|
||||
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>
|
||||
<option value="OpenAI Compatible">OpenAI Compatible</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>Base URL</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<tbody>
|
||||
{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.baseUrl}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteModel(model.id)}
|
||||
className="text-muted-foreground hover:text-destructive transition-colors"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{filteredModels.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">暂无模型数据</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
isOpen={isAddModalOpen}
|
||||
onClose={() => setIsAddModalOpen(false)}
|
||||
title="添加大模型"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="ghost" onClick={() => setIsAddModalOpen(false)}>取消</Button>
|
||||
<Button onClick={handleAddModel}>确认添加</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">厂商 (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={newModel.vendor}
|
||||
onChange={e => setNewModel({...newModel, vendor: e.target.value})}
|
||||
>
|
||||
<option value="OpenAI Compatible">OpenAI Compatible</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={() => setNewModel({...newModel, type: t})}
|
||||
className={`flex-1 flex items-center justify-center py-1.5 text-xs font-bold rounded-md transition-all ${newModel.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">模型名称 (Model Name)</label>
|
||||
<Input
|
||||
value={newModel.name}
|
||||
onChange={e => setNewModel({...newModel, name: e.target.value})}
|
||||
placeholder="例如: gpt-4o, deepseek-chat"
|
||||
/>
|
||||
</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={newModel.baseUrl}
|
||||
onChange={e => setNewModel({...newModel, baseUrl: 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={newModel.apiKey}
|
||||
onChange={e => setNewModel({...newModel, apiKey: e.target.value})}
|
||||
placeholder="sk-..."
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{newModel.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">{newModel.temperature}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
step="0.1"
|
||||
value={newModel.temperature}
|
||||
onChange={(e) => setNewModel({...newModel, temperature: parseFloat(e.target.value)})}
|
||||
className="w-full h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user