Update app.py

app.py

@@ -405,124 +405,88 @@ 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"""
-    if not entities:
-        return "No entities found."
-
-    # Share overlapping entities
-    shared_entities = find_overlapping_entities(entities)
-
-    # Group entities by type
-    entity_groups = {}
-    for entity in shared_entities:
-        if entity.get('is_shared', False):
-            key = 'SHARED_ENTITIES'
-        else:
-            key = entity['label']
+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:
+        header = f"🤝 Shared Entities ({len(entities_of_type)} found)"
         
-        if key not in entity_groups:
-            entity_groups[key] = []
-        entity_groups[key].append(entity)
-
-    if not entity_groups:
-        return "No entities found."
-
-    # Create content for each tab
-    tab_contents = {}
-    
-    for entity_type, entities_of_type in entity_groups.items():
-        if entity_type == 'SHARED_ENTITIES':
-            colour = '#666666'
-            header = f"🤝 Shared Entities ({len(entities_of_type)} found)"
+        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'])
             
-            # 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>
+            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:
+        # 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)"
+        
+        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>"
             
-            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
-            
-        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>
+            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>
             """
-            
-            # 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></div>"
-            tab_label = f"{icon} {entity_type} ({len(entities_of_type)})"
-            tab_contents[tab_label] = table_html
     
-    return tab_contents
+    table_html += "</tbody></table></div>"
+    return table_html
 
 def create_legend_html(entity_colors, standard_entities, custom_entities):
     """Create a legend showing entity colours"""
@@ -559,7 +523,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", "", None, None, None, None, None, None, None, None
 
     progress(0.1, desc="Initialising...")
     
@@ -572,7 +536,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", "", None, None, None, None, None, None, None, None
 
     progress(0.2, desc="Loading models...")
     
@@ -591,7 +555,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.", "", None, None, None, None, None, None, None, None
 
     progress(0.8, desc="Processing results...")
     
@@ -601,14 +565,26 @@ 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)
+    
+    # Share overlapping entities
+    shared_entities = find_overlapping_entities(all_entities)
+    
+    # Group entities by type
+    entity_groups = {}
+    for entity in shared_entities:
+        if entity.get('is_shared', False):
+            key = 'SHARED_ENTITIES'
+        else:
+            key = entity['label']
+        
+        if key not in entity_groups:
+            entity_groups[key] = []
+        entity_groups[key].append(entity)
 
     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
+    # Create summary
     total_entities = len(all_entities)
-    shared_entities = find_overlapping_entities(all_entities)
     final_count = len(shared_entities)
     shared_count = sum(1 for e in shared_entities if e.get('is_shared', False))
 
@@ -622,7 +598,29 @@ def process_text(text, standard_entities, custom_entities_str, confidence_thresh
 
     progress(1.0, desc="Complete!")
     
-    return summary, legend_html + highlighted_html, tab_contents
+    # Create HTML tables for each entity type
+    tables = {}
+    
+    # Create table for shared entities if any
+    if 'SHARED_ENTITIES' in entity_groups:
+        tables['shared'] = create_entity_table_html(entity_groups['SHARED_ENTITIES'], 'SHARED_ENTITIES', '#666666', is_shared=True)
+    else:
+        tables['shared'] = None
+    
+    # Create tables for other entity types (up to 7 for the interface)
+    entity_types = [k for k in entity_groups.keys() if k != 'SHARED_ENTITIES']
+    for i in range(7):
+        if i < len(entity_types):
+            entity_type = entity_types[i]
+            colour = entity_colors.get(entity_type.upper(), '#f0f0f0')
+            tables[f'tab{i+1}'] = create_entity_table_html(entity_groups[entity_type], entity_type, colour)
+        else:
+            tables[f'tab{i+1}'] = None
+    
+    return (summary, legend_html + highlighted_html, 
+            tables.get('shared'), tables.get('tab1'), tables.get('tab2'), 
+            tables.get('tab3'), tables.get('tab4'), tables.get('tab5'), 
+            tables.get('tab6'), tables.get('tab7'))
 
 # Create Gradio interface
 def create_interface():
@@ -723,142 +721,40 @@ 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 native Gradio tabs
         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';
-                        }}
-                    }}
+                with gr.Tabs() as results_tabs:
+                    # Pre-create tabs for different entity types
+                    with gr.Tab("🤝 Shared", visible=False) as shared_tab:
+                        shared_output = gr.HTML()
                     
-                    // 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());
-                            }});
-                        }});
-                    }});
+                    with gr.Tab("Entity Type 1", visible=False) as tab1:
+                        tab1_output = gr.HTML()
                     
-                    // 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
+                    with gr.Tab("Entity Type 2", visible=False) as tab2:
+                        tab2_output = gr.HTML()
+                    
+                    with gr.Tab("Entity Type 3", visible=False) as tab3:
+                        tab3_output = gr.HTML()
+                    
+                    with gr.Tab("Entity Type 4", visible=False) as tab4:
+                        tab4_output = gr.HTML()
+                    
+                    with gr.Tab("Entity Type 5", visible=False) as tab5:
+                        tab5_output = gr.HTML()
+                    
+                    with gr.Tab("Entity Type 6", visible=False) as tab6:
+                        tab6_output = gr.HTML()
+                    
+                    with gr.Tab("Entity Type 7", visible=False) as tab7:
+                        tab7_output = gr.HTML()
         
         # Connect the button to the processing function
         analyse_btn.click(
-            fn=process_and_display,
+            fn=process_text,
             inputs=[
                 text_input,
                 standard_entities,
@@ -866,7 +762,18 @@ def create_interface():
                 confidence_threshold,
                 model_dropdown
             ],
-            outputs=[summary_output, highlighted_output, results_container]
+            outputs=[
+                summary_output, 
+                highlighted_output, 
+                shared_output,
+                tab1_output,
+                tab2_output,
+                tab3_output,
+                tab4_output,
+                tab5_output,
+                tab6_output,
+                tab7_output
+            ]
         )
         
         # Add examples