Update app.py

app.py

@@ -1,8 +1,6 @@
 import gradio as gr
 import networkx as nx
 from pyvis.network import Network
-import tempfile
-import os
 import base64
 
 # Entity type colors (matching your NER tool)
@@ -93,7 +91,7 @@ class NetworkGraphBuilder:
         if len(G.nodes) == 0:
             return None
         
-        # Create PyVis network with dark theme like the example
+        # Create PyVis network with dark theme
         net = Network(
             height="600px",
             width="100%",
@@ -102,16 +100,18 @@ class NetworkGraphBuilder:
             directed=False
         )
         
-        # Configure physics for interactive dragging
+        # Configure physics and styling
         net.set_options("""
         {
             "nodes": {
                 "borderWidth": 2,
                 "borderWidthSelected": 4,
                 "font": {
-                    "size": 14,
+                    "size": 18,
                     "face": "arial",
-                    "color": "white"
+                    "color": "white",
+                    "strokeWidth": 3,
+                    "strokeColor": "#1a1a2e"
                 },
                 "shadow": {
                     "enabled": true,
@@ -121,16 +121,22 @@ class NetworkGraphBuilder:
             },
             "edges": {
                 "color": {
-                    "inherit": false
+                    "color": "#888888",
+                    "highlight": "#ffffff"
+                },
+                "font": {
+                    "size": 14,
+                    "face": "arial",
+                    "color": "#ffffff",
+                    "strokeWidth": 0,
+                    "background": "rgba(26, 26, 46, 0.8)",
+                    "align": "middle"
                 },
                 "smooth": {
                     "enabled": true,
                     "type": "continuous"
                 },
-                "shadow": {
-                    "enabled": true,
-                    "color": "rgba(0,0,0,0.3)"
-                }
+                "width": 2
             },
             "physics": {
                 "enabled": true,
@@ -148,7 +154,7 @@ class NetworkGraphBuilder:
             },
             "interaction": {
                 "hover": true,
-                "tooltipDelay": 100,
+                "tooltipDelay": 200,
                 "dragNodes": true,
                 "dragView": true,
                 "zoomView": true
@@ -166,13 +172,20 @@ class NetworkGraphBuilder:
             degree = G.degree(node)
             size = 25 + (degree * 8)
             
-            # Create tooltip
+            # Create plain text tooltip (no HTML)
             connections = list(G.neighbors(node))
-            title = f"<b>{node}</b><br>Type: {entity_type}<br>Connections: {len(connections)}"
+            title_lines = [
+                node,
+                f"Type: {entity_type}",
+                f"Connections: {len(connections)}"
+            ]
             if connections:
-                title += f"<br>Connected to: {', '.join(connections[:5])}"
+                connected_to = ', '.join(connections[:5])
                 if len(connections) > 5:
-                    title += f"<br>... +{len(connections) - 5} more"
+                    connected_to += f"... +{len(connections) - 5} more"
+                title_lines.append(f"Connected to: {connected_to}")
+            
+            title = '\n'.join(title_lines)
             
             net.add_node(
                 node,
@@ -180,7 +193,7 @@ class NetworkGraphBuilder:
                 color=color,
                 size=size,
                 title=title,
-                font={'size': 12, 'color': 'white'}
+                font={'size': 18, 'color': 'white', 'strokeWidth': 3, 'strokeColor': '#1a1a2e'}
             )
         
         # Add edges with relationship labels
@@ -193,13 +206,12 @@ class NetworkGraphBuilder:
                 label=rel_type,
                 color='#888888',
                 width=2,
-                font={'size': 10, 'color': '#cccccc', 'align': 'middle'}
+                font={'size': 14, 'color': '#ffffff', 'strokeWidth': 0, 'background': 'rgba(26,26,46,0.8)'}
             )
         
         # Generate HTML
         html = net.generate_html()
         
-        # Wrap in iframe-compatible format
         # Encode as base64 data URI for iframe src
         html_bytes = html.encode('utf-8')
         b64_html = base64.b64encode(html_bytes).decode('utf-8')
@@ -223,7 +235,9 @@ def collect_entities_from_records(
     p3, l3, e3, o3, d3,
     p4, l4, e4, o4, d4,
     p5, l5, e5, o5, d5,
-    p6, l6, e6, o6, d6
+    p6, l6, e6, o6, d6,
+    p7, l7, e7, o7, d7,
+    p8, l8, e8, o8, d8
 ):
     """Collect all entities from the input fields"""
     builder = NetworkGraphBuilder()
@@ -236,6 +250,8 @@ def collect_entities_from_records(
         (p4, l4, e4, o4, d4),
         (p5, l5, e5, o5, d5),
         (p6, l6, e6, o6, d6),
+        (p7, l7, e7, o7, d7),
+        (p8, l8, e8, o8, d8),
     ]
     
     for record_id, (person, location, event, org, date) in enumerate(records, 1):
@@ -319,6 +335,8 @@ def generate_network_graph(
     p4, l4, e4, o4, d4,
     p5, l5, e5, o5, d5,
     p6, l6, e6, o6, d6,
+    p7, l7, e7, o7, d7,
+    p8, l8, e8, o8, d8,
     src1, rel1, tgt1,
     src2, rel2, tgt2,
     src3, rel3, tgt3,
@@ -337,6 +355,8 @@ def generate_network_graph(
             (p4, l4, e4, o4, d4),
             (p5, l5, e5, o5, d5),
             (p6, l6, e6, o6, d6),
+            (p7, l7, e7, o7, d7),
+            (p8, l8, e8, o8, d8),
         ]
         
         for record_id, (person, location, event, org, date) in enumerate(records, 1):
@@ -466,6 +486,10 @@ def load_austen_example():
         "Mr. Wickham", "Meryton", "", "Militia", "",
         # Record 6
         "Charlotte Lucas", "Hunsford", "", "", "",
+        # Record 7
+        "", "", "", "", "",
+        # Record 8
+        "", "", "", "", "",
     )
 
 
@@ -484,26 +508,32 @@ def load_wwii_example():
         "", "", "", "", "",
         # Record 6
         "", "", "", "", "",
+        # Record 7
+        "", "", "", "", "",
+        # Record 8
+        "", "", "", "", "",
     )
 
 
 def create_interface():
-    with gr.Blocks(title="Network Explorer", theme=gr.themes.Soft(), css="""
-        .record-box {
-            border: 1px solid #e0e0e0;
-            border-radius: 8px;
-            padding: 12px;
-            background: #fafafa;
-        }
-        .full-width {
-            width: 100%;
-        }
-    """) as demo:
+    with gr.Blocks(title="Network Explorer", theme=gr.themes.Soft()) as demo:
         gr.Markdown("""
-        # 🕸️ Network Explorer
+        # 🕸️ Basic Network Explorer
+        
+        Build interactive network graphs by entering entities extracted through Named Entity Recognition (NER).
+        
+        ### How to use this tool:
+        1. **📝 Enter entities** in the records below (or load an example to get started)
+        2. **🔍 Click "Identify Entities"** to collect and list all entities
+        3. **🤝 Define relationships** between entities using the dropdowns
+        4. **🎨 Click "Generate Network Graph"** to visualize
+        5. **👁️ Explore** - drag nodes to rearrange, scroll to zoom, hover for details
+        """)
         
-        Build interactive network graphs from named entities. Enter people, places, events, 
-        organizations and dates, then define relationships to visualize connections.
+        gr.HTML("""
+        <div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 12px; margin: 15px 0;">
+            <strong style="color: #856404;">💡 Top tip:</strong> Start with just a few entities and relationships to see how it works!
+        </div>
         """)
         
         # Quick start buttons
@@ -514,77 +544,87 @@ def create_interface():
         
         gr.HTML("<hr style='margin: 15px 0;'>")
         
-        # ==================== STEP 1: ENTITY INPUT (2x2 Grid) ====================
+        # ==================== STEP 1: ENTITY INPUT (4 per row) ====================
         gr.Markdown("## 📝 Step 1: Enter Entities")
         
         entity_inputs = []
         
-        # First row: Records 1 & 2
+        # First row: Records 1-4 (all on one line)
         with gr.Row():
-            with gr.Column():
+            with gr.Column(scale=1, min_width=200):
                 gr.Markdown("**Record 1**")
-                with gr.Group():
-                    p1 = gr.Textbox(label="👤 Person", placeholder="e.g., Elizabeth Bennet")
-                    l1 = gr.Textbox(label="📍 Location", placeholder="e.g., Longbourn")
-                    e1 = gr.Textbox(label="📅 Event", placeholder="e.g., Meryton Ball")
-                    o1 = gr.Textbox(label="🏢 Organization", placeholder="e.g., Bennet Family")
-                    d1 = gr.Textbox(label="🗓️ Date", placeholder="e.g., 1811")
+                p1 = gr.Textbox(label="👤 Person", placeholder="e.g., Elizabeth Bennet")
+                l1 = gr.Textbox(label="📍 Location", placeholder="e.g., Longbourn")
+                e1 = gr.Textbox(label="📅 Event", placeholder="e.g., Meryton Ball")
+                o1 = gr.Textbox(label="🏢 Organization", placeholder="e.g., Bennet Family")
+                d1 = gr.Textbox(label="🗓️ Date", placeholder="e.g., 1811")
                 entity_inputs.extend([p1, l1, e1, o1, d1])
             
-            with gr.Column():
+            with gr.Column(scale=1, min_width=200):
                 gr.Markdown("**Record 2**")
-                with gr.Group():
-                    p2 = gr.Textbox(label="👤 Person", placeholder="e.g., Mr. Darcy")
-                    l2 = gr.Textbox(label="📍 Location", placeholder="e.g., Pemberley")
-                    e2 = gr.Textbox(label="📅 Event", placeholder="e.g., Netherfield Ball")
-                    o2 = gr.Textbox(label="🏢 Organization", placeholder="e.g., Darcy Estate")
-                    d2 = gr.Textbox(label="🗓️ Date", placeholder="")
+                p2 = gr.Textbox(label="👤 Person", placeholder="e.g., Mr. Darcy")
+                l2 = gr.Textbox(label="📍 Location", placeholder="e.g., Pemberley")
+                e2 = gr.Textbox(label="📅 Event", placeholder="e.g., Netherfield Ball")
+                o2 = gr.Textbox(label="🏢 Organization", placeholder="e.g., Darcy Estate")
+                d2 = gr.Textbox(label="🗓️ Date", placeholder="")
                 entity_inputs.extend([p2, l2, e2, o2, d2])
-        
-        # Second row: Records 3 & 4
-        with gr.Row():
-            with gr.Column():
+            
+            with gr.Column(scale=1, min_width=200):
                 gr.Markdown("**Record 3**")
-                with gr.Group():
-                    p3 = gr.Textbox(label="👤 Person", placeholder="e.g., Jane Bennet")
-                    l3 = gr.Textbox(label="📍 Location", placeholder="e.g., Netherfield")
-                    e3 = gr.Textbox(label="📅 Event", placeholder="")
-                    o3 = gr.Textbox(label="🏢 Organization", placeholder="")
-                    d3 = gr.Textbox(label="🗓️ Date", placeholder="")
+                p3 = gr.Textbox(label="👤 Person", placeholder="e.g., Jane Bennet")
+                l3 = gr.Textbox(label="📍 Location", placeholder="e.g., Netherfield")
+                e3 = gr.Textbox(label="📅 Event", placeholder="")
+                o3 = gr.Textbox(label="🏢 Organization", placeholder="")
+                d3 = gr.Textbox(label="🗓️ Date", placeholder="")
                 entity_inputs.extend([p3, l3, e3, o3, d3])
             
-            with gr.Column():
+            with gr.Column(scale=1, min_width=200):
                 gr.Markdown("**Record 4**")
-                with gr.Group():
-                    p4 = gr.Textbox(label="👤 Person", placeholder="e.g., Mr. Bingley")
-                    l4 = gr.Textbox(label="📍 Location", placeholder="e.g., London")
-                    e4 = gr.Textbox(label="📅 Event", placeholder="")
-                    o4 = gr.Textbox(label="🏢 Organization", placeholder="")
-                    d4 = gr.Textbox(label="🗓️ Date", placeholder="")
+                p4 = gr.Textbox(label="👤 Person", placeholder="e.g., Mr. Bingley")
+                l4 = gr.Textbox(label="📍 Location", placeholder="e.g., London")
+                e4 = gr.Textbox(label="📅 Event", placeholder="")
+                o4 = gr.Textbox(label="🏢 Organization", placeholder="")
+                d4 = gr.Textbox(label="🗓️ Date", placeholder="")
                 entity_inputs.extend([p4, l4, e4, o4, d4])
         
-        # Optional records 5-6
-        with gr.Accordion("➕ Additional Records (5-6)", open=False):
+        # Additional records 5-8
+        with gr.Accordion("➕ Additional Records (5-8)", open=False):
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=1, min_width=200):
                     gr.Markdown("**Record 5**")
-                    with gr.Group():
-                        p5 = gr.Textbox(label="👤 Person")
-                        l5 = gr.Textbox(label="📍 Location")
-                        e5 = gr.Textbox(label="📅 Event")
-                        o5 = gr.Textbox(label="🏢 Organization")
-                        d5 = gr.Textbox(label="🗓️ Date")
+                    p5 = gr.Textbox(label="👤 Person")
+                    l5 = gr.Textbox(label="📍 Location")
+                    e5 = gr.Textbox(label="📅 Event")
+                    o5 = gr.Textbox(label="🏢 Organization")
+                    d5 = gr.Textbox(label="🗓️ Date")
                     entity_inputs.extend([p5, l5, e5, o5, d5])
                 
-                with gr.Column():
+                with gr.Column(scale=1, min_width=200):
                     gr.Markdown("**Record 6**")
-                    with gr.Group():
-                        p6 = gr.Textbox(label="👤 Person")
-                        l6 = gr.Textbox(label="📍 Location")
-                        e6 = gr.Textbox(label="📅 Event")
-                        o6 = gr.Textbox(label="🏢 Organization")
-                        d6 = gr.Textbox(label="🗓️ Date")
+                    p6 = gr.Textbox(label="👤 Person")
+                    l6 = gr.Textbox(label="📍 Location")
+                    e6 = gr.Textbox(label="📅 Event")
+                    o6 = gr.Textbox(label="🏢 Organization")
+                    d6 = gr.Textbox(label="🗓️ Date")
                     entity_inputs.extend([p6, l6, e6, o6, d6])
+                
+                with gr.Column(scale=1, min_width=200):
+                    gr.Markdown("**Record 7**")
+                    p7 = gr.Textbox(label="👤 Person")
+                    l7 = gr.Textbox(label="📍 Location")
+                    e7 = gr.Textbox(label="📅 Event")
+                    o7 = gr.Textbox(label="🏢 Organization")
+                    d7 = gr.Textbox(label="🗓️ Date")
+                    entity_inputs.extend([p7, l7, e7, o7, d7])
+                
+                with gr.Column(scale=1, min_width=200):
+                    gr.Markdown("**Record 8**")
+                    p8 = gr.Textbox(label="👤 Person")
+                    l8 = gr.Textbox(label="📍 Location")
+                    e8 = gr.Textbox(label="📅 Event")
+                    o8 = gr.Textbox(label="🏢 Organization")
+                    d8 = gr.Textbox(label="🗓️ Date")
+                    entity_inputs.extend([p8, l8, e8, o8, d8])
         
         # Identify button
         collect_btn = gr.Button("🔍 Identify Entities", variant="primary", size="lg")
@@ -596,55 +636,46 @@ def create_interface():
         
         # ==================== STEP 2: RELATIONSHIPS (Grid) ====================
         gr.Markdown("## 🤝 Step 2: Define Relationships")
-        gr.Markdown("*Select entities from the dropdowns to create connections*")
+        gr.Markdown("*Select entities from the dropdowns to create connections (click 'Identify Entities' first)*")
         
-        # Relationship inputs in a grid
+        # Relationship inputs in a grid (5 columns)
         relationship_inputs = []
         
         with gr.Row():
-            with gr.Column():
+            with gr.Column(scale=1, min_width=180):
                 gr.Markdown("**Relationship 1**")
                 src1 = gr.Dropdown(label="From", choices=[])
                 rel1 = gr.Dropdown(label="Type", choices=RELATIONSHIP_TYPES, value="related_to")
                 tgt1 = gr.Dropdown(label="To", choices=[])
                 relationship_inputs.extend([src1, rel1, tgt1])
             
-            with gr.Column():
+            with gr.Column(scale=1, min_width=180):
                 gr.Markdown("**Relationship 2**")
                 src2 = gr.Dropdown(label="From", choices=[])
                 rel2 = gr.Dropdown(label="Type", choices=RELATIONSHIP_TYPES, value="related_to")
                 tgt2 = gr.Dropdown(label="To", choices=[])
                 relationship_inputs.extend([src2, rel2, tgt2])
             
-            with gr.Column():
+            with gr.Column(scale=1, min_width=180):
                 gr.Markdown("**Relationship 3**")
                 src3 = gr.Dropdown(label="From", choices=[])
                 rel3 = gr.Dropdown(label="Type", choices=RELATIONSHIP_TYPES, value="related_to")
                 tgt3 = gr.Dropdown(label="To", choices=[])
                 relationship_inputs.extend([src3, rel3, tgt3])
-        
-        with gr.Row():
-            with gr.Column():
+            
+            with gr.Column(scale=1, min_width=180):
                 gr.Markdown("**Relationship 4**")
                 src4 = gr.Dropdown(label="From", choices=[])
                 rel4 = gr.Dropdown(label="Type", choices=RELATIONSHIP_TYPES, value="related_to")
                 tgt4 = gr.Dropdown(label="To", choices=[])
                 relationship_inputs.extend([src4, rel4, tgt4])
             
-            with gr.Column():
+            with gr.Column(scale=1, min_width=180):
                 gr.Markdown("**Relationship 5**")
                 src5 = gr.Dropdown(label="From", choices=[])
                 rel5 = gr.Dropdown(label="Type", choices=RELATIONSHIP_TYPES, value="related_to")
                 tgt5 = gr.Dropdown(label="To", choices=[])
                 relationship_inputs.extend([src5, rel5, tgt5])
-            
-            with gr.Column():
-                # Empty column for balance, or tips
-                gr.HTML("""
-                <div style="background: #e7f3ff; padding: 15px; border-radius: 8px; margin-top: 25px;">
-                    <strong>💡 Tip:</strong> Click "Identify Entities" first to populate these dropdowns!
-                </div>
-                """)
         
         gr.HTML("<hr style='margin: 20px 0;'>")
         
@@ -653,7 +684,7 @@ def create_interface():
         
         generate_btn = gr.Button("🎨 Generate Network Graph", variant="primary", size="lg")
         
-        # Full-width network graph
+        # Full-width network graph with stats sidebar
         with gr.Row():
             with gr.Column(scale=3):
                 network_plot = gr.HTML(label="Interactive Network Graph")
@@ -733,8 +764,8 @@ def create_interface():
         gr.HTML("""
         <hr style="margin: 40px 0 20px 0;">
         <div style="text-align: center; color: #666; font-size: 14px; padding: 20px;">
-            <p><strong>Network Explorer</strong> | Bodleian Libraries, University of Oxford</p>
-            <p style="color: #888; font-size: 12px;">Built with the aid of Claude</p>
+            <p>This <strong>Basic Network Explorer</strong> tool was developed as part of a Bodleian Libraries (Oxford) Sassoon Research Fellowship.</p>
+            <p style="color: #888; font-size: 12px; margin-top: 10px;">Built with the aid of Claude Opus 4.5.</p>
         </div>
         """)