small updates

app.py

@@ -77,6 +77,8 @@ def create_ui():
             justify-content: center;
             font-weight: bold;
             color: white;
+            font-size: 16px;
+            text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
         }
         .status-waiting {
             background-color: #9e9e9e;
@@ -111,11 +113,11 @@ def create_ui():
             if file is None:
                 return """<div class="progress-container">
                          <div class="progress-status">Ready for upload</div>
-                       </div>"""
+                       </div>""", gr.update(visible=False)
             
             return """<div class="progress-container">
                      <div class="progress-status">✅ File uploaded successfully</div>
-                   </div>"""
+                   </div>""", gr.update()
         
         def on_validate(file):
             if file is None:
@@ -134,7 +136,7 @@ def create_ui():
                 
                 html += f'''
                 <div class="validation-step" id="step-{i}">
-                    <div class="step-header" onclick="toggleDetails({i})">
+                    <div class="step-header" onclick="document.getElementById('details-{i}').style.display = document.getElementById('details-{i}').style.display === 'none' ? 'block' : 'none'">
                         <div class="step-status {status_class}">{status_icon}</div>
                         <div class="step-title">{test_name}</div>
                     </div>
@@ -146,28 +148,14 @@ def create_ui():
             
             html += '</div>'
             
-            # Add JavaScript to handle toggling details
-            html += '''
-            <script>
-                function toggleDetails(id) {
-                    const details = document.getElementById('details-' + id);
-                    if (details.style.display === 'none') {
-                        details.style.display = 'block';
-                    } else {
-                        details.style.display = 'none';
-                    }
-                }
-            </script>
-            '''
-            
             return gr.update(value=html, visible=True)
         
-        file_input.change(on_file_upload, inputs=file_input, outputs=upload_progress)
+        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)
         
         gr.HTML("""
         <div style="text-align: center; margin-top: 20px;">
-            <p>Based on the <a href="https://github.com/mlcommons/croissant" target="_blank">Croissant standard</a> from MLCommons.</p>
+            <p>Based on the <a href="https://github.com/mlcommons/croissant" target="_blank">Croissant format</a> from MLCommons.</p>
         </div>
         """)