app.py

import requests
import os
import gradio as gr
import gradio_client.utils as _gc_utils
import json
import time
import traceback
from validation import validate_json, validate_croissant, validate_records, validate_rai, generate_validation_report, set_active_token, clear_active_token

# Patch gradio_client.utils to handle boolean JSON schemas.
# gradio_client 1.7.2 crashes when a component schema has `additionalProperties: true/false`.
# The inner recursive function _json_schema_to_python_type receives True/False and either
# raises TypeError ("argument of type 'bool' is not iterable") or APIInfoParseError.
# Patching the inner function is the correct fix since it's called recursively.
_orig_json_schema_to_python_type = _gc_utils._json_schema_to_python_type
def _safe_json_schema_to_python_type(schema, defs=None):
    if not isinstance(schema, dict):
        return "any"
    return _orig_json_schema_to_python_type(schema, defs)
_gc_utils._json_schema_to_python_type = _safe_json_schema_to_python_type

# HF Spaces embeds the app in an iframe. Gradio's LoginButton uses window.location.assign()
# which navigates the iframe itself, causing cookie issues in Safari and redirect loops in
# incognito. HF docs recommend using target=_blank to open OAuth in a new tab instead.
import gradio.components.login_button as _login_btn_mod
_login_btn_mod._js_handle_redirect = """
(buttonValue) => {
    const path = buttonValue === BUTTON_DEFAULT_VALUE ? '/login/huggingface' : '/logout';
    const url = window.location.origin + path + window.location.search;
    window.parent?.postMessage({ type: "SET_SCROLLING", enabled: true }, "*");
    setTimeout(() => { window.open(url, '_blank'); }, 500);
}
"""

def process_file(file):
    results = []
    json_data = None

    filename = file.name.split("/")[-1]

    # Check 1: JSON validation
    json_valid, json_message, json_data = validate_json(file.name)
    json_message = json_message.replace("\n✓\n", "\n")
    results.append(("JSON Format Validation", json_valid, json_message, "pass" if json_valid else "error"))

    if not json_valid:
        return results, None

    # Check 2: Croissant validation
    croissant_valid, croissant_message, croissant_status = validate_croissant(json_data)
    croissant_message = croissant_message.replace("\n✓\n", "\n")
    results.append(("Croissant Schema Validation", croissant_valid, croissant_message, croissant_status))

    if not croissant_valid:
        return results, None

    # Check 3: Responsible AI metadata
    rai_valid, rai_message = validate_rai(json_data)
    results.append(("Responsible AI Metadata", rai_valid, rai_message, "pass" if rai_valid else "error"))

    # Check 4: Records validation (with timeout-safe and error-specific logic)
    records_valid, records_message, records_status = validate_records(json_data)
    records_message = records_message.replace("\n✓\n", "\n")
    results.append(("Records Generation Test", records_valid, records_message, records_status))

    # Generate final report
    report = generate_validation_report(filename, json_data, results)

    return results, report

