Update app_hf.py

app_hf.py

@@ -1,181 +1,194 @@
 """
 Hugging Face Spaces Deployment Entry Point
-Lightweight dashboard entry point without heavy dependencies
+Lightweight dashboard entry point with CSS + Dropdown
 """
 import os
 import sys
-
-# Set up environment
-os.environ['GRADIO_SERVER_NAME'] = '0.0.0.0'
-os.environ['GRADIO_SERVER_PORT'] = '7860'
-
-# Import Gradio
 import gradio as gr
 
+# Set environment
+os.environ["GRADIO_SERVER_NAME"] = "0.0.0.0"
+os.environ["GRADIO_SERVER_PORT"] = "7860"
+
+# Import dashboard functions
 from dashboard_simple import (
     load_metrics,
-    get_summary_info,
     create_comparison_charts,
-    format_metrics_text,
     get_artifacts_info
 )
 
-# ----------- CSS (works on all Gradio versions) -----------
-custom_css = """
-<style>
-body {background-color: #0d1117 !important;}
-.gradio-container {background-color: #0d1117 !important;}
-
-.card {
-    background: #161b22;
-    border-radius: 12px;
-    padding: 18px;
-    margin-bottom: 20px;
-    border: 1px solid #30363d;
-}
-
-.metric-box {
-    background: #21262d;
-    padding: 14px;
-    border-radius: 10px;
-    border: 1px solid #30363d;
-    margin-bottom: 12px;
-}
-</style>
-"""
-
+# -------------------------------------------------------------------
+# DROPDOWN HANDLER
+# -------------------------------------------------------------------
+def show_model_details(selected):
+    """Returns metrics for selected model."""
+
+    if selected == "Random Forest":
+        return (
+            f"### 🌳 Random Forest Metrics\n"
+            f"- R² Score: {rf_r2}\n"
+            f"- RMSE: {rf_rmse}\n"
+            f"- Model Type: Ensemble (100 trees)"
+        )
+
+    elif selected == "Linear Regression":
+        return (
+            f"### 📏 Linear Regression Metrics\n"
+            f"- R² Score: {lr_r2}\n"
+            f"- RMSE: {lr_rmse}\n"
+            f"- Model Type: Linear (Baseline)"
+        )
+
+    return "Select a model to view details."
+
+
+# -------------------------------------------------------------------
+# MAIN
+# -------------------------------------------------------------------
 if __name__ == "__main__":
 
+    # Load data
     metrics = load_metrics()
     r2_chart, rmse_chart = create_comparison_charts(metrics)
     artifacts = get_artifacts_info()
 
-    rf_r2 = metrics.get('train', {}).get('r2_rf', 'N/A')
-    rf_rmse = metrics.get('train', {}).get('rmse_rf', 'N/A')
-    lr_r2 = metrics.get('train', {}).get('r2_lr', 'N/A')
-    lr_rmse = metrics.get('train', {}).get('rmse_lr', 'N/A')
-
-    # Dropdown logic
-    def show_model_details(choice):
-        if choice == "Random Forest":
-            return f"### 🌳 Random Forest Selected\n- R² Score: {rf_r2}\n- RMSE: {rf_rmse}"
-        else:
-            return f"### 📏 Linear Regression Selected\n- R² Score: {lr_r2}\n- RMSE: {lr_rmse}"
-
-    # ----------- FIXED: No css= argument -----------
+    # Extract metrics
+    rf_r2 = metrics.get("train", {}).get("r2_rf", "N/A")
+    rf_rmse = metrics.get("train", {}).get("rmse_rf", "N/A")
+    lr_r2 = metrics.get("train", {}).get("r2_lr", "N/A")
+    lr_rmse = metrics.get("train", {}).get("rmse_lr", "N/A")
+
+    # -------------------------------------------------------------------
+    # CUSTOM CSS
+    # -------------------------------------------------------------------
+    custom_css = """
+    <style>
+
+    body {
+        background: #0d1117 !important;
+    }
+
+    .gradio-container {
+        background: #0d1117 !important;
+        color: #ffffff !important;
+    }
+
+    h1, h2, h3, h4, h5, h6, p, label {
+        color: #ffffff !important;
+    }
+
+    .tab-nav button {
+        background: #161b22 !important;
+        color: #fff !important;
+        border-radius: 6px !important;
+        margin-right: 8px !important;
+    }
+
+    .tab-nav .selected {
+        background: #238636 !important;
+        font-weight: bold !important;
+    }
+
+    .card {
+        background: #161b22 !important;
+        padding: 20px;
+        border-radius: 12px;
+        border: 1px solid #30363d;
+        margin-bottom: 20px;
+    }
+
+    </style>
+    """
+
+    # -------------------------------------------------------------------
+    # GRADIO UI
+    # -------------------------------------------------------------------
     with gr.Blocks(title="CPU Optimization Dashboard") as demo:
 
-        # Inject CSS safely
+        # Inject CSS
         gr.HTML(custom_css)
 
         gr.Markdown("# 🚀 CPU Optimization ML Dashboard")
         gr.Markdown("Real-time visualization of machine learning models for CPU usage prediction")
 
