Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bibliothèque de Prompts - DDEC 54-55</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .sidebar { | |
| scrollbar-width: thin; | |
| scrollbar-color: #4b5563 #1f2937; | |
| } | |
| .sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .sidebar::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| .sidebar::-webkit-scrollbar-thumb { | |
| background-color: #4b5563; | |
| border-radius: 6px; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .markdown-content h2 { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-top: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: #1e40af; | |
| } | |
| .markdown-content h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-top: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| color: #1e40af; | |
| } | |
| .markdown-content p { | |
| margin-bottom: 1rem; | |
| line-height: 1.625; | |
| } | |
| .markdown-content ul, .markdown-content ol { | |
| margin-bottom: 1rem; | |
| padding-left: 1.5rem; | |
| } | |
| .markdown-content li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .markdown-content pre { | |
| background-color: #f3f4f6; | |
| border-radius: 0.375rem; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| overflow-x: auto; | |
| } | |
| .markdown-content code { | |
| background-color: #f3f4f6; | |
| padding: 0.2rem 0.4rem; | |
| border-radius: 0.25rem; | |
| font-family: monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-cross text-3xl mr-3"></i> | |
| <div> | |
| <h1 class="text-2xl font-bold">Bibliothèque de Prompts IA</h1> | |
| <p class="text-blue-100">Guide pratique pour l'Enseignement Catholique - DDEC 54-55</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher un prompt..." class="bg-white bg-opacity-20 placeholder-blue-100 text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-300 w-full md:w-64"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-blue-100"></i> | |
| </div> | |
| <button class="bg-white text-blue-800 font-semibold py-2 px-4 rounded-full hover:bg-blue-100 transition"> | |
| <i class="fas fa-user mr-2"></i>Connexion | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-8 flex flex-col lg:flex-row"> | |
| <!-- Sidebar --> | |
| <aside class="w-full lg:w-1/4 lg:pr-6 mb-8 lg:mb-0"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden sidebar h-[calc(100vh-180px)] overflow-y-auto"> | |
| <div class="p-4 bg-blue-800 text-white"> | |
| <h2 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-list-ul mr-2"></i> Catégories | |
| </h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-graduation-cap mr-2 text-blue-600"></i> Techniques de Prompt | |
| </h3> | |
| <ul class="space-y-1 ml-2"> | |
| <li><a href="#" class="text-blue-600 hover:text-blue-800 flex items-center" data-category="zero-shot"><i class="fas fa-bolt mr-2 text-xs"></i> Zero-Shot</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="few-shot"><i class="fas fa-copy mr-2 text-xs"></i> Few-Shot</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="recherche"><i class="fas fa-search mr-2 text-xs"></i> Recherche</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="creative"><i class="fas fa-pen-fancy mr-2 text-xs"></i> Créatif</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="context"><i class="fas fa-expand mr-2 text-xs"></i> Contextuel</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="iteratif"><i class="fas fa-redo mr-2 text-xs"></i> Itératif</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="cot"><i class="fas fa-link mr-2 text-xs"></i> Chain of Thought</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="chaining"><i class="fas fa-project-diagram mr-2 text-xs"></i> Prompt Chaining</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tot"><i class="fas fa-tree mr-2 text-xs"></i> Tree of Thought</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="roleplay"><i class="fas fa-theater-masks mr-2 text-xs"></i> Role Playing</a></li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-sitemap mr-2 text-blue-600"></i> Frameworks | |
| </h3> | |
| <ul class="space-y-1 ml-2"> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="ape"><i class="fas fa-bullseye mr-2 text-xs"></i> APE</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="bab"><i class="fas fa-arrows-alt-h mr-2 text-xs"></i> BAB</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="care"><i class="fas fa-hands-helping mr-2 text-xs"></i> CARE</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="cidi"><i class="fas fa-tasks mr-2 text-xs"></i> CIDI</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="coast"><i class="fas fa-ship mr-2 text-xs"></i> COAST</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="costar"><i class="fas fa-star mr-2 text-xs"></i> COSTAR</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="era"><i class="fas fa-user-tie mr-2 text-xs"></i> ERA</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="fab"><i class="fas fa-chart-line mr-2 text-xs"></i> FAB</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="focus"><i class="fas fa-bullseye mr-2 text-xs"></i> FOCUS</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="race"><i class="fas fa-running mr-2 text-xs"></i> RACE</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="relic"><i class="fas fa-shield-alt mr-2 text-xs"></i> RELIC</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="risen"><i class="fas fa-mountain mr-2 text-xs"></i> RISEN</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="rodes"><i class="fas fa-check-circle mr-2 text-xs"></i> RODES</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="roses"><i class="fas fa-rose mr-2 text-xs"></i> ROSES</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="rtf"><i class="fas fa-file-alt mr-2 text-xs"></i> RTF</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="spar"><i class="fas fa-fist-raised mr-2 text-xs"></i> SPAR</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="spear"><i class="fas fa-bullhorn mr-2 text-xs"></i> SPEAR</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tag"><i class="fas fa-tag mr-2 text-xs"></i> TAG</a></li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-users mr-2 text-blue-600"></i> Par Public | |
| </h3> | |
| <ul class="space-y-1 ml-2"> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="directeurs"><i class="fas fa-user-tie mr-2 text-xs"></i> Directeurs</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="enseignants"><i class="fas fa-chalkboard-teacher mr-2 text-xs"></i> Enseignants</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="pastorale"><i class="fas fa-pray mr-2 text-xs"></i> Pastorale</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="inclusion"><i class="fas fa-heart mr-2 text-xs"></i> Inclusion</a></li> | |
| <li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="secretaires"><i class="fas fa-keyboard mr-2 text-xs"></i> Secrétaires</a></li> | |
| </ul> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> | |
| <h3 class="font-semibold text-blue-800 mb-2 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Astuce du jour | |
| </h3> | |
| <p class="text-sm text-gray-700">Utilisez le framework CARE pour structurer vos prompts : Contexte, Action, Résultat, Exemple.</p> | |
| <button class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <main class="w-full lg:w-3/4"> | |
| <!-- Featured Prompts --> | |
| <section class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-star mr-2 text-yellow-500"></i> Prompts en vedette | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-white text-blue-600 border border-blue-600 px-3 py-1 rounded-full text-sm hover:bg-blue-50 transition"> | |
| <i class="fas fa-random mr-1"></i> Aléatoire | |
| </button> | |
| <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-1"></i> Nouveau | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Prompt Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Zero-Shot</span> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Indicateurs pour piloter un projet pédagogique</h3> | |
| <p class="text-gray-600 text-sm mb-4">"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?"</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500 flex items-center"> | |
| <i class="fas fa-user-tie mr-1"></i> Directeur | |
| </span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">CARE</span> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Stratégie pour élèves à besoins particuliers</h3> | |
| <p class="text-gray-600 text-sm mb-4">Contexte, Action, Résultat et Exemple pour accompagner les élèves en APC.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500 flex items-center"> | |
| <i class="fas fa-heart mr-1"></i> Inclusion | |
| </span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">ROSES</span> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Projet pastoral itinérant</h3> | |
| <p class="text-gray-600 text-sm mb-4">Rôle, Objectif, Scénario, Solution attendue et Étapes pour un projet innovant.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500 flex items-center"> | |
| <i class="fas fa-pray mr-1"></i> Pastorale | |
| </span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Prompt Details Section --> | |
| <section class="bg-white rounded-xl shadow-md overflow-hidden mb-8 fade-in" id="prompt-details"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded mb-2 inline-block">Zero-Shot</span> | |
| <h2 class="text-2xl font-bold text-gray-800">Indicateurs pour piloter un projet pédagogique</h2> | |
| <p class="text-gray-600">Pour les directeurs d'établissement</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-t border-b border-gray-200 py-4 mb-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-tie text-blue-600 mr-2"></i> | |
| <span class="text-sm text-gray-700">Directeur d'établissement</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-blue-600 mr-2"></i> | |
| <span class="text-sm text-gray-700">2 min de lecture</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-alt text-blue-600 mr-2"></i> | |
| <span class="text-sm text-gray-700">Ajouté le 15/06/2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="markdown-content"> | |
| <h3>Description</h3> | |
| <p>Cette technique de prompt "Zero-Shot" permet d'obtenir une réponse factuelle et rapide sans fournir d'exemple préalable. Elle est idéale pour les questions directes nécessitant une expertise spécifique.</p> | |
| <h3>Exemple de Prompt</h3> | |
| <pre class="bg-gray-100 p-4 rounded-lg">"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?"</pre> | |
| <h3>Réponse attendue</h3> | |
| <p>L'IA devrait fournir une liste d'indicateurs pertinents tels que :</p> | |
| <ul class="list-disc pl-5"> | |
| <li>Taux de réussite aux évaluations</li> | |
| <li>Indicateurs de bien-être scolaire</li> | |
| <li>Participation aux activités pastorales</li> | |
| <li>Taux d'absentéisme</li> | |
| <li>Résultats aux examens nationaux</li> | |
| <li>Indicateurs d'inclusion</li> | |
| <li>Retours des familles</li> | |
| </ul> | |
| <h3>Variantes pour d'autres rôles</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-blue-800">Enseignant en maternelle</h4> | |
| <pre class="bg-white p-2 rounded text-sm mt-2">"Quels sont les signes d'alerte d'un trouble du langage oral chez un élève de grande section ?"</pre> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-blue-800">Formateur</h4> | |
| <pre class="bg-white p-2 rounded text-sm mt-2">"Comment expliquer simplement le concept d'IA générative à des enseignants du 1er degré ?"</pre> | |
| </div> | |
| </div> | |
| <h3>Conseils d'utilisation</h3> | |
| <p>Pour optimiser ce type de prompt :</p> | |
| <ol class="list-decimal pl-5"> | |
| <li>Être précis dans la formulation de la question</li> | |
| <li>Spécifier le contexte si nécessaire (niveau scolaire, type d'établissement)</li> | |
| <li>Demander un format de réponse spécifique si besoin (liste, tableau, etc.)</li> | |
| </ol> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-200"> | |
| <h3 class="text-lg font-semibold mb-3">Tags associés</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Pilotage</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Indicateurs</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Collège</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Directeur</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Related Prompts --> | |
| <section> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-link mr-2 text-blue-600"></i> Prompts associés | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Related Prompt 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Few-Shot</span> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Évaluation de dictée</h3> | |
| <p class="text-gray-600 text-sm mb-4">"Voici une évaluation de dictée pour des élèves de CE2. Crée une évaluation similaire pour des CM1..."</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500 flex items-center"> | |
| <i class="fas fa-chalkboard-teacher mr-1"></i> Enseignant | |
| </span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Related Prompt 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">RTF</span> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Synthèse stratégique</h3> | |
| <p class="text-gray-600 text-sm mb-4">Rôle, Tâche, Format pour une synthèse à destination de l'Évêque.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500 flex items-center"> | |
| <i class="fas fa-user-tie mr-1"></i> Directeur | |
| </span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Related Prompt 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">BAB</span> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Participation des parents</h3> | |
| <p class="text-gray-600 text-sm mb-4">Avant/Après/Pont pour améliorer la participation aux temps forts pastoraux.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500 flex items-center"> | |
| <i class="fas fa-pray mr-1"></i> Pastorale | |
| </span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Bibliothèque de Prompts</h3> | |
| <p class="text-gray-400">Guide pratique des prompts IA pour l'Enseignement Catholique. Outils concrets pour les acteurs de la DDEC 54-55.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Ressources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Exemples</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="text-gray-400">DDEC 54-55</li> | |
| <li class="text-gray-400">[email protected]</li> | |
| <li class="text-gray-400">03 83 00 00 00</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Suivez-nous</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 DDEC 54-55. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple interactivity for the demo | |
| document.querySelectorAll('[data-category]').forEach(item => { | |
| item.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const category = this.getAttribute('data-category'); | |
| // Update active state in sidebar | |
| document.querySelectorAll('[data-category]').forEach(link => { | |
| link.classList.remove('text-blue-600'); | |
| link.classList.add('text-gray-700'); | |
| }); | |
| this.classList.remove('text-gray-700'); | |
| this.classList.add('text-blue-600'); | |
| // Simulate loading content | |
| const promptDetails = document.getElementById('prompt-details'); | |
| promptDetails.classList.remove('fade-in'); | |
| void promptDetails.offsetWidth; // Trigger reflow | |
| promptDetails.classList.add('fade-in'); | |
| // Update content based on category (in a real app, this would be fetched from a database) | |
| let title = ""; | |
| let description = ""; | |
| let example = ""; | |
| switch(category) { | |
| case "zero-shot": | |
| title = "Zero-Shot Prompting"; | |
| description = "Technique pour poser une question directe sans fournir d'exemple. Idéal pour obtenir des réponses factuelles rapides."; | |
| example = '"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?"'; | |
| break; | |
| case "few-shot": | |
| title = "Few-Shot Prompting"; | |
| description = "Technique qui fournit un ou plusieurs exemples avant de demander à l'IA de produire un résultat similaire. Excellente pour le style ou le format."; | |
| example = '"Voici une évaluation de dictée pour des élèves de CE2. Crée une évaluation similaire pour des CM1 sur l\'accord sujet-verbe : « [dictée] »"'; | |
| break; | |
| case "ape": | |
| title = "Framework APE"; | |
| description = "Action / Purpose / Expectation - Structurez vos prompts en précisant l'action, l'objectif et les attentes."; | |
| example = 'Action : Rédiger un support de formation\nObjectif : Outiller les enseignants sur l\'IA\nAttentes : Inclure théorie, études de cas et fiche mémo'; | |
| break; | |
| case "bab": | |
| title = "Framework BAB"; | |
| description = "Before / After / Bridge - Identifiez un problème actuel, un objectif futur et les étapes pour y parvenir."; | |
| example = 'Avant : Participation faible des parents\nAprès : 70% de participation\nPont : Plan d\'action en 5 étapes'; | |
| break; | |
| default: | |
| title = "Framework " + category.toUpperCase(); | |
| description = "Description détaillée du framework " + category.toUpperCase() + " et de son utilisation dans le contexte de l'enseignement catholique."; | |
| example = 'Exemple de prompt utilisant le framework ' + category.toUpperCase(); | |
| } | |
| promptDetails.querySelector('h2').textContent = title; | |
| promptDetails.querySelector('.markdown-content h3:first-of-type').nextElementSibling.textContent = description; | |
| promptDetails.querySelector('pre').textContent = example; | |
| }); | |
| }); | |
| // Simulate clicking on the first category to load initial content | |
| document.querySelector('[data-category="zero-shot"]').click(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pchevallot/cds" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |