src/display/css_html_js.py

leaderboard_css = """

.markdown-text {
    font-size: 16px !important;
}

#models-to-add-text {
    font-size: 18px !important;
}

#citation-button span {
    font-size: 16px !important;
}

#citation-button textarea {
    font-size: 16px !important;
}

#citation-button > label > button {
    margin: 6px;
    transform: scale(1.3);
}

#leaderboard-table {
    margin-top: 15px
}

#leaderboard-table-lite {
    margin-top: 15px
}

#search-bar-table-box > div:first-child {
    background: none;
    border: none;
}
 
#search-bar {
    padding: 0px;
}

/* Limit the width of the first AutoEvalColumn so that names don't expand too much */
#leaderboard-table td:nth-child(2),
#leaderboard-table th:nth-child(2) {
    max-width: 400px;
    overflow: auto;
    white-space: nowrap;
}

#scale-logo {
    border-style: none !important;
    box-shadow: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

#scale-logo .download {
    display: none;
}
#filter_type{
    border: 0;
    padding-left: 0;
    padding-top: 0;
}
#filter_type label {
    display: flex;
}
#filter_type label > span{
    margin-top: var(--spacing-lg);
    margin-right: 0.5em;
}
#filter_type label > .wrap{
    width: 103px;
}
#filter_type label > .wrap .wrap-inner{  
    padding: 2px;
}
#filter_type label > .wrap .wrap-inner input{
    width: 1px
}
#filter-columns-type{
    border:0;
    padding:0.5;
}
#filter-columns-size{
    border:0;
    padding:0.5;
}
#box-filter > .form{
    border: 0
}
"""


workflow_json_css = """
/* Workflow JSON styling */
.workflow-json-container {
    margin-top: 20px;
    margin-bottom: 30px;
}

.workflow-json {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.workflow-json pre {
    max-height: 500px;
    overflow-y: auto;
}

"""

get_window_url_params = """
    function(url_params) {
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return url_params;
    }
    """


fonts_header = """
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
"""

js_head = """
<script>
    const gradioApp = document.getElementsByTagName('gradio-app')[0];
    console.log("Gradio app:", gradioApp);
    console.log(gradioApp.querySelectorAll('.token'));
    console.log(document.querySelectorAll('.token'));

    // Function to trigger Python callback
    const setHiddenIndex = (index) => {
        console.log("Setting hidden index to:", index);
        const hiddenIndex = gradioApp.querySelector("#hidden-index textarea");
        if (hiddenIndex) {
            hiddenIndex.value = index;
            let event = new Event("input", { bubbles: true});
            Object.defineProperty(event, "target", { value: hiddenIndex});
            hiddenIndex.dispatchEvent(event);
        }
    };

    // Add event listeners to all tokens
    function setupTokenListeners() {
        const tokens = gradioApp.querySelectorAll('.token');
        console.log("Tokens:", tokens);
        tokens.forEach(token => {
            token.addEventListener('mouseover', function() {
                const index = parseInt(this.getAttribute('data-index'));
                console.log("Mouseover token index:", index);

                // Reset all tokens
                gradioApp.querySelectorAll('.token').forEach(el => {
                    el.classList.remove('highlighted');
                });

                // Highlight this token
                this.classList.add('highlighted');

                // Update the hidden index to trigger the Python callback
                setHiddenIndex(index);
            });
        });
    }
    console.log("Preamble complete");

    document.addEventListener("DOMContentLoaded", function() {
        // Setup initial listeners
        console.log("DOM fully loaded and parsed");
        setupTokenListeners();

        // Setup a mutation observer to handle dynamically added tokens
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    setupTokenListeners();
                }
            });
        });

        // Start observing the token container for changes
        const tokenContainer = gradioApp.querySelector('.token-container');
        console.log("Token container:", tokenContainer);
        if (tokenContainer) {
            observer.observe(tokenContainer.parentNode, { childList: true, subtree: true });
        }
        console.log("Listener setup complete");
    });
</script>
"""