Update app.py

app.py

@@ -5,6 +5,7 @@ import pandas as pd
 import warnings
 import random
 import re
+import time
 warnings.filterwarnings('ignore')
 
 # Common NER entity types
@@ -236,7 +237,7 @@ class HybridNERManager:
             return []
 
 def find_overlapping_entities(entities):
-    """Find and share overlapping entities"""
+    """Find and share overlapping entities - specifically entities found by BOTH common NER models AND custom entities"""
     if not entities:
         return []
 
@@ -254,7 +255,7 @@ def find_overlapping_entities(entities):
         while j < len(sorted_entities):
             next_entity = sorted_entities[j]
 
-            # Check if entities overlap
+            # Check if entities overlap (same text span or overlapping positions)
             if (current_entity['start'] <= next_entity['start'] < current_entity['end'] or
                 next_entity['start'] <= current_entity['start'] < current_entity['end'] or
                 current_entity['text'].lower() == next_entity['text'].lower()):
@@ -263,12 +264,28 @@ def find_overlapping_entities(entities):
             else:
                 j += 1
 
-        # Create shared entity
+        # Create shared entity only if we have BOTH common and custom entities
         if len(overlapping_entities) == 1:
             shared_entities.append(overlapping_entities[0])
         else:
-            shared_entity = share_entities(overlapping_entities)
-            shared_entities.append(shared_entity)
+            # Check if this is a true "shared" entity (common + custom)
+            has_common = False
+            has_custom = False
+            
+            for entity in overlapping_entities:
+                source = entity.get('source', '')
+                if source in ['spaCy', 'GLiNER-Common'] or source.startswith('Flair-'):
+                    has_common = True
+                elif source == 'GLiNER-Custom':
+                    has_custom = True
+            
+            if has_common and has_custom:
+                # This is a true shared entity (common + custom)
+                shared_entity = share_entities(overlapping_entities)
+                shared_entities.append(shared_entity)
+            else:
+                # These are just overlapping entities from the same source type, keep separate
+                shared_entities.extend(overlapping_entities)
 
         i += 1
 
@@ -386,7 +403,7 @@ def create_shared_entity_html(entity, entity_colors):
             f'border-radius: 3px; margin: 0 1px; '
             f'border: 2px solid #333; color: white; font-weight: bold;" '
             f'title="SHARED: {tooltip}">'
-            f'{entity["text"]} 🧩🧩</span>')
+            f'{entity["text"]} 🤝</span>')
 
 def create_entity_table_gradio_tabs(entities, entity_colors):
     """Create Gradio tabs for entity results"""
@@ -417,7 +434,7 @@ def create_entity_table_gradio_tabs(entities, entity_colors):
     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)"
+            header = f"🤝 Shared Entities ({len(entities_of_type)} found)"
             
             # Create table for shared entities
             table_html = f"""
@@ -453,7 +470,7 @@ def create_entity_table_gradio_tabs(entities, entity_colors):
                 """
             
             table_html += "</tbody></table></div>"
-            tab_contents[f"🧩🧩 SHARED ({len(entities_of_type)})"] = table_html
+            tab_contents[f"🤝 SHARED ({len(entities_of_type)})"] = table_html
             
         else:
             colour = entity_colors.get(entity_type.upper(), '#f0f0f0')
@@ -589,6 +606,7 @@ def process_text(text, standard_entities, custom_entities_str, confidence_thresh
     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)
@@ -614,7 +632,7 @@ def create_interface():
         
         Combine common NER categories with your own custom entity types! This tool uses both traditional NER models and GLiNER for comprehensive entity extraction.
         
-        ## 🧩🧩 NEW: Overlapping entities are automatically shared with split-colour highlighting!
+        ## 🤝 NEW: Overlapping entities are automatically shared with split-colour highlighting!
         
         ### How to use:
         1. **📝 Enter your text** in the text area below
@@ -737,8 +755,12 @@ def create_interface():
             
             # Create tabs HTML manually since Gradio dynamic tabs are complex
             if isinstance(tab_contents, dict) and tab_contents:
-                tabs_html = """
-                <div style="margin: 20px 0;">
+                # 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;">
                 """
                 
@@ -746,10 +768,14 @@ def create_interface():
                 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('{i}')" id="result-tab-{i}"
+                        <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}">
+                                       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>
                     """
@@ -760,36 +786,66 @@ def create_interface():
                 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-{i}" style="{display_style}">
+                        <div id="result-content-{timestamp}-{i}" style="{display_style}">
                             {content}
                         </div>
                     """
                 
-                # Add JavaScript for tab switching
-                tabs_html += """
+                # Add JavaScript for tab switching with unique function name
+                tabs_html += f"""
                     <script>
-                    function showResultTab(tabIndex) {
-                        // Hide all content
-                        var contents = document.querySelectorAll('[id^="result-content-"]');
-                        contents.forEach(function(content) {
+                    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
-                        var tabs = document.querySelectorAll('[id^="result-tab-"]');
-                        tabs.forEach(function(tab) {
+                        // 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
-                        document.getElementById('result-content-' + tabIndex).style.display = 'block';
+                        var targetContent = document.getElementById('result-content-{timestamp}-' + tabIndex);
+                        if (targetContent) {{
+                            targetContent.style.display = 'block';
+                        }}
                         
                         // Highlight selected tab
-                        var activeTab = document.getElementById('result-tab-' + tabIndex);
-                        activeTab.style.backgroundColor = '#f8f9fa';
-                        activeTab.style.borderBottom = '3px solid #4ECDC4';
-                    }
+                        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>
                 """