Add application file

app.py

@@ -0,0 +1,583 @@
+#!/usr/bin/env python3
+import os
+import json
+import tempfile
+import networkx as nx
+import seaborn as sns
+import pandas as pd
+import random
+import colorsys
+from community import community_louvain
+from pyvis.network import Network
+import gradio as gr
+
+def parse_graph_data(file):
+    try:
+        file_extension = os.path.splitext(file.name)[1].lower()
+        
+        if file_extension == '.json':
+            with open(file.name, 'r', encoding='utf-8') as f:
+                data = json.load(f)
+                
+            if isinstance(data, dict) and 'nodes' in data and 'edges' in data:
+                return data['nodes'], data['edges'], None
+            else:
+                return None, None, "Invalid JSON format. Expected {'nodes': [...], 'edges': [...]}"
+                
+        elif file_extension == '.txt':
+            with open(file.name, 'r', encoding='utf-8') as f:
+                content = f.read()
+                
+            # Try to extract JSON from the text content
+            try:
+                import re
+                json_match = re.search(r'```json\s*(.*?)\s*```', content, re.DOTALL)
+                if json_match:
+                    content = json_match.group(1)
+                    
+                content = content.strip()
+                if not content.startswith('{'):
+                    content = '{' + content
+                if not content.endswith('}'):
+                    content = content + '}'
+                    
+                data = json.loads(content)
+                if 'nodes' in data and 'edges' in data:
+                    return data['nodes'], data['edges'], None
+                else:
+                    return None, None, "Text file does not contain valid graph data structure."
+            except json.JSONDecodeError as e:
+                return None, None, f"Failed to parse JSON from text file: {str(e)}"
+        else:
+            return None, None, "Unsupported file format. Please upload .json or .txt files."
+    except Exception as e:
+        return None, None, f"Error processing file: {str(e)}"
+
+def create_graph_and_detect_communities(nodes, edges):
+    """
+    Builds a NetworkX graph from the given nodes/edges,
+    then computes a community partition. We store the
+    community in a separate attribute 'community' so
+    we don't overwrite the original 'group'.
+    """
+    G = nx.Graph()
+    
+    for node in nodes:
+        label = node.get('label', f"Node_{node['id']}")
+        group = node.get('group', 'Default')
+        G.add_node(node["id"], label=label, group=group)
+        
+    for edge in edges:
+        if 'from' in edge and 'to' in edge:
+            G.add_edge(edge["from"], edge["to"], label=edge.get('label', ''))
+            
+    # Detect communities (optional)
+    partition = community_louvain.best_partition(G)
+    for node_id, comm_id in partition.items():
+        # Store the community ID separately
+        G.nodes[node_id]['community'] = comm_id
+    
+    return G
+
+def get_distinct_colors(n, saturation=0.7, value=0.9):
+    """Generate n visually distinct colors with variation in hue, saturation, and value."""
+    colors = []
+    for i in range(n):
+        hue = (i * 0.618033988749895) % 1
+        sat = saturation - 0.1 * (i % 3)
+        val = value - 0.05 * ((i + 1) % 4)
+        r, g, b = colorsys.hsv_to_rgb(hue, sat, val)
+        color = f"#{int(255*r):02x}{int(255*g):02x}{int(255*b):02x}"
+        colors.append(color)
+    return colors
+
+def generate_edge_colors(edges):
+    unique_labels = list(set(edge.get('label', '') for edge in edges))
+    palette = get_distinct_colors(max(len(unique_labels), 1))
+    return {label: color for label, color in zip(unique_labels, palette)}
+
+def generate_node_colors(nodes):
+    """
+    Generate distinct colors for each unique 'group' in the original
+    node data. This ensures that, for example, 'Entity', 'Event', and
+    'Concept' each get their own color.
+    """
+    unique_groups = list(set(node.get('group', 'Default') for node in nodes))
+    
+    # If there's only 1 group, you can keep them all the same color or create multiple shades
+    if len(unique_groups) == 1:
+        palette = get_distinct_colors(min(len(nodes), 10))
+    else:
+        palette = get_distinct_colors(len(unique_groups))
+    
+    return {group: color for group, color in zip(unique_groups, palette)}
+
+def visualize_graph(G, edges, label_color_map, group_color_map, output_file, title="Knowledge Graph"):
+    net = Network(
+        notebook=True,
+        cdn_resources="in_line",
+        height="1350px",
+        width="100%",
+        select_menu=True,
+    )
+
+    # PyVis config for a white background
+    net.set_options("""
+    {
+    "physics": {
+        "forceAtlas2Based": {
+        "gravitationalConstant": -600,
+        "centralGravity": 0.015,
+        "springLength": 300,
+        "springConstant": 0.08,
+        "damping": 0.9,
+        "avoidOverlap": 1.5
+        },
+        "solver": "forceAtlas2Based",
+        "stabilization": {
+        "enabled": true,
+        "iterations": 1000,
+        "updateInterval": 25
+        }
+    },
+    "nodes": {
+        "font": {
+        "size": 16,
+        "face": "Tahoma"
+        },
+        "shadow": {
+        "enabled": true
+        }
+    },
+    "edges": {
+        "smooth": {
+        "type": "continuous",
+        "forceDirection": "none"
+        },
+        "color": {
+        "inherit": false
+        },
+        "shadow": {
+        "enabled": true
+        },
+        "font": {
+        "size": 12,
+        "face": "Tahoma"
+        }
+    },
+    "interaction": {
+        "hover": true,
+        "navigationButtons": true,
+        "keyboard": {
+        "enabled": true
+        },
+        "tooltipDelay": 200
+    },
+    "background": {
+        "color": "#ffffff"
+    }
+    }
+    """)
+
+    # Add nodes
+    for node_id, node_data in G.nodes(data=True):
+        label = node_data.get('label', f"Node_{node_id}")
+        group = node_data.get('group', 'Default')
+        color = group_color_map.get(group, '#CCCCCC')
+        size = max(20, min(50, G.degree[node_id] * 2))
+        
+        net.add_node(
+            node_id,
+            label=label,
+            title=label,
+            color=color,
+            size=size
+        )
+
+    # Add edges
+    for edge in edges:
+        if 'from' in edge and 'to' in edge:
+            edge_label = edge.get('label', '')
+            edge_color = label_color_map.get(edge_label, '#888888')
+            
+            net.add_edge(
+                edge['from'],
+                edge['to'],
+                label=edge_label,
+                title=edge_label,
+                color=edge_color,
+                arrows="to"
+            )
+
+    net.show(output_file)
+
+    # Minimal CSS/JS injection for adaptive theme (no doc panel, no toggle)
+    theme_css = """
+    <style>
+    :root {
+        --bg-color: #FFFFFF;
+        --text-color: #000000;
+        --panel-bg: #F5F5F5;
+        --panel-border: #CCCCCC;
+        --node-border: #333333;
+        --edge-color: #666666;
+        --highlight-color: #3498db;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --bg-color: #1E1E1E;
+            --text-color: #FFFFFF;
+            --panel-bg: #2D2D2D;
+            --panel-border: #444444;
+            --node-border: #888888;
+            --edge-color: #AAAAAA;
+            --highlight-color: #3498db;
+        }
+        
+        body, #mynetwork {
+            background-color: #FFFFFF !important;
+            color: #000000 !important;
+        }
+        
+        .vis-label {
+            color: var(--text-color) !important;
+        }
+        
+        .vis-tooltip, .vis-network-tooltip {
+            background-color: var(--panel-bg) !important;
+            color: var(--text-color) !important;
+            border-color: var(--panel-border) !important;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        }
+        
+        .vis-button {
+            background-color: var(--panel-bg) !important;
+            color: var(--text-color) !important;
+            border-color: var(--panel-border) !important;
+        }
+        
+        .vis-navigation {
+            background-color: var(--panel-bg) !important;
+            border-color: var(--panel-border) !important;
+        }
+    }
+    
+    @media (prefers-color-scheme: light) {
+        body, #mynetwork {
+            background-color: var(--bg-color) !important;
+            color: var(--text-color) !important;
+        }
+        
+        .vis-label {
+            color: var(--text-color) !important;
+        }
+        
+        .vis-tooltip, .vis-network-tooltip {
+            background-color: var(--panel-bg) !important;
+            color: var(--text-color) !important;
+            border-color: var(--panel-border) !important;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+    }
+    
+    body {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        margin: 0;
+        padding: 0;
+    }
+    
+    #mynetwork {
+        width: 100%;
+        height: 80vh;
+        border: 1px solid #cccccc;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    
+    #mynetwork:hover {
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    }
+    
+    .vis-tooltip, .vis-network-tooltip {
+        border-radius: 4px;
+        padding: 8px 12px;
+        font-size: 14px;
+        max-width: 250px;
+        z-index: 1000;
+    }
+    
+    .vis-button {
+        transition: background-color 0.2s ease;
+    }
+    
+    .vis-button:hover {
+        background-color: var(--highlight-color) !important;
+        color: white !important;
+    }
+    </style>
+    
+    <script>
+    // Minimal script to set default theme
+    document.addEventListener("DOMContentLoaded", function() {
+        document.documentElement.setAttribute(
+            'data-theme', 
+            window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        );
+    });
+    </script>
+    """
+
+    with open(output_file, "r", encoding="utf-8") as f:
+        html_content = f.read()
+
+    # Inject the minimal CSS/JS (no doc panel or toggles)
+    if "<head>" in html_content:
+        html_content = html_content.replace("<head>", "<head>" + theme_css)
+    else:
+        html_content = theme_css + html_content
+
+    # Set the HTML title
+    if "<title>" in html_content:
+        html_content = html_content.replace("<title>", f"<title>{title} - Interactive Visualization")
+
+    with open(output_file, "w", encoding="utf-8") as f:
+        f.write(html_content)
+
+    return output_file
+
+def get_graph_html(nodes, edges, title="Knowledge Graph"):
+    """Generate HTML visualization of the graph and return it as a string."""
+    if not nodes or not edges:
+        return "No valid graph data available."
+    
+    fd, temp_path = tempfile.mkstemp(suffix='.html')
+    os.close(fd)
+    
+    try:
+        # Build the graph
+        G = create_graph_and_detect_communities(nodes, edges)
+        
+        # Generate color maps
+        label_color_map = generate_edge_colors(edges)
+        group_color_map = generate_node_colors(nodes)
+        
+        # Visualize the graph
+        visualize_graph(G, edges, label_color_map, group_color_map, temp_path, title)
+        
+        with open(temp_path, 'r', encoding='utf-8') as f:
+            html_content = f.read()
+        
+        return html_content
+    finally:
+        try:
+            os.remove(temp_path)
+        except:
+            pass
+
+def process_graph_file(file):
+    """Process uploaded graph file and generate visualization."""
+    if not file:
+        return "No file uploaded. Please upload a JSON or text file.", None, None
+    
+    # Parse the graph data
+    nodes, edges, error = parse_graph_data(file)
+    
+    if error:
+        return error, None, None
+    
+    if not nodes or not edges:
+        return "File does not contain valid graph data. Ensure it has 'nodes' and 'edges'.", None, None
+    
+    num_nodes = len(nodes)
+    num_edges = len(edges)
+    
+    # Generate graph visualization HTML content
+    html_content = get_graph_html(nodes, edges, title="Knowledge Graph Visualization")
+    
+    graph_data = {"html": html_content, "nodes": nodes, "edges": edges}
+    summary = f"Graph loaded successfully with {num_nodes} nodes and {num_edges} edges."
+    return summary, html_content, graph_data
+
+def download_graph_html(graph_data):
+    """Write the stored HTML visualization to a file for download."""
+    if not graph_data or "html" not in graph_data:
+        return None
+    html_content = graph_data["html"]
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".html", mode="w", encoding="utf-8") as temp_file:
+        temp_file.write(html_content)
+        temp_file_path = temp_file.name
+    return temp_file_path
+
+def display_example():
+    """Display an example graph format."""
+    example = {
+        "nodes": [
+            {"id": "1", "label": "Concept_1", "group": "Concept"},
+            {"id": "2", "label": "Entity_1", "group": "Entity"},
+            {"id": "3", "label": "Event_1", "group": "Event"}
+        ],
+        "edges": [
+            {"from": "1", "to": "2", "label": "relates_to"},
+            {"from": "2", "to": "3", "label": "participates_in"}
+        ]
+    }
+    return "```json\n" + json.dumps(example, indent=2) + "\n```"
+
+def create_app():
+    """Create and configure the Gradio app."""
+    with gr.Blocks(title="Knowledge Graph Visualizer", theme=gr.themes.Soft()) as app:
+        gr.Markdown(
+            """
+            <div style="text-align: center; margin-bottom: 20px;">
+                <h1 style="color: #3498db; margin-bottom: 5px;">Knowledge Graph Visualizer</h1>
+                <p style="font-size: 16px; opacity: 0.8;">Visualize and explore your graph data interactively</p>
+            </div>
+            """
+        )
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                with gr.Accordion("📋 How to Use", open=False):
+                    gr.Markdown(
+                        """
+                        ### Quick Start Guide
+                        
+                        1. **Prepare your data**: Create a JSON file with 'nodes' and 'edges'
+                        2. **Upload your file**: Use the upload button to select your JSON or text file
+                        3. **Visualize**: Click the "Visualize Graph" button
+                        4. **Explore**: 
+                           - Drag to move around the graph
+                           - Scroll to zoom in/out
+                           - Click on nodes to highlight connections
+                           - Hover over nodes for details
+                        5. **Download**: Save the visualization as an HTML file
+                        """
+                    )
+                
+                gr.Markdown("### 1. Upload Your Graph Data")
+                file_input = gr.File(
+                    label="Select a JSON or text file with nodes and edges",
+                    file_count="single",
+                    type="file"
+                )
+                
+                process_btn = gr.Button("Visualize Graph", variant="primary", size="lg")
+                status_output = gr.Textbox(label="Status", interactive=False)
+                
+                with gr.Accordion("📄 Example Data Format", open=False):
+                    gr.Markdown(
+                        "Your file should contain a JSON object with 'nodes' and 'edges' arrays:"
+                    )
+                    example_format = gr.Markdown(display_example())
+                
+                with gr.Accordion("📚 Documentation", open=False):
+                    gr.Markdown(
+                        """
+                        ### Comprehensive Documentation
+                        
+                        For detailed information about all features and capabilities, please visit our documentation page:
+                        
+                        [View Complete Documentation](https://github.com/YOUR_USERNAME/knowledge-graph-visualizer/wiki)
+                        
+                        ### Node Properties
+                        - **id**: Unique identifier (required)
+                        - **label**: Display name (optional)
+                        - **group**: Category grouping for coloring (optional)
+                        
+                        ### Edge Properties
+                        - **from**: Source node id (required)
+                        - **to**: Target node id (required)
+                        - **label**: Relationship type (optional)
+                        
+                        ### Customization
+                        The visualization adapts to your system's theme (light/dark) and is fully responsive.
+                        """
+                    )
+                
+                gr.Markdown("### 3. Save Your Visualization")
+                download_btn = gr.Button("Download Graph HTML", variant="secondary")
+                download_file = gr.File(label="Download File")
+        
+        with gr.Row():
+            with gr.Column(scale=2):
+                gr.Markdown("### 2. Interactive Graph Visualization")
+                graph_output = gr.HTML(
+                    label="Graph Visualization",
+                    elem_id="graph-vis"
+                )
+        
+        graph_data_state = gr.State(None)
+
+        gr.HTML(
+            """
+            <style>
+            /* Responsive container for graph visualization */
+            #graph-vis {
+                width: 100%;
+                height: calc(100vh - 300px);
+                min-height: 500px;
+                overflow: auto;
+                border-radius: 8px;
+                border: 1px solid #e0e0e0;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                transition: all 0.3s ease;
+            }
+            
+            #graph-vis:hover {
+                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            }
+            
+            @media (prefers-color-scheme: dark) {
+                .gradio-container {
+                    background-color: #1e1e2e !important;
+                    color: #cdd6f4 !important;
+                }
+                
+                .gr-button-primary {
+                    background-color: #74c7ec !important;
+                    color: #1e1e2e !important;
+                }
+                
+                .gr-button-secondary {
+                    background-color: #313244 !important;
+                    color: #cdd6f4 !important;
+                    border: 1px solid #45475a !important;
+                }
+                
+                .gr-input, .gr-text-input {
+                    background-color: #313244 !important;
+                    color: #cdd6f4 !important;
+                    border: 1px solid #45475a !important;
+                }
+                
+                .gr-panel {
+                    background-color: #313244 !important;
+                    border: 1px solid #45475a !important;
+                }
+                .gr-button:hover {
+                    opacity: 0.9;
+                }
+            }
+            </style>
+            """
+        )
+
+        # Button actions
+        process_btn.click(
+            process_graph_file,
+            inputs=file_input,
+            outputs=[status_output, graph_output, graph_data_state]
+        )
+
+        download_btn.click(
+            download_graph_html,
+            inputs=graph_data_state,
+            outputs=download_file
+        )
+
+    return app
+
+if __name__ == "__main__":
+    app = create_app()
+    app.launch()

requirements.txt

@@ -0,0 +1,8 @@
+pandas
+seaborn
+networkx
+python-louvain
+pyvis
+gradio
+community
+colorsys