Spaces:

2catycm
/

HyperPapers

Sleeping

App Files Files Community

2catycm commited on Apr 10

Commit

6fa7bc4

1 Parent(s): 81f3976

feat: html

Browse files

Files changed (1) hide show

presentation.html +288 -197

presentation.html CHANGED Viewed

@@ -3,27 +3,29 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Python中最佳的稳定交互式超图可视化库</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
             background-color: #f5f5f5;
         }
         .slide-container {
-            max-width: 800px;
             margin: 0 auto;
             background-color: white;
             box-shadow: 0 0 10px rgba(0,0,0,0.1);
             padding: 20px;
         }
         .slide {
-            margin-bottom: 30px;
             padding: 20px;
             border-radius: 5px;
             background-color: #fff;
             box-shadow: 0 0 5px rgba(0,0,0,0.1);
         }
         .slide h2 {
             color: #2c3e50;
@@ -41,28 +43,6 @@
             white-space: pre-wrap;
             margin: 10px 0;
         }
-        .highlight {
-            background-color: #e8f4f8;
-            padding: 2px 5px;
-            border-radius: 3px;
-        }
-        .navigation {
-            text-align: center;
-            margin-top: 20px;
-        }
-        .navigation button {
-            padding: 10px 20px;
-            margin: 0 10px;
-            background-color: #3498db;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 16px;
-        }
-        .navigation button:hover {
-            background-color: #2980b9;
-        }
         table {
             width: 100%;
             border-collapse: collapse;
@@ -76,221 +56,332 @@
         th {
             background-color: #f2f2f2;
         }
-        .comparison {
-            font-weight: bold;
             color: #2c3e50;
         }
     </style>
 </head>
 <body>
     <div class="slide-container">
-        <div class="slide" id="slide1">
-            <h2>Python中最佳的稳定交互式超图可视化库</h2>
-            <p>超图是传统图的推广，为建模以实体间多向交互为特征的复杂系统提供了一个强大的框架。与标准图中边精确连接两个节点不同，超图中的超边可以连接任意数量的节点。</p>
-            <p>本报告旨在确定Python库，该库在稳定性（特别是对于大型和复杂的超图）和交互功能方面提供了最佳组合，以促进对其进行探索和分析。</p>
-        </div>
-        <div class="slide" id="slide2" style="display: none;">
-            <h2>主要Python超图可视化库</h2>
-            <p>通过研究，确定了四个主要的Python库，它们提供超图可视化功能：</p>
             <ul>
-                <li><strong>HyperNetX (HNX)</strong>：由太平洋西北国家实验室 (PNNL) 开发，专注于使用代数拓扑和组合学方法分析和可视化复杂网络。</li>
-                <li><strong>Hypergraphx (HGX)</strong>：较新的库，提供全面的算法用于构建、分析和可视化具有高级交互的系统。</li>
-                <li><strong>XGI (CompleX Group Interactions)</strong>：由网络科学家设计，专注于建模、分析和可视化具有群体交互的复杂系统。</li>
-                <li><strong>dhg (DeepHypergraph)</strong>：基于PyTorch的深度学习库，专门设计用于图和超图神经网络。</li>
             </ul>
         </div>
-        <div class="slide" id="slide3" style="display: none;">
-            <h2>HyperNetX (HNX)</h2>
-            <p>HyperNetX最初于2019年发布，由PNNL开发，专注于使用代数拓扑和组合学方法分析和可视化复杂网络。</p>
-            <p>交互功能：</p>
-            <ul>
-                <li>通过HyperNetX-Widget提供交互功能，包括力导向布局、高级选择机制（单击、多选、拖动、刷选）。</li>
-                <li>支持节点折叠，将具有相同边成员关系的节点分组为超级节点。</li>
-                <li>提供二分图视图，显示超图的替代视角。</li>
-            </ul>
-            <p>稳定性：</p>
             <ul>
-                <li>核心库稳定，利用Pandas DataFrames提高性能。</li>
-                <li>HNX-Widget目前处于beta阶段，建议在Anaconda环境中使用。</li>
             </ul>
         </div>
-        <div class="slide" id="slide4" style="display: none;">
-            <h2>Hypergraphx (HGX)</h2>
-            <p>Hypergraphx于2023年发布，是一个多用途高级网络分析工具。</p>
-            <p>交互功能：</p>
             <ul>
-                <li>提供“不同的可视化工具”，但具体交互功能（如缩放、平移、节点选择）未详细说明。</li>
             </ul>
-            <p>稳定性：</p>
             <ul>
-                <li>在分析任务中具有良好的可扩展性，适用于非常大的超图。</li>
-                <li>其可视化功能对于大型数据集的稳定性未明确说明。</li>
             </ul>
         </div>
-        <div class="slide" id="slide5" style="display: none;">
-            <h2>XGI (CompleX Group Interactions)</h2>
-            <p>XGI于2021年发布，专注于建模、分析和可视化具有群体交互的复杂系统。</p>
-            <p>交互功能：</p>
             <ul>
-                <li>提供“方便的可视化功能”，但具体交互功能未详细说明。</li>
             </ul>
-            <p>稳定性：</p>
             <ul>
-                <li>已用于涉及超图的可扩展张量方法的研究。</li>
-                <li>缺乏其可视化对于大型超图的稳定性的直接证据。</li>
             </ul>
         </div>
-        <div class="slide" id="slide6" style="display: none;">
-            <h2>dhg (DeepHypergraph)</h2>
-            <p>dhg于2022年发布，是一个基于PyTorch的深度学习库，专注于图和超图神经网络。</p>
-            <p>交互功能：</p>
             <ul>
-                <li>提供“强大的图和超图可视化工具”，但具体交互功能未详细说明。</li>
             </ul>
-            <p>稳定性：</p>
             <ul>
-                <li>性能重点在于超图上的深度学习。</li>
-                <li>缺乏关于其可视化对于广泛超图的稳定性的具体信息。</li>
             </ul>
         </div>
-        <div class="slide" id="slide7" style="display: none;">
-            <h2>库功能比较</h2>
-            <table>
-                <tr>
-                    <th>功能</th>
-                    <th>HyperNetX</th>
-                    <th>Hypergraphx</th>
-                    <th>XGI</th>
-                    <th>dhg</th>
-                </tr>
-                <tr>
-                    <td>缩放</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>否</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>平移</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>否</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>节点选择</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>否</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>边选择</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>否</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>拖拽</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>否</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>刷选</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>否</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>工具提示</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>否</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>节点折叠</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>否</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>二分图视图</td>
-                    <td>是</td>
-                    <td>是</td>
-                    <td>是</td>
-                    <td>否</td>
-                </tr>
-                <tr>
-                    <td>属性控制</td>
-                    <td>是</td>
-                    <td>否</td>
-                    <td>是</td>
-                    <td>否</td>
-                </tr>
-            </table>
         </div>
-        <div class="slide" id="slide8" style="display: none;">
-            <h2>结论与建议</h2>
-            <p>根据比较分析，HyperNetX (HNX) 通过其 HyperNetX-Widget 提供了最全面的超图可视化交互功能集。</p>
-            <ul>
-                <li>HNX 的交互功能包括布局调整、高级选择、可见性操作和属性控制。</li>
-                <li>核心 HNX 库稳定且文档完善，拥有支持性的社区和交互式教程等资源。</li>
-                <li>对于处理大型超图，HNX 提供节点折叠作为视觉辅助。</li>
-            </ul>
-            <p>建议：</p>
             <ul>
-                <li>首先使用 HyperNetX，因为它具有明确的交互功能以及核心库的稳定性。</li>
-                <li>如果对极其庞大的超图的稳定性成为首要关注点，而交互式探索是次要的，则建议进一步评估 Hypergraphx。</li>
             </ul>
         </div>
-        <div class="navigation">
-            <button onclick="prevSlide()">上一页</button>
-            <button onclick="nextSlide()">下一页</button>
         </div>
-    </div>
-    <script>
-        let currentSlide = 1;
-        const totalSlides = 8;
-        function showSlide(n) {
-            // 隐藏所有幻灯片
-            for (let i = 1; i <= totalSlides; i++) {
-                document.getElementById(`slide${i}`).style.display = 'none';
-            }
-            // 显示当前幻灯片
-            document.getElementById(`slide${n}`).style.display = 'block';
-            currentSlide = n;
-        }
-        function nextSlide() {
-            if (currentSlide < totalSlides) {
-                showSlide(currentSlide + 1);
-            }
-        }
-        function prevSlide() {
-            if (currentSlide > 1) {
-                showSlide(currentSlide - 1);
-            }
-        }
-        // 初始化显示第一页
-        showSlide(1);
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>基于Python的最佳稳定交互式超图可视化库分析</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
             background-color: #f5f5f5;
+            overflow-x: hidden;
         }
         .slide-container {
+            max-width: 1200px;
             margin: 0 auto;
             background-color: white;
             box-shadow: 0 0 10px rgba(0,0,0,0.1);
             padding: 20px;
+            position: relative;
         }
         .slide {
             padding: 20px;
             border-radius: 5px;
             background-color: #fff;
             box-shadow: 0 0 5px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
         }
         .slide h2 {
             color: #2c3e50;
             white-space: pre-wrap;
             margin: 10px 0;
         }
         table {
             width: 100%;
             border-collapse: collapse;
         th {
             background-color: #f2f2f2;
         }
+        a {
+            color: #3498db;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        .interactive-element {
+            margin: 20px 0;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+        }
+        .interactive-element h3 {
+            margin-top: 0;
             color: #2c3e50;
         }
+        .interactive-element p {
+            margin-bottom: 10px;
+        }
+        .interactive-element button {
+            padding: 8px 15px;
+            margin: 5px;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+        .interactive-element button:hover {
+            background-color: #2980b9;
+        }
+        .tab-container {
+            display: flex;
+            margin: 20px 0;
+        }
+        .tab {
+            padding: 10px 20px;
+            background-color: #f2f2f2;
+            border: 1px solid #ddd;
+            cursor: pointer;
+        }
+        .tab.active {
+            background-color: #3498db;
+            color: white;
+        }
+        .tab-content {
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-top: none;
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
     </style>
 </head>
 <body>
     <div class="slide-container">
+        <div class="slide">
+            <h2>基于Python的最佳稳定交互式超图可视化库分析</h2>
+            <p>超图（Hypergraph）允许边连接任意数量的顶点，比传统图（Graph）更适合描述多对多关系（如科研合作网络、基因调控网络等）。</p>
+            <p>超图可视化面临两大核心挑战：</p>
             <ul>
+                <li><strong>高维度边表示</strong>：超边（Hyperedge）的几何形态难以直观呈现，传统Venn图或Euler图在大规模数据下可读性差。</li>
+                <li><strong>动态交互需求</strong>：动态超图需要时间维度与空间结构的同步展示，对布局算法和用户交互提出更高要求。</li>
             </ul>
         </div>
+        <div class="slide">
+            <h2>Python中主流超图库的对比分析</h2>
+            <p>以下从稳定性、交互性和维护状态三个维度，对HyperNetX、XGI、HGX等库进行深入评估：</p>
+            <table>
+                <tr>
+                    <th>库名称</th>
+                    <th>维护机构/团队</th>
+                    <th>最新版本</th>
+                    <th>更新频率</th>
+                    <th>社区活跃度</th>
+                    <th>交互功能支持</th>
+                    <th>中文文档覆盖</th>
+                </tr>
+                <tr>
+                    <td>HyperNetX</td>
+                    <td>太平洋西北国家实验室 (PNNL)</td>
+                    <td>2.3 (2023)</td>
+                    <td>高频</td>
+                    <td>⭐⭐⭐⭐</td>
+                    <td>Jupyter Widget动态交互、布局调整</td>
+                    <td>部分教程</td>
+                </tr>
+                <tr>
+                    <td>XGI</td>
+                    <td>国际跨学科研究团队</td>
+                    <td>0.7 (2023)</td>
+                    <td>中频</td>
+                    <td>⭐⭐⭐</td>
+                    <td>Matplotlib静态绘图、布局自定义</td>
+                    <td>无</td>
+                </tr>
+                <tr>
+                    <td>HGX</td>
+                    <td>HGX-Team</td>
+                    <td>1.0 (2023)</td>
+                    <td>中频</td>
+                    <td>⭐⭐</td>
+                    <td>基础可视化、动态过程模拟</td>
+                    <td>无</td>
+                </tr>
+                <tr>
+                    <td>NetworkX</td>
+                    <td>开源社区</td>
+                    <td>3.1 (2024)</td>
+                    <td>高频</td>
+                    <td>⭐⭐⭐⭐⭐</td>
+                    <td>仅支持普通图，需超图转换</td>
+                    <td>有中文文档</td>
+                </tr>
+            </table>
+        </div>
+        <div class="slide">
+            <h2>HyperNetX：交互式可视化标杆</h2>
+            <p><a href="https://pnnl.github.io/hypernetx-widget/" target="_blank">hnx-widget 0.1.0-beta.4 Demo</a></p>
+            <p><strong>核心优势</strong>：</p>
             <ul>
+                <li><strong>动态交互</strong>：通过HyperNetX-Widget实现Jupyter Notebook内的实时节点拖拽、属性面板查看、超边合并/拆分。</li>
+                <li><strong>算法扩展</strong>：支持星形扩展（Star Expansion）和团扩展（Clique Expansion），将超图转换为普通图进行传统算法适配。</li>
+                <li><strong>动态超图支持</strong>：整合PAOHvis技术，以并行水平条表示顶点、垂直线表示超边，实现时间演变的无重叠可视化。</li>
+                <li><strong>稳定性保障</strong>：由国家级实验室维护，代码质量通过Pylint/Black严格检查，依赖管理使用Poetry。</li>
             </ul>
+            <p><strong>应用场景</strong>：适用于中等规模动态超图（如论文合作网络演化分析）。</p>
         </div>
+        <div class="slide">
+            <h2>XGI：高阶网络分析的轻量选择</h2>
+            <p><strong>核心优势</strong>：</p>
             <ul>
+                <li><strong>API友好性</strong>：继承NetworkX的API设计，支持add_edge()直接添加超边，降低学习成本。</li>
+                <li><strong>统计模块丰富</strong>：提供节点度分布、超边大小直方图等分析工具，支持单纯复形（Simplicial Complex）的拓扑分析。</li>
             </ul>
+            <p><strong>局限性</strong>：</p>
             <ul>
+                <li>可视化依赖Matplotlib，交互性较弱，需手动调用draw()函数更新图形。</li>
             </ul>
         </div>
+        <div class="slide">
+            <h2>HGX：高阶网络的全功能工具箱</h2>
+            <p><strong>核心优势</strong>：</p>
             <ul>
+                <li><strong>算法覆盖面广</strong>：提供加权/有向超边、动态过程模拟（如传染病模型）、多层超图分析。</li>
+                <li><strong>数据兼容性</strong>：支持CSV/JSON格式输入，内置高中合作等现实数据集。</li>
             </ul>
+            <p><strong>局限性</strong>：</p>
             <ul>
+                <li>社区规模较小，文档以英文为主，可视化功能不如HyperNetX直观。</li>
             </ul>
         </div>
+        <div class="slide">
+            <h2>选型建议与使用策略</h2>
+            <p><strong>优先选择HyperNetX</strong>：若需求聚焦于交互式探索和动态超图，HyperNetX的Widget和PAOHvis技术为最优解。</p>
+            <div class="code-block">
+                from hypernetx import HyperNetXWidget<br>
+                H = hnx.Hypergraph(data)  # 数据加载<br>
+                widget = HyperNetXWidget(H, layout='barycenter_spring')<br>
+                widget.show()             # Jupyter中显示交互面板
+            </div>
+            <p><strong>备选XGI或HGX</strong>：</p>
             <ul>
+                <li><strong>快速原型开发</strong>：XGI的NetworkX式API适合快速验证算法。</li>
+                <li><strong>复杂系统建模</strong>：HGX的生成模型（如优先连接模型）适合社会网络仿真。</li>
             </ul>
+            <p><strong>NetworkX的补充作用</strong>：通过超图转换（如星形扩展）复用传统图算法。</p>
+            <div class="code-block">
+                import networkx as nx<br>
+                star_graph = hnx.convert_to_star(H)  # 超图转普通图<br>
+                nx.draw(star_graph, with_labels=True)
+            </div>
+        </div>
+        <div class="slide">
+            <h2>未来研究方向</h2>
             <ul>
+                <li><strong>混合布局算法</strong>：结合力导向布局与层次布局，优化超边重叠问题（参考PAOHvis的并行聚合技术）。</li>
+                <li><strong>GPU加速渲染</strong>：利用CUDA加速大规模超图的可视化计算（如NVIDIA HGX架构的潜在适配）。</li>
+                <li><strong>中文社区建设</strong>：推动HyperNetX中文教程本地化，降低非英语用户门槛。</li>
             </ul>
         </div>
+        <div class="slide">
+            <h2>总结</h2>
+            <p>HyperNetX凭借其交互式组件和国家级实验室背书，成为Python中超图可视化的首选。XGI和HGX在特定场景（如高阶统计、动态模拟）中表现优异，而NetworkX可作为辅助工具。</p>
+            <p>随着动态超图需求的增长，未来库的优化需重点关注时间维度表达与计算性能提升。</p>
         </div>
+        <div class="slide">
+            <h2>iMoon Lab：超图计算研究前沿</h2>
+            <p><a href="https://moon-lab.tech/" target="_blank">Intelligent Media and Cognition Lab (iMoon Lab)</a></p>
+            <p>iMoon Lab主要研究人工智能、计算机视觉和数据挖掘，特别关注超图计算理论、方法和应用。</p>
+            <p><strong>研究方向</strong>：</p>
             <ul>
+                <li>超图计算理论与超图神经网络方法。</li>
+                <li>计算机视觉中的应用：2D/3D注册、3D场景建模、立体物体识别、基于事件数据的视觉数据增强。</li>
+                <li>医学超图计算：高阶脑网络分析、医学辅助诊断、病理图像检索与分析。</li>
             </ul>
         </div>
+        <div class="slide">
+            <h2>基于Streamlit的数据交互逻辑设计</h2>
+            <div class="interactive-element">
+                <h3>Streamlit简介</h3>
+                <p>Streamlit是一个用于创建Web应用的Python库，可以帮助我们快速构建交互式的数据应用。</p>
+                <p>特点：</p>
+                <ul>
+                    <li>简单易用</li>
+                    <li>支持实时交互</li>
+                    <li>自动刷新</li>
+                    <li>支持���种数据格式</li>
+                </ul>
+            </div>
+            <div class="interactive-element">
+                <h3>数据交互逻辑</h3>
+                <p>通过侧边栏控件（如滑动条、选择框）实现参数调整。</p>
+                <p>动态更新可视化结果，支持用户交互（如点击、选择、拖动）。</p>
+                <p>支持数据筛选、排序、聚合等操作。</p>
+            </div>
         </div>
+        <div class="slide">
+            <h2>Streamlit代码示例</h2>
+            <div class="code-block">
+                import streamlit as st<br>
+                import pandas as pd<br>
+                import numpy as np<br>
+                import plotly.express as px<br>
+                import hypernetx as hnx<br>
+                <br>
+                def main():<br>
+                &nbsp;&nbsp;st.title("超图可视化分析")<br>
+                &nbsp;&nbsp;<br>
+                &nbsp;&nbsp;# 数据加载<br>
+                &nbsp;&nbsp;data = load_data()<br>
+                &nbsp;&nbsp;<br>
+                &nbsp;&nbsp;# 侧边栏控件<br>
+                &nbsp;&nbsp;with st.sidebar:<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;st.header("控制面板")<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;num_samples = st.slider("选择采样数量", 1, 100, 10)<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;display_option = st.selectbox("选择显示选项", ["Top K Clusters", "Clusters Up To Probability P"])<br>
+                &nbsp;&nbsp;<br>
+                &nbsp;&nbsp;# 数据处理<br>
+                &nbsp;&nbsp;sampled_data = process_data(data, num_samples)<br>
+                &nbsp;&nbsp;hyperedges = build_hyperedges(sampled_data)<br>
+                &nbsp;&nbsp;hypergraph = hnx.Hypergraph(hyperedges)<br>
+                &nbsp;&nbsp;<br>
+                &nbsp;&nbsp;# 可视化<br>
+                &nbsp;&nbsp;if st.checkbox("显示超图", True):<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;visualize_hypergraph(hypergraph)<br>
+                &nbsp;&nbsp;if st.checkbox("显示统计信息", False):<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;visualize_statistics(sampled_data)<br>
+                <br>
+                if __name__ == "__main__":<br>
+                &nbsp;&nbsp;main()
+            </div>
+        </div>
+        <div class="slide">
+            <h2>Streamlit交互功能</h2>
+            <div class="interactive-element">
+                <h3>交互控件</h3>
+                <p>滑动条：调整参数（如采样数量、K值等）。</p>
+                <p>选择框：选择显示选项（如Top K Clusters、Clusters Up To Probability P）。</p>
+                <p>复选框：控制可视化内容的显示与隐藏。</p>
+            </div>
+            <div class="interactive-element">
+                <h3>动态更新</h3>
+                <p>用户调整参数后，页面自动刷新并更新可视化结果。</p>
+                <p>支持实时交互，如点击节点查看详情、拖动节点调整布局。</p>
+            </div>
+            <div class="interactive-element">
+                <h3>数据导出</h3>
+                <p>支持将可视化结果导出为图片或PDF。</p>
+                <p>支持将处理后的数据导出为CSV或JSON格式。</p>
+            </div>
+        </div>
+        <div class="slide">
+            <h2>Streamlit与超图可视化结合</h2>
+            <div class="interactive-element">
+                <h3>优势</h3>
+                <p>快速构建交互式Web应用，无需编写前端代码。</p>
+                <p>支持多种可视化库（如Plotly、Matplotlib、HyperNetX）。</p>
+                <p>易于集成机器学习模型和数据分析工具。</p>
+            </div>
+            <div class="interactive-element">
+                <h3>应用场景</h3>
+                <p>科研数据分析：可视化超图结构，探索高阶交互关系。</p>
+                <p>教育与教学：创建交互式教学工具，帮助学生理解复杂概念。</p>
+                <p>商业智能：构建交互式仪表板，支持决策制定。</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // 交互功能示���
+        document.addEventListener('DOMContentLoaded', function() {
+            // 标签切换功能
+            const tabs = document.querySelectorAll('.tab');
+            tabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    // 移除所有标签的active类
+                    tabs.forEach(t => t.classList.remove('active'));
+                    // 为当前点击的标签添加active类
+                    this.classList.add('active');
+                    // 隐藏所有内容
+                    const contents = document.querySelectorAll('.tab-content');
+                    contents.forEach(content => content.classList.remove('active'));
+                    // 显示当前标签对应的内容
+                    const targetContent = document.querySelector(this.getAttribute('data-target'));
+                    targetContent.classList.add('active');
+                });
+            });
+        });
     </script>
 </body>
 </html>