Update app.py

app.py

@@ -1,281 +1,300 @@
-import gradio as gr
-import json
 import os
-from dotenv import load_dotenv
-from art_explorer import ExplorationPathGenerator
-from typing import Dict, Any, Optional, Union
+import json
+import gradio as gr
 from datetime import datetime
-import networkx as nx
-import plotly.graph_objects as go
+from dotenv import load_dotenv
+from openai import OpenAI
 
 # Load environment variables
 load_dotenv()
 
-# Initialize the generator with error handling
-try:
-  api_key = os.getenv("GROQ_API_KEY")
-  if not api_key:
-      raise ValueError("GROQ_API_KEY not found in environment variables")
-  generator = ExplorationPathGenerator(api_key=api_key)
-except Exception as e:
-  print(f"Error initializing ExplorationPathGenerator: {e}")
-  raise
+class ExplorationPathGenerator:
+  def __init__(self, api_key: str):
+      self.client = OpenAI(
+          api_key=api_key,
+          base_url="https://api.groq.com/openai/v1"
+      )
+      
+  def generate_exploration_path(self, query: str, selected_path=None, exploration_parameters=None):
+      try:
+          if selected_path is None:
+              selected_path = []
+          if exploration_parameters is None:
+              exploration_parameters = {}
+          
+          system_prompt = """You are an expert art historian AI that helps users explore art history topics by generating 
+          interconnected exploration paths. Generate a JSON response with nodes representing concepts, artworks, or historical 
+          events, and connections showing their relationships."""
+          
+          user_prompt = f"""Query: {query}
+          Selected Path: {json.dumps(selected_path)}
+          Parameters: {json.dumps(exploration_parameters)}
+          
+          Generate an exploration path that includes:
+          - Multiple interconnected nodes
+          - Clear relationships between nodes
+          - Depth-based organization
+          - Relevant historical context
+          
+          Response must be valid JSON with this structure:
+          {{
+              "nodes": [
+                  {{
+                      "id": "unique_string",
+                      "title": "node_title",
+                      "description": "detailed_description",
+                      "depth": number,
+                      "connections": [
+                          {{
+                              "target_id": "connected_node_id",
+                              "relevance_score": float
+                          }}
+                      ]
+                  }}
+              ]
+          }}"""
+
+          response = self.client.chat.completions.create(
+              model="mixtral-8x7b-32768",
+              messages=[
+                  {"role": "system", "content": system_prompt},
+                  {"role": "user", "content": user_prompt}
+              ],
+              temperature=0.7,
+              max_tokens=4000
+          )
+
+          result = json.loads(response.choices[0].message.content)
+          return result
+
+      except Exception as e:
+          print(f"Error generating exploration path: {e}")
+          return {"error": str(e)}
 
 def create_interactive_graph(nodes):
   """Create an interactive graph visualization using D3.js"""
