Update app.py

app.py

@@ -377,116 +377,360 @@ def compare_models_fixed(hf_model_url, file):
 # ==================================================
 # 🎨 Improved Light & Clean Gradio UI
 # ==================================================
+# ==================================================
+# 🎨 Modern & Attractive Gradio UI
+# ==================================================
 custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 .gradio-container {
-    font-family: 'Poppins', sans-serif;
-    background-color: #f9fafc !important;
+    font-family: 'Inter', sans-serif !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%) !important;
+}
+
+footer {display: none !important;}
+
+/* Header Styling */
+.app-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 28px 32px;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
+    margin-bottom: 24px;
+}
+
+.app-header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+    color: white !important;
+}
+
+.app-header p {
+    font-size: 15px;
+    margin: 0;
+    opacity: 0.95;
+    color: white;
+}
+
+/* Tab Styling */
+.tab-nav button {
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    padding: 12px 20px !important;
+    border-radius: 10px 10px 0 0 !important;
+    transition: all 0.3s ease !important;
+}
+
+.tab-nav button[aria-selected="true"] {
+    background: white !important;
+    box-shadow: 0 -2px 8px rgba(0,0,0,0.05) !important;
+}
+
+/* Card Styling */
+.gr-box, .gr-form, .gr-panel {
+    border-radius: 12px !important;
+    border: 1px solid #e5e7eb !important;
+    background: white !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
+    padding: 20px !important;
 }
-footer {display:none !important;}
 