-        # ------------ DROPDOWN ------------
-        with gr.Row():
-            model_selector = gr.Dropdown(
-                ["Random Forest", "Linear Regression"],
-                label="Select Model",
-                value="Random Forest"
-            )
-            model_output = gr.Markdown()
-
-        model_selector.change(show_model_details, inputs=model_selector, outputs=model_output)
-
-        # ---------------------- TABS ----------------------
+        # -------------------------- TABS --------------------------
         with gr.Tabs():
 
-            # OVERVIEW
+            # OVERVIEW TAB -------------------------------------------------
             with gr.Tab("📋 Overview"):
                 gr.Markdown(f"""
-                <div class='card'>
-                <h3>Dashboard Overview</h3>
-                ✓ Dashboard is running and all models are loaded successfully
+                ## Dashboard Overview  
+                ✓ Dashboard is running and all models are loaded successfully  
 
-                <h4>Key Metrics</h4>
+                ### Key Metrics  
                 - **Best Model:** Random Forest  
                 - **Best R² Score:** {rf_r2}  
                 - **Best RMSE:** {rf_rmse}  
                 - **Models Available:** 2  
-
-                <h4>Quick Stats</h4>
-                - ✓ Random Forest Model: Loaded  
-                - ✓ Linear Regression Model: Loaded  
-                - ✓ Training Metrics: Available  
-                - ✓ Evaluation Metrics: Available  
-                </div>
                 """)
 
-            # COMPARISON
+                # DROPDOWN
+                gr.Markdown("### 🔽 Select Model to View Details")
+                model_dropdown = gr.Dropdown(
+                    ["Random Forest", "Linear Regression"],
+                    label="Select Model",
+                    value="Random Forest"
+                )
+
+                model_output = gr.Markdown()
+                model_dropdown.change(show_model_details, model_dropdown, model_output)
+
+            # COMPARISON TAB ------------------------------------------------
             with gr.Tab("📈 Comparison"):
                 gr.Markdown(f"""
-                <div class='card'>
-                <h3>Model Performance Comparison</h3>
+                # Model Performance Comparison
 
-                <b>Random Forest:</b><br>
+                **Random Forest:**  
                 R² = {rf_r2}, RMSE = {rf_rmse}
 
-                <br><br>
-
-                <b>Linear Regression:</b><br>
+                **Linear Regression:**  
                 R² = {lr_r2}, RMSE = {lr_rmse}
-
-                <h4>🎯 Winner: Random Forest 🏆</h4>
-                - ✓ Higher R² Score  
-                - ✓ Lower RMSE  
-                </div>
                 """)
+
                 gr.HTML(r2_chart)
                 gr.HTML(rmse_chart)
 
-            # METRICS
+            # METRICS TAB ---------------------------------------------------
             with gr.Tab("📊 Metrics"):
                 gr.Markdown(f"""
-                <div class='card'>
-                <h3>Model Metrics Detail</h3>
-
-                <div class='metric-box'>
-                <h4>🌳 Random Forest</h4>
-                - R² Score: {rf_r2}<br>
-                - RMSE: {rf_rmse}<br>
-                - Model Type: Ensemble (100 trees)<br>
-                - Performance: Excellent
-                </div>
-
-                <div class='metric-box'>
-                <h4>📏 Linear Regression</h4>
-                - R² Score: {lr_r2}<br>
-                - RMSE: {lr_rmse}<br>
-                - Model Type: Linear (Baseline)<br>
-                - Performance: Baseline
-                </div>
-                </div>
+                # Model Metrics Detail
+
+                ## 🌳 Random Forest  
+                - R² Score: {rf_r2}  
+                - RMSE: {rf_rmse}  
+
+                ## 📏 Linear Regression  
+                - R² Score: {lr_r2}  
+                - RMSE: {lr_rmse}  
                 """)
 
-            # ARTIFACTS
+            # ARTIFACTS TAB -------------------------------------------------
             with gr.Tab("📦 Artifacts"):
-                gr.Markdown(f"<div class='card'>\n<h3>Model Artifacts</h3>\n{artifacts}\n</div>")
+                gr.Markdown(f"# Model Artifacts\n\n{artifacts}")
 
-            # INFO
+            # INFO TAB ------------------------------------------------------
             with gr.Tab("ℹ️ Information"):
                 gr.Markdown("""
-                <div class='card'>
-                <h3>System Information</h3>
-
-                <b>Dashboard Configuration</b><br>
+                # System Information  
                 - Dashboard Version: 2.0.0  
                 - Gradio Version: 3.50.0  
-                - Python Version: 3.11+  
+                - Python Version: 3.10  
                 - Deployment: Hugging Face Spaces  
-
-                <br><b>Deployment Ready</b><br>
-                - ✓ Works in HF Spaces  
-                - ✓ Docker Compatible  
-                - ✓ Cloud-Deployable  
-                </div>
                 """)
 
         gr.Markdown("---")
         gr.Markdown("**CPU Optimization ML Dashboard** | Built with Gradio & Scikit-learn")
 
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=False)
+    # -------------------------------------------------------------------
+    # LAUNCH
+    # -------------------------------------------------------------------
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False
+    )