def create_ui():
    with gr.Blocks(theme=gr.themes.Soft()) as app:
        gr.HTML("<p align='center'><img src='https://upload.wikimedia.org/wikipedia/en/0/08/Logo_for_Conference_on_Neural_Information_Processing_Systems.svg' alt='NeurIPS Logo' width='400'/></p>")
        gr.Markdown("# 🥐 Croissant Validator for NeurIPS")
        gr.Markdown("""
        Upload your Croissant JSON-LD file or enter a URL to validate if it meets the requirements for NeurIPS submission. <a href="https://blog.neurips.cc/2025/03/10/neurips-datasets-benchmarks-raising-the-bar-for-dataset-submissions/">Read more about why this is required.</a>.
        
        *It doesn't matter where your dataset is hosted. It can be Hugging Face, Kaggle, OpenML, Harvard Dataverse, self-hosted, or elsewhere.* 
        """)
        gr.Markdown("""
        The validator will check:
        1. If the file is valid JSON
        2. If it passes Croissant schema validation
        3. If all required Responsible AI metadata fields are present
        4. If records can be generated within a reasonable time
        """)

        gr.HTML("""
        <style>
        #login-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 16px 24px !important;
            border: 1px solid rgba(128,128,128,0.35) !important;
            border-radius: 10px !important;
            background-color: rgba(0,0,0,0.03) !important;
            margin-bottom: 16px !important;
        }
        #login-card > * {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }
        #login-card .login-button {
            background-color: white !important;
            color: black !important;
            border: 1px solid #ccc !important;
            font-size: 13px !important;
            font-weight: 400 !important;
        }
        </style>
        """)
        if os.environ.get("SPACE_ID"):
            with gr.Column(elem_id="login-card"):
                gr.HTML("<p style='text-align:center; margin:0;'>"
                        "If your dataset is hosted on Hugging Face, please log in to avoid rate limiting issues. "
                        "If your dataset is not on Hugging Face, you can still use the validator without logging in.</p>")
                gr.LoginButton(variant="secondary", icon=None, scale=0, elem_classes=["login-button"])

        # Track the active tab for conditional UI updates
        active_tab = gr.State("upload")  # Default to upload tab
        
        # Create a container for the entire input section
        with gr.Group():
            # Input tabs
            with gr.Tabs() as tabs:
                with gr.TabItem("Upload File", id="upload_tab"):
                    file_input = gr.File(label="Upload Croissant JSON-LD File", file_types=[".json", ".jsonld"])
                    validate_btn = gr.Button("Validate Uploaded File", variant="primary")
                
                with gr.TabItem("URL Input", id="url_tab"):
                    url_input = gr.Textbox(
                        label="Enter Croissant JSON-LD URL",
                        placeholder="e.g. https://huggingface.co/api/datasets/facebook/natural_reasoning/croissant"
                    )
                    fetch_btn = gr.Button("Fetch and Validate", variant="primary")
            
            # Change initial message to match upload tab
            upload_progress = gr.HTML( 
                """<div class="progress-status">Ready for upload</div>""", 
                visible=True)
        
        # Now create the validation results section in a separate group
        with gr.Group():
            # Validation results
            validation_results = gr.HTML(value="", visible=True)            
            validation_progress = gr.HTML(visible=False)

            # Collapsible report section
            with gr.Accordion("Download full validation report", visible=False, open=False) as report_group:
                with gr.Column():
                    report_md = gr.File(
                        label="Download Report",
                        visible=True,
                        file_types=[".md"]
                    )
                    report_text = gr.Textbox(
                        label="Report Content", 
                        visible=True,
                        lines=10,
                        elem_id="report-text-box"
                    )
        
        # Define CSS for the validation UI
        gr.HTML("""
        <style>
        /* Import Google Sans from Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&display=swap');

        /* Set max width and center the app */
        .gradio-container {
            max-width: 750px !important;
            margin: 0 auto !important;
            font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
            font-size: 16px !important;
        }

        .gradio-container * {
            font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }

        /* Breathing room inside tabs and groups */
        .gradio-container .tab-nav {
            gap: 6px !important;
        }
        .gradio-container .tabs {
            padding-top: 14px !important;
        }
        .gradio-container .tab-nav button {
            font-size: 15px !important;
            padding: 12px 22px !important;
        }
        .gradio-container .tabitem button[class*="primary"] {
            margin-top: 12px !important;
            margin-bottom: 4px !important;
        }
        .gradio-container label, .gradio-container .label-wrap {
            font-size: 15px !important;
            margin-bottom: 6px !important;
        }

        /* Make basic containers transparent */
        .gr-group, .gr-box, .gr-panel, .gradio-box, .gradio-group {
            background-color: var(--body-background-fill) !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Style for expandable validation steps */
        .validation-step {
            margin-bottom: 12px;
            border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.2));
            border-radius: 8px;
            overflow: hidden;
        }

        .step-header {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.03) !important;
        }

        .step-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Force text color to white in status indicators */
        .step-status {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white !important;
        }

        .status-success {
            background-color: #4caf50 !important;
        }

        .status-error {
            background-color: #f44336 !important;
        }
                
        .status-warning {
           background-color: #ff9800 !important; /* Amber for warnings */
        }

        .step-details {
            padding: 12px 15px;
            background-color: var(--body-background-fill) !important;
        }

        /* User hints styling - italic, smaller, better positioned */
        .progress-status {
            font-style: italic;
            font-size: 0.9em;
            color: var(--body-text-color-subdued);
            padding: 8px 0;
            margin-top: 5px;
            width: 100%;
            background: none !important;
            border: none !important;
            text-align: center;
        }

        /* Override input containers to match page background */
        .gr-input-container, .gr-form, .gr-input, .gr-box, .gr-panel,
        .file-preview, .file-preview > div {
            background-color: var(--body-background-fill) !important;
        }

        /* Ensure buttons have proper styling */
        button.primary, button[data-testid="primary-button"] {
            background-color: var(--primary-500) !important;
            color: white !important;
        }

        /* Arrow indicator for expandable sections */
        .arrow-indicator {
            font-size: 14px;
            transition: transform 0.3s ease;
            transform: rotate(0deg);  /* Point right by default */
        }
        .arrow-down {
            transform: rotate(90deg);  /* Point down when expanded */
        }
        
        /* Loading animation */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: var(--primary-500);
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .validation-progress {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            margin: 10px 0;
            background-color: var(--background-fill-secondary);
            border-radius: 8px;
        }
        /* Override Gradio's default accordion arrow */
        .gr-accordion {
            position: relative;
        }
        .gr-accordion > .label-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-right: 32px;  /* Make room for the arrow */
        }
        .gr-accordion > .label-wrap::after {
            content: "▶";
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.3s ease;
            font-size: 0.8em;
        }
        .gr-accordion[data-open=true] > .label-wrap::after {
            transform: translateY(-50%) rotate(90deg);
        }
        /* Consistent arrow styling for both validation steps and accordion */
        .validation-step .step-header,
        .gr-accordion > .label-wrap {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .validation-step .arrow-indicator,
        .gr-accordion > .label-wrap::after {
            content: "▶";
            font-size: 0.8em;
            margin-left: 8px;
            transition: transform 0.3s ease;
        }
        /* Remove absolute positioning and right alignment for accordion arrow */
        .gr-accordion > .label-wrap {
            padding-right: 0;  /* Remove extra padding */
        }
        .gr-accordion > .label-wrap::after {
            position: static;  /* Remove absolute positioning */
            right: auto;
            transform: none;
        }
        /* Consistent rotation for expanded state */
        .validation-step .arrow-down,
        .gr-accordion[data-open=true] > .label-wrap::after {
            transform: rotate(90deg);
        }

        /* Prevent report textbox from bubbling scroll to the page */
        #report-text-box textarea {
            overflow-y: auto !important;
            overscroll-behavior: contain;
        }
        </style>
        """)
        
        # Update helper messages based on tab changes
        def on_tab_change(evt: gr.SelectData):
            tab_id = evt.value
            if tab_id == "Upload File":
                return [
                    "upload",
                    """<div class="progress-status">Ready for upload</div>""",
                    gr.update(value=""),  # Clear validation results
                    gr.update(visible=False),  # Hide report group
                    None,  # Clear report text
                    None,  # Clear report file
                    None,  # Clear file input
                    gr.update(value="")  # Clear URL input
                ]
            else:
                return [
                    "url",
                    """<div class="progress-status">Enter a URL to fetch</div>""",
                    gr.update(value=""),  # Clear validation results
                    gr.update(visible=False),  # Hide report group
                    None,  # Clear report text
                    None,  # Clear report file
                    None,  # Clear file input
                    gr.update(value="")  # Clear URL input
                ]

        def on_copy_click(report):
            return report

        def on_download_click(report, file_name):
            report_file = f"report_{file_name}.md"
            with open(report_file, "w") as f:
                f.write(report)
            return report_file
        
        def on_file_upload(file):
            if file is None:
                return [
                    """<div class="progress-status">Ready for upload</div>""",
                    gr.update(value=""),  # Clear validation results
                    gr.update(visible=False),  # Hide report group
                    None,  # Clear report text
                    None   # Clear report file
                ]

            return [
                """<div class="progress-status">✅ File uploaded successfully</div>""",
                gr.update(value=""),  # Clear validation results
                gr.update(visible=False),  # Hide report group
                None,  # Clear report text
                None   # Clear report file
            ]
                
        def fetch_from_url(url, oauth_token: gr.OAuthToken | None = None):
            if not url:
                yield [
                    """<div class="progress-status">Please enter a URL</div>""",
                    gr.update(value=""),
                    gr.update(visible=False),
                    None,
                    None
                ]
                return
            try:
                # Fetch JSON from URL
                response = requests.get(url, timeout=10)
                response.raise_for_status()
                json_data = response.json()

                results = []
                results.append(("JSON Format Validation", True, "The URL returned valid JSON."))

                croissant_valid, croissant_message, croissant_status = validate_croissant(json_data)
                results.append(("Croissant Schema Validation", croissant_valid, croissant_message, croissant_status))

                if not croissant_valid:
                    yield [
                        """<div class="progress-status">✅ JSON fetched successfully from URL</div>""",
                        build_results_html(results),
                        gr.update(visible=False),
                        None,
                        None
                    ]
                    return

                # Responsible AI metadata (fast)
                rai_valid, rai_message = validate_rai(json_data)
                results.append(("Responsible AI Metadata", rai_valid, rai_message, "pass" if rai_valid else "error"))

                # Show partial results while records test runs
                records_spinner = """<div class="validation-progress"><div class="loading-spinner"></div><span>Running records generation test...</span></div>"""
                yield [
                    """<div class="progress-status">✅ JSON fetched successfully from URL</div>""",
                    gr.update(value=build_results_html(results)["value"] + records_spinner, visible=True),
                    gr.update(visible=False),
                    None,
                    None
                ]

                # Records validation (slow)
                set_active_token(oauth_token.token if oauth_token else None)
                try:
                    records_valid, records_message, records_status = validate_records(json_data)
                finally:
                    clear_active_token()
                results.append(("Records Generation Test (Optional)", records_valid, records_message, records_status))

                report = generate_validation_report(url.split("/")[-1], json_data, results)
                report_filename = f"report_croissant-validation_{json_data.get('name', 'unnamed')}.md"
                if report:
                    with open(report_filename, "w") as f:
                        f.write(report)

                yield [
                    """<div class="progress-status">✅ JSON fetched successfully from URL</div>""",
                    build_results_html(results),
                    gr.update(visible=True),
                    report,
                    report_filename
                ]

            except requests.exceptions.RequestException as e:
                error_message = f"Error fetching URL: {str(e)}"
                yield [
                    f"""<div class="progress-status">{error_message}</div>""",
                    gr.update(value=""),
                    gr.update(visible=False),
                    None,
                    None
                ]
            except json.JSONDecodeError as e:
                error_message = f"URL did not return valid JSON: {str(e)}"
                yield [
                    f"""<div class="progress-status">{error_message}</div>""",
                    gr.update(value=""),
                    gr.update(visible=False),
                    None,
                    None
                ]
            except Exception as e:
                error_message = f"Unexpected error: {str(e)}"
                yield [
                    f"""<div class="progress-status">{error_message}</div>""",
                    gr.update(value=""),
                    gr.update(visible=False),
                    None,
                    None
                ]
        
        def build_results_html(results):
            html = '<div class="validation-results">'

            for i, result in enumerate(results):
                if len(result) == 4:
                    test_name, passed, message, status = result
                else:
                    test_name, passed, message = result
                    status = "pass" if passed else "error"

                if status == "pass":
                    status_class = "status-success"
                    status_icon = "✓"
                    message_with_emoji = "✅ " + message
                elif status == "warning":
                    status_class = "status-warning"
                    status_icon = "?"
                    if "Records" in test_name:
                        if "429" in message or "Too Many Requests" in message or "rate limit" in message.lower():
                            message_with_emoji = (
                                "⚠️ Rate limit hit while trying to generate records. "
                                "Log in with your Hugging Face account (button above) to use your own token and avoid this.\n\n"
                                + message
                            )
                        else:
                            message_with_emoji = "⚠️ Could not automatically generate records. This is oftentimes not an issue (e.g. datasets could be too large or too complex), and it's not required to pass this test to submit to NeurIPS.\n\n" + message
                    else:
                        message_with_emoji = "⚠️ " + message
                else:  # error
                    status_class = "status-error"
                    status_icon = "✗"
                    message_with_emoji = "❌ " + message
                
                message_with_emoji = message_with_emoji.replace("\n", "<br>")

                html += f'''
                <div class="validation-step" id="step-{i}">
                    <div class="step-header" onclick="
                        var details = document.getElementById('details-{i}');
                        var arrow = document.getElementById('arrow-{i}');
                        if(details.style.display === 'none') {{
                            details.style.display = 'block';
                            arrow.classList.add('arrow-down');
                        }} else {{
                            details.style.display = 'none';
                            arrow.classList.remove('arrow-down');
                        }}">
                        <div class="step-left">
                            <div class="step-status {status_class}">{status_icon}</div>
                            <span class="step-title">{test_name}</span>
                            <span class="arrow-indicator" id="arrow-{i}">▶</span>
                        </div>
                    </div>
                    <div class="step-details" id="details-{i}" style="display: none;">
                        {message_with_emoji}
                    </div>
                </div>
                '''

            html += '</div>'
            return gr.update(value=html, visible=True)

        def on_validate(file, oauth_token: gr.OAuthToken | None = None):
            if file is None:
                yield [
                    gr.update(value=""),  # validation_results
                    gr.update(visible=False),  # validation_progress
                    gr.update(visible=False),  # report_group
                    None,  # report_text
                    None   # report_md
                ]
                return

            # Show initial spinner
            progress_html = """
            <div class="validation-progress">
                <div class="loading-spinner"></div>
                <span>Validating file...</span>
            </div>
            """
            yield [
                gr.update(value=""),
                gr.update(visible=True, value=progress_html),
                gr.update(visible=False),
                None,
                None
            ]

            results = []
            filename = file.name.split("/")[-1]

            # Check 1: JSON
            json_valid, json_message, json_data = validate_json(file.name)
            json_message = json_message.replace("\n✓\n", "\n")
            results.append(("JSON Format Validation", json_valid, json_message, "pass" if json_valid else "error"))
            if not json_valid:
                yield [build_results_html(results), gr.update(visible=False), gr.update(visible=False), None, None]
                return

            # Check 2: Croissant schema
            croissant_valid, croissant_message, croissant_status = validate_croissant(json_data)
            croissant_message = croissant_message.replace("\n✓\n", "\n")
            results.append(("Croissant Schema Validation", croissant_valid, croissant_message, croissant_status))
            if not croissant_valid:
                yield [build_results_html(results), gr.update(visible=False), gr.update(visible=False), None, None]
                return

            # Check 3: Responsible AI metadata (fast)
            rai_valid, rai_message = validate_rai(json_data)
            results.append(("Responsible AI Metadata", rai_valid, rai_message, "pass" if rai_valid else "error"))

            # Show partial results + spinner for records test
            records_spinner = """
            <div class="validation-progress">
                <div class="loading-spinner"></div>
                <div>
                    <div>Running records generation test...</div>
                    <div>This test tries to load your data and may be slow for large datasets.</div>
                    <div>It's not strictly required to pass this test to submit to NeurIPS. You can still submit your Croissant file if this test takes too long.</div>
                </div>
            </div>
            """
            yield [
                build_results_html(results),
                gr.update(visible=True, value=records_spinner),
                gr.update(visible=False),
                None,
                None
            ]

            # Check 4: Records (slow)
            set_active_token(oauth_token.token if oauth_token else None)
            try:
                records_valid, records_message, records_status = validate_records(json_data)
            finally:
                clear_active_token()
            records_message = records_message.replace("\n✓\n", "\n")
            results.append(("Records Generation Test", records_valid, records_message, records_status))

            # Generate report
            report = generate_validation_report(filename, json_data, results)
            dataset_name = json_data.get('name', 'unnamed') if isinstance(json_data, dict) else 'unnamed'
            report_filename = f"report_croissant-validation_{dataset_name}.md"
            if report:
                with open(report_filename, "w") as f:
                    f.write(report)

            yield [
                build_results_html(results),
                gr.update(visible=False),
                gr.update(visible=True) if report else gr.update(visible=False),
                report if report else None,
                report_filename if report else None
            ]

        # Connect UI events to functions with updated outputs
        tabs.select(
            on_tab_change,
            None,
            [active_tab, upload_progress, validation_results, report_group, report_text, report_md, file_input, url_input]
        )
        file_input.change(
            on_file_upload,
            inputs=file_input,
            outputs=[upload_progress, validation_results, report_group, report_text, report_md]
        )

        # Add progress state handling
        def show_progress():
            progress_html = """
            <div class="validation-progress">
                <div class="loading-spinner"></div>
                <span>Validating file...</span>
            </div>
            """
            return [
                gr.update(visible=False),  # validation_results
                gr.update(visible=True, value=progress_html),  # validation_progress
                gr.update(visible=False),  # report_group
                None,  # report_text
                None   # report_md
            ]

        validate_btn.click(
            fn=on_validate,
            inputs=file_input,
            outputs=[validation_results, validation_progress, report_group, report_text, report_md]
        )

        fetch_btn.click(
            fetch_from_url,
            inputs=url_input,
            outputs=[upload_progress, validation_results, report_group, report_text, report_md]
        )

        # Footer
        gr.HTML("""
        <div style="text-align: center; margin-top: 20px;">
            <p>Learn more about  🥐 <a href="https://github.com/mlcommons/croissant" target="_blank">Croissant</a>.</p>
        </div>
        """)

        gr.HTML("""
        <div class="progress-status" style="text-align: left; color: #d35400;">
            ⚠️ It is possible that this validator is currently being used by a lot of people at the same time, which may trigger rate limiting by the platform hosting your data. 
            The app will then try again and may get into a very long loop. If it takes too long to run, we recommend using any of the following options:
            <ul style="text-align:left; margin: 12px auto 0; display:inline-block;">
                <li>🤗 If your dataset is on Hugging Face, please log in first to avoid rate limiting issues.</li>
                <li>🔁 Click the button with the three dots (⋯) above and select "Duplicate this Space" to run this app in your own Hugging Face space.</li>
                <li>💻 Click the button with the three dots (⋯) above and select "Run Locally" and then "Clone (git)" to get instructions to run the checker locally. You can also use docker option (you don't need the tokens).</li>
                <li>🥐 Run the Croissant validation code yourself (<a href="https://github.com/mlcommons/croissant" target="_blank">GitHub</a>), e.g. with <a href="https://github.com/mlcommons/croissant/tree/7a632f34438e9c8e3812c6a0049898560259c6d4/python/mlcroissant/mlcroissant/scripts" target="_blank">these scripts</a> (validate and load).</li>
            </ul>
        </div>
        """)
    
    return app

if __name__ == "__main__":
    app = create_ui()
    app.launch()