Files
vf_react/public/htmls/MOE模型.html
2025-12-05 13:29:18 +08:00

498 lines
30 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深度研报MOE模型 (Mixture of Experts)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700&display=swap');
body {
font-family: 'Manrope', sans-serif;
background-color: #05050A;
color: #E0E0E0;
overflow-x: hidden;
position: relative;
}
.glass-card {
background: rgba(10, 10, 15, 0.5);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 2rem; /* 极致圆角 */
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(0, 255, 255, 0.3);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 255, 255, 0.05);
}
.glow-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
background: radial-gradient(circle at 20% 20%, rgba(0, 150, 255, 0.15) 0%, transparent 30%),
radial-gradient(circle at 80% 70%, rgba(255, 0, 150, 0.15) 0%, transparent 30%);
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0% { transform: translate(0px, 0px); }
50% { transform: translate(30px, -40px); }
100% { transform: translate(0px, 0px); }
}
h1, h2, h3 {
color: #FFFFFF;
font-weight: 700;
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: auto;
}
.bento-item-1 { grid-column: span 12; md:grid-column: span 8; grid-row: span 2; }
.bento-item-2 { grid-column: span 12; md:grid-column: span 4; grid-row: span 1; }
.bento-item-3 { grid-column: span 12; md:grid-column: span 4; grid-row: span 1; }
.bento-item-4 { grid-column: span 12; md:grid-column: span 6; grid-row: span 1; }
.bento-item-5 { grid-column: span 12; md:grid-column: span 6; grid-row: span 1; }
.bento-item-6 { grid-column: span 12; grid-row: span 1; }
.bento-item-7 { grid-column: span 12; md:grid-column: span 7; grid-row: span 2; }
.bento-item-8 { grid-column: span 12; md:grid-column: span 5; grid-row: span 2; }
@media (min-width: 768px) {
.bento-item-1 { grid-column: span 8; grid-row: span 2; }
.bento-item-2 { grid-column: span 4; grid-row: span 1; }
.bento-item-3 { grid-column: span 4; grid-row: span 1; }
.bento-item-4 { grid-column: span 6; grid-row: span 1; }
.bento-item-5 { grid-column: span 6; grid-row: span 1; }
.bento-item-6 { grid-column: span 12; grid-row: span 1; }
.bento-item-7 { grid-column: span 7; grid-row: span 2; }
.bento-item-8 { grid-column: span 5; grid-row: span 2; }
}
.text-cyan-glow {
color: #00FFFF;
text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
}
.collapse-title {
font-weight: 500;
}
.daisy-table {
width: 100%;
border-collapse: collapse;
}
.daisy-table th, .daisy-table td {
padding: 1rem 1.5rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.daisy-table th {
color: #FFFFFF;
font-weight: 500;
background-color: rgba(255, 255, 255, 0.05);
}
.daisy-table tr:last-child td {
border-bottom: none;
}
.daisy-table tr:hover {
background-color: rgba(255, 255, 255, 0.03);
}
</style>
</head>
<body class="min-h-screen">
<div class="glow-bg"></div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
<header class="text-center mb-16">
<p class="text-sm font-light text-cyan-400 mb-2">北京价值前沿科技有限公司 AI投研agent“价小前投研”</p>
<h1 class="text-4xl md:text-6xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-cyan-400">
MOE模型 (Mixture of Experts)
</h1>
<p class="mt-4 max-w-3xl mx-auto text-lg text-gray-300">
突破算力与成本瓶颈开启万亿参数时代重塑AI商业格局的核心技术路径。
</p>
</header>
<main class="bento-grid">
<!-- 核心观点摘要 -->
<section class="bento-item-1 p-8 glass-card flex flex-col">
<h2 class="text-2xl mb-4 text-cyan-glow">核心观点摘要</h2>
<p class="text-gray-300 leading-relaxed flex-grow">
MOE模型是当前AI大模型突破算力与成本瓶颈、实现参数规模跃迁万亿级的核心技术路径。其本质是通过“稀疏激活”机制以远低于稠密模型的计算成本实现更强的模型能力。目前该概念正从技术竞赛的“军备竞赛”阶段快速过渡到由成本下降驱动的商业化应用爆发前期。核心驱动力在于极致的“性价比”未来潜力在于重塑AI应用层的成本结构和商业模式尤其是在国产算力生态中扮演着关键的战略角色。
</p>
</section>
<!-- 2024年发展时间轴 -->
<section class="bento-item-2 p-8 glass-card">
<h3 class="text-xl mb-4 font-bold">2024爆发与竞赛之年</h3>
<div id="timeline-chart" class="w-full h-64"></div>
</section>
<!-- API成本对比 -->
<section class="bento-item-3 p-8 glass-card">
<h3 class="text-xl mb-4 font-bold">颠覆性成本优势</h3>
<div id="cost-chart" class="w-full h-64"></div>
</section>
<!-- 关键催化剂与未来路径 -->
<section class="bento-item-6 p-8 glass-card">
<h2 class="text-2xl mb-4 text-cyan-glow">关键催化剂与未来发展路径</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="font-semibold text-lg text-white mb-2">近期催化剂 (3-6个月)</h3>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li><strong>价格战深化与应用爆发:</strong>以DeepSeek为首的低价API引发云厂商全面跟进催生爆款AI原生应用。</li>
<li><strong>下一代架构发布:</strong>阿里Qwen3-Next、字节UltraMem等新架构发布树立性能新标杆。</li>
<li><strong>国产算力标杆落地:</strong>基于昇腾等国产平台的MoE模型在金融、政务等领域斩获重大商业合同。</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-lg text-white mb-2">长期发展路径</h3>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li><strong>2024-2025 (架构优化期):</strong> 竞争聚焦于路由算法、训练框架及软硬件协同优化。</li>
<li><strong>2025-2027 (垂直深化期):</strong> 与多模态、具身智能深度融合涌现大量行业垂直MoE模型。</li>
<li><strong>2027+ (架构混合期):</strong> MoE与Agent Swarm等架构混合实现更高阶的智能涌现。</li>
</ul>
</div>
</div>
</section>
<!-- 核心逻辑与市场认知分析 -->
<section class="bento-item-7 p-8 glass-card">
<h2 class="text-2xl mb-4 text-cyan-glow">核心逻辑与预期差分析</h2>
<div class="space-y-6 text-gray-300 leading-relaxed">
<div>
<h3 class="font-semibold text-lg text-white mb-2">三大核心驱动力</h3>
<ol class="list-decimal list-inside space-y-1">
<li><strong>技术驱动的成本下降:</strong>通过“稀疏激活”解耦参数规模与计算量用稠密模型约1/6的计算成本实现同等性能。</li>
<li><strong>商业化落地的现实需求:</strong>颠覆性降价如DeepSeek破除AI应用成本壁垒推动规模化落地。</li>
<li><strong>国产算力生态的战略选择:</strong>在高端算力受限背景下以MoE架构最大化利用现有算力成为关键战略路径。</li>
</ol>
</div>
<div>
<h3 class="font-semibold text-lg text-white mb-2">市场热度与预期差</h3>
<p>市场对MoE降本增效前景普遍乐观但存在三大预期差</p>
<ul class="list-disc list-inside mt-2 space-y-2">
<li><strong class="text-cyan-400">真实竞争力 vs. 宣传叙事:</strong>Meta的Llama 405B非MoE性能匹敌国产MoE模型暗示国内模型底层能力或有差距。“参数虚胖”可能掩盖真实性能华为与阿里模型“惊人一致”的争议也暗示创新不足。</li>
<li><strong class="text-cyan-400">工程复杂度的低估:</strong>市场可能忽略训练稳定性、负载均衡、路由策略等核心工程难题低估了高质量MoE模型的部署门槛。</li>
<li><strong class="text-cyan-400">受益环节的认知模糊:</strong>市场未能清晰区分“模型开发者”(华为)、“模型应用者”(汤姆猫)和“基础设施提供商”(瑞斯康达、恒为科技)三者逻辑的纯粹性与弹性差异。</li>
</ul>
</div>
</div>
</section>
<!-- 产业链与核心公司剖析 -->
<section class="bento-item-8 p-8 glass-card">
<h2 class="text-2xl mb-4 text-cyan-glow">产业链与核心玩家</h2>
<div class="space-y-6">
<div>
<h3 class="font-semibold text-lg text-white mb-2">产业链图谱</h3>
<ul class="space-y-2 text-gray-300">
<li><strong>上游 (AI基础设施):</strong> <span class="font-semibold text-white">算力芯片</span> (昇腾, 海光), <span class="font-semibold text-white">网络设备 (交换机/光交换)</span> (瑞斯康达, 共进股份, 恒为科技)。</li>
<li><strong>中游 (模型开发与服务):</strong> <span class="font-semibold text-white">第一梯队</span> (华为, 阿里, 腾讯, DeepSeek), <span class="font-semibold text-white">垂直领域</span> (科大讯飞, 蚂蚁集团)。</li>
<li><strong>下游 (模型应用):</strong> <span class="font-semibold text-white">边缘计算</span> (云天励飞), <span class="font-semibold text-white">垂直行业</span> (东方通, 汤姆猫)。</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-lg text-white mb-2">核心玩家对比</h3>
<div class="space-y-3">
<p><strong class="text-white">华为:</strong> 逻辑最“硬”,全栈自主可控(昇腾+盘古),契合国产替代战略。</p>
<p><strong class="text-white">DeepSeek:</strong> 逻辑最“纯”算法创新MLA与极致商业化效率低价API的典范。</p>
<p><strong class="text-white">阿里巴巴:</strong> 逻辑最“开放”持续开源Qwen系列构建开发者生态。</p>
<p><strong class="text-white">字节跳动:</strong> 逻辑最“务实”聚焦训练成本与推理效率优化COMET, UltraMem</p>
</div>
</div>
</div>
</section>
<!-- 深度资料库 -->
<section class="bento-item-4 p-8 glass-card" x-data="{ tab: 'news' }">
<h2 class="text-2xl mb-4 text-cyan-glow">深度资料库</h2>
<div class="tabs tabs-boxed bg-black/20 mb-4">
<a class="tab" :class="{'tab-active': tab === 'news'}" @click="tab = 'news'">新闻洞察</a>
<a class="tab" :class="{'tab-active': tab === 'roadshow'}" @click="tab = 'roadshow'">路演纪要</a>
<a class="tab" :class="{'tab-active': tab === 'report'}" @click="tab = 'report'">研报精粹</a>
</div>
<div class="max-h-96 overflow-y-auto pr-2">
<div x-show="tab === 'news'" class="space-y-3 text-gray-300">
<p><strong>技术趋势:</strong> MoE被定位为Transformer架构优化的主流路线能以更低计算需求大幅提升模型能力有望成为全球主流技术。</p>
<p><strong>华为 (盘古):</strong> 发布准万亿参数盘古Ultra MoE完全基于昇腾平台训练实现全栈自主可控。同时发布盘古大模型5.5覆盖多种MoE架构。</p>
<p><strong>字节跳动 (豆包):</strong> 开源训练优化技术COMET效率提升1.7倍并提出超越MoE的UltraMem架构推理速度提升2-6倍。</p>
<p><strong>阿里巴巴 (通义千问):</strong> 发布Qwen2.5-Max并开源Qwen3系列包含首个超2000亿级MoE模型实现以10%激活参数超越前代72B模型。</p>
<p><strong>腾讯 (混元):</strong> 开源混元Large389B参数和Hunyuan-A13B探索混合推理。</p>
<p><strong>DeepSeek:</strong> 作为MoE典范V2引入MLA算法提升推理效率并开源通信库DeepEP解决通信瓶颈。</p>
<p><strong>科大讯飞 & 蚂蚁集团:</strong> 均在国产算力上取得突破科大讯飞与华为合作攻克推理难题蚂蚁集团验证了国产GPU训练3000亿参数MoE的可行性。</p>
</div>
<div x-show="tab === 'roadshow'" class="space-y-3 text-gray-300">
<p><strong>核心优势:</strong> 核心是“动态路由”能显著降低推理成本至稠密模型1/6-1/8提升训练效率平衡性能与效率。</p>
<p><strong>技术挑战:</strong> 训练稳定性、显存优化(可能牺牲速度)、路由精度、负载均衡是核心难题。</p>
<p><strong>MoE vs. Dense:</strong> Llama3采用Dense架构并表现优异显示MoE并非唯一路径。Dense在长文本处理上更优MoE更适合通用推理两者是技术战略选择。</p>
<p><strong>国内外玩家:</strong> 国外OpenAI(GPT-4)、Google(Gemini)是先行者;国内阶跃星辰、阿里、华为、字节等均已布局,但多数仍处跟随阶段。</p>
<p><strong>未来趋势:</strong> 升级方向为门控精度、专家规模差异化、训练稳定性。稀疏化将从层内扩展到层间MOLD架构和模型级Coe方案</p>
</div>
<div x-show="tab === 'report'" class="space-y-3 text-gray-300">
<p><strong>技术原理:</strong> 核心是通过门控函数(路由)稀疏激活部分专家网络,在扩大总参数的同时降低单次计算量。负载均衡是路由策略关键。</p>
<p><strong>突破万亿参数的关键路径:</strong> MoE是当前大模型突破万亿参数规模同时有效控制训练和部署成本的核心技术。</p>
<p><strong>DeepSeek-V2:</strong> 2360亿参数采用自研DeepSeekMoE和MLA架构中文能力超GPT-4API定价仅为GPT-4-Turbo的近百分之一引爆商业化。</p>
<p><strong>华为Pangu Ultra MoE:</strong> 7180亿参数基于昇腾平台通过DSSN架构等创新解决训练稳定性难题标志“国产算力+国产模型”全流程自主可控。</p>
<p><strong>腾讯混元Large:</strong> 提出MoE的Scaling Law采用混合路由、专家回收等高级策略支持256K长文本。</p>
<p><strong>行业影响:</strong> 凭借“参数更多、能力更强、成本更低”的特点推动下游应用商业化爆发催生对AI算力基础设施尤其网络设备的更高需求。</p>
</div>
</div>
</section>
<!-- 潜在风险与挑战 -->
<section class="bento-item-5 p-8 glass-card">
<h2 class="text-2xl mb-4 text-cyan-glow">潜在风险与挑战</h2>
<div class="max-h-96 overflow-y-auto pr-2">
<ul class="list-disc list-inside space-y-3 text-gray-300">
<li><strong>技术瓶颈:</strong> 训练稳定性、推理速度与显存成本的权衡、路由精度等仍是待优化的技术难题。国内厂商可能存在“底层创新”不足的风险。</li>
<li><strong>商业化风险:</strong> 高昂的显存VRAM成本是商业化部署的隐性门槛。MoE并非所有场景最优解存在市场过度泛化的乐观预期。</li>
<li><strong>竞争与路线之争:</strong> 高性能开源MoE模型Qwen, DeepSeek和强大的Dense模型Llama3将持续挤压技术实力较弱厂商的空间主流技术路线并非一成不变。</li>
<li><strong>信息交叉验证风险:</strong> 市场宣传“超越国际水平”与产业实际“Llama稠密模型可匹敌国产MoE”存在显著差距需警惕被过于乐观的叙事误导。</li>
</ul>
</div>
</section>
</main>
<!-- 关联个股 -->
<section class="mt-16">
<h2 class="text-3xl font-bold text-center mb-8 text-cyan-glow">产业链核心标的</h2>
<div class="glass-card overflow-x-auto">
<table class="daisy-table">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>流通市值(亿元)</th>
</tr>
</thead>
<tbody>
<tr>
<td>云天励飞</td>
<td><a href="https://valuefrontier.cn/company?scode=688343" target="_blank" class="text-cyan-400 hover:underline">688343</a></td>
<td>通过能力蒸馏研发轻量化MoE大模型支撑大模型在边缘设备的广泛落地。</td>
<td>211.5</td>
</tr>
<tr>
<td>东方通</td>
<td><a href="https://valuefrontier.cn/company?scode=300379" target="_blank" class="text-cyan-400 hover:underline">300379</a></td>
<td>发布基于MoE的深度安全大模型在LLM+AI Agent框架下为客户快速部署AI安全能力。</td>
<td>98.4</td>
</tr>
<tr>
<td>汤姆猫</td>
<td><a href="https://valuefrontier.cn/company?scode=300459" target="_blank" class="text-cyan-400 hover:underline">300459</a></td>
<td>AI情感陪伴机器人采用MoE架构搭载自研垂直模型并调用豆包、DeepSeek等模型能力。</td>
<td>219.8</td>
</tr>
<tr>
<td>瑞斯康达</td>
<td><a href="https://valuefrontier.cn/company?scode=603803" target="_blank" class="text-cyan-400 hover:underline">603803</a></td>
<td>MoE推动AI大模型降本对网络通信需求剧增交换机迎来新发展机遇。公司布局数据中心交换机等产品。</td>
<td>53.1</td>
</tr>
<tr>
<td>共进股份</td>
<td><a href="https://valuefrontier.cn/company?scode=603118" target="_blank" class="text-cyan-400 hover:underline">603118</a></td>
<td>MoE架构对网络通信提出更高要求交换机需求受益。公司产品覆盖100G、核心交换机等。</td>
<td>101.4</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- 涨幅分析补充 -->
<section class="mt-16">
<h2 class="text-3xl font-bold text-center mb-8 text-cyan-glow">概念热点追踪</h2>
<div class="glass-card overflow-x-auto">
<table class="daisy-table">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>异动日期</th>
<th>涨幅</th>
<th>核心驱动逻辑</th>
</tr>
</thead>
<tbody>
<tr>
<td>恒为科技</td>
<td><a href="https://valuefrontier.cn/company?scode=603496" target="_blank" class="text-cyan-400 hover:underline">603496</a></td>
<td>2025-09-10</td>
<td class="text-green-400">+5.19%</td>
<td>核心技术突破发布OCS光交换机方案为MoE训练和智算超节点提供更优技术路径精准卡位算力基建新赛道。</td>
</tr>
<tr>
<td>中际旭创</td>
<td><a href="https://valuefrontier.cn/company?scode=300308" target="_blank" class="text-cyan-400 hover:underline">300308</a></td>
<td>2025-06-12</td>
<td class="text-green-400">+7.43%</td>
<td>券商研报关注MoE架构下对光组网800G/1.6T)需求的拉动,公司作为光通信龙头直接受益。</td>
</tr>
<tr>
<td>巨人网络</td>
<td><a href="https://valuefrontier.cn/company?scode=002558" target="_blank" class="text-cyan-400 hover:underline">002558</a></td>
<td>2025-06-12</td>
<td class="text-green-400">+9.98%</td>
<td>游戏AI大模型GiantGPT完成备案专注游戏场景是MoE等大模型技术在垂直应用领域的典型落地。</td>
</tr>
<tr>
<td>中科曙光</td>
<td><a href="https://valuefrontier.cn/company?scode=603019" target="_blank" class="text-cyan-400 hover:underline">603019</a></td>
<td>2025-11-06</td>
<td class="text-green-400">+7.39%</td>
<td>发布全球首个单机柜级640卡超节点在MoE万亿参数大模型等场景性能提升30-40%,引领国产算力。</td>
</tr>
<tr>
<td>因赛集团</td>
<td><a href="https://valuefrontier.cn/company?scode=300781" target="_blank" class="text-cyan-400 hover:underline">300781</a></td>
<td>2025-07-25</td>
<td class="text-green-400">+19.99%</td>
<td>与月之暗面(Kimi)战略合作为其提供AIGC营销内容及数据服务深度参与大模型应用生态。</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer class="text-center mt-20 text-gray-500 text-sm">
<p>北京价值前沿科技有限公司出品</p>
<p class="mt-1">本报告为AI合成数据不构成任何投资建议投资需谨慎。</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// ECharts 主题
const echartsTheme = {
color: ['#00FFFF', '#FF00FF', '#00FF00', '#FFFF00', '#FF0000', '#0000FF'],
backgroundColor: 'transparent',
textStyle: {
color: '#E0E0E0'
},
title: {
textStyle: {
color: '#FFFFFF'
}
},
legend: {
textStyle: {
color: '#E0E0E0'
}
},
tooltip: {
backgroundColor: 'rgba(10, 10, 15, 0.8)',
borderColor: 'rgba(255, 255, 255, 0.1)',
textStyle: {
color: '#E0E0E0'
}
},
xAxis: {
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
axisLabel: { color: '#E0E0E0' },
splitLine: { show: false }
},
yAxis: {
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
axisLabel: { color: '#E0E0E0' },
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
}
};
echarts.registerTheme('dark_sci_fi', echartsTheme);
// Timeline Chart
var timelineChartDom = document.getElementById('timeline-chart');
if (timelineChartDom) {
var timelineChart = echarts.init(timelineChartDom, 'dark_sci_fi');
var timelineOption = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
return params[0].name + '<br/>' + params[0].value;
}
},
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
xAxis: { type: 'category', data: ['Q1 技术验证', 'Q2 开源与价格战', 'Q3-Q4 国产算力突破'], axisTick: { alignWithLabel: true } },
yAxis: { type: 'value', show: false },
series: [{
name: '事件',
type: 'line',
step: 'start',
symbol: 'circle',
symbolSize: 10,
lineStyle: { color: '#00FFFF', width: 2, type: 'dashed' },
itemStyle: { color: '#00FFFF', borderColor: '#05050A', borderWidth: 2 },
data: [
{ name: 'Q1 技术验证', value: 1, label: { show: true, position: 'top', formatter: '谷歌Gemini 1.5\n阶跃星辰Step-2' } },
{ name: 'Q2 开源与价格战', value: 2, label: { show: true, position: 'top', formatter: 'DeepSeek-V2低价引爆\n阿里Qwen/腾讯混元开源' } },
{ name: 'Q3-Q4 国产算力突破', value: 3, label: { show: true, position: 'top', formatter: '华为盘古+昇腾闭环\n字节/讯飞/蚂蚁跟进' } }
]
}]
};
timelineChart.setOption(timelineOption);
}
// Cost Chart
var costChartDom = document.getElementById('cost-chart');
if(costChartDom) {
var costChart = echarts.init(costChartDom, 'dark_sci_fi');
var costOption = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}<br/>{c} 元/百万Tokens'
},
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['GPT-4-Turbo (输入)', 'DeepSeek-V2 (输入)'],
axisLabel: { interval: 0, rotate: 15 }
},
yAxis: { type: 'value', name: '元/百万Tokens' },
series: [{
name: 'API成本',
type: 'bar',
barWidth: '40%',
data: [
{ value: 72.5, itemStyle: { color: '#FF00FF' }, label: {show: true, position: 'top', formatter: '约100倍'} },
{ value: 1, itemStyle: { color: '#00FFFF' } }
],
label: { show: true, position: 'top', color: '#fff' }
}]
};
costChart.setOption(costOption);
}
// Resize charts on window resize
window.addEventListener('resize', function() {
if(timelineChart) timelineChart.resize();
if(costChart) costChart.resize();
});
});
</script>
</body>
</html>