+/* Button Styling */
 .gr-button-primary {
-    background: linear-gradient(90deg, #4a6cf7, #6a8ff7) !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     color: white !important;
+    border: none !important;
     border-radius: 10px !important;
-    height: 42px !important;
+    height: 44px !important;
     font-weight: 600 !important;
+    font-size: 14px !important;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
+    transition: all 0.3s ease !important;
 }
+
 .gr-button-primary:hover {
-    background: linear-gradient(90deg, #5c7df7, #7b9ef7) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
+}
+
+.gr-button-primary:active {
+    transform: translateY(0) !important;
 }
 
-input, textarea {
+.gr-button-secondary {
+    background: white !important;
+    color: #667eea !important;
+    border: 2px solid #667eea !important;
     border-radius: 10px !important;
-    border: 1px solid #d1d5db !important;
+    height: 44px !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+}
+
+.gr-button-secondary:hover {
+    background: #f5f7ff !important;
+}
+
+/* Input Styling */
+input, textarea, .gr-input {
+    border-radius: 10px !important;
+    border: 2px solid #e5e7eb !important;
+    background: #fafbfc !important;
+    font-size: 14px !important;
+    transition: all 0.3s ease !important;
+}
+
+input:focus, textarea:focus, .gr-input:focus {
+    border-color: #667eea !important;
     background: white !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
 }
 
+/* Label Styling */
 label {
     font-weight: 600 !important;
+    color: #374151 !important;
+    font-size: 14px !important;
+    margin-bottom: 8px !important;
+}
+
+/* Markdown Section Headers */
+.prose h3 {
     color: #1f2937 !important;
+    font-weight: 700 !important;
+    font-size: 18px !important;
+    margin-bottom: 12px !important;
+}
+
+/* Table Styling */
+.gr-dataframe {
+    border-radius: 12px !important;
+    overflow: hidden !important;
 }
 
-h1, h2, h3, h4 {
-    color: #1e293b !important;
+/* File Upload Styling */
+.gr-file {
+    border: 2px dashed #d1d5db !important;
+    border-radius: 12px !important;
+    background: #fafbfc !important;
+    transition: all 0.3s ease !important;
+}
+
+.gr-file:hover {
+    border-color: #667eea !important;
+    background: #f5f7ff !important;
+}
+
+/* Info Box */
+.info-box {
+    background: linear-gradient(135deg, #e0e7ff 0%, #f5f3ff 100%);
+    border-left: 4px solid #667eea;
+    padding: 16px 20px;
+    border-radius: 10px;
+    margin: 16px 0;
+}
+
+/* Status Messages */
+.status-success {
+    background: #d1fae5;
+    color: #065f46;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border-left: 4px solid #10b981;
+}
+
+.status-error {
+    background: #fee2e2;
+    color: #991b1b;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border-left: 4px solid #ef4444;
+}
+
+/* Icon Styling */
+.icon-emoji {
+    font-size: 24px;
+    margin-right: 8px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .app-header h1 {
+        font-size: 22px;
+    }
+    .app-header p {
+        font-size: 13px;
+    }
 }
 """
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🌍 Carbon Mapper Dashboard") as main_ui:
-    # Header
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="indigo"), title="🌍 Carbon Mapper Dashboard") as main_ui:
+    
+    # Modern Header
     gr.HTML("""
-    <div style="background: linear-gradient(90deg, #4a6cf7, #6a8ff7); 
-                color: white; padding: 16px 25px; border-radius: 12px; 
-                display: flex; align-items: center; justify-content: space-between;">
-        <div>
-            <h1 style="margin:0;font-size:24px;">🌿 Carbon Transaction Mapper</h1>
-            <p style="margin:0;font-size:14px;opacity:0.9;">Classify, review and improve your sustainability data.</p>
+    <div class="app-header">
+        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;">
+            <div>
+                <h1>🌿 Carbon Transaction Mapper</h1>
+                <p>Intelligent classification and review for sustainability data powered by AI</p>
+            </div>
+            <div style="text-align: right; opacity: 0.9;">
+                <div style="font-size: 12px; font-weight: 500;">VERSION 2.1</div>
+                <div style="font-size: 11px; margin-top: 4px;">SetFit • FastAPI</div>
+            </div>
         </div>
-        <div style="opacity:0.9;font-size:12px;">v2.1 | SetFit + FastAPI</div>
     </div>
     """)
 
-    # Tabs
+    # Tabs with modern styling
     with gr.Tab("🔹 Single Transaction"):
+        gr.HTML("""
+        <div class="info-box">
+            <strong>💡 Quick Classification</strong><br>
+            Enter a transaction description to get instant AI-powered category predictions
+        </div>
+        """)
+        
         with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("### 🔍 Classify a Transaction")
                 text_input = gr.Textbox(
-                    label="Enter Transaction Description",
-                    placeholder="Ex: Hotel booking for conference in Paris",
-                    lines=3
+                    label="Transaction Description",
+                    placeholder="Example: Hotel booking for business conference in Paris",
+                    lines=4
                 )
-                btn_submit = gr.Button("🚀 Predict", variant="primary")
+                btn_submit = gr.Button("🚀 Classify Transaction", variant="primary", size="lg")
+                
             with gr.Column(scale=1):
-                cat1_out = gr.Textbox(label="Predicted Category 1", interactive=False)
-                cat2_out = gr.Textbox(label="Predicted Category 2", interactive=False)
-                score_out = gr.Number(label="Confidence", interactive=False)
+                gr.Markdown("#### 📊 Prediction Results")
+                cat1_out = gr.Textbox(label="Primary Category", interactive=False)
+                cat2_out = gr.Textbox(label="Secondary Category", interactive=False)
+                score_out = gr.Number(label="Confidence Score", interactive=False, precision=2)
+                
         btn_submit.click(fn=classify_single, inputs=text_input, outputs=[cat1_out, cat2_out, score_out])
 
-    with gr.Tab("📂 Batch Review & Correction"):
-        gr.Markdown("""
-        ### 📋 Batch Review  
-        Upload your transactions and review predicted categories.  
-        You can directly edit incorrect classifications in the table below.
+    with gr.Tab("📂 Batch Review"):
+        gr.HTML("""
+        <div class="info-box">
+            <strong>📋 Batch Processing & Review</strong><br>
+            Upload your CSV file to classify multiple transactions at once. Review and correct predictions directly in the table.
+        </div>
         """)
-        csv_input = gr.File(label="📁 Upload CSV file", file_types=[".csv"])
-        btn_process = gr.Button("⚙️ Process File", variant="primary")
-        process_status = gr.Markdown("")
-        review_table = gr.DataFrame(label="Editable Review Table", interactive=True, wrap=True)
-        btn_save = gr.Button("💾 Save Corrections", variant="primary")
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                csv_input = gr.File(
+                    label="📁 Upload CSV File",
+                    file_types=[".csv"],
+                    file_count="single"
+                )
+                btn_process = gr.Button("⚙️ Process & Review", variant="primary", size="lg")
+                
+        process_status = gr.Markdown()
+        
+        gr.Markdown("### 📝 Review & Edit Predictions")
+        review_table = gr.DataFrame(
+            label="Editable Classification Table",
+            interactive=True,
+            wrap=True,
+            height=400
+        )
+        
+        with gr.Row():
+            btn_save = gr.Button("💾 Save All Corrections", variant="primary", size="lg")
+            
         save_status = gr.Markdown()
-        btn_download_corrected = gr.File(label="📥 Download Corrected File")
-        btn_download_training = gr.File(label="📥 Training Data Only")
-        btn_process.click(fn=map_csv_for_review, inputs=csv_input, outputs=[review_table, process_status])
-        btn_save.click(fn=save_batch_corrections, inputs=review_table,
-                       outputs=[save_status, btn_download_corrected, btn_download_training])
-
-    with gr.Tab("📊 All Corrections History"):
-        gr.Markdown("### 🧾 Saved Corrections History")
-        btn_refresh = gr.Button("🔄 Refresh List")
-        corrections_table = gr.DataFrame(label="All Corrections", interactive=False)
-        btn_export_all = gr.Button("📤 Export All Corrections", variant="primary")
-        export_all_file = gr.File(label="📥 Download Export")
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                btn_download_corrected = gr.File(label="📥 Corrected Dataset")
+            with gr.Column(scale=1):
+                btn_download_training = gr.File(label="📥 Training Data Export")
+        
+        btn_process.click(
+            fn=map_csv_for_review,
+            inputs=csv_input,
+            outputs=[review_table, process_status]
+        )
+        btn_save.click(
+            fn=save_batch_corrections,
+            inputs=review_table,
+            outputs=[save_status, btn_download_corrected, btn_download_training]
+        )
+
+    with gr.Tab("📊 Corrections History"):
+        gr.HTML("""
+        <div class="info-box">
+            <strong>🧾 Historical Corrections</strong><br>
+            View and export all your saved corrections for model retraining and analysis
+        </div>
+        """)
+        
+        btn_refresh = gr.Button("🔄 Refresh History", variant="secondary", size="lg")
+        corrections_table = gr.DataFrame(
+            label="Complete Corrections Log",
+            interactive=False,
+            wrap=True,
+            height=400
+        )
+        
+        with gr.Row():
+            btn_export_all = gr.Button("📤 Export All Data", variant="primary", size="lg")
+            
         export_status = gr.Markdown()
+        export_all_file = gr.File(label="📥 Download Complete Export")
+        
         btn_refresh.click(fn=show_corrections, outputs=corrections_table)
         btn_export_all.click(fn=export_all_corrections, outputs=[export_all_file, export_status])
 
     with gr.Tab("🧪 Model Comparison"):
-        gr.Markdown("### ⚖️ Compare Models on a Test File")
-        hf_model_url = gr.Textbox(
-            label="Enter HuggingFace model ID",
-            placeholder="e.g. sentence-transformers/all-MiniLM-L6-v2"
-        )
-        compare_file = gr.File(label="Upload CSV for Comparison", file_types=[".csv"])
-        compare_btn = gr.Button("🔬 Compare", variant="primary")
+        gr.HTML("""
+        <div class="info-box">
+            <strong>⚖️ A/B Testing</strong><br>
+            Compare your current model against alternative models from HuggingFace
+        </div>
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=2):
+                hf_model_url = gr.Textbox(
+                    label="HuggingFace Model ID",
+                    placeholder="e.g., sentence-transformers/all-MiniLM-L6-v2",
+                    info="Enter the full model path from HuggingFace Hub"
+                )
+            with gr.Column(scale=2):
+                compare_file = gr.File(
+                    label="Test Dataset (CSV)",
+                    file_types=[".csv"]
+                )
+                
+        compare_btn = gr.Button("🔬 Run Comparison", variant="primary", size="lg")
+        
         compare_summary = gr.Markdown()
-        compare_results = gr.DataFrame(label="Model Comparison Results")
-        compare_btn.click(fn=compare_models_fixed,
-                          inputs=[hf_model_url, compare_file],
-                          outputs=[compare_summary, compare_results])
-
-    gr.Markdown("<br><center><small>Built by Yassine 🧠 | SetFit + Gradio + FastAPI</small></center>")
-
+        compare_results = gr.DataFrame(
+            label="Detailed Comparison Results",
+            wrap=True,
+            height=400
+        )
+        
+        compare_btn.click(
+            fn=compare_models_fixed,
+            inputs=[hf_model_url, compare_file],
+            outputs=[compare_summary, compare_results]
+        )
 
+    # Footer
+    gr.HTML("""
+    <div style="text-align: center; padding: 24px 0; margin-top: 32px; border-top: 1px solid #e5e7eb;">
+        <p style="color: #6b7280; font-size: 14px; margin: 0;">
+            Built with ❤️ by <strong>Yassine</strong> | Powered by SetFit, Gradio & FastAPI
+        </p>
+        <p style="color: #9ca3af; font-size: 12px; margin-top: 8px;">
+            🌱 Making sustainability data smarter, one transaction at a time
+        </p>
+    </div>
+    """)
+    
 # ==================================================
 # 🌐 Mount Gradio App
 # ==================================================