.streamlit/custom.py

import streamlit as st

def apply_custom_css():
    """Apply custom CSS to fix UI issues on Huggingface Spaces"""
    st.markdown("""
    <style>
    /* Fix for stacking UI issues */
    .element-container {
        overflow-anchor: none !important;
    }
    
    /* Fix for main content area */
    .stApp {
        min-height: 100vh;
        overflow-y: auto;
    }
    
    /* Improve sidebar styling */
    .css-1d391kg {
        padding-top: 2rem;
    }
    
    /* Fix for scrolling issues */
    .main .block-container {
        max-width: 100%;
        padding: 1rem;
    }
    
    /* Hide empty elements */
    .element-container:empty {
        display: none;
    }
    
    /* Custom tabs styling */
    .stTabs [data-baseweb="tab-list"] {
        gap: 2px;
    }
    
    .stTabs [data-baseweb="tab"] {
        height: 50px;
        white-space: pre-wrap;
        background-color: #F0F2F6;
        border-radius: 4px 4px 0 0;
        gap: 1px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .stTabs [aria-selected="true"] {
        background-color: #FFFFFF !important;
        border-bottom: 2px solid #4CAF50;
    }
    
    /* Chat container styling */
    [data-testid="stChatMessageContent"] {
        background-color: #F0F2F6;
        border-radius: 10px;
        padding: 8px 12px;
    }
    
    [data-testid="stChatMessage"] [data-testid="stChatMessageContent"] code {
        background-color: rgba(0,0,0,0.1);
    }
    
    /* Hide duplicate header after page switches */
    .duplicated-header {
        display: none;
    }
    
    /* Fix for any layout issues specific to Huggingface */
    @media screen and (max-width: 1200px) {
        .row-widget.stButton {
            width: 100%;
        }
    }
    </style>
    """, unsafe_allow_html=True)

def apply_custom_js():
    """Apply custom JavaScript to fix UI issues on Huggingface Spaces"""
    st.markdown("""
    <script>
    // Function to clean up UI by removing duplicated elements
    function cleanupUI() {
        // Wait for the page to fully load
        setTimeout(function() {
            // Find headers that might be duplicated
            const headers = document.querySelectorAll('h1, h2');
            const seen = new Set();
            
            headers.forEach((header, index) => {
                const text = header.innerText;
                if (seen.has(text) && index > 0) {
                    // Mark duplicates
                    header.classList.add('duplicated-header');
                    header.style.display = 'none';
                }
                seen.add(text);
            });
            
            // Fix any scrolling issues
            document.querySelector('.stApp').scrollTop = 0;
        }, 1000);
    }
    
    // Run cleanup when DOM is ready
    document.addEventListener('DOMContentLoaded', cleanupUI);
    
    // Also run cleanup when Streamlit's internal events happen
    const observer = new MutationObserver((mutations) => {
        cleanupUI();
    });
    
    // Start observing changes in the main container
    window.addEventListener('load', () => {
        const mainContainer = document.querySelector('.main');
        if (mainContainer) {
            observer.observe(mainContainer, { 
                childList: true,
                subtree: true 
            });
        }
    });
    </script>
    """, unsafe_allow_html=True)

def init():
    """Initialize custom CSS and JS"""
    apply_custom_css()
    apply_custom_js()