| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Questions & Feedback — ML Academy</title> |
| <link rel="stylesheet" href="css/shared.css"> |
| <style> |
| |
| .feedback-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; |
| } |
| |
| .feedback-hero-label { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.75rem; |
| color: var(--secondary); |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| margin-bottom: var(--space-md); |
| } |
| |
| .feedback-hero-title { |
| font-size: clamp(2rem, 5vw, 3rem); |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: var(--space-md); |
| } |
| |
| .feedback-hero-subtitle { |
| font-size: 1.1rem; |
| color: var(--text-secondary); |
| max-width: 600px; |
| margin: 0 auto; |
| } |
| |
| |
| .feedback-container { |
| max-width: 800px; |
| margin: 0 auto; |
| padding: var(--space-2xl) var(--space-xl); |
| } |
| |
| |
| .form-progress { |
| display: flex; |
| gap: var(--space-sm); |
| margin-bottom: var(--space-xl); |
| } |
| |
| .progress-step { |
| flex: 1; |
| height: 4px; |
| background: var(--bg-tertiary); |
| border-radius: 2px; |
| transition: background var(--transition-base); |
| } |
| |
| .progress-step.active { |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| } |
| |
| |
| .form-card { |
| background: var(--bg-card); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| margin-bottom: var(--space-lg); |
| transition: all var(--transition-base); |
| } |
| |
| .form-card:hover { |
| border-color: var(--border-light); |
| } |
| |
| .form-card-header { |
| display: flex; |
| align-items: center; |
| gap: var(--space-md); |
| padding: var(--space-lg) var(--space-xl); |
| background: var(--bg-tertiary); |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .form-card-icon { |
| width: 36px; |
| height: 36px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| border-radius: var(--radius-md); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1rem; |
| font-weight: 700; |
| color: white; |
| } |
| |
| .form-card-title { |
| font-size: 1.1rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
| |
| .form-card-body { |
| padding: var(--space-xl); |
| } |
| |
| |
| .form-row { |
| margin-bottom: var(--space-lg); |
| } |
| |
| .form-row:last-child { |
| margin-bottom: 0; |
| } |
| |
| .form-label { |
| display: block; |
| font-size: 0.85rem; |
| font-weight: 500; |
| color: var(--text-primary); |
| margin-bottom: var(--space-sm); |
| } |
| |
| .form-label .required { |
| color: var(--danger); |
| margin-left: var(--space-xs); |
| } |
| |
| .form-label .hint { |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| font-weight: 400; |
| margin-left: var(--space-sm); |
| } |
| |
| |
| .star-rating { |
| display: flex; |
| gap: var(--space-sm); |
| } |
| |
| .star { |
| font-size: 2rem; |
| cursor: pointer; |
| transition: all var(--transition-fast); |
| filter: grayscale(1); |
| opacity: 0.4; |
| } |
| |
| .star:hover, |
| .star.active { |
| filter: grayscale(0); |
| opacity: 1; |
| transform: scale(1.2); |
| } |
| |
| .star-rating-text { |
| font-size: 0.85rem; |
| color: var(--text-muted); |
| margin-left: var(--space-md); |
| align-self: center; |
| } |
| |
| |
| .difficulty-buttons { |
| display: flex; |
| gap: var(--space-sm); |
| flex-wrap: wrap; |
| } |
| |
| .difficulty-btn { |
| padding: var(--space-sm) var(--space-md); |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| cursor: pointer; |
| transition: all var(--transition-base); |
| } |
| |
| .difficulty-btn:hover { |
| border-color: var(--primary); |
| color: var(--text-primary); |
| } |
| |
| .difficulty-btn.selected { |
| background: rgba(99, 102, 241, 0.2); |
| border-color: var(--primary); |
| color: var(--primary-light); |
| } |
| |
| |
| .radio-group, |
| .checkbox-group { |
| display: flex; |
| flex-direction: column; |
| gap: var(--space-sm); |
| } |
| |
| .radio-option, |
| .checkbox-option { |
| display: flex; |
| align-items: flex-start; |
| gap: var(--space-md); |
| padding: var(--space-md); |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| cursor: pointer; |
| transition: all var(--transition-base); |
| } |
| |
| .radio-option:hover, |
| .checkbox-option:hover { |
| border-color: var(--primary); |
| background: var(--bg-hover); |
| } |
| |
| .radio-option input, |
| .checkbox-option input { |
| margin-top: 2px; |
| accent-color: var(--primary); |
| width: 18px; |
| } |
| |
| .radio-label, |
| .checkbox-label { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| } |
| |
| |
| .submit-btn { |
| width: 100%; |
| padding: var(--space-md); |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); |
| color: white; |
| border: none; |
| border-radius: var(--radius-md); |
| font-family: 'Inter', sans-serif; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all var(--transition-base); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: var(--space-sm); |
| } |
| |
| .submit-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--shadow-glow); |
| } |
| |
| .submit-btn:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| transform: none; |
| } |
| |
| |
| .success-message { |
| display: none; |
| background: rgba(16, 185, 129, 0.1); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| border-radius: var(--radius-lg); |
| padding: var(--space-3xl); |
| text-align: center; |
| animation: scaleIn 0.5s ease; |
| } |
| |
| .success-message.show { |
| display: block; |
| } |
| |
| .success-icon { |
| width: 60px; |
| height: 60px; |
| background: linear-gradient(135deg, var(--success), #059669); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: white; |
| margin: 0 auto var(--space-md); |
| animation: bounce 1s ease infinite; |
| } |
| |
| .success-title { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: var(--success); |
| margin-bottom: var(--space-sm); |
| } |
| |
| .success-text { |
| font-size: 1rem; |
| color: var(--text-secondary); |
| margin-bottom: var(--space-xl); |
| } |
| |
| |
| .export-section { |
| background: var(--bg-card); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-lg); |
| padding: var(--space-xl); |
| margin-top: var(--space-xl); |
| } |
| |
| .export-title { |
| font-size: 1rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: var(--space-md); |
| } |
| |
| .export-buttons { |
| display: flex; |
| gap: var(--space-md); |
| flex-wrap: wrap; |
| } |
| |
| .export-btn { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| padding: var(--space-sm) var(--space-md); |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| font-size: 0.85rem; |
| cursor: pointer; |
| transition: all var(--transition-base); |
| text-decoration: none; |
| } |
| |
| .export-btn:hover { |
| border-color: var(--primary); |
| color: var(--text-primary); |
| } |
| |
| |
| .faq-section { |
| margin-top: var(--space-3xl); |
| } |
| |
| .faq-header { |
| text-align: center; |
| margin-bottom: var(--space-xl); |
| } |
| |
| .faq-title { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: var(--space-sm); |
| } |
| |
| .faq-subtitle { |
| font-size: 0.95rem; |
| color: var(--text-secondary); |
| } |
| |
| .faq-item { |
| background: var(--bg-card); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| margin-bottom: var(--space-md); |
| overflow: hidden; |
| transition: all var(--transition-base); |
| } |
| |
| .faq-item:hover { |
| border-color: var(--border-light); |
| } |
| |
| .faq-question { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: var(--space-lg) var(--space-xl); |
| cursor: pointer; |
| background: var(--bg-tertiary); |
| transition: background var(--transition-base); |
| } |
| |
| .faq-question:hover { |
| background: var(--bg-hover); |
| } |
| |
| .faq-question-text { |
| font-size: 0.95rem; |
| font-weight: 500; |
| color: var(--text-primary); |
| } |
| |
| .faq-arrow { |
| color: var(--primary); |
| transition: transform var(--transition-base); |
| } |
| |
| .faq-item.open .faq-arrow { |
| transform: rotate(180deg); |
| } |
| |
| .faq-answer { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height var(--transition-slow); |
| } |
| |
| .faq-item.open .faq-answer { |
| max-height: 500px; |
| } |
| |
| .faq-answer-content { |
| padding: var(--space-lg) var(--space-xl); |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| line-height: 1.7; |
| border-top: 1px solid var(--border-color); |
| } |
| |
| .faq-answer-content code { |
| background: rgba(99, 102, 241, 0.1); |
| padding: 2px 6px; |
| border-radius: 4px; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.8rem; |
| color: var(--primary-light); |
| } |
| |
| |
| .contact-info { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: var(--space-lg); |
| margin-top: var(--space-2xl); |
| padding-top: var(--space-2xl); |
| border-top: 1px solid var(--border-color); |
| } |
| |
| .contact-item { |
| text-align: center; |
| padding: var(--space-lg); |
| background: var(--bg-card); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| transition: all var(--transition-base); |
| } |
| |
| .contact-item:hover { |
| border-color: var(--primary); |
| transform: translateY(-3px); |
| } |
| |
| .contact-icon { |
| width: 40px; |
| height: 40px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| border-radius: var(--radius-md); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1rem; |
| font-weight: 700; |
| color: white; |
| margin: 0 auto var(--space-sm); |
| } |
| |
| .contact-label { |
| font-size: 0.85rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: var(--space-xs); |
| } |
| |
| .contact-value { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| } |
| |
| .contact-link { |
| color: var(--primary-light); |
| text-decoration: none; |
| } |
| |
| .contact-link:hover { |
| text-decoration: underline; |
| } |
| |
| |
| .author-footer { |
| background: var(--bg-secondary); |
| border-top: 1px solid var(--border-color); |
| padding: var(--space-xl); |
| text-align: center; |
| } |
| |
| .author-info { |
| display: flex; |
| justify-content: center; |
| gap: var(--space-xl); |
| flex-wrap: wrap; |
| margin-bottom: var(--space-md); |
| } |
| |
| .author-link { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| color: var(--text-secondary); |
| text-decoration: none; |
| font-size: 0.9rem; |
| transition: color var(--transition-base); |
| } |
| |
| .author-link:hover { |
| color: var(--primary-light); |
| } |
| |
| .author-link svg { |
| width: 18px; |
| height: 18px; |
| fill: currentColor; |
| } |
| </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">ML</div> |
| <span>ML Academy</span> |
| </a> |
| <div class="navbar-nav"> |
| <a href="index.html" class="nav-link"> |
| <span class="nav-icon">[H]</span> |
| <span>Accueil</span> |
| </a> |
| <a href="cours.html" class="nav-link"> |
| <span class="nav-icon">[C]</span> |
| <span>Cours</span> |
| </a> |
| <a href="tp.html" class="nav-link"> |
| <span class="nav-icon">[T]</span> |
| <span>TPs</span> |
| </a> |
| <a href="feedback.html" class="nav-link active"> |
| <span class="nav-icon">[F]</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="feedback-hero"> |
| <div class="feedback-hero-label">Retours & Questions</div> |
| <h1 class="feedback-hero-title">Questions & Feedback</h1> |
| <p class="feedback-hero-subtitle"> |
| Un point pas clair ? Une suggestion d'amelioration ? |
| Nous sommes la pour vous aider et ameliorer la formation. |
| </p> |
| </section> |
|
|
| |
| <div class="feedback-container"> |
| |
| |
| <div class="success-message" id="successMessage"> |
| <div class="success-icon">OK</div> |
| <h2 class="success-title">Merci pour votre retour !</h2> |
| <p class="success-text"> |
| Vos reponses ont ete enregistrees. Nous les analyserons et vous repondrons |
| dans les plus brefs delais. |
| </p> |
| <a href="index.html" class="btn btn-outline">Retour a l'accueil</a> |
| </div> |
|
|
| |
| <form id="feedbackForm"> |
| |
| <div class="form-progress"> |
| <div class="progress-step active"></div> |
| <div class="progress-step"></div> |
| <div class="progress-step"></div> |
| </div> |
|
|
| |
| <div class="form-card scroll-animate"> |
| <div class="form-card-header"> |
| <div class="form-card-icon">I</div> |
| <h2 class="form-card-title">Identification <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 400;">(optionnel)</span></h2> |
| </div> |
| <div class="form-card-body"> |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);"> |
| <div class="form-row"> |
| <label class="form-label">Prenom / Nom</label> |
| <input type="text" class="form-input" placeholder="Ex: Jean Dupont" id="name"> |
| </div> |
| <div class="form-row"> |
| <label class="form-label">Email</label> |
| <input type="email" class="form-input" placeholder="jean@example.com" id="email"> |
| </div> |
| </div> |
| <div class="form-row" style="margin-bottom: 0;"> |
| <label class="form-label">Sujet de projet</label> |
| <select class="form-select" id="project"> |
| <option value="">— Selectionner —</option> |
| <option value="classification">Classification</option> |
| <option value="regression">Regression</option> |
| <option value="nlp">NLP / Texte</option> |
| <option value="computer-vision">Computer Vision</option> |
| <option value="time-series">Series Temporelles</option> |
| <option value="other">Autre</option> |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="form-card scroll-animate"> |
| <div class="form-card-header"> |
| <div class="form-card-icon">E</div> |
| <h2 class="form-card-title">Evaluation de la formation</h2> |
| </div> |
| <div class="form-card-body"> |
| <div class="form-row"> |
| <label class="form-label">Note globale <span class="required">*</span></label> |
| <div style="display: flex; align-items: center;"> |
| <div class="star-rating" id="starRating"> |
| <span class="star" data-value="1">*</span> |
| <span class="star" data-value="2">*</span> |
| <span class="star" data-value="3">*</span> |
| <span class="star" data-value="4">*</span> |
| <span class="star" data-value="5">*</span> |
| </div> |
| <span class="star-rating-text" id="ratingText">Cliquez pour noter</span> |
| </div> |
| <input type="hidden" id="ratingValue" value="0"> |
| </div> |
|
|
| <div class="form-row"> |
| <label class="form-label">Niveau de difficulte <span class="required">*</span></label> |
| <div class="difficulty-buttons" id="difficultyButtons"> |
| <button type="button" class="difficulty-btn" data-value="tres-facile">Tres facile</button> |
| <button type="button" class="difficulty-btn" data-value="facile">Facile</button> |
| <button type="button" class="difficulty-btn" data-value="adapte">Adapte</button> |
| <button type="button" class="difficulty-btn" data-value="difficile">Difficile</button> |
| <button type="button" class="difficulty-btn" data-value="tres-difficile">Trop difficile</button> |
| </div> |
| <input type="hidden" id="difficultyValue" value=""> |
| </div> |
|
|
| <div class="form-row" style="margin-bottom: 0;"> |
| <label class="form-label">Rythme de la formation</label> |
| <div class="radio-group"> |
| <label class="radio-option"> |
| <input type="radio" name="rythme" value="trop-lent"> |
| <span class="radio-label">Trop lent — on aurait pu aller plus vite</span> |
| </label> |
| <label class="radio-option"> |
| <input type="radio" name="rythme" value="bien" checked> |
| <span class="radio-label">Bien rythme — equilibre parfait</span> |
| </label> |
| <label class="radio-option"> |
| <input type="radio" name="rythme" value="trop-rapide"> |
| <span class="radio-label">Trop rapide — difficile a suivre</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="form-card scroll-animate"> |
| <div class="form-card-header"> |
| <div class="form-card-icon">C</div> |
| <h2 class="form-card-title">Contenu de la formation</h2> |
| </div> |
| <div class="form-card-body"> |
| <div class="form-row"> |
| <label class="form-label">Parties les plus utiles <span class="hint">(plusieurs choix possibles)</span></label> |
| <div class="checkbox-group"> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="utile" value="preprocessing"> |
| <span class="checkbox-label">Pretraitement des donnees</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="utile" value="regression"> |
| <span class="checkbox-label">Regression Lineaire & Logistique</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="utile" value="randomforest"> |
| <span class="checkbox-label">Random Forest & XGBoost</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="utile" value="neuralnets"> |
| <span class="checkbox-label">Reseaux de Neurones (Keras)</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="utile" value="lstm"> |
| <span class="checkbox-label">LSTM & Series Temporelles</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="utile" value="cnn"> |
| <span class="checkbox-label">CNN & Computer Vision</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="utile" value="nlp"> |
| <span class="checkbox-label">NLP & Transformers</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="utile" value="tps"> |
| <span class="checkbox-label">Travaux Pratiques (TPs)</span> |
| </label> |
| </div> |
| </div> |
|
|
| <div class="form-row" style="margin-bottom: 0;"> |
| <label class="form-label">Points difficiles a comprendre</label> |
| <div class="checkbox-group"> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="difficile" value="overfitting"> |
| <span class="checkbox-label">Overfitting / Underfitting</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="difficile" value="normalisation"> |
| <span class="checkbox-label">Normalisation et Data Leakage</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="difficile" value="hyperparameters"> |
| <span class="checkbox-label">Choix des hyperparametres</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="difficile" value="lstm-gates"> |
| <span class="checkbox-label">Les portes du LSTM</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="difficile" value="backprop"> |
| <span class="checkbox-label">Backpropagation</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="difficile" value="metrics"> |
| <span class="checkbox-label">Choix des metriques d'evaluation</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="form-card scroll-animate"> |
| <div class="form-card-header"> |
| <div class="form-card-icon">Q</div> |
| <h2 class="form-card-title">Vos questions</h2> |
| </div> |
| <div class="form-card-body"> |
| <div class="form-row"> |
| <label class="form-label">Question principale <span class="required">*</span></label> |
| <textarea class="form-textarea" placeholder="Decrivez votre question ou le point qui n'est pas clair..." id="mainQuestion" required></textarea> |
| </div> |
|
|
| <div class="form-row"> |
| <label class="form-label">Question sur le code / les TPs <span class="hint">(optionnel)</span></label> |
| <textarea class="form-textarea" placeholder="Si vous avez une question specifique sur un notebook ou du code..." id="codeQuestion"></textarea> |
| </div> |
|
|
| <div class="form-row" style="margin-bottom: 0;"> |
| <label class="form-label">Lien avec votre projet <span class="hint">(optionnel)</span></label> |
| <textarea class="form-textarea" placeholder="Comment cette formation peut-elle vous aider dans votre projet personnel ?" id="projectLink"></textarea> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="form-card scroll-animate"> |
| <div class="form-card-header"> |
| <div class="form-card-icon">S</div> |
| <h2 class="form-card-title">Suggestions d'amelioration</h2> |
| </div> |
| <div class="form-card-body"> |
| <div class="form-row"> |
| <label class="form-label">Ce que vous auriez aime voir de plus</label> |
| <div class="checkbox-group"> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="suggestion" value="plus-tp"> |
| <span class="checkbox-label">Plus de temps sur les TPs</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="suggestion" value="plus-theorie"> |
| <span class="checkbox-label">Plus de theorie et d'equations</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="suggestion" value="plus-datasets"> |
| <span class="checkbox-label">Plus de datasets differents</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="suggestion" value="deployment"> |
| <span class="checkbox-label">Deploiement de modeles (API, Streamlit)</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="suggestion" value="mLOps"> |
| <span class="checkbox-label">MLOps et gestion de modeles</span> |
| </label> |
| <label class="checkbox-option"> |
| <input type="checkbox" name="suggestion" value="viz"> |
| <span class="checkbox-label">Plus de visualisations interactives</span> |
| </label> |
| </div> |
| </div> |
|
|
| <div class="form-row" style="margin-bottom: 0;"> |
| <label class="form-label">Commentaire libre</label> |
| <textarea class="form-textarea" placeholder="Toute suggestion ou remarque est la bienvenue..." id="freeComment"></textarea> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <button type="submit" class="submit-btn" id="submitBtn"> |
| Envoyer mon feedback |
| </button> |
| <p style="text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-md);"> |
| Vos reponses nous aident a ameliorer la formation pour les promotions futures. |
| </p> |
| </form> |
|
|
| |
| <div class="export-section scroll-animate" id="exportSection" style="display: none;"> |
| <h3 class="export-title">Exporter les donnees</h3> |
| <p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--space-md);"> |
| Telechargez les feedbacks collectes pour analyse. |
| </p> |
| <div class="export-buttons"> |
| <button class="export-btn" onclick="feedbackStorage.downloadFeedbacks()"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/> |
| </svg> |
| JSON |
| </button> |
| <button class="export-btn" onclick="feedbackStorage.exportToCSV()"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/> |
| </svg> |
| CSV (Excel) |
| </button> |
| <button class="export-btn" onclick="showFeedbackStats()"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> |
| <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/> |
| </svg> |
| Statistiques |
| </button> |
| </div> |
| </div> |
|
|
| |
| <section class="faq-section"> |
| <div class="faq-header scroll-animate"> |
| <h2 class="faq-title">Questions frequentes</h2> |
| <p class="faq-subtitle">Consultez d'abord ces reponses avant de soumettre votre question.</p> |
| </div> |
|
|
| <div class="faq-item scroll-animate"> |
| <div class="faq-question" onclick="toggleFaq(this)"> |
| <span class="faq-question-text">Pourquoi normaliser APRES le split et pas avant ?</span> |
| <span class="faq-arrow">v</span> |
| </div> |
| <div class="faq-answer"> |
| <div class="faq-answer-content"> |
| Si vous normalisez avant le split, vous calculez le min/max sur l'ensemble des donnees (train + test). |
| Votre modele "voit" donc indirectement les donnees de test pendant l'entrainement — c'est le |
| <strong>data leakage</strong>. La regle : <strong>fit sur train seulement, transform sur train ET test</strong>. |
| </div> |
| </div> |
| </div> |
|
|
| <div class="faq-item scroll-animate"> |
| <div class="faq-question" onclick="toggleFaq(this)"> |
| <span class="faq-question-text">Quelle est la difference entre MAE et RMSE ?</span> |
| <span class="faq-arrow">v</span> |
| </div> |
| <div class="faq-answer"> |
| <div class="faq-answer-content"> |
| <strong>MAE</strong> (Mean Absolute Error) = moyenne des erreurs absolues. |
| <strong>RMSE</strong> (Root Mean Squared Error) = racine de la moyenne des erreurs au carre. |
| La difference cle : RMSE <strong>penalise davantage les grandes erreurs</strong> car on eleve au carre. |
| En ingenierie, RMSE >= MAE toujours. |
| </div> |
| </div> |
| </div> |
|
|
| <div class="faq-item scroll-animate"> |
| <div class="faq-question" onclick="toggleFaq(this)"> |
| <span class="faq-question-text">Comment savoir si mon modele fait de l'overfitting ?</span> |
| <span class="faq-arrow">v</span> |
| </div> |
| <div class="faq-answer"> |
| <div class="faq-answer-content"> |
| Comparez les metriques sur <strong>train</strong> ET <strong>test</strong>. |
| <strong>Overfitting</strong> = R2 train tres eleve (0.99) mais R2 test beaucoup plus bas (0.65). |
| <strong>Bonne generalisation</strong> = R2 train ≈ R2 test (ex: 0.96 vs 0.94). |
| Solution : Dropout, Early Stopping, regularisation L2. |
| </div> |
| </div> |
| </div> |
|
|
| <div class="faq-item scroll-animate"> |
| <div class="faq-question" onclick="toggleFaq(this)"> |
| <span class="faq-question-text">Quand utiliser Random Forest vs Neural Networks ?</span> |
| <span class="faq-arrow">v</span> |
| </div> |
| <div class="faq-answer"> |
| <div class="faq-answer-content"> |
| <strong>Random Forest</strong> : donnees tabulaires, besoin d'interpretabilite, |
| peu de temps de tuning. <strong>Neural Networks</strong> : donnees complexes (images, texte), |
| beaucoup de donnees disponibles, ressources computationnelles importantes. |
| </div> |
| </div> |
| </div> |
|
|
| <div class="faq-item scroll-animate"> |
| <div class="faq-question" onclick="toggleFaq(this)"> |
| <span class="faq-question-text">Comment adapter le code a mes propres donnees ?</span> |
| <span class="faq-arrow">v</span> |
| </div> |
| <div class="faq-answer"> |
| <div class="faq-answer-content"> |
| Remplacez <code>df = pd.read_csv("vos_donnees.csv")</code>. Verifiez avec |
| <code>df.head()</code> et <code>df.describe()</code>. Adaptez la liste des features |
| et la variable cible. Ajoutez <code>df.dropna()</code> pour supprimer les NaN. |
| Le reste du pipeline reste identique ! |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="contact-info"> |
| <div class="contact-item scroll-animate"> |
| <div class="contact-icon">@</div> |
| <div class="contact-label">Email</div> |
| <div class="contact-value"> |
| <a href="mailto:imadmaalouf02@gmail.com" class="contact-link">imadmaalouf02@gmail.com</a> |
| </div> |
| </div> |
| <div class="contact-item scroll-animate"> |
| <div class="contact-icon">GH</div> |
| <div class="contact-label">GitHub</div> |
| <div class="contact-value"> |
| <a href="https://github.com/imadmaalouf02" target="_blank" class="contact-link">github.com/imadmaalouf02</a> |
| </div> |
| </div> |
| <div class="contact-item scroll-animate"> |
| <div class="contact-icon">HF</div> |
| <div class="contact-label">Hugging Face</div> |
| <div class="contact-value"> |
| <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" class="contact-link">ML Training Space</a> |
| </div> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| |
| <footer class="author-footer"> |
| <div class="author-info"> |
| <a href="mailto:imadmaalouf02@gmail.com" class="author-link"> |
| <svg viewBox="0 0 24 24"><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" class="author-link"> |
| <svg viewBox="0 0 24 24"><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" class="author-link"> |
| <svg viewBox="0 0 24 24"><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 — Questions & Feedback — |
| <span class="footer-brand">GE-MCI 4A</span> — 2025/2026 |
| </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 src="js/feedback-storage.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); |
| }); |
| |
| |
| const stars = document.querySelectorAll('.star'); |
| const ratingValue = document.getElementById('ratingValue'); |
| const ratingText = document.getElementById('ratingText'); |
| const ratingLabels = ['', 'Insuffisant', 'Passable', 'Bien', 'Tres bien', 'Excellent !']; |
| |
| stars.forEach(star => { |
| star.addEventListener('click', () => { |
| const value = parseInt(star.dataset.value); |
| ratingValue.value = value; |
| ratingText.textContent = ratingLabels[value]; |
| |
| stars.forEach((s, i) => { |
| s.classList.toggle('active', i < value); |
| }); |
| |
| |
| document.querySelectorAll('.progress-step')[1].classList.add('active'); |
| }); |
| }); |
| |
| |
| const diffButtons = document.querySelectorAll('.difficulty-btn'); |
| const difficultyValue = document.getElementById('difficultyValue'); |
| |
| diffButtons.forEach(btn => { |
| btn.addEventListener('click', () => { |
| diffButtons.forEach(b => b.classList.remove('selected')); |
| btn.classList.add('selected'); |
| difficultyValue.value = btn.dataset.value; |
| }); |
| }); |
| |
| |
| function toggleFaq(element) { |
| const faqItem = element.parentElement; |
| faqItem.classList.toggle('open'); |
| } |
| |
| |
| const form = document.getElementById('feedbackForm'); |
| const successMessage = document.getElementById('successMessage'); |
| const submitBtn = document.getElementById('submitBtn'); |
| const exportSection = document.getElementById('exportSection'); |
| |
| form.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| |
| const rating = ratingValue.value; |
| const difficulty = difficultyValue.value; |
| const mainQuestion = document.getElementById('mainQuestion').value.trim(); |
| |
| if (rating === '0') { |
| alert('Veuillez donner une note a la formation.'); |
| return; |
| } |
| |
| if (!difficulty) { |
| alert('Veuillez indiquer le niveau de difficulte percu.'); |
| return; |
| } |
| |
| if (!mainQuestion) { |
| alert('Veuillez poser au moins une question principale.'); |
| return; |
| } |
| |
| |
| const formData = { |
| name: document.getElementById('name').value, |
| email: document.getElementById('email').value, |
| project: document.getElementById('project').value, |
| rating: rating, |
| difficulty: difficulty, |
| rythme: document.querySelector('input[name="rythme"]:checked')?.value, |
| utiles: [...document.querySelectorAll('input[name="utile"]:checked')].map(cb => cb.value), |
| difficiles: [...document.querySelectorAll('input[name="difficile"]:checked')].map(cb => cb.value), |
| mainQuestion: mainQuestion, |
| codeQuestion: document.getElementById('codeQuestion').value, |
| projectLink: document.getElementById('projectLink').value, |
| suggestions: [...document.querySelectorAll('input[name="suggestion"]:checked')].map(cb => cb.value), |
| freeComment: document.getElementById('freeComment').value, |
| timestamp: new Date().toISOString() |
| }; |
| |
| |
| submitFeedback(formData); |
| |
| |
| form.style.display = 'none'; |
| successMessage.classList.add('show'); |
| exportSection.style.display = 'block'; |
| document.querySelectorAll('.progress-step')[2].classList.add('active'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| |
| window.addEventListener('scroll', () => { |
| const mainQuestion = document.getElementById('mainQuestion')?.value.trim(); |
| if (mainQuestion) { |
| document.querySelectorAll('.progress-step')[2].classList.add('active'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
