446 lines
24 KiB
TypeScript
446 lines
24 KiB
TypeScript
import { DashboardShell } from "@/components/dashboard-shell"
|
|
import { DashboardHeader } from "@/components/dashboard-header"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Brain, Mic, Database, Plus, Sparkles, Edit, Play, Sliders, User } from "lucide-react"
|
|
|
|
export default function AIModelPage() {
|
|
return (
|
|
<DashboardShell>
|
|
<DashboardHeader heading="大模型管理" text="管理洛天依的AI模型、语音和知识库">
|
|
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
添加新模型
|
|
</Button>
|
|
</DashboardHeader>
|
|
|
|
<Tabs defaultValue="framework" className="space-y-4">
|
|
<TabsList className="bg-white p-1 shadow-md rounded-lg border">
|
|
<TabsTrigger
|
|
value="framework"
|
|
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
|
>
|
|
大模型框架
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="finetune"
|
|
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
|
>
|
|
模型微调
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="voice"
|
|
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
|
>
|
|
语音合成
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="knowledge"
|
|
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
|
>
|
|
知识库
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="framework" className="space-y-4">
|
|
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl font-bold flex items-center">
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
|
大模型框架系统
|
|
</span>
|
|
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
|
</CardTitle>
|
|
<CardDescription>管理洛天依使用的大语言模型框架</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<Card className="border-2 border-pink-500 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden relative group">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-pink-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">当前使用模型</CardTitle>
|
|
<div className="p-1.5 rounded-full bg-pink-100">
|
|
<Brain className="h-5 w-5 text-pink-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-purple-600">
|
|
GPT-4o
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">版本: 2.0 | 上次更新: 2024-03-15</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full border-pink-200 hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
|
|
>
|
|
查看详情
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card className="shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">备用模型</CardTitle>
|
|
<div className="p-1.5 rounded-full bg-purple-100">
|
|
<Brain className="h-5 w-5 text-purple-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-xl font-bold">Claude 3</div>
|
|
<p className="text-xs text-muted-foreground">版本: 1.5 | 上次更新: 2024-02-20</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
|
|
>
|
|
设为主要
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card className="shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">备用模型</CardTitle>
|
|
<div className="p-1.5 rounded-full bg-blue-100">
|
|
<Brain className="h-5 w-5 text-blue-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-xl font-bold">Llama 3</div>
|
|
<p className="text-xs text-muted-foreground">版本: 1.0 | 上次更新: 2024-01-10</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full hover:bg-blue-50 hover:text-blue-700 transition-all duration-200"
|
|
>
|
|
设为主要
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
添加新模型
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="finetune" className="space-y-4">
|
|
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl font-bold flex items-center">
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
|
大模型微调
|
|
</span>
|
|
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
|
</CardTitle>
|
|
<CardDescription>管理洛天依的人格和行为特征</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-4">
|
|
<Card className="shadow-md hover:shadow-lg transition-all duration-300">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm flex items-center">
|
|
<Sparkles className="h-4 w-4 mr-2 text-pink-500" />
|
|
人格设定
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1 bg-pink-50 p-3 rounded-lg">
|
|
<p className="text-sm font-medium text-pink-700">性格特点</p>
|
|
<p className="text-sm text-gray-600">活泼、开朗、善良、有音乐天赋</p>
|
|
</div>
|
|
<div className="space-y-1 bg-purple-50 p-3 rounded-lg">
|
|
<p className="text-sm font-medium text-purple-700">语言风格</p>
|
|
<p className="text-sm text-gray-600">亲切、自然、略带俏皮</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1 bg-blue-50 p-3 rounded-lg">
|
|
<p className="text-sm font-medium text-blue-700">兴趣爱好</p>
|
|
<p className="text-sm text-gray-600">唱歌、跳舞、与用户交流</p>
|
|
</div>
|
|
<div className="space-y-1 bg-teal-50 p-3 rounded-lg">
|
|
<p className="text-sm font-medium text-teal-700">背景设定</p>
|
|
<p className="text-sm text-gray-600">虚拟歌手、16岁、身高158cm</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
|
|
>
|
|
<Edit className="h-4 w-4 mr-2" />
|
|
编辑人格设定
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card className="shadow-md hover:shadow-lg transition-all duration-300">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm flex items-center">
|
|
<Database className="h-4 w-4 mr-2 text-purple-500" />
|
|
微调数据集
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between p-2 rounded-lg bg-gradient-to-r from-pink-50 to-purple-50">
|
|
<p className="text-sm font-medium">基础对话数据集</p>
|
|
<p className="text-sm text-pink-600 font-medium">10,000 条对话</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">歌曲相关对话</p>
|
|
<p className="text-sm text-purple-600 font-medium">2,500 条对话</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">舞蹈相关对话</p>
|
|
<p className="text-sm text-blue-600 font-medium">1,800 条对话</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">服装相关对话</p>
|
|
<p className="text-sm text-teal-600 font-medium">3,200 条对话</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
|
|
>
|
|
查看数据集
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300"
|
|
>
|
|
添加新数据
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="voice" className="space-y-4">
|
|
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl font-bold flex items-center">
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
|
语音克隆与合成
|
|
</span>
|
|
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
|
</CardTitle>
|
|
<CardDescription>管理洛天依的语音模型</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Card className="shadow-md hover:shadow-lg transition-all duration-300">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm flex items-center">
|
|
<Mic className="h-4 w-4 mr-2 text-pink-500" />
|
|
语音模型
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between p-2 rounded-lg bg-gradient-to-r from-pink-50 to-purple-50">
|
|
<p className="text-sm font-medium">当前模型</p>
|
|
<p className="text-sm text-pink-600 font-medium">洛天依官方语音 v3.0</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">采样率</p>
|
|
<p className="text-sm text-gray-600">48kHz</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">音质</p>
|
|
<p className="text-sm text-gray-600">高清 (24bit)</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">上次更新</p>
|
|
<p className="text-sm text-gray-600">2024-03-01</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
|
|
>
|
|
<Play className="h-4 w-4 mr-2" />
|
|
试听示例
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card className="shadow-md hover:shadow-lg transition-all duration-300">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm flex items-center">
|
|
<Sliders className="h-4 w-4 mr-2 text-purple-500" />
|
|
语音参数
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">音调</p>
|
|
<p className="text-sm text-gray-600">标准 (0)</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">语速</p>
|
|
<p className="text-sm text-gray-600">中等 (1.0x)</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">情感强度</p>
|
|
<p className="text-sm text-gray-600">中等 (0.7)</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">音量</p>
|
|
<p className="text-sm text-gray-600">标准 (1.0)</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
|
|
>
|
|
调整参数
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
<Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
|
|
上传新语音样本
|
|
</Button>
|
|
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
|
更新语音模型
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="knowledge" className="space-y-4">
|
|
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl font-bold flex items-center">
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
|
知识库管理
|
|
</span>
|
|
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
|
</CardTitle>
|
|
<CardDescription>管理用户信息和洛天依的知识库</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Card className="shadow-md hover:shadow-lg transition-all duration-300">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm flex items-center">
|
|
<User className="h-4 w-4 mr-2 text-pink-500" />
|
|
用户模型
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between p-2 rounded-lg bg-gradient-to-r from-pink-50 to-purple-50">
|
|
<p className="text-sm font-medium">活跃用户模型</p>
|
|
<p className="text-sm text-pink-600 font-medium">5,732 个</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">平均模型大小</p>
|
|
<p className="text-sm text-gray-600">2.4 MB</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">上次更新</p>
|
|
<p className="text-sm text-gray-600">今天 08:45</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
|
|
>
|
|
查看用户模型
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card className="shadow-md hover:shadow-lg transition-all duration-300">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm flex items-center">
|
|
<Database className="h-4 w-4 mr-2 text-purple-500" />
|
|
基础知识库
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">洛天依相关知识</p>
|
|
<p className="text-sm text-purple-600 font-medium">1,200 条</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">歌曲知识</p>
|
|
<p className="text-sm text-blue-600 font-medium">850 条</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">舞蹈知识</p>
|
|
<p className="text-sm text-teal-600 font-medium">320 条</p>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
|
|
<p className="text-sm font-medium">通用知识</p>
|
|
<p className="text-sm text-gray-600">5,000+ 条</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
|
|
>
|
|
编辑知识库
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
<Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
|
|
导入知识
|
|
</Button>
|
|
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
|
更新知识库
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DashboardShell>
|
|
)
|
|
}
|