174 lines
9.8 KiB
HTML
174 lines
9.8 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>
|
||
<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-6 text-sm">
|
||
<a href="/" class="text-gray-600 hover:text-indigo-600">首页</a>
|
||
<a href="/models" class="text-gray-600 hover:text-indigo-600">模型</a>
|
||
<a href="/gpus" class="text-gray-600 hover:text-indigo-600">GPU</a>
|
||
<a href="/cpus" class="text-gray-600 hover:text-indigo-600">CPU</a>
|
||
<a href="/tools" class="text-indigo-600 font-medium">工具</a>
|
||
<a href="/compare" class="text-gray-600 hover:text-indigo-600">对比</a>
|
||
<a href="/knowledge" class="text-gray-600 hover:text-indigo-600">知识库</a>
|
||
</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-calculator-line text-orange-600"></i>
|
||
实用工具
|
||
</h1>
|
||
<p class="text-gray-500 mt-1">AI开发常用计算工具</p>
|
||
</div>
|
||
|
||
<!-- 显存计算器 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-memory-line text-green-600"></i>
|
||
显存计算器
|
||
</h2>
|
||
<p class="text-gray-500 mb-4">计算大模型所需的显存大小，并推荐合适的GPU</p>
|
||
|
||
<div class="grid grid-cols-3 gap-4 mb-6">
|
||
<div>
|
||
<label class="text-sm text-gray-600 mb-1 block">模型参数量 (B)</label>
|
||
<input type="number" id="params" value="7" step="0.1" min="0.1" max="1000"
|
||
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-green-400">
|
||
</div>
|
||
<div>
|
||
<label class="text-sm text-gray-600 mb-1 block">精度</label>
|
||
<select id="precision" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-green-400">
|
||
<option value="fp32">FP32 (全精度)</option>
|
||
<option value="fp16" selected>FP16 (半精度)</option>
|
||
<option value="int8">INT8 (8位量化)</option>
|
||
<option value="int4">INT4 (4位量化)</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<button onclick="calculateVram()" class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition mt-5">
|
||
<i class="ri-calculator-line mr-2"></i>计算
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 计算结果 -->
|
||
<div id="vramResult" class="hidden">
|
||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||
<div class="p-4 bg-blue-50 rounded-lg">
|
||
<div class="text-sm text-blue-600">模型权重占用</div>
|
||
<div class="text-2xl font-bold text-blue-800 mt-1" id="modelVram">-</div>
|
||
</div>
|
||
<div class="p-4 bg-orange-50 rounded-lg">
|
||
<div class="text-sm text-orange-600">总显存需求 (含KV Cache)</div>
|
||
<div class="text-2xl font-bold text-orange-800 mt-1" id="totalVram">-</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="suitableGpus" class="mt-4">
|
||
<h3 class="text-sm font-medium text-gray-600 mb-2">推荐的GPU:</h3>
|
||
<div id="gpuList" class="grid grid-cols-3 gap-2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 精度说明 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="ri-information-line text-blue-600"></i>
|
||
精度与显存关系
|
||
</h2>
|
||
<div class="grid grid-cols-4 gap-4">
|
||
<div class="p-4 bg-gray-50 rounded-lg text-center">
|
||
<div class="text-lg font-bold text-gray-800">FP32</div>
|
||
<div class="text-2xl font-bold text-blue-600 mt-2">4字节</div>
|
||
<div class="text-sm text-gray-500 mt-1">全精度，最高精度</div>
|
||
</div>
|
||
<div class="p-4 bg-gray-50 rounded-lg text-center">
|
||
<div class="text-lg font-bold text-gray-800">FP16</div>
|
||
<div class="text-2xl font-bold text-green-600 mt-2">2字节</div>
|
||
<div class="text-sm text-gray-500 mt-1">半精度，常用</div>
|
||
</div>
|
||
<div class="p-4 bg-gray-50 rounded-lg text-center">
|
||
<div class="text-lg font-bold text-gray-800">INT8</div>
|
||
<div class="text-2xl font-bold text-orange-600 mt-2">1字节</div>
|
||
<div class="text-sm text-gray-500 mt-1">8位量化</div>
|
||
</div>
|
||
<div class="p-4 bg-gray-50 rounded-lg text-center">
|
||
<div class="text-lg font-bold text-gray-800">INT4</div>
|
||
<div class="text-2xl font-bold text-purple-600 mt-2">0.5字节</div>
|
||
<div class="text-sm text-gray-500 mt-1">4位量化，最小</div>
|
||
</div>
|
||
</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-table-line text-indigo-600"></i>
|
||
常见模型显存需求参考 (FP16)
|
||
</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">参数量</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>
|
||
<th class="px-4 py-2 text-left text-sm font-medium text-gray-600">推荐GPU</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y">
|
||
<tr><td class="px-4 py-2 text-gray-800">Mistral 7B</td><td class="px-4 py-2">7B</td><td class="px-4 py-2">14GB</td><td class="px-4 py-2">18GB</td><td class="px-4 py-2 text-gray-600">RTX 3090/4090</td></tr>
|
||
<tr><td class="px-4 py-2 text-gray-800">Llama 2 13B</td><td class="px-4 py-2">13B</td><td class="px-4 py-2">26GB</td><td class="px-4 py-2">34GB</td><td class="px-4 py-2 text-gray-600">RTX 4090 + 8GB</td></tr>
|
||
<tr><td class="px-4 py-2 text-gray-800">Llama 2 70B</td><td class="px-4 py-2">70B</td><td class="px-4 py-2">140GB</td><td class="px-4 py-2">182GB</td><td class="px-4 py-2 text-gray-600">A100 80GB x2</td></tr>
|
||
<tr><td class="px-4 py-2 text-gray-800">Mixtral 8x7B</td><td class="px-4 py-2">47B</td><td class="px-4 py-2">94GB</td><td class="px-4 py-2">122GB</td><td class="px-4 py-2 text-gray-600">A100 80GB x2</td></tr>
|
||
<tr><td class="px-4 py-2 text-gray-800">Qwen 72B</td><td class="px-4 py-2">72B</td><td class="px-4 py-2">144GB</td><td class="px-4 py-2">187GB</td><td class="px-4 py-2 text-gray-600">H100 80GB x3</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
async function calculateVram() {
|
||
const params = document.getElementById('params').value;
|
||
const precision = document.getElementById('precision').value;
|
||
|
||
const res = await fetch(`/api/calculate/vram?params=${params}&precision=${precision}`);
|
||
const data = await res.json();
|
||
|
||
document.getElementById('modelVram').textContent = data.model_vram + ' GB';
|
||
document.getElementById('totalVram').textContent = data.total_vram + ' GB';
|
||
|
||
// 推荐GPU
|
||
const gpuList = document.getElementById('gpuList');
|
||
if (data.suitable_gpus && data.suitable_gpus.length > 0) {
|
||
gpuList.innerHTML = data.suitable_gpus.map(g => `
|
||
<div class="p-3 bg-green-50 rounded-lg border border-green-200">
|
||
<div class="font-medium text-green-800">${g.name}</div>
|
||
<div class="text-sm text-green-600">${g.memory_gb}GB显存</div>
|
||
</div>
|
||
`).join('');
|
||
} else {
|
||
gpuList.innerHTML = `<div class="p-3 bg-red-50 rounded-lg text-red-600 col-span-3">暂无合适的GPU，请考虑INT4量化或多卡方案</div>`;
|
||
}
|
||
|
||
document.getElementById('vramResult').classList.remove('hidden');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |