Update app.py

app.py

@@ -405,10 +405,81 @@ def create_shared_entity_html(entity, entity_colors):
             f'title="SHARED: {tooltip}">'
             f'{entity["text"]} 🤝</span>')
 
-def create_entity_table_gradio_tabs(entities, entity_colors):
-    """Create Gradio tabs for entity results"""
+def create_entity_table_html(entities_of_type, entity_type, colour, is_shared=False):
+    """Create HTML table for a specific entity type"""
+    if is_shared:
+        table_html = f"""
+        <table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd;">
+            <thead>
+                <tr style="background-color: {colour}; color: white;">
+                    <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Entity Text</th>
+                    <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">All Labels</th>
+                    <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Sources</th>
+                    <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Count</th>
+                </tr>
+            </thead>
+            <tbody>
+        """
+        
+        for entity in entities_of_type:
+            labels_text = " | ".join(entity['labels'])
+            sources_text = " | ".join(entity['sources'])
+            
+            table_html += f"""
+                    <tr style="background-color: #fff;">
+                        <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">{entity['text']}</td>
+                        <td style="padding: 10px; border: 1px solid #ddd;">{labels_text}</td>
+                        <td style="padding: 10px; border: 1px solid #ddd;">{sources_text}</td>
+                        <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">
+                            <span style='background-color: #28a745; color: white; padding: 2px 6px; border-radius: 10px; font-size: 11px;'>
+                                {entity['entity_count']}
+                            </span>
+                        </td>
+                    </tr>
+            """
+    else:
+        table_html = f"""
+        <table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd;">
+            <thead>
+                <tr style="background-color: {colour}; color: white;">
+                    <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Entity Text</th>
+                    <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Confidence</th>
+                    <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Type</th>
+                    <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Source</th>
+                </tr>
+            </thead>
+            <tbody>
+        """
+        
+        # Sort by confidence score
+        entities_of_type.sort(key=lambda x: x.get('confidence', 0), reverse=True)
+        
+        for entity in entities_of_type:
+            confidence = entity.get('confidence', 0.0)
+            confidence_colour = "#28a745" if confidence > 0.7 else "#ffc107" if confidence > 0.4 else "#dc3545"
+            source = entity.get('source', 'Unknown')
+            source_badge = f"<span style='background-color: #007bff; color: white; padding: 2px 6px; border-radius: 10px; font-size: 11px;'>{source}</span>"
+            
+            table_html += f"""
+                    <tr style="background-color: #fff;">
+                        <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">{entity['text']}</td>
+                        <td style="padding: 10px; border: 1px solid #ddd;">
+                            <span style="color: {confidence_colour}; font-weight: bold;">
+                                {confidence:.3f}
+                            </span>
+                        </td>
+                        <td style="padding: 10px; border: 1px solid #ddd;">{entity['label']}</td>
+                        <td style="padding: 10px; border: 1px solid #ddd;">{source_badge}</td>
+                    </tr>
+            """
+    
+    table_html += "</tbody></table>"
+    return table_html
+
+def create_all_entity_tables(entities, entity_colors):
+    """Create all entity tables in a single container"""
     if not entities:
-        return "No entities found."
+        return "<p style='text-align: center; padding: 20px;'>No entities found.</p>"
 
     # Share overlapping entities
     shared_entities = find_overlapping_entities(entities)
@@ -426,103 +497,139 @@ def create_entity_table_gradio_tabs(entities, entity_colors):
         entity_groups[key].append(entity)
 
     if not entity_groups:
