Team Ai
Apppublic

MAALOUFimad02/Machine_Learning_Training

sourceHugging Faceupdated 6mo agoView on Hugging Face
0likes
tp.html1389 linesDownload Raw Back to root
1<!DOCTYPE html>2<html lang="fr">3<head>4  <meta charset="UTF-8">5  <meta name="viewport" content="width=device-width, initial-scale=1.0">6  <title>Travaux Pratiques — ML Academy</title>7  <link rel="stylesheet" href="css/shared.css">8  <style>9    /* ═══════════════════════════════════════════════════════════════════════════10       PAGE HERO11       ═══════════════════════════════════════════════════════════════════════════ */12    .tp-hero {13      background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);14      border-bottom: 1px solid var(--border-color);15      padding: var(--space-3xl) var(--space-xl);16      text-align: center;17    }18 19    .tp-hero-label {20      font-family: 'JetBrains Mono', monospace;21      font-size: 0.75rem;22      color: var(--primary-light);23      text-transform: uppercase;24      letter-spacing: 2px;25      margin-bottom: var(--space-md);26    }27 28    .tp-hero-title {29      font-size: clamp(2rem, 5vw, 3rem);30      font-weight: 700;31      color: var(--text-primary);32      margin-bottom: var(--space-md);33    }34 35    .tp-hero-subtitle {36      font-size: 1.1rem;37      color: var(--text-secondary);38      max-width: 600px;39      margin: 0 auto var(--space-xl);40    }41 42    .tp-hero-badges {43      display: flex;44      justify-content: center;45      gap: var(--space-md);46      flex-wrap: wrap;47    }48 49    /* ═══════════════════════════════════════════════════════════════════════════50       TP CONTAINER51       ═══════════════════════════════════════════════════════════════════════════ */52    .tp-container {53      max-width: 1000px;54      margin: 0 auto;55      padding: var(--space-2xl) var(--space-xl);56    }57 58    /* ═══════════════════════════════════════════════════════════════════════════59       TP CARD60       ═══════════════════════════════════════════════════════════════════════════ */61    .tp-card {62      background: var(--bg-card);63      border: 1px solid var(--border-color);64      border-radius: var(--radius-lg);65      overflow: hidden;66      margin-bottom: var(--space-2xl);67      transition: all var(--transition-base);68    }69 70    .tp-card:hover {71      border-color: var(--primary);72      box-shadow: var(--shadow-lg), var(--shadow-glow);73    }74 75    .tp-header {76      display: flex;77      align-items: flex-start;78      gap: var(--space-lg);79      padding: var(--space-xl);80      background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary));81      border-bottom: 1px solid var(--border-color);82    }83 84    .tp-badge {85      padding: var(--space-sm) var(--space-md);86      border-radius: var(--radius-md);87      font-family: 'JetBrains Mono', monospace;88      font-size: 0.7rem;89      font-weight: 600;90      color: white;91      text-transform: uppercase;92      letter-spacing: 1px;93      flex-shrink: 0;94    }95 96    .tp-badge.titanic { background: linear-gradient(135deg, #1e40af, #3b82f6); }97    .tp-badge.housing { background: linear-gradient(135deg, #047857, #10b981); }98    .tp-badge.iris { background: linear-gradient(135deg, #b45309, #f59e0b); }99    .tp-badge.energy { background: linear-gradient(135deg, #7c3aed, #a78bfa); }100    .tp-badge.mnist { background: linear-gradient(135deg, #be123c, #f43f5e); }101    .tp-badge.sentiment { background: linear-gradient(135deg, #0e7490, #06b6d4); }102 103    .tp-header-content {104      flex: 1;105    }106 107    .tp-title {108      font-size: 1.4rem;109      font-weight: 700;110      color: var(--text-primary);111      margin-bottom: var(--space-sm);112    }113 114    .tp-meta {115      display: flex;116      gap: var(--space-sm);117      flex-wrap: wrap;118      margin-bottom: var(--space-sm);119    }120 121    .tp-description {122      font-size: 0.95rem;123      color: var(--text-secondary);124      line-height: 1.6;125    }126 127    .tp-colab-btn {128      display: inline-flex;129      align-items: center;130      gap: var(--space-sm);131      padding: var(--space-sm) var(--space-md);132      background: #f9ab00;133      color: #000;134      font-family: 'JetBrains Mono', monospace;135      font-size: 0.8rem;136      font-weight: 600;137      text-decoration: none;138      border-radius: var(--radius-md);139      transition: all var(--transition-base);140      flex-shrink: 0;141    }142 143    .tp-colab-btn:hover {144      background: #fbbf24;145      transform: translateY(-2px);146    }147 148    /* ═══════════════════════════════════════════════════════════════════════════149       TP BODY150       ═══════════════════════════════════════════════════════════════════════════ */151    .tp-body {152      padding: var(--space-xl);153    }154 155    .tp-goals {156      display: grid;157      grid-template-columns: repeat(2, 1fr);158      gap: 0;159      border: 1px solid var(--border-color);160      border-radius: var(--radius-md);161      overflow: hidden;162      margin-bottom: var(--space-xl);163    }164 165    .tp-goal-box {166      padding: var(--space-lg);167      background: var(--bg-tertiary);168    }169 170    .tp-goal-box:first-child {171      border-right: 1px solid var(--border-color);172    }173 174    .tp-goal-label {175      font-family: 'JetBrains Mono', monospace;176      font-size: 0.65rem;177      color: var(--text-muted);178      text-transform: uppercase;179      letter-spacing: 1px;180      margin-bottom: var(--space-sm);181    }182 183    .tp-goal-text {184      font-size: 0.9rem;185      color: var(--text-secondary);186      line-height: 1.6;187    }188 189    .tp-goal-text strong {190      color: var(--success);191    }192 193    /* ═══════════════════════════════════════════════════════════════════════════194       CONCEPTS GRID195       ═══════════════════════════════════════════════════════════════════════════ */196    .concepts-title {197      font-size: 1rem;198      font-weight: 600;199      color: var(--text-primary);200      margin-bottom: var(--space-md);201    }202 203    .concepts-grid {204      display: grid;205      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));206      gap: var(--space-sm);207      margin-bottom: var(--space-xl);208    }209 210    .concept-item {211      background: var(--bg-tertiary);212      border: 1px solid var(--border-color);213      border-radius: var(--radius-md);214      padding: var(--space-md);215      transition: all var(--transition-base);216    }217 218    .concept-item:hover {219      border-color: var(--primary);220      transform: translateY(-2px);221    }222 223    .concept-name {224      font-size: 0.85rem;225      font-weight: 600;226      color: var(--text-primary);227      margin-bottom: var(--space-xs);228    }229 230    .concept-desc {231      font-size: 0.75rem;232      color: var(--text-muted);233    }234 235    /* ═══════════════════════════════════════════════════════════════════════════236       STEPS237       ═══════════════════════════════════════════════════════════════════════════ */238    .steps-title {239      font-size: 1rem;240      font-weight: 600;241      color: var(--text-primary);242      margin-bottom: var(--space-md);243    }244 245    .steps-list {246      display: flex;247      flex-direction: column;248      gap: 0;249    }250 251    .step-item {252      display: flex;253      gap: 0;254      position: relative;255    }256 257    .step-item:not(:last-child)::after {258      content: '';259      position: absolute;260      left: 20px;261      top: 45px;262      bottom: 0;263      width: 2px;264      background: linear-gradient(180deg, var(--primary), var(--secondary));265    }266 267    .step-dot {268      width: 42px;269      height: 42px;270      background: rgba(99, 102, 241, 0.15);271      border: 2px solid var(--primary);272      border-radius: 50%;273      display: flex;274      align-items: center;275      justify-content: center;276      font-family: 'JetBrains Mono', monospace;277      font-size: 0.9rem;278      font-weight: 600;279      color: var(--primary-light);280      flex-shrink: 0;281      margin-top: 2px;282      z-index: 1;283    }284 285    .step-content {286      flex: 1;287      padding: 0 0 var(--space-xl) var(--space-lg);288    }289 290    .step-title {291      font-size: 1rem;292      font-weight: 600;293      color: var(--text-primary);294      margin-bottom: var(--space-xs);295    }296 297    .step-desc {298      font-size: 0.9rem;299      color: var(--text-secondary);300      margin-bottom: var(--space-md);301      line-height: 1.6;302    }303 304    /* ═══════════════════════════════════════════════════════════════════════════305       DATASET INFO306       ═══════════════════════════════════════════════════════════════════════════ */307    .dataset-info {308      display: flex;309      align-items: center;310      gap: var(--space-md);311      padding: var(--space-md) var(--space-lg);312      background: rgba(99, 102, 241, 0.05);313      border: 1px solid rgba(99, 102, 241, 0.2);314      border-radius: var(--radius-md);315      margin-bottom: var(--space-lg);316    }317 318    .dataset-icon {319      font-size: 1.5rem;320    }321 322    .dataset-content {323      flex: 1;324    }325 326    .dataset-name {327      font-size: 0.85rem;328      font-weight: 600;329      color: var(--text-primary);330    }331 332    .dataset-link {333      font-size: 0.75rem;334      color: var(--primary-light);335      text-decoration: none;336    }337 338    .dataset-link:hover {339      text-decoration: underline;340    }341 342    .dataset-stats {343      display: flex;344      gap: var(--space-md);345    }346 347    .dataset-stat {348      text-align: center;349    }350 351    .dataset-stat-value {352      font-family: 'JetBrains Mono', monospace;353      font-size: 1rem;354      font-weight: 700;355      color: var(--text-primary);356    }357 358    .dataset-stat-label {359      font-size: 0.65rem;360      color: var(--text-muted);361      text-transform: uppercase;362    }363 364    /* ═══════════════════════════════════════════════════════════════════════════365       EXPECTED OUTPUT366       ═══════════════════════════════════════════════════════════════════════════ */367    .expected-output {368      background: rgba(16, 185, 129, 0.08);369      border: 1px solid rgba(16, 185, 129, 0.25);370      border-radius: var(--radius-md);371      padding: var(--space-md) var(--space-lg);372      margin-top: var(--space-md);373    }374 375    .expected-label {376      font-family: 'JetBrains Mono', monospace;377      font-size: 0.65rem;378      color: var(--success);379      text-transform: uppercase;380      letter-spacing: 1px;381      margin-bottom: var(--space-xs);382    }383 384    .expected-text {385      font-family: 'JetBrains Mono', monospace;386      font-size: 0.8rem;387      color: var(--text-secondary);388      line-height: 1.6;389    }390 391    /* ═══════════════════════════════════════════════════════════════════════════392       CTA SECTION393       ═══════════════════════════════════════════════════════════════════════════ */394    .tp-cta {395      text-align: center;396      padding: var(--space-3xl);397      background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary));398      border: 1px solid var(--border-color);399      border-radius: var(--radius-lg);400      margin-top: var(--space-2xl);401    }402 403    .tp-cta-icon {404      font-size: 3rem;405      margin-bottom: var(--space-md);406    }407 408    .tp-cta-title {409      font-size: 1.5rem;410      font-weight: 700;411      color: var(--text-primary);412      margin-bottom: var(--space-sm);413    }414 415    .tp-cta-text {416      font-size: 1rem;417      color: var(--text-secondary);418      margin-bottom: var(--space-xl);419    }420 421    /* ═══════════════════════════════════════════════════════════════════════════422       RESPONSIVE423       ═══════════════════════════════════════════════════════════════════════════ */424    @media (max-width: 768px) {425      .tp-goals {426        grid-template-columns: 1fr;427      }428 429      .tp-goal-box:first-child {430        border-right: none;431        border-bottom: 1px solid var(--border-color);432      }433 434      .tp-header {435        flex-direction: column;436      }437 438      .dataset-info {439        flex-direction: column;440        text-align: center;441      }442 443      .dataset-stats {444        justify-content: center;445      }446    }447  </style>448</head>449<body>450  <!-- Particles Background -->451  <div class="particles-container">452    <div class="particle"></div>453    <div class="particle"></div>454    <div class="particle"></div>455    <div class="particle"></div>456    <div class="particle"></div>457  </div>458 459  <!-- Navigation -->460  <nav class="navbar">461    <a href="index.html" class="navbar-brand">462      <div class="brand-logo">🧠</div>463      <span>ML Academy</span>464    </a>465    <div class="navbar-nav">466      <a href="index.html" class="nav-link">467        <span class="nav-icon"></span>468        <span>Accueil</span>469      </a>470      <a href="cours.html" class="nav-link">471        <span class="nav-icon"></span>472        <span>Cours</span>473      </a>474      <a href="tp.html" class="nav-link active">475        <span class="nav-icon">💻</span>476        <span>TPs</span>477      </a>478      <a href="feedback.html" class="nav-link">479        <span class="nav-icon"></span>480        <span>Contact</span>481      </a>482    </div>483    <div class="nav-badge">484      <div class="dot"></div>485      <span>Google Colab Ready</span>486    </div>487  </nav>488 489  <!-- Page Wrapper -->490  <div class="page-wrapper">491    <!-- Hero -->492    <section class="tp-hero">493      <div class="tp-hero-label">Travaux Pratiques</div>494      <h1 class="tp-hero-title">💻 Notebooks Guidés</h1>495      <p class="tp-hero-subtitle">496        6 TPs complets sur des datasets réels de Kaggle. Exécutez directement sur Google Colab, 497        aucune installation requise.498      </p>499      <div class="tp-hero-badges">500        <span class="badge badge-primary"> 6 Notebooks</span>501        <span class="badge badge-success"> Google Colab</span>502        <span class="badge badge-secondary"> Datasets Kaggle</span>503      </div>504    </section>505 506    <!-- TP Container -->507    <div class="tp-container">508      509      <!-- TP 1: Titanic -->510      <div class="tp-card scroll-animate">511        <div class="tp-header">512          <div class="tp-badge titanic">TP-1</div>513          <div class="tp-header-content">514            <h2 class="tp-title">Survie sur le Titanic — Classification</h2>515            <div class="tp-meta">516              <span class="badge badge-primary"> 30 min</span>517              <span class="badge badge-secondary">Classification</span>518              <span class="badge badge-success">Scikit-learn</span>519              <span class="badge badge-accent">Pandas</span>520            </div>521            <p class="tp-description">522              Prédire la survie des passagers du Titanic à partir de leurs caractéristiques 523              (âge, sexe, classe, etc.). Le dataset classique pour débuter en ML.524            </p>525          </div>526          <a href="https://colab.research.google.com/#fileId=https://huggingface.co/spaces/MAALOOUF/Machine_Learning_Training/blob/main/notebooks/TP1_Titanic_Survival.ipynb" target="_blank" class="tp-colab-btn">527            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">528              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>529            </svg>530            Ouvrir dans Colab531          </a>532        </div>533        534        <div class="tp-body">535          <div class="dataset-info">536            <div class="dataset-icon">🚢</div>537            <div class="dataset-content">538              <div class="dataset-name">Dataset : Titanic - Machine Learning from Disaster</div>539              <a href="https://www.kaggle.com/competitions/titanic" target="_blank" class="dataset-link">540                🔗 kaggle.com/competitions/titanic541              </a>542            </div>543            <div class="dataset-stats">544              <div class="dataset-stat">545                <div class="dataset-stat-value">891</div>546                <div class="dataset-stat-label">Lignes</div>547              </div>548              <div class="dataset-stat">549                <div class="dataset-stat-value">12</div>550                <div class="dataset-stat-label">Colonnes</div>551              </div>552            </div>553          </div>554 555          <div class="tp-goals">556            <div class="tp-goal-box">557              <div class="tp-goal-label"> Objectif</div>558              <p class="tp-goal-text">559                Construire un modèle de classification binaire pour prédire si un passager 560                a survécu ou non au naufrage du Titanic.561              </p>562            </div>563            <div class="tp-goal-box">564              <div class="tp-goal-label">✅ Résultat attendu</div>565              <p class="tp-goal-text">566                Accuracy > <strong>80%</strong> sur l'ensemble de test. 567                Analyse de l'importance des features.568              </p>569            </div>570          </div>571 572          <h3 class="concepts-title"> Concepts utilisés</h3>573          <div class="concepts-grid">574            <div class="concept-item">575              <div class="concept-name">Prétraitement</div>576              <div class="concept-desc">Gestion des valeurs manquantes</div>577            </div>578            <div class="concept-item">579              <div class="concept-name">Encodage</div>580              <div class="concept-desc">Variables catégorielles</div>581            </div>582            <div class="concept-item">583              <div class="concept-name">Feature Engineering</div>584              <div class="concept-desc">Création de nouvelles features</div>585            </div>586            <div class="concept-item">587              <div class="concept-name">Random Forest</div>588              <div class="concept-desc">Classification</div>589            </div>590            <div class="concept-item">591              <div class="concept-name">Cross-Validation</div>592              <div class="concept-desc">Évaluation robuste</div>593            </div>594            <div class="concept-item">595              <div class="concept-name">Grid Search</div>596              <div class="concept-desc">Optimisation hyperparamètres</div>597            </div>598          </div>599 600          <h3 class="steps-title"> Étapes du TP</h3>601          <div class="steps-list">602            <div class="step-item">603              <div class="step-dot">1</div>604              <div class="step-content">605                <div class="step-title">Exploration des données</div>606                <div class="step-desc">607                  Charger le dataset, analyser la distribution des variables, 608                  identifier les valeurs manquantes et les outliers.609                </div>610              </div>611            </div>612            <div class="step-item">613              <div class="step-dot">2</div>614              <div class="step-content">615                <div class="step-title">Prétraitement</div>616                <div class="step-desc">617                  Remplir les valeurs manquantes, encoder les variables catégorielles 618                  (Sex, Embarked), créer des features (FamilySize, IsAlone).619                </div>620              </div>621            </div>622            <div class="step-item">623              <div class="step-dot">3</div>624              <div class="step-content">625                <div class="step-title">Modélisation</div>626                <div class="step-desc">627                  Entraîner plusieurs modèles : Logistic Regression, Random Forest, 628                  Gradient Boosting. Comparer leurs performances.629                </div>630                <div class="expected-output">631                  <div class="expected-label">Résultats attendus</div>632                  <div class="expected-text">633                    Random Forest: 82% accuracy<br>634                    Feature importance: Sex > Pclass > Age > Fare635                  </div>636                </div>637              </div>638            </div>639          </div>640        </div>641      </div>642 643      <!-- TP 2: House Prices -->644      <div class="tp-card scroll-animate">645        <div class="tp-header">646          <div class="tp-badge housing">TP-2</div>647          <div class="tp-header-content">648            <h2 class="tp-title">Prix des Maisons — Régression Avancée</h2>649            <div class="tp-meta">650              <span class="badge badge-primary"> 45 min</span>651              <span class="badge badge-secondary">Régression</span>652              <span class="badge badge-success">XGBoost</span>653              <span class="badge badge-accent">Feature Engineering</span>654            </div>655            <p class="tp-description">656              Prédire le prix de vente des maisons à Ames, Iowa. Un problème de régression 657              riche en features avec beaucoup de prétraitement nécessaire.658            </p>659          </div>660          <a href="https://colab.research.google.com/#fileId=https://huggingface.co/spaces/MAALOOUF/Machine_Learning_Training/blob/main/notebooks/TP2_House_Prices.ipynb" target="_blank" class="tp-colab-btn">661            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">662              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>663            </svg>664            Ouvrir dans Colab665          </a>666        </div>667        668        <div class="tp-body">669          <div class="dataset-info">670            <div class="dataset-icon"></div>671            <div class="dataset-content">672              <div class="dataset-name">Dataset : House Prices - Advanced Regression Techniques</div>673              <a href="https://www.kaggle.com/competitions/house-prices-advanced-regression-techniques" target="_blank" class="dataset-link">674                🔗 kaggle.com/competitions/house-prices675              </a>676            </div>677            <div class="dataset-stats">678              <div class="dataset-stat">679                <div class="dataset-stat-value">1460</div>680                <div class="dataset-stat-label">Lignes</div>681              </div>682              <div class="dataset-stat">683                <div class="dataset-stat-value">81</div>684                <div class="dataset-stat-label">Colonnes</div>685              </div>686            </div>687          </div>688 689          <div class="tp-goals">690            <div class="tp-goal-box">691              <div class="tp-goal-label"> Objectif</div>692              <p class="tp-goal-text">693                Prédire le prix de vente des maisons avec le plus faible RMSE possible 694                en utilisant 79 features explicatives.695              </p>696            </div>697            <div class="tp-goal-box">698              <div class="tp-goal-label">✅ Résultat attendu</div>699              <p class="tp-goal-text">700                RMSE <strong>&lt; 30,000$</strong> sur log-transformed prices. 701                Top 20% du leaderboard Kaggle.702              </p>703            </div>704          </div>705 706          <h3 class="concepts-title"> Concepts utilisés</h3>707          <div class="concepts-grid">708            <div class="concept-item">709              <div class="concept-name">Outlier Detection</div>710              <div class="concept-desc">Détection et traitement</div>711            </div>712            <div class="concept-item">713              <div class="concept-name">Skewness</div>714              <div class="concept-desc">Transformation log</div>715            </div>716            <div class="concept-item">717              <div class="concept-name">Correlation Analysis</div>718              <div class="concept-desc">Matrice de corrélation</div>719            </div>720            <div class="concept-item">721              <div class="concept-name">XGBoost</div>722              <div class="concept-desc">Gradient boosting</div>723            </div>724            <div class="concept-item">725              <div class="concept-name">Stacking</div>726              <div class="concept-desc">Ensemble de modèles</div>727            </div>728            <div class="concept-item">729              <div class="concept-name">K-Fold CV</div>730              <div class="concept-desc">Validation croisée</div>731            </div>732          </div>733 734          <h3 class="steps-title"> Étapes du TP</h3>735          <div class="steps-list">736            <div class="step-item">737              <div class="step-dot">1</div>738              <div class="step-content">739                <div class="step-title">Analyse exploratoire avancée</div>740                <div class="step-desc">741                  Visualiser la distribution des prix, identifier les outliers, 742                  analyser les corrélations entre features et prix.743                </div>744              </div>745            </div>746            <div class="step-item">747              <div class="step-dot">2</div>748              <div class="step-content">749                <div class="step-title">Feature Engineering intensif</div>750                <div class="step-desc">751                  Créer des features composites (TotalSF, HouseAge), 752                  regrouper les catégories rares, transformer les variables skewed.753                </div>754              </div>755            </div>756            <div class="step-item">757              <div class="step-dot">3</div>758              <div class="step-content">759                <div class="step-title">Modélisation avancée</div>760                <div class="step-desc">761                  XGBoost, LightGBM, Random Forest en stacking. 762                  Optimisation des hyperparamètres avec Optuna.763                </div>764                <div class="expected-output">765                  <div class="expected-label">Résultats attendus</div>766                  <div class="expected-text">767                    XGBoost: RMSE = 0.12 (log scale)<br>768                    Feature importance: OverallQual > GrLivArea > GarageCars769                  </div>770                </div>771              </div>772            </div>773          </div>774        </div>775      </div>776 777      <!-- TP 3: Iris -->778      <div class="tp-card scroll-animate">779        <div class="tp-header">780          <div class="tp-badge iris">TP-3</div>781          <div class="tp-header-content">782            <h2 class="tp-title">Classification Iris — Introduction au ML</h2>783            <div class="tp-meta">784              <span class="badge badge-primary"> 20 min</span>785              <span class="badge badge-secondary">Classification</span>786              <span class="badge badge-success">Débutant</span>787              <span class="badge badge-accent">Visualisation</span>788            </div>789            <p class="tp-description">790              Le dataset classique pour la classification multi-classe. 791              Identifier l'espèce d'iris à partir des mesures des pétales et sépales.792            </p>793          </div>794          <a href="https://colab.research.google.com/#fileId=https://huggingface.co/spaces/MAALOOUF/Machine_Learning_Training/blob/main/notebooks/TP3_Iris_Classification.ipynb" target="_blank" class="tp-colab-btn">795            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">796              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>797            </svg>798            Ouvrir dans Colab799          </a>800        </div>801        802        <div class="tp-body">803          <div class="dataset-info">804            <div class="dataset-icon"></div>805            <div class="dataset-content">806              <div class="dataset-name">Dataset : Iris Flower Classification</div>807              <a href="https://www.kaggle.com/datasets/uciml/iris" target="_blank" class="dataset-link">808                🔗 kaggle.com/datasets/uciml/iris809              </a>810            </div>811            <div class="dataset-stats">812              <div class="dataset-stat">813                <div class="dataset-stat-value">150</div>814                <div class="dataset-stat-label">Lignes</div>815              </div>816              <div class="dataset-stat">817                <div class="dataset-stat-value">5</div>818                <div class="dataset-stat-label">Colonnes</div>819              </div>820            </div>821          </div>822 823          <div class="tp-goals">824            <div class="tp-goal-box">825              <div class="tp-goal-label"> Objectif</div>826              <p class="tp-goal-text">827                Classifier les iris en 3 espèces (Setosa, Versicolor, Virginica) 828                à partir de 4 features numériques.829              </p>830            </div>831            <div class="tp-goal-box">832              <div class="tp-goal-label">✅ Résultat attendu</div>833              <p class="tp-goal-text">834                Accuracy de <strong>95%+</strong>. Visualisation des frontières de décision.835              </p>836            </div>837          </div>838 839          <h3 class="concepts-title"> Concepts utilisés</h3>840          <div class="concepts-grid">841            <div class="concept-item">842              <div class="concept-name">KNN</div>843              <div class="concept-desc">K-Nearest Neighbors</div>844            </div>845            <div class="concept-item">846              <div class="concept-name">SVM</div>847              <div class="concept-desc">Support Vector Machine</div>848            </div>849            <div class="concept-item">850              <div class="concept-name">Decision Boundary</div>851              <div class="concept-desc">Visualisation</div>852            </div>853            <div class="concept-item">854              <div class="concept-name">PCA</div>855              <div class="concept-desc">Réduction de dimension</div>856            </div>857            <div class="concept-item">858              <div class="concept-name">Pairplot</div>859              <div class="concept-desc">Visualisation multi-variables</div>860            </div>861            <div class="concept-item">862              <div class="concept-name">Confusion Matrix</div>863              <div class="concept-desc">Évaluation détaillée</div>864            </div>865          </div>866 867          <h3 class="steps-title">Étapes du TP</h3>868          <div class="steps-list">869            <div class="step-item">870              <div class="step-dot">1</div>871              <div class="step-content">872                <div class="step-title">Visualisation exploratoire</div>873                <div class="step-desc">874                  Pairplot pour voir les relations entre features, 875                  boxplots par espèce pour identifier les patterns.876                </div>877              </div>878            </div>879            <div class="step-item">880              <div class="step-dot">2</div>881              <div class="step-content">882                <div class="step-title">Comparaison des algorithmes</div>883                <div class="step-desc">884                  KNN, SVM, Decision Tree, Random Forest. 885                  Comparer accuracy et temps d'entraînement.886                </div>887              </div>888            </div>889            <div class="step-item">890              <div class="step-dot">3</div>891              <div class="step-content">892                <div class="step-title">Visualisation des frontières</div>893                <div class="step-desc">894                  Tracer les frontières de décision en 2D après PCA. 895                  Comprendre comment chaque algorithme sépare les classes.896                </div>897                <div class="expected-output">898                  <div class="expected-label">Résultats attendus</div>899                  <div class="expected-text">900                    SVM: 98% accuracy<br>901                    Setosa parfaitement séparable, Virginica/Versicolor plus proches902                  </div>903                </div>904              </div>905            </div>906          </div>907        </div>908      </div>909 910      <!-- TP 4: Energy Consumption -->911      <div class="tp-card scroll-animate">912        <div class="tp-header">913          <div class="tp-badge energy">TP-4</div>914          <div class="tp-header-content">915            <h2 class="tp-title">Consommation Énergétique — Séries Temporelles</h2>916            <div class="tp-meta">917              <span class="badge badge-primary"> 40 min</span>918              <span class="badge badge-secondary">Time Series</span>919              <span class="badge badge-success">LSTM</span>920              <span class="badge badge-accent">TensorFlow</span>921            </div>922            <p class="tp-description">923              Prédire la consommation électrique d'un bâtiment à partir de données 924              temporelles. Introduction aux LSTM et aux prédictions séquentielles.925            </p>926          </div>927          <a href="https://huggingface.co/spaces/MAALOOUF/Machine_Learning_Training/blob/main/notebooks/TP4_LSTM_TimeSeries.ipynb" target="_blank" class="tp-colab-btn">928            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">929              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>930            </svg>931            Ouvrir dans Colab932          </a>933        </div>934        935        <div class="tp-body">936          <div class="dataset-info">937            <div class="dataset-icon">⚡</div>938            <div class="dataset-content">939              <div class="dataset-name">Dataset : ASHRAE - Great Energy Predictor III</div>940              <a href="https://www.kaggle.com/c/ashrae-energy-prediction" target="_blank" class="dataset-link">941                🔗 kaggle.com/c/ashrae-energy-prediction942              </a>943            </div>944            <div class="dataset-stats">945              <div class="dataset-stat">946                <div class="dataset-stat-value">20M+</div>947                <div class="dataset-stat-label">Lignes</div>948              </div>949              <div class="dataset-stat">950                <div class="dataset-stat-value">1449</div>951                <div class="dataset-stat-label">Bâtiments</div>952              </div>953            </div>954          </div>955 956          <div class="tp-goals">957            <div class="tp-goal-box">958              <div class="tp-goal-label"> Objectif</div>959              <p class="tp-goal-text">960                Prédire la consommation énergétique horaire de bâtiments 961                à partir de données météo et historiques.962              </p>963            </div>964            <div class="tp-goal-box">965              <div class="tp-goal-label">✅ Résultat attendu</div>966              <p class="tp-goal-text">967                RMSE <strong>&lt; 100</strong> sur la consommation normalisée. 968                Capture des patterns journaliers et saisonniers.969              </p>970            </div>971          </div>972 973          <h3 class="concepts-title"> Concepts utilisés</h3>974          <div class="concepts-grid">975            <div class="concept-item">976              <div class="concept-name">Time Series</div>977              <div class="concept-desc">Traitement séquentiel</div>978            </div>979            <div class="concept-item">980              <div class="concept-name">LSTM</div>981              <div class="concept-desc">Réseaux récurrents</div>982            </div>983            <div class="concept-item">984              <div class="concept-name">Seasonality</div>985              <div class="concept-desc">Patterns saisonniers</div>986            </div>987            <div class="concept-item">988              <div class="concept-name">Windowing</div>989              <div class="concept-desc">Fenêtres glissantes</div>990            </div>991            <div class="concept-item">992              <div class="concept-name">Early Stopping</div>993              <div class="concept-desc">Arrêt automatique</div>994            </div>995            <div class="concept-item">996              <div class="concept-name">TensorBoard</div>997              <div class="concept-desc">Visualisation training</div>998            </div>999          </div>1000 1001          <h3 class="steps-title"> Étapes du TP</h3>1002          <div class="steps-list">1003            <div class="step-item">1004              <div class="step-dot">1</div>1005              <div class="step-content">1006                <div class="step-title">Analyse temporelle</div>1007                <div class="step-desc">1008                  Visualiser les patterns horaires, journaliers, hebdomadaires. 1009                  Identifier la saisonnalité et les tendances.1010                </div>1011              </div>1012            </div>1013            <div class="step-item">1014              <div class="step-dot">2</div>1015              <div class="step-content">1016                <div class="step-title">Feature Engineering temporel</div>1017                <div class="step-desc">1018                  Créer des features temporelles (hour, day_of_week, month), 1019                  lags (valeurs précédentes), rolling statistics.1020                </div>1021              </div>1022            </div>1023            <div class="step-item">1024              <div class="step-dot">3</div>1025              <div class="step-content">1026                <div class="step-title">Modélisation LSTM</div>1027                <div class="step-desc">1028                  Construire un modèle LSTM avec Keras. 1029                  Entraînement avec early stopping et learning rate scheduling.1030                </div>1031                <div class="expected-output">1032                  <div class="expected-label">Résultats attendus</div>1033                  <div class="expected-text">1034                    LSTM: RMSE = 85 sur test set<br>1035                    Capture des pics de consommation matin/soir1036                  </div>1037                </div>1038              </div>1039            </div>1040          </div>1041        </div>1042      </div>1043 1044      <!-- TP 5: MNIST -->1045      <div class="tp-card scroll-animate">1046        <div class="tp-header">1047          <div class="tp-badge mnist">TP-5</div>1048          <div class="tp-header-content">1049            <h2 class="tp-title">Reconnaissance de Chiffres — Deep Learning</h2>1050            <div class="tp-meta">1051              <span class="badge badge-primary"> 35 min</span>1052              <span class="badge badge-secondary">CNN</span>1053              <span class="badge badge-success">Computer Vision</span>1054              <span class="badge badge-accent">Keras</span>1055            </div>1056            <p class="tp-description">1057              Classification d'images de chiffres manuscrits (0-9) avec des réseaux de neurones convolutifs (CNN). 1058              Introduction au Computer Vision.1059            </p>1060          </div>1061          <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn">1062            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">1063              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>1064            </svg>1065            Ouvrir dans Colab1066          </a>1067        </div>1068        1069        <div class="tp-body">1070          <div class="dataset-info">1071            <div class="dataset-icon">🔢</div>1072            <div class="dataset-content">1073              <div class="dataset-name">Dataset : MNIST Handwritten Digits</div>1074              <a href="https://www.kaggle.com/datasets/hojjatk/mnist-dataset" target="_blank" class="dataset-link">1075                🔗 kaggle.com/datasets/hojjatk/mnist-dataset1076              </a>1077            </div>1078            <div class="dataset-stats">1079              <div class="dataset-stat">1080                <div class="dataset-stat-value">70K</div>1081                <div class="dataset-stat-label">Images</div>1082              </div>1083              <div class="dataset-stat">1084                <div class="dataset-stat-value">28×28</div>1085                <div class="dataset-stat-label">Pixels</div>1086              </div>1087            </div>1088          </div>1089 1090          <div class="tp-goals">1091            <div class="tp-goal-box">1092              <div class="tp-goal-label"> Objectif</div>1093              <p class="tp-goal-text">1094                Classifier les images de chiffres manuscrits (0-9) 1095                avec un CNN et atteindre >99% d'accuracy.1096              </p>1097            </div>1098            <div class="tp-goal-box">1099              <div class="tp-goal-label">✅ Résultat attendu</div>1100              <p class="tp-goal-text">1101                Accuracy de <strong>99%+</strong> sur le test set. 1102                Visualisation des filtres appris par le CNN.1103              </p>1104            </div>1105          </div>1106 1107          <h3 class="concepts-title"> Concepts utilisés</h3>1108          <div class="concepts-grid">1109            <div class="concept-item">1110              <div class="concept-name">CNN</div>1111              <div class="concept-desc">Convolutional Neural Network</div>1112            </div>1113            <div class="concept-item">1114              <div class="concept-name">Conv2D</div>1115              <div class="concept-desc">Couches de convolution</div>1116            </div>1117            <div class="concept-item">1118              <div class="concept-name">MaxPooling</div>1119              <div class="concept-desc">Réduction spatiale</div>1120            </div>1121            <div class="concept-item">1122              <div class="concept-name">Dropout</div>1123              <div class="concept-desc">Régularisation</div>1124            </div>1125            <div class="concept-item">1126              <div class="concept-name">BatchNorm</div>1127              <div class="concept-desc">Normalisation</div>1128            </div>1129            <div class="concept-item">1130              <div class="concept-name">Data Augmentation</div>1131              <div class="concept-desc">Augmentation données</div>1132            </div>1133          </div>1134 1135          <h3 class="steps-title"> Étapes du TP</h3>1136          <div class="steps-list">1137            <div class="step-item">1138              <div class="step-dot">1</div>1139              <div class="step-content">1140                <div class="step-title">Exploration des images</div>1141                <div class="step-desc">1142                  Visualiser des exemples de chaque chiffre, 1143                  analyser la distribution des classes.1144                </div>1145              </div>1146            </div>1147            <div class="step-item">1148              <div class="step-dot">2</div>1149              <div class="step-content">1150                <div class="step-title">Construction du CNN</div>1151                <div class="step-desc">1152                  Architecture: Conv2D → MaxPool → Conv2D → MaxPool → 1153                  Flatten → Dense → Dropout → Output (10 classes).1154                </div>1155              </div>1156            </div>1157            <div class="step-item">1158              <div class="step-dot">3</div>1159              <div class="step-content">1160                <div class="step-title">Entraînement et évaluation</div>1161                <div class="step-desc">1162                  Entraînement avec data augmentation, 1163                  visualisation des prédictions erronées.1164                </div>1165                <div class="expected-output">1166                  <div class="expected-label">Résultats attendus</div>1167                  <div class="expected-text">1168                    CNN: 99.2% accuracy<br>1169                    Erreurs principalement sur 4/9 et 3/8 similaires1170                  </div>1171                </div>1172              </div>1173            </div>1174          </div>1175        </div>1176      </div>1177 1178      <!-- TP 6: Sentiment Analysis -->1179      <div class="tp-card scroll-animate">1180        <div class="tp-header">1181          <div class="tp-badge sentiment">TP-6</div>1182          <div class="tp-header-content">1183            <h2 class="tp-title">Analyse de Sentiment — NLP</h2>1184            <div class="tp-meta">1185              <span class="badge badge-primary"> 40 min</span>1186              <span class="badge badge-secondary">NLP</span>1187              <span class="badge badge-success">Embeddings</span>1188              <span class="badge badge-accent">Transformers</span>1189            </div>1190            <p class="tp-description">1191              Classifier les avis IMDB comme positifs ou négatifs. 1192              Introduction au NLP et aux word embeddings avec les Transformers.1193            </p>1194          </div>1195          <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn">1196            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">1197              <path d="M16.9 4.8C14.4 2.4 10.7 1.7 7.5 3.1L10 5.6c1.8-.4 3.8 0 5.2 1.4 2.3 2.3 2.3 6 0 8.3-1.4 1.4-3.4 1.9-5.2 1.5L7.5 19.2c3.2 1.3 6.9.6 9.4-1.8 3.4-3.4 3.4-9.2 0-12.6zm-9.8.8L4.8 8c-.8 1.2-1.2 2.6-1.2 4s.4 2.8 1.2 4l2.3-2.3c-.4-.5-.7-1.1-.8-1.7H8V9.9H6.3c.1-.6.4-1.2.8-1.7z"/>1198            </svg>1199            Ouvrir dans Colab1200          </a>

Showing the first 1,200 of 1389 lines. Download the file for the rest.