hubian
d28ad1a292
功能更新： - 新增智能添加功能：粘贴文本自动解析为结构化数据 - 新增展示开关：各分类和产品支持显示/隐藏控制 - 保留原始数据：智能添加的产品保留raw_text字段 - 优化价格显示：支持多币种、价格区间、单位 - 修复图标问题：CPU图标改为ri-cpu-line - 新增favicon：所有页面添加浏览器标签图标 技术改进： - 新增大模型API集成（LLM Proxy） - 新增smart-add API接口 - 新增visible字段和toggle API - 优化前端表格显示
220 lines
11 KiB
HTML
220 lines
11 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>ParamHub - 参数百科</title>
|
||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen">
|
||
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
||
<div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
|
||
<a href="/" class="flex items-center gap-2">
|
||
<i class="ri-dashboard-3-line text-2xl text-indigo-600"></i>
|
||
<span class="text-xl font-bold text-gray-800">ParamHub</span>
|
||
</a>
|
||
<div class="flex gap-4 text-sm" id="topNav">
|
||
<!-- 动态加载 -->
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="max-w-7xl mx-auto px-4 py-8">
|
||
<div class="mb-6">
|
||
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||
<i class="ri-book-open-line text-teal-600"></i>
|
||
知识库
|
||
</h1>
|
||
<p class="text-gray-500 mt-1">AI模型参数与硬件知识</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<!-- 参数量 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-calculator-line text-blue-600"></i>
|
||
什么是参数量？
|
||
</h2>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
参数量（Parameters）是衡量大模型规模的指标，表示模型中权重参数的数量。
|
||
例如 GPT-3 有 175B 参数，即约1750亿个参数。
|
||
</p>
|
||
<div class="mt-4 p-4 bg-blue-50 rounded-lg">
|
||
<div class="font-medium text-blue-800 mb-2">常见规模分类：</div>
|
||
<ul class="text-sm text-blue-600 space-y-1">
|
||
<li>• 小模型：<1B (适合边缘设备)</li>
|
||
<li>• 中模型：1B-10B (消费级GPU可运行)</li>
|
||
<li>• 大模型：10B-100B (需要多GPU)</li>
|
||
<li>• 超大模型：>100B (需要数据中心)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 上下文长度 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-text-wrap text-green-600"></i>
|
||
什么是上下文长度？
|
||
</h2>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
上下文长度（Context Length）是模型能处理的输入文本最大长度。
|
||
更长的上下文意味着模型可以理解更长的文档或对话历史。
|
||
</p>
|
||
<div class="mt-4 p-4 bg-green-50 rounded-lg">
|
||
<div class="font-medium text-green-800 mb-2">常见长度：</div>
|
||
<ul class="text-sm text-green-600 space-y-1">
|
||
<li>• 4K：传统长度，适合简单对话</li>
|
||
<li>• 32K：中等长度，适合长文档</li>
|
||
<li>• 128K：超长上下文，如GPT-4 Turbo</li>
|
||
<li>• 200K：Claude 3的极限长度</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 显存计算 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-cpu-line text-orange-600"></i>
|
||
如何计算显存需求？
|
||
</h2>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
模型显存需求 ≈ 参数量 × 每参数字节数 × 1.3（含KV Cache开销）
|
||
</p>
|
||
<div class="mt-4 p-4 bg-orange-50 rounded-lg">
|
||
<div class="font-medium text-orange-800 mb-2">计算公式：</div>
|
||
<ul class="text-sm text-orange-600 space-y-1">
|
||
<li>• FP32: 参数量 × 4字节 × 1.3</li>
|
||
<li>• FP16: 参数量 × 2字节 × 1.3</li>
|
||
<li>• INT8: 参数量 × 1字节 × 1.3</li>
|
||
<li>• INT4: 参数量 × 0.5字节 × 1.3</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 量化 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-scales-3-line text-purple-600"></i>
|
||
什么是量化？
|
||
</h2>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
量化（Quantization）是将模型参数从高精度转换为低精度，减少显存占用和计算量。
|
||
如FP16→INT8→INT4，精度损失可控，资源节省显著。
|
||
</p>
|
||
<div class="mt-4 p-4 bg-purple-50 rounded-lg">
|
||
<div class="font-medium text-purple-800 mb-2">量化效果：</div>
|
||
<ul class="text-sm text-purple-600 space-y-1">
|
||
<li>• FP32→FP16: 显存减半，精度基本不变</li>
|
||
<li>• FP16→INT8: 显存再减半，精度略降</li>
|
||
<li>• INT8→INT4: 显存再减半，需特殊技术</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MMLU -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-bar-chart-box-line text-red-600"></i>
|
||
什么是MMLU？
|
||
</h2>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
MMLU（Massive Multitask Language Understanding）是评估大模型综合能力的标准测试集，
|
||
覆盖57个学科领域，分数越高代表模型知识面越广。
|
||
</p>
|
||
<div class="mt-4 p-4 bg-red-50 rounded-lg">
|
||
<div class="font-medium text-red-800 mb-2">分数参考：</div>
|
||
<ul class="text-sm text-red-600 space-y-1">
|
||
<li>• 60-70%：入门级，如GPT-3</li>
|
||
<li>• 70-80%：中等水平，如Llama 2 70B</li>
|
||
<li>• 80-90%：优秀水平，如GPT-4、Claude 3</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HumanEval -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-code-box-line text-teal-600"></i>
|
||
什么是HumanEval？
|
||
</h2>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
HumanEval是评估模型代码能力的测试集，包含164个编程题目。
|
||
分数表示模型能正确完成的题目比例。
|
||
</p>
|
||
<div class="mt-4 p-4 bg-teal-50 rounded-lg">
|
||
<div class="font-medium text-teal-800 mb-2">分数参考：</div>
|
||
<ul class="text-sm text-teal-600 space-y-1">
|
||
<li>• 20-30%：基础代码能力</li>
|
||
<li>• 40-50%：中等代码能力</li>
|
||
<li>• 80%+：优秀代码能力，如Claude 3 Opus</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选型指南 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6 mt-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-lightbulb-line text-yellow-600"></i>
|
||
GPU选型指南
|
||
</h2>
|
||
<table class="w-full">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-4 py-2 text-left text-sm font-medium text-gray-600">需求场景</th>
|
||
<th class="px-4 py-2 text-left text-sm font-medium text-gray-600">推荐GPU</th>
|
||
<th class="px-4 py-2 text-left text-sm font-medium text-gray-600">显存需求</th>
|
||
<th class="px-4 py-2 text-left text-sm font-medium text-gray-600">预算范围</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y">
|
||
<tr><td class="px-4 py-2 text-gray-800">个人学习/推理7B</td><td class="px-4 py-2">RTX 3060 12GB</td><td class="px-4 py-2">12-16GB</td><td class="px-4 py-2 text-gray-600">$300</td></tr>
|
||
<tr><td class="px-4 py-2 text-gray-800">个人开发/推理13B</td><td class="px-4 py-2">RTX 3090/4090</td><td class="px-4 py-2">24GB</td><td class="px-4 py-2 text-gray-600">$700-$1600</td></tr>
|
||
<tr><td class="px-4 py-2 text-gray-800">小团队训练/推理70B</td><td class="px-4 py-2">A100 40GB x2</td><td class="px-4 py-2">80GB</td><td class="px-4 py-2 text-gray-600">$12,000</td></tr>
|
||
<tr><td class="px-4 py-2 text-gray-800">企业训练大模型</td><td class="px-4 py-2">H100 80GB集群</td><td class="px-4 py-2">数百GB</td><td class="px-4 py-2 text-gray-600">$30,000+</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
let categories = [];
|
||
|
||
// 加载导航栏
|
||
async function loadNav() {
|
||
const res = await fetch('/api/categories');
|
||
categories = await res.json();
|
||
|
||
const builtinPages = [
|
||
{name: '首页', href: '/'},
|
||
{name: '工具', href: '/tools'},
|
||
{name: '对比', href: '/compare'},
|
||
{name: '知识库', href: '/knowledge'}
|
||
];
|
||
|
||
const categoryPages = {
|
||
'ai-models': '/models',
|
||
'gpus': '/gpus',
|
||
'cpus': '/cpus'
|
||
};
|
||
|
||
let navHtml = '';
|
||
builtinPages.forEach(p => {
|
||
const isActive = window.location.pathname === p.href;
|
||
navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
|
||
});
|
||
|
||
categories.forEach(cat => {
|
||
const href = categoryPages[cat.id] || `/category/${cat.id}`;
|
||
navHtml += `<a href="${href}" class="text-gray-600 hover:text-indigo-600">${cat.name}</a>`;
|
||
});
|
||
|
||
document.getElementById('topNav').innerHTML = navHtml;
|
||
}
|
||
|
||
loadNav();
|
||
</script>
|
||
</body>
|
||
</html> |