app.py

import networkx as nx
import gradio as gr
from IPython.core.display import HTML

def graph_viewer(graph_file):
    G = nx.read_graphml(graph_file)
    nodes = [{'id': n, 'label': G.nodes[n].get('label', n)} for n in G.nodes()]
    edges = [{'id': i, 'source': u, 'target': v, 'label': G.edges[u, v].get('label', '')} for i, (u, v) in enumerate(G.edges())]
    html_output = HTML("""
        <div id="graph" style="height: 500px;"></div>
        <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist/index.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/webgl-graph.min.js"></script>
        <script>
            var graph = new WebglGraph({
                container: "#graph",
                data: {
                    nodes: %s,
                    links: %s,
                },
                style: {
                    node: {
                        color: "white",
                        size: 10,
                        strokeWidth: 1,
                        strokeColor: "black",
                        labelSize: 12,
                        labelColor: "black",
                    },
                    link: {
                        color: "black",
                        width: 1,
                    },
                },
            });
            graph.update();
        </script>
    """ % (nodes, edges))
    return html_output

iface = gr.Interface(
    fn=graph_viewer,
    inputs=gr.inputs.File(label="GraphML file"),
    outputs=gr.outputs.HTML(label="Graph viewer"),
    title="Graph Viewer"
)
iface.launch()