Consignes Examen
Examen : Fabrique ton Clone GPT (et essaye de ne pas pleurer)
(ಠ‿ಠ) Oui, exactement : tu vas reconstruire ChatGPT avec tes petites mains.
1. Objectif général
Développer une application ChatGPT-like complète et fonctionnelle qui respecte TOUTES les exigences listées ci-dessous.
Stack technique imposée : Laravel + Starter Kit Vue Inertia shadcn + TailwindCSS.
Si ton projet ressemble à un tutoriel YouTube copié-collé, c'est direction la case échec. 💀
2. Fonctionnalités obligatoires (éliminatoires)
Ces fonctionnalités DOIVENT être présentes et fonctionnelles, sinon c'est ajournement direct :
2.1 Fonctionnalités techniques
- Sélecteur de modèles – Permettre de changer de LLM (Sonnet 4.5, Gemini 3, GPT-5-mini, Grok-4-fast, etc.) facilement dans l'interface
- Historique des conversations – Sauvegarde automatique avec titre généré au premier message
- Streaming de la réponse – Les tokens doivent apparaître en temps réel, pas d'un bloc (WebSockets ou Server-Sent Events)
- Instructions personnalisées – Interface pour configurer le comportement de l'IA (ton, style, contexte)
- Vue.js Composition API – ⚠️ ATTENTION : l'utilisation de l'Options API est ÉLIMINATOIRE
- Dusk – Ajoutez des tests à votre application
2.2 Thématisation & Identité de l'application
Parce que "ChatGPT mais en Laravel" c'est mass cringe 🥴
Ton clone GPT doit avoir une identité propre et cibler un public spécifique. Choisis un thème et construis l'expérience utilisateur autour.
Exemples de thèmes (non exhaustif, sois créatif !) :
| Thème | Description |
|---|---|
| 🧠 PsyBot | Assistant bien-être mental (avec disclaimers appropriés) |
| 💪 CoachFit | Coach sportif personnalisé |
| 🥗 NutriGuide | Conseiller nutrition et alimentation |
| 👵 SeniorCompanion | Interface adaptée aux personnes âgées (accessibilité++) |
| 💕 eGirl/eBoy Companion | Assistant avec personnalité anime/gaming |
| 📚 StudyBuddy | Tuteur scolaire adaptatif |
| 💼 CareerCoach | Orientation et conseils professionnels |
| ✍️ WriterMuse | Assistant d'écriture créative |
| 🎮 GameMaster | Maître de jeu pour JDR/roleplay |
| 🐱 PetAdvisor | Conseils pour propriétaires d'animaux |
| 👨💻 DevMentor | Assistant pair-programming |
| 🌱 EcoGuide | Conseiller développement durable |
| 👶 ParentHelper | Assistant pour jeunes parents |
| 🎨 ArtCritic | Conseiller artistique et créatif |
| 📈 InvestorBuddy | Assistant finances personnelles (avec disclaimers) |
Exigences :
- Personnalité cohérente de l'IA (ton, vocabulaire, utilisation d'émojis adaptés)
- Design/branding adapté au thème choisi (couleurs, typographie, iconographie)
- Instructions système pré-configurées selon le contexte thématique
- Expérience utilisateur pensée pour le public cible
2.3 Page Marketing (Landing Page)
Oui, tu vas faire semblant de vendre ton truc comme une vraie startup 💰
Une page d'accueil marketing professionnelle est OBLIGATOIRE. Elle doit contenir :
- Hero section – Accroche percutante + Call-to-Action principal
- Présentation des fonctionnalités – Avec icônes ou illustrations
- Section pricing – Minimum 3 formules fictives (Free / Pro / Enterprise ou équivalent)
- Témoignages – Fictifs mais crédibles et cohérents avec ton thème
- FAQ – Au moins 5 questions fréquentes pertinentes
- Footer complet – Liens légaux, réseaux sociaux fictifs, contact
Bonus : Section "À propos", blog fictif, comparatif avec la concurrence...
2.4 SEO & Accessibilité
Un site que personne ne trouve et que personne ne peut utiliser, c'est un échec cosmique ╭∩╮(︶︿︶)╭∩╮
SEO (obligatoire)
- Balises meta complètes (title, description, og:tags pour le partage social)
- Structure sémantique HTML correcte (h1-h6 hiérarchisés logiquement)
- Fichier
sitemap.xmlgénéré - URLs propres et descriptives (pas de
/page?id=123) - Performance acceptable (Core Web Vitals)
Accessibilité (obligatoire)
- Score Lighthouse Accessibility ≥ 85 (screenshot obligatoire dans le rapport)
- Navigation au clavier complète (tous les éléments interactifs accessibles)
- Labels ARIA appropriés sur les composants custom
- Contrastes de couleurs conformes WCAG 2.1 niveau AA
- Textes alternatifs sur toutes les images
- Focus visible sur les éléments interactifs
2.5 Conformité Légale
Le RGPD te regarde dormir 👁️👁️
Éléments obligatoires à implémenter :
Mentions légales (page dédiée)
- Identification de l'éditeur (fictif mais complet)
- Hébergeur
- Directeur de publication
- Contact
Politique de confidentialité (page dédiée)
- Types de données collectées
- Finalités du traitement
- Base légale (consentement, intérêt légitime, etc.)
- Durée de conservation
- Droits des utilisateurs (accès, rectification, suppression, portabilité)
- Transferts hors UE (si applicable avec les API LLM)
Cookie Banner
- Bandeau de consentement conforme RGPD
- Consentement explicite (pas de cases pré-cochées)
- Option de refus aussi accessible que l'acceptation
- Possibilité de modifier ses choix
Conformité AI Act
- Transparence : informer clairement que l'utilisateur interagit avec une IA
- Disclaimer visible sur les limites du système (hallucinations possibles, ne remplace pas un professionnel)
- Information sur les modèles utilisés
- Mention que les conversations peuvent être utilisées pour améliorer le service (si applicable)
3. Évaluation
3.1 Grille d'évaluation
Une grille d'évaluation détaillée est fournie séparément. Elle comprend :
- 2 Acquis d'Apprentissage (AA) qui doivent TOUS être validés pour réussir
- 6 critères de maîtrise notés sur 100 points au total
Note finale = 50 points (seuil de réussite) + points de maîtrise pondérés sur 50 points
4. Modalités de rendu
4.1 Livrables attendus
-
Code source sur GitHub (repository public)
-
Projet hébergé – L'application doit être déployée et fonctionnelle en ligne (Heroku, Railway, VPS, ou autre)
-
Rapport PDF (voir structure section 8)
- Format professionnel
- Screenshots de qualité
- Diagramme UML de la base de données
4.2 Deadline
⏰ Jeudi 18 décembre 2025, 17h15
Aucun retard accepté. Le repo GitHub doit être public, le projet hébergé fonctionnel, et le rapport déposé sur Teams AVANT la deadline.
5. Fonctionnalités supplémentaires (pour viser l'excellence)
Ces fonctionnalités peuvent faire grimper ta note au-delà du 15/20 :
- Dashboard analytique : statistiques d'utilisation, nombre de tokens consommés, coûts estimés, graphiques de suivi
- Arbre de conversations : modification d'un message de la conversation, bouton fork, relancer la génération d'un message
- Mode Thinking : Afficher la trace de réflexion de l'assistant
- Outils LLM intégrés : calculatrice, recherche web, analyse de documents
- Gestion avancée du contexte : résumé automatique, limitation intelligente des tokens
- Upload et analyse d'images : intégration avec des modèles vision
- Génération d'images : intégration via OpenRouter (utiliser des modèles économiques comme
gpt-image-mini– moins de 1 cent par image) - Voice input/output : reconnaissance et synthèse vocale
- Mode sombre/clair : toggle avec persistance des préférences
- Multilingue : interface traduite en plusieurs langues
- Export de conversations : PDF, Markdown, JSON
- Tes propres idées ! : mode canvas, écriture et exécution de code dans le navigateur, agents autonomes, conversation à plusieurs... Surprends-moi ! La créativité sera récompensée.
6. Ressources recommandées
RGPD & Conformité
AI Act
Accessibilité
SEO
7. Structure du rapport PDF
# [Nom de ton app] – Rapport de Projet
## 1. Introduction
- Contexte et objectifs
- Périmètre du projet
- Technologies utilisées
## 2. Thématisation & Identité
### 2.1 Thème choisi
- Justification du choix
- Public cible identifié
- Analyse des besoins du public cible
### 2.2 Personnalité de l'IA
- Ton et style de communication définis
- Instructions système créées
- Exemples de réponses typiques
### 2.3 Design & Branding
- Charte graphique (couleurs, typographie)
- Choix d'iconographie
- Screenshots de l'interface
## 3. Architecture et Conception
### 3.1 Base de données
- Diagramme UML (OBLIGATOIRE et conforme aux standards)
- Explication des tables et relations
- Contraintes et règles d'intégrité
### 3.2 Architecture logicielle
- Organisation du code Laravel
- Structure des composants Vue.js
- Services et patterns utilisés
## 4. Fonctionnalités développées
### 4.1 Fonctionnalités obligatoires
- Description détaillée de chaque fonctionnalité
- Screenshots annotés
- Défis techniques et solutions
### 4.2 Fonctionnalités bonus (si applicable)
- Liste des extras implémentés
- Valeur ajoutée pour l'utilisateur
## 5. Page Marketing
### 5.1 Stratégie marketing
- Positionnement choisi
- Arguments de vente principaux
- Structure de la landing page
### 5.2 Contenu créé
- Screenshots des différentes sections
- Pricing fictif et justification
- Témoignages créés
## 6. SEO & Performance
### 6.1 Stratégie SEO
- Balises meta implémentées (liste complète)
- Structure sémantique HTML
- Sitemap et robots.txt
- URLs optimisées
### 6.2 Performance
- Score Lighthouse Performance (screenshot)
- Optimisations réalisées
- Core Web Vitals
## 7. Accessibilité
### 7.1 Standards suivis
- Niveau WCAG visé (AA minimum)
- Outils de test utilisés
### 7.2 Implémentations concrètes
- Navigation clavier (comment ça fonctionne)
- ARIA labels utilisés (exemples de code)
- Gestion des contrastes
- Adaptations spécifiques au thème/public cible
- Score Lighthouse Accessibility (screenshot OBLIGATOIRE)
## 8. Conformité Légale
### 8.1 RGPD
- Données collectées et finalités (tableau)
- Base légale de chaque traitement
- Droits des utilisateurs : comment sont-ils implémentés ?
- Mesures techniques de protection
- Durées de conservation définies
### 8.2 AI Act
- Classification du système (risque limité/autre)
- Obligations de transparence : comment sont-elles respectées ?
- Informations fournies aux utilisateurs
- Disclaimers implémentés
### 8.3 Implémentation technique
- Cookie consent : solution utilisée et fonctionnement
- Pages légales créées (screenshots)
- Gestion du consentement dans le code
## 9. Tests et Qualité
- Stratégie de tests
- Tests Dusk implémentés
- Résultats et couverture
## 10. Difficultés et Solutions
- Problèmes rencontrés
- Solutions apportées
- Ce qui pourrait être amélioré
## 11. Utilisation des outils IA
- Outils utilisés (ChatGPT, Claude, Copilot, etc.)
- Pour quelles tâches ? (code, rapport, debug, design)
- Comment avez-vous validé/vérifié les outputs ?
- Réflexion critique sur l'utilisation de l'IA
## 12. Conclusion
- Bilan du projet
- Apprentissages clés
- Perspectives d'amélioration
Rappel final : Ce n'est pas la quantité de Red Bull consommé qui fera la différence, mais la qualité de ton travail. Montre que tu maîtrises les concepts, pas juste que tu sais copier-coller.
Bonne chance, tu vas en avoir besoin ! 🤖🚀