devsite/vault-grasbot/50-Technique/architecture-site.md
2026-04-23 19:19:31 +02:00

4.1 KiB

title slug type source domains tags aliases answers priority linked updated visibility
Architecture du site fernandgrascalvet.com architecture-site technique manual
web
devops
ia
architecture
nextjs
strapi
ollama
architecture du site
architecture technique
stack technique
comment est fait le site
next.js strapi fastapi
Comment est fait ce site ?
Quelle est la stack technique ?
Avec quelles technologies le site est-il construit ?
6
MOC-Technique
developpement-web-and-hebergement-sur-serveur-windows
ia
grasbot
fernandgrascalvet-com
grasbot-retrieval
vault-structure
2026-04-23 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 (/portfolio/[slug], /competences/[slug]), réalisations liées /competences/[slug]/[realisation], /contact (Brevo).
  • 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, realisation-ia, glossaire (le type message a été retiré — contact via Brevo, voir docs-site-interne/contact-flow.md).
  • API REST : https://api.fernandgrascalvet.com/api/<pluralName>.
  • Permissions find publique sur les types publics en 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.