small fixes for the ui cosmetics

app.py

@@ -39,28 +39,29 @@ 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"):
+            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"):
+            with gr.TabItem("URL Input", id="url_tab"):
                 url_input = gr.Textbox(
                     label="Enter Croissant JSON-LD URL",
-                    placeholder="https://huggingface.co/api/datasets/facebook/natural_reasoning/croissant"
+                    placeholder="e.g. https://huggingface.co/api/datasets/facebook/natural_reasoning/croissant"
                 )
                 fetch_btn = gr.Button("Fetch and Validate", variant="primary")
         
-        upload_progress = gr.HTML(
-            """<div class="progress-container">
-                 <div class="progress-status">Ready for validation</div>
-               </div>""", visible=True)
-        
-        validate_btn = gr.Button("Validate Uploaded File", variant="primary")
-        
-        # Create containers for validation results
-        validation_results = gr.HTML(visible=False)
-        
-        # Define CSS for the validation UI
+        # Define CSS for the validation UI - improved for dark mode compatibility
         gr.HTML("""
         <style>
         .gradio-container {
@@ -69,13 +70,13 @@ def create_ui():
         }
         .validation-step {
             margin-bottom: 15px;
-            border: 1px solid #e0e0e0;
+            border: 1px solid var(--border-color-primary, #e0e0e0);
             border-radius: 8px;
             overflow: hidden;
         }
         .step-header {
             padding: 10px 15px;
-            background-color: #f5f5f5;
+            background-color: var(--background-fill-secondary, #f5f5f5);
             display: flex;
             align-items: center;
             cursor: pointer;
@@ -115,9 +116,39 @@ def create_ui():
         .status-waiting {
             background-color: #9e9e9e;
         }
+        /* Dark mode specific styles */
+        .dark .step-header {
+            background-color: var(--background-fill-secondary, #2e2e2e);
+            color: var(--body-text-color, #ffffff);
+        }
+        .dark .step-title {
+            color: var(--body-text-color, #ffffff);
+        }
+        .dark .step-details {
+            color: var(--body-text-color, #ffffff);
+            background-color: var(--background-fill-primary, #1f1f1f);
+            padding: 10px 15px;
+        }
+        /* Add this to ensure details are also styled for light mode */
+        .step-details {
+            padding: 10px 15px;
+            background-color: var(--background-fill-primary, #ffffff);
+        }
         </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-container">
+                         <div class="progress-status">Ready for upload</div>
+                       </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)
+        
         def on_file_upload(file):
             if file is None:
                 return """<div class="progress-container">
@@ -137,9 +168,7 @@ def create_ui():
             try:
                 # Fetch JSON from URL
                 response = requests.get(url, timeout=10)
-                response.raise_for_status()  # Raise exception for 4XX/5XX status codes
-                
-                # Try to parse as JSON
+                response.raise_for_status()
                 json_data = response.json()
                 
                 # Show success message
@@ -149,18 +178,14 @@ def create_ui():
                 
                 # Validate the fetched JSON
                 results = []
-                
-                # Check 1: JSON validation (already done by parsing)
                 results.append(("JSON Format Validation", True, "✅ The URL returned valid JSON."))
                 
-                # Check 2: Croissant validation
                 croissant_valid, croissant_message = validate_croissant(json_data)
                 results.append(("Croissant Schema Validation", croissant_valid, croissant_message))
                 
                 if not croissant_valid:
                     return progress_html, build_results_html(results)
                 
-                # Check 3: Records validation
                 records_valid, records_message = validate_records(json_data)
                 results.append(("Records Generation Test", records_valid, records_message))
                 
@@ -183,7 +208,7 @@ def create_ui():
                        </div>""", gr.update(visible=False)
         
         def build_results_html(results):
-            # Extract the HTML generation logic to a reusable function
+            # Build validation results HTML
             html = '<div class="validation-results">'
             
             for i, (test_name, passed, message) in enumerate(results):
@@ -226,6 +251,7 @@ def create_ui():
             return build_results_html(results)
         
         # Connect UI events to functions
+        tabs.select(on_tab_change, None, [active_tab, upload_progress, validation_results])
         file_input.change(on_file_upload, inputs=file_input, outputs=[upload_progress, validation_results])
         validate_btn.click(on_validate, inputs=file_input, outputs=validation_results)
         fetch_btn.click(fetch_from_url, inputs=url_input, outputs=[upload_progress, validation_results])
@@ -233,7 +259,7 @@ def create_ui():
         # Footer
         gr.HTML("""
         <div style="text-align: center; margin-top: 20px;">
-            <p>Based on the <a href="https://github.com/mlcommons/croissant" target="_blank">Croissant format</a> from MLCommons.</p>
+            <p>Learn more about <a href="https://github.com/mlcommons/croissant" target="_blank">Croissant format</a>.</p>
         </div>
         """)