Spaces:
Sleeping
Sleeping
| """ | |
| Hugging Face Spaces Deployment Entry Point | |
| Lightweight dashboard entry point without heavy dependencies | |
| """ | |
| 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 | |
| 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> | |
| /* ========================================================= | |
| BACKGROUND (Dark Neon) | |
| ========================================================= */ | |
| body, .gradio-container { | |
| background: #05070a !important; | |
| color: #d9e6ff !important; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* ========================================================= | |
| CARD - Neon Glow | |
| ========================================================= */ | |
| .card { | |
| background: #0a0f16; | |
| border-radius: 14px; | |
| padding: 18px; | |
| margin-bottom: 20px; | |
| border: 1px solid rgba(0, 212, 255, 0.4); | |
| box-shadow: 0 0 12px rgba(0, 212, 255, 0.2); | |
| transition: 0.3s ease; | |
| } | |
| .card:hover { | |
| border-color: rgba(0, 212, 255, 0.9); | |
| box-shadow: 0 0 18px rgba(0, 212, 255, 0.45); | |
| transform: translateY(-3px); | |
| } | |
| /* ========================================================= | |
| METRIC BOXES - Neon Purple | |
| ========================================================= */ | |
| .metric-box { | |
| background: #0f1520; | |
| padding: 16px; | |
| border-radius: 12px; | |
| border: 1px solid rgba(166, 0, 255, 0.45); | |
| box-shadow: 0 0 12px rgba(166, 0, 255, 0.25); | |
| margin-bottom: 14px; | |
| transition: 0.3s ease; | |
| } | |
| .metric-box:hover { | |
| border-color: rgba(166, 0, 255, 1); | |
| box-shadow: 0 0 20px rgba(166, 0, 255, 0.55); | |
| transform: translateY(-3px); | |
| } | |
| /* ========================================================= | |
| STAT CARDS - Blue Neon | |
| ========================================================= */ | |
| .stat-card { | |
| background: #0b1018; | |
| padding: 18px; | |
| border-radius: 14px; | |
| border: 1px solid rgba(0, 122, 255, 0.45); | |
| box-shadow: 0 0 12px rgba(0, 122, 255, 0.25); | |
| text-align: center; | |
| transition: 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| border-color: rgba(0, 122, 255, 1); | |
| box-shadow: 0 0 20px rgba(0, 122, 255, 0.55); | |
| transform: translateY(-3px); | |
| } | |
| .stat-number { | |
| font-size: 32px; | |
| font-weight: bold; | |
| color: #7bdfff; | |
| } | |
| .stat-label { | |
| font-size: 14px; | |
| opacity: 0.9; | |
| } | |
| /* ✨ Neon Heading Glow */ | |
| .neon-heading { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| color: #00eaff; /* Aqua neon */ | |
| text-shadow: | |
| 0 0 6px #00eaff, | |
| 0 0 12px #00eaff, | |
| 0 0 20px #00eaff, | |
| 0 0 35px rgba(0, 255, 255, 0.9); | |
| margin-bottom: 18px; | |
| letter-spacing: 1.3px; | |
| padding: 5px 0; | |
| transition: 0.25s ease-in-out; | |
| } | |
| .neon-heading:hover { | |
| text-shadow: | |
| 0 0 10px #ff00ff, | |
| 0 0 20px #ff00ff, | |
| 0 0 35px #ff00ff, | |
| 0 0 50px rgba(255, 0, 255, 0.9); | |
| color: #ff00ff; /* Magenta glow on hover */ | |
| transform: scale(1.05); | |
| } | |
| .neon-card { | |
| background: rgba(20, 20, 35, 0.55); | |
| backdrop-filter: blur(14px); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 255, 255, 0.35); | |
| box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); | |
| margin-top: 15px; | |
| color: #eaffff; | |
| } | |
| .neon-card h3, | |
| .neon-card h4 { | |
| color: #00f6ff; | |
| text-shadow: 0 0 8px #00eaff; | |
| } | |
| .neon-list li { | |
| margin-bottom: 6px; | |
| font-size: 16px; | |
| } | |
| </style> | |
| """ | |
| if __name__ == "__main__": | |
| 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 ----------- | |
| with gr.Blocks(title="CPU Optimization Dashboard") as demo: | |
| # Inject CSS safely | |
| gr.HTML(custom_css) | |
| gr.HTML("<h1 class='neon-heading'>🚀 CPU Optimization ML Dashboard</h1>") | |
| 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 ---------------------- | |
| with gr.Tabs(): | |
| with gr.Tab("📋 Overview"): | |
| gr.HTML(f""" | |
| <div class='neon-card'> | |
| <h3>Dashboard Overview</h3> | |
| <p>✓ Dashboard is running and all models are loaded successfully</p> | |
| <h4>Key Metrics</h4> | |
| <ul class="neon-list"> | |
| <li><b>Best Model:</b> Random Forest</li> | |
| <li><b>Best R² Score:</b> {rf_r2}</li> | |
| <li><b>Best RMSE:</b> {rf_rmse}</li> | |
| <li><b>Models Available:</b> 2</li> | |
| </ul> | |
| <h4>Quick Stats</h4> | |
| <ul class="neon-list"> | |
| <li>✓ Random Forest Model: Loaded</li> | |
| <li>✓ Linear Regression Model: Loaded</li> | |
| <li>✓ Training Metrics: Available</li> | |
| <li>✓ Evaluation Metrics: Available</li> | |
| </ul> | |
| </div> | |
| """) | |
| # COMPARISON | |
| with gr.Tab("📈 Comparison"): | |
| gr.Markdown(f""" | |
| <div class='card'> | |
| <h3>Model Performance Comparison</h3> | |
| <b>Random Forest:</b><br> | |
| R² = {rf_r2}, RMSE = {rf_rmse} | |
| <br><br> | |
| <b>Linear Regression:</b><br> | |
| 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 | |
| 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> | |
| """) | |
| # ARTIFACTS | |
| with gr.Tab("📦 Artifacts"): | |
| gr.Markdown(f"<div class='card'>\n<h3>Model Artifacts</h3>\n{artifacts}\n</div>") | |
| # INFO | |
| with gr.Tab("ℹ️ Information"): | |
| gr.Markdown(""" | |
| <div class='card'> | |
| <h3>System Information</h3> | |
| <b>Dashboard Configuration</b><br> | |
| - Dashboard Version: 2.0.0 | |
| - Gradio Version: 3.50.0 | |
| - Python Version: 3.11+ | |
| - 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) | |