174 lines
7.7 KiB
HTML
174 lines
7.7 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>大模型速度测试助手</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- 左侧控制面板 -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h1>大模型速度测试助手</h1>
|
||
<div class="version" id="versionLabel">v2.1</div>
|
||
</div>
|
||
|
||
<!-- 测试用例选择 -->
|
||
<div class="panel">
|
||
<div class="panel-title">测试用例选择</div>
|
||
<div class="quick-actions">
|
||
<button onclick="selectRecommended()">推荐组合</button>
|
||
<button onclick="selectAll()">全选</button>
|
||
<button onclick="clearAll()">清空</button>
|
||
</div>
|
||
<div id="testCaseList">
|
||
<!-- 从 /api/cases 动态加载 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 参数配置 -->
|
||
<div class="panel">
|
||
<div class="panel-title">参数配置</div>
|
||
<div class="config-group">
|
||
<label>模型</label>
|
||
<select id="modelSelect">
|
||
<option value="">加载中...</option>
|
||
</select>
|
||
</div>
|
||
<div class="config-group">
|
||
<label>重复次数</label>
|
||
<input type="number" id="repeatsInput" value="3" min="1" max="20">
|
||
</div>
|
||
<div class="config-group">
|
||
<label>运行模式</label>
|
||
<select id="runMode">
|
||
<option value="all">全部用例</option>
|
||
<option value="skip_heavy">跳过耗时用例</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="panel">
|
||
<button class="btn btn-primary" id="startBtn" onclick="startTests()" disabled>
|
||
开始测试
|
||
</button>
|
||
<button class="btn btn-secondary" id="stopBtn" onclick="stopTests()" disabled>
|
||
停止测试
|
||
</button>
|
||
<button class="btn btn-secondary" id="loadHistoryBtn" onclick="loadHistory()">
|
||
加载历史对比
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右侧主内容区 -->
|
||
<main class="main-content">
|
||
<!-- 运行状态面板 -->
|
||
<div class="status-panel" id="statusPanel">
|
||
<div class="status-header">
|
||
<div class="status-text running" id="statusText">准备中...</div>
|
||
<div id="progressPercent">0%</div>
|
||
</div>
|
||
<div class="progress-bar-container">
|
||
<div class="progress-bar" id="progressBar"></div>
|
||
</div>
|
||
<div id="currentCaseInfo" style="font-size:13px;margin-bottom:10px;color:#64748b;"></div>
|
||
<ul class="step-list" id="stepList"></ul>
|
||
</div>
|
||
|
||
<!-- 结果展示区 -->
|
||
<div class="results-area" id="resultsArea">
|
||
<!-- 推理指标概览 -->
|
||
<div class="report-card" id="inferenceCard" style="display:none;">
|
||
<h2>推理核心指标</h2>
|
||
<div class="metric-grid" id="inferenceMetricsGrid"></div>
|
||
<div class="metric-description">
|
||
<p><strong>TTFT（首 Token 延迟）</strong>：从请求到生成第一个 token 的时间，影响用户感知响应速度</p>
|
||
<p><strong>Prefill Time（预填充时间）</strong>：处理 prompt 的时间，与上下文长度正相关</p>
|
||
<p><strong>Decode Speed（解码速度）</strong>：tokens/s，衡量模型生成效率</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 并发压力摘要 -->
|
||
<div class="report-card" id="concurrencyCard" style="display:none;">
|
||
<h2>⚡ 并发压力测试摘要</h2>
|
||
<div class="metric-grid" id="concurrencyMetricsGrid"></div>
|
||
</div>
|
||
|
||
<!-- 概览卡片 -->
|
||
<div class="report-card" id="overviewCard" style="display:none;">
|
||
<h2>测试概览</h2>
|
||
<div class="metric-grid" id="metricGrid"></div>
|
||
</div>
|
||
|
||
<!-- 图表区 -->
|
||
<div class="report-card" id="chartCard" style="display:none;">
|
||
<h2>性能对比图表</h2>
|
||
<div class="chart-wrapper">
|
||
<canvas id="barChart"></canvas>
|
||
</div>
|
||
<div class="chart-wrapper">
|
||
<canvas id="p95Chart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据表 -->
|
||
<div class="report-card" id="tableCard" style="display:none;">
|
||
<h2>详细数据</h2>
|
||
<div style="overflow-x:auto;">
|
||
<table class="data-table" id="dataTable">
|
||
<thead>
|
||
<tr>
|
||
<th>用例名称</th>
|
||
<th>难度</th>
|
||
<th>状态</th>
|
||
<th>平均延迟 (ms)</th>
|
||
<th>标准差</th>
|
||
<th>最小</th>
|
||
<th>最大</th>
|
||
<th>P95</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="dataTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="action-buttons" id="actionButtons" style="display:none;">
|
||
<button onclick="openReport()">打开完整报告</button>
|
||
<button onclick="exportCSV()">导出 CSV</button>
|
||
<button onclick="exportJSON()">导出 JSON</button>
|
||
<button class="primary" onclick="runNewTest()">新测试</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 初始欢迎状态 -->
|
||
<div class="report-card" id="welcomeCard">
|
||
<h2>欢迎使用大模型速度测试助手</h2>
|
||
<p style="color:#64748b;margin:15px 0;">
|
||
本工具用于测试大模型在不同场景下的响应速度
|
||
<span id="welcomeBackend">（Ollama 本地 / OpenAI 兼容服务）</span>。
|
||
<br>请在左侧面板选择测试用例和模型，然后点击"开始测试"。
|
||
</p>
|
||
<div style="margin-top:20px;">
|
||
<h3 style="font-size:14px;margin-bottom:10px;">快速开始：</h3>
|
||
<ol style="padding-left:20px;color:#64748b;font-size:13px;line-height:2;">
|
||
<li>左侧选择测试用例（"推荐组合"快速勾选）</li>
|
||
<li>选择模型和重复次数</li>
|
||
<li>点击"开始测试"，观察实时进度</li>
|
||
<li>完成后导出 CSV / JSON 或打开完整报告</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|