emoji fix

README.md

@@ -1,6 +1,6 @@
 ---
-title: Croissant Checker
-emoji: 😻
+title: Croissant Checker - Dev
+emoji: 🔎🥐
 colorFrom: yellow
 colorTo: yellow
 sdk: gradio

app.py

@@ -30,7 +30,7 @@ def process_file(file):
 
 def create_ui():
     with gr.Blocks(theme=gr.themes.Soft()) as app:
-        gr.Markdown("# Croissant JSON-LD Validator for NeurIPS")
+        gr.Markdown("# 🔎🥐 Croissant JSON-LD 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.
         The validator will check:
@@ -39,55 +39,75 @@ def create_ui():
         3. If records can be generated within a reasonable time
         """)
         
-        # Create containers for validation results - moved up for cleaner flow
-        validation_results = gr.HTML(visible=False)
-        upload_progress = gr.HTML(
-            """<div class="progress-container">
-                 <div class="progress-status">Ready for validation</div>
-               </div>""", visible=True)
-        
         # Track the active tab for conditional UI updates
         active_tab = gr.State("upload")  # Default to upload tab
         
-        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")
+        # 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")
             
-            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)
         
-        # Define CSS for the validation UI - improved for dark mode compatibility
+        # Now create the validation results section in a separate group
+        with gr.Group():
+            # Validation results
+            validation_results = gr.HTML(visible=False)
+        
+        # Define CSS for the validation UI
         gr.HTML("""
         <style>
+        /* Set max width and center the app */
         .gradio-container {
-            max-width: 800px;
-            margin: 0 auto;
+            max-width: 750px !important;
+            margin: 0 auto !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: 15px;
-            border: 1px solid var(--border-color-primary, #e0e0e0);
+            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;
-            background-color: var(--background-fill-secondary, #f5f5f5);
             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;
-            flex-grow: 1;
+            gap: 10px;
         }
+
+        /* Force text color to white in status indicators */
         .step-status {
-            margin-right: 10px;
             width: 24px;
             height: 24px;
             border-radius: 50%;
@@ -96,43 +116,53 @@ def create_ui():
             justify-content: center;
             font-weight: bold;
             color: white !important;
-            font-size: 16px;
-            text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
-        }
-        .arrow-indicator {
-            margin-left: 10px;
-            font-size: 16px;
-            transition: transform 0.3s ease;
-        }
-        .arrow-down {
-            transform: rotate(90deg);
         }
+
         .status-success {
-            background-color: #4caf50;
+            background-color: #4caf50 !important;
         }
+
         .status-error {
-            background-color: #f44336;
+            background-color: #f44336 !important;
         }
-        .status-waiting {
-            background-color: #9e9e9e;
+
+        .step-details {
+            padding: 12px 15px;
+            background-color: var(--body-background-fill) !important;
         }
-        /* Dark mode specific styles */
-        .dark .step-header {
-            background-color: var(--background-fill-secondary, #2e2e2e);
-            color: var(--body-text-color, #ffffff);
+
+        /* 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;
         }
-        .dark .step-title {
-            color: var(--body-text-color, #ffffff);
+
+        /* 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;
         }
-        .dark .step-details {
-            color: var(--body-text-color, #ffffff);
-            background-color: var(--background-fill-primary, #1f1f1f);
-            padding: 10px 15px;
+
+        /* Ensure buttons have proper styling */
+        button.primary, button[data-testid="primary-button"] {
+            background-color: var(--primary-500) !important;
+            color: white !important;
         }
-        /* Add this to ensure details are also styled for light mode */
-        .step-details {
-            padding: 10px 15px;
-            background-color: var(--background-fill-primary, #ffffff);
+
+        /* Arrow indicator for expandable sections */
+        .arrow-indicator {
+            font-size: 14px;
+            transition: transform 0.3s ease;
+        }
+        .arrow-down {
+            transform: rotate(90deg);
         }
         </style>
         """)
@@ -141,29 +171,19 @@ def create_ui():
         def on_tab_change(evt: gr.SelectData):
             tab_id = evt.value
             if tab_id == "Upload File":
-                return "upload", """<div class="progress-container">
-                         <div class="progress-status">Ready for upload</div>
-                       </div>""", gr.update(visible=False)
+                return "upload", """<div class="progress-status">Ready for upload</div>""", gr.update(visible=False)
             else:
-                return "url", """<div class="progress-container">
-                         <div class="progress-status">Enter a URL to fetch</div>
-                       </div>""", gr.update(visible=False)
+                return "url", """<div class="progress-status">Enter a URL to fetch</div>""", gr.update(visible=False)
         
         def on_file_upload(file):
             if file is None:
-                return """<div class="progress-container">
-                         <div class="progress-status">Ready for upload</div>
-                       </div>""", gr.update(visible=False)
+                return """<div class="progress-status">Ready for upload</div>""", gr.update(visible=False)
             
-            return """<div class="progress-container">
-                     <div class="progress-status">✅ File uploaded successfully</div>
-                   </div>""", gr.update(visible=False)
+            return """<div class="progress-status">✅ File uploaded successfully</div>""", gr.update(visible=False)
         
         def fetch_from_url(url):
             if not url:
-                return """<div class="progress-container">
-                         <div class="progress-status">Please enter a URL</div>
-                       </div>""", gr.update(visible=False)
+                return """<div class="progress-status">Please enter a URL</div>""", gr.update(visible=False)
             
             try:
                 # Fetch JSON from URL
@@ -172,9 +192,7 @@ def create_ui():
                 json_data = response.json()
                 
                 # Show success message
-                progress_html = """<div class="progress-container">
-                                 <div class="progress-status">✅ JSON fetched successfully from URL</div>
-                               </div>"""
+                progress_html = """<div class="progress-status">✅ JSON fetched successfully from URL</div>"""
                 
                 # Validate the fetched JSON
                 results = []
@@ -193,19 +211,13 @@ def create_ui():
                 
             except requests.exceptions.RequestException as e:
                 error_message = f"❌ Error fetching URL: {str(e)}"
-                return f"""<div class="progress-container">
-                         <div class="progress-status">{error_message}</div>
-                       </div>""", gr.update(visible=False)
+                return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
             except json.JSONDecodeError as e:
                 error_message = f"❌ URL did not return valid JSON: {str(e)}"
-                return f"""<div class="progress-container">
-                         <div class="progress-status">{error_message}</div>
-                       </div>""", gr.update(visible=False)
+                return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
             except Exception as e:
                 error_message = f"❌ Unexpected error: {str(e)}"
-                return f"""<div class="progress-container">
-                         <div class="progress-status">{error_message}</div>
-                       </div>""", gr.update(visible=False)
+                return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
         
         def build_results_html(results):
             # Build validation results HTML