Update app.py

app.py

@@ -1,24 +1,17 @@
 import gradio as gr
 import rdflib
 import requests
-import matplotlib.pyplot as plt
 import networkx as nx
-from io import BytesIO
-import base64
+import plotly.graph_objs as go
+from pyvis.network import Network
 
-# Função para carregar e extrair os nomes do arquivo JSON-LD a partir de uma URL
+# Function to load and extract names from the JSON-LD file
 def load_names_from_url(jsonld_url):
     response = requests.get(jsonld_url)
     data = response.json()
-    
-    names = []
-    for item in data:
-        if 'name' in item:
-            names.append(item['name'])
-    
-    return names
+    return [item['name'] for item in data if 'name' in item]
 
-# Carregar nomes do arquivo JSON-LD
+# Load names from the JSON-LD file
 jsonld_url = 'https://huggingface.co/spaces/histlearn/ShowGraph/raw/main/datafile.jsonld'
 names = load_names_from_url(jsonld_url)
 
@@ -26,78 +19,85 @@ def build_graph_from_jsonld(jsonld_url, selected_name):
     response = requests.get(jsonld_url)
     data = response.json()
     
-    # Filtrar o local selecionado
     selected_data = next((item for item in data if item['name'] == selected_name), None)
     
     if not selected_data:
         return "Local não encontrado."
     
-    G = nx.DiGraph()
+    net = Network(height="600px", width="100%", bgcolor="#222222", font_color="white")
     
-    # Adicionar nó do Place
+    # Add Place node
     place_id = selected_data['@id']
-    place_label = f"schema:Place\nName: {selected_data['name']}\nDescription: {selected_data['description'][:30]}..."
-    G.add_node(place_id, label=place_label)
+    place_label = f"Name: {selected_data['name']}\nDescription: {selected_data['description'][:100]}..."
+    net.add_node(place_id, label=selected_data['name'], title=place_label, color="#00ffff")
     
-    # Adicionar nó de GeoCoordinates
+    # Add GeoCoordinates node
     geo_data = selected_data['geo']
     geo_id = geo_data['@id']
-    geo_label = f"geo:SpatialThing\nLat: {geo_data['lat']}\nLong: {geo_data['long']}\nFeatureCode: {geo_data['gn:featureCode']}\nFeatureCodeName: {geo_data['gn:featureCodeName']}\nName: {geo_data['gn:name']}"
-    G.add_node(geo_id, label=geo_label)
-    G.add_edge(place_id, geo_id, label="schema:geo")
+    geo_label = f"Lat: {geo_data['lat']}\nLong: {geo_data['long']}\nFeatureCode: {geo_data['gn:featureCode']}\nName: {geo_data['gn:name']}"
+    net.add_node(geo_id, label="Geo", title=geo_label, color="#ff9999")
+    net.add_edge(place_id, geo_id, title="schema:geo")
     
-    # Adicionar nós de CreativeWork
+    # Add CreativeWork nodes
     for work in selected_data.get('subjectOf', []):
         work_id = work['@id']
-        work_label = f"schema:CreativeWork\nHeadline: {work['headline']}\nGenre: {work['genre']}\nDatePublished: {work['datePublished']}\nText: {work['text'][:30]}...\nLanguage: {work['inLanguage']}"
-        G.add_node(work_id, label=work_label)
-        G.add_edge(place_id, work_id, label="schema:subjectOf")
+        work_label = f"Headline: {work['headline']}\nGenre: {work['genre']}\nDatePublished: {work['datePublished']}\nText: {work['text'][:100]}..."
+        net.add_node(work_id, label=work['headline'], title=work_label, color="#99ff99")
+        net.add_edge(place_id, work_id, title="schema:subjectOf")
     
-    return G
-
-def run_query_and_visualize(selected_location, jsonld_url):
-    G = build_graph_from_jsonld(jsonld_url, selected_location)
+    net.toggle_physics(True)
+    net.show_buttons(filter_=['physics'])
+    return net
 
-    if isinstance(G, str):  # Caso de erro
-        return G
+def run_query_and_visualize(selected_location):
+    net = build_graph_from_jsonld(jsonld_url, selected_location)
     
-    # Define posições específicas para os nós importantes
-    pos = nx.spring_layout(G)
-    
-    # Desenha o gráfico usando NetworkX e Matplotlib
-    plt.figure(figsize=(15, 10))
-    nx.draw_networkx_nodes(G, pos, node_size=3000, node_color="skyblue", alpha=0.9)
-    nx.draw_networkx_edges(G, pos, width=2, alpha=0.5, edge_color='gray')
-    nx.draw_networkx_labels(G, pos, labels=nx.get_node_attributes(G, 'label'), font_size=9, font_color="black")
-    nx.draw_networkx_edge_labels(G, pos, edge_labels=nx.get_edge_attributes(G, 'label'), font_size=9, font_color="red")
-
-    plt.title("Resultado da Consulta", size=15)
-    plt.axis('off')
+    if isinstance(net, str):  # Error case
+        return net
     
-    # Salva o gráfico em um arquivo
-    buf = BytesIO()
-    plt.savefig(buf, format='png')
-    buf.seek(0)
-    img_str = base64.b64encode(buf.read()).decode()
-    graph_html = f'<img src="data:image/png;base64,{img_str}"/>'
+    # Save the graph as HTML
+    net.save_graph("temp_graph.html")
+    with open("temp_graph.html", "r", encoding="utf-8") as f:
+        graph_html = f.read()
     
-    plt.close()
-
-    print("Gráfico gerado com sucesso.")
     return graph_html
 
-with gr.Blocks() as demo:
-    gr.Markdown("# Visualização de Query SPARQL")
-
-    with gr.Column():
-        selected_location = gr.Dropdown(choices=names, label="Selecione o Local")
-        run_button = gr.Button("Visualizar Grafo")
-
-    graph_output = gr.HTML()
+css = """
+body {
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+h1 {
+    color: #333;
+    text-align: center;
+}
+.gr-form {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+"""
 
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("# Visualização de Grafos Literários")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            selected_location = gr.Dropdown(choices=names, label="Selecione o Local")
+            run_button = gr.Button("Visualizar Grafo", variant="primary")
+        
+        with gr.Column(scale=3):
+            graph_output = gr.HTML()
+    
     def on_run_button_click(selected_location):
-        return run_query_and_visualize(selected_location, jsonld_url)
+        return run_query_and_visualize(selected_location)
 
     run_button.click(fn=on_run_button_click, inputs=[selected_location], outputs=graph_output)
 
-demo.launch()
+demo.launch()