Download feedback.html from MAALOUFimad02/Machine_Learning_Training: direct link, hf CLI and curl.
- Browser
- Download file 40.1 kB
-
https://huggingface.co/spaces/MAALOUFimad02/Machine_Learning_Training/resolve/main/feedback.html
- Command line
-
hf download hf://spaces/MAALOUFimad02/Machine_Learning_Training/feedback.html
-
curl -L -o feedback.html https://huggingface.co/spaces/MAALOUFimad02/Machine_Learning_Training/resolve/main/feedback.html
40.1 kB
| <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> | |
| /* PAGE HERO */ | |
| .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 */ | |
| .feedback-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: var(--space-2xl) var(--space-xl); | |
| } | |
| /* FORM PROGRESS */ | |
| .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 CARDS */ | |
| .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 ELEMENTS */ | |
| .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 */ | |
| .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 */ | |
| .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 & CHECKBOX GROUPS */ | |
| .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 BUTTON */ | |
| .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 */ | |
| .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); | |
| } | |
| /* DATA EXPORT SECTION */ | |
| .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 */ | |
| .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 */ | |
| .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 */ | |
| .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> | |
| <!-- Particles Background --> | |
| <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> | |
| <!-- Navigation --> | |
| <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> | |
| <!-- Page Wrapper --> | |
| <div class="page-wrapper"> | |
| <!-- Hero --> | |
| <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> | |
| <!-- Feedback Container --> | |
| <div class="feedback-container"> | |
| <!-- Success Message --> | |
| <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 --> | |
| <form id="feedbackForm"> | |
| <!-- Progress --> | |
| <div class="form-progress"> | |
| <div class="progress-step active"></div> | |
| <div class="progress-step"></div> | |
| <div class="progress-step"></div> | |
| </div> | |
| <!-- Card 1: Identification --> | |
| <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> | |
| <!-- Card 2: Evaluation --> | |
| <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> | |
| <!-- Card 3: Content --> | |
| <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> | |
| <!-- Card 4: Questions --> | |
| <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> | |
| <!-- Card 5: Suggestions --> | |
| <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> | |
| <!-- Submit --> | |
| <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> | |
| <!-- Data Export Section --> | |
| <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> | |
| <!-- FAQ Section --> | |
| <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> | |
| <!-- Contact Info --> | |
| <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> | |
| <!-- Author Footer --> | |
| <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 --> | |
| <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> | |
| <!-- Scripts --> | |
| <script src="js/shared.js"></script> | |
| <script src="js/feedback-storage.js"></script> | |
| <script> | |
| // Scroll animations | |
| 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); | |
| }); | |
| // Star rating | |
| 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); | |
| }); | |
| // Update progress | |
| document.querySelectorAll('.progress-step')[1].classList.add('active'); | |
| }); | |
| }); | |
| // Difficulty buttons | |
| 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; | |
| }); | |
| }); | |
| // FAQ toggle | |
| function toggleFaq(element) { | |
| const faqItem = element.parentElement; | |
| faqItem.classList.toggle('open'); | |
| } | |
| // Form submission | |
| 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(); | |
| // Validation | |
| 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; | |
| } | |
| // Collect data | |
| 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() | |
| }; | |
| // Submit to storage | |
| submitFeedback(formData); | |
| // Show success | |
| 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' }); | |
| }); | |
| // Update progress on scroll | |
| window.addEventListener('scroll', () => { | |
| const mainQuestion = document.getElementById('mainQuestion')?.value.trim(); | |
| if (mainQuestion) { | |
| document.querySelectorAll('.progress-step')[2].classList.add('active'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |