fix: different state

app.py

@@ -4,6 +4,7 @@ import streamlit as st
 # 设置页面配置
 st.set_page_config(layout="wide")
 
+
 # 主应用
 def main():
     # st.sidebar.title("导航")
@@ -23,11 +24,11 @@ def main():
 
     page1 = st.Page("my_pages/page1.py", title="无监督聚类动态变化", icon="📊", default=True)
     page2 = st.Page("my_pages/page2.py", title="超图神经网络训练过程", icon="📈")
-    # page3 = st.Page("my_pages/page3.py", title="超图构建分析-cora", icon="📉")
+    page3 = st.Page("my_pages/page3.py", title="Presentation 演示", icon="📉")
     # page3 = st.Page("dev/test.py", title="第三个子应用", icon="📉")
 
     pg = st.navigation([page1, page2, 
-                        # page3
+                        page3
                         ])
     pg.run()
     # pass

my_pages/page2.py

@@ -35,13 +35,13 @@ def main():
     slider_max = 200
     if 'play_state' not in st.session_state:
         st.session_state.play_state = False
-    if 'iteration' not in st.session_state:
-        st.session_state.iteration = 10
+    if 'iteration_app2' not in st.session_state:
+        st.session_state.iteration_app2 = 10
 
     # 定义回调函数来切换播放状态
     def toggle_play():
-        if not st.session_state.play_state and st.session_state.iteration == slider_max:
-            st.session_state.iteration = 10  # 重置迭代次数
+        if not st.session_state.play_state and st.session_state.iteration_app2 == slider_max:
+            st.session_state.iteration_app2 = 10  # 重置迭代次数
         st.session_state.play_state = not st.session_state.play_state
 
     # 创建播放/暂停按钮
@@ -53,8 +53,8 @@ def main():
 
     # 显示迭代次数滑条
     iteration = st.slider("迭代步骤", min_value=10, max_value=slider_max, 
-                          value=st.session_state.iteration, step=10, 
-                          key="iteration_slider")
+                          value=st.session_state.iteration_app2, step=10, 
+                          key="iteration_app2_slider")
 
     # 从JSON文件加载数据
     # 假设JSON文件路径为"authors_papers.json"
@@ -85,7 +85,8 @@ def main():
 
         max_samples = len(st.session_state.hyper_edges)
         num_samples = st.slider("选择采样作者数量", min_value=1, 
-                                max_value=min(100, max_samples), value=min(10, max_samples), step=1)
+                                max_value=min(100, max_samples), 
+                                value=min(10, max_samples), step=1)
         
         # 采样部分作者
         sampled_authors = np.random.choice(st.session_state.hyper_edges, size=num_samples, replace=False)
@@ -128,9 +129,9 @@ def main():
     # 自动播放功能
     if st.session_state.play_state:
         with st.spinner("正在播放..."):
-            if st.session_state.iteration < slider_max:
-                st.session_state.iteration += 10
-                st.write(f"当前迭代次数: {st.session_state.iteration}")
+            if st.session_state.iteration_app2 < slider_max:
+                st.session_state.iteration_app2 += 10
+                st.write(f"当前迭代次数: {st.session_state.iteration_app2}")
                 time.sleep(1/speed)  # 根据速度调整等待时间
                 st.rerun()
             else:

my_pages/page3.py

@@ -1,95 +1,14 @@
 from typing import Dict, List
 import streamlit as st
-import pandas as pd
-import numpy as np
-import plotly.express as px
-import hypernetx as hnx
-import matplotlib.pyplot as plt
-from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
-from io import BytesIO
-import time
-import json
-from utils.data_processor import process_data, build_hyperedges
-from utils.visualizer import visualize_gmm, visualize_ratings
-from utils.streamlit_hypergraph import hypergraph_visualization_component
-
-def load_json_data(file_path: str) -> Dict[str, List[int]]:
-    """从JSON文件中加载数据"""
-    with open(file_path, 'r') as f:
-        data = json.load(f)
-    return data
+from pathlib import Path
+this_file = Path(__file__).resolve()
+parent_dir = this_file.parent.parent
 
 def main():
