jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(media): Phase 8.G noeuds-ecoles + popup RAG info + lien Bonpote + migration Nebius

Browse Source 
- CartePensees: noeuds ecole visibles (cercles proportionnels count auteurs, cliquables, emit select-ecole)
- CartePensees: collision D3 ajustee pour repulsion auteurs autour des noeuds ecole
- FicheEcole: nouveau composant modal (liste auteurs ingeres/non-ingeres, interroger RAG)
- media: header lien Bonpote V2 cliquable + bouton i info RAG
- media: popup FRACAS (description RAG, 662 dimensions, 3 couches, localStorage 1ere visite)
- media: FicheEcole branchee (select-ecole, select-auteur-from-ecole, interroger-ecole)
- ChatbotPensees: suppression mention corpusCount hardcoded (double source de verite)
- chatbot, chatbot-v2, chatbot-reseaux, chatbot-taff: migration Mistral -> Nebius DeepSeek-V3.2
- nuxt.config: ajout nebiusApiKey runtime config

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-14 05:56:09 +02:00
parent 46f57ae5fe
commit 40b406bd41
9 changed files with 286 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
pages/media.vue
View File

@@ -6,11 +6,25 @@
<!-- Header onglet -->
<div class="shrink-0 px-5 py-3"
style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
<h1 class="font-bold text-base" style="color: var(--nav-text);">ATIS Media</h1>
<p class="text-xs mt-0.5" style="color: var(--nav-text-muted);">
{{ corpusCount }} auteurs ingeres dans le RAG - carte FRACAS Bonpote V2
</p>
style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt); display:flex; align-items:center; justify-content:space-between; gap:12px;">
<div>
<h1 class="font-bold text-base" style="color: var(--nav-text);">ATIS Media</h1>
<p class="text-xs mt-0.5" style="color: var(--nav-text-muted);">
{{ corpusCount }} auteurs ingeres dans le RAG -
<a href="https://bonpote.com/wp-content/uploads/2024/10/FRACAS_BONPOTE_CARTE_VERSO_V2-OCT2024.pdf"
target="_blank" rel="noopener"
style="color: var(--nav-primary, #3b6ea5); text-decoration: underline; text-underline-offset: 2px;">
carte FRACAS Bonpote V2
</a>
</p>
</div>
<button
@click="ragInfoOpen = true"
title="A propos du RAG FRACAS"
style="width:26px;height:26px;border-radius:50%;border:1.5px solid var(--nav-text-muted);color:var(--nav-text-muted);font-size:0.72rem;font-weight:700;cursor:pointer;flex-shrink:0;background:var(--nav-bg-alt);display:flex;align-items:center;justify-content:center;"
aria-label="A propos du RAG">
i
</button>
</div>
<!-- Conteneur split / plein ecran -->
@@ -32,6 +46,7 @@
:data="penseesData"
:active="true"
@select-auteur="onSelectAuteur"
@select-ecole="onSelectEcole"
/>
<template #fallback>
<div class="w-full h-full flex items-center justify-center" style="color: var(--nav-text-muted);">
@@ -116,6 +131,61 @@
@interroger-rag="onInterrogerRag"
/>
<!-- Fiche ecole modal -->
<FicheEcole
:open="ficheEcoleOpen"
:ecoleId="ficheEcoleId"
:data="penseesData"
@close="ficheEcoleOpen = false"
@select-auteur="onSelectAuteurFromEcole"
@interroger-ecole="onInterrogerEcole"
/>
<!-- Modal info RAG -->
<Teleport to="body">
<Transition name="backdrop">
<div v-if="ragInfoOpen" class="fixed inset-0 z-[2000]" style="background:rgba(26,34,56,0.55);" @click="ragInfoOpen = false" aria-hidden="true" />
</Transition>
<Transition name="modal">
<div v-if="ragInfoOpen" class="fixed z-[2001] left-1/2 flex flex-col"
style="top:50%;transform:translate(-50%,-50%);width:min(580px,94vw);max-height:85vh;background:var(--nav-bg);border-radius:14px;box-shadow:0 16px 64px rgba(26,34,56,0.28);overflow:hidden;"
role="dialog" aria-modal="true" aria-label="A propos du RAG FRACAS">
<div class="flex items-center justify-between px-5 py-4 shrink-0"
style="border-bottom:2px solid var(--nav-bg-alt);background:var(--nav-surface);">
<h2 class="font-bold text-base" style="color:var(--nav-text);">FRACAS - Bibliotheque des pensees ecologiques</h2>
<button @click="ragInfoOpen = false" class="ml-3 shrink-0 flex items-center justify-center w-8 h-8 rounded-full hover:opacity-70"
style="background:var(--nav-bg-alt);color:var(--nav-text-muted);" aria-label="Fermer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
<div class="flex-1 overflow-y-auto px-5 py-4" style="color:var(--nav-text);font-size:0.875rem;line-height:1.6;">
<p class="mb-3">Une bibliotheque parlante politisee - des pensees ecologiques de gauche, organisees pour aider a creer une pensee complexe et nuancee, critiquer le recit dominant et soutenir des alternatives concretes et des projets collectifs.</p>
<p class="mb-4" style="color:var(--nav-text-muted);font-size:0.8rem;">Projet open source, ouvert a toutes et a tous - <a href="https://bonpote.com/wp-content/uploads/2024/10/FRACAS_BONPOTE_CARTE_VERSO_V2-OCT2024.pdf" target="_blank" rel="noopener" style="text-decoration:underline;">reference carte FRACAS Bonpote V2</a>.</p>
<div class="flex flex-col gap-3">
<div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
<p class="font-semibold mb-1" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Ce qu'est un RAG</p>
<p>Les textes sont vectorises dans un espace de 662 dimensions - chaque livre devient un nuage de points semantiques. La proximite entre les points capture la proximite entre les idees, pas les mots.</p>
</div>
<div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
<p class="font-semibold mb-1" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Chunking intelligent</p>
<p>Lors de l'ingestion, nous selectionnons les entites cles (concepts, auteurs, relations entre idees) plutot que de decouper mecaniquement les textes.</p>
</div>
<div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
<p class="font-semibold mb-2" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Trois couches d'analyse</p>
<div class="flex flex-col gap-1.5">
<div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Fond</span><span>Les idees, les theses, les arguments - ce qu'on interroge directement.</span></div>
<div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Forme</span><span>Les modeles narratifs, la rhetorique, la construction argumentative.</span></div>
<div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Structure</span><span>L'architecture des livres - comment les auteurs construisent leur pensee.</span></div>
</div>
</div>
</div>
</div>
</div>
</Transition>
</Teleport>
</div>
</template>
@@ -133,6 +203,9 @@ const DEFAULT_SPLIT_RATIO = 0.66
const ficheOpen = ref(false)
const ficheAuteurId = ref<string | null>(null)
const ficheEcoleOpen = ref(false)
const ficheEcoleId = ref<string | null>(null)
const ragInfoOpen = ref(false)
const chatbotAuteur = ref<string | null>(null)
const penseesData = ref<PenseesData | null>(null)
const layoutMode = ref<LayoutMode>('split')
@@ -179,7 +252,6 @@ function onHandleMouseup() {
}
onMounted(async () => {
// Restaurer le mode de layout depuis localStorage
if (typeof window !== 'undefined') {
const saved = localStorage.getItem(STORAGE_KEY) as LayoutMode | null
if (saved && ['split', 'carte-full', 'chatbot-full'].includes(saved)) {
@@ -189,6 +261,11 @@ onMounted(async () => {
if (!isNaN(savedRatio) && savedRatio >= 0.20 && savedRatio <= 0.80) {
splitRatio.value = savedRatio
}
// Afficher le popup info RAG a la premiere visite
if (!localStorage.getItem('rag-fracas-info-seen')) {
ragInfoOpen.value = true
localStorage.setItem('rag-fracas-info-seen', '1')
}
}
try {
penseesData.value = await $fetch<PenseesData>('/data/auteurs-pensees.json')
@@ -223,6 +300,23 @@ function onSelectAuteur(id: string) {
chatbotAuteur.value = null
}
function onSelectEcole(id: string) {
ficheEcoleId.value = id
ficheEcoleOpen.value = true
}
function onSelectAuteurFromEcole(auteurId: string) {
ficheEcoleOpen.value = false
onSelectAuteur(auteurId)
}
function onInterrogerEcole(ecoleId: string) {
ficheEcoleOpen.value = false
const ecole = penseesData.value?.ecoles.find(e => e.id === ecoleId)
chatbotAuteur.value = ecole?.label ?? null
if (layoutMode.value === 'carte-full') setLayoutMode('split')
}
function onInterrogerRag(auteurId: string) {
ficheOpen.value = false
const auteur = penseesData.value?.auteurs.find(a => a.id === auteurId)
@@ -392,6 +486,14 @@ useHead({ title: 'AEP - Media - Carte FRACAS Bonpote' })
overflow: hidden;
}
/* --- Transitions modal RAG info --- */
.backdrop-enter-active,.backdrop-leave-active { transition: opacity 0.2s; }
.backdrop-enter-from,.backdrop-leave-to { opacity: 0; }
.modal-enter-active { transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.modal-leave-active { transition: opacity 0.18s, transform 0.18s ease-in; }
.modal-enter-from { opacity: 0; transform: translate(-50%,-48%) scale(0.94); }
.modal-leave-to { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }
/* --- Responsive mobile (<768px) --- */
/* Stack vertical : carte 60vh + chatbot 40vh en mode split */
@media (max-width: 767px) {