app.py

# Alternative approach using collapsible sections instead of tabs
# Replace the create_entity_table_gradio_tabs function and the output display section

def create_entity_results_accordion(entities, entity_colors):
    """Create collapsible accordion-style results instead of tabs"""
    if not entities:
        return "<p>No entities found.</p>"

    # 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']
        
        if key not in entity_groups:
            entity_groups[key] = []
        entity_groups[key].append(entity)

    if not entity_groups:
        return "<p>No entities found.</p>"

    # Create accordion HTML
    accordion_html = """
    <style>
        .accordion-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .accordion-header {
            background-color: #f8f9fa;
            padding: 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s;
        }
        .accordion-header:hover {
            background-color: #e9ecef;
        }
        .accordion-header.active {
            background-color: #4ECDC4;
            color: white;
        }
        .accordion-content {
            padding: 0 15px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        }
        .accordion-content.show {
            padding: 15px;
            max-height: 2000px;
        }
        .entity-badge {
            background-color: #007bff;
            color: white;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 14px;
            font-weight: bold;
        }
        .confidence-high { color: #28a745; }
        .confidence-medium { color: #ffc107; }
        .confidence-low { color: #dc3545; }
    </style>
    
    <div class="accordion-container">
    """
    
    # Add shared entities section if any
    if 'SHARED_ENTITIES' in entity_groups:
        shared_entities_list = entity_groups['SHARED_ENTITIES']
        accordion_html += f"""
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <div>
                    <span style="font-size: 20px; margin-right: 10px;">🤝</span>
                    <strong>Shared Entities</strong>
                    <span class="entity-badge" style="margin-left: 10px;">{len(shared_entities_list)} found</span>
                </div>
                <span>▼</span>
            </div>
            <div class="accordion-content">
                {create_entity_table_html(shared_entities_list, 'SHARED_ENTITIES', '#666666', is_shared=True)}
            </div>
        </div>
        """
    
    # Add other entity types
    for entity_type, entities_of_type in entity_groups.items():
        if entity_type == 'SHARED_ENTITIES':
            continue
            
        colour = entity_colors.get(entity_type.upper(), '#f0f0f0')
        is_standard = entity_type in STANDARD_ENTITIES
        icon = "🎯" if is_standard else "✨"
        
        accordion_html += f"""
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <div>
                    <span style="font-size: 20px; margin-right: 10px;">{icon}</span>
                    <strong>{entity_type}</strong>
                    <span class="entity-badge" style="margin-left: 10px; background-color: {colour};">{len(entities_of_type)} found</span>
                </div>
                <span>▼</span>
            </div>
            <div class="accordion-content">
                {create_entity_table_html(entities_of_type, entity_type, colour)}
            </div>
        </div>
        """
    
    accordion_html += """
    </div>
    
    <script>
    function toggleAccordion(header) {
        const content = header.nextElementSibling;
        const arrow = header.querySelector('span:last-child');
        
        // Toggle active class
        header.classList.toggle('active');
        
        // Toggle content visibility
        content.classList.toggle('show');
        
        // Toggle arrow
        arrow.textContent = content.classList.contains('show') ? '▲' : '▼';
    }
    
    // Auto-expand first accordion
    document.addEventListener('DOMContentLoaded', function() {
        const firstAccordion = document.querySelector('.accordion-header');
        if (firstAccordion) {
            toggleAccordion(firstAccordion);
        }
    });
    </script>
    """
    
    return accordion_html

# Then in your process_text function, replace the tab creation with:
# tab_contents = create_entity_results_accordion(all_entities, entity_colors)
# And return it as a single HTML output instead of multiple tab outputs