|
|
<!DOCTYPE html> |
|
|
<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; |
|
|
} |
|
|
.badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
padding: 0.25rem 0.5rem; |
|
|
border-radius: 9999px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
margin-right: 0.5rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
.badge-blue { |
|
|
background-color: #dbeafe; |
|
|
color: #1e40af; |
|
|
} |
|
|
.badge-green { |
|
|
background-color: #dcfce7; |
|
|
color: #166534; |
|
|
} |
|
|
.badge-purple { |
|
|
background-color: #f3e8ff; |
|
|
color: #7e22ce; |
|
|
} |
|
|
.badge-yellow { |
|
|
background-color: #fef9c3; |
|
|
color: #854d0e; |
|
|
} |
|
|
.badge-red { |
|
|
background-color: #fee2e2; |
|
|
color: #991b1b; |
|
|
} |
|
|
.badge-indigo { |
|
|
background-color: #e0e7ff; |
|
|
color: #4338ca; |
|
|
} |
|
|
.badge-pink { |
|
|
background-color: #fce7f3; |
|
|
color: #be185d; |
|
|
} |
|
|
.badge-gray { |
|
|
background-color: #f3f4f6; |
|
|
color: #4b5563; |
|
|
} |
|
|
.example-card { |
|
|
border-left: 4px solid #3b82f6; |
|
|
background-color: #f8fafc; |
|
|
padding: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
border-radius: 0.375rem; |
|
|
} |
|
|
.example-card h4 { |
|
|
font-weight: 600; |
|
|
color: #1e40af; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
.principle-card { |
|
|
background-color: #eff6ff; |
|
|
border-radius: 0.5rem; |
|
|
padding: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
.principle-card h4 { |
|
|
font-weight: 600; |
|
|
color: #1e40af; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8 flex flex-col lg:flex-row"> |
|
|
|
|
|
<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> One/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 (QQOQPC)</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> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tcrei"><i class="fas fa-list-ol mr-2 text-xs"></i> TCREI</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="metaprompt"><i class="fas fa-comment-dots mr-2 text-xs"></i> Méta-Prompting</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="translation"><i class="fas fa-language mr-2 text-xs"></i> Traduction Contextuelle</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="multimodal"><i class="fas fa-images mr-2 text-xs"></i> Multimodal</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="density"><i class="fas fa-layer-group mr-2 text-xs"></i> Chaîne de Densité</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="expert"><i class="fas fa-user-tie mr-2 text-xs"></i> Instruction/Rôle Expert</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="template"><i class="fas fa-stamp mr-2 text-xs"></i> Remplissage de Templates</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="summary"><i class="fas fa-filter mr-2 text-xs"></i> Résumé Spécifique</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 class="w-full lg:w-3/4"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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">ZERO-SHOT PROMPTING – "Pose une question directe"</h2> |
|
|
<p class="text-gray-600">Technique de base pour obtenir des réponses factuelles rapides</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-graduation-cap text-blue-600 mr-2"></i> |
|
|
<span class="text-sm text-gray-700">Technique de Prompt</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">Mis à jour le 15/06/2023</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="markdown-content"> |
|
|
<div class="principle-card"> |
|
|
<h4>Principe pédagogique</h4> |
|
|
<p>Obtenir une réponse factuelle, rapide, sans fournir d'exemple. Idéal pour les questions directes nécessitant une expertise spécifique.</p> |
|
|
</div> |
|
|
|
|
|
<h3>Exemples DDEC</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
<div class="example-card"> |
|
|
<h4>Directeur d'établissement</h4> |
|
|
<pre>"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?"</pre> |
|
|
</div> |
|
|
<div class="example-card"> |
|
|
<h4>Enseignant en maternelle</h4> |
|
|
<pre>"Quels sont les signes d'alerte d'un trouble du langage oral chez un élève de grande section ?"</pre> |
|
|
</div> |
|
|
<div class="example-card"> |
|
|
<h4>Formateur</h4> |
|
|
<pre>"Comment expliquer simplement le concept d'IA générative à des enseignants du 1er degré ?"</pre> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3>Conseils d'utilisation</h3> |
|
|
<div class="bg-blue-50 p-4 rounded-lg mb-4"> |
|
|
<ul class="list-disc pl-5 space-y-2"> |
|
|
<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> |
|
|
<li>Utiliser pour des questions factuelles ou des demandes simples</li> |
|
|
<li>Éviter pour des sujets complexes nécessitant des exemples ou un raisonnement</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<h3>Variantes pour d'autres techniques</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">One/Few-Shot</h4> |
|
|
<p class="text-sm">"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] »"</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h4 class="font-semibold text-blue-800">Prompt de recherche</h4> |
|
|
<p class="text-sm">"Quels sont les derniers textes parus sur les PIAL dans l'Enseignement Catholique ?"</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3>Tags associés</h3> |
|
|
<div class="flex flex-wrap"> |
|
|
<span class="badge badge-blue">Directeur</span> |
|
|
<span class="badge badge-blue">Enseignant</span> |
|
|
<span class="badge badge-blue">Formateur</span> |
|
|
<span class="badge badge-green">Factuel</span> |
|
|
<span class="badge badge-green">Rapide</span> |
|
|
<span class="badge badge-purple">Technique de base</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<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> Techniques associées |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<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">One/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">ONE-SHOT / FEW-SHOT PROMPTING</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">"Donne un exemple, puis demande le même format"</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> Technique |
|
|
</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 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">QQOQPC</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">EXPANSION CONTEXTUELLE</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">"Précise le besoin de manière exhaustive"</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-gray-500 flex items-center"> |
|
|
<i class="fas fa-expand mr-1"></i> Technique |
|
|
</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 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">TCREI</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">Cadre structuré TCREI</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Task, Context, Reference, Evaluate, Iterate</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-gray-500 flex items-center"> |
|
|
<i class="fas fa-list-ol mr-1"></i> Framework |
|
|
</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 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">contact@ddec5455.fr</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 principle = ""; |
|
|
let examples = []; |
|
|
let tags = []; |
|
|
|
|
|
switch(category) { |
|
|
case "zero-shot": |
|
|
title = "ZERO-SHOT PROMPTING – \"Pose une question directe\""; |
|
|
description = "Technique de base pour obtenir des réponses factuelles rapides"; |
|
|
principle = "Obtenir une réponse factuelle, rapide, sans fournir d'exemple. Idéal pour les questions directes nécessitant une expertise spécifique."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Directeur d'établissement", |
|
|
prompt: "\"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant en maternelle", |
|
|
prompt: "\"Quels sont les signes d'alerte d'un trouble du langage oral chez un élève de grande section ?\"" |
|
|
}, |
|
|
{ |
|
|
role: "Formateur", |
|
|
prompt: "\"Comment expliquer simplement le concept d'IA générative à des enseignants du 1er degré ?\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Directeur", color: "blue"}, |
|
|
{text: "Enseignant", color: "blue"}, |
|
|
{text: "Formateur", color: "blue"}, |
|
|
{text: "Factuel", color: "green"}, |
|
|
{text: "Rapide", color: "green"}, |
|
|
{text: "Technique de base", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "few-shot": |
|
|
title = "ONE-SHOT / FEW-SHOT PROMPTING – \"Donne un exemple, puis demande le même format\""; |
|
|
description = "Technique d'apprentissage par imitation"; |
|
|
principle = "L'IA apprend par imitation du style ou de la structure. Fournir un ou plusieurs exemples avant de demander à l'IA de produire un résultat similaire. Excellente pour le style ou le format."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Enseignant", |
|
|
prompt: "\"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] »\"" |
|
|
}, |
|
|
{ |
|
|
role: "Chargé de mission pastoral", |
|
|
prompt: "\"À partir de ce message d'invitation à une retraite spirituelle, rédige une invitation similaire pour les familles de 6e : [message d'invitation]\"" |
|
|
}, |
|
|
{ |
|
|
role: "Responsable d'établissement", |
|
|
prompt: "\"Rédige un mail de remerciement au prêtre accompagnateur, en gardant un ton à la fois chaleureux et professionnel : [exemple de mail]\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Enseignant", color: "blue"}, |
|
|
{text: "Pastorale", color: "blue"}, |
|
|
{text: "Direction", color: "blue"}, |
|
|
{text: "Imitation", color: "green"}, |
|
|
{text: "Structure", color: "green"}, |
|
|
{text: "Style", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "recherche": |
|
|
title = "PROMPTING DE RECHERCHE – \"Obtenir des données précises et récentes\""; |
|
|
description = "Adapté à Perplexity ou autres outils de recherche"; |
|
|
principle = "Cibler une requête pointue, réglementaire ou scientifique. Particulièrement utile pour obtenir des informations actualisées ou des références précises."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Directeur diocésain", |
|
|
prompt: "\"Quels sont les derniers textes parus sur les PIAL dans l'Enseignement Catholique ?\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant en lycée", |
|
|
prompt: "\"Quels sont les derniers ajustements du programme de philosophie en terminale en 2025 ?\"" |
|
|
}, |
|
|
{ |
|
|
role: "Chargé de mission", |
|
|
prompt: "\"Quels exemples d'IA sont utilisés aujourd'hui dans des projets pédagogiques d'autres DDEC en France ?\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Recherche", color: "blue"}, |
|
|
{text: "Actualité", color: "blue"}, |
|
|
{text: "Réglementation", color: "blue"}, |
|
|
{text: "Précis", color: "green"}, |
|
|
{text: "Récent", color: "green"}, |
|
|
{text: "Perplexity", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "creative": |
|
|
title = "ÉCRITURE CRÉATIVE – \"Génère un contenu original avec style et contraintes\""; |
|
|
description = "Pour générer des textes inédits et adaptés"; |
|
|
principle = "Générer un texte inédit à destination d'un public identifié, avec des contraintes de style, de ton ou de format."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "\"Rédige un discours de rentrée à destination des parents en lien avec le projet éducatif de l'établissement.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant", |
|
|
prompt: "\"Rédige une lettre fictive d'un poilu pour un travail d'expression écrite en 3e.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Responsable communication", |
|
|
prompt: "\"Crée un post Facebook pour valoriser les élèves qui s'engagent dans l'animation pastorale.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Création", color: "blue"}, |
|
|
{text: "Original", color: "blue"}, |
|
|
{text: "Style", color: "blue"}, |
|
|
{text: "Contraintes", color: "green"}, |
|
|
{text: "Public cible", color: "green"}, |
|
|
{text: "Expression", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "context": |
|
|
title = "EXPANSION CONTEXTUELLE (QQOQPC) – \"Précise le besoin de manière exhaustive\""; |
|
|
description = "QQOQPC : Quoi, Qui, Où, Quand, Pourquoi, Comment"; |
|
|
principle = "Obtenir une réponse contextualisée, éviter les généralités. La méthode QQOQPC permet de structurer une demande en précisant tous les aspects contextuels."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Directeur", |
|
|
prompt: "\"Rédige une note (Quoi) pour les parents d'élèves (Qui) du collège Sainte-Marie (Où), expliquant l'intégration d'un module d'initiation à l'IA (Pourquoi) à partir de janvier 2025 (Quand), en lien avec le projet éducatif (Comment).\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant", |
|
|
prompt: "\"Propose un plan de séance (Quoi) en SVT (Matière) pour une classe de 5e (Qui) dans un établissement rural (Où) sur le thème de la biodiversité (Pourquoi) avec une activité en extérieur (Comment).\"" |
|
|
}, |
|
|
{ |
|
|
role: "Chargé de mission pastorale", |
|
|
prompt: "\"Prépare une fiche d'activité (Quoi) à destination des élèves de 4e (Qui) du collège Saint-Jean à Verdun (Où), pour un temps fort de réflexion sur le thème 'Pèlerins d'espérance, sur le chemin de la paix' (Pourquoi), prévu lors du temps de l'Avent 2025 (Quand). L'activité devra combiner une vidéo inspirante, un temps de silence et une expression créative collective (Comment).\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Contextuel", color: "blue"}, |
|
|
{text: "QQOQPC", color: "blue"}, |
|
|
{text: "Structuré", color: "blue"}, |
|
|
{text: "Complet", color: "green"}, |
|
|
{text: "Précis", color: "green"}, |
|
|
{text: "Méthodologie", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "iteratif": |
|
|
title = "PROMPTING ITÉRATIF – \"Approfondir progressivement un sujet\""; |
|
|
description = "Exploration pas à pas d'un sujet complexe"; |
|
|
principle = "Explorer un sujet complexe ou technique en plusieurs étapes, comme dans une démarche d'enquête ou de recherche. Chaque prompt s'appuie sur la réponse précédente pour approfondir."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Formateur DDEC", |
|
|
prompt: "\"Quelles sont les principales compétences numériques attendues pour les élèves de cycle 4 ?\" → \"Comment évaluer ces compétences dans un cadre pastoral ?\" → \"Quels outils numériques sont adaptés à cet usage dans un établissement rural ?\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant de lycée pro", |
|
|
prompt: "\"Quels sont les risques de cybersécurité pour un compte scolaire partagé ?\" → \"Quelles bonnes pratiques peuvent être mises en place avec des élèves de seconde ?\"" |
|
|
}, |
|
|
{ |
|
|
role: "Chargé de mission innovation", |
|
|
prompt: "\"Quels usages d'IA sont déjà expérimentés dans les établissements catholiques en France ?\" → \"Comment sont-ils évalués ?\" → \"Quels résultats ont été publiés ?\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Itératif", color: "blue"}, |
|
|
{text: "Approfondissement", color: "blue"}, |
|
|
{text: "Complexe", color: "blue"}, |
|
|
{text: "Étapes", color: "green"}, |
|
|
{text: "Recherche", color: "green"}, |
|
|
{text: "Enquête", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "cot": |
|
|
title = "CHAIN OF THOUGHT (CHAÎNE DE PENSÉE - CoT) – \"Explique étape par étape\""; |
|
|
description = "Obtenir le raisonnement avant la réponse"; |
|
|
principle = "Obtenir le raisonnement avant la réponse, pour comprendre comment l'IA structure sa pensée. Particulièrement utile pour les problèmes complexes nécessitant une démonstration ou une explication pédagogique."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Responsable informatique", |
|
|
prompt: "\"Voici une grille de compétences numériques pour les enseignants. Propose une stratégie d'auto-évaluation à partir de cette grille. Explique étape par étape.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Élève en terminale", |
|
|
prompt: "\"Résous cet exercice de probabilités. Explique chaque étape de ton raisonnement.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant de SVT", |
|
|
prompt: "\"Pourquoi l'usage excessif de pesticides réduit-il la biodiversité ? Donne une explication pas à pas.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Raisonnement", color: "blue"}, |
|
|
{text: "Étapes", color: "blue"}, |
|
|
{text: "Pédagogique", color: "blue"}, |
|
|
{text: "Explication", color: "green"}, |
|
|
{text: "Démonstration", color: "green"}, |
|
|
{text: "Complexe", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "chaining": |
|
|
title = "PROMPT CHAINING – \"Découper une tâche complexe\""; |
|
|
description = "Enchaînement de prompts pour un projet complet"; |
|
|
principle = "Traiter un projet en plusieurs étapes logiques, chaque prompt s'appuyant sur la réponse précédente. Idéal pour les projets complexes nécessitant une progression méthodique."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "Prompt 1 : \"Décris les objectifs de notre projet de jardin pédagogique.\"\nPrompt 2 : \"Sur cette base, propose une fiche action par classe participante.\"\nPrompt 3 : \"Nous sommes à Longwy en Meurthe-et-Moselle. Identifie les partenaires locaux à solliciter pour appuyer le projet.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant", |
|
|
prompt: "Prompt 1 : \"Propose une séquence d'histoire sur la Révolution française pour une classe de CM1.\"\nPrompt 2 : \"Crée une évaluation finale avec des critères clairs.\"\nPrompt 3 : \"Rédige un corrigé commenté.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Animateur en pastorale", |
|
|
prompt: "Prompt 1 : \"Imagine une animation spirituelle sur le thème de la solidarité.\"\nPrompt 2 : \"Prévois une activité en petits groupes.\"\nPrompt 3 : \"Rédige une prière collective liée au thème.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Enchaînement", color: "blue"}, |
|
|
{text: "Projet", color: "blue"}, |
|
|
{text: "Complexe", color: "blue"}, |
|
|
{text: "Étapes", color: "green"}, |
|
|
{text: "Méthodique", color: "green"}, |
|
|
{text: "Progressif", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "tot": |
|
|
title = "TREE OF THOUGHT (ToT) – \"Explorer plusieurs pistes en parallèle\""; |
|
|
description = "Comparaison de stratégies ou options"; |
|
|
principle = "Comparer différentes stratégies ou options, puis choisir la meilleure ou proposer une synthèse. Utile pour l'analyse stratégique ou la prise de décision."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "\"Comment mieux impliquer les familles dans le projet éducatif ? Explore 3 stratégies : 1) réunions de co-construction, 2) café des parents mensuel, 3) communication numérique hebdomadaire. Compare-les et recommande une solution adaptée.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant de collège", |
|
|
prompt: "\"Propose 3 manières différentes d'enseigner la notion d'énergie renouvelable en 5e : 1) sortie terrain, 2) expérience en classe, 3) débat d'argumentation. Compare l'impact pédagogique de chaque méthode.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Responsable pastorale", |
|
|
prompt: "\"Quelle est la meilleure façon d'intégrer Laudato Si' dans le parcours de foi des élèves de seconde ? Évalue 3 approches : 1) atelier nature, 2) retraite spirituelle, 3) exposition collaborative.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Comparaison", color: "blue"}, |
|
|
{text: "Stratégie", color: "blue"}, |
|
|
{text: "Options", color: "blue"}, |
|
|
{text: "Analyse", color: "green"}, |
|
|
{text: "Décision", color: "green"}, |
|
|
{text: "Synthèse", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "roleplay": |
|
|
title = "SIMULATION / ROLE PLAYING – \"S'entraîner à gérer des situations concrètes\""; |
|
|
description = "Préparation d'interactions réalistes"; |
|
|
principle = "Préparer une prise de parole, un entretien, une médiation, en simulant une interaction. Permet de s'entraîner à des situations professionnelles délicates."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "\"Tu es un parent inquiet car son enfant est victime de harcèlement. J'incarne le chef d'établissement et je veux expliquer notre dispositif de prise en charge. Joue ce rôle avec réalisme.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant", |
|
|
prompt: "\"Tu es un élève de 5ème qui refuse systématiquement de faire ses devoirs. Je suis ton enseignant et je cherche à comprendre ce blocage.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Formateur", |
|
|
prompt: "\"Tu es un enseignant réticent à utiliser l'IA. Je suis ton collègue qui mène une formation courte. Posons-nous des questions et cherchons un terrain d'entente.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Simulation", color: "blue"}, |
|
|
{text: "Interaction", color: "blue"}, |
|
|
{text: "Rôle", color: "blue"}, |
|
|
{text: "Entraînement", color: "green"}, |
|
|
{text: "Réaliste", color: "green"}, |
|
|
{text: "Professionnel", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "tcrei": |
|
|
title = "TCREI (Task, Context, Reference, Evaluate, Iterate) – Cadre structuré pour écrire un bon prompt"; |
|
|
description = "Structurer ses demandes selon 5 étapes"; |
|
|
principle = "Structurer ses demandes selon 5 étapes : Tâche, Contexte, Référence, Évaluation, Itération. Méthode complète pour des prompts efficaces et précis."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Exemple DDEC", |
|
|
prompt: "• Tâche : \"Tu es un conseiller pédagogique expert. Propose un atelier de formation.\"\n• Contexte : \"Cet atelier est destiné aux enseignants de cycle 3 sur l'évaluation par compétences.\"\n• Référence : \"Modèle attendu : titre, objectifs, déroulé, durée.\"\n• Évaluation : \"La proposition est-elle actionnable avec 12 enseignants ?\"\n• Itération : \"Ajoute une variante pour les enseignants de collège.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Structure", color: "blue"}, |
|
|
{text: "Méthode", color: "blue"}, |
|
|
{text: "Complet", color: "blue"}, |
|
|
{text: "Tâche", color: "green"}, |
|
|
{text: "Contexte", color: "green"}, |
|
|
{text: "Itération", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "metaprompt": |
|
|
title = "MÉTA-PROMPTING – \"Demande à l'IA d'écrire un bon prompt pour toi\""; |
|
|
description = "Utiliser l'IA pour améliorer ses prompts"; |
|
|
principle = "Utiliser l'IA pour générer des prompts réutilisables ou améliorer ses propres formulations. Particulièrement utile pour affiner ses techniques de prompting."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Enseignant", |
|
|
prompt: "\"Je veux un prompt pour générer des fiches de lecture adaptées au niveau CM1. Aide-moi à le formuler. Voici mon premier jet : [prompt initial]\"" |
|
|
}, |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "\"Quel serait le meilleur prompt pour générer une lettre de félicitations personnalisée aux enseignants en fin d'année ? Voici une première idée de prompt : [prompt initial]\"" |
|
|
}, |
|
|
{ |
|
|
role: "Formateur", |
|
|
prompt: "\"Améliore ce prompt : 'Explique l'IA aux enseignants de maternelle.' Fais-le plus précis, plus structuré, plus engageant.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Amélioration", color: "blue"}, |
|
|
{text: "Optimisation", color: "blue"}, |
|
|
{text: "Prompting", color: "blue"}, |
|
|
{text: "Affinage", color: "green"}, |
|
|
{text: "Formulation", color: "green"}, |
|
|
{text: "Réutilisable", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "translation": |
|
|
title = "TRADUCTION CONTEXTUELLE – \"Traduire avec sens et précision\""; |
|
|
description = "Traduction adaptée au contexte et au public"; |
|
|
principle = "Traduire un texte en tenant compte du contexte d'usage, du public et du registre. Plus qu'une simple traduction mot à mot, il s'agit d'adapter le message."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Enseignant en anglais", |
|
|
prompt: "\"Traduis cette consigne d'évaluation en anglais niveau A2 pour des élèves de 5e.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Responsable de jumelage", |
|
|
prompt: "\"Traduis ce discours de bienvenue pour nos correspondants espagnols. Le ton doit être chaleureux et respectueux.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Responsable communication", |
|
|
prompt: "\"Traduis cette affiche sur la Semaine de la Foi en allemand pour notre école partenaire de Sarre.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Traduction", color: "blue"}, |
|
|
{text: "Langue", color: "blue"}, |
|
|
{text: "Adaptation", color: "blue"}, |
|
|
{text: "Contexte", color: "green"}, |
|
|
{text: "Public", color: "green"}, |
|
|
{text: "Registre", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "multimodal": |
|
|
title = "PROMPTING MULTIMODAL – \"Utiliser images, sons ou vidéos dans le prompt\""; |
|
|
description = "Pour les vidéos YouTube, utiliser NotebookLM par exemple"; |
|
|
principle = "Fournir une image ou un média et poser une question à son sujet, ou générer un visuel à partir d'une consigne. Permet d'exploiter les capacités multimodales des IA avancées."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Enseignant d'arts plastiques", |
|
|
prompt: "\"Voici une photo d'œuvre d'art abstraite. Demande à l'IA de suggérer une activité d'interprétation créative pour des élèves de 4ème.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Responsable pastorale", |
|
|
prompt: "\"Crée une affiche illustrée pour annoncer la journée de prière pour la paix. Le style doit être doux, épuré, avec des symboles religieux, multiculturels et laïcs.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant en sciences", |
|
|
prompt: "\"Analyse cette photo d'expérience chimique et décris les étapes à reproduire en classe, pour des élèves de 3ème.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Multimodal", color: "blue"}, |
|
|
{text: "Image", color: "blue"}, |
|
|
{text: "Vidéo", color: "blue"}, |
|
|
{text: "Média", color: "green"}, |
|
|
{text: "NotebookLM", color: "green"}, |
|
|
{text: "Visuel", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "density": |
|
|
title = "Chaîne de densité (Density Chain) – \"Synthétiser sans rien oublier\""; |
|
|
description = "Synthèse exhaustive en plusieurs étapes"; |
|
|
principle = "Produire une synthèse exhaustive d'un contenu long ou complexe en plusieurs étapes successives. À chaque étape, l'IA génère un résumé, puis on lui demande ce qui aurait pu être oublié ou négligé. On intègre ces éléments au résumé, puis on répète le processus jusqu'à obtention d'une version stable, complète, dense et exploitable."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "\"Voici le rapport annuel de notre projet pastoral (30 pages). Résume-le en plusieurs étapes en respectant la richesse des témoignages et des actions.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Responsable diocésain", |
|
|
prompt: "\"Synthétise ce document-cadre du SGEC (Secrétariat Général de l'Enseignement Catholique) sur la formation des chefs d'établissement, en t'assurant de ne perdre aucun objectif stratégique.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant", |
|
|
prompt: "\"Voici les réponses de mes élèves à un questionnaire libre sur le climat scolaire. Résume les idées principales, sans omettre les propositions récurrentes.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Synthèse", color: "blue"}, |
|
|
{text: "Exhaustif", color: "blue"}, |
|
|
{text: "Itératif", color: "blue"}, |
|
|
{text: "Complet", color: "green"}, |
|
|
{text: "Dense", color: "green"}, |
|
|
{text: "Document", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "expert": |
|
|
title = "Instruction / Rôle expert – \"Donner un rôle et un contexte très précis à l'IA\""; |
|
|
description = "Encadrer finement la mission de l'IA"; |
|
|
principle = "Encadrer finement la mission de l'IA pour obtenir une réponse ciblée, experte, structurée, au bon niveau de langage. En donnant un rôle précis à l'IA, on oriente le type de réponse attendue."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Directeur diocésain", |
|
|
prompt: "\"Tu es un expert en pilotage d'établissement catholique sous contrat. Rédige une fiche de lecture stratégique sur le rapport du CESE concernant l'école inclusive. Format : problématique / enjeux / leviers pour les établissements.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant de philosophie", |
|
|
prompt: "\"Tu es un correcteur de bac de philosophie expérimenté. Corrige cette copie de dissertation en justifiant chaque annotation selon les critères officiels. Voici les « recommandations – Eléments d'évaluation des copies du baccalauréat et d'harmonisation des notes » : [DOCUMENT PDF]\"" |
|
|
}, |
|
|
{ |
|
|
role: "Formateur", |
|
|
prompt: "\"Tu es un concepteur pédagogique. Propose une séquence de 2h sur les biais de l'IA pour des enseignants du secondaire. Donne objectifs, déroulé et supports.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Expert", color: "blue"}, |
|
|
{text: "Rôle", color: "blue"}, |
|
|
{text: "Précis", color: "blue"}, |
|
|
{text: "Ciblé", color: "green"}, |
|
|
{text: "Structuré", color: "green"}, |
|
|
{text: "Langage", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "template": |
|
|
title = "Remplissage de templates (modèles types) – \"Compléter automatiquement une trame\""; |
|
|
description = "Automatisation de documents répétitifs"; |
|
|
principle = "Automatiser la création de documents répétitifs à partir d'une structure modèle. Permet de gagner du temps sur les documents administratifs ou pédagogiques standardisés."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Secrétaire de direction", |
|
|
prompt: "\"Complète cette lettre-type de réponse aux familles pour un refus de demande d'aménagement d'emploi du temps. Informations : élève X, classe de 3e, motif médical, demande refusée pour contraintes d'organisation : [MODELE]\"" |
|
|
}, |
|
|
{ |
|
|
role: "Enseignant de CM2", |
|
|
prompt: "\"Remplis cette fiche de présentation d'élève pour le passage en 6e. Informations : prénom, besoins spécifiques, points forts, vigilance pédagogique : [MODELE]\"" |
|
|
}, |
|
|
{ |
|
|
role: "Animateur pastoral", |
|
|
prompt: "\"Complète cette fiche activité à destination des catéchistes : thème = confiance, durée = 45 minutes, niveau = cycle 3 : [MODELE]\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Template", color: "blue"}, |
|
|
{text: "Modèle", color: "blue"}, |
|
|
{text: "Automatisation", color: "blue"}, |
|
|
{text: "Document", color: "green"}, |
|
|
{text: "Standardisé", color: "green"}, |
|
|
{text: "Administratif", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "summary": |
|
|
title = "Résumé spécifique (filtrage thématique) – \"Synthétiser en ciblant un angle précis\""; |
|
|
description = "Extraction d'éléments utiles pour une mission"; |
|
|
principle = "Extraire uniquement les éléments utiles pour une mission donnée à partir d'un document long ou complexe. Permet de filtrer l'information selon un besoin spécifique."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Responsable de la formation", |
|
|
prompt: "\"Voici le compte rendu de la dernière réunion du comité pédagogique. Résume uniquement les décisions concernant la formation continue des enseignants du second degré.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "\"Voici la charte de l'établissement. Fais un résumé ciblé à afficher dans les salles de classe à destination des élèves.\"" |
|
|
}, |
|
|
{ |
|
|
role: "Formateur", |
|
|
prompt: "\"Voici un article de 5 pages sur l'éthique de l'IA à l'école. Résume uniquement les principes utiles à aborder dans une formation courte pour enseignants.\"" |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Résumé", color: "blue"}, |
|
|
{text: "Filtrage", color: "blue"}, |
|
|
{text: "Ciblé", color: "blue"}, |
|
|
{text: "Thématique", color: "green"}, |
|
|
{text: "Extraction", color: "green"}, |
|
|
{text: "Spécifique", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "ape": |
|
|
title = "FRAMEWORK APE – \"Action / Purpose / Expectation\" (Action / Objectif / Attente)"; |
|
|
description = "Structurer un prompt en 3 éléments clés"; |
|
|
principle = "Structurer un prompt en précisant ce que l'on veut faire (Action), pourquoi on veut le faire (Objectif), et ce qu'on attend précisément comme résultat (Attentes). Ce framework est idéal pour les demandes de planification, d'animation pédagogique ou de rédaction stratégique."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Formateur DDEC", |
|
|
prompt: "• Action : Rédiger un support de formation de 2 heures pour des enseignants du secondaire sur les usages pédagogiques responsables de l'IA.\n• Objectif : Mon but est d'outiller les enseignants pour qu'ils intègrent l'IA dans leur pratique de façon éthique et conforme aux valeurs de l'Enseignement Catholique.\n• Attentes : Le support doit inclure une partie théorique introductive, des études de cas, une activité collaborative et une synthèse sous forme de fiche mémo." |
|
|
}, |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "• Action : Rédiger un email de 200 mots pour sensibiliser l'équipe éducative à l'enjeu de la protection des données personnelles dans l'établissement.\n• Objectif : Mon but est de mobiliser l'équipe autour des nouvelles obligations RGPD et des bonnes pratiques à mettre en œuvre dans le contexte scolaire.\n• Attentes : L'email doit être clair, synthétique, avec une invitation à une réunion et des ressources utiles en lien." |
|
|
} |
|
|
]; |
|
|
tags = [ |
|
|
{text: "Framework", color: "blue"}, |
|
|
{text: "Structure", color: "blue"}, |
|
|
{text: "APE", color: "blue"}, |
|
|
{text: "Action", color: "green"}, |
|
|
{text: "Objectif", color: "green"}, |
|
|
{text: "Attente", color: "purple"} |
|
|
]; |
|
|
break; |
|
|
case "bab": |
|
|
title = "FRAMEWORK BAB – \"Before / After / Bridge\" (Avant / Après / Pont)"; |
|
|
description = "Identifier problème, objectif et étapes"; |
|
|
principle = "Identifier un problème actuel (Before), formuler un objectif précis (After), et demander à l'IA les étapes de transformation (Bridge). Ce framework est très efficace pour concevoir des plans d'action concrets ou des stratégies de changement dans les établissements."; |
|
|
examples = [ |
|
|
{ |
|
|
role: "Chef d'établissement", |
|
|
prompt: "• Avant : La participation des parents à nos temps forts pastoraux reste très faible malgré les invitations.\n• Après : Nous voulons que 70 % des familles participent à au moins un temps fort dans l'année scolaire.\n• Pont : Propose un plan d'action en 5 étapes pour mieux mobiliser les familles autour de la vie pastorale de l'établissement." |
|
|
}, |
|
|
{ |
|
|
role: "Coordinateur de cycle", |
|
|
prompt: "• Avant : Les élèves de CM2 rencontrent |
|
|
</html> |