-        return "No entities found."
-
-    # Create content for each tab
-    tab_contents = {}
+        return "<p style='text-align: center; padding: 20px;'>No entities found.</p>"
+
+    # Create container with all tables
+    all_tables_html = """
+    <div style='max-height: 600px; overflow-y: auto; border: 2px solid #ddd; border-radius: 8px; padding: 20px; background-color: #fafafa;'>
+        <style>
+            .entity-section {
+                margin-bottom: 30px;
+                background-color: white;
+                border-radius: 8px;
+                padding: 15px;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            .entity-section:last-child {
+                margin-bottom: 0;
+            }
+            .section-header {
+                display: flex;
+                align-items: center;
+                margin-bottom: 15px;
+                padding-bottom: 10px;
+                border-bottom: 2px solid #eee;
+            }
+            .entity-count {
+                background-color: #007bff;
+                color: white;
+                padding: 4px 12px;
+                border-radius: 15px;
+                font-size: 14px;
+                font-weight: bold;
+                margin-left: 10px;
+            }
+            .quick-nav {
+                position: sticky;
+                top: 0;
+                background-color: #f8f9fa;
+                padding: 10px;
+                margin-bottom: 20px;
+                border-radius: 8px;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 8px;
+                z-index: 10;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            .nav-button {
+                padding: 6px 12px;
+                border: 1px solid #ddd;
+                border-radius: 20px;
+                background-color: white;
+                cursor: pointer;
+                transition: all 0.3s;
+                text-decoration: none;
+                color: #333;
+                font-size: 13px;
+                font-weight: 500;
+            }
+            .nav-button:hover {
+                background-color: #4ECDC4;
+                color: white;
+                border-color: #4ECDC4;
+            }
+        </style>
+    """
+    
+    # Create quick navigation
+    all_tables_html += '<div class="quick-nav">'
+    all_tables_html += '<strong style="margin-right: 10px;">Quick Navigation:</strong>'
     
-    for entity_type, entities_of_type in entity_groups.items():
+    # Sort entity groups to show shared entities first
+    sorted_groups = []
+    if 'SHARED_ENTITIES' in entity_groups:
+        sorted_groups.append(('SHARED_ENTITIES', entity_groups['SHARED_ENTITIES']))
+    
+    for entity_type, entities_list in sorted(entity_groups.items()):
+        if entity_type != 'SHARED_ENTITIES':
+            sorted_groups.append((entity_type, entities_list))
+    
+    for entity_type, entities_list in sorted_groups:
         if entity_type == 'SHARED_ENTITIES':
-            colour = '#666666'
-            header = f"🤝 Shared Entities ({len(entities_of_type)} found)"
-            
-            # Create table for shared entities
-            table_html = f"""
-            <div style="margin: 15px 0;">
-                <h4 style="color: {colour}; margin-bottom: 15px;">{header}</h4>
-                <table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd;">
-                    <thead>
-                        <tr style="background-color: {colour}; color: white;">
-                            <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Entity Text</th>
-                            <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">All Labels</th>
-                            <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Sources</th>
-                            <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Count</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-            """
-            
-            for entity in entities_of_type:
-                labels_text = " | ".join(entity['labels'])
-                sources_text = " | ".join(entity['sources'])
-                
-                table_html += f"""
-                        <tr style="background-color: #fff;">
-                            <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">{entity['text']}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{labels_text}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{sources_text}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">
-                                <span style='background-color: #28a745; color: white; padding: 2px 6px; border-radius: 10px; font-size: 11px;'>
-                                    {entity['entity_count']}
-                                </span>
-                            </td>
-                        </tr>
-                """
-            
-            table_html += "</tbody></table></div>"
-            tab_contents[f"🤝 SHARED ({len(entities_of_type)})"] = table_html
-            
+            icon = '🤝'
+            label = 'Shared'
         else:
-            colour = entity_colors.get(entity_type.upper(), '#f0f0f0')
-            # Determine if it's common or custom
-            is_standard = entity_type in STANDARD_ENTITIES
-            icon = "🎯" if is_standard else "✨"
-            source_text = "Common NER" if is_standard else "Custom GLiNER"
-            header = f"{icon} {source_text} - {entity_type} ({len(entities_of_type)} found)"
-            
-            # Create table for this entity type
-            table_html = f"""
-            <div style="margin: 15px 0;">
-                <h4 style="color: {colour}; margin-bottom: 15px;">{header}</h4>
-                <table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd;">
-                    <thead>
-                        <tr style="background-color: {colour}; color: white;">
-                            <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Entity Text</th>
-                            <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Confidence</th>
-                            <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Type</th>
-                            <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Source</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-            """
-            
-            # Sort by confidence score
-            entities_of_type.sort(key=lambda x: x.get('confidence', 0), reverse=True)
-            
-            for entity in entities_of_type:
-                confidence = entity.get('confidence', 0.0)
-                confidence_colour = "#28a745" if confidence > 0.7 else "#ffc107" if confidence > 0.4 else "#dc3545"
-                source = entity.get('source', 'Unknown')
-                source_badge = f"<span style='background-color: #007bff; color: white; padding: 2px 6px; border-radius: 10px; font-size: 11px;'>{source}</span>"
-                
-                table_html += f"""
-                        <tr style="background-color: #fff;">
-                            <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">{entity['text']}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">
-                                <span style="color: {confidence_colour}; font-weight: bold;">
-                                    {confidence:.3f}
-                                </span>
-                            </td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{entity['label']}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{source_badge}</td>
-                        </tr>
-                """
+            icon = '🎯' if entity_type in STANDARD_ENTITIES else '✨'
+            label = entity_type
+        
+        all_tables_html += f'<a href="#{entity_type.replace(" ", "_")}" class="nav-button">{icon} {label} ({len(entities_list)})</a>'
+    
+    all_tables_html += '</div>'
+    
+    # Add shared entities section if any
+    if 'SHARED_ENTITIES' in entity_groups:
+        shared_entities_list = entity_groups['SHARED_ENTITIES']
+        all_tables_html += f"""
+        <div class="entity-section" id="SHARED_ENTITIES">
+            <div class="section-header">
+                <h3 style="margin: 0; display: flex; align-items: center;">
+                    <span style="font-size: 24px; margin-right: 10px;">🤝</span>
+                    Shared Entities
+                    <span class="entity-count">{len(shared_entities_list)} found</span>
+                </h3>
+            </div>
+            {create_entity_table_html(shared_entities_list, 'SHARED_ENTITIES', '#666666', is_shared=True)}
+        </div>
+        """
+    
+    # Add other entity types
+    for entity_type, entities_of_type in sorted(entity_groups.items()):
+        if entity_type == 'SHARED_ENTITIES':
+            continue
             
-            table_html += "</tbody></table></div>"
-            tab_label = f"{icon} {entity_type} ({len(entities_of_type)})"
-            tab_contents[tab_label] = table_html
+        colour = entity_colors.get(entity_type.upper(), '#f0f0f0')
+        is_standard = entity_type in STANDARD_ENTITIES
+        icon = "🎯" if is_standard else "✨"
+        type_label = "Common NER" if is_standard else "Custom GLiNER"
+        
+        all_tables_html += f"""
+        <div class="entity-section" id="{entity_type.replace(' ', '_')}">
+            <div class="section-header">
+                <h3 style="margin: 0; display: flex; align-items: center;">
+                    <span style="font-size: 24px; margin-right: 10px;">{icon}</span>
+                    {entity_type}
+                    <span class="entity-count" style="background-color: {colour};">{len(entities_of_type)} found</span>
+                </h3>
+                <span style="margin-left: auto; color: #666; font-size: 14px;">{type_label}</span>
+            </div>
+            {create_entity_table_html(entities_of_type, entity_type, colour)}
+        </div>
+        """
     
-    return tab_contents
+    all_tables_html += "</div>"
+    
+    return all_tables_html
 
 def create_legend_html(entity_colors, standard_entities, custom_entities):
     """Create a legend showing entity colours"""
@@ -559,7 +666,7 @@ ner_manager = HybridNERManager()
 def process_text(text, standard_entities, custom_entities_str, confidence_threshold, selected_model, progress=gr.Progress()):
     """Main processing function for Gradio interface with progress tracking"""
     if not text.strip():
-        return "❌ Please enter some text to analyse", "", {}
+        return "❌ Please enter some text to analyse", "", ""
 
     progress(0.1, desc="Initialising...")
     
@@ -572,7 +679,7 @@ def process_text(text, standard_entities, custom_entities_str, confidence_thresh
     selected_standard = [entity for entity in standard_entities if entity]
 
     if not selected_standard and not custom_entities:
-        return "❌ Please select at least one common entity type OR enter custom entity types", "", {}
+        return "❌ Please select at least one common entity type OR enter custom entity types", "", ""
 
     progress(0.2, desc="Loading models...")
     
@@ -591,7 +698,7 @@ def process_text(text, standard_entities, custom_entities_str, confidence_thresh
         all_entities.extend(custom_entity_results)
 
     if not all_entities:
-        return "❌ No entities found. Try lowering the confidence threshold or using different entity types.", "", {}
+        return "❌ No entities found. Try lowering the confidence threshold or using different entity types.", "", ""
 
     progress(0.8, desc="Processing results...")
     
@@ -601,12 +708,11 @@ def process_text(text, standard_entities, custom_entities_str, confidence_thresh
     # Create outputs
     legend_html = create_legend_html(entity_colors, selected_standard, custom_entities)
     highlighted_html = create_highlighted_html(text, all_entities, entity_colors)
-    tab_contents = create_entity_table_gradio_tabs(all_entities, entity_colors)
+    results_html = create_all_entity_tables(all_entities, entity_colors)
 
     progress(0.9, desc="Creating summary...")
     
     # Create summary with shared entities terminology
-    # Note: Shared entities are those found by BOTH common NER models AND custom GLiNER
     total_entities = len(all_entities)
     shared_entities = find_overlapping_entities(all_entities)
     final_count = len(shared_entities)
@@ -622,7 +728,7 @@ def process_text(text, standard_entities, custom_entities_str, confidence_thresh
 
     progress(1.0, desc="Complete!")
     
-    return summary, legend_html + highlighted_html, tab_contents
+    return summary, legend_html + highlighted_html, results_html
 
 # Create Gradio interface
 def create_interface():
@@ -640,7 +746,7 @@ def create_interface():
         3. **☑️ Select common entities** you want to find (PER, ORG, LOC, etc.)
         4. **✨ Add custom entities** (comma-separated) like "relationships, occupations, skills"
         5. **⚙️ Adjust confidence threshold** 
-        6. **🔍 Click "Analyse Text"** to see results with tabbed output
+        6. **🔍 Click "Analyse Text"** to see results with organized output
         """)
         
         with gr.Row():
@@ -723,142 +829,15 @@ def create_interface():
         with gr.Row():
             highlighted_output = gr.HTML(label="Highlighted Text")
         
-        # Create dynamic tabs for results
-        results_tabs = gr.State({})
-        
-        def update_tabs(tab_contents):
-            """Update the results tabs based on the analysis"""
-            if not tab_contents or not isinstance(tab_contents, dict):
-                return {gr.HTML("No results to display"): gr.update(visible=True)}
-            
-            # Create tabs dynamically
-            tab_components = {}
-            for tab_name, content in tab_contents.items():
-                tab_components[tab_name] = gr.HTML(content)
-            
-            return tab_components
-        
-        # Results section with tabs
+        # Results section
         with gr.Row():
             with gr.Column():
                 gr.Markdown("### 📋 Detailed Results")
-                
-                # We'll update this section dynamically
-                results_container = gr.HTML(label="Results")
-        
-        # Function to process and display results
-        def process_and_display(text, standard_entities, custom_entities, confidence_threshold, selected_model):
-            # Get results from main processing function
-            summary, highlighted, tab_contents = process_text(
-                text, standard_entities, custom_entities, confidence_threshold, selected_model
-            )
-            
-            # Create tabs HTML manually since Gradio dynamic tabs are complex
-            if isinstance(tab_contents, dict) and tab_contents:
-                # Generate unique IDs to avoid conflicts
-                import time
-                timestamp = str(int(time.time() * 1000))
-                
-                tabs_html = f"""
-                <div style="margin: 20px 0;" id="tab-container-{timestamp}">
-                    <div style="border-bottom: 2px solid #ddd; margin-bottom: 20px;">
-                """
-                
-                # Create tab buttons
-                tab_names = list(tab_contents.keys())
-                for i, tab_name in enumerate(tab_names):
-                    active_style = "background-color: #f8f9fa; border-bottom: 3px solid #4ECDC4;" if i == 0 else "background-color: #fff;"
-                    default_bg = '#f8f9fa' if i == 0 else '#fff'
-                    tabs_html += f"""
-                        <button onclick="showResultTab{timestamp}('{i}')" id="result-tab-{timestamp}-{i}"
-                                style="padding: 12px 24px; margin-right: 5px; border: 1px solid #ddd;
-                                       border-bottom: none; cursor: pointer; font-weight: bold; {active_style}
-                                       transition: all 0.3s ease;"
-                                onmouseover="this.style.backgroundColor='#e9ecef'" 
-                                onmouseout="this.style.backgroundColor='{default_bg}'">
-                            {tab_name}
-                        </button>
-                    """
-                
-                tabs_html += "</div>"
-                
-                # Create tab content
-                for i, (tab_name, content) in enumerate(tab_contents.items()):
-                    display_style = "display: block;" if i == 0 else "display: none;"
-                    tabs_html += f"""
-                        <div id="result-content-{timestamp}-{i}" style="{display_style}">
-                            {content}
-                        </div>
-                    """
-                
-                # Add JavaScript for tab switching with unique function name
-                tabs_html += f"""
-                    <script>
-                    function showResultTab{timestamp}(tabIndex) {{
-                        console.log('Tab clicked:', tabIndex);
-                        
-                        // Hide all content for this specific tab container
-                        var contents = document.querySelectorAll('[id^="result-content-{timestamp}-"]');
-                        contents.forEach(function(content) {{
-                            content.style.display = 'none';
-                        }});
-                        
-                        // Reset all tab styles for this specific tab container
-                        var tabs = document.querySelectorAll('[id^="result-tab-{timestamp}-"]');
-                        tabs.forEach(function(tab) {{
-                            tab.style.backgroundColor = '#fff';
-                            tab.style.borderBottom = 'none';
-                        }});
-                        
-                        // Show selected content
-                        var targetContent = document.getElementById('result-content-{timestamp}-' + tabIndex);
-                        if (targetContent) {{
-                            targetContent.style.display = 'block';
-                        }}
-                        
-                        // Highlight selected tab
-                        var activeTab = document.getElementById('result-tab-{timestamp}-' + tabIndex);
-                        if (activeTab) {{
-                            activeTab.style.backgroundColor = '#f8f9fa';
-                            activeTab.style.borderBottom = '3px solid #4ECDC4';
-                        }}
-                    }}
-                    
-                    // Ensure tabs are clickable after DOM load
-                    document.addEventListener('DOMContentLoaded', function() {{
-                        var tabs = document.querySelectorAll('[id^="result-tab-{timestamp}-"]');
-                        tabs.forEach(function(tab, index) {{
-                            tab.addEventListener('click', function(e) {{
-                                e.preventDefault();
-                                showResultTab{timestamp}(index.toString());
-                            }});
-                        }});
-                    }});
-                    
-                    // Also try immediate setup in case DOM is already loaded
-                    setTimeout(function() {{
-                        var tabs = document.querySelectorAll('[id^="result-tab-{timestamp}-"]');
-                        tabs.forEach(function(tab, index) {{
-                            tab.onclick = function(e) {{
-                                e.preventDefault();
-                                showResultTab{timestamp}(index.toString());
-                                return false;
-                            }};
-                        }});
-                    }}, 100);
-                    </script>
-                </div>
-                """
-                
-                results_display = tabs_html
-            else:
-                results_display = str(tab_contents) if tab_contents else "No results to display"
-            
-            return summary, highlighted, results_display
+                results_output = gr.HTML(label="Entity Results")
         
         # Connect the button to the processing function
         analyse_btn.click(
-            fn=process_and_display,
+            fn=process_text,
             inputs=[
                 text_input,
                 standard_entities,
@@ -866,7 +845,7 @@ def create_interface():
                 confidence_threshold,
                 model_dropdown
             ],
-            outputs=[summary_output, highlighted_output, results_container]
+            outputs=[summary_output, highlighted_output, results_output]
         )
         
         # Add examples