-    st.title("CORA Author-Paper 超图可视化分析")
-
-    # 自动播放状态
-    slider_max = 10
-    if 'play_state' not in st.session_state:
-        st.session_state.play_state = False
-    if 'iteration' not in st.session_state:
-        st.session_state.iteration = 0
-
-    # 定义回调函数来切换播放状态
-    def toggle_play():
-        if not st.session_state.play_state and st.session_state.iteration == slider_max:
-            st.session_state.iteration = 0  # 重置迭代次数
-        st.session_state.play_state = not st.session_state.play_state
-
-    # 创建播放/暂停按钮
-    if st.session_state.play_state:
-        button_label = "暂停"
-    else:
-        button_label = "开始拟合"
-    st.button(button_label, on_click=toggle_play, key="play_button")
-
-    # 显示迭代次数滑条
-    iteration = st.slider("迭代步骤", min_value=1, max_value=slider_max, 
-                          value=st.session_state.iteration, step=1, 
-                          key="iteration_slider")
-
-    # 从JSON文件加载数据
-    # 假设JSON文件路径为"authors_papers.json"
-    data = load_json_data("hyper_edges.json")
-    
-    # 使用 sidebar 控制参数
-    with st.sidebar:
-        st.header("控制面板")
-        speed = st.slider("拟合速度", min_value=0.1, max_value=2.0, value=1.0, step=0.1, key="speed_slider")
-        draw_width = st.slider("绘图宽度", min_value=3, max_value=20, value=6, step=1, key="draw_width")
-        draw_height = st.slider("绘图高度", min_value=3, max_value=20, value=6, step=1, key="draw_height")
-
-        max_samples = len(data)
-        num_samples = st.slider("选择采样作者数量", min_value=1, 
-                                max_value=min(100, max_samples), value=min(10, max_samples), step=1)
-        
-        # 采样部分作者
-        sampled_authors = np.random.choice(data, size=num_samples, replace=False)
-        sampled_data = {list(author_dict.keys())[0]: list(author_dict.values())[0] for author_dict in sampled_authors}
-        
-        # 构建超边
-        hyperedges = sampled_data
-        hypergraph = hnx.Hypergraph(hyperedges)
-
-    show_hypergraph = st.checkbox("显示超图", value=True, key="show_hyperedges")
-
-    if show_hypergraph:
-        hypergraph_visualization_component(hypergraph, draw_width, draw_height)
-    
-    # 显示采样作者的详细信息
-    st.header("采样作者详细信息")
-    authors_df = pd.DataFrame([(author, len(papers)) for author, papers in sampled_data.items()], 
-                             columns=["作者", "论文数量"])
-    st.dataframe(authors_df)
-
-    # 自动播放功能
-    if st.session_state.play_state:
-        with st.spinner("正在播放..."):
-            if st.session_state.iteration < slider_max:
-                st.session_state.iteration += 1
-                st.write(f"当前迭代次数: {st.session_state.iteration}")
-                time.sleep(1/speed)  # 根据速度调整等待时间
-                st.rerun()
-            else:
-                st.session_state.play_state = False
-
+    with open (parent_dir/"presentation.html", "r", encoding="utf-8") as f:
+        html = f.read()
+    st.html(html)
+    # url = "parent_dir/"presentation.html)"
+    # st.write("check out this [link](%s)" % url)
+    # st.markdown("check out this [link](%s)" % url)
 main()

presentation.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="en">
+<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;
+            margin-top: 0;
+        }
+        .slide p {
+            line-height: 1.6;
+            color: #34495e;
+        }
+        .code-block {
+            background-color: #f8f9fa;
+            padding: 10px;
+            border-radius: 5px;
+            font-family: monospace;
+            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;
+            margin: 15px 0;
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        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>