token-speed-tester 1.6.0 → 1.8.0

package/dist/index.js

@@ -1,11 +1,13 @@
 #!/usr/bin/env node
 
 // src/index.ts
-import { readFileSync } from "fs";
-import { dirname, join } from "path";
-import { fileURLToPath } from "url";
+import { readFileSync as readFileSync2 } from "fs";
+import { writeFile as fsWriteFile } from "fs/promises";
+import { dirname as dirname2, join } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
 import { Command } from "commander";
 import chalk from "chalk";
+import open from "open";
 
 // src/i18n.ts
 var SUPPORTED_LANGS = ["zh", "en"];
@@ -38,7 +40,10 @@ var zhMessages = {
     mean: "\u5747\u503C",
     min: "\u6700\u5C0F\u503C",
     max: "\u6700\u5927\u503C",
-    stdDev: "\u6807\u51C6\u5DEE"
+    stdDev: "\u6807\u51C6\u5DEE",
+    p50: "P50",
+    p95: "P95",
+    p99: "P99"
   },
   statsLabels: {
     ttft: "TTFT (ms)",
@@ -55,7 +60,27 @@ var zhMessages = {
     averageSpeed: "\u5E73\u5747\u901F\u5EA6",
     peakSpeed: "\u5CF0\u503C\u901F\u5EA6",
     peakTps: "\u5CF0\u503C TPS"
-  }
+  },
+  htmlTitle: "Token \u901F\u5EA6\u6D4B\u8BD5\u62A5\u544A",
+  htmlReportTitle: "LLM API Token \u6D41\u5F0F\u6027\u80FD\u6D4B\u8BD5\u62A5\u544A",
+  htmlGenerated: (file) => `\u2713 HTML \u62A5\u544A\u5DF2\u751F\u6210: ${file}`,
+  htmlOpenError: (file) => `\u65E0\u6CD5\u81EA\u52A8\u6253\u5F00\u62A5\u544A\uFF0C\u8BF7\u624B\u52A8\u6253\u5F00: ${file}`,
+  htmlConfigSection: "\u6D4B\u8BD5\u914D\u7F6E",
+  htmlSummarySection: "\u7EDF\u8BA1\u6C47\u603B",
+  htmlChartsSection: "\u56FE\u8868\u5206\u6790",
+  htmlDetailsSection: "\u8BE6\u7EC6\u6570\u636E",
+  htmlTestTime: "\u6D4B\u8BD5\u65F6\u95F4",
+  htmlMetric: "\u6307\u6807",
+  htmlValue: "\u6570\u503C",
+  htmlRun: "\u8FD0\u884C",
+  htmlTokens: "Token \u6570",
+  htmlDuration: "\u8017\u65F6",
+  htmlSpeed: "\u901F\u5EA6",
+  htmlTps: "TPS",
+  htmlAverageTps: "\u5E73\u5747 TPS",
+  htmlTpsDistribution: "TPS \u5206\u5E03",
+  htmlTimeUnit: "\u79D2",
+  htmlTpsChartHover: "\u6B21"
 };
 var enMessages = {
   defaultPrompt: "Write a short essay about AI",
@@ -85,7 +110,10 @@ var enMessages = {
     mean: "Mean",
     min: "Min",
     max: "Max",
-    stdDev: "Std Dev"
+    stdDev: "Std Dev",
+    p50: "P50",
+    p95: "P95",
+    p99: "P99"
   },
   statsLabels: {
     ttft: "TTFT (ms)",
@@ -102,7 +130,27 @@ var enMessages = {
     averageSpeed: "Avg Speed",
     peakSpeed: "Peak Speed",
     peakTps: "Peak TPS"
-  }
+  },
+  htmlTitle: "Token Speed Test Report",
+  htmlReportTitle: "LLM API Token Streaming Performance Report",
+  htmlGenerated: (file) => `\u2713 HTML report generated: ${file}`,
+  htmlOpenError: (file) => `Could not auto-open report, please open manually: ${file}`,
+  htmlConfigSection: "Test Configuration",
+  htmlSummarySection: "Summary Statistics",
+  htmlChartsSection: "Chart Analysis",
+  htmlDetailsSection: "Detailed Data",
+  htmlTestTime: "Test Time",
+  htmlMetric: "Metric",
+  htmlValue: "Value",
+  htmlRun: "Run",
+  htmlTokens: "Tokens",
+  htmlDuration: "Duration",
+  htmlSpeed: "Speed",
+  htmlTps: "TPS",
+  htmlAverageTps: "Average TPS",
+  htmlTpsDistribution: "TPS Distribution",
+  htmlTimeUnit: "s",
+  htmlTpsChartHover: "count"
 };
 function isSupportedLang(value) {
   return SUPPORTED_LANGS.includes(value);
@@ -405,6 +453,29 @@ function standardDeviation(values) {
   const squareDiffs = values.map((v) => Math.pow(v - avg, 2));
   return Math.sqrt(mean(squareDiffs));
 }
+function calculatePercentile(values, p) {
+  if (values.length === 0) return 0;
+  if (values.length === 1) return values[0];
+  const index = p / 100 * (values.length - 1);
+  const lowerIndex = Math.floor(index);
+  const upperIndex = Math.ceil(index);
+  const fraction = index - lowerIndex;
+  if (lowerIndex === upperIndex) {
+    return values[lowerIndex];
+  }
+  return values[lowerIndex] + fraction * (values[upperIndex] - values[lowerIndex]);
+}
+function calculatePercentiles(values) {
+  if (values.length === 0) {
+    return { p50: 0, p95: 0, p99: 0 };
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  return {
+    p50: calculatePercentile(sorted, 50),
+    p95: calculatePercentile(sorted, 95),
+    p99: calculatePercentile(sorted, 99)
+  };
+}
 function calculateStats(allMetrics) {
   if (allMetrics.length === 0) {
     throw new Error("Cannot calculate stats from empty metrics array");
@@ -459,6 +530,14 @@ function calculateStats(allMetrics) {
       peakTps: standardDeviation(peakTpsValues),
       tps: []
     },
+    percentiles: {
+      ttft: calculatePercentiles(ttfts),
+      totalTime: calculatePercentiles(totalTimes),
+      totalTokens: calculatePercentiles(totalTokens),
+      averageSpeed: calculatePercentiles(averageSpeeds),
+      peakSpeed: calculatePercentiles(peakSpeeds),
+      peakTps: calculatePercentiles(peakTpsValues)
+    },
     sampleSize
   };
 }
@@ -469,7 +548,7 @@ var BLOCK_CHAR = "\u2588";
 var CHART_WIDTH = 50;
 var CHART_HEIGHT = 10;
 var STAT_LABEL_WIDTH = 15;
-var STAT_VALUE_WIDTH = 10;
+var STAT_VALUE_WIDTH = 8;
 var Y_LABEL_WIDTH = 4;
 function padEndWidth(text, width) {
   const currentWidth = stringWidth(text);
@@ -580,7 +659,7 @@ function renderStatsTable(stats, lang = DEFAULT_LANG) {
   const lines = [];
   lines.push("");
   lines.push(messages.statsSummaryTitle(stats.sampleSize));
-  const headerRow = "\u2502 " + padEndWidth(messages.statsHeaders.metric, STAT_LABEL_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.mean, STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.min, STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.max, STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.stdDev, STAT_VALUE_WIDTH) + " \u2502";
+  const headerRow = "\u2502 " + padEndWidth(messages.statsHeaders.metric, STAT_LABEL_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.mean, STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.p50, STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.p95, STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.p99, STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.min, STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(messages.statsHeaders.max, STAT_VALUE_WIDTH) + " \u2502";
   const tableWidth = stringWidth(headerRow) - 2;
   lines.push("\u250C" + "\u2500".repeat(tableWidth) + "\u2510");
   lines.push(headerRow);
@@ -589,9 +668,11 @@ function renderStatsTable(stats, lang = DEFAULT_LANG) {
     formatStatRow(
       messages.statsLabels.ttft,
       stats.mean.ttft,
+      stats.percentiles.ttft.p50,
+      stats.percentiles.ttft.p95,
+      stats.percentiles.ttft.p99,
       stats.min.ttft,
       stats.max.ttft,
-      stats.stdDev.ttft,
       "f"
     )
   );
@@ -600,9 +681,11 @@ function renderStatsTable(stats, lang = DEFAULT_LANG) {
     formatStatRow(
       messages.statsLabels.totalTime,
       stats.mean.totalTime,
+      stats.percentiles.totalTime.p50,
+      stats.percentiles.totalTime.p95,
+      stats.percentiles.totalTime.p99,
       stats.min.totalTime,
       stats.max.totalTime,
-      stats.stdDev.totalTime,
       "f"
     )
   );
@@ -611,9 +694,11 @@ function renderStatsTable(stats, lang = DEFAULT_LANG) {
     formatStatRow(
       messages.statsLabels.totalTokens,
       stats.mean.totalTokens,
+      stats.percentiles.totalTokens.p50,
+      stats.percentiles.totalTokens.p95,
+      stats.percentiles.totalTokens.p99,
       stats.min.totalTokens,
       stats.max.totalTokens,
-      stats.stdDev.totalTokens,
       "f"
     )
   );
@@ -622,9 +707,11 @@ function renderStatsTable(stats, lang = DEFAULT_LANG) {
     formatStatRow(
       messages.statsLabels.averageSpeed,
       stats.mean.averageSpeed,
+      stats.percentiles.averageSpeed.p50,
+      stats.percentiles.averageSpeed.p95,
+      stats.percentiles.averageSpeed.p99,
       stats.min.averageSpeed,
       stats.max.averageSpeed,
-      stats.stdDev.averageSpeed,
       "f"
     )
   );
@@ -633,9 +720,11 @@ function renderStatsTable(stats, lang = DEFAULT_LANG) {
     formatStatRow(
       messages.statsLabels.peakSpeed,
       stats.mean.peakSpeed,
+      stats.percentiles.peakSpeed.p50,
+      stats.percentiles.peakSpeed.p95,
+      stats.percentiles.peakSpeed.p99,
       stats.min.peakSpeed,
       stats.max.peakSpeed,
-      stats.stdDev.peakSpeed,
       "f"
     )
   );
@@ -644,18 +733,20 @@ function renderStatsTable(stats, lang = DEFAULT_LANG) {
     formatStatRow(
       messages.statsLabels.peakTps,
       stats.mean.peakTps,
+      stats.percentiles.peakTps.p50,
+      stats.percentiles.peakTps.p95,
+      stats.percentiles.peakTps.p99,
       stats.min.peakTps,
       stats.max.peakTps,
-      stats.stdDev.peakTps,
       "f"
     )
   );
   lines.push("\u2514" + "\u2500".repeat(tableWidth) + "\u2518");
   return lines.join("\n");
 }
-function formatStatRow(label, mean2, min, max, stdDev, format) {
+function formatStatRow(label, mean2, p50, p95, p99, min, max, format) {
   const fmt = (n) => format === "f" ? n.toFixed(2) : n.toFixed(0);
-  return "\u2502 " + padEndWidth(label, STAT_LABEL_WIDTH) + " \u2502 " + padStartWidth(fmt(mean2), STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(fmt(min), STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(fmt(max), STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(fmt(stdDev), STAT_VALUE_WIDTH) + " \u2502";
+  return "\u2502 " + padEndWidth(label, STAT_LABEL_WIDTH) + " \u2502 " + padStartWidth(fmt(mean2), STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(fmt(p50), STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(fmt(p95), STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(fmt(p99), STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(fmt(min), STAT_VALUE_WIDTH) + " \u2502 " + padStartWidth(fmt(max), STAT_VALUE_WIDTH) + " \u2502";
 }
 function formatTimeWithDecimals(ms) {
   if (ms === Math.floor(ms)) {
@@ -694,12 +785,516 @@ function renderReport(stats, lang = DEFAULT_LANG) {
   return lines.join("\n");
 }
 
+// src/html-report.ts
+import { readFileSync } from "fs";
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+var CHART_COLORS = [
+  "#00f5ff",
+  // cyan
+  "#ff00aa",
+  // magenta
+  "#ffcc00",
+  // yellow
+  "#00ff88",
+  // green
+  "#ff6600",
+  // orange
+  "#aa00ff"
+  // purple
+];
+var PALETTE = {
+  bg: "#0a0a0f",
+  bgSecondary: "#12121a",
+  bgCard: "#1a1a24",
+  border: "#2a2a3a",
+  text: "#e4e4eb",
+  textMuted: "#6a6a7a",
+  accent: "#00f5ff",
+  accentSecondary: "#ff00aa",
+  accentTertiary: "#ffcc00"
+};
+function formatNumber(num, decimals = 2) {
+  return num.toFixed(decimals);
+}
+function formatTime(ms) {
+  if (ms < 1e3) {
+    return `${ms.toFixed(0)}ms`;
+  }
+  return `${(ms / 1e3).toFixed(2)}s`;
+}
+function escapeHtml(text) {
+  const map = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;"
+  };
+  return text.replace(/[&<>"']/g, (m) => map[m]);
+}
+function loadTemplate() {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  return readFileSync(resolve(__dirname, "template.html"), "utf-8");
+}
+function replaceTemplate(template, data) {
+  let result = template;
+  for (const [key, value] of Object.entries(data)) {
+    result = result.replaceAll(new RegExp(`{{${key}}}`, "g"), value);
+  }
+  return result;
+}
+function generateSpeedChart(results, messages) {
+  const allTps = results.flatMap((r) => r.tps);
+  if (allTps.length === 0) {
+    return `<div class="no-data">${messages.noChartData || "No data available"}</div>`;
+  }
+  const maxTps = Math.max(...allTps, 1);
+  const maxDuration = Math.max(...results.map((r) => r.tps.length));
+  const width = 800;
+  const height = 320;
+  const padding = { top: 30, right: 30, bottom: 45, left: 55 };
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const avgTps = [];
+  for (let i = 0; i < maxDuration; i++) {
+    const values = results.map((r) => r.tps[i] ?? 0);
+    avgTps.push(values.reduce((a, b) => a + b, 0) / values.length);
+  }
+  const polylines = results.map((result, idx) => {
+    const color = CHART_COLORS[idx % CHART_COLORS.length];
+    let points = "";
+    let areaPoints = `${padding.left},${height - padding.bottom} `;
+    result.tps.forEach((tps, i) => {
+      const x = padding.left + i / Math.max(maxDuration - 1, 1) * chartWidth;
+      const y = padding.top + chartHeight - tps / maxTps * chartHeight;
+      points += `${x},${y} `;
+      areaPoints += `${x},${y} `;
+    });
+    areaPoints += `${padding.left + chartWidth},${height - padding.bottom}`;
+    return `
+      <defs>
+        <linearGradient id="grad-${idx}" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" style="stop-color:${color};stop-opacity:0.3"/>
+          <stop offset="100%" style="stop-color:${color};stop-opacity:0"/>
+        </linearGradient>
+      </defs>
+      <polygon
+        points="${areaPoints.trim()}"
+        fill="url(#grad-${idx})"
+        class="area-${idx}"
+      />
+      <polyline
+        fill="none"
+        stroke="${color}"
+        stroke-width="2.5"
+        points="${points.trim()}"
+        class="line line-${idx}"
+        data-run="${idx + 1}"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          from="0,2000"
+          to="2000,0"
+          dur="1.5s"
+          fill="freeze"
+          calcMode="spline"
+          keySplines="0.4 0 0.2 1"
+        />
+      </polyline>
+      ${result.tps.map((tps, i) => {
+      const x = padding.left + i / Math.max(maxDuration - 1, 1) * chartWidth;
+      const y = padding.top + chartHeight - tps / maxTps * chartHeight;
+      return `<circle cx="${x}" cy="${y}" r="4" fill="${PALETTE.bg}" stroke="${color}" stroke-width="2" class="dot-${idx}" opacity="0"><title>${messages.htmlAverageTps || "Avg TPS"} ${i}s: ${tps.toFixed(1)}</title>
+          <animate attributeName="opacity" from="0" to="1" begin="${0.5 + i * 0.05}s" dur="0.3s" fill="freeze"/>
+        </circle>`;
+    }).join("")}
+    `;
+  }).join("\n      ");
+  let avgPoints = "";
+  avgTps.forEach((tps, i) => {
+    const x = padding.left + i / Math.max(maxDuration - 1, 1) * chartWidth;
+    const y = padding.top + chartHeight - tps / maxTps * chartHeight;
+    avgPoints += `${x},${y} `;
+  });
+  const yLabels = [];
+  for (let i = 0; i <= 5; i++) {
+    const value = Math.round(maxTps * i / 5);
+    const y = padding.top + chartHeight - i / 5 * chartHeight;
+    yLabels.push(
+      `<text x="${padding.left - 12}" y="${y + 4}" text-anchor="end" font-size="11" fill="${PALETTE.textMuted}">${value}</text>`
+    );
+    if (i > 0) {
+      const yLine = padding.top + chartHeight - i / 5 * chartHeight;
+      yLabels.push(
+        `<line x1="${padding.left}" y1="${yLine}" x2="${width - padding.right}" y2="${yLine}" stroke="${PALETTE.border}" stroke-width="1" opacity="0.5"/>`
+      );
+    }
+  }
+  const xLabels = [];
+  const xSteps = Math.min(maxDuration, 10);
+  for (let i = 0; i < xSteps; i++) {
+    const x = padding.left + i / Math.max(xSteps - 1, 1) * chartWidth;
+    const label = i.toString();
+    xLabels.push(
+      `<text x="${x}" y="${height - padding.bottom + 20}" text-anchor="middle" font-size="11" fill="${PALETTE.textMuted}">${label}${messages.htmlTimeUnit}</text>`
+    );
+  }
+  return `
+    <svg viewBox="0 0 ${width} ${height}" class="chart" id="speedChart">
+      <style>
+        #speedChart .line { stroke-dasharray: 2000; stroke-dashoffset: 0; }
+        #speedChart .line:hover { stroke-width: 4; filter: drop-shadow(0 0 8px currentColor); }
+        #speedChart circle { transition: all 0.2s ease; cursor: pointer; }
+        #speedChart circle:hover { r: 6; stroke-width: 3; }
+      </style>
+      <rect x="${padding.left}" y="${padding.top}" width="${chartWidth}" height="${chartHeight}" fill="${PALETTE.bgCard}" rx="4"/>
+      ${yLabels.join("\n      ")}
+      ${xLabels.join("\n      ")}
+      <line x1="${padding.left}" y1="${padding.top}" x2="${padding.left}" y2="${height - padding.bottom}" stroke="${PALETTE.border}" stroke-width="2"/>
+      <line x1="${padding.left}" y1="${height - padding.bottom}" x2="${width - padding.right}" y2="${height - padding.bottom}" stroke="${PALETTE.border}" stroke-width="2"/>
+      ${polylines}
+      <polyline
+        fill="none"
+        stroke="${PALETTE.text}"
+        stroke-width="2"
+        stroke-dasharray="6,4"
+        opacity="0.7"
+        points="${avgPoints.trim()}"
+      />
+      <text x="${padding.left + chartWidth / 2}" y="${height - 8}" text-anchor="middle" font-size="11" fill="${PALETTE.textMuted}">TIME (${messages.htmlTimeUnit})</text>
+      <text x="12" y="${padding.top + chartHeight / 2}" text-anchor="middle" font-size="11" fill="${PALETTE.textMuted}" transform="rotate(-90, 12, ${padding.top + chartHeight / 2})">TPS</text>
+    </svg>
+    <div class="chart-legend">
+      <div class="legend-item">
+        <span class="legend-line avg"></span>
+        <span>${messages.htmlSummarySection}</span>
+      </div>
+      ${results.map((_, idx) => {
+    const color = CHART_COLORS[idx % CHART_COLORS.length];
+    return `
+        <div class="legend-item">
+          <span class="legend-line" style="background: ${color};"></span>
+          <span>${messages.htmlRun} ${idx + 1}</span>
+        </div>`;
+  }).join("")}
+    </div>
+  `;
+}
+function generateTPSHistogram(stats, messages) {
+  const allTps = stats.mean.tps;
+  if (allTps.length === 0) {
+    return `<div class="no-data">${messages.noTpsData || "No TPS data available"}</div>`;
+  }
+  const maxTps = Math.max(...allTps);
+  const width = 400;
+  const height = 280;
+  const padding = { top: 25, right: 20, bottom: 40, left: 50 };
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const bars = allTps.map((tps, i) => {
+    const barWidth = chartWidth / allTps.length - 2;
+    const x = padding.left + i / allTps.length * chartWidth;
+    const barHeight = tps / maxTps * chartHeight;
+    const y = padding.top + chartHeight - barHeight;
+    const hue = 180 + tps / maxTps * 60;
+    const color = `hsl(${hue}, 100%, 60%)`;
+    return `
+      <rect
+        x="${x}"
+        y="${y}"
+        width="${barWidth}"
+        height="${barHeight}"
+        fill="${color}"
+        class="bar"
+        data-second="${i}"
+        data-tps="${tps.toFixed(2)}"
+        rx="2"
+      >
+        <title>${messages.htmlAverageTps || "Average TPS"} ${i}s: ${tps.toFixed(1)}</title>
+        <animate
+          attributeName="height"
+          from="0"
+          to="${barHeight}"
+          dur="0.8s"
+          fill="freeze"
+          calcMode="spline"
+          keySplines="0.4 0 0.2 1"
+          begin="${i * 0.05}s"
+        />
+        <animate
+          attributeName="y"
+          from="${height - padding.bottom}"
+          to="${y}"
+          dur="0.8s"
+          fill="freeze"
+          calcMode="spline"
+          keySplines="0.4 0 0.2 1"
+          begin="${i * 0.05}s"
+        />
+      </rect>
+    `;
+  }).join("");
+  const yLabels = [];
+  for (let i = 0; i <= 5; i++) {
+    const value = Math.round(maxTps * i / 5);
+    const y = padding.top + chartHeight - i / 5 * chartHeight;
+    yLabels.push(
+      `<text x="${padding.left - 10}" y="${y + 4}" text-anchor="end" font-size="11" fill="${PALETTE.textMuted}">${value}</text>`
+    );
+  }
+  const xLabels = [];
+  const xSteps = Math.min(allTps.length, 8);
+  for (let i = 0; i < xSteps; i++) {
+    const x = padding.left + i / Math.max(xSteps - 1, 1) * chartWidth;
+    const label = i.toString();
+    xLabels.push(
+      `<text x="${x}" y="${height - padding.bottom + 18}" text-anchor="middle" font-size="11" fill="${PALETTE.textMuted}">${label}${messages.htmlTimeUnit}</text>`
+    );
+  }
+  return `
+    <svg viewBox="0 0 ${width} ${height}" class="chart" id="tpsChart">
+      <style>
+        #tpsChart .bar { transition: all 0.2s ease; cursor: pointer; opacity: 0.9; }
+        #tpsChart .bar:hover { opacity: 1; filter: brightness(1.2); }
+      </style>
+      <rect x="${padding.left}" y="${padding.top}" width="${chartWidth}" height="${chartHeight}" fill="${PALETTE.bgCard}" rx="4"/>
+      ${yLabels.join("\n      ")}
+      ${xLabels.join("\n      ")}
+      <line x1="${padding.left}" y1="${padding.top}" x2="${padding.left}" y2="${height - padding.bottom}" stroke="${PALETTE.border}" stroke-width="2"/>
+      <line x1="${padding.left}" y1="${height - padding.bottom}" x2="${width - padding.right}" y2="${height - padding.bottom}" stroke="${PALETTE.border}" stroke-width="2"/>
+      ${bars}
+    </svg>
+  `;
+}
+function generateHTMLReport(options2) {
+  const { config, singleResults, stats, lang, messages } = options2;
+  const isZh = lang === "zh";
+  const testTime = (/* @__PURE__ */ new Date()).toLocaleString(isZh ? "zh-CN" : "en-US");
+  const summaryCards = [
+    {
+      label: messages.statsLabels.ttft,
+      value: formatTime(stats.mean.ttft),
+      detail: `${messages.statsHeaders.min}: ${formatTime(stats.min.ttft)} \xB7 ${messages.statsHeaders.max}: ${formatTime(stats.max.ttft)}`,
+      accent: PALETTE.accent
+    },
+    {
+      label: messages.statsLabels.averageSpeed,
+      value: formatNumber(stats.mean.averageSpeed),
+      detail: `${messages.statsHeaders.min}: ${formatNumber(stats.min.averageSpeed)} \xB7 ${messages.statsHeaders.max}: ${formatNumber(stats.max.averageSpeed)}`,
+      accent: PALETTE.accentSecondary,
+      unit: messages.htmlSpeed
+    },
+    {
+      label: messages.statsLabels.peakSpeed,
+      value: formatNumber(stats.mean.peakSpeed),
+      detail: `${messages.statsHeaders.min}: ${formatNumber(stats.min.peakSpeed)} \xB7 ${messages.statsHeaders.max}: ${formatNumber(stats.max.peakSpeed)}`,
+      accent: PALETTE.accentTertiary,
+      unit: messages.htmlSpeed
+    },
+    {
+      label: messages.statsLabels.totalTokens,
+      value: formatNumber(stats.mean.totalTokens, 0),
+      detail: `${messages.statsHeaders.min}: ${formatNumber(stats.min.totalTokens, 0)} \xB7 ${messages.statsHeaders.max}: ${formatNumber(stats.max.totalTokens, 0)}`,
+      accent: "#00ff88"
+    }
+  ];
+  const detailRows = singleResults.map(
+    (result, idx) => `
+        <tr>
+          <td><span class="run-badge">${idx + 1}</span></td>
+          <td>${formatTime(result.ttft)}</td>
+          <td>${formatTime(result.totalTime)}</td>
+          <td>${result.totalTokens}</td>
+          <td>${formatNumber(result.averageSpeed)}</td>
+          <td>${formatNumber(result.peakSpeed)}</td>
+          <td>${result.peakTps}</td>
+        </tr>
+      `
+  ).join("");
+  const statsRows = [
+    {
+      metric: messages.statsLabels.ttft,
+      mean: formatTime(stats.mean.ttft),
+      p50: formatTime(stats.percentiles.ttft.p50),
+      p95: formatTime(stats.percentiles.ttft.p95),
+      p99: formatTime(stats.percentiles.ttft.p99),
+      min: formatTime(stats.min.ttft),
+      max: formatTime(stats.max.ttft)
+    },
+    {
+      metric: messages.statsLabels.totalTime,
+      mean: formatTime(stats.mean.totalTime),
+      p50: formatTime(stats.percentiles.totalTime.p50),
+      p95: formatTime(stats.percentiles.totalTime.p95),
+      p99: formatTime(stats.percentiles.totalTime.p99),
+      min: formatTime(stats.min.totalTime),
+      max: formatTime(stats.max.totalTime)
+    },
+    {
+      metric: messages.statsLabels.totalTokens,
+      mean: formatNumber(stats.mean.totalTokens, 1),
+      p50: formatNumber(stats.percentiles.totalTokens.p50, 0),
+      p95: formatNumber(stats.percentiles.totalTokens.p95, 0),
+      p99: formatNumber(stats.percentiles.totalTokens.p99, 0),
+      min: formatNumber(stats.min.totalTokens, 0),
+      max: formatNumber(stats.max.totalTokens, 0)
+    },
+    {
+      metric: messages.statsLabels.averageSpeed,
+      mean: formatNumber(stats.mean.averageSpeed),
+      p50: formatNumber(stats.percentiles.averageSpeed.p50),
+      p95: formatNumber(stats.percentiles.averageSpeed.p95),
+      p99: formatNumber(stats.percentiles.averageSpeed.p99),
+      min: formatNumber(stats.min.averageSpeed),
+      max: formatNumber(stats.max.averageSpeed)
+    },
+    {
+      metric: messages.statsLabels.peakSpeed,
+      mean: formatNumber(stats.mean.peakSpeed),
+      p50: formatNumber(stats.percentiles.peakSpeed.p50),
+      p95: formatNumber(stats.percentiles.peakSpeed.p95),
+      p99: formatNumber(stats.percentiles.peakSpeed.p99),
+      min: formatNumber(stats.min.peakSpeed),
+      max: formatNumber(stats.max.peakSpeed)
+    },
+    {
+      metric: messages.statsLabels.peakTps,
+      mean: formatNumber(stats.mean.peakTps),
+      p50: formatNumber(stats.percentiles.peakTps.p50),
+      p95: formatNumber(stats.percentiles.peakTps.p95),
+      p99: formatNumber(stats.percentiles.peakTps.p99),
+      min: formatNumber(stats.min.peakTps),
+      max: formatNumber(stats.max.peakTps)
+    }
+  ].map(
+    (row) => `
+        <tr>
+          <td class="metric-name">${row.metric}</td>
+          <td class="value-primary">${row.mean}</td>
+          <td>${row.p50}</td>
+          <td>${row.p95}</td>
+          <td>${row.p99}</td>
+          <td>${row.min}</td>
+          <td>${row.max}</td>
+        </tr>
+      `
+  ).join("");
+  const speedChart = generateSpeedChart(singleResults, messages);
+  const tpsChart = generateTPSHistogram(stats, messages);
+  const configGridHtml = `
+      <div class="config-grid">
+        <div class="config-item">
+          <span class="config-label">${messages.configLabels.provider}</span>
+          <span class="config-value">${config.provider.toUpperCase()}</span>
+        </div>
+        <div class="config-item">
+          <span class="config-label">${messages.configLabels.model}</span>
+          <span class="config-value">${escapeHtml(config.model)}</span>
+        </div>
+        <div class="config-item">
+          <span class="config-label">${messages.configLabels.maxTokens}</span>
+          <span class="config-value">${config.maxTokens}</span>
+        </div>
+        <div class="config-item">
+          <span class="config-label">${messages.configLabels.runs}</span>
+          <span class="config-value">${config.runCount}</span>
+        </div>
+        <div class="config-item wide">
+          <span class="config-label">${messages.configLabels.prompt}</span>
+          <span class="config-value">"${escapeHtml(config.prompt)}"</span>
+        </div>
+      </div>
+    `;
+  const summaryCardsHtml = summaryCards.map(
+    (card) => `
+        <div class="card" style="--card-accent: ${card.accent}">
+          <div class="card-label">${card.label}</div>
+          <div class="card-value">${card.value}<span class="card-unit">${card.unit || ""}</span></div>
+          <div class="card-detail">${card.detail}</div>
+        </div>
+      `
+  ).join("");
+  const chartsHtml = `
+      <div class="charts-container">
+        <div class="chart-wrapper">
+          <div class="chart-title">${messages.speedChartTitle}</div>
+          ${speedChart}
+        </div>
+        <div class="chart-wrapper">
+          <div class="chart-title">${messages.htmlTpsDistribution}</div>
+          ${tpsChart}
+        </div>
+      </div>
+    `;
+  const statsTableHtml = `
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th>${messages.statsHeaders.metric}</th>
+              <th>${messages.statsHeaders.mean}</th>
+              <th>${messages.statsHeaders.p50}</th>
+              <th>${messages.statsHeaders.p95}</th>
+              <th>${messages.statsHeaders.p99}</th>
+              <th>${messages.statsHeaders.min}</th>
+              <th>${messages.statsHeaders.max}</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${statsRows}
+          </tbody>
+        </table>
+      </div>
+    `;
+  const detailsTableHtml = `
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th>${messages.htmlRun}</th>
+              <th>${messages.resultLabels.ttft}</th>
+              <th>${messages.resultLabels.totalTime}</th>
+              <th>${messages.resultLabels.totalTokens}</th>
+              <th>${messages.resultLabels.averageSpeed}</th>
+              <th>${messages.resultLabels.peakSpeed}</th>
+              <th>${messages.resultLabels.peakTps}</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${detailRows}
+          </tbody>
+        </table>
+      </div>
+    `;
+  const data = {
+    lang,
+    title: messages.htmlTitle,
+    reportTitle: messages.htmlReportTitle,
+    testTimeLabel: messages.htmlTestTime,
+    testTime,
+    configSection: messages.htmlConfigSection,
+    summarySection: messages.htmlSummarySection,
+    chartsSection: messages.htmlChartsSection,
+    statsTitle: messages.statsSummaryTitle(stats.sampleSize),
+    detailsSection: messages.htmlDetailsSection,
+    configGrid: configGridHtml,
+    summaryCards: summaryCardsHtml,
+    charts: chartsHtml,
+    statsTable: statsTableHtml,
+    detailsTable: detailsTableHtml
+  };
+  const template = loadTemplate();
+  return replaceTemplate(template, data);
+}
+
 // src/index.ts
 function getCliVersion() {
   try {
-    const currentDir = dirname(fileURLToPath(import.meta.url));
+    const currentDir = dirname2(fileURLToPath2(import.meta.url));
     const packagePath = join(currentDir, "..", "package.json");
-    const packageJson = JSON.parse(readFileSync(packagePath, "utf-8"));
+    const packageJson = JSON.parse(readFileSync2(packagePath, "utf-8"));
     return packageJson.version ?? "unknown";
   } catch {
     return "unknown";
@@ -707,7 +1302,7 @@ function getCliVersion() {
 }
 var program = new Command();
 program.name("token-speed-test").description("A CLI tool to test LLM API token output speed").version(getCliVersion());
-program.option("-k, --api-key <key>", "API Key (required)", "").option("-p, --provider <provider>", "API provider: anthropic or openai", "anthropic").option("-u, --url <url>", "Custom API endpoint URL").option("-m, --model <model>", "Model name").option("--max-tokens <number>", "Maximum output tokens", "1024").option("-r, --runs <number>", "Number of test runs", "3").option("--prompt <text>", "Test prompt").option("--lang <lang>", "Output language: zh or en", "zh").parse(process.argv);
+program.option("-k, --api-key <key>", "API Key (required)", "").option("-p, --provider <provider>", "API provider: anthropic or openai", "anthropic").option("-u, --url <url>", "Custom API endpoint URL").option("-m, --model <model>", "Model name").option("--max-tokens <number>", "Maximum output tokens", "1024").option("-r, --runs <number>", "Number of test runs", "3").option("--prompt <text>", "Test prompt").option("--lang <lang>", "Output language: zh or en", "zh").option("--html", "Generate HTML report").option("-o, --output <path>", "HTML report output path", "report.html").parse(process.argv);
 var options = program.opts();
 async function main() {
   let messages = getMessages(DEFAULT_LANG);
@@ -751,6 +1346,31 @@ ${messages.runningTests}
     console.log(chalk.green(`
 ${messages.testComplete}
 `));
+    if (options.html) {
+      const htmlPath = options.output;
+      const htmlContent = generateHTMLReport({
+        config,
+        singleResults: allMetrics,
+        stats,
+        lang: config.lang,
+        messages
+      });
+      try {
+        await fsWriteFile(htmlPath, htmlContent, "utf-8");
+        console.log(chalk.cyan(messages.htmlGenerated(htmlPath)));
+        await open(htmlPath).catch(() => {
+          console.warn(chalk.yellow(messages.htmlOpenError(htmlPath)));
+        });
+      } catch (err) {
+        console.error(
+          chalk.red(
+            `
+${messages.errorPrefix}: ${err instanceof Error ? err.message : String(err)}
+`
+          )
+        );
+      }
+    }
   } catch (error) {
     if (error instanceof Error) {
       console.error(chalk.red(`