ui update

app.py

@@ -413,8 +413,9 @@ def build_interface():
             with gr.Tabs():
                 # Predictions Tab
                 with gr.Tab("Make Predictions"):
-                    # Input Section
+                    # Create a two-column layout
                     with gr.Row():
+                        # Left column for inputs
                         with gr.Column(scale=1):
                             input_file = gr.File(
                                 label="Upload JSON File", 
@@ -429,10 +430,8 @@ def build_interface():
                                 info="Lower values will result in more predictions, higher values in more human review cases"
                             )
                             predict_btn = gr.Button("Make Predictions", variant="primary")
-                    
-                    # Validation and Download Section (Moved above predictions)
-                    with gr.Row():
-                        with gr.Column(scale=1):
+                            
+                            # Validation output in left column
                             validation_output = gr.Textbox(
                                 label="Validation Steps",
                                 lines=3,
@@ -443,18 +442,25 @@ def build_interface():
                                 label="Download Predictions",
                                 value=""
                             )
-                    
-                    # Predictions Section with updated styling
-                    with gr.Row():
-                        predictions_df = gr.DataFrame(
-                            headers=['SKU', 'MfrID', 'Class', 'Confidence Score'],
-                            label="Predictions",
-                            value=None,
-                            wrap=True,
-                            column_widths=['150px', '150px', '300px', '150px'],
-                            interactive=False,
-                            elem_classes="predictions-table"
-                        )
+                        
+                        # Right column for predictions, taking more space
+                        with gr.Column(scale=2):
+                            predictions_df = gr.DataFrame(
+                                headers=[
+                                    'SKU', 
+                                    'MfrID', 
+                                    'Predicted_Class',
+                                    'Confidence CLass', 
+                                    'Confidence Score',
+                                    'Second_Best_Class',
+                                    'Second_Best_Score'
+                                ],
+                                label="Predictions",
+                                value=None,
+                                wrap=True,
+                                height=600,
+                                interactive=False
+                            )
 
                 # Diagnostics Tab
                 with gr.Tab("Diagnostics"):
@@ -465,18 +471,10 @@ def build_interface():
                         )
                         analyze_btn = gr.Button("Run Diagnostic Analysis", variant="secondary")
                     
-                    with gr.Row():
-                        diagnostic_output = gr.Textbox(
-                            label="Diagnostic Results",
-                            lines=20,
-                            max_lines=30,
-                            elem_classes="diagnostic-output"
-                        )
-                    
-                    analyze_btn.click(
-                        create_diagnostic_output,
-                        inputs=[diagnostic_file],
-                        outputs=[diagnostic_output]
+                    diagnostic_output = gr.Textbox(
+                        label="Diagnostic Results",
+                        lines=20,
+                        max_lines=30
                     )
                 
                 # Help Tab
@@ -487,55 +485,99 @@ def build_interface():
                     2. Adjust the confidence threshold if needed
                     3. Click "Make Predictions" to get results
                     4. Download results using the provided link
+                    
+                    ### Understanding the Results
+                    - **SKU**: Unique identifier for the item
+                    - **MfrID**: Manufacturer ID
+                    - **Predicted_Class**: Primary classification prediction
+                    - **Review**: Final classification or "Needs Human Review"
+                    - **Confidence Score**: Confidence level of primary prediction
+                    - **Second_Best_Class**: Alternative classification
+                    - **Second_Best_Score**: Confidence level of alternative
                     """)
 
-            # Updated CSS for better scrolling and layout
+            # Updated CSS for better layout and readability
             demo.css = """
-                .predictions-table {
+                /* General layout improvements */
+                .container {
+                    max-width: 100% !important;
+                    padding: 0 !important;
+                    margin: 0 !important;
+                }
+                
+                /* DataFrame styling */
+                .table-wrap {
                     overflow: visible !important;
                     max-height: none !important;
+                    border: none !important;
                 }
                 
-                .predictions-table table {
+                table {
                     width: 100% !important;
                     border-collapse: collapse !important;
                 }
                 
-                .predictions-table thead th {
-                    background: white !important;
-                    font-weight: bold !important;
-                    padding: 8px !important;
-                    border: 1px solid #ddd !important;
+                th {
+                    background: #f3f4f6 !important;
+                    padding: 12px 8px !important;
                     text-align: left !important;
+                    font-weight: 600 !important;
+                    color: #374151 !important;
+                    border-bottom: 2px solid #d1d5db !important;
                 }
                 
-                .predictions-table tbody td {
-                    padding: 8px !important;
-                    border: 1px solid #ddd !important;
+                td {
+                    padding: 12px 8px !important;
+                    border-bottom: 1px solid #e5e7eb !important;
+                    color: #4b5563 !important;
                 }
                 
-                .predictions-table tr:nth-child(even) {
-                    background-color: #f8f9fa !important;
+                tr:nth-child(even) {
+                    background-color: #f9fafb !important;
                 }
                 
-                .diagnostic-output textarea {
-                    min-height: 300px !important;
+                /* Button styling */
+                button.primary {
+                    background-color: #2563eb !important;
+                    color: white !important;
+                    padding: 10px 20px !important;
+                    border-radius: 6px !important;
+                    font-weight: 500 !important;
                 }
-
-                /* Improved validation output styling */
+                
+                /* Validation output styling */
                 .validation-box {
-                    margin-bottom: 20px !important;
-                    background-color: #f8f9fa !important;
-                    border: 1px solid #ddd !important;
-                    border-radius: 4px !important;
-                    padding: 10px !important;
+                    background-color: #f3f4f6 !important;
+                    border: 1px solid #e5e7eb !important;
+                    border-radius: 6px !important;
+                    padding: 12px !important;
+                    margin: 12px 0 !important;
                 }
-
+                
                 /* Download link styling */
                 .download-link {
-                    margin-bottom: 20px !important;
-                    padding: 10px !important;
+                    margin: 12px 0 !important;
+                    padding: 8px !important;
                     text-align: center !important;
+                    background-color: #f3f4f6 !important;
+                    border-radius: 6px !important;
+                }
+                
+                /* Tab styling */
+                .tab-nav {
+                    border-bottom: 2px solid #e5e7eb !important;
+                    padding-bottom: 0 !important;
+                }
+                
+                .tab-nav button {
+                    padding: 12px 20px !important;
+                    margin-right: 4px !important;
+                    border-radius: 6px 6px 0 0 !important;
+                }
+                
+                .tab-nav button.selected {
+                    background-color: #f3f4f6 !important;
+                    border-bottom: 2px solid #2563eb !important;
                 }
             """
 
@@ -545,6 +587,12 @@ def build_interface():
                 inputs=[input_file, confidence],
                 outputs=[predictions_df, download_link, validation_output]
             )
+            
+            analyze_btn.click(
+                create_diagnostic_output,
+                inputs=[diagnostic_file],
+                outputs=[diagnostic_output]
+            )
 
         return demo