Update app.py

app.py

@@ -3,11 +3,12 @@ import networkx as nx
 from pyvis.network import Network
 import base64
 
-# Entity type colors (matching your NER tool)
-ENTITY_COLORS = {
+# Entity type colours (matching your NER tool)
+# Updated for better distinction between Person, Location, and Event
+ENTITY_COLOURS = {
     'PERSON': '#00B894',      # Green
-    'LOCATION': '#A0E7E5',    # Light Cyan
-    'EVENT': '#4ECDC4',       # Teal
+    'LOCATION': '#9B59B6',    # Purple (more distinct from green)
+    'EVENT': '#F39C12',       # Orange/Gold (very distinct)
     'ORGANIZATION': '#55A3FF', # Light Blue
     'DATE': '#FF6B6B'         # Red
 }
@@ -87,7 +88,7 @@ class NetworkGraphBuilder:
         return G
     
     def create_pyvis_graph(self, G):
-        """Create interactive PyVis visualization"""
+        """Create interactive PyVis visualisation"""
         if len(G.nodes) == 0:
             return None
         
@@ -147,7 +148,7 @@ class NetworkGraphBuilder:
                     "springConstant": 0.04,
                     "damping": 0.09
                 },
-                "stabilization": {
+                "stabilisation": {
                     "enabled": true,
                     "iterations": 100
                 }
@@ -166,7 +167,7 @@ class NetworkGraphBuilder:
         for node in G.nodes():
             data = G.nodes[node]
             entity_type = data.get('entity_type', 'UNKNOWN')
-            color = ENTITY_COLORS.get(entity_type, '#CCCCCC')
+            colour = ENTITY_COLOURS.get(entity_type, '#CCCCCC')
             
             # Size based on connections (degree)
             degree = G.degree(node)
@@ -190,7 +191,7 @@ class NetworkGraphBuilder:
             net.add_node(
                 node,
                 label=node,
-                color=color,
+                color=colour,
                 size=size,
                 title=title,
                 font={'size': 18, 'color': 'white', 'strokeWidth': 3, 'strokeColor': '#1a1a2e'}
@@ -297,7 +298,7 @@ def collect_entities_from_records(
             </div>
             <div style="background: rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 8px; text-align: center;">
                 <div style="font-size: 24px; font-weight: bold; color: white;">{counts['ORGANIZATION']}</div>
-                <div style="color: rgba(255,255,255,0.9); font-size: 12px;">🏢 Organizations</div>
+                <div style="color: rgba(255,255,255,0.9); font-size: 12px;">🏢 Organisations</div>
             </div>
             <div style="background: rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 8px; text-align: center;">
                 <div style="font-size: 24px; font-weight: bold; color: white;">{counts['DATE']}</div>
@@ -399,7 +400,7 @@ def generate_network_graph(
             '''
             return empty_html, "❌ **No entities to display.** Please enter entities in Step 1 first."
         
-        # Create visualization
+        # Create visualisation
         graph_html = builder.create_pyvis_graph(G)
         
         # Create statistics
@@ -515,6 +516,22 @@ def load_wwii_example():
     )
 
 
+def create_coloured_label(text, colour, emoji):
+    """Create a coloured pill-style label HTML"""
+    return f'''
+    <span style="
+        background-color: {colour}; 
+        color: white; 
+        padding: 4px 12px; 
+        border-radius: 15px; 
+        font-size: 13px; 
+        font-weight: 500;
+        display: inline-block;
+        margin-bottom: 5px;
+    ">{emoji} {text}</span>
+    '''
+
+
 def create_interface():
     with gr.Blocks(title="Network Explorer", theme=gr.themes.Soft()) as demo:
         gr.Markdown("""
@@ -526,7 +543,7 @@ def create_interface():
         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
+        4. **🎨 Click "Generate Network Graph"** to visualise
         5. **👁️ Explore** - drag nodes to rearrange, scroll to zoom, hover for details
         """)
         
@@ -553,38 +570,58 @@ def create_interface():
         with gr.Row():
             with gr.Column(scale=1, min_width=200):
                 gr.Markdown("**Record 1**")
-                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")
+                gr.HTML(create_coloured_label("Person", ENTITY_COLOURS['PERSON'], "👤"))
+                p1 = gr.Textbox(label="", placeholder="e.g., Elizabeth Bennet", show_label=False)
+                gr.HTML(create_coloured_label("Location", ENTITY_COLOURS['LOCATION'], "📍"))
+                l1 = gr.Textbox(label="", placeholder="e.g., Longbourn", show_label=False)
+                gr.HTML(create_coloured_label("Event", ENTITY_COLOURS['EVENT'], "📅"))
+                e1 = gr.Textbox(label="", placeholder="e.g., Meryton Ball", show_label=False)
+                gr.HTML(create_coloured_label("Organisation", ENTITY_COLOURS['ORGANIZATION'], "🏢"))
+                o1 = gr.Textbox(label="", placeholder="e.g., Bennet Family", show_label=False)
+                gr.HTML(create_coloured_label("Date", ENTITY_COLOURS['DATE'], "🗓️"))
+                d1 = gr.Textbox(label="", placeholder="e.g., 1811", show_label=False)
                 entity_inputs.extend([p1, l1, e1, o1, d1])
             
             with gr.Column(scale=1, min_width=200):
                 gr.Markdown("**Record 2**")
-                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="")
+                gr.HTML(create_coloured_label("Person", ENTITY_COLOURS['PERSON'], "👤"))
+                p2 = gr.Textbox(label="", placeholder="e.g., Mr. Darcy", show_label=False)
+                gr.HTML(create_coloured_label("Location", ENTITY_COLOURS['LOCATION'], "📍"))
+                l2 = gr.Textbox(label="", placeholder="e.g., Pemberley", show_label=False)
+                gr.HTML(create_coloured_label("Event", ENTITY_COLOURS['EVENT'], "📅"))
+                e2 = gr.Textbox(label="", placeholder="e.g., Netherfield Ball", show_label=False)
+                gr.HTML(create_coloured_label("Organisation", ENTITY_COLOURS['ORGANIZATION'], "🏢"))
+                o2 = gr.Textbox(label="", placeholder="e.g., Darcy Estate", show_label=False)
+                gr.HTML(create_coloured_label("Date", ENTITY_COLOURS['DATE'], "🗓️"))
+                d2 = gr.Textbox(label="", placeholder="", show_label=False)
                 entity_inputs.extend([p2, l2, e2, o2, d2])
             
             with gr.Column(scale=1, min_width=200):
                 gr.Markdown("**Record 3**")
-                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="")
+                gr.HTML(create_coloured_label("Person", ENTITY_COLOURS['PERSON'], "👤"))
+                p3 = gr.Textbox(label="", placeholder="e.g., Jane Bennet", show_label=False)
+                gr.HTML(create_coloured_label("Location", ENTITY_COLOURS['LOCATION'], "📍"))
+                l3 = gr.Textbox(label="", placeholder="e.g., Netherfield", show_label=False)
+                gr.HTML(create_coloured_label("Event", ENTITY_COLOURS['EVENT'], "📅"))
+                e3 = gr.Textbox(label="", placeholder="", show_label=False)
+                gr.HTML(create_coloured_label("Organisation", ENTITY_COLOURS['ORGANIZATION'], "🏢"))
+                o3 = gr.Textbox(label="", placeholder="", show_label=False)
+                gr.HTML(create_coloured_label("Date", ENTITY_COLOURS['DATE'], "🗓️"))
+                d3 = gr.Textbox(label="", placeholder="", show_label=False)
                 entity_inputs.extend([p3, l3, e3, o3, d3])
             
             with gr.Column(scale=1, min_width=200):
                 gr.Markdown("**Record 4**")
-                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="")
+                gr.HTML(create_coloured_label("Person", ENTITY_COLOURS['PERSON'], "👤"))
+                p4 = gr.Textbox(label="", placeholder="e.g., Mr. Bingley", show_label=False)
+                gr.HTML(create_coloured_label("Location", ENTITY_COLOURS['LOCATION'], "📍"))
+                l4 = gr.Textbox(label="", placeholder="e.g., London", show_label=False)
+                gr.HTML(create_coloured_label("Event", ENTITY_COLOURS['EVENT'], "📅"))
+                e4 = gr.Textbox(label="", placeholder="", show_label=False)
+                gr.HTML(create_coloured_label("Organisation", ENTITY_COLOURS['ORGANIZATION'], "🏢"))
+                o4 = gr.Textbox(label="", placeholder="", show_label=False)
+                gr.HTML(create_coloured_label("Date", ENTITY_COLOURS['DATE'], "🗓️"))
+                d4 = gr.Textbox(label="", placeholder="", show_label=False)
                 entity_inputs.extend([p4, l4, e4, o4, d4])
         
         # Additional records 5-8
@@ -592,38 +629,58 @@ def create_interface():
             with gr.Row():
                 with gr.Column(scale=1, min_width=200):
                     gr.Markdown("**Record 5**")
-                    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")
+                    gr.HTML(create_coloured_label("Person", ENTITY_COLOURS['PERSON'], "👤"))
+                    p5 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Location", ENTITY_COLOURS['LOCATION'], "📍"))
+                    l5 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Event", ENTITY_COLOURS['EVENT'], "📅"))
+                    e5 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Organisation", ENTITY_COLOURS['ORGANIZATION'], "🏢"))
+                    o5 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Date", ENTITY_COLOURS['DATE'], "🗓️"))
+                    d5 = gr.Textbox(label="", show_label=False)
                     entity_inputs.extend([p5, l5, e5, o5, d5])
                 
                 with gr.Column(scale=1, min_width=200):
                     gr.Markdown("**Record 6**")
-                    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")
+                    gr.HTML(create_coloured_label("Person", ENTITY_COLOURS['PERSON'], "👤"))
+                    p6 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Location", ENTITY_COLOURS['LOCATION'], "📍"))
+                    l6 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Event", ENTITY_COLOURS['EVENT'], "📅"))
+                    e6 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Organisation", ENTITY_COLOURS['ORGANIZATION'], "🏢"))
+                    o6 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Date", ENTITY_COLOURS['DATE'], "🗓️"))
+                    d6 = gr.Textbox(label="", show_label=False)
                     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")
+                    gr.HTML(create_coloured_label("Person", ENTITY_COLOURS['PERSON'], "👤"))
+                    p7 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Location", ENTITY_COLOURS['LOCATION'], "📍"))
+                    l7 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Event", ENTITY_COLOURS['EVENT'], "📅"))
+                    e7 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Organisation", ENTITY_COLOURS['ORGANIZATION'], "🏢"))
+                    o7 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Date", ENTITY_COLOURS['DATE'], "🗓️"))
+                    d7 = gr.Textbox(label="", show_label=False)
                     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")
+                    gr.HTML(create_coloured_label("Person", ENTITY_COLOURS['PERSON'], "👤"))
+                    p8 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Location", ENTITY_COLOURS['LOCATION'], "📍"))
+                    l8 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Event", ENTITY_COLOURS['EVENT'], "📅"))
+                    e8 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Organisation", ENTITY_COLOURS['ORGANIZATION'], "🏢"))
+                    o8 = gr.Textbox(label="", show_label=False)
+                    gr.HTML(create_coloured_label("Date", ENTITY_COLOURS['DATE'], "🗓️"))
+                    d8 = gr.Textbox(label="", show_label=False)
                     entity_inputs.extend([p8, l8, e8, o8, d8])
         
         # Identify button
@@ -691,29 +748,29 @@ def create_interface():
             with gr.Column(scale=1):
                 network_stats = gr.HTML()
         
-        # Color legend
-        gr.HTML("""
+        # Colour legend
+        gr.HTML(f"""
         <div style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 20px; border-radius: 10px; margin-top: 20px;">
-            <h4 style="color: white; margin: 0 0 15px 0;">🎨 Entity Color Legend</h4>
+            <h4 style="color: white; margin: 0 0 15px 0;">🎨 Entity Colour Legend</h4>
             <div style="display: flex; flex-wrap: wrap; gap: 20px;">
                 <span style="display: flex; align-items: center; gap: 8px; color: white;">
-                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: #00B894; display: inline-block; border: 2px solid white;"></span>
+                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['PERSON']}; display: inline-block; border: 2px solid white;"></span>
                     Person
                 </span>
                 <span style="display: flex; align-items: center; gap: 8px; color: white;">
-                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: #A0E7E5; display: inline-block; border: 2px solid white;"></span>
+                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['LOCATION']}; display: inline-block; border: 2px solid white;"></span>
                     Location
                 </span>
                 <span style="display: flex; align-items: center; gap: 8px; color: white;">
-                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: #4ECDC4; display: inline-block; border: 2px solid white;"></span>
+                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['EVENT']}; display: inline-block; border: 2px solid white;"></span>
                     Event
                 </span>
                 <span style="display: flex; align-items: center; gap: 8px; color: white;">
-                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: #55A3FF; display: inline-block; border: 2px solid white;"></span>
-                    Organization
+                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['ORGANIZATION']}; display: inline-block; border: 2px solid white;"></span>
+                    Organisation
                 </span>
                 <span style="display: flex; align-items: center; gap: 8px; color: white;">
-                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: #FF6B6B; display: inline-block; border: 2px solid white;"></span>
+                    <span style="width: 20px; height: 20px; border-radius: 50%; background-color: {ENTITY_COLOURS['DATE']}; display: inline-block; border: 2px solid white;"></span>
                     Date
                 </span>
             </div>
@@ -760,9 +817,35 @@ def create_interface():
             outputs=[network_plot, network_stats]
         )
         
-        # Footer
+        # Model Information & Documentation section
         gr.HTML("""
         <hr style="margin: 40px 0 20px 0;">
+        <div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin: 20px 0;">
+            <h3 style="margin: 0 0 10px 0;">📚 Library Information & Documentation</h3>
+            <p style="color: #666; margin-bottom: 15px;">Learn more about the libraries used in this tool:</p>
+            <ul style="list-style-type: circle; padding-left: 20px; margin: 0;">
+                <li style="margin-bottom: 8px;">
+                    <strong>NetworkX:</strong> 
+                    <a href="https://networkx.org/documentation/stable/" target="_blank" style="color: #667eea;">NetworkX Documentation ↗</a>
+                    <span style="color: #888; font-size: 13px;"> — Python library for creating, manipulating, and studying complex networks</span>
+                </li>
+                <li style="margin-bottom: 8px;">
+                    <strong>PyVis:</strong> 
+                    <a href="https://pyvis.readthedocs.io/en/latest/" target="_blank" style="color: #667eea;">PyVis Documentation ↗</a>
+                    <span style="color: #888; font-size: 13px;"> — Interactive network visualisation library built on vis.js</span>
+                </li>
+                <li style="margin-bottom: 8px;">
+                    <strong>Gradio:</strong> 
+                    <a href="https://www.gradio.app/docs" target="_blank" style="color: #667eea;">Gradio Documentation ↗</a>
+                    <span style="color: #888; font-size: 13px;"> — Web interface framework for machine learning demos</span>
+                </li>
+            </ul>
+        </div>
+        """)
+        
+        # Footer
+        gr.HTML("""
+        <hr style="margin: 20px 0 20px 0;">
         <div style="text-align: center; color: #666; font-size: 14px; padding: 20px;">
             <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>