Update app.py

app.py

@@ -1,4 +1,8 @@
 import gradio as gr
+import dash
+from dash import html, dcc
+import dash_cytoscape as cyto
+from dash.dependencies import Input, Output, State
 import json
 import os
 from dotenv import load_dotenv
@@ -7,6 +11,8 @@ from typing import Dict, Any, Optional, Union
 from datetime import datetime
 import networkx as nx
 import plotly.graph_objects as go
+import threading
+from flask import Flask
 
 # Load environment variables
 load_dotenv()
@@ -21,79 +27,83 @@ except Exception as e:
   print(f"Error initializing ExplorationPathGenerator: {e}")
   raise
 
-def create_interactive_graph(nodes):
-  """Create an interactive graph visualization using plotly"""
-  G = nx.DiGraph()
-  
-  # Add nodes to the graph
-  node_x = []
-  node_y = []
-  node_text = []
-  node_color = []
-  node_size = []
-  
-  # Create layout
-  pos = nx.spring_layout(G, k=1, iterations=50)
-  
-  for node in nodes:
-      G.add_node(node['id'])
-      x, y = pos[node['id']]
-      node_x.append(x)
-      node_y.append(y)
-      node_text.append(f"Title: {node['title']}<br>Description: {node['description']}")
-      node_color.append(['#FF9999', '#99FF99', '#9999FF', '#FFFF99'][node['depth'] % 4])
-      node_size.append(30)  # Base size for all nodes
-  
-  edge_x = []
-  edge_y = []
-  edge_text = []
-  
-  # Add edges
-  for node in nodes:
-      for conn in node['connections']:
-          G.add_edge(node['id'], conn['target_id'])
-          x0, y0 = pos[node['id']]
-          x1, y1 = pos[conn['target_id']]
-          edge_x.extend([x0, x1, None])
-          edge_y.extend([y0, y1, None])
-          edge_text.append(f"Score: {conn.get('relevance_score', 'N/A')}")
-  
-  # Create the interactive plot
-  fig = go.Figure()
-  
-  # Add edges
-  fig.add_trace(go.Scatter(
-      x=edge_x, y=edge_y,
-      line=dict(width=0.5, color='#888'),
-      hoverinfo='none',
-      mode='lines'
-  ))
+class GraphVisualizer:
+  def __init__(self, port=8050):
+      self.app = dash.Dash(__name__)
+      self.port = port
+      cyto.load_extra_layouts()
+      
+      self.app.layout = html.Div([
+          cyto.Cytoscape(
+              id='exploration-graph',
+              layout={'name': 'cose'},
+              style={'width': '100%', 'height': '600px'},
+              elements=[],
+              stylesheet=[
+                  {
+                      'selector': 'node',
+                      'style': {
+                          'label': 'data(label)',
+                          'background-color': '#6FB1FC',
+                          'content': 'data(label)',
+                          'text-wrap': 'wrap',
+                          'text-max-width': '100px'
+                      }
+                  },
+                  {
+                      'selector': 'edge',
+                      'style': {
+                          'curve-style': 'bezier',
+                          'target-arrow-shape': 'triangle',
+                          'line-color': '#ccc',
+                          'target-arrow-color': '#ccc',
+                          'label': 'data(label)',
+                          'font-size': '10px'
+                      }
+                  }
+              ]
+          ),
+          html.Div(id='node-details', style={'padding': '20px'})
+      ])
+      
+      self._setup_callbacks()
   
-  # Add nodes
-  fig.add_trace(go.Scatter(
-      x=node_x, y=node_y,
-      mode='markers+text',
-      hoverinfo='text',
-      text=[node['title'] for node in nodes],
-      hovertext=node_text,
-      marker=dict(
-          showscale=False,
-          color=node_color,
-          size=node_size,
-          line_width=2
+  def _setup_callbacks(self):
+      @self.app.callback(
+          Output('node-details', 'children'),
+          [Input('exploration-graph', 'tapNodeData')]
       )
-  ))
-  
-  fig.update_layout(
-      showlegend=False,
-      hovermode='closest',
-      margin=dict(b=0, l=0, r=0, t=0),
-      xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-      yaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-      plot_bgcolor='white'
-  )
+      def display_node_details(node_data):
+          if not node_data:
+              return "Click a node to see details"
+          return html.Div([
+              html.H4(node_data['label']),
+              html.P(node_data.get('description', 'No description available'))
+          ])
   
-  return fig
+  def update_graph(self, nodes):
+      elements = []
+      for node in nodes:
+          elements.append({
+              'data': {
+                  'id': node['id'],
+                  'label': node['title'],
+                  'description': node['description'],
+                  'depth': node['depth']
+              }
+          })
+          for conn in node['connections']:
+              elements.append({
+                  'data': {
+                      'source': node['id'],
+                      'target': conn['target_id'],
+                      'label': f"Score: {conn.get('relevance_score', 'N/A')}"
+                  }
+              })
+      return elements
+
+  def run(self):
+      self.app.run_server(port=self.port, debug=False)
 
 def summarize_node(node_data: Dict[str, Any]) -> str:
   """Generate a summary for a selected node"""
@@ -112,22 +122,17 @@ Connections:
   
   return summary
 
-def handle_node_click(node_id: str, current_result: Dict[str, Any]) -> tuple[go.Figure, str]:
+def handle_node_click(node_id: str, current_result: Dict[str, Any]) -> tuple[str, str]:
   """Handle node click event and update visualization"""
   nodes = current_result.get('nodes', [])
   selected_node = next((node for node in nodes if node['id'] == node_id), None)
   
   if selected_node:
-      # Update graph to highlight selected node and its connections
-      fig = create_interactive_graph(nodes)  # Create new graph
       summary = summarize_node(selected_node)
   else:
-      fig = create_interactive_graph(nodes)  # Create default graph
       summary = "No node selected"
   
-  return fig, summary
-
-# [Previous helper functions remain the same: format_output, parse_json_input, validate_parameters]
+  return current_result, summary
 
 def explore(
   query: str,
@@ -135,11 +140,16 @@ def explore(
   parameters: str = "{}",
   depth: int = 5,
   domain: str = ""
-) -> tuple[str, go.Figure, str]:
+) -> tuple[str, str]:
   """Generate exploration path and visualization"""
   try:
-      # [Previous validation and processing code remains the same]
-      
+      # Parse inputs
+      try:
+          selected_path = json.loads(path_history)
+          exploration_parameters = json.loads(parameters)
+      except json.JSONDecodeError as e:
+          raise ValueError(f"Invalid JSON input: {str(e)}")
+
       result = generator.generate_exploration_path(
           query=query,
           selected_path=selected_path,
@@ -149,13 +159,10 @@ def explore(
       if not isinstance(result, dict):
           raise ValueError("Invalid response format from generator")
       
-      # Create interactive graph
-      graph = create_interactive_graph(result.get('nodes', []))
-      
       # Initial summary (no node selected)
       summary = "Click on a node to see details"
       
-      return format_output(result), graph, summary
+      return json.dumps(result), summary
 
   except Exception as e:
       error_response = {
@@ -169,10 +176,14 @@ def explore(
           }
       }
       print(f"Error in explore function: {e}")
-      return format_output(error_response), None, "Error occurred"
+      return json.dumps(error_response), "Error occurred"
 
 def create_interface() -> gr.Blocks:
   """Create and configure the Gradio interface"""
+  visualizer = GraphVisualizer()
+  # Start Dash server in a separate thread
+  dash_thread = threading.Thread(target=visualizer.run, daemon=True)
+  dash_thread.start()
   
   with gr.Blocks(title="Art History Exploration Path Generator") as interface:
       gr.Markdown("# Art History Exploration Path Generator")
@@ -214,7 +225,9 @@ def create_interface() -> gr.Blocks:
               with gr.Accordion("Exploration Result", open=False):
                   text_output = gr.JSON(label="Raw Result")
               
-              graph_output = gr.Plot(label="Interactive Exploration Graph")
+              # Embed Dash visualization
+              gr.HTML(f'<iframe src="http://localhost:{visualizer.port}" style="width:100%; height:700px; border:none;"></iframe>')
+              
               node_summary = gr.Textbox(
                   label="Node Details",
                   lines=5,
@@ -224,17 +237,19 @@ def create_interface() -> gr.Blocks:
       # Store current result for node clicking
       current_result = gr.State({})
 
+      def explore_and_visualize(*args):
+          result, summary = explore(*args)
+          if isinstance(result, str):
+              result_dict = json.loads(result)
+          else:
+              result_dict = result
+          visualizer.update_graph(result_dict.get('nodes', []))
+          return result, summary
+
       generate_btn.click(
-          fn=explore,
+          fn=explore_and_visualize,
           inputs=[query_input, path_history, parameters, depth, domain],
-          outputs=[text_output, graph_output, node_summary]
-      )
-
-      # Handle node clicks
-      graph_output.click(
-          fn=handle_node_click,
-          inputs=["node_id", current_result],
-          outputs=[graph_output, node_summary]
+          outputs=[text_output, node_summary]
       )
 
       # Examples