feat(blog): 添加通义千问Qwen3.5深度分析文章及配套图表

- 新增关于Qwen3.5登顶中国第一的深度技术解读文章
- 添加LMArena评测机制可视化图表页面
- 添加Qwen3.5 MoE混合专家架构示意图
- 添加综合能力跑分对比图表
- 添加价格对比可视化页面
- 添加使用场景推荐图表
- 更新.gitignore文件添加.playwright-mcp目录忽略规则

articles/007/diagrams/benchmark-comparison.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { width: 1200px; height: 680px; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; display: flex; align-items: center; justify-content: center; color: #fff; }
+  .container { width: 1080px; }
+  h2 { text-align: center; font-size: 32px; margin-bottom: 36px; background: linear-gradient(90deg, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  .chart-group { display: flex; flex-direction: column; gap: 24px; }
+  .chart-row { display: flex; align-items: center; gap: 16px; }
+  .chart-label { width: 130px; text-align: right; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.8); flex-shrink: 0; }
+  .bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
+  .bar-item { display: flex; align-items: center; gap: 10px; }
+  .bar-name { width: 100px; font-size: 12px; color: rgba(255,255,255,0.6); text-align: right; flex-shrink: 0; }
+  .bar-track { flex: 1; height: 28px; background: rgba(255,255,255,0.05); border-radius: 6px; position: relative; overflow: hidden; }
+  .bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 13px; font-weight: 700; }
+  .bar-fill.qwen { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
+  .bar-fill.gpt { background: linear-gradient(90deg, #047857, #34d399); }
+  .bar-fill.claude { background: linear-gradient(90deg, #b45309, #fbbf24); }
+  .bar-fill.best { box-shadow: 0 0 12px rgba(167,139,250,0.5); }
+  .legend { display: flex; gap: 24px; justify-content: center; margin-bottom: 20px; }
+  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.7); }
+  .legend-dot { width: 12px; height: 12px; border-radius: 3px; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h2>Qwen3.5 综合能力跑分对比</h2>
+  <div class="legend">
+    <div class="legend-item"><div class="legend-dot" style="background:#a78bfa;"></div>Qwen3.5</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#34d399;"></div>GPT-5.2</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#fbbf24;"></div>Claude 4.5</div>
+  </div>
+  <div class="chart-group">
+    <div class="chart-row">
+      <div class="chart-label">MMLU-Pro<br><span style="font-size:11px;color:rgba(255,255,255,0.4);">知识推理</span></div>
+      <div class="bars">
+        <div class="bar-item"><div class="bar-name">Qwen3.5</div><div class="bar-track"><div class="bar-fill qwen best" style="width:92%;">87.8</div></div></div>
+        <div class="bar-item"><div class="bar-name">GPT-5.2</div><div class="bar-track"><div class="bar-fill gpt" style="width:90.5%;">86.5</div></div></div>
+      </div>
+    </div>
+    <div class="chart-row">
+      <div class="chart-label">GPQA<br><span style="font-size:11px;color:rgba(255,255,255,0.4);">博士级难题</span></div>
+      <div class="bars">
+        <div class="bar-item"><div class="bar-name">Qwen3.5</div><div class="bar-track"><div class="bar-fill qwen best" style="width:91%;">88.4</div></div></div>
+        <div class="bar-item"><div class="bar-name">Claude 4.5</div><div class="bar-track"><div class="bar-fill claude" style="width:90.5%;">87.9</div></div></div>
+      </div>
+    </div>
+    <div class="chart-row">
+      <div class="chart-label">AIME 2026<br><span style="font-size:11px;color:rgba(255,255,255,0.4);">数学竞赛</span></div>
+      <div class="bars">
+        <div class="bar-item"><div class="bar-name">Qwen3.5</div><div class="bar-track"><div class="bar-fill qwen" style="width:91.3%;">91.3</div></div></div>
+        <div class="bar-item"><div class="bar-name">GPT-5.2</div><div class="bar-track"><div class="bar-fill gpt best" style="width:96.7%;">96.7</div></div></div>
+        <div class="bar-item"><div class="bar-name">Claude 4.5</div><div class="bar-track"><div class="bar-fill claude" style="width:93.3%;">93.3</div></div></div>
+      </div>
+    </div>
+    <div class="chart-row">
+      <div class="chart-label">IFBench<br><span style="font-size:11px;color:rgba(255,255,255,0.4);">指令遵循</span></div>
+      <div class="bars">
+        <div class="bar-item"><div class="bar-name">Qwen3.5</div><div class="bar-track"><div class="bar-fill qwen best" style="width:85%;">76.5</div></div></div>
+        <div class="bar-item"><div class="bar-name">GPT-5.2</div><div class="bar-track"><div class="bar-fill gpt" style="width:83.8%;">75.4</div></div></div>
+        <div class="bar-item"><div class="bar-name">Claude 4.5</div><div class="bar-track"><div class="bar-fill claude" style="width:64.4%;">58.0</div></div></div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

articles/007/diagrams/lmarena-mechanism.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { width: 1200px; height: 680px; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; display: flex; align-items: center; justify-content: center; color: #fff; }
+  .container { width: 1100px; }
+  h2 { text-align: center; font-size: 32px; margin-bottom: 48px; background: linear-gradient(90deg, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  .flow { display: flex; align-items: center; justify-content: center; gap: 16px; }
+  .step { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 28px 24px; width: 220px; text-align: center; backdrop-filter: blur(10px); }
+  .step .icon { font-size: 48px; margin-bottom: 12px; }
+  .step .title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #c4b5fd; }
+  .step .desc { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.7); }
+  .arrow { font-size: 32px; color: #60a5fa; flex-shrink: 0; }
+  .bottom-note { text-align: center; margin-top: 40px; font-size: 15px; color: rgba(255,255,255,0.5); }
+  .bottom-note span { color: #fbbf24; font-weight: 700; font-size: 20px; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h2>LMArena 评测机制：全球用户当裁判</h2>
+  <div class="flow">
+    <div class="step">
+      <div class="icon">👤</div>
+      <div class="title">用户提问</div>
+      <div class="desc">用户输入一个真实问题，系统随机分配两个模型</div>
+    </div>
+    <div class="arrow">→</div>
+    <div class="step">
+      <div class="icon">🤖🤖</div>
+      <div class="title">匿名对战</div>
+      <div class="desc">两个模型同时回答，用户不知道哪个是谁</div>
+    </div>
+    <div class="arrow">→</div>
+    <div class="step">
+      <div class="icon">👆</div>
+      <div class="title">真人盲测</div>
+      <div class="desc">用户根据回答质量投票选出更好的那个</div>
+    </div>
+    <div class="arrow">→</div>
+    <div class="step">
+      <div class="icon">📊</div>
+      <div class="title">ELO 评分</div>
+      <div class="desc">采用国际象棋 ELO 积分系统，胜率越高分数越高</div>
+    </div>
+  </div>
+  <div class="bottom-note">截至 2026 年 3 月，已累计 <span>563 万+</span> 次投票，覆盖 <span>333</span> 个模型</div>
+</div>
+</body>
+</html>

articles/007/diagrams/moe-architecture.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { width: 1200px; height: 680px; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; display: flex; align-items: center; justify-content: center; color: #fff; }
+  .container { width: 1100px; }
+  h2 { text-align: center; font-size: 32px; margin-bottom: 40px; background: linear-gradient(90deg, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  .main { display: flex; gap: 40px; align-items: center; justify-content: center; }
+  .left { display: flex; flex-direction: column; gap: 16px; align-items: center; }
+  .param-box { background: rgba(167,139,250,0.15); border: 2px solid #a78bfa; border-radius: 16px; padding: 20px 32px; text-align: center; }
+  .param-box .big { font-size: 48px; font-weight: 800; color: #a78bfa; }
+  .param-box .label { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 4px; }
+  .center-visual { position: relative; width: 360px; height: 360px; }
+  .expert { position: absolute; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); transition: all 0.3s; }
+  .expert.active { border-color: #34d399; background: rgba(52,211,153,0.2); color: #34d399; box-shadow: 0 0 20px rgba(52,211,153,0.3); }
+  .router { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; box-shadow: 0 0 30px rgba(99,102,241,0.4); }
+  .right { display: flex; flex-direction: column; gap: 16px; }
+  .feat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px 20px; width: 280px; }
+  .feat .ft { font-size: 15px; font-weight: 700; color: #60a5fa; margin-bottom: 4px; }
+  .feat .fd { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
+  .bottom { text-align: center; margin-top: 32px; font-size: 16px; color: #fbbf24; font-weight: 600; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h2>Qwen3.5 MoE 混合专家架构</h2>
+  <div class="main">
+    <div class="left">
+      <div class="param-box">
+        <div class="big">3970 亿</div>
+        <div class="label">总参数量 (397B)</div>
+      </div>
+      <div style="font-size: 28px; color: #60a5fa;">↓ 仅激活</div>
+      <div class="param-box" style="border-color: #34d399; background: rgba(52,211,153,0.15);">
+        <div class="big" style="color: #34d399;">170 亿</div>
+        <div class="label">激活参数 (A17B) ≈ 4.3%</div>
+      </div>
+    </div>
+    <div class="center-visual">
+      <div class="router">路由器<br>Router</div>
+      <div class="expert active" style="top:10px;left:140px;">专家 1</div>
+      <div class="expert" style="top:50px;left:260px;">专家 2</div>
+      <div class="expert active" style="top:150px;left:280px;">专家 3</div>
+      <div class="expert" style="top:250px;left:260px;">专家 4</div>
+      <div class="expert" style="top:280px;left:140px;">专家 5</div>
+      <div class="expert" style="top:250px;left:20px;">专家 6</div>
+      <div class="expert active" style="top:150px;left:0px;">专家 7</div>
+      <div class="expert" style="top:50px;left:20px;">专家 8</div>
+    </div>
+    <div class="right">
+      <div class="feat">
+        <div class="ft">线性注意力</div>
+        <div class="fd">Gated Delta Networks，大幅降低长文本处理的计算开销</div>
+      </div>
+      <div class="feat">
+        <div class="ft">原生多模态预训练</div>
+        <div class="fd">文本 + 图像 + 视频混合训练，非后期拼接</div>
+      </div>
+      <div class="feat">
+        <div class="ft">推理效率提升</div>
+        <div class="fd">显存降低 60%，吞吐量提升最高 19 倍</div>
+      </div>
+    </div>
+  </div>
+  <div class="bottom">不到 40% 的参数量，达到上一代万亿参数 Qwen3-Max 的性能水平</div>
+</div>
+</body>
+</html>

articles/007/diagrams/pricing-comparison.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { width: 1200px; height: 680px; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; display: flex; align-items: center; justify-content: center; color: #fff; }
+  .container { width: 1000px; }
+  h2 { text-align: center; font-size: 32px; margin-bottom: 48px; background: linear-gradient(90deg, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  .price-grid { display: flex; gap: 24px; justify-content: center; }
+  .price-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 32px 28px; width: 220px; text-align: center; position: relative; }
+  .price-card.highlight { border-color: #a78bfa; background: rgba(167,139,250,0.1); box-shadow: 0 0 30px rgba(167,139,250,0.15); }
+  .price-card.highlight::before { content: "性价比之王"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #7c3aed, #a78bfa); padding: 4px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
+  .model-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
+  .company { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 24px; }
+  .price-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
+  .price-value { font-size: 36px; font-weight: 800; margin-bottom: 4px; }
+  .price-unit { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 20px; }
+  .price-card:nth-child(1) .price-value { color: #34d399; }
+  .price-card:nth-child(2) .price-value { color: #fbbf24; }
+  .price-card:nth-child(3) .price-value { color: #60a5fa; }
+  .price-card:nth-child(4) .price-value { color: #a78bfa; }
+  .vs { margin-top: 24px; font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
+  .vs strong { color: #fbbf24; }
+  .bottom { text-align: center; margin-top: 40px; font-size: 18px; color: #fbbf24; font-weight: 600; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h2>百万 Token 输入价格对比（人民币）</h2>
+  <div class="price-grid">
+    <div class="price-card">
+      <div class="model-name">GPT-5.4</div>
+      <div class="company">OpenAI</div>
+      <div class="price-label">百万输入 Token</div>
+      <div class="price-value">¥15</div>
+      <div class="price-unit">百万输出 ≈ ¥60</div>
+    </div>
+    <div class="price-card">
+      <div class="model-name">Claude Opus 4.6</div>
+      <div class="company">Anthropic</div>
+      <div class="price-label">百万输入 Token</div>
+      <div class="price-value">¥15</div>
+      <div class="price-unit">百万输出 ≈ ¥75</div>
+    </div>
+    <div class="price-card">
+      <div class="model-name">Gemini 3 Pro</div>
+      <div class="company">Google</div>
+      <div class="price-label">百万输入 Token</div>
+      <div class="price-value">¥14.4</div>
+      <div class="price-unit">百万输出 ≈ ¥57.6</div>
+    </div>
+    <div class="price-card highlight">
+      <div class="model-name">Qwen3.5-Plus</div>
+      <div class="company">阿里</div>
+      <div class="price-label">百万输入 Token</div>
+      <div class="price-value">¥0.8</div>
+      <div class="price-unit">价格仅为 1/18</div>
+    </div>
+  </div>
+  <div class="bottom">同等质量下，Qwen3.5-Plus 成本不到国际顶尖模型的 1/18</div>
+</div>
+</body>
+</html>

articles/007/diagrams/use-cases.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { width: 1200px; height: 680px; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; display: flex; align-items: center; justify-content: center; color: #fff; }
+  .container { width: 1080px; }
+  h2 { text-align: center; font-size: 32px; margin-bottom: 44px; background: linear-gradient(90deg, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+  .card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 28px 24px; text-align: center; }
+  .card .icon { font-size: 40px; margin-bottom: 12px; }
+  .card .title { font-size: 17px; font-weight: 700; color: #c4b5fd; margin-bottom: 8px; }
+  .card .model { font-size: 13px; color: #60a5fa; background: rgba(96,165,250,0.1); padding: 3px 12px; border-radius: 20px; display: inline-block; margin-bottom: 10px; }
+  .card .desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h2>Qwen3.5 使用场景推荐</h2>
+  <div class="grid">
+    <div class="card">
+      <div class="icon">💬</div>
+      <div class="title">日常对话 & 写作</div>
+      <div class="model">Qwen3.5-Plus</div>
+      <div class="desc">性价比最高，适合日常聊天、文案创作、知识问答</div>
+    </div>
+    <div class="card">
+      <div class="icon">💻</div>
+      <div class="title">编程辅助</div>
+      <div class="model">Qwen3.5-Max</div>
+      <div class="desc">代码能力强，支持多语言编程、代码审查、调试</div>
+    </div>
+    <div class="card">
+      <div class="icon">🖼️</div>
+      <div class="title">图片 / 文档分析</div>
+      <div class="model">Qwen3.5 多模态</div>
+      <div class="desc">原生视觉理解，读文档、看图表、识别 UI</div>
+    </div>
+    <div class="card">
+      <div class="icon">🎬</div>
+      <div class="title">视频内容理解</div>
+      <div class="model">Qwen3.5 多模态</div>
+      <div class="desc">支持最长 2 小时视频直接输入分析</div>
+    </div>
+    <div class="card">
+      <div class="icon">🏢</div>
+      <div class="title">企业私有化部署</div>
+      <div class="model">Qwen3.5-27B 开源版</div>
+      <div class="desc">数据不出境，可微调定制，无 API 依赖</div>
+    </div>
+    <div class="card">
+      <div class="icon">📱</div>
+      <div class="title">手机端 AI 助手</div>
+      <div class="model">Qwen3.5-2B</div>
+      <div class="desc">轻量本地运行，离线可用，隐私安全</div>
+    </div>
+  </div>
+</div>
+</body>
+</html>