hubian
292ff7b03e
功能模块: - 仪表盘: 请求统计、成功率、提供商状态、调用流程说明 - 提供商管理: 查看提供商列表、测试连接、查看详情 - 模型管理: 模型别名映射、提供商对应关系 - 日志查看: 实时日志、自动刷新 - 系统配置: 配置信息查看 端口: 19008
91 lines
4.4 KiB
HTML
91 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>模型管理 - LLM Proxy</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<style>
|
|
.gradient-bg { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<div class="flex">
|
|
<aside class="w-64 bg-slate-800 min-h-screen fixed left-0 top-0">
|
|
<div class="p-6">
|
|
<h1 class="text-white text-xl font-bold flex items-center gap-2">
|
|
<i class="ri-route-line text-2xl text-purple-400"></i>
|
|
LLM Proxy
|
|
</h1>
|
|
<p class="text-slate-400 text-sm mt-1">后台管理</p>
|
|
</div>
|
|
<nav class="mt-6">
|
|
<a href="/" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
|
|
<i class="ri-dashboard-line"></i><span>仪表盘</span>
|
|
</a>
|
|
<a href="/providers" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
|
|
<i class="ri-server-line"></i><span>提供商管理</span>
|
|
</a>
|
|
<a href="/models" class="flex items-center gap-3 px-6 py-3 bg-slate-700 text-white">
|
|
<i class="ri-cpu-line"></i><span>模型管理</span>
|
|
</a>
|
|
<a href="/logs" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
|
|
<i class="ri-file-list-line"></i><span>日志查看</span>
|
|
</a>
|
|
<a href="/config" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
|
|
<i class="ri-settings-3-line"></i><span>系统配置</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="ml-64 flex-1 p-8">
|
|
<h1 class="text-2xl font-bold text-gray-800 mb-6">模型管理</h1>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-50 border-b border-gray-100">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">模型别名</th>
|
|
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">目标模型</th>
|
|
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">提供商</th>
|
|
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">优先级</th>
|
|
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">说明</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="modelTable">
|
|
<tr><td colspan="5" class="px-6 py-8 text-center text-gray-500">加载中...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
async function loadModels() {
|
|
const res = await fetch('/api/models');
|
|
const models = await res.json();
|
|
|
|
const tbody = document.getElementById('modelTable');
|
|
|
|
tbody.innerHTML = models.map(m => `
|
|
<tr class="border-b border-gray-50 hover:bg-gray-50">
|
|
<td class="px-6 py-4 font-medium text-gray-800">
|
|
<code class="px-2 py-1 bg-purple-100 text-purple-700 rounded">${m.alias}</code>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<code class="text-gray-600">${m.target}</code>
|
|
</td>
|
|
<td class="px-6 py-4 text-gray-600">${m.provider || '-'}</td>
|
|
<td class="px-6 py-4">
|
|
${m.priority ? `<span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-sm">优先级 ${m.priority}</span>` : '-'}
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">${m.description || ''}</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
loadModels();
|
|
</script>
|
|
</body>
|
|
</html> |