-  html_content = """
-  <div id="network-container" style="width: 100%; height: 600px; border: 1px solid #ddd; border-radius: 4px; background-color: #ffffff;"></div>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
-  <style>
-      .node { cursor: pointer; }
-      .node text {
-          font-size: 12px;
-          font-family: Arial, sans-serif;
-      }
-      .link {
-          stroke: #999;
-          stroke-opacity: 0.6;
-      }
-      .node-tooltip {
-          position: absolute;
-          padding: 8px;
-          background: rgba(0, 0, 0, 0.8);
-          color: #fff;
-          border-radius: 4px;
-          font-size: 12px;
-          pointer-events: none;
-      }
-  </style>
-  <script>
-      (function() {
-          // Convert Python data to JavaScript
-          const data = {
-              nodes: """ + json.dumps([{
-                  'id': node['id'],
-                  'title': node['title'],
-                  'description': node['description'],
-                  'depth': node['depth']
-              } for node in nodes]) + """,
-              links: """ + json.dumps([{
-                  'source': node['id'],
-                  'target': conn['target_id'],
-                  'value': conn.get('relevance_score', 1)
-              } for node in nodes for conn in node.get('connections', [])]) + """
-          };
+  # First, let's create the data structure D3 expects
+  nodes_data = [{
+      'id': node['id'],
+      'title': node['title'],
+      'description': node['description'],
+      'depth': node['depth']
+  } for node in nodes]
+  
+  links_data = [{
+      'source': node['id'],
+      'target': conn['target_id'],
+      'value': conn.get('relevance_score', 1)
+  } for node in nodes for conn in node.get('connections', [])]
 
-          // Clear any existing visualization
-          const container = document.getElementById('network-container');
-          container.innerHTML = '';
-          
+  html_content = f"""
+  <!DOCTYPE html>
+  <html>
+  <head>
+      <script src="https://d3js.org/d3.v7.min.js"></script>
+      <style>
+          #graph-container {{
+              width: 100%;
+              height: 600px;
+              border: 1px solid #ddd;
+              border-radius: 4px;
+          }}
+          .node {{
+              cursor: pointer;
+          }}
+          .node text {{
+              font-size: 12px;
+              font-family: Arial, sans-serif;
+          }}
+          .link {{
+              stroke: #999;
+              stroke-opacity: 0.6;
+          }}
+          .tooltip {{
+              position: absolute;
+              padding: 8px;
+              background: rgba(0, 0, 0, 0.8);
+              color: white;
+              border-radius: 4px;
+              font-size: 12px;
+              pointer-events: none;
+          }}
+      </style>
+  </head>
+  <body>
+      <div id="graph-container"></div>
+      <script>
+          // Data
+          const data = {{
+              nodes: {json.dumps(nodes_data)},
+              links: {json.dumps(links_data)}
+          }};
+
+          // Set up the SVG container
+          const container = document.getElementById('graph-container');
           const width = container.clientWidth;
           const height = container.clientHeight;
-          
-          const svg = d3.select("#network-container")
+
+          const svg = d3.select("#graph-container")
               .append("svg")
               .attr("width", width)
               .attr("height", height);
-          
-          // Add zoom behavior
+
+          // Add zoom capabilities
           const g = svg.append("g");
-          svg.call(d3.zoom()
+          const zoom = d3.zoom()
               .scaleExtent([0.1, 4])
-              .on("zoom", (event) => {
-                  g.attr("transform", event.transform);
-              }));
-          
-          // Create the force simulation
+              .on("zoom", (event) => g.attr("transform", event.transform));
+          svg.call(zoom);
+
+          // Create a force simulation
           const simulation = d3.forceSimulation(data.nodes)
-              .force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
-              .force("charge", d3.forceManyBody().strength(-300))
-              .force("center", d3.forceCenter(width / 2, height / 2))
-              .force("collision", d3.forceCollide().radius(50));
-          
+              .force("link", d3.forceLink(data.links).id(d => d.id))
+              .force("charge", d3.forceManyBody().strength(-400))
+              .force("center", d3.forceCenter(width / 2, height / 2));
+
           // Create the links
           const link = g.append("g")
               .selectAll("line")
               .data(data.links)
               .join("line")
-              .attr("class", "link")
-              .attr("stroke-width", d => Math.sqrt(d.value || 1));
-          
+              .attr("stroke", "#999")
+              .attr("stroke-width", 1);
+
           // Create the nodes
           const node = g.append("g")
-              .selectAll(".node")
+              .selectAll("g")
               .data(data.nodes)
               .join("g")
-              .attr("class", "node")
               .call(d3.drag()
                   .on("start", dragstarted)
                   .on("drag", dragged)
                   .on("end", dragended));
-          
+
           // Add circles to nodes
           node.append("circle")
               .attr("r", 20)
               .attr("fill", d => ['#FF9999', '#99FF99', '#9999FF'][d.depth % 3]);
-          
-          // Add text labels
+
+          // Add labels to nodes
           node.append("text")
-              .attr("dy", 30)
-              .attr("text-anchor", "middle")
               .text(d => d.title)
