Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rapport Modèle ML - Project5</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: #333; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 15px; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| overflow: hidden; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); | |
| color: white; | |
| padding: 30px; | |
| text-align: center; | |
| } | |
| .header h1 { | |
| margin: 0; | |
| font-size: 2.5em; | |
| font-weight: 300; | |
| } | |
| .header p { | |
| margin: 10px 0 0 0; | |
| opacity: 0.9; | |
| font-size: 1.1em; | |
| } | |
| .content { | |
| padding: 30px; | |
| } | |
| .section { | |
| margin-bottom: 30px; | |
| background: #f8f9fa; | |
| border-radius: 10px; | |
| padding: 25px; | |
| border-left: 5px solid #3498db; | |
| } | |
| .section h2 { | |
| color: #2c3e50; | |
| margin-top: 0; | |
| margin-bottom: 20px; | |
| font-size: 1.5em; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .section h2::before { | |
| content: "📊"; | |
| margin-right: 10px; | |
| font-size: 1.2em; | |
| } | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin: 20px 0; | |
| } | |
| .metric-card { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| text-align: center; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| border: 1px solid #e1e8ed; | |
| } | |
| .metric-value { | |
| font-size: 2em; | |
| font-weight: bold; | |
| color: #3498db; | |
| margin-bottom: 5px; | |
| } | |
| .metric-label { | |
| color: #7f8c8d; | |
| font-size: 0.9em; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .info-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 15px; | |
| } | |
| .info-item { | |
| background: white; | |
| padding: 15px; | |
| border-radius: 8px; | |
| border-left: 4px solid #3498db; | |
| } | |
| .info-label { | |
| font-weight: bold; | |
| color: #2c3e50; | |
| margin-bottom: 5px; | |
| } | |
| .info-value { | |
| color: #7f8c8d; | |
| } | |
| .features-list { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .feature-item { | |
| background: white; | |
| padding: 10px 15px; | |
| border-radius: 6px; | |
| border-left: 3px solid #2ecc71; | |
| font-size: 0.9em; | |
| } | |
| .importance-table { | |
| background: white; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| margin-top: 20px; | |
| } | |
| .importance-table table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .importance-table th { | |
| background: #3498db; | |
| color: white; | |
| padding: 15px; | |
| text-align: left; | |
| } | |
| .importance-table td { | |
| padding: 12px 15px; | |
| border-bottom: 1px solid #ecf0f1; | |
| } | |
| .importance-table tr:nth-child(even) { | |
| background: #f8f9fa; | |
| } | |
| .importance-bar { | |
| background: #ecf0f1; | |
| height: 20px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .importance-fill { | |
| background: linear-gradient(90deg, #3498db, #2ecc71); | |
| height: 100%; | |
| border-radius: 10px; | |
| transition: width 0.3s ease; | |
| } | |
| .footer { | |
| background: #2c3e50; | |
| color: white; | |
| text-align: center; | |
| padding: 20px; | |
| margin-top: 30px; | |
| } | |
| .status-badge { | |
| display: inline-block; | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| font-size: 0.8em; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| } | |
| .status-success { | |
| background: #2ecc71; | |
| color: white; | |
| } | |
| .status-info { | |
| background: #3498db; | |
| color: white; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| margin: 10px; | |
| border-radius: 0; | |
| } | |
| .metrics-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .info-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>🤖 Rapport Modèle ML</h1> | |
| <p>Project5 - Prédiction énergétique des bâtiments</p> | |
| <p>Généré le 21/09/2025 à 11:11:02</p> | |
| </div> | |
| <div class="content"> | |
| <div class="section"> | |
| <h2>Informations Générales</h2> | |
| <div class="info-grid"> | |
| <div class="info-item"> | |
| <div class="info-label">Type de Modèle</div> | |
| <div class="info-value">RandomForestRegressor</div> | |
| </div> | |
| <div class="info-item"> | |
| <div class="info-label">Version</div> | |
| <div class="info-value">1.0</div> | |
| </div> | |
| <div class="info-item"> | |
| <div class="info-label">Date de Création</div> | |
| <div class="info-value">2025-09-21T11:07:42.926661</div> | |
| </div> | |
| <div class="info-item"> | |
| <div class="info-label">Module Python</div> | |
| <div class="info-value">sklearn.ensemble._forest</div> | |
| </div> | |
| <div class="info-item"> | |
| <div class="info-label">Taille du Modèle</div> | |
| <div class="info-value">26.0 MB</div> | |
| </div> | |
| <div class="info-item"> | |
| <div class="info-label">Nombre de Features</div> | |
| <div class="info-value">17</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h2>Métriques de Performance</h2> | |
| <div class="metrics-grid"> | |
| <div class="metric-card"> | |
| <div class="metric-value">0.916</div> | |
| <div class="metric-label">Accuracy (R²)</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-value">0.090</div> | |
| <div class="metric-label">RMSE</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-value">0.220</div> | |
| <div class="metric-label">MAE</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-value">0.920</div> | |
| <div class="metric-label">R² Score</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h2>Capacités du Modèle</h2> | |
| <div class="info-grid"> | |
| <div class="info-item"> | |
| <div class="info-label">Feature Importances</div> | |
| <div class="info-value"> | |
| <span class="status-badge status-success"> | |
| ✓ Disponible | |
| </span> | |
| </div> | |
| </div> | |
| <div class="info-item"> | |
| <div class="info-label">Coefficients</div> | |
| <div class="info-value"> | |
| <span class="status-badge status-info"> | |
| ✗ Non disponible | |
| </span> | |
| </div> | |
| </div> | |
| <div class="info-item"> | |
| <div class="info-label">Prédiction Probabiliste</div> | |
| <div class="info-value"> | |
| <span class="status-badge status-info"> | |
| ✗ Non disponible | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h2>Variables d'Entrée (17 features)</h2> | |
| <div class="features-list"> | |
| <div class="feature-item">year_built</div> | |
| <div class="feature-item">number_of_buildings</div> | |
| <div class="feature-item">number_of_floors</div> | |
| <div class="feature-item">property_gfa_total</div> | |
| <div class="feature-item">property_gfa_parking</div> | |
| <div class="feature-item">second_largest_property_use_type_gfa</div> | |
| <div class="feature-item">third_largest_property_use_type_gfa</div> | |
| <div class="feature-item">multiusage</div> | |
| <div class="feature-item">steam</div> | |
| <div class="feature-item">electricity</div> | |
| <div class="feature-item">natural_gas</div> | |
| <div class="feature-item">neighborhood_id</div> | |
| <div class="feature-item">building_type_id</div> | |
| <div class="feature-item">largest_property_use_type_id</div> | |
| <div class="feature-item">primary_property_type_id</div> | |
| <div class="feature-item">second_largest_property_use_type_id</div> | |
| <div class="feature-item">third_largest_property_use_type_id</div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h2>Importance des Variables</h2> | |
| <div class="importance-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Variable</th> | |
| <th>Importance</th> | |
| <th>Pourcentage</th> | |
| <th>Visualisation</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>property_gfa_total</strong></td> | |
| <td>0.4159</td> | |
| <td>41.59%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 100.0%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>primary_property_type_id</strong></td> | |
| <td>0.1205</td> | |
| <td>12.05%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 28.96743295740477%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>largest_property_use_type_id</strong></td> | |
| <td>0.0907</td> | |
| <td>9.07%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 21.803967049724744%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>year_built</strong></td> | |
| <td>0.0760</td> | |
| <td>7.60%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 18.264056040746727%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>second_largest_property_use_type_gfa</strong></td> | |
| <td>0.0665</td> | |
| <td>6.65%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 15.990714913050171%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>number_of_floors</strong></td> | |
| <td>0.0649</td> | |
| <td>6.49%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 15.614344234190247%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>natural_gas</strong></td> | |
| <td>0.0444</td> | |
| <td>4.44%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 10.669995866214208%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>neighborhood_id</strong></td> | |
| <td>0.0368</td> | |
| <td>3.68%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 8.854359706938872%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>property_gfa_parking</strong></td> | |
| <td>0.0209</td> | |
| <td>2.09%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 5.020163876222049%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><strong>second_largest_property_use_type_id</strong></td> | |
| <td>0.0206</td> | |
| <td>2.06%</td> | |
| <td> | |
| <div class="importance-bar"> | |
| <div class="importance-fill" style="width: 4.95439652964564%"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p>🏢 Project5 - API de gestion énergétique des bâtiments</p> | |
| <p>Généré automatiquement le 21/09/2025 à 11:11:02</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |