devsite/vault-grasbot/50-Technique/architecture-site.md
2026-04-22 20:11:16 +02:00

89 lines
3.9 KiB
Markdown

---
title: "Architecture du site fernandgrascalvet.com"
slug: architecture-site
type: technique
source: manual
domains: [web, devops, ia]
tags: [architecture, nextjs, strapi, ollama]
aliases:
- architecture du site
- architecture technique
- stack technique
- comment est fait le site
- next.js strapi fastapi
answers:
- "Comment est fait ce site ?"
- "Quelle est la stack technique ?"
- "Avec quelles technologies le site est-il construit ?"
priority: 6
linked:
- "[[MOC-Technique]]"
- "[[developpement-web-and-hebergement-sur-serveur-windows]]"
- "[[ia]]"
- "[[grasbot-retrieval]]"
- "[[vault-structure]]"
updated: 2026-04-22
visibility: public
---
# Architecture du site fernandgrascalvet.com
Le site portfolio de Fernand Gras-Calvet est composé de trois briques
indépendantes, reliées par des API HTTP.
## Vue d'ensemble
```
┌─────────────────────┐ ┌────────────────────┐ ┌───────────────────────┐
│ Next.js 15 (front) │◄───▶│ Strapi 5 (CMS) │ │ FastAPI + Ollama │
│ App Router, TS │ │ Projets, Compét., │ │ GrasBot (graph+BM25) │
│ Tailwind + Stitch │ │ Homepage, Glossaire│ │ vault-grasbot/ │
└──────────┬──────────┘ └────────────────────┘ └──────────┬────────────┘
│ ▲
│ /api/proxy?q=... │
└──────────────────────────────────────────────────────┘
```
## Frontend — `app/`
- **Next.js 15** en mode App Router, Turbopack en dev.
- **TypeScript + JSX** mélangés (migration progressive vers TS).
- **Tailwind CSS 3.4** avec tokens Stitch « Digital Atelier » (voir
`tailwind.config.ts`) : palette `primary` indigo-ardoise, typographie
Manrope + Newsreader, radius `sheet` / `tile`, ombres `ambient` / `jewel`.
- **Pages principales** : `/` (hero + takeaways + démarche), `/portfolio`
(grille asymétrique 2/3 + 1/3), `/competences` (même pattern), fiches
détail `[slug]`, `/contact`.
- **Composant chat** : `ChatBot.js` + FAB flottant `GrasBotFab.tsx` monté
dans `layout.tsx` → accessible depuis toutes les pages.
## CMS — `cmsbackend/` (Strapi 5)
- Content-types : `homepage`, `project`, `competence`, `glossaire`, `message`.
- API REST : `https://api.fernandgrascalvet.com/api/<pluralName>`.
- Permissions `find` publique sur tous les types `draftAndPublish: true`.
## Chatbot — `llm-api/` + `vault-grasbot/` + Ollama
- Modèle chat : **Qwen3 8B** (quantif Q4_K_M) via Ollama local.
- **Pas d'embeddings** depuis la v3 (avril 2026) : la recherche se fait
sur le vault Obsidian directement, en **pur Python**.
- Pipeline : question → tokenisation → scoring multi-signaux (aliases,
titre/slug, answers, domaines, tags, BM25) → expansion par graphe
(wikilinks) → top-5 notes → prompt Qwen3 → réponse.
Voir [[grasbot-retrieval]] pour le détail complet.
## Extraction Strapi → vault — `strapi_extraction/`
Scripts Node + Python qui génèrent la base de connaissance du chatbot :
1. `extract-api-data.js` : fetch des endpoints Strapi → JSON brut (`extract/raw/`).
2. `clean-api-data.js` : nettoyage → JSON minimal (`extract/clean-data/`).
3. `generate-docs.js` : génération de Markdown (`docs/`).
4. `build-vault.py` : conversion `docs/` → vault Obsidian (`vault-grasbot/`)
avec frontmatter YAML enrichi (aliases, answers, priority), MOCs et
wikilinks.
Voir [[vault-structure]] pour la structure du vault.