MAALOUFimad02/Machine_Learning_Training
0
1<!DOCTYPE html>2<html lang="fr">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Questions & Feedback — ML Academy</title>7 <link rel="stylesheet" href="css/shared.css">8 <style>9 /* PAGE HERO */10 .feedback-hero {11 background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);12 border-bottom: 1px solid var(--border-color);13 padding: var(--space-3xl) var(--space-xl);14 text-align: center;15 }16 17 .feedback-hero-label {18 font-family: 'JetBrains Mono', monospace;19 font-size: 0.75rem;20 color: var(--secondary);21 text-transform: uppercase;22 letter-spacing: 2px;23 margin-bottom: var(--space-md);24 }25 26 .feedback-hero-title {27 font-size: clamp(2rem, 5vw, 3rem);28 font-weight: 700;29 color: var(--text-primary);30 margin-bottom: var(--space-md);31 }32 33 .feedback-hero-subtitle {34 font-size: 1.1rem;35 color: var(--text-secondary);36 max-width: 600px;37 margin: 0 auto;38 }39 40 /* FEEDBACK CONTAINER */41 .feedback-container {42 max-width: 800px;43 margin: 0 auto;44 padding: var(--space-2xl) var(--space-xl);45 }46 47 /* FORM PROGRESS */48 .form-progress {49 display: flex;50 gap: var(--space-sm);51 margin-bottom: var(--space-xl);52 }53 54 .progress-step {55 flex: 1;56 height: 4px;57 background: var(--bg-tertiary);58 border-radius: 2px;59 transition: background var(--transition-base);60 }61 62 .progress-step.active {63 background: linear-gradient(90deg, var(--primary), var(--secondary));64 }65 66 /* FORM CARDS */67 .form-card {68 background: var(--bg-card);69 border: 1px solid var(--border-color);70 border-radius: var(--radius-lg);71 overflow: hidden;72 margin-bottom: var(--space-lg);73 transition: all var(--transition-base);74 }75 76 .form-card:hover {77 border-color: var(--border-light);78 }79 80 .form-card-header {81 display: flex;82 align-items: center;83 gap: var(--space-md);84 padding: var(--space-lg) var(--space-xl);85 background: var(--bg-tertiary);86 border-bottom: 1px solid var(--border-color);87 }88 89 .form-card-icon {90 width: 36px;91 height: 36px;92 background: linear-gradient(135deg, var(--primary), var(--secondary));93 border-radius: var(--radius-md);94 display: flex;95 align-items: center;96 justify-content: center;97 font-size: 1rem;98 font-weight: 700;99 color: white;100 }101 102 .form-card-title {103 font-size: 1.1rem;104 font-weight: 600;105 color: var(--text-primary);106 }107 108 .form-card-body {109 padding: var(--space-xl);110 }111 112 /* FORM ELEMENTS */113 .form-row {114 margin-bottom: var(--space-lg);115 }116 117 .form-row:last-child {118 margin-bottom: 0;119 }120 121 .form-label {122 display: block;123 font-size: 0.85rem;124 font-weight: 500;125 color: var(--text-primary);126 margin-bottom: var(--space-sm);127 }128 129 .form-label .required {130 color: var(--danger);131 margin-left: var(--space-xs);132 }133 134 .form-label .hint {135 font-size: 0.75rem;136 color: var(--text-muted);137 font-weight: 400;138 margin-left: var(--space-sm);139 }140 141 /* STAR RATING */142 .star-rating {143 display: flex;144 gap: var(--space-sm);145 }146 147 .star {148 font-size: 2rem;149 cursor: pointer;150 transition: all var(--transition-fast);151 filter: grayscale(1);152 opacity: 0.4;153 }154 155 .star:hover,156 .star.active {157 filter: grayscale(0);158 opacity: 1;159 transform: scale(1.2);160 }161 162 .star-rating-text {163 font-size: 0.85rem;164 color: var(--text-muted);165 margin-left: var(--space-md);166 align-self: center;167 }168 169 /* DIFFICULTY BUTTONS */170 .difficulty-buttons {171 display: flex;172 gap: var(--space-sm);173 flex-wrap: wrap;174 }175 176 .difficulty-btn {177 padding: var(--space-sm) var(--space-md);178 background: var(--bg-tertiary);179 border: 1px solid var(--border-color);180 border-radius: var(--radius-md);181 color: var(--text-secondary);182 font-size: 0.9rem;183 cursor: pointer;184 transition: all var(--transition-base);185 }186 187 .difficulty-btn:hover {188 border-color: var(--primary);189 color: var(--text-primary);190 }191 192 .difficulty-btn.selected {193 background: rgba(99, 102, 241, 0.2);194 border-color: var(--primary);195 color: var(--primary-light);196 }197 198 /* RADIO & CHECKBOX GROUPS */199 .radio-group,200 .checkbox-group {201 display: flex;202 flex-direction: column;203 gap: var(--space-sm);204 }205 206 .radio-option,207 .checkbox-option {208 display: flex;209 align-items: flex-start;210 gap: var(--space-md);211 padding: var(--space-md);212 background: var(--bg-tertiary);213 border: 1px solid var(--border-color);214 border-radius: var(--radius-md);215 cursor: pointer;216 transition: all var(--transition-base);217 }218 219 .radio-option:hover,220 .checkbox-option:hover {221 border-color: var(--primary);222 background: var(--bg-hover);223 }224 225 .radio-option input,226 .checkbox-option input {227 margin-top: 2px;228 accent-color: var(--primary);229 width: 18px;230 }231 232 .radio-label,233 .checkbox-label {234 font-size: 0.9rem;235 color: var(--text-secondary);236 }237 238 /* SUBMIT BUTTON */239 .submit-btn {240 width: 100%;241 padding: var(--space-md);242 background: linear-gradient(135deg, var(--primary), var(--primary-dark));243 color: white;244 border: none;245 border-radius: var(--radius-md);246 font-family: 'Inter', sans-serif;247 font-size: 1rem;248 font-weight: 600;249 cursor: pointer;250 transition: all var(--transition-base);251 display: flex;252 align-items: center;253 justify-content: center;254 gap: var(--space-sm);255 }256 257 .submit-btn:hover {258 transform: translateY(-2px);259 box-shadow: var(--shadow-glow);260 }261 262 .submit-btn:disabled {263 opacity: 0.6;264 cursor: not-allowed;265 transform: none;266 }267 268 /* SUCCESS MESSAGE */269 .success-message {270 display: none;271 background: rgba(16, 185, 129, 0.1);272 border: 1px solid rgba(16, 185, 129, 0.3);273 border-radius: var(--radius-lg);274 padding: var(--space-3xl);275 text-align: center;276 animation: scaleIn 0.5s ease;277 }278 279 .success-message.show {280 display: block;281 }282 283 .success-icon {284 width: 60px;285 height: 60px;286 background: linear-gradient(135deg, var(--success), #059669);287 border-radius: 50%;288 display: flex;289 align-items: center;290 justify-content: center;291 font-size: 1.5rem;292 font-weight: 700;293 color: white;294 margin: 0 auto var(--space-md);295 animation: bounce 1s ease infinite;296 }297 298 .success-title {299 font-size: 1.5rem;300 font-weight: 700;301 color: var(--success);302 margin-bottom: var(--space-sm);303 }304 305 .success-text {306 font-size: 1rem;307 color: var(--text-secondary);308 margin-bottom: var(--space-xl);309 }310 311 /* DATA EXPORT SECTION */312 .export-section {313 background: var(--bg-card);314 border: 1px solid var(--border-color);315 border-radius: var(--radius-lg);316 padding: var(--space-xl);317 margin-top: var(--space-xl);318 }319 320 .export-title {321 font-size: 1rem;322 font-weight: 600;323 color: var(--text-primary);324 margin-bottom: var(--space-md);325 }326 327 .export-buttons {328 display: flex;329 gap: var(--space-md);330 flex-wrap: wrap;331 }332 333 .export-btn {334 display: flex;335 align-items: center;336 gap: var(--space-sm);337 padding: var(--space-sm) var(--space-md);338 background: var(--bg-tertiary);339 border: 1px solid var(--border-color);340 border-radius: var(--radius-md);341 color: var(--text-secondary);342 font-size: 0.85rem;343 cursor: pointer;344 transition: all var(--transition-base);345 text-decoration: none;346 }347 348 .export-btn:hover {349 border-color: var(--primary);350 color: var(--text-primary);351 }352 353 /* FAQ SECTION */354 .faq-section {355 margin-top: var(--space-3xl);356 }357 358 .faq-header {359 text-align: center;360 margin-bottom: var(--space-xl);361 }362 363 .faq-title {364 font-size: 1.5rem;365 font-weight: 700;366 color: var(--text-primary);367 margin-bottom: var(--space-sm);368 }369 370 .faq-subtitle {371 font-size: 0.95rem;372 color: var(--text-secondary);373 }374 375 .faq-item {376 background: var(--bg-card);377 border: 1px solid var(--border-color);378 border-radius: var(--radius-md);379 margin-bottom: var(--space-md);380 overflow: hidden;381 transition: all var(--transition-base);382 }383 384 .faq-item:hover {385 border-color: var(--border-light);386 }387 388 .faq-question {389 display: flex;390 justify-content: space-between;391 align-items: center;392 padding: var(--space-lg) var(--space-xl);393 cursor: pointer;394 background: var(--bg-tertiary);395 transition: background var(--transition-base);396 }397 398 .faq-question:hover {399 background: var(--bg-hover);400 }401 402 .faq-question-text {403 font-size: 0.95rem;404 font-weight: 500;405 color: var(--text-primary);406 }407 408 .faq-arrow {409 color: var(--primary);410 transition: transform var(--transition-base);411 }412 413 .faq-item.open .faq-arrow {414 transform: rotate(180deg);415 }416 417 .faq-answer {418 max-height: 0;419 overflow: hidden;420 transition: max-height var(--transition-slow);421 }422 423 .faq-item.open .faq-answer {424 max-height: 500px;425 }426 427 .faq-answer-content {428 padding: var(--space-lg) var(--space-xl);429 font-size: 0.9rem;430 color: var(--text-secondary);431 line-height: 1.7;432 border-top: 1px solid var(--border-color);433 }434 435 .faq-answer-content code {436 background: rgba(99, 102, 241, 0.1);437 padding: 2px 6px;438 border-radius: 4px;439 font-family: 'JetBrains Mono', monospace;440 font-size: 0.8rem;441 color: var(--primary-light);442 }443 444 /* CONTACT INFO */445 .contact-info {446 display: grid;447 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));448 gap: var(--space-lg);449 margin-top: var(--space-2xl);450 padding-top: var(--space-2xl);451 border-top: 1px solid var(--border-color);452 }453 454 .contact-item {455 text-align: center;456 padding: var(--space-lg);457 background: var(--bg-card);458 border: 1px solid var(--border-color);459 border-radius: var(--radius-md);460 transition: all var(--transition-base);461 }462 463 .contact-item:hover {464 border-color: var(--primary);465 transform: translateY(-3px);466 }467 468 .contact-icon {469 width: 40px;470 height: 40px;471 background: linear-gradient(135deg, var(--primary), var(--secondary));472 border-radius: var(--radius-md);473 display: flex;474 align-items: center;475 justify-content: center;476 font-size: 1rem;477 font-weight: 700;478 color: white;479 margin: 0 auto var(--space-sm);480 }481 482 .contact-label {483 font-size: 0.85rem;484 font-weight: 600;485 color: var(--text-primary);486 margin-bottom: var(--space-xs);487 }488 489 .contact-value {490 font-size: 0.8rem;491 color: var(--text-muted);492 }493 494 .contact-link {495 color: var(--primary-light);496 text-decoration: none;497 }498 499 .contact-link:hover {500 text-decoration: underline;501 }502 503 /* AUTHOR FOOTER */504 .author-footer {505 background: var(--bg-secondary);506 border-top: 1px solid var(--border-color);507 padding: var(--space-xl);508 text-align: center;509 }510 511 .author-info {512 display: flex;513 justify-content: center;514 gap: var(--space-xl);515 flex-wrap: wrap;516 margin-bottom: var(--space-md);517 }518 519 .author-link {520 display: flex;521 align-items: center;522 gap: var(--space-sm);523 color: var(--text-secondary);524 text-decoration: none;525 font-size: 0.9rem;526 transition: color var(--transition-base);527 }528 529 .author-link:hover {530 color: var(--primary-light);531 }532 533 .author-link svg {534 width: 18px;535 height: 18px;536 fill: currentColor;537 }538 </style>539</head>540<body>541 <!-- Particles Background -->542 <div class="particles-container">543 <div class="particle"></div>544 <div class="particle"></div>545 <div class="particle"></div>546 <div class="particle"></div>547 <div class="particle"></div>548 </div>549 550 <!-- Navigation -->551 <nav class="navbar">552 <a href="index.html" class="navbar-brand">553 <div class="brand-logo">ML</div>554 <span>ML Academy</span>555 </a>556 <div class="navbar-nav">557 <a href="index.html" class="nav-link">558 <span class="nav-icon">[H]</span>559 <span>Accueil</span>560 </a>561 <a href="cours.html" class="nav-link">562 <span class="nav-icon">[C]</span>563 <span>Cours</span>564 </a>565 <a href="tp.html" class="nav-link">566 <span class="nav-icon">[T]</span>567 <span>TPs</span>568 </a>569 <a href="feedback.html" class="nav-link active">570 <span class="nav-icon">[F]</span>571 <span>Contact</span>572 </a>573 </div>574 <div class="nav-badge">575 <div class="dot"></div>576 <span>Google Colab Ready</span>577 </div>578 </nav>579 580 <!-- Page Wrapper -->581 <div class="page-wrapper">582 <!-- Hero -->583 <section class="feedback-hero">584 <div class="feedback-hero-label">Retours & Questions</div>585 <h1 class="feedback-hero-title">Questions & Feedback</h1>586 <p class="feedback-hero-subtitle">587 Un point pas clair ? Une suggestion d'amelioration ? 588 Nous sommes la pour vous aider et ameliorer la formation.589 </p>590 </section>591 592 <!-- Feedback Container -->593 <div class="feedback-container">594 595 <!-- Success Message -->596 <div class="success-message" id="successMessage">597 <div class="success-icon">OK</div>598 <h2 class="success-title">Merci pour votre retour !</h2>599 <p class="success-text">600 Vos reponses ont ete enregistrees. Nous les analyserons et vous repondrons 601 dans les plus brefs delais.602 </p>603 <a href="index.html" class="btn btn-outline">Retour a l'accueil</a>604 </div>605 606 <!-- Form -->607 <form id="feedbackForm">608 <!-- Progress -->609 <div class="form-progress">610 <div class="progress-step active"></div>611 <div class="progress-step"></div>612 <div class="progress-step"></div>613 </div>614 615 <!-- Card 1: Identification -->616 <div class="form-card scroll-animate">617 <div class="form-card-header">618 <div class="form-card-icon">I</div>619 <h2 class="form-card-title">Identification <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 400;">(optionnel)</span></h2>620 </div>621 <div class="form-card-body">622 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);">623 <div class="form-row">624 <label class="form-label">Prenom / Nom</label>625 <input type="text" class="form-input" placeholder="Ex: Jean Dupont" id="name">626 </div>627 <div class="form-row">628 <label class="form-label">Email</label>629 <input type="email" class="form-input" placeholder="jean@example.com" id="email">630 </div>631 </div>632 <div class="form-row" style="margin-bottom: 0;">633 <label class="form-label">Sujet de projet</label>634 <select class="form-select" id="project">635 <option value="">— Selectionner —</option>636 <option value="classification">Classification</option>637 <option value="regression">Regression</option>638 <option value="nlp">NLP / Texte</option>639 <option value="computer-vision">Computer Vision</option>640 <option value="time-series">Series Temporelles</option>641 <option value="other">Autre</option>642 </select>643 </div>644 </div>645 </div>646 647 <!-- Card 2: Evaluation -->648 <div class="form-card scroll-animate">649 <div class="form-card-header">650 <div class="form-card-icon">E</div>651 <h2 class="form-card-title">Evaluation de la formation</h2>652 </div>653 <div class="form-card-body">654 <div class="form-row">655 <label class="form-label">Note globale <span class="required">*</span></label>656 <div style="display: flex; align-items: center;">657 <div class="star-rating" id="starRating">658 <span class="star" data-value="1">*</span>659 <span class="star" data-value="2">*</span>660 <span class="star" data-value="3">*</span>661 <span class="star" data-value="4">*</span>662 <span class="star" data-value="5">*</span>663 </div>664 <span class="star-rating-text" id="ratingText">Cliquez pour noter</span>665 </div>666 <input type="hidden" id="ratingValue" value="0">667 </div>668 669 <div class="form-row">670 <label class="form-label">Niveau de difficulte <span class="required">*</span></label>671 <div class="difficulty-buttons" id="difficultyButtons">672 <button type="button" class="difficulty-btn" data-value="tres-facile">Tres facile</button>673 <button type="button" class="difficulty-btn" data-value="facile">Facile</button>674 <button type="button" class="difficulty-btn" data-value="adapte">Adapte</button>675 <button type="button" class="difficulty-btn" data-value="difficile">Difficile</button>676 <button type="button" class="difficulty-btn" data-value="tres-difficile">Trop difficile</button>677 </div>678 <input type="hidden" id="difficultyValue" value="">679 </div>680 681 <div class="form-row" style="margin-bottom: 0;">682 <label class="form-label">Rythme de la formation</label>683 <div class="radio-group">684 <label class="radio-option">685 <input type="radio" name="rythme" value="trop-lent">686 <span class="radio-label">Trop lent — on aurait pu aller plus vite</span>687 </label>688 <label class="radio-option">689 <input type="radio" name="rythme" value="bien" checked>690 <span class="radio-label">Bien rythme — equilibre parfait</span>691 </label>692 <label class="radio-option">693 <input type="radio" name="rythme" value="trop-rapide">694 <span class="radio-label">Trop rapide — difficile a suivre</span>695 </label>696 </div>697 </div>698 </div>699 </div>700 701 <!-- Card 3: Content -->702 <div class="form-card scroll-animate">703 <div class="form-card-header">704 <div class="form-card-icon">C</div>705 <h2 class="form-card-title">Contenu de la formation</h2>706 </div>707 <div class="form-card-body">708 <div class="form-row">709 <label class="form-label">Parties les plus utiles <span class="hint">(plusieurs choix possibles)</span></label>710 <div class="checkbox-group">711 <label class="checkbox-option">712 <input type="checkbox" name="utile" value="preprocessing">713 <span class="checkbox-label">Pretraitement des donnees</span>714 </label>715 <label class="checkbox-option">716 <input type="checkbox" name="utile" value="regression">717 <span class="checkbox-label">Regression Lineaire & Logistique</span>718 </label>719 <label class="checkbox-option">720 <input type="checkbox" name="utile" value="randomforest">721 <span class="checkbox-label">Random Forest & XGBoost</span>722 </label>723 <label class="checkbox-option">724 <input type="checkbox" name="utile" value="neuralnets">725 <span class="checkbox-label">Reseaux de Neurones (Keras)</span>726 </label>727 <label class="checkbox-option">728 <input type="checkbox" name="utile" value="lstm">729 <span class="checkbox-label">LSTM & Series Temporelles</span>730 </label>731 <label class="checkbox-option">732 <input type="checkbox" name="utile" value="cnn">733 <span class="checkbox-label">CNN & Computer Vision</span>734 </label>735 <label class="checkbox-option">736 <input type="checkbox" name="utile" value="nlp">737 <span class="checkbox-label">NLP & Transformers</span>738 </label>739 <label class="checkbox-option">740 <input type="checkbox" name="utile" value="tps">741 <span class="checkbox-label">Travaux Pratiques (TPs)</span>742 </label>743 </div>744 </div>745 746 <div class="form-row" style="margin-bottom: 0;">747 <label class="form-label">Points difficiles a comprendre</label>748 <div class="checkbox-group">749 <label class="checkbox-option">750 <input type="checkbox" name="difficile" value="overfitting">751 <span class="checkbox-label">Overfitting / Underfitting</span>752 </label>753 <label class="checkbox-option">754 <input type="checkbox" name="difficile" value="normalisation">755 <span class="checkbox-label">Normalisation et Data Leakage</span>756 </label>757 <label class="checkbox-option">758 <input type="checkbox" name="difficile" value="hyperparameters">759 <span class="checkbox-label">Choix des hyperparametres</span>760 </label>761 <label class="checkbox-option">762 <input type="checkbox" name="difficile" value="lstm-gates">763 <span class="checkbox-label">Les portes du LSTM</span>764 </label>765 <label class="checkbox-option">766 <input type="checkbox" name="difficile" value="backprop">767 <span class="checkbox-label">Backpropagation</span>768 </label>769 <label class="checkbox-option">770 <input type="checkbox" name="difficile" value="metrics">771 <span class="checkbox-label">Choix des metriques d'evaluation</span>772 </label>773 </div>774 </div>775 </div>776 </div>777 778 <!-- Card 4: Questions -->779 <div class="form-card scroll-animate">780 <div class="form-card-header">781 <div class="form-card-icon">Q</div>782 <h2 class="form-card-title">Vos questions</h2>783 </div>784 <div class="form-card-body">785 <div class="form-row">786 <label class="form-label">Question principale <span class="required">*</span></label>787 <textarea class="form-textarea" placeholder="Decrivez votre question ou le point qui n'est pas clair..." id="mainQuestion" required></textarea>788 </div>789 790 <div class="form-row">791 <label class="form-label">Question sur le code / les TPs <span class="hint">(optionnel)</span></label>792 <textarea class="form-textarea" placeholder="Si vous avez une question specifique sur un notebook ou du code..." id="codeQuestion"></textarea>793 </div>794 795 <div class="form-row" style="margin-bottom: 0;">796 <label class="form-label">Lien avec votre projet <span class="hint">(optionnel)</span></label>797 <textarea class="form-textarea" placeholder="Comment cette formation peut-elle vous aider dans votre projet personnel ?" id="projectLink"></textarea>798 </div>799 </div>800 </div>801 802 <!-- Card 5: Suggestions -->803 <div class="form-card scroll-animate">804 <div class="form-card-header">805 <div class="form-card-icon">S</div>806 <h2 class="form-card-title">Suggestions d'amelioration</h2>807 </div>808 <div class="form-card-body">809 <div class="form-row">810 <label class="form-label">Ce que vous auriez aime voir de plus</label>811 <div class="checkbox-group">812 <label class="checkbox-option">813 <input type="checkbox" name="suggestion" value="plus-tp">814 <span class="checkbox-label">Plus de temps sur les TPs</span>815 </label>816 <label class="checkbox-option">817 <input type="checkbox" name="suggestion" value="plus-theorie">818 <span class="checkbox-label">Plus de theorie et d'equations</span>819 </label>820 <label class="checkbox-option">821 <input type="checkbox" name="suggestion" value="plus-datasets">822 <span class="checkbox-label">Plus de datasets differents</span>823 </label>824 <label class="checkbox-option">825 <input type="checkbox" name="suggestion" value="deployment">826 <span class="checkbox-label">Deploiement de modeles (API, Streamlit)</span>827 </label>828 <label class="checkbox-option">829 <input type="checkbox" name="suggestion" value="mLOps">830 <span class="checkbox-label">MLOps et gestion de modeles</span>831 </label>832 <label class="checkbox-option">833 <input type="checkbox" name="suggestion" value="viz">834 <span class="checkbox-label">Plus de visualisations interactives</span>835 </label>836 </div>837 </div>838 839 <div class="form-row" style="margin-bottom: 0;">840 <label class="form-label">Commentaire libre</label>841 <textarea class="form-textarea" placeholder="Toute suggestion ou remarque est la bienvenue..." id="freeComment"></textarea>842 </div>843 </div>844 </div>845 846 <!-- Submit -->847 <button type="submit" class="submit-btn" id="submitBtn">848 Envoyer mon feedback849 </button>850 <p style="text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-md);">851 Vos reponses nous aident a ameliorer la formation pour les promotions futures.852 </p>853 </form>854 855 <!-- Data Export Section -->856 <div class="export-section scroll-animate" id="exportSection" style="display: none;">857 <h3 class="export-title">Exporter les donnees</h3>858 <p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--space-md);">859 Telechargez les feedbacks collectes pour analyse.860 </p>861 <div class="export-buttons">862 <button class="export-btn" onclick="feedbackStorage.downloadFeedbacks()">863 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">864 <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>865 </svg>866 JSON867 </button>868 <button class="export-btn" onclick="feedbackStorage.exportToCSV()">869 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">870 <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>871 </svg>872 CSV (Excel)873 </button>874 <button class="export-btn" onclick="showFeedbackStats()">875 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">876 <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"/>877 </svg>878 Statistiques879 </button>880 </div>881 </div>882 883 <!-- FAQ Section -->884 <section class="faq-section">885 <div class="faq-header scroll-animate">886 <h2 class="faq-title">Questions frequentes</h2>887 <p class="faq-subtitle">Consultez d'abord ces reponses avant de soumettre votre question.</p>888 </div>889 890 <div class="faq-item scroll-animate">891 <div class="faq-question" onclick="toggleFaq(this)">892 <span class="faq-question-text">Pourquoi normaliser APRES le split et pas avant ?</span>893 <span class="faq-arrow">v</span>894 </div>895 <div class="faq-answer">896 <div class="faq-answer-content">897 Si vous normalisez avant le split, vous calculez le min/max sur l'ensemble des donnees (train + test). 898 Votre modele "voit" donc indirectement les donnees de test pendant l'entrainement — c'est le 899 <strong>data leakage</strong>. La regle : <strong>fit sur train seulement, transform sur train ET test</strong>.900 </div>901 </div>902 </div>903 904 <div class="faq-item scroll-animate">905 <div class="faq-question" onclick="toggleFaq(this)">906 <span class="faq-question-text">Quelle est la difference entre MAE et RMSE ?</span>907 <span class="faq-arrow">v</span>908 </div>909 <div class="faq-answer">910 <div class="faq-answer-content">911 <strong>MAE</strong> (Mean Absolute Error) = moyenne des erreurs absolues. 912 <strong>RMSE</strong> (Root Mean Squared Error) = racine de la moyenne des erreurs au carre. 913 La difference cle : RMSE <strong>penalise davantage les grandes erreurs</strong> car on eleve au carre. 914 En ingenierie, RMSE >= MAE toujours.915 </div>916 </div>917 </div>918 919 <div class="faq-item scroll-animate">920 <div class="faq-question" onclick="toggleFaq(this)">921 <span class="faq-question-text">Comment savoir si mon modele fait de l'overfitting ?</span>922 <span class="faq-arrow">v</span>923 </div>924 <div class="faq-answer">925 <div class="faq-answer-content">926 Comparez les metriques sur <strong>train</strong> ET <strong>test</strong>. 927 <strong>Overfitting</strong> = R2 train tres eleve (0.99) mais R2 test beaucoup plus bas (0.65). 928 <strong>Bonne generalisation</strong> = R2 train ≈ R2 test (ex: 0.96 vs 0.94). 929 Solution : Dropout, Early Stopping, regularisation L2.930 </div>931 </div>932 </div>933 934 <div class="faq-item scroll-animate">935 <div class="faq-question" onclick="toggleFaq(this)">936 <span class="faq-question-text">Quand utiliser Random Forest vs Neural Networks ?</span>937 <span class="faq-arrow">v</span>938 </div>939 <div class="faq-answer">940 <div class="faq-answer-content">941 <strong>Random Forest</strong> : donnees tabulaires, besoin d'interpretabilite, 942 peu de temps de tuning. <strong>Neural Networks</strong> : donnees complexes (images, texte), 943 beaucoup de donnees disponibles, ressources computationnelles importantes.944 </div>945 </div>946 </div>947 948 <div class="faq-item scroll-animate">949 <div class="faq-question" onclick="toggleFaq(this)">950 <span class="faq-question-text">Comment adapter le code a mes propres donnees ?</span>951 <span class="faq-arrow">v</span>952 </div>953 <div class="faq-answer">954 <div class="faq-answer-content">955 Remplacez <code>df = pd.read_csv("vos_donnees.csv")</code>. Verifiez avec 956 <code>df.head()</code> et <code>df.describe()</code>. Adaptez la liste des features 957 et la variable cible. Ajoutez <code>df.dropna()</code> pour supprimer les NaN. 958 Le reste du pipeline reste identique !959 </div>960 </div>961 </div>962 </section>963 964 <!-- Contact Info -->965 <div class="contact-info">966 <div class="contact-item scroll-animate">967 <div class="contact-icon">@</div>968 <div class="contact-label">Email</div>969 <div class="contact-value">970 <a href="mailto:imadmaalouf02@gmail.com" class="contact-link">imadmaalouf02@gmail.com</a>971 </div>972 </div>973 <div class="contact-item scroll-animate">974 <div class="contact-icon">GH</div>975 <div class="contact-label">GitHub</div>976 <div class="contact-value">977 <a href="https://github.com/imadmaalouf02" target="_blank" class="contact-link">github.com/imadmaalouf02</a>978 </div>979 </div>980 <div class="contact-item scroll-animate">981 <div class="contact-icon">HF</div>982 <div class="contact-label">Hugging Face</div>983 <div class="contact-value">984 <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" class="contact-link">ML Training Space</a>985 </div>986 </div>987 </div>988 989 </div>990 991 <!-- Author Footer -->992 <footer class="author-footer">993 <div class="author-info">994 <a href="mailto:imadmaalouf02@gmail.com" class="author-link">995 <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>996 imadmaalouf02@gmail.com997 </a>998 <a href="https://github.com/imadmaalouf02" target="_blank" class="author-link">999 <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>1000 GitHub1001 </a>1002 <a href="https://huggingface.co/spaces/MAALOOUF/ML_Training" target="_blank" class="author-link">1003 <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>1004 Hugging Face Space1005 </a>1006 </div>1007 </footer>1008 1009 <!-- Footer -->1010 <footer class="footer">1011 <p class="footer-text">1012 ML Academy — Questions & Feedback — 1013 <span class="footer-brand">GE-MCI 4A</span> — 2025/20261014 </p>1015 <p class="footer-text" style="margin-top: var(--space-sm); font-size: 0.75rem; color: var(--text-muted);">1016 Formateur : Imad Maalouf1017 </p>1018 </footer>1019 </div>1020 1021 <!-- Scripts -->1022 <script src="js/shared.js"></script>1023 <script src="js/feedback-storage.js"></script>1024 <script>1025 // Scroll animations1026 const observerOptions = {1027 threshold: 0.1,1028 rootMargin: '0px 0px -50px 0px'1029 };1030 1031 const observer = new IntersectionObserver((entries) => {1032 entries.forEach(entry => {1033 if (entry.isIntersecting) {1034 entry.target.classList.add('visible');1035 }1036 });1037 }, observerOptions);1038 1039 document.querySelectorAll('.scroll-animate').forEach(el => {1040 observer.observe(el);1041 });1042 1043 // Star rating1044 const stars = document.querySelectorAll('.star');1045 const ratingValue = document.getElementById('ratingValue');1046 const ratingText = document.getElementById('ratingText');1047 const ratingLabels = ['', 'Insuffisant', 'Passable', 'Bien', 'Tres bien', 'Excellent !'];1048 1049 stars.forEach(star => {1050 star.addEventListener('click', () => {1051 const value = parseInt(star.dataset.value);1052 ratingValue.value = value;1053 ratingText.textContent = ratingLabels[value];1054 1055 stars.forEach((s, i) => {1056 s.classList.toggle('active', i < value);1057 });1058 1059 // Update progress1060 document.querySelectorAll('.progress-step')[1].classList.add('active');1061 });1062 });1063 1064 // Difficulty buttons1065 const diffButtons = document.querySelectorAll('.difficulty-btn');1066 const difficultyValue = document.getElementById('difficultyValue');1067 1068 diffButtons.forEach(btn => {1069 btn.addEventListener('click', () => {1070 diffButtons.forEach(b => b.classList.remove('selected'));1071 btn.classList.add('selected');1072 difficultyValue.value = btn.dataset.value;1073 });1074 });1075 1076 // FAQ toggle1077 function toggleFaq(element) {1078 const faqItem = element.parentElement;1079 faqItem.classList.toggle('open');1080 }1081 1082 // Form submission1083 const form = document.getElementById('feedbackForm');1084 const successMessage = document.getElementById('successMessage');1085 const submitBtn = document.getElementById('submitBtn');1086 const exportSection = document.getElementById('exportSection');1087 1088 form.addEventListener('submit', (e) => {1089 e.preventDefault();1090 1091 // Validation1092 const rating = ratingValue.value;1093 const difficulty = difficultyValue.value;1094 const mainQuestion = document.getElementById('mainQuestion').value.trim();1095 1096 if (rating === '0') {1097 alert('Veuillez donner une note a la formation.');1098 return;1099 }1100 1101 if (!difficulty) {1102 alert('Veuillez indiquer le niveau de difficulte percu.');1103 return;1104 }1105 1106 if (!mainQuestion) {1107 alert('Veuillez poser au moins une question principale.');1108 return;1109 }1110 1111 // Collect data1112 const formData = {1113 name: document.getElementById('name').value,1114 email: document.getElementById('email').value,1115 project: document.getElementById('project').value,1116 rating: rating,1117 difficulty: difficulty,1118 rythme: document.querySelector('input[name="rythme"]:checked')?.value,1119 utiles: [...document.querySelectorAll('input[name="utile"]:checked')].map(cb => cb.value),1120 difficiles: [...document.querySelectorAll('input[name="difficile"]:checked')].map(cb => cb.value),1121 mainQuestion: mainQuestion,1122 codeQuestion: document.getElementById('codeQuestion').value,1123 projectLink: document.getElementById('projectLink').value,1124 suggestions: [...document.querySelectorAll('input[name="suggestion"]:checked')].map(cb => cb.value),1125 freeComment: document.getElementById('freeComment').value,1126 timestamp: new Date().toISOString()1127 };1128 1129 // Submit to storage1130 submitFeedback(formData);1131 1132 // Show success1133 form.style.display = 'none';1134 successMessage.classList.add('show');1135 exportSection.style.display = 'block';1136 document.querySelectorAll('.progress-step')[2].classList.add('active');1137 window.scrollTo({ top: 0, behavior: 'smooth' });1138 });1139 1140 // Update progress on scroll1141 window.addEventListener('scroll', () => {1142 const mainQuestion = document.getElementById('mainQuestion')?.value.trim();1143 if (mainQuestion) {1144 document.querySelectorAll('.progress-step')[2].classList.add('active');1145 }1146 });1147 </script>1148</body>1149</html>1150