-              .call(wrap, 60);
-          
-          // Create tooltip
-          const tooltip = d3.select("body")
-              .append("div")
-              .attr("class", "node-tooltip")
+              .attr("x", 25)
+              .attr("y", 5);
+
+          // Add tooltip
+          const tooltip = d3.select("body").append("div")
+              .attr("class", "tooltip")
               .style("opacity", 0);
-          
+
           // Add hover effects
-          node.on("mouseover", function(event, d) {
+          node.on("mouseover", function(event, d) {{
               tooltip.transition()
                   .duration(200)
                   .style("opacity", .9);
-              tooltip.html(`Title: ${d.title}<br/>Description: ${d.description}`)
+              tooltip.html(`<strong>${{d.title}}</strong><br/>${{d.description}}`)
                   .style("left", (event.pageX + 10) + "px")
                   .style("top", (event.pageY - 10) + "px");
-          })
-          .on("mouseout", function(d) {
+          }})
+          .on("mouseout", function() {{
               tooltip.transition()
                   .duration(500)
                   .style("opacity", 0);
-          });
-          
+          }});
+
           // Add click handler
-          node.on("click", function(event, d) {
-              if (window.gradio_client) {
-                  window.gradio_client.dispatch("select", d);
-              }
-          });
-          
+          node.on("click", function(event, d) {{
+              if (window.gradio) {{
+                  window.gradio.dispatch("select", d);
+              }}
+          }});
+
           // Update positions on each tick
-          simulation.on("tick", () => {
+          simulation.on("tick", () => {{
               link
                   .attr("x1", d => d.source.x)
                   .attr("y1", d => d.source.y)
                   .attr("x2", d => d.target.x)
                   .attr("y2", d => d.target.y);
-              
-              node
-                  .attr("transform", d => `translate(${d.x},${d.y})`);
-          });
-          
+
+              node.attr("transform", d => `translate(${{d.x}},${{d.y}})`);
+          }});
+
           // Drag functions
-          function dragstarted(event) {
+          function dragstarted(event, d) {{
               if (!event.active) simulation.alphaTarget(0.3).restart();
-              event.subject.fx = event.subject.x;
-              event.subject.fy = event.subject.y;
-          }
-          
-          function dragged(event) {
-              event.subject.fx = event.x;
-              event.subject.fy = event.y;
-          }
-          
-          function dragended(event) {
+              d.fx = d.x;
+              d.fy = d.y;
+          }}
+
+          function dragged(event, d) {{
+              d.fx = event.x;
+              d.fy = event.y;
+          }}
+
+          function dragended(event, d) {{
               if (!event.active) simulation.alphaTarget(0);
-              event.subject.fx = null;
-              event.subject.fy = null;
-          }
-          
-          // Text wrapping function
-          function wrap(text, width) {
-              text.each(function() {
-                  const text = d3.select(this);
-                  const words = text.text().split(/\s+/).reverse();
-                  let word;
-                  let line = [];
-                  let lineNumber = 0;
-                  const lineHeight = 1.1;
-                  const y = text.attr("y");
-                  const dy = parseFloat(text.attr("dy"));
-                  let tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "px");
-                  
-                  while (word = words.pop()) {
-                      line.push(word);
-                      tspan.text(line.join(" "));
-                      if (tspan.node().getComputedTextLength() > width) {
-                          line.pop();
-                          tspan.text(line.join(" "));
-                          line = [word];
-                          tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "px").text(word);
-                      }
-                  }
-              });
-          }
-      })();
-  </script>
+              d.fx = null;
+              d.fy = null;
+          }}
+      </script>
+  </body>
+  </html>
   """
   return html_content
-    
-def summarize_node(node_data: Dict[str, Any]) -> str:
-  """Generate a summary for a selected node"""
-  summary = f"""
-Title: {node_data['title']}
-Depth: {node_data['depth']}
-Description: {node_data['description']}
-
-Connections:
-"""
-  for conn in node_data['connections']:
-      summary += f"- Connected to: {conn['target_id']}"
-      if 'relevance_score' in conn:
-          summary += f" (Relevance: {conn['relevance_score']})"
-      summary += "\n"
-  
-  return summary
 
-def explore(
-  query: str,
-  path_history: str = "[]",
-  parameters: str = "{}",
-  depth: int = 5,
-  domain: str = ""
-) -> tuple[str, go.Figure, str]:
+def explore(query: str, path_history: str = "[]", parameters: str = "{}", depth: int = 5, domain: str = "") -> tuple:
   """Generate exploration path and visualization"""
   try:
+      # Initialize generator
+      api_key = os.getenv("GROQ_API_KEY")
+      if not api_key:
+          raise ValueError("GROQ_API_KEY not found in environment variables")
+      
+      generator = ExplorationPathGenerator(api_key=api_key)
+      
       # 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)}")
-
+      
+      # Add domain to parameters if provided
+      if domain:
+          exploration_parameters["domain"] = domain
+      
+      # Generate result
       result = generator.generate_exploration_path(
           query=query,
           selected_path=selected_path,
           exploration_parameters=exploration_parameters
       )
       
-      if not isinstance(result, dict):
-          raise ValueError("Invalid response format from generator")
-      
       # Create visualization
-      fig = create_interactive_graph(result.get('nodes', []))
+      graph_html = create_interactive_graph(result.get('nodes', []))
       
       # Initial summary
-      summary = "Interact with nodes in the graph to explore relationships"
+      summary = "Click on nodes in the graph to see detailed information"
       
-      return json.dumps(result), fig, summary
+      return json.dumps(result), graph_html, summary
 
   except Exception as e:
       error_response = {
           "error": str(e),
           "status": "failed",
-          "message": "Failed to generate exploration path",
-          "details": {
-              "query": query,
-              "depth": depth,
-              "domain": domain
-          }
+          "timestamp": datetime.now().isoformat(),
+          "query": query
       }
-      print(f"Error in explore function: {e}")
-      return json.dumps(error_response), go.Figure(), "Error occurred"
+      return json.dumps(error_response), "<div>Error generating visualization</div>", f"Error: {str(e)}"
 
 def create_interface() -> gr.Blocks:
   """Create and configure the Gradio interface"""
-  with gr.Blocks(title="Art History Exploration Path Generator", theme=gr.themes.Soft()) as interface:
+  with gr.Blocks(
+      title="Art History Exploration Path Generator",
+      theme=gr.themes.Soft(),
+      css="#graph-visualization {min-height: 600px;}"
+  ) as interface:
       gr.Markdown("""
       # Art History Exploration Path Generator
       Generate interactive exploration paths through art history topics.
@@ -319,11 +338,15 @@ def create_interface() -> gr.Blocks:
               with gr.Accordion("Exploration Result", open=False):
                   text_output = gr.JSON(label="Raw Result")
               
-              graph_output = gr.HTML(label="Interactive Exploration Graph")
+              graph_output = gr.HTML(
+                  label="Interactive Exploration Graph",
+                  value="<div>Generate a path to see the visualization</div>",
+                  elem_id="graph-visualization"
+              )
               node_summary = gr.Textbox(
                   label="Node Details",
                   lines=5,
-                  placeholder="Interact with nodes to see details"
+                  placeholder="Click on nodes to see details"
               )
 
       generate_btn.click(
@@ -332,7 +355,6 @@ def create_interface() -> gr.Blocks:
           outputs=[text_output, graph_output, node_summary]
       )
 
-      # Add examples
       gr.Examples(
           examples=[
               ["Explore the evolution of Renaissance painting techniques", "[]", "{}", 5, "Renaissance"],
@@ -348,6 +370,10 @@ if __name__ == "__main__":
   try:
       print(f"===== Application Startup at {datetime.now().strftime('%Y-%m-%d %H:%M:%S')} =====")
       demo = create_interface()
-      demo.launch()
+      demo.launch(
+          server_name="0.0.0.0",
+          server_port=7860,
+          share=True
+      )
   except Exception as e:
       print(f"Failed to launch interface: {e}")