| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Travaux Pratiques — ML Academy</title> |
| <link rel="stylesheet" href="css/shared.css"> |
| <style> |
| |
| |
| |
| .tp-hero { |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); |
| border-bottom: 1px solid var(--border-color); |
| padding: var(--space-3xl) var(--space-xl); |
| text-align: center; |
| } |
| |
| .tp-hero-label { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.75rem; |
| color: var(--primary-light); |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| margin-bottom: var(--space-md); |
| } |
| |
| .tp-hero-title { |
| font-size: clamp(2rem, 5vw, 3rem); |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: var(--space-md); |
| } |
| |
| .tp-hero-subtitle { |
| font-size: 1.1rem; |
| color: var(--text-secondary); |
| max-width: 600px; |
| margin: 0 auto var(--space-xl); |
| } |
| |
| .tp-hero-badges { |
| display: flex; |
| justify-content: center; |
| gap: var(--space-md); |
| flex-wrap: wrap; |
| } |
| |
| |
| |
| |
| .tp-container { |
| max-width: 1000px; |
| margin: 0 auto; |
| padding: var(--space-2xl) var(--space-xl); |
| } |
| |
| |
| |
| |
| .tp-card { |
| background: var(--bg-card); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| margin-bottom: var(--space-2xl); |
| transition: all var(--transition-base); |
| } |
| |
| .tp-card:hover { |
| border-color: var(--primary); |
| box-shadow: var(--shadow-lg), var(--shadow-glow); |
| } |
| |
| .tp-header { |
| display: flex; |
| align-items: flex-start; |
| gap: var(--space-lg); |
| padding: var(--space-xl); |
| background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary)); |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .tp-badge { |
| padding: var(--space-sm) var(--space-md); |
| border-radius: var(--radius-md); |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.7rem; |
| font-weight: 600; |
| color: white; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| flex-shrink: 0; |
| } |
| |
| .tp-badge.titanic { background: linear-gradient(135deg, #1e40af, #3b82f6); } |
| .tp-badge.housing { background: linear-gradient(135deg, #047857, #10b981); } |
| .tp-badge.iris { background: linear-gradient(135deg, #b45309, #f59e0b); } |
| .tp-badge.energy { background: linear-gradient(135deg, #7c3aed, #a78bfa); } |
| .tp-badge.mnist { background: linear-gradient(135deg, #be123c, #f43f5e); } |
| .tp-badge.sentiment { background: linear-gradient(135deg, #0e7490, #06b6d4); } |
| |
| .tp-header-content { |
| flex: 1; |
| } |
| |
| .tp-title { |
| font-size: 1.4rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: var(--space-sm); |
| } |
| |
| .tp-meta { |
| display: flex; |
| gap: var(--space-sm); |
| flex-wrap: wrap; |
| margin-bottom: var(--space-sm); |
| } |
| |
| .tp-description { |
| font-size: 0.95rem; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| } |
| |
| .tp-colab-btn { |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-sm); |
| padding: var(--space-sm) var(--space-md); |
| background: #f9ab00; |
| color: #000; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.8rem; |
| font-weight: 600; |
| text-decoration: none; |
| border-radius: var(--radius-md); |
| transition: all var(--transition-base); |
| flex-shrink: 0; |
| } |
| |
| .tp-colab-btn:hover { |
| background: #fbbf24; |
| transform: translateY(-2px); |
| } |
| |
| |
| |
| |
| .tp-body { |
| padding: var(--space-xl); |
| } |
| |
| .tp-goals { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 0; |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| overflow: hidden; |
| margin-bottom: var(--space-xl); |
| } |
| |
| .tp-goal-box { |
| padding: var(--space-lg); |
| background: var(--bg-tertiary); |
| } |
| |
| .tp-goal-box:first-child { |
| border-right: 1px solid var(--border-color); |
| } |
| |
| .tp-goal-label { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin-bottom: var(--space-sm); |
| } |
| |
| .tp-goal-text { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| } |
| |
| .tp-goal-text strong { |
| color: var(--success); |
| } |
| |
| |
| |
| |
| .concepts-title { |
| font-size: 1rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: var(--space-md); |
| } |
| |
| .concepts-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| gap: var(--space-sm); |
| margin-bottom: var(--space-xl); |
| } |
| |
| .concept-item { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| padding: var(--space-md); |
| transition: all var(--transition-base); |
| } |
| |
| .concept-item:hover { |
| border-color: var(--primary); |
| transform: translateY(-2px); |
| } |
| |
| .concept-name { |
| font-size: 0.85rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: var(--space-xs); |
| } |
| |
| .concept-desc { |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| } |
| |
| |
| |
| |
| .steps-title { |
| font-size: 1rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: var(--space-md); |
| } |
| |
| .steps-list { |
| display: flex; |
| flex-direction: column; |
| gap: 0; |
| } |
| |
| .step-item { |
| display: flex; |
| gap: 0; |
| position: relative; |
| } |
| |
| .step-item:not(:last-child)::after { |
| content: ''; |
| position: absolute; |
| left: 20px; |
| top: 45px; |
| bottom: 0; |
| width: 2px; |
| background: linear-gradient(180deg, var(--primary), var(--secondary)); |
| } |
| |
| .step-dot { |
| width: 42px; |
| height: 42px; |
| background: rgba(99, 102, 241, 0.15); |
| border: 2px solid var(--primary); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.9rem; |
| font-weight: 600; |
| color: var(--primary-light); |
| flex-shrink: 0; |
| margin-top: 2px; |
| z-index: 1; |
| } |
| |
| .step-content { |
| flex: 1; |
| padding: 0 0 var(--space-xl) var(--space-lg); |
| } |
| |
| .step-title { |
| font-size: 1rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: var(--space-xs); |
| } |
| |
| .step-desc { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| margin-bottom: var(--space-md); |
| line-height: 1.6; |
| } |
| |
| |
| |
| |
| .dataset-info { |
| display: flex; |
| align-items: center; |
| gap: var(--space-md); |
| padding: var(--space-md) var(--space-lg); |
| background: rgba(99, 102, 241, 0.05); |
| border: 1px solid rgba(99, 102, 241, 0.2); |
| border-radius: var(--radius-md); |
| margin-bottom: var(--space-lg); |
| } |
| |
| .dataset-icon { |
| font-size: 1.5rem; |
| } |
| |
| .dataset-content { |
| flex: 1; |
| } |
| |
| .dataset-name { |
| font-size: 0.85rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
| |
| .dataset-link { |
| font-size: 0.75rem; |
| color: var(--primary-light); |
| text-decoration: none; |
| } |
| |
| .dataset-link:hover { |
| text-decoration: underline; |
| } |
| |
| .dataset-stats { |
| display: flex; |
| gap: var(--space-md); |
| } |
| |
| .dataset-stat { |
| text-align: center; |
| } |
| |
| .dataset-stat-value { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 1rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
| |
| .dataset-stat-label { |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| } |
| |
| |
| |
| |
| .expected-output { |
| background: rgba(16, 185, 129, 0.08); |
| border: 1px solid rgba(16, 185, 129, 0.25); |
| border-radius: var(--radius-md); |
| padding: var(--space-md) var(--space-lg); |
| margin-top: var(--space-md); |
| } |
| |
| .expected-label { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.65rem; |
| color: var(--success); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin-bottom: var(--space-xs); |
| } |
| |
| .expected-text { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.8rem; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| } |
| |
| |
| |
| |
| .tp-cta { |
| text-align: center; |
| padding: var(--space-3xl); |
| background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary)); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-lg); |
| margin-top: var(--space-2xl); |
| } |
| |
| .tp-cta-icon { |
| font-size: 3rem; |
| margin-bottom: var(--space-md); |
| } |
| |
| .tp-cta-title { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: var(--space-sm); |
| } |
| |
| .tp-cta-text { |
| font-size: 1rem; |
| color: var(--text-secondary); |
| margin-bottom: var(--space-xl); |
| } |
| |
| |
| |
| |
| @media (max-width: 768px) { |
| .tp-goals { |
| grid-template-columns: 1fr; |
| } |
| |
| .tp-goal-box:first-child { |
| border-right: none; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .tp-header { |
| flex-direction: column; |
| } |
| |
| .dataset-info { |
| flex-direction: column; |
| text-align: center; |
| } |
| |
| .dataset-stats { |
| justify-content: center; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="particles-container"> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| </div> |
|
|
| |
| <nav class="navbar"> |
| <a href="index.html" class="navbar-brand"> |
| <div class="brand-logo">🧠</div> |
| <span>ML Academy</span> |
| </a> |
| <div class="navbar-nav"> |
| <a href="index.html" class="nav-link"> |
| <span class="nav-icon"></span> |
| <span>Accueil</span> |
| </a> |
| <a href="cours.html" class="nav-link"> |
| <span class="nav-icon"></span> |
| <span>Cours</span> |
| </a> |
| <a href="tp.html" class="nav-link active"> |
| <span class="nav-icon">💻</span> |
| <span>TPs</span> |
| </a> |
| <a href="feedback.html" class="nav-link"> |
| <span class="nav-icon"></span> |
| <span>Contact</span> |
| </a> |
| </div> |
| <div class="nav-badge"> |
| <div class="dot"></div> |
| <span>Google Colab Ready</span> |
| </div> |
| </nav> |
|
|
| |
| <div class="page-wrapper"> |
| |
| <section class="tp-hero"> |
| <div class="tp-hero-label">Travaux Pratiques</div> |
| <h1 class="tp-hero-title">💻 Notebooks Guidés</h1> |
| <p class="tp-hero-subtitle"> |
| 6 TPs complets sur des datasets réels de Kaggle. Exécutez directement sur Google Colab, |
| aucune installation requise. |
| </p> |
| <div class="tp-hero-badges"> |
| <span class="badge badge-primary"> 6 Notebooks</span> |
| <span class="badge badge-success"> Google Colab</span> |
| <span class="badge badge-secondary"> Datasets Kaggle</span> |
| </div> |
| </section> |
|
|
| |
| <div class="tp-container"> |
| |
| |
| <div class="tp-card scroll-animate"> |
| <div class="tp-header"> |
| <div class="tp-badge titanic">TP-1</div> |
| <div class="tp-header-content"> |
| <h2 class="tp-title">Survie sur le Titanic — Classification</h2> |
| <div class="tp-meta"> |
| <span class="badge badge-primary"> 30 min</span> |
| <span class="badge badge-secondary">Classification</span> |
| <span class="badge badge-success">Scikit-learn</span> |
| <span class="badge badge-accent">Pandas</span> |
| </div> |
| <p class="tp-description"> |
| Prédire la survie des passagers du Titanic à partir de leurs caractéristiques |
| (âge, sexe, classe, etc.). Le dataset classique pour débuter en ML. |
| </p> |
| </div> |
| <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"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <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"/> |
| </svg> |
| Ouvrir dans Colab |
| </a> |
| </div> |
| |
| <div class="tp-body"> |
| <div class="dataset-info"> |
| <div class="dataset-icon">🚢</div> |
| <div class="dataset-content"> |
| <div class="dataset-name">Dataset : Titanic - Machine Learning from Disaster</div> |
| <a href="https://www.kaggle.com/competitions/titanic" target="_blank" class="dataset-link"> |
| 🔗 kaggle.com/competitions/titanic |
| </a> |
| </div> |
| <div class="dataset-stats"> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">891</div> |
| <div class="dataset-stat-label">Lignes</div> |
| </div> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">12</div> |
| <div class="dataset-stat-label">Colonnes</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="tp-goals"> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label"> Objectif</div> |
| <p class="tp-goal-text"> |
| Construire un modèle de classification binaire pour prédire si un passager |
| a survécu ou non au naufrage du Titanic. |
| </p> |
| </div> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label">✅ Résultat attendu</div> |
| <p class="tp-goal-text"> |
| Accuracy > <strong>80%</strong> sur l'ensemble de test. |
| Analyse de l'importance des features. |
| </p> |
| </div> |
| </div> |
|
|
| <h3 class="concepts-title"> Concepts utilisés</h3> |
| <div class="concepts-grid"> |
| <div class="concept-item"> |
| <div class="concept-name">Prétraitement</div> |
| <div class="concept-desc">Gestion des valeurs manquantes</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Encodage</div> |
| <div class="concept-desc">Variables catégorielles</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Feature Engineering</div> |
| <div class="concept-desc">Création de nouvelles features</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Random Forest</div> |
| <div class="concept-desc">Classification</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Cross-Validation</div> |
| <div class="concept-desc">Évaluation robuste</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Grid Search</div> |
| <div class="concept-desc">Optimisation hyperparamètres</div> |
| </div> |
| </div> |
|
|
| <h3 class="steps-title"> Étapes du TP</h3> |
| <div class="steps-list"> |
| <div class="step-item"> |
| <div class="step-dot">1</div> |
| <div class="step-content"> |
| <div class="step-title">Exploration des données</div> |
| <div class="step-desc"> |
| Charger le dataset, analyser la distribution des variables, |
| identifier les valeurs manquantes et les outliers. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">2</div> |
| <div class="step-content"> |
| <div class="step-title">Prétraitement</div> |
| <div class="step-desc"> |
| Remplir les valeurs manquantes, encoder les variables catégorielles |
| (Sex, Embarked), créer des features (FamilySize, IsAlone). |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">3</div> |
| <div class="step-content"> |
| <div class="step-title">Modélisation</div> |
| <div class="step-desc"> |
| Entraîner plusieurs modèles : Logistic Regression, Random Forest, |
| Gradient Boosting. Comparer leurs performances. |
| </div> |
| <div class="expected-output"> |
| <div class="expected-label">Résultats attendus</div> |
| <div class="expected-text"> |
| Random Forest: 82% accuracy<br> |
| Feature importance: Sex > Pclass > Age > Fare |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tp-card scroll-animate"> |
| <div class="tp-header"> |
| <div class="tp-badge housing">TP-2</div> |
| <div class="tp-header-content"> |
| <h2 class="tp-title">Prix des Maisons — Régression Avancée</h2> |
| <div class="tp-meta"> |
| <span class="badge badge-primary"> 45 min</span> |
| <span class="badge badge-secondary">Régression</span> |
| <span class="badge badge-success">XGBoost</span> |
| <span class="badge badge-accent">Feature Engineering</span> |
| </div> |
| <p class="tp-description"> |
| Prédire le prix de vente des maisons à Ames, Iowa. Un problème de régression |
| riche en features avec beaucoup de prétraitement nécessaire. |
| </p> |
| </div> |
| <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"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <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"/> |
| </svg> |
| Ouvrir dans Colab |
| </a> |
| </div> |
| |
| <div class="tp-body"> |
| <div class="dataset-info"> |
| <div class="dataset-icon"></div> |
| <div class="dataset-content"> |
| <div class="dataset-name">Dataset : House Prices - Advanced Regression Techniques</div> |
| <a href="https://www.kaggle.com/competitions/house-prices-advanced-regression-techniques" target="_blank" class="dataset-link"> |
| 🔗 kaggle.com/competitions/house-prices |
| </a> |
| </div> |
| <div class="dataset-stats"> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">1460</div> |
| <div class="dataset-stat-label">Lignes</div> |
| </div> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">81</div> |
| <div class="dataset-stat-label">Colonnes</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="tp-goals"> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label"> Objectif</div> |
| <p class="tp-goal-text"> |
| Prédire le prix de vente des maisons avec le plus faible RMSE possible |
| en utilisant 79 features explicatives. |
| </p> |
| </div> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label">✅ Résultat attendu</div> |
| <p class="tp-goal-text"> |
| RMSE <strong>< 30,000$</strong> sur log-transformed prices. |
| Top 20% du leaderboard Kaggle. |
| </p> |
| </div> |
| </div> |
|
|
| <h3 class="concepts-title"> Concepts utilisés</h3> |
| <div class="concepts-grid"> |
| <div class="concept-item"> |
| <div class="concept-name">Outlier Detection</div> |
| <div class="concept-desc">Détection et traitement</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Skewness</div> |
| <div class="concept-desc">Transformation log</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Correlation Analysis</div> |
| <div class="concept-desc">Matrice de corrélation</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">XGBoost</div> |
| <div class="concept-desc">Gradient boosting</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Stacking</div> |
| <div class="concept-desc">Ensemble de modèles</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">K-Fold CV</div> |
| <div class="concept-desc">Validation croisée</div> |
| </div> |
| </div> |
|
|
| <h3 class="steps-title"> Étapes du TP</h3> |
| <div class="steps-list"> |
| <div class="step-item"> |
| <div class="step-dot">1</div> |
| <div class="step-content"> |
| <div class="step-title">Analyse exploratoire avancée</div> |
| <div class="step-desc"> |
| Visualiser la distribution des prix, identifier les outliers, |
| analyser les corrélations entre features et prix. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">2</div> |
| <div class="step-content"> |
| <div class="step-title">Feature Engineering intensif</div> |
| <div class="step-desc"> |
| Créer des features composites (TotalSF, HouseAge), |
| regrouper les catégories rares, transformer les variables skewed. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">3</div> |
| <div class="step-content"> |
| <div class="step-title">Modélisation avancée</div> |
| <div class="step-desc"> |
| XGBoost, LightGBM, Random Forest en stacking. |
| Optimisation des hyperparamètres avec Optuna. |
| </div> |
| <div class="expected-output"> |
| <div class="expected-label">Résultats attendus</div> |
| <div class="expected-text"> |
| XGBoost: RMSE = 0.12 (log scale)<br> |
| Feature importance: OverallQual > GrLivArea > GarageCars |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tp-card scroll-animate"> |
| <div class="tp-header"> |
| <div class="tp-badge iris">TP-3</div> |
| <div class="tp-header-content"> |
| <h2 class="tp-title">Classification Iris — Introduction au ML</h2> |
| <div class="tp-meta"> |
| <span class="badge badge-primary"> 20 min</span> |
| <span class="badge badge-secondary">Classification</span> |
| <span class="badge badge-success">Débutant</span> |
| <span class="badge badge-accent">Visualisation</span> |
| </div> |
| <p class="tp-description"> |
| Le dataset classique pour la classification multi-classe. |
| Identifier l'espèce d'iris à partir des mesures des pétales et sépales. |
| </p> |
| </div> |
| <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"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <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"/> |
| </svg> |
| Ouvrir dans Colab |
| </a> |
| </div> |
| |
| <div class="tp-body"> |
| <div class="dataset-info"> |
| <div class="dataset-icon"></div> |
| <div class="dataset-content"> |
| <div class="dataset-name">Dataset : Iris Flower Classification</div> |
| <a href="https://www.kaggle.com/datasets/uciml/iris" target="_blank" class="dataset-link"> |
| 🔗 kaggle.com/datasets/uciml/iris |
| </a> |
| </div> |
| <div class="dataset-stats"> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">150</div> |
| <div class="dataset-stat-label">Lignes</div> |
| </div> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">5</div> |
| <div class="dataset-stat-label">Colonnes</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="tp-goals"> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label"> Objectif</div> |
| <p class="tp-goal-text"> |
| Classifier les iris en 3 espèces (Setosa, Versicolor, Virginica) |
| à partir de 4 features numériques. |
| </p> |
| </div> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label">✅ Résultat attendu</div> |
| <p class="tp-goal-text"> |
| Accuracy de <strong>95%+</strong>. Visualisation des frontières de décision. |
| </p> |
| </div> |
| </div> |
|
|
| <h3 class="concepts-title"> Concepts utilisés</h3> |
| <div class="concepts-grid"> |
| <div class="concept-item"> |
| <div class="concept-name">KNN</div> |
| <div class="concept-desc">K-Nearest Neighbors</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">SVM</div> |
| <div class="concept-desc">Support Vector Machine</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Decision Boundary</div> |
| <div class="concept-desc">Visualisation</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">PCA</div> |
| <div class="concept-desc">Réduction de dimension</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Pairplot</div> |
| <div class="concept-desc">Visualisation multi-variables</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Confusion Matrix</div> |
| <div class="concept-desc">Évaluation détaillée</div> |
| </div> |
| </div> |
|
|
| <h3 class="steps-title">Étapes du TP</h3> |
| <div class="steps-list"> |
| <div class="step-item"> |
| <div class="step-dot">1</div> |
| <div class="step-content"> |
| <div class="step-title">Visualisation exploratoire</div> |
| <div class="step-desc"> |
| Pairplot pour voir les relations entre features, |
| boxplots par espèce pour identifier les patterns. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">2</div> |
| <div class="step-content"> |
| <div class="step-title">Comparaison des algorithmes</div> |
| <div class="step-desc"> |
| KNN, SVM, Decision Tree, Random Forest. |
| Comparer accuracy et temps d'entraînement. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">3</div> |
| <div class="step-content"> |
| <div class="step-title">Visualisation des frontières</div> |
| <div class="step-desc"> |
| Tracer les frontières de décision en 2D après PCA. |
| Comprendre comment chaque algorithme sépare les classes. |
| </div> |
| <div class="expected-output"> |
| <div class="expected-label">Résultats attendus</div> |
| <div class="expected-text"> |
| SVM: 98% accuracy<br> |
| Setosa parfaitement séparable, Virginica/Versicolor plus proches |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tp-card scroll-animate"> |
| <div class="tp-header"> |
| <div class="tp-badge energy">TP-4</div> |
| <div class="tp-header-content"> |
| <h2 class="tp-title">Consommation Énergétique — Séries Temporelles</h2> |
| <div class="tp-meta"> |
| <span class="badge badge-primary"> 40 min</span> |
| <span class="badge badge-secondary">Time Series</span> |
| <span class="badge badge-success">LSTM</span> |
| <span class="badge badge-accent">TensorFlow</span> |
| </div> |
| <p class="tp-description"> |
| Prédire la consommation électrique d'un bâtiment à partir de données |
| temporelles. Introduction aux LSTM et aux prédictions séquentielles. |
| </p> |
| </div> |
| <a href="https://huggingface.co/spaces/MAALOOUF/Machine_Learning_Training/blob/main/notebooks/TP4_LSTM_TimeSeries.ipynb" target="_blank" class="tp-colab-btn"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <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"/> |
| </svg> |
| Ouvrir dans Colab |
| </a> |
| </div> |
| |
| <div class="tp-body"> |
| <div class="dataset-info"> |
| <div class="dataset-icon">⚡</div> |
| <div class="dataset-content"> |
| <div class="dataset-name">Dataset : ASHRAE - Great Energy Predictor III</div> |
| <a href="https://www.kaggle.com/c/ashrae-energy-prediction" target="_blank" class="dataset-link"> |
| 🔗 kaggle.com/c/ashrae-energy-prediction |
| </a> |
| </div> |
| <div class="dataset-stats"> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">20M+</div> |
| <div class="dataset-stat-label">Lignes</div> |
| </div> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">1449</div> |
| <div class="dataset-stat-label">Bâtiments</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="tp-goals"> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label"> Objectif</div> |
| <p class="tp-goal-text"> |
| Prédire la consommation énergétique horaire de bâtiments |
| à partir de données météo et historiques. |
| </p> |
| </div> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label">✅ Résultat attendu</div> |
| <p class="tp-goal-text"> |
| RMSE <strong>< 100</strong> sur la consommation normalisée. |
| Capture des patterns journaliers et saisonniers. |
| </p> |
| </div> |
| </div> |
|
|
| <h3 class="concepts-title"> Concepts utilisés</h3> |
| <div class="concepts-grid"> |
| <div class="concept-item"> |
| <div class="concept-name">Time Series</div> |
| <div class="concept-desc">Traitement séquentiel</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">LSTM</div> |
| <div class="concept-desc">Réseaux récurrents</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Seasonality</div> |
| <div class="concept-desc">Patterns saisonniers</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Windowing</div> |
| <div class="concept-desc">Fenêtres glissantes</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Early Stopping</div> |
| <div class="concept-desc">Arrêt automatique</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">TensorBoard</div> |
| <div class="concept-desc">Visualisation training</div> |
| </div> |
| </div> |
|
|
| <h3 class="steps-title"> Étapes du TP</h3> |
| <div class="steps-list"> |
| <div class="step-item"> |
| <div class="step-dot">1</div> |
| <div class="step-content"> |
| <div class="step-title">Analyse temporelle</div> |
| <div class="step-desc"> |
| Visualiser les patterns horaires, journaliers, hebdomadaires. |
| Identifier la saisonnalité et les tendances. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">2</div> |
| <div class="step-content"> |
| <div class="step-title">Feature Engineering temporel</div> |
| <div class="step-desc"> |
| Créer des features temporelles (hour, day_of_week, month), |
| lags (valeurs précédentes), rolling statistics. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">3</div> |
| <div class="step-content"> |
| <div class="step-title">Modélisation LSTM</div> |
| <div class="step-desc"> |
| Construire un modèle LSTM avec Keras. |
| Entraînement avec early stopping et learning rate scheduling. |
| </div> |
| <div class="expected-output"> |
| <div class="expected-label">Résultats attendus</div> |
| <div class="expected-text"> |
| LSTM: RMSE = 85 sur test set<br> |
| Capture des pics de consommation matin/soir |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tp-card scroll-animate"> |
| <div class="tp-header"> |
| <div class="tp-badge mnist">TP-5</div> |
| <div class="tp-header-content"> |
| <h2 class="tp-title">Reconnaissance de Chiffres — Deep Learning</h2> |
| <div class="tp-meta"> |
| <span class="badge badge-primary"> 35 min</span> |
| <span class="badge badge-secondary">CNN</span> |
| <span class="badge badge-success">Computer Vision</span> |
| <span class="badge badge-accent">Keras</span> |
| </div> |
| <p class="tp-description"> |
| Classification d'images de chiffres manuscrits (0-9) avec des réseaux de neurones convolutifs (CNN). |
| Introduction au Computer Vision. |
| </p> |
| </div> |
| <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <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"/> |
| </svg> |
| Ouvrir dans Colab |
| </a> |
| </div> |
| |
| <div class="tp-body"> |
| <div class="dataset-info"> |
| <div class="dataset-icon">🔢</div> |
| <div class="dataset-content"> |
| <div class="dataset-name">Dataset : MNIST Handwritten Digits</div> |
| <a href="https://www.kaggle.com/datasets/hojjatk/mnist-dataset" target="_blank" class="dataset-link"> |
| 🔗 kaggle.com/datasets/hojjatk/mnist-dataset |
| </a> |
| </div> |
| <div class="dataset-stats"> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">70K</div> |
| <div class="dataset-stat-label">Images</div> |
| </div> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">28×28</div> |
| <div class="dataset-stat-label">Pixels</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="tp-goals"> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label"> Objectif</div> |
| <p class="tp-goal-text"> |
| Classifier les images de chiffres manuscrits (0-9) |
| avec un CNN et atteindre >99% d'accuracy. |
| </p> |
| </div> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label">✅ Résultat attendu</div> |
| <p class="tp-goal-text"> |
| Accuracy de <strong>99%+</strong> sur le test set. |
| Visualisation des filtres appris par le CNN. |
| </p> |
| </div> |
| </div> |
|
|
| <h3 class="concepts-title"> Concepts utilisés</h3> |
| <div class="concepts-grid"> |
| <div class="concept-item"> |
| <div class="concept-name">CNN</div> |
| <div class="concept-desc">Convolutional Neural Network</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Conv2D</div> |
| <div class="concept-desc">Couches de convolution</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">MaxPooling</div> |
| <div class="concept-desc">Réduction spatiale</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Dropout</div> |
| <div class="concept-desc">Régularisation</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">BatchNorm</div> |
| <div class="concept-desc">Normalisation</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Data Augmentation</div> |
| <div class="concept-desc">Augmentation données</div> |
| </div> |
| </div> |
|
|
| <h3 class="steps-title"> Étapes du TP</h3> |
| <div class="steps-list"> |
| <div class="step-item"> |
| <div class="step-dot">1</div> |
| <div class="step-content"> |
| <div class="step-title">Exploration des images</div> |
| <div class="step-desc"> |
| Visualiser des exemples de chaque chiffre, |
| analyser la distribution des classes. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">2</div> |
| <div class="step-content"> |
| <div class="step-title">Construction du CNN</div> |
| <div class="step-desc"> |
| Architecture: Conv2D → MaxPool → Conv2D → MaxPool → |
| Flatten → Dense → Dropout → Output (10 classes). |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">3</div> |
| <div class="step-content"> |
| <div class="step-title">Entraînement et évaluation</div> |
| <div class="step-desc"> |
| Entraînement avec data augmentation, |
| visualisation des prédictions erronées. |
| </div> |
| <div class="expected-output"> |
| <div class="expected-label">Résultats attendus</div> |
| <div class="expected-text"> |
| CNN: 99.2% accuracy<br> |
| Erreurs principalement sur 4/9 et 3/8 similaires |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tp-card scroll-animate"> |
| <div class="tp-header"> |
| <div class="tp-badge sentiment">TP-6</div> |
| <div class="tp-header-content"> |
| <h2 class="tp-title">Analyse de Sentiment — NLP</h2> |
| <div class="tp-meta"> |
| <span class="badge badge-primary"> 40 min</span> |
| <span class="badge badge-secondary">NLP</span> |
| <span class="badge badge-success">Embeddings</span> |
| <span class="badge badge-accent">Transformers</span> |
| </div> |
| <p class="tp-description"> |
| Classifier les avis IMDB comme positifs ou négatifs. |
| Introduction au NLP et aux word embeddings avec les Transformers. |
| </p> |
| </div> |
| <a href="https://colab.research.google.com/drive/1TqBXWkU3XbX7QzvVv9ZqZqZqZqZqZqZq" target="_blank" class="tp-colab-btn"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <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"/> |
| </svg> |
| Ouvrir dans Colab |
| </a> |
| </div> |
| |
| <div class="tp-body"> |
| <div class="dataset-info"> |
| <div class="dataset-icon">🎬</div> |
| <div class="dataset-content"> |
| <div class="dataset-name">Dataset : IMDB Movie Reviews</div> |
| <a href="https://www.kaggle.com/datasets/lakshmi25npathi/imdb-dataset-of-50k-movie-reviews" target="_blank" class="dataset-link"> |
| 🔗 kaggle.com/datasets/lakshmi25npathi/imdb-dataset |
| </a> |
| </div> |
| <div class="dataset-stats"> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">50K</div> |
| <div class="dataset-stat-label">Avis</div> |
| </div> |
| <div class="dataset-stat"> |
| <div class="dataset-stat-value">2</div> |
| <div class="dataset-stat-label">Classes</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="tp-goals"> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label"> Objectif</div> |
| <p class="tp-goal-text"> |
| Classifier les avis de films comme positifs ou négatifs |
| en utilisant des embeddings et un LSTM ou BERT. |
| </p> |
| </div> |
| <div class="tp-goal-box"> |
| <div class="tp-goal-label">✅ Résultat attendu</div> |
| <p class="tp-goal-text"> |
| Accuracy de <strong>90%+</strong> avec LSTM, |
| <strong>95%+</strong> avec BERT fine-tuning. |
| </p> |
| </div> |
| </div> |
|
|
| <h3 class="concepts-title"> Concepts utilisés</h3> |
| <div class="concepts-grid"> |
| <div class="concept-item"> |
| <div class="concept-name">Tokenization</div> |
| <div class="concept-desc">Découpage en tokens</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Word Embeddings</div> |
| <div class="concept-desc">Word2Vec, GloVe</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">LSTM pour NLP</div> |
| <div class="concept-desc">Séquences de texte</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Attention</div> |
| <div class="concept-desc">Mécanisme d'attention</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">BERT</div> |
| <div class="concept-desc">Transformers pré-entraînés</div> |
| </div> |
| <div class="concept-item"> |
| <div class="concept-name">Hugging Face</div> |
| <div class="concept-desc">Bibliothèque transformers</div> |
| </div> |
| </div> |
|
|
| <h3 class="steps-title"> Étapes du TP</h3> |
| <div class="steps-list"> |
| <div class="step-item"> |
| <div class="step-dot">1</div> |
| <div class="step-content"> |
| <div class="step-title">Prétraitement du texte</div> |
| <div class="step-desc"> |
| Nettoyage (HTML, ponctuation), tokenization, |
| padding/truncation pour avoir des séquences de même longueur. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">2</div> |
| <div class="step-content"> |
| <div class="step-title">Embeddings et LSTM</div> |
| <div class="step-desc"> |
| Couche d'embedding apprenable + LSTM bidirectionnel |
| + couche dense de sortie. |
| </div> |
| </div> |
| </div> |
| <div class="step-item"> |
| <div class="step-dot">3</div> |
| <div class="step-content"> |
| <div class="step-title">Fine-tuning BERT (bonus)</div> |
| <div class="step-desc"> |
| Utiliser un modèle BERT pré-entraîné via Hugging Face, |
| fine-tuner sur les avis IMDB. |
| </div> |
| <div class="expected-output"> |
| <div class="expected-label">Résultats attendus</div> |
| <div class="expected-text"> |
| LSTM: 88% accuracy<br> |
| BERT fine-tuned: 94% accuracy |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tp-cta scroll-animate"> |
| <div class="tp-cta-icon" style="width: 60px; height: 60px; background: linear-gradient(135deg, var(--success), #059669); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: white; margin: 0 auto var(--space-md);">OK</div> |
| <h2 class="tp-cta-title">TPs termines ?</h2> |
| <p class="tp-cta-text"> |
| Felicitations ! Vous avez maintenant une solide experience pratique |
| en Machine Learning. Continuez avec le cours theorique ou posez vos questions. |
| </p> |
| <div class="cta-buttons" style="display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap;"> |
| <a href="cours.html" class="btn btn-primary btn-lg">Retour aux cours</a> |
| <a href="feedback.html" class="btn btn-outline btn-lg">Poser une question</a> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| |
| <footer class="footer" style="background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: var(--space-xl); text-align: center;"> |
| <div style="display: flex; justify-content: center; gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-md);"> |
| <a href="mailto:imadmaalouf02@gmail.com" style="display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg> |
| imadmaalouf02@gmail.com |
| </a> |
| <a href="https://github.com/imadmaalouf02" target="_blank" style="display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> |
| GitHub |
| </a> |
| <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" style="display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg> |
| Hugging Face Space |
| </a> |
| </div> |
| </footer> |
|
|
| |
| <footer class="footer"> |
| <p class="footer-text"> |
| ML Academy — Travaux Pratiques — |
| <span class="footer-brand">GE-MCI 4A</span> — 2025/2026 |
| </p> |
| <p class="footer-text" style="margin-top: var(--space-sm);"> |
| Datasets : Kaggle · Execution : Google Colab · Notebooks : Python |
| </p> |
| <p class="footer-text" style="margin-top: var(--space-sm); font-size: 0.75rem; color: var(--text-muted);"> |
| Formateur : Imad Maalouf |
| </p> |
| </footer> |
| </div> |
|
|
| |
| <script src="js/shared.js"></script> |
| <script> |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('visible'); |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelectorAll('.scroll-animate').forEach(el => { |
| observer.observe(el); |
| }); |
| |
| |
| document.querySelectorAll('.tp-card').forEach((card, index) => { |
| card.style.animationDelay = `${index * 0.15}s`; |
| }); |
| </script> |
| </body> |
| </html> |
|
|
