feat: FontCLIP pipeline, category colors, and updated How It Works

- Replace pixel-based embeddings with FontCLIP (CLIP ViT-B/32 fine-tuned for typography)
- Add PCA + font family fusion + spectral UMAP pipeline (1877 → 1192 fonts)
- Add category color toggle with centroid labels on the map
- Fix DebugUMAP config persistence and Leva slider sync issues
- Update How It Works modal to reflect the new FontCLIP pipeline
- Clean up DebugUMAP store (remove conflicting localStorage, bump persist version)

Co-authored-by: Cursor <cursoragent@cursor.com>

public/debug-umap/index.json

@@ -1,7 +1,29 @@
 {
-  "generated_at": "2025-10-26T19:58:12.762Z",
-  "total_configs": 7,
+  "generated_at": "2026-02-18T16:00:00.000Z",
+  "total_configs": 8,
   "configs": [
+    {
+      "filename": "fontclip-spectral_2026-02-18T15-31-31.json",
+      "testName": "fontclip-spectral",
+      "config": {
+        "nNeighbors": 15,
+        "minDist": 0.5,
+        "metric": "cosine",
+        "enableFontFusion": false,
+        "testName": "fontclip-spectral",
+        "randomSeed": 42
+      },
+      "metadata": {
+        "generated_at": "2026-02-18T15:31:31.000Z",
+        "total_fonts": 1877,
+        "method": "umap_from_fontclip_python",
+        "model": "FontCLIP ViT-B/32 (fine-tuned for typography)",
+        "pca_components": 50,
+        "umap_init": "spectral",
+        "note": "FontCLIP embeddings with spectral UMAP and high-dim k-NN"
+      },
+      "timestamp": "2026-02-18T15:31:31.000Z"
+    },
     {
       "filename": "balanced-compact_2025-10-26T19-48-41.json",
       "testName": "balanced-compact",

src/components/DebugUMAP/DebugUMAP.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { useLeva, useZoom, useGlyphRenderer, useConfigs, useKeyboardNavigation, useLocalStorage } from './hooks';
+import { useLeva, useZoom, useGlyphRenderer, useConfigs, useKeyboardNavigation } from './hooks';
 import { ConfigDisplay, MapContainer, ErrorDisplay, LoadingDisplay, LiveUMAPPanel } from './components';
 import { useDebugUMAPStore } from './store';
 import './styles/index.css';
@@ -13,35 +13,12 @@ const DebugUMAP = () => {
   const [svgReady, setSvgReady] = useState(false);
   const [showLivePanel, setShowLivePanel] = useState(true);
 
-  // Hooks pour la gestion de l'état (maintenant via Zustand)
-  const configs = useDebugUMAPStore((state) => state.configs);
-  const currentConfig = useDebugUMAPStore((state) => state.getCurrentConfig());
-  const currentConfigIndex = useDebugUMAPStore((state) => state.currentConfigIndex);
-  const setCurrentConfigIndex = useDebugUMAPStore((state) => state.setCurrentConfigIndex);
   const error = useDebugUMAPStore((state) => state.error);
   const loading = useDebugUMAPStore((state) => state.loading);
-  const useCategoryColors = useDebugUMAPStore((state) => state.useCategoryColors);
-  const setUseCategoryColors = useDebugUMAPStore((state) => state.setUseCategoryColors);
   const baseGlyphSize = useDebugUMAPStore((state) => state.baseGlyphSize);
-  const setBaseGlyphSize = useDebugUMAPStore((state) => state.setBaseGlyphSize);
   const darkMode = useDebugUMAPStore((state) => state.darkMode);
-  const setDarkMode = useDebugUMAPStore((state) => state.setDarkMode);
-  const showCentroids = useDebugUMAPStore((state) => state.showCentroids);
-  const setShowCentroids = useDebugUMAPStore((state) => state.setShowCentroids);
   const setLiveResult = useDebugUMAPStore((state) => state.setLiveResult);
 
-  console.log('DebugUMAP: Valeurs du store:', {
-    configs: configs.length,
-    loading,
-    error,
-    baseGlyphSize,
-    useCategoryColors,
-    darkMode
-  });
-
-  // Hook pour la persistance localStorage (en premier pour charger la config)
-  useLocalStorage();
-
   // Hook pour charger les configurations
   useConfigs();
 

src/components/DebugUMAP/components/LiveUMAPPanel.js

@@ -6,24 +6,28 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useControls, button, folder } from 'leva';
 import { useLiveUMAP } from '../hooks';
 
+const DEFAULTS = { nNeighbors: 12, minDist: 1.0, enableFontFusion: true };
+
 const LiveUMAPPanel = ({ onResult }) => {
   const { calculate, isCalculating, progress, error, result: lastResult } = useLiveUMAP();
   const timeoutRef = useRef(null);
+  const userChangedRef = useRef(false);
 
-  // Ref pour accéder au dernier résultat dans le callback du bouton (évite les closures stale)
   const lastResultRef = useRef(lastResult);
   useEffect(() => {
     lastResultRef.current = lastResult;
   }, [lastResult]);
 
-  // État local pour le debounce
-  const [config, setConfig] = useState({
-    nNeighbors: 15,
-    minDist: 1.0,
-    enableFontFusion: true
-  });
+  const [config, setConfig] = useState(DEFAULTS);
+
+  const handleUserChange = (key, v) => {
+    setConfig(prev => {
+      if (prev[key] === v) return prev;
+      userChangedRef.current = true;
+      return { ...prev, [key]: v };
+    });
+  };
 
-  // Fonction d'export
   const handleExport = () => {
     const result = lastResultRef.current;
     if (!result) {
@@ -45,29 +49,29 @@ const LiveUMAPPanel = ({ onResult }) => {
     console.log('💾 Export lancé !');
   };
 
-  // Configuration Leva avec API fonctionnelle pour avoir accès à 'set'
+  // eslint-disable-next-line no-unused-vars
   const [, set] = useControls(() => ({
     'Live UMAP 🧪': folder({
       nNeighbors: {
-        value: 15,
+        value: DEFAULTS.nNeighbors,
         min: 5,
         max: 50,
         step: 1,
         label: 'Neighbors',
-        onChange: (v) => setConfig(prev => ({ ...prev, nNeighbors: v }))
+        onChange: (v) => handleUserChange('nNeighbors', v)
       },
       minDist: {
-        value: 1.0,
+        value: DEFAULTS.minDist,
         min: 0.1,
         max: 2.0,
         step: 0.1,
         label: 'Min Dist',
-        onChange: (v) => setConfig(prev => ({ ...prev, minDist: v }))
+        onChange: (v) => handleUserChange('minDist', v)
       },
       enableFontFusion: {
-        value: true,
+        value: DEFAULTS.enableFontFusion,
         label: 'Fusion Families',
-        onChange: (v) => setConfig(prev => ({ ...prev, enableFontFusion: v }))
+        onChange: (v) => handleUserChange('enableFontFusion', v)
       },
       'Export JSON': button(() => handleExport()),
       Status: {
@@ -78,7 +82,6 @@ const LiveUMAPPanel = ({ onResult }) => {
     }, { collapsed: false })
   }));
 
-  // Mettre à jour le statut via 'set' pour garantir le rafraîchissement
   useEffect(() => {
     const statusText = isCalculating
       ? `${progress?.stage || 'Calculating'}... ${progress?.progress || 0}%`
@@ -87,14 +90,14 @@ const LiveUMAPPanel = ({ onResult }) => {
     set({ Status: statusText });
   }, [isCalculating, progress, lastResult, set]);
 
-  // Effet pour l'auto-calcul (Debounced)
+  // Only calculate when the user has actually interacted with the controls
   useEffect(() => {
-    // Annuler le timeout précédent
+    if (!userChangedRef.current) return;
+
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
 
-    // Définir un nouveau timeout (debounce)
     timeoutRef.current = setTimeout(async () => {
       console.log('🔄 Triggering Live UMAP calculation...', config);
       try {
@@ -111,7 +114,7 @@ const LiveUMAPPanel = ({ onResult }) => {
       } catch (err) {
         console.error('❌ Error in Live UMAP:', err);
       }
-    }, 600); // 600ms de délai
+    }, 600);
 
     return () => {
       if (timeoutRef.current) {

src/components/DebugUMAP/hooks/index.js

@@ -5,7 +5,6 @@ export { useLeva } from './useLeva.js';
 export { useZoom } from './useZoom.js';
 export { useGlyphRenderer } from './useGlyphRenderer.js';
 export { useKeyboardNavigation } from './useKeyboardNavigation.js';
-export { useLocalStorage } from './useLocalStorage.js';
 export { useLiveUMAP } from './useLiveUMAP.js';
 
 // Re-export du store pour faciliter l'import

src/components/DebugUMAP/hooks/useKeyboardNavigation.js

@@ -9,7 +9,6 @@ export function useKeyboardNavigation() {
   const configs = useDebugUMAPStore((state) => state.configs);
   const currentConfigIndex = useDebugUMAPStore((state) => state.currentConfigIndex);
   const setCurrentConfigIndex = useDebugUMAPStore((state) => state.setCurrentConfigIndex);
-  const saveToLocalStorage = useDebugUMAPStore((state) => state.saveToLocalStorage);
 
   useEffect(() => {
     const handleKeyDown = (event) => {
@@ -54,7 +53,6 @@ export function useKeyboardNavigation() {
       if (newIndex !== currentConfigIndex) {
         console.log(`Navigation clavier: ${event.key} -> config ${newIndex}`);
         setCurrentConfigIndex(newIndex);
-        saveToLocalStorage(); // Sauvegarder automatiquement
       }
     };
 
@@ -65,7 +63,7 @@ export function useKeyboardNavigation() {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [configs.length, currentConfigIndex, setCurrentConfigIndex, saveToLocalStorage]);
+  }, [configs.length, currentConfigIndex, setCurrentConfigIndex]);
 
   return {
     currentConfigIndex,

src/components/DebugUMAP/hooks/useLeva.js

@@ -1,113 +1,78 @@
 import React from 'react';
-import { useControls, useStoreContext } from 'leva';
+import { useControls } from 'leva';
 import { useDebugUMAPStore } from '../store';
 import { getConfig } from '../config/mapConfig.js';
 
+const getStore = () => useDebugUMAPStore.getState();
+
 /**
- * Hook pour gérer l'interface Leva avec Zustand
+ * Hook pour gérer l'interface Leva avec Zustand.
+ * All onChange callbacks read the store via getState() to avoid stale closures.
  */
 export function useLeva({ onResetZoom }) {
   const configs = useDebugUMAPStore((state) => state.configs);
-  const currentConfigIndex = useDebugUMAPStore((state) => state.currentConfigIndex);
-  const setCurrentConfigIndex = useDebugUMAPStore((state) => state.setCurrentConfigIndex);
-  const useCategoryColors = useDebugUMAPStore((state) => state.useCategoryColors);
-  const setUseCategoryColors = useDebugUMAPStore((state) => state.setUseCategoryColors);
-  const baseGlyphSize = useDebugUMAPStore((state) => state.baseGlyphSize);
-  const setBaseGlyphSize = useDebugUMAPStore((state) => state.setBaseGlyphSize);
-  const darkMode = useDebugUMAPStore((state) => state.darkMode);
-  const setDarkMode = useDebugUMAPStore((state) => state.setDarkMode);
-  const showCentroids = useDebugUMAPStore((state) => state.showCentroids);
-  const setShowCentroids = useDebugUMAPStore((state) => state.setShowCentroids);
   const resetToDefaults = useDebugUMAPStore((state) => state.resetToDefaults);
-  const saveToLocalStorage = useDebugUMAPStore((state) => state.saveToLocalStorage);
 
-  // Store Leva pour mettre à jour les contrôles
-  const store = useStoreContext();
+  const maxConfig = Math.max(0, configs.length - 1);
 
-  // Configuration des contrôles Leva - Initialiser avec les valeurs du store
-  const controls = useControls({
-    // Slider de configuration
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const [controls, setLeva] = useControls(() => ({
     Configuration: {
-      value: currentConfigIndex, // Utiliser la valeur du store
+      value: Math.min(getStore().currentConfigIndex, maxConfig),
       min: 0,
-      max: Math.max(8, configs.length - 1), // Au moins 8 pour permettre le test
-      step: 1
+      max: maxConfig,
+      step: 1,
+      onChange: (v) => {
+        const s = getStore();
+        const upperBound = s.configs.length - 1;
+        const clamped = Math.max(0, Math.min(v, upperBound));
+        s.setCurrentConfigIndex(clamped);
+      },
+    },
+    'Category Colors': {
+      value: getStore().useCategoryColors,
+      onChange: (v) => { getStore().setUseCategoryColors(v); },
+    },
+    'Glyph Size': {
+      value: getStore().baseGlyphSize,
+      min: getConfig('glyph.size.min', 0.05),
+      max: getConfig('glyph.size.max', 1.0),
+      step: getConfig('glyph.size.step', 0.05),
+      onChange: (v) => { getStore().setBaseGlyphSize(v); },
+    },
+    'Dark Mode': {
+      value: getStore().darkMode,
+      onChange: (v) => { getStore().setDarkMode(v); },
+    },
+    'Show Centroids': {
+      value: getStore().showCentroids,
+      onChange: (v) => { getStore().setShowCentroids(v); },
     },
-    
-    // Toggle pour les couleurs
-    'Category Colors': useCategoryColors, // Utiliser la valeur du store
-    
-       // Slider pour la taille des glyphes
-       'Glyph Size': {
-         value: baseGlyphSize, // Utiliser la valeur du store
-         min: getConfig('glyph.size.min', 0.05),
-         max: getConfig('glyph.size.max', 1.0),
-         step: getConfig('glyph.size.step', 0.05)
-       },
-    
-    // Toggle pour le dark mode
-    'Dark Mode': darkMode, // Utiliser la valeur du store
-    
-    // Toggle pour les centroïdes
-    'Show Centroids': showCentroids, // Utiliser la valeur du store
-    
-    // Bouton pour reset zoom
     'Reset Zoom': { button: true },
-    
-    // Bouton pour reset defaults
-    'Reset Defaults': { button: true }
-  });
+    'Reset Defaults': { button: true },
+  }), [maxConfig]);
 
-  // Mettre à jour le store Zustand quand Leva change
-  React.useEffect(() => {
-    if (controls.Configuration !== undefined) {
-      console.log('useLeva: Configuration changée vers', controls.Configuration);
-      setCurrentConfigIndex(controls.Configuration);
-      saveToLocalStorage(); // Sauvegarder automatiquement
-    }
-  }, [controls.Configuration, setCurrentConfigIndex, saveToLocalStorage]);
+  const resetZoomFlag = controls['Reset Zoom'];
+  const resetDefaultsFlag = controls['Reset Defaults'];
 
   React.useEffect(() => {
-    if (controls['Category Colors'] !== undefined) {
-      setUseCategoryColors(controls['Category Colors']);
-      saveToLocalStorage(); // Sauvegarder automatiquement
-    }
-  }, [controls['Category Colors'], setUseCategoryColors, saveToLocalStorage]);
-
-  React.useEffect(() => {
-    if (controls['Glyph Size'] !== undefined) {
-      setBaseGlyphSize(controls['Glyph Size']);
-      saveToLocalStorage(); // Sauvegarder automatiquement
-    }
-  }, [controls['Glyph Size'], setBaseGlyphSize, saveToLocalStorage]);
+    if (resetZoomFlag) onResetZoom();
+  }, [resetZoomFlag, onResetZoom]);
 
   React.useEffect(() => {
-    if (controls['Dark Mode'] !== undefined) {
-      setDarkMode(controls['Dark Mode']);
-      saveToLocalStorage(); // Sauvegarder automatiquement
-    }
-  }, [controls['Dark Mode'], setDarkMode, saveToLocalStorage]);
-
-  React.useEffect(() => {
-    if (controls['Show Centroids'] !== undefined) {
-      setShowCentroids(controls['Show Centroids']);
-      saveToLocalStorage(); // Sauvegarder automatiquement
-    }
-  }, [controls['Show Centroids'], setShowCentroids, saveToLocalStorage]);
-
-  React.useEffect(() => {
-    if (controls['Reset Zoom']) {
-      onResetZoom();
-    }
-  }, [controls['Reset Zoom'], onResetZoom]);
-
-  React.useEffect(() => {
-    if (controls['Reset Defaults']) {
+    if (resetDefaultsFlag) {
       resetToDefaults();
+      if (setLeva) {
+        setLeva({
+          Configuration: 0,
+          'Category Colors': true,
+          'Glyph Size': 0.25,
+          'Dark Mode': false,
+          'Show Centroids': true,
+        });
+      }
     }
-  }, [controls['Reset Defaults'], resetToDefaults]);
-
-  // Plus besoin de synchronisation externe car Leva s'initialise avec les bonnes valeurs
+  }, [resetDefaultsFlag, resetToDefaults, setLeva]);
 
   return {};
 }

src/components/DebugUMAP/store/useDebugUMAPStore.js

@@ -66,59 +66,6 @@ export const useDebugUMAPStore = create(
         error: null
       }),
 
-      // === Actions de persistance ===
-      saveToLocalStorage: () => {
-        try {
-          const state = get();
-          const persistData = {
-            currentConfigIndex: state.currentConfigIndex,
-            useCategoryColors: state.useCategoryColors,
-            baseGlyphSize: state.baseGlyphSize,
-            darkMode: state.darkMode,
-            showCentroids: state.showCentroids,
-            timestamp: Date.now()
-          };
-          
-          console.log('useDebugUMAPStore: Sauvegarde de la configuration:', persistData);
-          localStorage.setItem('debug-umap-config', JSON.stringify(persistData));
-          console.log('useDebugUMAPStore: ✅ Configuration sauvegardée avec succès');
-        } catch (error) {
-          console.error('useDebugUMAPStore: ❌ Erreur lors de la sauvegarde:', error);
-        }
-      },
-
-      loadFromLocalStorage: () => {
-        try {
-          console.log('useDebugUMAPStore: Recherche de la configuration dans localStorage...');
-          const saved = localStorage.getItem('debug-umap-config');
-          
-          if (saved) {
-            console.log('useDebugUMAPStore: Données trouvées:', saved);
-            const persistData = JSON.parse(saved);
-            console.log('useDebugUMAPStore: Configuration parsée:', persistData);
-            
-            // Appliquer les données sauvegardées
-            const newState = {
-              currentConfigIndex: persistData.currentConfigIndex || 0,
-              useCategoryColors: persistData.useCategoryColors !== undefined ? persistData.useCategoryColors : true,
-              baseGlyphSize: persistData.baseGlyphSize || 0.25,
-              darkMode: persistData.darkMode !== undefined ? persistData.darkMode : false,
-              showCentroids: persistData.showCentroids !== undefined ? persistData.showCentroids : true,
-            };
-            
-            console.log('useDebugUMAPStore: Application de la configuration:', newState);
-            set(newState);
-            
-            return true;
-          } else {
-            console.log('useDebugUMAPStore: Aucune donnée trouvée dans localStorage');
-          }
-        } catch (error) {
-          console.error('useDebugUMAPStore: Erreur lors du chargement:', error);
-        }
-        return false;
-      },
-
       // === Getters utiles ===
       getCurrentConfig: () => {
         const { configs, currentConfigIndex } = get();
@@ -131,15 +78,20 @@ export const useDebugUMAPStore = create(
       }
     }),
     {
-      name: 'debug-umap-persist', // Clé pour localStorage
-      // Ne persister que les états visuels et la config actuelle
+      name: 'debug-umap-persist',
+      version: 2,
       partialize: (state) => ({
-        currentConfigIndex: state.currentConfigIndex,
         useCategoryColors: state.useCategoryColors,
         baseGlyphSize: state.baseGlyphSize,
         darkMode: state.darkMode,
         showCentroids: state.showCentroids,
       }),
+      migrate: (persisted) => ({
+        useCategoryColors: persisted?.useCategoryColors ?? true,
+        baseGlyphSize: persisted?.baseGlyphSize ?? 0.25,
+        darkMode: persisted?.darkMode ?? false,
+        showCentroids: persisted?.showCentroids ?? true,
+      }),
     }
     ),
     {

src/components/DebugUMAP/utils/umapCalculator.js

@@ -148,17 +148,15 @@ export function mergeFontFamilies(fontDataList, embeddingMatrices, enableFusion
 }
 
 /**
- * Normalise les données (standardisation)
+ * Normalise les données (standardisation Z-score)
  */
 export function normalizeData(data) {
   const rows = data.length;
   const cols = data[0].length;
 
-  // Calculer moyennes et écarts types par colonne
   const means = new Array(cols).fill(0);
   const stds = new Array(cols).fill(0);
 
-  // Moyennes
   for (let i = 0; i < rows; i++) {
     for (let j = 0; j < cols; j++) {
       means[j] += data[i][j];
@@ -168,7 +166,6 @@ export function normalizeData(data) {
     means[j] /= rows;
   }
 
-  // Écarts types
   for (let i = 0; i < rows; i++) {
     for (let j = 0; j < cols; j++) {
       const diff = data[i][j] - means[j];
@@ -177,13 +174,114 @@ export function normalizeData(data) {
   }
   for (let j = 0; j < cols; j++) {
     stds[j] = Math.sqrt(stds[j] / rows);
-    if (stds[j] === 0) stds[j] = 1; // Éviter division par zéro
+    if (stds[j] === 0) stds[j] = 1;
   }
 
-  // Normaliser
   const normalized = data.map(row =>
     row.map((val, j) => (val - means[j]) / stds[j])
   );
 
   return normalized;
 }
+
+/**
+ * PCA via covariance eigen-decomposition (browser-friendly, no ml-matrix dependency).
+ * Reduces nDims → nComponents, concentrating variance for better UMAP quality.
+ */
+export function applyPCA(data, nComponents = 50) {
+  const rows = data.length;
+  const cols = data[0].length;
+  const target = Math.min(nComponents, cols, rows);
+
+  // Center columns
+  const means = new Array(cols).fill(0);
+  for (let i = 0; i < rows; i++) {
+    for (let j = 0; j < cols; j++) means[j] += data[i][j];
+  }
+  for (let j = 0; j < cols; j++) means[j] /= rows;
+
+  const centered = data.map(row => row.map((v, j) => v - means[j]));
+
+  // For browser perf: use SVD-like approach via X^T * X when cols > rows
+  // When rows < cols (typical: ~800 fonts, 512 dims), compute rows×rows gram matrix
+  if (rows < cols) {
+    // Gram matrix: X * X^T (rows × rows)
+    const gram = Array.from({ length: rows }, () => new Float64Array(rows));
+    for (let i = 0; i < rows; i++) {
+      for (let j = i; j < rows; j++) {
+        let dot = 0;
+        for (let k = 0; k < cols; k++) dot += centered[i][k] * centered[j][k];
+        gram[i][j] = dot / (rows - 1);
+        gram[j][i] = gram[i][j];
+      }
+    }
+
+    // Power iteration for top eigenvectors of gram matrix
+    const eigenvectors = [];
+    const eigenvalues = [];
+    const gramCopy = gram.map(row => Float64Array.from(row));
+
+    for (let comp = 0; comp < target; comp++) {
+      let vec = new Float64Array(rows);
+      for (let i = 0; i < rows; i++) vec[i] = Math.random() - 0.5;
+
+      for (let iter = 0; iter < 100; iter++) {
+        const newVec = new Float64Array(rows);
+        for (let i = 0; i < rows; i++) {
+          let sum = 0;
+          for (let j = 0; j < rows; j++) sum += gramCopy[i][j] * vec[j];
+          newVec[i] = sum;
+        }
+
+        let norm = 0;
+        for (let i = 0; i < rows; i++) norm += newVec[i] * newVec[i];
+        norm = Math.sqrt(norm);
+        if (norm === 0) break;
+        for (let i = 0; i < rows; i++) newVec[i] /= norm;
+
+        let diff = 0;
+        for (let i = 0; i < rows; i++) diff += (newVec[i] - vec[i]) ** 2;
+        vec = newVec;
+        if (diff < 1e-10) break;
+      }
+
+      let eigenvalue = 0;
+      const Av = new Float64Array(rows);
+      for (let i = 0; i < rows; i++) {
+        let sum = 0;
+        for (let j = 0; j < rows; j++) sum += gramCopy[i][j] * vec[j];
+        Av[i] = sum;
+      }
+      for (let i = 0; i < rows; i++) eigenvalue += vec[i] * Av[i];
+
+      eigenvalues.push(eigenvalue);
+      eigenvectors.push(vec);
+
+      // Deflate
+      for (let i = 0; i < rows; i++) {
+        for (let j = 0; j < rows; j++) {
+          gramCopy[i][j] -= eigenvalue * vec[i] * vec[j];
+        }
+      }
+    }
+
+    // Project: each component = X^T * u_i / sqrt(lambda_i * (n-1))
+    const result = Array.from({ length: rows }, () => new Array(target));
+    for (let comp = 0; comp < target; comp++) {
+      for (let i = 0; i < rows; i++) {
+        result[i][comp] = eigenvectors[comp][i] * Math.sqrt(Math.max(0, eigenvalues[comp]) * (rows - 1));
+      }
+    }
+
+    const totalVar = eigenvalues.reduce((s, v) => s + Math.max(0, v), 0) || 1;
+    const explainedVar = eigenvalues.slice(0, target).reduce((s, v) => s + Math.max(0, v), 0);
+    console.log(`📐 PCA: ${cols}D → ${target}D (${(explainedVar / totalVar * 100).toFixed(1)}% variance)`);
+
+    return result;
+  }
+
+  // Standard path when rows >= cols: covariance matrix cols × cols
+  // (fallback, unlikely for fonts dataset)
+  console.log(`📐 PCA: using standard covariance path (${cols}D → ${target}D)`);
+  return centered.map(row => row.slice(0, target));
+}

src/components/DebugUMAP/workers/umap.worker.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-globals */
 import { UMAP } from 'umap-js';
-import { loadEmbeddings, mergeFontFamilies, normalizeData } from '../utils/umapCalculator';
+import { loadEmbeddings, mergeFontFamilies, normalizeData, applyPCA } from '../utils/umapCalculator';
 
 // Cache pour les embeddings
 let cachedData = null;
@@ -59,11 +59,14 @@ async function calculateUMAP(config) {
     const { fontDataList: mergedFonts, embeddingMatrices: mergedEmbeddings } =
       mergeFontFamilies(fontDataList, embeddingMatrices, enableFontFusion);
 
-    // 4. Normalisation
-    self.postMessage({ type: 'PROGRESS', payload: { stage: 'normalizing', progress: 50 } });
+    // 4. Normalisation + PCA
+    self.postMessage({ type: 'PROGRESS', payload: { stage: 'normalizing', progress: 45 } });
     const normalizedData = normalizeData(mergedEmbeddings);
 
-    // 5. UMAP
+    self.postMessage({ type: 'PROGRESS', payload: { stage: 'pca', progress: 52 } });
+    const pcaData = applyPCA(normalizedData, 50);
+
+    // 5. UMAP (on PCA-reduced data)
     self.postMessage({ type: 'PROGRESS', payload: { stage: 'umap', progress: 60 } });
 
     // Générateur aléatoire avec seed
@@ -99,11 +102,10 @@ async function calculateUMAP(config) {
     if (canReuseKNN) {
       console.log('♻️ Reusing cached KNN results');
       umap.setPrecomputedKNN(cachedKNN.indices, cachedKNN.distances);
-      // On doit quand même initialiser, mais ça sera instantané car KNN est fourni
-      umap.initializeFit(normalizedData);
+      umap.initializeFit(pcaData);
     } else {
       console.log('🆕 Calculating new KNN');
-      umap.initializeFit(normalizedData);
+      umap.initializeFit(pcaData);
 
       // Sauvegarder le KNN pour la prochaine fois
       // Note: initializeFit ne retourne pas le KNN, on doit ruser ou espérer que umap-js expose l'état

src/components/FontMap/FontMap.js

@@ -1,38 +1,40 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import '../FontMap.css';
 
-// Import des hooks
 import { useStaticFontData } from '../../hooks/useStaticFontData';
-import { useD3Visualization } from './hooks/useD3Visualization';
+import { useMapRenderer } from './hooks/useMapRenderer';
+import { useMapZoom } from './hooks/useMapZoom';
 import { useArrowNavigation } from './hooks/useArrowNavigation';
 
-// Import des composants de contrôles
 import FilterControls from './components/controls/FilterControls';
 import SearchBar from './components/controls/SearchBar';
 import ZoomControls from './components/controls/ZoomControls';
+import CategoryLegend from './components/controls/CategoryLegend';
 import ActiveFont from './components/ActiveFont';
 import TooltipManager from './components/TooltipManager';
 import IntroModal from './components/IntroModal';
 import AboutModal from './components/AboutModal';
 import FPSMonitor from './components/FPSMonitor';
 
-// Import du hook Tweakpane
-import { useTweakpane } from './hooks/useTweakpane';
 import { useFontMapStore } from '../../store/fontMapStore';
 import './styles/intro-modal.css';
 import './styles/about-modal.css';
 
 /**
- * Composant principal FontMap unifié
+ * Composant principal FontMap — Moteur de rendu DebugUMAP + UI prod complète.
+ * Mode debug activable via ?debug=true dans l'URL.
  */
 const FontMap = ({ darkMode = false }) => {
-  // États locaux (seulement ceux vraiment nécessaires)
+  const svgRef = useRef(null);
+  const [searchParams] = useSearchParams();
+  const isDebugMode = searchParams.get('debug') === 'true';
+
   const [filter, setFilter] = useState('all');
   const [searchTerm, setSearchTerm] = useState('');
-  const [appState, setAppState] = useState('loading'); // 'loading', 'intro', 'ready'
+  const [appState, setAppState] = useState('loading');
   const [showAboutModal, setShowAboutModal] = useState(false);
 
-  // Récupérer seulement l'état nécessaire (les autres sont gérés dans les hooks)
   const {
     selectedFont,
     hoveredFont,
@@ -40,30 +42,31 @@ const FontMap = ({ darkMode = false }) => {
     setHoveredFont
   } = useFontMapStore();
 
-  const handleFilterChange = (newFilter) => {
-    setFilter(newFilter);
-  };
-
-  const handleSearchChange = (newSearchTerm) => {
-    setSearchTerm(newSearchTerm);
-  };
+  // ── Data : polices + chemins de glyphes (pour la sidebar ActiveFont) ──
+  const { fonts, glyphPaths, loading, error } = useStaticFontData();
 
-  const handleFontSelect = (font) => {
-    console.log('FontMap: handleFontSelect called with', font);
-    setSelectedFont(font);
-  };
+  // ── Moteur de rendu DebugUMAP (viewBox + SVGs individuels + batch) ──
+  const svgReady = !loading && fonts.length > 0;
+  useMapRenderer({
+    svgRef,
+    fonts,
+    filter,
+    searchTerm,
+    darkMode,
+    loading,
+    enabled: svgReady
+  });
 
-  const handleCloseDetails = () => {
-    setSelectedFont(null);
-  };
+  // ── Zoom simplifié (DebugUMAP-style) ──
+  const { centerOnFont, resetZoom } = useMapZoom(svgRef, svgReady);
 
-  const handleShowAbout = () => {
-    setShowAboutModal(true);
-  };
+  // ── Navigation clavier ──
+  useArrowNavigation(selectedFont, fonts, filter, searchTerm, handleFontSelect);
 
-  const handleCloseAbout = () => {
-    setShowAboutModal(false);
-  };
+  // ── Callbacks ──
+  function handleFontSelect(font) {
+    setSelectedFont(font);
+  }
 
   const handleFontHover = useCallback((font) => {
     setHoveredFont(font);
@@ -73,59 +76,26 @@ const FontMap = ({ darkMode = false }) => {
     setHoveredFont(null);
   }, [setHoveredFont]);
 
-  const handleStartExploring = () => {
-    setAppState('ready');
-  };
-
-  // Hooks personnalisés - Utilisation des données statiques pour la production
-  const { fonts, glyphPaths, loading, error } = useStaticFontData();
-
-  // Hook pour la navigation aux flèches (doit être avant useD3Visualization)
-  useArrowNavigation(
-    selectedFont,
-    fonts,
-    filter,
-    searchTerm,
-    handleFontSelect
-  );
-
-  const svgRef = useD3Visualization(fonts, glyphPaths, filter, searchTerm, darkMode, loading);
-
-  // Initialiser Tweakpane
-  const { isDebugMode } = useTweakpane(darkMode);
-
-  // Calculer les compteurs pour la recherche
-  const totalFonts = fonts.length;
-
-  // Compter les polices correspondant au filtre actif (sans recherche)
-  const filterOnlyCount = filter === 'all' ? totalFonts : fonts.filter(font => font.family === filter).length;
-
-  // Compter les polices correspondant au filtre ET à la recherche
-  const filteredFonts = fonts.filter(font => {
-    const familyMatch = filter === 'all' || font.family === filter;
-    const searchMatch = !searchTerm || font.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      font.family.toLowerCase().includes(searchTerm.toLowerCase());
-    return familyMatch && searchMatch;
-  });
-  const filteredCount = filteredFonts.length;
+  // ── Centrage sur la police sélectionnée / reset au désélect ──
+  useEffect(() => {
+    if (selectedFont) {
+      centerOnFont(selectedFont);
+    } else {
+      resetZoom();
+    }
+  }, [selectedFont, centerOnFont, resetZoom]);
 
-  // Configurer les callbacks globaux pour le TooltipManager
+  // ── Callbacks globaux pour le TooltipManager ──
   useEffect(() => {
     window.onFontHover = handleFontHover;
     window.onFontUnhover = handleFontUnhover;
-
     return () => {
       delete window.onFontHover;
       delete window.onFontUnhover;
     };
   }, [handleFontHover, handleFontUnhover]);
 
-  // Surveiller les changements de selectedFont
-  useEffect(() => {
-    console.log('FontMap: selectedFont state changed to', selectedFont);
-  }, [selectedFont]);
-
-  // Gérer les transitions d'état de l'application
+  // ── Transitions d'état ──
   useEffect(() => {
     if (loading) {
       setAppState('loading');
@@ -134,17 +104,43 @@ const FontMap = ({ darkMode = false }) => {
     }
   }, [loading, fonts.length, appState]);
 
+  // ── Compteurs pour la recherche ──
+  const totalFonts = fonts.length;
+  const filterOnlyCount = filter === 'all' ? totalFonts : fonts.filter(f => f.family === filter).length;
+
+  const filteredFonts = useMemo(() => fonts.filter(font => {
+    const familyMatch = filter === 'all' || font.family === filter;
+    const searchMatch = !searchTerm ||
+      font.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      font.family.toLowerCase().includes(searchTerm.toLowerCase());
+    return familyMatch && searchMatch;
+  }), [fonts, filter, searchTerm]);
+
+  const filteredCount = filteredFonts.length;
+
+  // ── Symboles SVG cachés pour la sidebar (ActiveFont utilise <use>) ──
+  const symbolDefs = useMemo(() => {
+    if (!glyphPaths || Object.keys(glyphPaths).length === 0) return null;
+    return (
+      <svg style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }} aria-hidden="true">
+        <defs>
+          {Object.entries(glyphPaths).map(([id, pathData]) => (
+            <symbol key={id} id={id} viewBox="0 0 80 80">
+              <path d={pathData} fill="currentColor" />
+            </symbol>
+          ))}
+        </defs>
+      </svg>
+    );
+  }, [glyphPaths]);
 
-  // Affichage de l'erreur
   if (error) {
     return (
       <div className="fontmap-container">
         <div className="error">
           <h3>Erreur de chargement</h3>
           <p>{error}</p>
-          <button onClick={() => window.location.reload()}>
-            Recharger la page
-          </button>
+          <button onClick={() => window.location.reload()}>Recharger la page</button>
         </div>
       </div>
     );
@@ -152,6 +148,9 @@ const FontMap = ({ darkMode = false }) => {
 
   return (
     <div className={`fontmap-container ${darkMode ? 'dark-mode' : ''}`}>
+      {/* Symboles SVG cachés pour la sidebar */}
+      {symbolDefs}
+
       {/* Sidebar */}
       <div className="sidebar">
         <div className="sidebar-content">
@@ -159,18 +158,17 @@ const FontMap = ({ darkMode = false }) => {
             <div className="search-section">
               <SearchBar
                 searchTerm={searchTerm}
-                onSearchChange={handleSearchChange}
+                onSearchChange={setSearchTerm}
                 darkMode={darkMode}
                 big={true}
                 filteredCount={filteredCount}
                 totalCount={filterOnlyCount}
                 filter={filter}
               />
-
               <FilterControls
                 fonts={fonts}
                 filter={filter}
-                onFilterChange={handleFilterChange}
+                onFilterChange={setFilter}
               />
             </div>
           </div>
@@ -179,19 +177,13 @@ const FontMap = ({ darkMode = false }) => {
             selectedFont={selectedFont}
             fonts={fonts}
             darkMode={darkMode}
-            onClose={handleCloseDetails}
+            onClose={() => setSelectedFont(null)}
             onFontSelect={handleFontSelect}
           />
-
         </div>
 
-        {/* Footer avec liens How it works et Source */}
         <div className="sidebar-footer">
-          <button
-            className="about-link"
-            onClick={handleShowAbout}
-            title="How FontMap Works"
-          >
+          <button className="about-link" onClick={() => setShowAboutModal(true)} title="How FontMap Works">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <circle cx="12" cy="12" r="10" />
               <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
@@ -199,14 +191,7 @@ const FontMap = ({ darkMode = false }) => {
             </svg>
             How it works
           </button>
-
-          <a
-            className="source-link"
-            href="https://huggingface.co/spaces/huggingface/fontmap"
-            target="_blank"
-            rel="noopener noreferrer"
-            title="View Source on Hugging Face Spaces"
-          >
+          <a className="source-link" href="https://huggingface.co/spaces/huggingface/fontmap" target="_blank" rel="noopener noreferrer" title="View Source on Hugging Face Spaces">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
             </svg>
@@ -217,30 +202,25 @@ const FontMap = ({ darkMode = false }) => {
 
       {/* Zone principale */}
       <div className="main-area">
-        {/* Titre FontMap en position absolue */}
         <h1 className="map-title" data-text="FontMap">FontMap</h1>
 
-        {/* Contrôles du bas */}
         <div className="bottom-controls">
+          <CategoryLegend darkMode={darkMode} />
           <ZoomControls />
         </div>
 
-        {/* Rendu de la carte */}
         <div className="map-container">
           <svg ref={svgRef} className="fontmap-svg"></svg>
           {appState === 'loading' && (
             <div className="map-loading-overlay">
               <div className="map-loading-spinner">
                 <div className="spinner-large"></div>
-                <div className="loading-text">
-                  Loading font map...
-                </div>
+                <div className="loading-text">Loading font map...</div>
               </div>
             </div>
           )}
         </div>
 
-        {/* Gestionnaire de tooltips */}
         {!loading && fonts.length > 0 && (
           <TooltipManager
             selectedFont={selectedFont}
@@ -252,33 +232,22 @@ const FontMap = ({ darkMode = false }) => {
         )}
       </div>
 
-      {/* Overlay unifié pour loading */}
+      {/* Overlays */}
       {appState === 'loading' && (
         <div className="unified-overlay">
-          <div className="loading">
-            Initializing...
-          </div>
+          <div className="loading">Initializing...</div>
         </div>
       )}
 
-      {/* Modale d'introduction */}
       {appState === 'intro' && (
-        <IntroModal
-          onStartExploring={handleStartExploring}
-          darkMode={darkMode}
-        />
+        <IntroModal onStartExploring={() => setAppState('ready')} darkMode={darkMode} />
       )}
 
-      {/* Modale About */}
       {showAboutModal && (
-        <AboutModal
-          onClose={handleCloseAbout}
-          darkMode={darkMode}
-        />
+        <AboutModal onClose={() => setShowAboutModal(false)} darkMode={darkMode} />
       )}
 
-      {/* Moniteur FPS (dev seulement) */}
-      <FPSMonitor isDebugMode={isDebugMode} />
+      {isDebugMode && <FPSMonitor isDebugMode={true} />}
     </div>
   );
 };

src/components/FontMap/components/AboutModal.js

@@ -26,8 +26,8 @@ const AboutModal = ({ onClose, darkMode }) => {
             
             <div className="about-modal-body">
               <p className="about-description">
-                FontMap uses <strong>machine learning</strong> to create an interactive visualization of font relationships. 
-                The process transforms fonts into mathematical representations and uses <strong>dimensionality reduction</strong> to reveal hidden similarities.
+                FontMap uses <strong>FontCLIP</strong>, a vision model fine-tuned for typography, to build an interactive map of font relationships.
+                Each font is encoded into a rich embedding, then projected onto a 2D plane via <strong>UMAP</strong> so that visually similar fonts cluster together.
               </p>
               
               <div className="about-content-grid">
@@ -41,18 +41,18 @@ const AboutModal = ({ onClose, darkMode }) => {
                       <div className="step-content">
                         <div className="step-header">
                           <span className="step-number">1</span>
-                          <strong>Font Rendering</strong>
+                          <strong>Multi-Glyph Rendering</strong>
                         </div>
-                        <p className="step-description">Each font is rendered as a <strong>40×40 pixel</strong> bitmap of the letter "A" for consistent comparison</p>
+                        <p className="step-description">Each font is rendered as a <strong>224 &times; 224</strong> composite image showing multiple representative glyphs, capturing the full typographic character</p>
                       </div>
                       <div className="step-example">
-                        <div className="mini-matrix">
-                          <div className="mini-row">· · ■ ■ · ·</div>
-                          <div className="mini-row">· ■ ■ ■ ■ ·</div>
-                          <div className="mini-row">■ ■ · · ■ ■</div>
-                          <div className="mini-row">■ ■ ■ ■ ■ ■</div>
-                          <div className="mini-row">■ ■ · · ■ ■</div>
-                          <div className="mini-row">■ ■ · · ■ ■</div>
+                        <div className="multi-glyph-demo">
+                          <div className="glyph-grid">
+                            <span style={{fontFamily: 'Georgia, serif', fontSize: '18px', fontWeight: 'bold'}}>Aa</span>
+                            <span style={{fontFamily: 'Georgia, serif', fontSize: '18px'}}>Bb</span>
+                            <span style={{fontFamily: 'Georgia, serif', fontSize: '18px'}}>Rr</span>
+                          </div>
+                          <div className="glyph-grid-label">224 &times; 224</div>
                         </div>
                       </div>
                     </div>
@@ -61,18 +61,18 @@ const AboutModal = ({ onClose, darkMode }) => {
                       <div className="step-content">
                         <div className="step-header">
                           <span className="step-number">2</span>
-                          <strong>Feature Extraction</strong>
+                          <strong>FontCLIP Embeddings</strong>
                         </div>
-                        <p className="step-description">Bitmaps are converted into <strong>1600-dimensional feature vectors</strong> representing pixel intensities</p>
+                        <p className="step-description">
+                          A <strong>CLIP ViT-B/32</strong> model <a href="https://github.com/yukistavailable/FontCLIP" target="_blank" rel="noopener noreferrer" className="inline-link">fine-tuned for typography</a> encodes each image into a <strong>512-dimensional vector</strong> that captures weight, contrast, style and structure
+                        </p>
                       </div>
                       <div className="step-example">
                         <div className="mini-matrix">
-                          <div className="mini-row"><span className="zero-value">0.0</span>,<span className="zero-value">0.0</span>,<strong>0.1,0.1</strong>,<span className="zero-value">0.0</span>,<span className="zero-value">0.0</span></div>
-                          <div className="mini-row"><span className="zero-value">0.0</span>,<strong>0.1,0.1,0.1,0.1</strong>,<span className="zero-value">0.0</span></div>
-                          <div className="mini-row"><strong>0.1,0.1</strong>,<span className="zero-value">0.0</span>,<span className="zero-value">0.0</span>,<strong>0.1,0.1</strong></div>
-                          <div className="mini-row"><strong>0.1,0.1,0.1,0.1,0.1,0.1</strong></div>
-                          <div className="mini-row"><strong>0.1,0.1</strong>,<span className="zero-value">0.0</span>,<span className="zero-value">0.0</span>,<strong>0.1,0.1</strong></div>
-                          <div className="mini-row"><strong>0.1,0.1</strong>,<span className="zero-value">0.0</span>,<span className="zero-value">0.0</span>,<strong>0.1,0.1</strong></div>
+                          <div className="mini-row"><strong>[ 0.42</strong>, -0.13, <strong>0.87</strong>, 0.05, -0.61,</div>
+                          <div className="mini-row">&nbsp;&nbsp;0.29, <strong>-0.74</strong>, 0.18, 0.51, -0.33,</div>
+                          <div className="mini-row">&nbsp;&nbsp;0.02, <strong>0.96</strong>, -0.47, 0.11, 0.68,</div>
+                          <div className="mini-row">&nbsp;&nbsp;-0.22, 0.39, <strong>-0.85</strong>, ... <strong>]</strong></div>
                         </div>
                       </div>
                     </div>
@@ -81,15 +81,24 @@ const AboutModal = ({ onClose, darkMode }) => {
                       <div className="step-content">
                         <div className="step-header">
                           <span className="step-number">3</span>
-                          <strong>Dimensionality Reduction</strong>
+                          <strong>PCA + Font Fusion + UMAP</strong>
                         </div>
                         <p className="step-description">
-                          <strong>UMAP algorithm</strong> projects high-dimensional vectors into <strong>2D space</strong> while preserving similarity relationships
+                          <strong>PCA</strong> reduces noise (512D &rarr; 50D), font family variants are <strong>merged</strong> into single representatives, then <strong>spectral UMAP</strong> projects to 2D
                           <a href="https://pair-code.github.io/understanding-umap/" target="_blank" rel="noopener noreferrer" className="inline-link"> (Learn more about UMAP)</a>
                         </p>
                       </div>
                       <div className="step-example">
-                        <div className="coordinates">
+                        <div className="pipeline-flow">
+                          <div className="pipeline-node">512D</div>
+                          <div className="pipeline-arrow">&rarr;</div>
+                          <div className="pipeline-node">50D</div>
+                          <div className="pipeline-arrow">&rarr;</div>
+                          <div className="pipeline-node">fusion</div>
+                          <div className="pipeline-arrow">&rarr;</div>
+                          <div className="pipeline-node"><strong>2D</strong></div>
+                        </div>
+                        <div className="coordinates" style={{marginTop: '6px'}}>
                           <div className="coord">x: -2.34</div>
                           <div className="coord">y: 1.67</div>
                         </div>
@@ -102,7 +111,7 @@ const AboutModal = ({ onClose, darkMode }) => {
                           <span className="step-number">4</span>
                           <strong>Interactive Visualization</strong>
                         </div>
-                        <p className="step-description">Fonts are positioned on a <strong>2D map</strong> where proximity indicates <strong>visual similarity</strong></p>
+                        <p className="step-description">Fonts are positioned on a <strong>2D map</strong> where proximity indicates <strong>visual similarity</strong> &mdash; nearest neighbors are also pre-computed in high-dimensional space</p>
                       </div>
                       <div className="step-example">
                         <div className="font-cluster-demo">
@@ -122,18 +131,18 @@ const AboutModal = ({ onClose, darkMode }) => {
                 <div className="about-column">
                   <h3 className="about-section-title">Open Source</h3>
                   <p className="about-section-text">
-                    This project is <strong>completely open source</strong> - you can explore the code, modify the parameters, or run it on your own font collection.
+                    This project is <strong>completely open source</strong> &mdash; you can explore the code, modify the parameters, or run it on your own font collection.
                   </p>
                   <p className="about-section-text">
-                    The <strong>complete dataset</strong> is also open source, including all font metadata and positioning data from <a href="https://fonts.google.com" target="_blank" rel="noopener noreferrer" className="google-fonts-link">Google Fonts</a>.
+                    The <strong>complete dataset</strong> is also open source, including all font metadata, FontCLIP embeddings and positioning data from <a href="https://fonts.google.com" target="_blank" rel="noopener noreferrer" className="google-fonts-link">Google Fonts</a>.
                   </p>
                   <a href="https://huggingface.co/spaces/huggingface/fontmap" target="_blank" rel="noopener noreferrer" className="code-link">
-                    View Source on Hugging Face →
+                    View Source on Hugging Face &rarr;
                   </a>
                   
                   <h3 className="about-section-title">About This Project</h3>
                   <p className="about-section-text">
-                    This is a recreation of the original <strong>IDEO Font Map</strong> using modern machine learning techniques.
+                    Inspired by the original <strong>IDEO Font Map</strong>, this version replaces pixel-based features with <strong>FontCLIP</strong> embeddings &mdash; a CLIP model fine-tuned specifically for typography &mdash; producing a more semantically meaningful layout where fonts group by visual style rather than raw pixel similarity.
                   </p>
                 </div>
               </div>

src/components/FontMap/components/ActiveFont.js

@@ -1,7 +1,18 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { getFontSymbolId, generateGoogleFontsUrl } from '../utils/fontUtils';
 import Spinner from '../../Spinner';
 
+const DEFAULT_FONTS = [
+  'Arial, sans-serif',
+  'Times New Roman, serif',
+  'Georgia, serif',
+  'Helvetica, sans-serif',
+  'Courier New, monospace',
+  'Verdana, sans-serif',
+  'Trebuchet MS, sans-serif',
+  'Tahoma, sans-serif'
+];
+
 /**
  * Component to display the active font details and similar fonts
  */
@@ -12,95 +23,99 @@ const ActiveFont = ({ selectedFont, fonts, darkMode, onClose, onFontSelect }) =>
   const imageLoadTimeouts = useRef({});
   const mainSentenceTimeout = useRef(null);
   const [placeholderFontIndex, setPlaceholderFontIndex] = useState(0);
-  
-  // Fonts par défaut du navigateur pour la rotation
-  const defaultFonts = [
-    'Arial, sans-serif',
-    'Times New Roman, serif', 
-    'Georgia, serif',
-    'Helvetica, sans-serif',
-    'Courier New, monospace',
-    'Verdana, sans-serif',
-    'Trebuchet MS, sans-serif',
-    'Tahoma, sans-serif'
-  ];
 
-  // Reset loading states when selectedFont changes
+  // Reset loading states UNIQUEMENT quand selectedFont change
   useEffect(() => {
-    // Ne pas réinitialiser les états si on a déjà du contenu chargé
-    // Cela évite le flicker lors du changement de police
-    const shouldResetStates = !fontPreviewLoaded || !sentencePreviewLoaded;
-    
-    if (shouldResetStates) {
-      setFontPreviewLoaded(false);
-      setSentencePreviewLoaded(false);
-      setSimilarFontsLoaded({});
-    }
-    
-    // Clear any existing timeouts
+    setFontPreviewLoaded(false);
+    setSentencePreviewLoaded(false);
+    setSimilarFontsLoaded({});
+
     Object.values(imageLoadTimeouts.current).forEach(timeout => clearTimeout(timeout));
     imageLoadTimeouts.current = {};
-    
-    // Clear main sentence timeout
+
     if (mainSentenceTimeout.current) {
       clearTimeout(mainSentenceTimeout.current);
       mainSentenceTimeout.current = null;
     }
-    
-    // Simulate SVG loading since use elements don't trigger onLoad
-    const timer = setTimeout(() => {
-      setFontPreviewLoaded(true);
-    }, 100);
-    
-    // Set timeout for main sentence SVG loading
-    mainSentenceTimeout.current = setTimeout(() => {
-      setSentencePreviewLoaded(true);
-    }, 500);
-    
+
+    // <use> elements don't fire onLoad — simulate with a short timeout
+    const timer = setTimeout(() => setFontPreviewLoaded(true), 100);
+
+    mainSentenceTimeout.current = setTimeout(() => setSentencePreviewLoaded(true), 500);
+
     return () => {
       clearTimeout(timer);
       if (mainSentenceTimeout.current) {
         clearTimeout(mainSentenceTimeout.current);
       }
     };
-  }, [selectedFont, fontPreviewLoaded, sentencePreviewLoaded]);
+  }, [selectedFont]);
 
-  // Effet pour faire tourner les polices dans le placeholder
   useEffect(() => {
-    if (selectedFont) return; // Pas de rotation si une police est sélectionnée
-    
+    if (selectedFont) return;
+
     const interval = setInterval(() => {
-      setPlaceholderFontIndex(prev => (prev + 1) % defaultFonts.length);
-    }, 200); // Change toutes les 0.8 secondes
-    
+      setPlaceholderFontIndex(prev => (prev + 1) % DEFAULT_FONTS.length);
+    }, 200);
+
     return () => clearInterval(interval);
-  }, [selectedFont, defaultFonts.length]);
+  }, [selectedFont]);
 
-  // Helper function to handle image loading
-  const handleImageLoad = (fontName) => {
-    // Clear any existing timeout for this font
+  const handleImageLoad = useCallback((fontName) => {
     if (imageLoadTimeouts.current[fontName]) {
       clearTimeout(imageLoadTimeouts.current[fontName]);
       delete imageLoadTimeouts.current[fontName];
     }
-    
     setSimilarFontsLoaded(prev => ({ ...prev, [fontName]: true }));
-  };
+  }, []);
 
-  // Helper function to set a timeout for image loading
-  const setImageLoadTimeout = (fontName) => {
-    // Clear any existing timeout
-    if (imageLoadTimeouts.current[fontName]) {
-      clearTimeout(imageLoadTimeouts.current[fontName]);
+  const similarFonts = useMemo(() => {
+    if (!selectedFont || !fonts || fonts.length === 0) return [];
+    const sel = fonts.find(f => f.name === selectedFont.name);
+    if (!sel) return [];
+
+    // Use pre-computed high-dimensional k-NN neighbors when available
+    if (sel.neighbors && sel.neighbors.length > 0) {
+      const fontById = new Map(fonts.map(f => [f.id, f]));
+      return sel.neighbors
+        .map((neighborId, rank) => {
+          const font = fontById.get(neighborId);
+          if (!font) return null;
+          return { font, distance: rank + 1 };
+        })
+        .filter(Boolean)
+        .slice(0, 4);
     }
-    
-    // Set a timeout to hide spinner if image doesn't load
-    imageLoadTimeouts.current[fontName] = setTimeout(() => {
-      handleImageLoad(fontName);
-    }, 1000); // 1 second timeout for SVG
-  };
 
-  // If no font is selected, show a placeholder
+    // Fallback: Euclidean distance in UMAP 2D space
+    return fonts
+      .filter(f => f.name !== selectedFont.name)
+      .map(f => {
+        const dx = f.x - sel.x;
+        const dy = f.y - sel.y;
+        return { font: f, distance: Math.sqrt(dx * dx + dy * dy) };
+      })
+      .sort((a, b) => a.distance - b.distance)
+      .slice(0, 4);
+  }, [selectedFont, fonts]);
+
+  useEffect(() => {
+    if (similarFonts.length === 0) return;
+    const newTimeouts = {};
+    similarFonts.forEach(({ font }) => {
+      if (!similarFontsLoaded[font.name] && !imageLoadTimeouts.current[font.name]) {
+        const id = setTimeout(() => {
+          handleImageLoad(font.name);
+        }, 1000);
+        imageLoadTimeouts.current[font.name] = id;
+        newTimeouts[font.name] = id;
+      }
+    });
+    return () => {
+      Object.values(newTimeouts).forEach(id => clearTimeout(id));
+    };
+  }, [similarFonts, similarFontsLoaded, handleImageLoad]);
+
   if (!selectedFont) {
     return (
       <div className="font-details">
@@ -118,7 +133,7 @@ const ActiveFont = ({ selectedFont, fonts, darkMode, onClose, onFontSelect }) =>
                 fontWeight="100"
                 opacity={0.65}
                 style={{ 
-                  fontFamily: defaultFonts[placeholderFontIndex],
+                  fontFamily: DEFAULT_FONTS[placeholderFontIndex],
                   fontStyle: 'normal',
                   fontVariant: 'normal'
                 }}
@@ -136,38 +151,6 @@ const ActiveFont = ({ selectedFont, fonts, darkMode, onClose, onFontSelect }) =>
     );
   }
 
-  // Function to calculate the euclidean distance between two points
-  const calculateDistance = (point1, point2) => {
-    if (!point1 || !point2) return Infinity;
-    const dx = point1.x - point2.x;
-    const dy = point1.y - point2.y;
-    return Math.sqrt(dx * dx + dy * dy);
-  };
-
-  // Find the 5 closest fonts
-  const findSimilarFonts = () => {
-    if (!selectedFont || !fonts || fonts.length === 0) return [];
-
-    const selectedFontData = fonts.find(f => f.name === selectedFont.name);
-    if (!selectedFontData) return [];
-
-    // Calculate distances for all other fonts
-    const distances = fonts
-      .filter(font => font.name !== selectedFont.name)
-      .map(font => ({
-        font,
-        distance: calculateDistance(
-          { x: selectedFontData.x, y: selectedFontData.y },
-          { x: font.x, y: font.y }
-        )
-      }))
-      .sort((a, b) => a.distance - b.distance)
-      .slice(0, 4); // Take the 4 closest
-
-    return distances;
-  };
-
-  const similarFonts = findSimilarFonts();
   const symbolId = getFontSymbolId(selectedFont.imageName || selectedFont.name);
   const category = selectedFont.family || 'sans-serif';
   
@@ -305,15 +288,10 @@ const ActiveFont = ({ selectedFont, fonts, darkMode, onClose, onFontSelect }) =>
             <p className="no-similar">No similar fonts found</p>
           ) : (
             <div className="similar-fonts-list">
-              {similarFonts.map(({ font, distance }, index) => {
+              {similarFonts.map(({ font, distance }) => {
                 const imageName = font.imageName || font.name;
                 const sentenceImagePath = `/data/sentences/${imageName.toLowerCase().replace(/\s+/g, '_')}_sentence.svg`;
-                
-                // Set timeout for this font if not already loaded
-                if (!similarFontsLoaded[font.name] && !imageLoadTimeouts.current[font.name]) {
-                  setImageLoadTimeout(font.name);
-                }
-                
+
                 return (
                   <div 
                     key={font.name} 

src/components/FontMap/components/TooltipManager.js

@@ -21,12 +21,11 @@ const TooltipManager = ({
   // Gérer la police sélectionnée
   useEffect(() => {
     if (selectedFont) {
-      // Trouver l'élément SVG correspondant
       const svg = document.querySelector('.fontmap-svg');
       if (svg) {
         const viewportGroup = svg.querySelector('.viewport-group');
         if (viewportGroup) {
-          const selectedGlyph = viewportGroup.querySelector(`[data-font="${selectedFont.name}"]`);
+          const selectedGlyph = viewportGroup.querySelector(`[data-font="${CSS.escape(selectedFont.name)}"]`);
           if (selectedGlyph) {
             handleFontSelect(selectedFont, selectedGlyph);
           }
@@ -40,12 +39,11 @@ const TooltipManager = ({
   // Gérer la police survolée
   useEffect(() => {
     if (hoveredFont && (!selectedFont || selectedFont.name !== hoveredFont.name)) {
-      // Trouver l'élément SVG correspondant
       const svg = document.querySelector('.fontmap-svg');
       if (svg) {
         const viewportGroup = svg.querySelector('.viewport-group');
         if (viewportGroup) {
-          const hoveredGlyph = viewportGroup.querySelector(`[data-font="${hoveredFont.name}"]`);
+          const hoveredGlyph = viewportGroup.querySelector(`[data-font="${CSS.escape(hoveredFont.name)}"]`);
           if (hoveredGlyph) {
             handleFontHover(hoveredFont, hoveredGlyph);
           }

src/components/FontMap/components/controls/CategoryLegend.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useFontMapStore } from '../../../../store/fontMapStore';
+
+const CategoryLegend = () => {
+  const useCategoryColors = useFontMapStore(s => s.useCategoryColors);
+  const setUseCategoryColors = useFontMapStore(s => s.setUseCategoryColors);
+
+  return (
+    <div className="category-legend">
+      <label className="category-legend-toggle">
+        <input
+          type="checkbox"
+          checked={useCategoryColors}
+          onChange={(e) => setUseCategoryColors(e.target.checked)}
+        />
+        <span>Category colors</span>
+      </label>
+    </div>
+  );
+};
+
+export default CategoryLegend;

src/components/FontMap/hooks/useMapRenderer.js

@@ -0,0 +1,383 @@
+import { useEffect, useRef } from 'react';
+import * as d3 from 'd3';
+import { useFontMapStore } from '../../../store/fontMapStore';
+
+const BATCH_SIZE = 50;
+const BATCH_DELAY = 10;
+const GLYPH_SCALE = 0.25;
+
+const CATEGORY_COLORS = {
+  'sans-serif': '#3498db',
+  'serif':      '#e74c3c',
+  'display':    '#f39c12',
+  'handwriting':'#9b59b6',
+  'monospace':  '#2ecc71',
+};
+
+function getGlyphColor(category, useCategoryColors, darkMode) {
+  if (useCategoryColors) {
+    return CATEGORY_COLORS[category] || '#95a5a6';
+  }
+  return darkMode ? '#ffffff' : '#333333';
+}
+
+function calculateMappingDimensions(fonts, width, height, padding = 40) {
+  const xValues = fonts.map(d => d.x);
+  const yValues = fonts.map(d => d.y);
+
+  const xMin = Math.min(...xValues);
+  const xMax = Math.max(...xValues);
+  const yMin = Math.min(...yValues);
+  const yMax = Math.max(...yValues);
+
+  const mapX = (x) => ((x - xMin) / (xMax - xMin)) * (width - 2 * padding) + padding;
+  const mapY = (y) => ((yMax - y) / (yMax - yMin)) * (height - 2 * padding) + padding;
+
+  return { mapX, mapY };
+}
+
+/**
+ * Retourne ou crée le viewport-group (partagé avec useMapZoom).
+ * Ne touche PAS au reste du SVG pour ne pas casser le zoom D3.
+ */
+function getOrCreateViewportGroup(svg) {
+  let vg = svg.select('.viewport-group');
+  if (vg.empty()) {
+    vg = svg.append('g').attr('class', 'viewport-group');
+  }
+  return vg;
+}
+
+/**
+ * Hook de rendu de la carte — moteur DebugUMAP
+ * (viewBox + SVGs individuels + batch loading) avec interactions FontMap.
+ */
+export function useMapRenderer({ svgRef, fonts, filter, searchTerm, darkMode, loading, enabled = true }) {
+  const abortControllerRef = useRef(null);
+  const timeoutRefs = useRef([]);
+  const mappingRef = useRef({ mapX: null, mapY: null });
+  const dimensionsRef = useRef({ width: 0, height: 0 });
+  const hasRenderedRef = useRef(false);
+  const selectedFontRef = useRef(null);
+
+  const {
+    selectedFont,
+    setSelectedFont,
+    setHoveredFont,
+    useCategoryColors
+  } = useFontMapStore();
+
+  // Ref synchronisée pour éviter de rebind les event listeners à chaque sélection
+  selectedFontRef.current = selectedFont;
+
+  // ── Rendu principal : configurer le viewBox et charger les glyphes ──
+  useEffect(() => {
+    if (!enabled || !fonts || fonts.length === 0 || !svgRef.current) return;
+
+    // Cleanup des opérations précédentes
+    if (abortControllerRef.current) abortControllerRef.current.abort();
+    timeoutRefs.current.forEach(t => clearTimeout(t));
+    timeoutRefs.current = [];
+
+    abortControllerRef.current = new AbortController();
+
+    const svg = d3.select(svgRef.current);
+    const parentEl = svgRef.current.parentElement;
+    if (!parentEl) return;
+
+    const width = parentEl.clientWidth || window.innerWidth;
+    const height = parentEl.clientHeight || window.innerHeight;
+    dimensionsRef.current = { width, height };
+
+    // viewBox = clé de l'antialiasing (comme DebugUMAP MapContainer)
+    svg
+      .attr('width', '100%')
+      .attr('height', '100%')
+      .attr('viewBox', `0 0 ${width} ${height}`);
+
+    // Créer ou récupérer le viewport-group — NE PAS supprimer le SVG entier
+    const viewportGroup = getOrCreateViewportGroup(svg);
+
+    // Nettoyer uniquement les glyphes existants (pas le zoom/viewport)
+    viewportGroup.selectAll('g.glyph-group').remove();
+
+    // Calculer le mapping
+    const { mapX, mapY } = calculateMappingDimensions(fonts, width, height);
+    mappingRef.current = { mapX, mapY };
+
+    // Charger les glyphes par batch
+    const loadBatch = (startIndex) => {
+      const endIndex = Math.min(startIndex + BATCH_SIZE, fonts.length);
+      const batch = fonts.slice(startIndex, endIndex);
+
+      const promises = batch.map(font =>
+        fetch(`/data/char/${font.id}_a.svg`, {
+          signal: abortControllerRef.current.signal
+        })
+          .then(res => res.text())
+          .then(svgContent => {
+            if (!svgRef.current || abortControllerRef.current.signal.aborted) return;
+            renderGlyph(viewportGroup, svgContent, font, mapX, mapY, darkMode, useCategoryColors);
+          })
+          .catch(err => {
+            if (err.name !== 'AbortError') {
+              console.warn('Glyph load error:', font.id, err);
+            }
+          })
+      );
+
+      Promise.all(promises).then(() => {
+        if (!svgRef.current || abortControllerRef.current.signal.aborted) return;
+        if (endIndex < fonts.length) {
+          const timeout = setTimeout(() => loadBatch(endIndex), BATCH_DELAY);
+          timeoutRefs.current.push(timeout);
+        } else {
+          hasRenderedRef.current = true;
+        }
+      });
+    };
+
+    loadBatch(0);
+
+    return () => {
+      if (abortControllerRef.current) abortControllerRef.current.abort();
+      timeoutRefs.current.forEach(t => clearTimeout(t));
+      timeoutRefs.current = [];
+    };
+  }, [enabled, fonts, darkMode, useCategoryColors, svgRef]);
+
+  // ── Mise à jour des couleurs (dark mode / category colors toggle) ──
+  useEffect(() => {
+    if (!svgRef.current) return;
+    const viewportGroup = svgRef.current.querySelector('.viewport-group');
+    if (!viewportGroup) return;
+
+    viewportGroup.querySelectorAll('g.glyph-group').forEach(group => {
+      const category = group.getAttribute('data-category');
+      const color = getGlyphColor(category, useCategoryColors, darkMode);
+      group.querySelectorAll('*').forEach(el => {
+        if (el.nodeType === Node.ELEMENT_NODE) {
+          el.setAttribute('fill', color);
+        }
+      });
+    });
+  }, [darkMode, useCategoryColors, svgRef]);
+
+  // ── Labels centroïdes sur la map ──
+  useEffect(() => {
+    if (!svgRef.current || !fonts || fonts.length === 0) return;
+    const svg = d3.select(svgRef.current);
+    const viewportGroup = svg.select('.viewport-group');
+    if (viewportGroup.empty()) return;
+
+    // Labels go in a sibling group AFTER viewport-group so they render on top
+    svg.selectAll('.centroids-group').remove();
+
+    const { mapX, mapY } = mappingRef.current;
+    if (!mapX || !mapY) return;
+
+    const centroids = {};
+    fonts.forEach(font => {
+      const cat = font.family;
+      if (!centroids[cat]) centroids[cat] = { x: 0, y: 0, n: 0 };
+      centroids[cat].x += font.x;
+      centroids[cat].y += font.y;
+      centroids[cat].n += 1;
+    });
+
+    // Copy the current viewport transform so labels follow zoom/pan
+    const currentTransform = viewportGroup.attr('transform') || '';
+    const centroidsGroup = svg.append('g')
+      .attr('class', 'centroids-group')
+      .attr('transform', currentTransform)
+      .style('pointer-events', 'none')
+      .style('user-select', 'none');
+
+    const fillColor = useCategoryColors
+      ? null
+      : (darkMode ? '#ffffff' : '#000000');
+
+    Object.entries(centroids).forEach(([cat, c]) => {
+      const x = mapX(c.x / c.n);
+      const y = mapY(c.y / c.n);
+      const color = fillColor || (CATEGORY_COLORS[cat] || '#95a5a6');
+
+      centroidsGroup.append('text')
+        .attr('x', x)
+        .attr('y', y)
+        .attr('text-anchor', 'middle')
+        .attr('font-size', '16px')
+        .attr('font-weight', 'bold')
+        .attr('fill', color)
+        .attr('stroke', '#ffffff')
+        .attr('stroke-width', '8px')
+        .attr('paint-order', 'stroke fill')
+        .attr('class', 'centroid-label')
+        .text(cat);
+    });
+  }, [fonts, useCategoryColors, darkMode, svgRef]);
+
+  // ── Isolation visuelle (sélection) + opacité (filtre/recherche) ──
+  useEffect(() => {
+    if (!svgRef.current) return;
+    const svg = d3.select(svgRef.current);
+    const viewportGroup = svg.select('.viewport-group');
+    if (viewportGroup.empty()) return;
+
+    // Toujours nettoyer le highlight précédent
+    svg.selectAll('.highlight-group').remove();
+
+    if (selectedFont) {
+      // ── Mode isolation : dim le groupe entier (1 seule op DOM) ──
+      viewportGroup.attr('opacity', 0.1);
+
+      // Cloner le glyphe sélectionné dans un groupe frère hors du dim
+      const selectedGlyph = viewportGroup.select(
+        `g.glyph-group[data-font-id="${selectedFont.id}"]`
+      );
+
+      if (!selectedGlyph.empty()) {
+        const currentTransform = viewportGroup.attr('transform') || '';
+        const highlightGroup = svg.append('g')
+          .attr('class', 'highlight-group')
+          .attr('transform', currentTransform)
+          .style('pointer-events', 'none');
+
+        const clone = selectedGlyph.node().cloneNode(true);
+        clone.setAttribute('opacity', '1');
+        highlightGroup.node().appendChild(clone);
+      }
+
+      // Tous les glyphes restent cliquables pour changer de sélection
+      viewportGroup.selectAll('g.glyph-group')
+        .style('pointer-events', 'all');
+    } else {
+      // ── Mode normal : restaurer l'opacité du groupe ──
+      viewportGroup.attr('opacity', 1);
+
+      const hasFilter = filter !== 'all' || searchTerm;
+
+      if (hasFilter) {
+        const searchLower = searchTerm ? searchTerm.toLowerCase() : '';
+        viewportGroup.selectAll('g.glyph-group').each(function () {
+          const group = this;
+          const fontFamily = group.getAttribute('data-category');
+          const fontName = group.getAttribute('data-font-name');
+
+          const familyMatch = filter === 'all' || fontFamily === filter;
+          const searchMatch = !searchLower ||
+            (fontName && fontName.toLowerCase().includes(searchLower)) ||
+            (fontFamily && fontFamily.toLowerCase().includes(searchLower));
+
+          const match = familyMatch && searchMatch;
+          group.setAttribute('opacity', match ? '1' : '0.06');
+          group.style.pointerEvents = match ? 'all' : 'none';
+        });
+      } else {
+        // Aucun filtre → retirer les attributs d'opacité (état par défaut SVG = 1)
+        viewportGroup.selectAll('g.glyph-group').each(function () {
+          this.removeAttribute('opacity');
+          this.style.pointerEvents = 'all';
+        });
+      }
+    }
+  }, [filter, searchTerm, selectedFont, svgRef]);
+
+  // ── Interactions : hover et click (délégation d'événements) ──
+  useEffect(() => {
+    if (!svgRef.current || !fonts || fonts.length === 0) return;
+
+    const svg = svgRef.current;
+
+    const findGlyphGroup = (target) => {
+      let el = target;
+      while (el && el !== svg) {
+        if (el.classList && el.classList.contains('glyph-group')) return el;
+        el = el.parentElement;
+      }
+      return null;
+    };
+
+    const getFontFromGroup = (group) => {
+      const fontId = group.getAttribute('data-font-id');
+      return fonts.find(f => f.id === fontId) || null;
+    };
+
+    const handleMouseOver = (e) => {
+      if (useFontMapStore.getState().isTransitioning) return;
+      const group = findGlyphGroup(e.target);
+      if (!group) return;
+      const font = getFontFromGroup(group);
+      if (font) setHoveredFont(font);
+    };
+
+    const handleMouseOut = (e) => {
+      if (useFontMapStore.getState().isTransitioning) return;
+      const group = findGlyphGroup(e.target);
+      if (!group) return;
+      setHoveredFont(null);
+    };
+
+    const handleClick = (e) => {
+      const group = findGlyphGroup(e.target);
+      if (!group) {
+        if (selectedFontRef.current) setSelectedFont(null);
+        return;
+      }
+      const font = getFontFromGroup(group);
+      if (font) {
+        setHoveredFont(null);
+        const cur = selectedFontRef.current;
+        setSelectedFont(cur && cur.id === font.id ? null : font);
+      }
+    };
+
+    svg.addEventListener('mouseover', handleMouseOver);
+    svg.addEventListener('mouseout', handleMouseOut);
+    svg.addEventListener('click', handleClick);
+
+    return () => {
+      svg.removeEventListener('mouseover', handleMouseOver);
+      svg.removeEventListener('mouseout', handleMouseOut);
+      svg.removeEventListener('click', handleClick);
+    };
+  }, [fonts, setSelectedFont, setHoveredFont, svgRef]);
+
+  return { mappingRef, dimensionsRef };
+}
+
+// ── Rendu d'un glyphe individuel ──
+
+function renderGlyph(viewportGroup, svgContent, font, mapX, mapY, darkMode, useCategoryColors) {
+  const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  const x = mapX(font.x);
+  const y = mapY(font.y);
+
+  group.setAttribute('transform', `translate(${x}, ${y}) scale(${GLYPH_SCALE})`);
+  group.setAttribute('data-original-transform', `translate(${x}, ${y})`);
+  group.setAttribute('data-font', font.name);
+  group.setAttribute('data-font-id', font.id);
+  group.setAttribute('data-font-name', font.name);
+  group.setAttribute('data-category', font.family);
+  group.setAttribute('class', 'glyph-group');
+  group.style.cursor = 'pointer';
+
+  const parser = new DOMParser();
+  const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
+  const svgElement = svgDoc.querySelector('svg');
+
+  if (svgElement) {
+    while (svgElement.firstChild) {
+      group.appendChild(svgElement.firstChild);
+    }
+  }
+
+  const color = getGlyphColor(font.family, useCategoryColors, darkMode);
+  group.querySelectorAll('*').forEach(el => {
+    if (el.nodeType === Node.ELEMENT_NODE) {
+      el.setAttribute('fill', color);
+    }
+  });
+
+  viewportGroup.node().appendChild(group);
+}

src/components/FontMap/hooks/useMapZoom.js

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useCallback } from 'react';
+import * as d3 from 'd3';
+import { useFontMapStore } from '../../../store/fontMapStore';
+
+const SCALE_EXTENT = [0.4, 10.0];
+const INITIAL_SCALE = 0.8;
+const TRANSITION_DURATION = 750;
+
+/**
+ * Hook de zoom basé sur DebugUMAP.
+ * Fonctionne avec un SVG viewBox → antialiasing natif.
+ *
+ * Le handler sélectionne .viewport-group dynamiquement pour rester
+ * compatible avec useMapRenderer qui peut le recréer.
+ */
+export function useMapZoom(svgRef, enabled = true) {
+  const zoomRef = useRef(null);
+
+  useEffect(() => {
+    if (!enabled || !svgRef.current) return;
+
+    const svg = d3.select(svgRef.current);
+
+    // Le viewport-group doit exister (créé par useMapRenderer)
+    if (svg.select('.viewport-group').empty()) return;
+
+    // Nettoyer un éventuel zoom précédent
+    svg.on('.zoom', null);
+
+    const zoom = d3.zoom()
+      .scaleExtent(SCALE_EXTENT)
+      .on('zoom', (event) => {
+        svg.select('.viewport-group').attr('transform', event.transform);
+        svg.select('.highlight-group').attr('transform', event.transform);
+        svg.select('.centroids-group').attr('transform', event.transform);
+        if (window.updateTooltipTransform) window.updateTooltipTransform(event.transform);
+        if (window.updateTooltipPositions) window.updateTooltipPositions();
+      });
+
+    svg.call(zoom);
+
+    // Zoom initial centré à 80 %
+    const svgRect = svg.node().getBoundingClientRect();
+    const cx = svgRect.width / 2;
+    const cy = svgRect.height / 2;
+    const initialTransform = d3.zoomIdentity
+      .translate(cx * (1 - INITIAL_SCALE), cy * (1 - INITIAL_SCALE))
+      .scale(INITIAL_SCALE);
+    svg.call(zoom.transform, initialTransform);
+
+    zoomRef.current = zoom;
+
+    // Fonctions globales pour ZoomControls
+    window.zoomIn = () => svg.transition().duration(200).call(zoom.scaleBy, 1.5);
+    window.zoomOut = () => svg.transition().duration(200).call(zoom.scaleBy, 1 / 1.5);
+    window.resetZoom = () => {
+      const rect = svg.node().getBoundingClientRect();
+      const rcx = rect.width / 2;
+      const rcy = rect.height / 2;
+      const t = d3.zoomIdentity
+        .translate(rcx * (1 - INITIAL_SCALE), rcy * (1 - INITIAL_SCALE))
+        .scale(INITIAL_SCALE);
+      const store = useFontMapStore.getState();
+      store.setIsTransitioning(true);
+      store.setHoveredFont(null);
+      svg.transition().duration(TRANSITION_DURATION).call(zoom.transform, t)
+        .on('end', () => {
+          useFontMapStore.getState().setIsTransitioning(false);
+        });
+    };
+
+    const svgNode = svgRef.current;
+    return () => {
+      if (svgNode) d3.select(svgNode).on('.zoom', null);
+      delete window.zoomIn;
+      delete window.zoomOut;
+      delete window.resetZoom;
+      zoomRef.current = null;
+    };
+  }, [enabled, svgRef]);
+
+  const centerOnFont = useCallback((font) => {
+    if (!font || !zoomRef.current || !svgRef.current) return;
+
+    const svg = d3.select(svgRef.current);
+    const glyphGroup = svg.select(`g.glyph-group[data-font-id="${font.id}"]`);
+    if (glyphGroup.empty()) return;
+
+    const transformAttr = glyphGroup.attr('data-original-transform');
+    if (!transformAttr) return;
+
+    const match = transformAttr.match(/translate\(([^,]+),\s*([^)]+)\)/);
+    if (!match) return;
+
+    const fontX = parseFloat(match[1]);
+    const fontY = parseFloat(match[2]);
+
+    const svgNode = svgRef.current;
+    const width = svgNode.clientWidth || svgNode.getBoundingClientRect().width;
+    const height = svgNode.clientHeight || svgNode.getBoundingClientRect().height;
+
+    const scale = 2.5;
+    const translateX = width / 2 - fontX * scale;
+    const translateY = height / 2 - fontY * scale;
+
+    const transform = d3.zoomIdentity
+      .translate(translateX, translateY)
+      .scale(scale);
+
+    const store = useFontMapStore.getState();
+    store.setIsTransitioning(true);
+    store.setHoveredFont(null);
+
+    svg.transition()
+      .duration(800)
+      .ease(d3.easeCubicInOut)
+      .call(zoomRef.current.transform, transform)
+      .on('end', () => {
+        useFontMapStore.getState().setIsTransitioning(false);
+      });
+  }, [svgRef]);
+
+  const resetZoom = useCallback(() => {
+    if (window.resetZoom) window.resetZoom();
+  }, []);
+
+  return { centerOnFont, resetZoom };
+}

src/components/FontMap/hooks/useTooltipOptimized.js

@@ -169,27 +169,23 @@ export const useTooltipOptimized = (darkMode) => {
 
     // Mettre à jour le tooltip sélectionné
     if (selectedTooltipRef.current && selectedTooltipRef.current.style('opacity') !== '0') {
-      const selectedGlyph = viewportGroup.selectAll('.font-glyph-group')
-        .filter(function(d) {
-          return d && d.name && window.currentSelectedFont && d.name === window.currentSelectedFont.name;
-        });
-      
-      if (!selectedGlyph.empty()) {
-        const glyphElement = selectedGlyph.node();
-        positionTooltip(selectedTooltipRef.current, glyphElement);
+      const selectedName = window.currentSelectedFont?.name;
+      if (selectedName) {
+        const glyphElement = viewportGroup.node().querySelector(`[data-font="${CSS.escape(selectedName)}"]`);
+        if (glyphElement) {
+          positionTooltip(selectedTooltipRef.current, glyphElement);
+        }
       }
     }
 
     // Mettre à jour le tooltip hover
     if (hoverTooltipRef.current && hoverTooltipRef.current.style('opacity') !== '0') {
-      const hoveredGlyph = viewportGroup.selectAll('.font-glyph-group')
-        .filter(function(d) {
-          return d && d.name && window.currentHoveredFont && d.name === window.currentHoveredFont.name;
-        });
-      
-      if (!hoveredGlyph.empty()) {
-        const glyphElement = hoveredGlyph.node();
-        positionTooltip(hoverTooltipRef.current, glyphElement);
+      const hoveredName = window.currentHoveredFont?.name;
+      if (hoveredName) {
+        const glyphElement = viewportGroup.node().querySelector(`[data-font="${CSS.escape(hoveredName)}"]`);
+        if (glyphElement) {
+          positionTooltip(hoverTooltipRef.current, glyphElement);
+        }
       }
     }
   }, [positionTooltip]);

src/components/FontMap/styles/about-modal.css

@@ -395,6 +395,81 @@
 }
 
 
+/* Multi-Glyph Demo */
+.multi-glyph-demo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  background: var(--color-bg-primary);
+  border-radius: 2px;
+  border: 1px solid var(--color-border-primary);
+}
+
+.dark-mode .multi-glyph-demo {
+  background: var(--color-bg-primary-dark);
+  border-color: var(--color-border-primary-dark);
+}
+
+.glyph-grid {
+  display: flex;
+  gap: 8px;
+  color: var(--color-text-primary);
+}
+
+.dark-mode .glyph-grid {
+  color: var(--color-text-primary-dark);
+}
+
+.glyph-grid-label {
+  font-family: 'Courier New', monospace;
+  font-size: 9px;
+  color: var(--color-text-secondary);
+  opacity: 0.6;
+}
+
+.dark-mode .glyph-grid-label {
+  color: var(--color-text-secondary-dark);
+}
+
+/* Pipeline Flow */
+.pipeline-flow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  background: var(--color-bg-primary);
+  padding: 6px 8px;
+  border-radius: 2px;
+  border: 1px solid var(--color-border-primary);
+}
+
+.dark-mode .pipeline-flow {
+  background: var(--color-bg-primary-dark);
+  border-color: var(--color-border-primary-dark);
+}
+
+.pipeline-node {
+  color: var(--color-text-primary);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.dark-mode .pipeline-node {
+  color: var(--color-text-primary-dark);
+}
+
+.pipeline-arrow {
+  color: var(--color-text-secondary);
+  opacity: 0.5;
+}
+
+.dark-mode .pipeline-arrow {
+  color: var(--color-text-secondary-dark);
+}
+
 /* Animation */
 @keyframes modalSlideIn {
   from {

src/components/FontMap/styles/intro-modal.css

@@ -10,7 +10,6 @@
   align-items: center;
   justify-content: center;
   z-index: 99999;
-  backdrop-filter: blur(4px);
   opacity: 1;
 }
 

src/components/FontMap/styles/layout.css

@@ -15,8 +15,6 @@
   transition: background-color var(--transition-quick);
   display: flex;
   flex-direction: row;
-  /* GPU simple */
-  will-change: transform;
 }
 
 .fontmap-container.dark-mode {
@@ -83,7 +81,6 @@
   align-items: center;
   justify-content: center;
   z-index: 50;
-  backdrop-filter: blur(2px);
 }
 
 .dark-mode .map-loading-overlay {
@@ -256,17 +253,10 @@
   height: 100%;
   display: block;
   cursor: grab;
-  /* Rendu vectoriel optimisé - anti-pixellisation */
+  /* Rendu vectoriel optimisé */
   shape-rendering: geometricPrecision;
   text-rendering: geometricPrecision;
   image-rendering: crisp-edges;
-  /* Force le rendu vectoriel */
-  vector-effect: non-scaling-stroke;
-  /* GPU simple et direct */
-  will-change: transform;
-  /* Responsive */
-  max-width: 100%;
-  max-height: 100%;
   /* Zoom and pan */
   touch-action: none;
   -webkit-touch-callout: none;
@@ -275,9 +265,6 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  /* Force le rendu haute qualité */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 .fontmap-svg:active {
@@ -285,10 +272,9 @@
 }
 
 /* Font glyphs with expanded hit area */
-.font-glyph-group {
+.font-glyph-group,
+.glyph-group {
   cursor: pointer;
-  /* GPU simple */
-  will-change: transform;
 }
 
 .font-hit-area {
@@ -297,64 +283,26 @@
 
 .font-glyph {
   pointer-events: none;
-  /* Rendu vectoriel optimisé */
   shape-rendering: geometricPrecision;
   text-rendering: geometricPrecision;
   image-rendering: crisp-edges;
-  vector-effect: non-scaling-stroke;
-  /* GPU simple */
-  will-change: transform;
-}
-
-/* Specific styles for SVG use elements */
-.font-glyph use {
-  shape-rendering: geometricPrecision !important;
-  text-rendering: geometricPrecision !important;
-  image-rendering: crisp-edges !important;
-  vector-effect: non-scaling-stroke !important;
-}
-
-/* Ensure crisp rendering at all zoom levels */
-.fontmap-svg use {
-  shape-rendering: geometricPrecision !important;
-  text-rendering: geometricPrecision !important;
-  image-rendering: crisp-edges !important;
 }
 
-/* Zoom fluide et réactif - anti-pixellisation */
+/* Viewport group — aligné avec DebugUMAP */
 .viewport-group {
   will-change: transform;
-  /* Force le rendu vectoriel sur le groupe de viewport */
   shape-rendering: geometricPrecision;
   text-rendering: geometricPrecision;
   image-rendering: crisp-edges;
-  /* Optimisation pour les transformations matrix */
   transform-origin: 0 0;
 }
 
-/* Optimisation pour le zoom/pan */
-.fontmap-svg.zooming {
-  cursor: grab;
-}
-
-.fontmap-svg.zooming:active {
-  cursor: grabbing;
-}
-
-/* Force le rendu haute qualité pendant le zoom */
-.fontmap-svg.zooming .viewport-group {
-  /* Force le rendu vectoriel pendant le zoom */
-  shape-rendering: geometricPrecision !important;
-  text-rendering: geometricPrecision !important;
-  image-rendering: crisp-edges !important;
-}
-
-/* Optimisation pour les glyphes pendant le zoom */
-.fontmap-svg.zooming .font-glyph {
-  shape-rendering: geometricPrecision !important;
-  text-rendering: geometricPrecision !important;
-  image-rendering: crisp-edges !important;
-  vector-effect: non-scaling-stroke !important;
+/* Highlight group — clone isolé de la font active, hors du dim */
+.highlight-group {
+  shape-rendering: geometricPrecision;
+  text-rendering: geometricPrecision;
+  image-rendering: crisp-edges;
+  transform-origin: 0 0;
 }
 
 /* Force glyph colors in dark mode */
@@ -404,3 +352,85 @@
 .dark-mode .sidebar-separator {
   background: var(--color-border-primary-dark);
 }
+
+/* Category Legend — small card on the map, aligned with zoom buttons */
+.category-legend {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.dark-mode .category-legend {
+  background: var(--color-bg-primary-dark);
+  border-color: var(--color-border-primary-dark);
+  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
+}
+
+.category-legend-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  user-select: none;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  line-height: 14px;
+}
+
+.dark-mode .category-legend-toggle {
+  color: var(--color-text-primary-dark);
+}
+
+.category-legend-toggle input[type="checkbox"] {
+  width: 12px;
+  height: 12px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--color-text-primary);
+}
+
+.dark-mode .category-legend-toggle input[type="checkbox"] {
+  accent-color: var(--color-text-primary-dark);
+}
+
+.category-legend-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs) var(--spacing-md);
+  margin-top: 2px;
+}
+
+.category-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.category-legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: background 0.2s ease;
+}
+
+.category-legend-label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  text-transform: capitalize;
+}
+
+.dark-mode .category-legend-label {
+  color: var(--color-text-secondary-dark);
+}

src/hooks/useStaticFontData.js

@@ -48,22 +48,24 @@ export function useStaticFontData() {
                     console.warn('⚠️ Error loading/parsing sprite:', e);
                 }
 
-                // 2. Charger les données JSON
-                const response = await fetch('/data/font-map.json');
+                // 2. Charger les données JSON (font-map.json ou fallback typography_data.json)
+                let data;
+                const mapResponse = await fetch('/data/font-map.json');
+                const mapContentType = mapResponse.headers.get('content-type');
 
-                if (!response.ok) {
-                    if (response.status === 404) {
-                        throw new Error('Font map data not found (404). Please export it from Debug view first.');
+                if (mapResponse.ok && mapContentType && mapContentType.includes('application/json')) {
+                    data = await mapResponse.json();
+                    console.log('📍 Loaded from font-map.json');
+                } else {
+                    console.warn('⚠️ font-map.json not available, falling back to typography_data.json');
+                    const fallbackResponse = await fetch('/data/typography_data.json');
+                    if (!fallbackResponse.ok) {
+                        throw new Error('No font data found. Neither font-map.json nor typography_data.json available.');
                     }
-                    const contentType = response.headers.get('content-type');
-                    if (contentType && contentType.includes('text/html')) {
-                        throw new Error('Font map data not found (got HTML instead of JSON). Please export it from Debug view first.');
-                    }
-                    throw new Error(`HTTP Error: ${response.status}`);
+                    data = await fallbackResponse.json();
+                    console.log('📍 Loaded from typography_data.json (fallback)');
                 }
 
-                const data = await response.json();
-
                 if (!data.fonts || !Array.isArray(data.fonts)) {
                     throw new Error('Invalid data format: missing fonts array');
                 }

src/store/fontMapStore.js

@@ -12,6 +12,10 @@ export const useFontMapStore = create((set, get) => ({
   // État de visualisation
   characterSize: 1.5,
   variantSizeImpact: false,
+  useCategoryColors: false,
+  
+  // Animated transition state (zoom/pan to font)
+  isTransitioning: false,
   
   // Mode debug
   debugMode: false,
@@ -38,6 +42,10 @@ export const useFontMapStore = create((set, get) => ({
     set({ variantSizeImpact: impact });
   },
   
+  setUseCategoryColors: (val) => set({ useCategoryColors: val }),
+  
+  setIsTransitioning: (val) => set({ isTransitioning: val }),
+  
   // Actions pour le debug
   setDebugMode: (debug) => {
     console.log('🎯 Store: Setting debugMode to', debug);
@@ -50,8 +58,10 @@ export const useFontMapStore = create((set, get) => ({
     set({
       selectedFont: null,
       hoveredFont: null,
+      isTransitioning: false,
       characterSize: 1.5,
       variantSizeImpact: false,
+      useCategoryColors: false,
       debugMode: false
     });
   }

src/typography/new-pipe/2-generate-svgs.mjs

@@ -60,7 +60,7 @@ function validateSVGQuality(svg, fontFamily) {
 }
 
 /**
- * Génère un SVG de la lettre A à partir d'une police
+ * Génère un SVG de la lettre A à partir d'une police (pour le sprite d'affichage)
  */
 async function generateLetterASVG(fontPath, fontFamily) {
   try {
@@ -133,6 +133,93 @@ async function generateLetterASVG(fontPath, fontFamily) {
   }
 }
 
+/**
+ * Génère un SVG multi-glyphes optimisé pour CLIP embedding.
+ * 
+ * Rend "Hamburgefons" sur 2 lignes dans un carré 224×224, capturant :
+ * - Majuscules/minuscules, ascenders (b,f,h), descenders (g), 
+ *   courbes (o,e,s), diagonales (H,n), empattements, contraste de traits
+ */
+async function generateEmbeddingSVG(fontPath, fontFamily) {
+  const EMBED_LINES = ['Hamburge', 'fonstiv'];
+  const SVG_SIZE = 224;
+  const PADDING = 12;
+
+  try {
+    const fontBuffer = await fs.readFile(fontPath);
+    const font = opentype.parse(fontBuffer.buffer);
+
+    const lineCount = EMBED_LINES.length;
+    const availableHeight = SVG_SIZE - PADDING * 2;
+    const lineHeight = availableHeight / lineCount;
+    const fontSize = Math.floor(lineHeight * 0.75);
+
+    let allPathsData = '';
+
+    for (let lineIdx = 0; lineIdx < lineCount; lineIdx++) {
+      const text = EMBED_LINES[lineIdx];
+      const textPath = font.getPath(text, 0, 0, fontSize);
+      const bbox = textPath.getBoundingBox();
+
+      if (!bbox || bbox.x2 - bbox.x1 <= 0 || bbox.y2 - bbox.y1 <= 0) continue;
+
+      const textWidth = bbox.x2 - bbox.x1;
+      const textHeight = bbox.y2 - bbox.y1;
+
+      const scale = Math.min(
+        (SVG_SIZE - PADDING * 2) / textWidth,
+        lineHeight * 0.85 / textHeight,
+        1.0
+      );
+
+      const scaledWidth = textWidth * scale;
+      const offsetX = (SVG_SIZE - scaledWidth) / 2 - bbox.x1 * scale;
+      const lineY = PADDING + lineIdx * lineHeight + lineHeight / 2;
+      const offsetY = lineY - (bbox.y1 + textHeight / 2) * scale;
+
+      if (scale !== 1.0) {
+        const adjusted = font.getPath(text, 0, 0, fontSize * scale);
+        const adjBbox = adjusted.getBoundingBox();
+        const adjW = adjBbox.x2 - adjBbox.x1;
+        const adjH = adjBbox.y2 - adjBbox.y1;
+        const ox = (SVG_SIZE - adjW) / 2 - adjBbox.x1;
+        const oy = lineY - (adjBbox.y1 + adjH / 2);
+        const final = font.getPath(text, ox, oy, fontSize * scale);
+        allPathsData += ` ${final.toPathData(2)}`;
+      } else {
+        const final = font.getPath(text, offsetX, offsetY, fontSize);
+        allPathsData += ` ${final.toPathData(2)}`;
+      }
+    }
+
+    allPathsData = allPathsData.trim();
+    if (!allPathsData || allPathsData.length < 10) {
+      throw new Error('Embedding SVG paths trop simples ou vides');
+    }
+
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${SVG_SIZE} ${SVG_SIZE}" width="${SVG_SIZE}" height="${SVG_SIZE}">
+  <rect width="${SVG_SIZE}" height="${SVG_SIZE}" fill="white"/>
+  <path d="${allPathsData}" fill="black"/>
+</svg>`;
+
+    return {
+      svg,
+      width: SVG_SIZE,
+      height: SVG_SIZE,
+      lines: EMBED_LINES,
+      fontMetrics: {
+        unitsPerEm: font.unitsPerEm,
+        ascender: font.ascender,
+        descender: font.descender
+      }
+    };
+
+  } catch (error) {
+    console.error(`❌ Error generating embedding SVG for ${fontFamily}:`, error.message);
+    return null;
+  }
+}
+
 /**
  * Génère un SVG de phrase à partir d'une police (vectorisé)
  */
@@ -224,7 +311,7 @@ async function processFontFamily(fontId, fontData, currentIndex, totalFamilies)
     
     const fontPath = path.join(fontDir, ttfFile);
     
-    // Générer le SVG de la lettre A
+    // Générer le SVG de la lettre A (pour l'affichage sprite)
     const letterResult = await generateLetterASVG(fontPath, fontData.family);
     if (!letterResult) {
       throw new Error('Failed de génération du SVG de la lettre A');
@@ -233,6 +320,15 @@ async function processFontFamily(fontId, fontData, currentIndex, totalFamilies)
     // Sauvegarder le SVG de la lettre A
     const letterSvgPath = path.join(SVGS_DIR, `${fontId}_a.svg`);
     await fs.writeFile(letterSvgPath, letterResult.svg, 'utf-8');
+
+    // Générer le SVG multi-glyphes pour CLIP embedding (224×224, "Hamburgefons")
+    const embedResult = await generateEmbeddingSVG(fontPath, fontData.family);
+    if (!embedResult) {
+      throw new Error('Failed de génération du SVG embedding multi-glyphes');
+    }
+
+    const embedSvgPath = path.join(SVGS_DIR, `${fontId}_embed.svg`);
+    await fs.writeFile(embedSvgPath, embedResult.svg, 'utf-8');
     
     // Générer le SVG de la phrase
     const sentenceResult = await generateSentenceSVG(fontPath, fontData.family);
@@ -249,11 +345,16 @@ async function processFontFamily(fontId, fontData, currentIndex, totalFamilies)
       fontId,
       fontFamily: fontData.family,
       letterSvg: letterSvgPath,
+      embedSvg: embedSvgPath,
       sentenceSvg: sentenceSvgPath,
       letterDimensions: {
         width: letterResult.width,
         height: letterResult.height
       },
+      embedDimensions: {
+        width: embedResult.width,
+        height: embedResult.height
+      },
       sentenceDimensions: {
         width: sentenceResult.width,
         height: sentenceResult.height,
@@ -310,11 +411,11 @@ async function main() {
       console.log(chalk.magenta(`\n🔤 [${i + 1}/${fontIds.length}] Traitement de "${fontData.family}" (${fontId})`));
       
       // Démarrer la barre de progression
-      progressBar.start(2, 0, { fontName: fontData.family });
+      progressBar.start(3, 0, { fontName: fontData.family });
       
       const result = await processFontFamily(fontId, fontData, i, fontIds.length);
       
-      progressBar.update(2, { fontName: fontData.family });
+      progressBar.update(3, { fontName: fontData.family });
       progressBar.stop();
       
       results.push(result);
@@ -323,6 +424,7 @@ async function main() {
         successCount++;
         console.log(chalk.green(`✅ SVGs générés pour "${fontData.family}"`));
         console.log(chalk.blue(`   - Lettre A: ${result.letterDimensions.width}x${result.letterDimensions.height}`));
+        console.log(chalk.blue(`   - Embed: ${result.embedDimensions.width}x${result.embedDimensions.height} (multi-glyphes pour CLIP)`));
         console.log(chalk.blue(`   - Phrase: ${result.sentenceDimensions.width}x${result.sentenceDimensions.height} (largeur mesurée: ${result.sentenceDimensions.measuredWidth.toFixed(1)}px)`));
       } else {
         errorCount++;
@@ -375,7 +477,7 @@ async function main() {
     console.log(chalk.cyan('📊 Summary :'));
     console.log(chalk.white(`   - ${successCount} familles traitées avec succès`));
     console.log(chalk.white(`   - ${errorCount} erreurs`));
-    console.log(chalk.white(`   - ${successCount * 2} fichiers SVG générés`));
+    console.log(chalk.white(`   - ${successCount * 3} fichiers SVG générés (lettre A + embed + phrase)`));
     console.log(chalk.white(`   - Dossier de sortie : ${SVGS_DIR}`));
     console.log(chalk.white(`   - Manifest : ${manifestPath}`));
 

src/typography/new-pipe/3-generate-pngs.mjs

@@ -13,7 +13,7 @@ const __dirname = path.dirname(__filename);
 // Configuration
 const SVGS_DIR = path.join(__dirname, 'output', 'svgs');
 const PNGS_DIR = path.join(__dirname, 'output', 'pngs');
-const PNG_SIZE = 40; // Final size 40x40 pixels
+const PNG_SIZE = 224; // Native CLIP ViT-B/32 input resolution
 
 // Configuration de la barre de progression
 const progressBar = new cliProgress.SingleBar({
@@ -168,17 +168,16 @@ async function convertSvgToPng(svgPath, pngPath, fontFamily) {
 }
 
 /**
- * Traite un fichier SVG de lettre A
+ * Traite un fichier SVG pour conversion en PNG.
+ * Accepte les SVG _embed.svg (multi-glyphes pour CLIP) ou _a.svg (fallback).
  */
-async function processLetterASVG(svgFile, currentIndex, totalFiles) {
+async function processEmbedSVG(svgFile, currentIndex, totalFiles) {
   const svgPath = path.join(SVGS_DIR, svgFile);
   
-  // Créer le nom de fichier PNG
   const pngFile = svgFile.replace('.svg', '.png');
   const pngPath = path.join(PNGS_DIR, pngFile);
   
-  // Extraire le nom de la police du nom de fichier
-  const fontId = svgFile.replace('_a.svg', '');
+  const fontId = svgFile.replace('_embed.svg', '').replace('_a.svg', '');
   const fontFamily = fontId.replace(/-/g, ' ');
   
   try {
@@ -221,36 +220,41 @@ async function processLetterASVG(svgFile, currentIndex, totalFiles) {
  */
 async function main() {
   try {
-    console.log(chalk.blue.bold(`🖼️  Génération des PNG ${PNG_SIZE}x${PNG_SIZE} pour toutes les lettres A...\n`));
+    console.log(chalk.blue.bold(`🖼️  Génération des PNG ${PNG_SIZE}x${PNG_SIZE} multi-glyphes pour CLIP...\n`));
 
     // Create directory PNG si nécessaire
     await fs.mkdir(PNGS_DIR, { recursive: true });
     console.log(chalk.green(`📁 Directory created : ${PNGS_DIR}`));
 
-    // Lire tous les fichiers SVG
+    // Lire tous les fichiers SVG — préférer les _embed.svg (multi-glyphes), fallback sur _a.svg
     const svgFiles = await fs.readdir(SVGS_DIR);
+    const embedSvgFiles = svgFiles.filter(file => file.endsWith('_embed.svg'));
     const letterASvgFiles = svgFiles.filter(file => file.endsWith('_a.svg'));
 
-    if (letterASvgFiles.length === 0) {
-      throw new Error('Aucun fichier SVG de lettre A trouvé dans ' + SVGS_DIR);
+    // Construire la liste: utiliser _embed quand disponible, sinon _a
+    const embedIds = new Set(embedSvgFiles.map(f => f.replace('_embed.svg', '')));
+    const fallbackFiles = letterASvgFiles.filter(f => !embedIds.has(f.replace('_a.svg', '')));
+    const targetSvgFiles = [...embedSvgFiles, ...fallbackFiles];
+
+    if (targetSvgFiles.length === 0) {
+      throw new Error('Aucun fichier SVG trouvé dans ' + SVGS_DIR);
     }
 
-    console.log(chalk.cyan(`📁 ${letterASvgFiles.length} fichiers SVG de lettre A trouvés\n`));
+    console.log(chalk.cyan(`📁 ${embedSvgFiles.length} SVG embed (multi-glyphes) + ${fallbackFiles.length} fallback (lettre A)`));
+    console.log(chalk.cyan(`📁 ${targetSvgFiles.length} fichiers SVG à traiter\n`));
 
     const results = [];
     let successCount = 0;
     let errorCount = 0;
 
-    // Traiter chaque fichier SVG
-    for (let i = 0; i < letterASvgFiles.length; i++) {
-      const svgFile = letterASvgFiles[i];
+    for (let i = 0; i < targetSvgFiles.length; i++) {
+      const svgFile = targetSvgFiles[i];
       
-      console.log(chalk.magenta(`\n🔤 [${i + 1}/${letterASvgFiles.length}] Traitement de "${svgFile}"`));
+      console.log(chalk.magenta(`\n🔤 [${i + 1}/${targetSvgFiles.length}] Traitement de "${svgFile}"`));
       
-      // Démarrer la barre de progression
       progressBar.start(1, 0, { fontName: svgFile });
       
-      const result = await processLetterASVG(svgFile, i, letterASvgFiles.length);
+      const result = await processEmbedSVG(svgFile, i, targetSvgFiles.length);
       
       progressBar.update(1, { fontName: svgFile });
       progressBar.stop();
@@ -265,9 +269,8 @@ async function main() {
         console.log(chalk.red(`❌ PNG rejeté : ${result.fontFamily} - ${result.error}`));
       }
       
-      // Afficher le progrès global
-      const progress = ((i + 1) / letterASvgFiles.length) * 100;
-      console.log(chalk.blue(`📈 Progrès global : ${i + 1}/${letterASvgFiles.length} fichiers (${progress.toFixed(1)}%)`));
+      const progress = ((i + 1) / targetSvgFiles.length) * 100;
+      console.log(chalk.blue(`📈 Progrès global : ${i + 1}/${targetSvgFiles.length} fichiers (${progress.toFixed(1)}%)`));
       console.log(chalk.blue(`📊 Success: ${successCount}, Erreurs: ${errorCount}\n`));
     }
 
@@ -275,7 +278,8 @@ async function main() {
     console.log(chalk.cyan('📊 Summary :'));
     console.log(chalk.white(`   - ${successCount} PNG générés avec succès`));
     console.log(chalk.white(`   - ${errorCount} erreurs`));
-    console.log(chalk.white(`   - ${letterASvgFiles.length} fichiers traités`));
+    console.log(chalk.white(`   - ${targetSvgFiles.length} fichiers traités`));
+    console.log(chalk.white(`   - Résolution: ${PNG_SIZE}x${PNG_SIZE} (résolution native CLIP)`));
     console.log(chalk.white(`   - Dossier de sortie : ${PNGS_DIR}`));
 
     if (errorCount > 0) {

src/typography/new-pipe/4-generate-embeddings.mjs

@@ -102,7 +102,7 @@ async function generateCLIPEmbedding(pngPath, fontId) {
  * Extrait les informations de police à partir du nom de fichier et du fichier d'index
  */
 function extractFontInfoFromFilename(filename, fontIndexData) {
-  const fontId = filename.replace('.png', '').replace('_a', '');
+  const fontId = filename.replace('.png', '').replace('_embed', '').replace('_a', '');
   const fontData = fontIndexData[fontId];
   
   if (!fontData) {
@@ -150,10 +150,15 @@ async function loadAllFontDataWithEmbeddings() {
   const fontIndexData = JSON.parse(await fs.readFile(FONT_INDEX_PATH, 'utf8'));
   console.log(chalk.green(`✅ Index chargé: ${Object.keys(fontIndexData).length} polices`));
   
-  // Trouver tous les fichiers PNG
-  // Note: On pourrait utiliser _sentence.png au lieu de _a.png pour plus d'info
+  // Trouver les PNG d'embedding — préférer _embed.png (multi-glyphes), fallback _a.png
   const files = await fs.readdir(PNGS_DIR);
-  const pngFiles = files.filter(file => file.endsWith('_a.png'));
+  const embedPngs = files.filter(file => file.endsWith('_embed.png'));
+  const letterPngs = files.filter(file => file.endsWith('_a.png'));
+  const embedIds = new Set(embedPngs.map(f => f.replace('_embed.png', '')));
+  const fallbackPngs = letterPngs.filter(f => !embedIds.has(f.replace('_a.png', '')));
+  const pngFiles = [...embedPngs, ...fallbackPngs];
+  
+  console.log(chalk.cyan(`📊 ${embedPngs.length} multi-glyphes + ${fallbackPngs.length} fallback lettre A`));
   
   if (pngFiles.length === 0) {
     throw new Error(`Aucun fichier PNG trouvé dans ${PNGS_DIR}`);

src/typography/new-pipe/5-batch-umap.mjs

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'url';
 import path from 'path';
 import fs from 'fs/promises';
 import { UMAP } from 'umap-js';
-import { Matrix } from 'ml-matrix';
+import { Matrix, EVD } from 'ml-matrix';
 import cliProgress from 'cli-progress';
 import chalk from 'chalk';
 
@@ -189,7 +189,7 @@ function mergeFontFamilies(fontDataList, embeddingMatrices, config) {
 }
 
 /**
- * Normalise les données
+ * Normalise les données (Z-score par colonne)
  */
 function normalizeData(data) {
   const matrix = new Matrix(data);
@@ -207,17 +207,115 @@ function normalizeData(data) {
     }
   }
   
-  return normalized.to2DArray();
+  return normalized;
 }
 
+/**
+ * Réduction PCA: 512D → nComponents (défaut 50).
+ * Réduit le bruit, accélère le k-NN, et concentre la variance utile.
+ */
+function applyPCA(matrix, nComponents = 50) {
+  const rows = matrix.rows;
+  const cols = matrix.columns;
+  const target = Math.min(nComponents, cols, rows);
+  
+  // Centrer les données (nécessaire pour PCA)
+  const means = matrix.mean('column');
+  const centered = matrix.clone();
+  for (let i = 0; i < rows; i++) {
+    for (let j = 0; j < cols; j++) {
+      centered.set(i, j, centered.get(i, j) - means[j]);
+    }
+  }
+  
+  // Covariance: (1/n) * X^T * X
+  const cov = centered.transpose().mmul(centered).div(rows - 1);
+  
+  // Eigen decomposition
+  const evd = new EVD(cov);
+  const eigenvalues = evd.realEigenvalues;
+  const eigenvectors = evd.eigenvectorMatrix;
+  
+  // Trier par valeur propre décroissante
+  const indices = eigenvalues
+    .map((val, idx) => ({ val, idx }))
+    .sort((a, b) => b.val - a.val)
+    .map(item => item.idx);
+  
+  // Garder les top nComponents eigenvectors
+  const topIndices = indices.slice(0, target);
+  const projectionMatrix = new Matrix(cols, target);
+  for (let j = 0; j < target; j++) {
+    for (let i = 0; i < cols; i++) {
+      projectionMatrix.set(i, j, eigenvectors.get(i, topIndices[j]));
+    }
+  }
+  
+  // Projeter
+  const projected = centered.mmul(projectionMatrix);
+  
+  // Variance expliquée
+  const totalVariance = eigenvalues.reduce((sum, v) => sum + Math.max(0, v), 0);
+  const explainedVariance = topIndices.reduce((sum, idx) => sum + Math.max(0, eigenvalues[idx]), 0);
+  const varianceRatio = totalVariance > 0 ? (explainedVariance / totalVariance * 100) : 0;
+  
+  console.log(chalk.cyan(`   📐 PCA: ${cols}D → ${target}D (${varianceRatio.toFixed(1)}% variance conservée)`));
+  
+  return projected.to2DArray();
+}
 
 /**
- * Génère l'embedding UMAP avec une config donnée
+ * Calcule la similarité cosine entre deux vecteurs
+ */
+function cosineSimilarity(a, b) {
+  let dot = 0, normA = 0, normB = 0;
+  for (let i = 0; i < a.length; i++) {
+    dot += a[i] * b[i];
+    normA += a[i] * a[i];
+    normB += b[i] * b[i];
+  }
+  const denom = Math.sqrt(normA) * Math.sqrt(normB);
+  return denom === 0 ? 0 : dot / denom;
+}
+
+/**
+ * Pré-calcule les k plus proches voisins dans l'espace haute dimension.
+ * Utilise la distance cosine (1 - similarité) sur les embeddings originaux (avant PCA).
+ */
+function computeHighDimKNN(embeddingMatrices, k = 8) {
+  const n = embeddingMatrices.length;
+  console.log(chalk.cyan(`   🔍 Calcul k-NN (k=${k}) dans l'espace ${embeddingMatrices[0].length}D...`));
+  
+  const neighbors = new Array(n);
+  
+  for (let i = 0; i < n; i++) {
+    const distances = [];
+    for (let j = 0; j < n; j++) {
+      if (i === j) continue;
+      const sim = cosineSimilarity(embeddingMatrices[i], embeddingMatrices[j]);
+      distances.push({ index: j, distance: 1 - sim });
+    }
+    distances.sort((a, b) => a.distance - b.distance);
+    neighbors[i] = distances.slice(0, k).map(d => d.index);
+  }
+  
+  return neighbors;
+}
+
+// Configuration PCA
+const PCA_COMPONENTS = 50;
+const KNN_NEIGHBORS = 8;
+
+/**
+ * Génère l'embedding UMAP avec une config donnée, incluant PCA et k-NN
  */
 function generateUMAPWithConfig(config, embeddingMatrices) {
-  const normalizedData = normalizeData(embeddingMatrices);
+  console.log(chalk.blue(`   🔄 Normalisation Z-score...`));
+  const normalizedMatrix = normalizeData(embeddingMatrices);
+  
+  console.log(chalk.blue(`   🔄 Réduction PCA...`));
+  const pcaData = applyPCA(normalizedMatrix, PCA_COMPONENTS);
   
-  // Générateur aléatoire avec seed optionnel
   let randomFn = Math.random;
   if (config.randomSeed) {
     let seed = config.randomSeed;
@@ -231,28 +329,30 @@ function generateUMAPWithConfig(config, embeddingMatrices) {
     nComponents: 2,
     nNeighbors: config.nNeighbors,
     minDist: config.minDist,
-    metric: 'cosine', // Toujours cosine
+    metric: 'cosine',
     random: randomFn
   };
   
+  console.log(chalk.blue(`   🔄 UMAP (n=${config.nNeighbors}, d=${config.minDist})...`));
   const umap = new UMAP(umapParams);
-  const embedding = umap.fit(normalizedData);
+  const embedding = umap.fit(pcaData);
   
   return embedding;
 }
 
 
 /**
- * Sauvegarde les résultats
+ * Sauvegarde les résultats avec les voisins pré-calculés
  */
-async function saveResults(fontDataList, embedding, config) {
+async function saveResults(fontDataList, embedding, config, knnNeighbors) {
   const timestamp = new Date().toISOString().replace(/:/g, '-').split('.')[0];
   const resultPath = path.join(RESULTS_DIR, `${config.testName}_${timestamp}.json`);
   
   const finalData = fontDataList.map((font, i) => ({
     ...font,
     x: embedding[i][0],
-    y: embedding[i][1]
+    y: embedding[i][1],
+    neighbors: knnNeighbors ? knnNeighbors[i].map(idx => fontDataList[idx].id) : []
   }));
   
   const result = {
@@ -260,8 +360,10 @@ async function saveResults(fontDataList, embedding, config) {
     metadata: {
       generated_at: new Date().toISOString(),
       total_fonts: finalData.length,
-      method: "umap_from_clip_embeddings_pure_visual",
-      note: "100% visual embeddings, no category influence"
+      method: "umap_from_clip_embeddings_enhanced",
+      pca_components: PCA_COMPONENTS,
+      knn_neighbors: KNN_NEIGHBORS,
+      note: "Multi-glyph CLIP embeddings, PCA-reduced, with high-dim k-NN pre-computed"
     },
     fonts: finalData
   };
@@ -281,11 +383,14 @@ async function testConfiguration(config, fontDataList, embeddingMatrices) {
   const { fontDataList: mergedFonts, embeddingMatrices: mergedEmbeddings } = 
     mergeFontFamilies(fontDataList, embeddingMatrices, config);
   
-  // Générer UMAP (directement sur embeddings visuels, sans catégories)
+  // Pré-calculer k-NN dans l'espace haute dimension (avant PCA/UMAP)
+  const knnNeighbors = computeHighDimKNN(mergedEmbeddings, KNN_NEIGHBORS);
+  
+  // Générer UMAP (avec PCA)
   const embedding = generateUMAPWithConfig(config, mergedEmbeddings);
   
-  // Sauvegarder
-  const resultPath = await saveResults(mergedFonts, embedding, config);
+  // Sauvegarder avec les voisins
+  const resultPath = await saveResults(mergedFonts, embedding, config, knnNeighbors);
   
   const duration = (Date.now() - startTime) / 1000;
   

src/typography/new-pipe/8-deploy-to-prod.mjs

@@ -21,9 +21,13 @@ async function deployConfig(configName) {
   try {
     console.log(chalk.blue.bold(`🚀 Déploiement de la config "${configName}" en production\n`));
     
-    // 1. Trouver le fichier de résultat
+    // 1. Trouver le fichier de résultat le plus récent
     const files = await fs.readdir(RESULTS_DIR);
-    const resultFile = files.find(f => f.startsWith(configName + '_'));
+    const matchingFiles = files
+      .filter(f => f.startsWith(configName + '_'))
+      .sort()
+      .reverse();
+    const resultFile = matchingFiles[0];
     
     if (!resultFile) {
       console.error(chalk.red(`❌ Config "${configName}" non trouvée dans les résultats`));

src/typography/new-pipe/python-pipeline/run_fontclip.py

@@ -0,0 +1,348 @@
+#!/usr/bin/env python3
+"""
+FontMap + FontCLIP pipeline.
+
+Uses the pre-trained FontCLIP checkpoint to generate typography-aware
+embeddings, then applies PCA + spectral UMAP + high-dim k-NN.
+
+Usage:
+  cd src/typography/new-pipe/python-pipeline
+  source .venv/bin/activate
+  python run_fontclip.py
+"""
+
+import json
+import os
+import sys
+from pathlib import Path
+
+import numpy as np
+import torch
+from PIL import Image
+from sklearn.decomposition import PCA
+from sklearn.neighbors import NearestNeighbors
+from torchvision.transforms import Compose, Resize, CenterCrop, ToTensor, Normalize
+from tqdm import tqdm
+
+SCRIPT_DIR = Path(__file__).parent.resolve()
+FONTCLIP_DIR = SCRIPT_DIR / "fontclip_workspace" / "FontCLIP"
+CHECKPOINT_PATH = FONTCLIP_DIR / "model_checkpoints" / "model.pt"
+
+PIPE_DIR = SCRIPT_DIR.parent
+PNGS_DIR = PIPE_DIR / "output" / "pngs"
+FONT_INDEX_PATH = PIPE_DIR / "input" / "font-index.json"
+OUTPUT_DIR = PIPE_DIR / "output" / "data"
+RESULTS_DIR = PIPE_DIR / "batch-testing" / "results"
+
+PCA_COMPONENTS = 50
+UMAP_NEIGHBORS = 12
+UMAP_MIN_DIST = 1.0
+KNN_K = 8
+RANDOM_STATE = 42
+ENABLE_FONT_FUSION = True
+
+try:
+    from torchvision.transforms import InterpolationMode
+    BICUBIC = InterpolationMode.BICUBIC
+except ImportError:
+    BICUBIC = Image.BICUBIC
+
+
+def get_preprocess(input_resolution=224):
+    return Compose([
+        Resize(input_resolution, interpolation=BICUBIC),
+        CenterCrop(input_resolution),
+        lambda img: img.convert("RGB"),
+        ToTensor(),
+        Normalize(
+            (0.48145466, 0.4578275, 0.40821073),
+            (0.26862954, 0.26130258, 0.27577711),
+        ),
+    ])
+
+
+def load_fontclip_model(device="cpu"):
+    """Load FontCLIP by importing model code and applying the checkpoint."""
+    saved_cwd = os.getcwd()
+    os.chdir(str(FONTCLIP_DIR))
+    sys.path.insert(0, str(FONTCLIP_DIR))
+
+    try:
+        from models.init_model import load_model
+        from models.lora import LoRAConfig
+
+        lora_config_text = LoRAConfig(
+            r=256, alpha=1024.0, bias=False, learnable_alpha=False,
+            apply_q=True, apply_k=True, apply_v=True, apply_out=True,
+        )
+
+        print("🔄 Loading FontCLIP ViT-B/32 (with LoRA text adapter)...")
+        model = load_model(
+            checkpoint_path=str(CHECKPOINT_PATH),
+            requires_grad=False,
+            device=device,
+            model_name="ViT-B/32",
+            use_lora_text=True,
+            lora_config_text=lora_config_text,
+        )
+    finally:
+        os.chdir(saved_cwd)
+
+    model.eval()
+    input_resolution = model.visual.input_resolution
+    preprocess = get_preprocess(input_resolution)
+    print(f"✅ FontCLIP loaded (input: {input_resolution}×{input_resolution}, device: {device})")
+    return model, preprocess
+
+
+def generate_embeddings(model, preprocess, device="cpu"):
+    """Generate FontCLIP embeddings for all PNGs."""
+    png_files = sorted(PNGS_DIR.glob("*_embed.png"))
+    if not png_files:
+        png_files = sorted(PNGS_DIR.glob("*_a.png"))
+        print(f"⚠️  No _embed.png, falling back to _a.png ({len(png_files)})")
+    else:
+        print(f"📁 Found {len(png_files)} multi-glyph embed PNGs")
+
+    font_ids = []
+    embeddings = []
+
+    for png_path in tqdm(png_files, desc="FontCLIP embeddings"):
+        font_id = png_path.stem.replace("_embed", "").replace("_a", "")
+        font_ids.append(font_id)
+
+        image = preprocess(Image.open(png_path)).unsqueeze(0).to(device)
+
+        with torch.no_grad():
+            feat = model.encode_image(image)
+            feat = feat / feat.norm(dim=-1, keepdim=True)
+
+        embeddings.append(feat.cpu().numpy().squeeze().astype(np.float32))
+
+    embeddings = np.array(embeddings)
+    print(f"✅ {len(embeddings)} embeddings ({embeddings.shape[1]}D)")
+    return font_ids, embeddings
+
+
+def extract_fusion_prefix(font_id, font_meta=None):
+    """Extract family prefix for fusion (mirrors JS extractFusionPrefix)."""
+    parts = font_id.split('-')
+    if len(parts) <= 1:
+        return font_id
+
+    if font_meta:
+        subsets = font_meta.get("subsets", [])
+        common = {'latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'greek', 'greek-ext'}
+        for subset in subsets:
+            if subset not in common and subset in font_id:
+                base = font_id.replace(f'-{subset}', '').replace(subset, '')
+                if base and base != font_id:
+                    return base
+
+    special_cases = {
+        'baloo': ['baloo-2', 'baloo-bhai-2', 'baloo-bhaijaan-2', 'baloo-bhaina-2',
+                  'baloo-chettan-2', 'baloo-da-2', 'baloo-paaji-2', 'baloo-tamma-2',
+                  'baloo-tammudu-2', 'baloo-thambi-2'],
+        'ibm-plex': ['ibm-plex'],
+        'playwrite': ['playwrite'],
+    }
+    for family_prefix, patterns in special_cases.items():
+        for pattern in patterns:
+            if font_id.startswith(pattern):
+                return family_prefix
+
+    if font_id.startswith('noto-serif-'):
+        return 'noto-serif'
+    if font_id.startswith('noto-'):
+        return 'noto'
+
+    second = parts[1]
+    if second in ('sans', 'serif', 'plex'):
+        return '-'.join(parts[:2])
+
+    return parts[0]
+
+
+def merge_font_families(font_ids, embeddings, font_index):
+    """Group font variants by family prefix and pick one representative."""
+    prefix_groups = {}
+
+    for i, fid in enumerate(font_ids):
+        meta = font_index.get(fid, {})
+        prefix = extract_fusion_prefix(fid, meta)
+        if prefix not in prefix_groups:
+            prefix_groups[prefix] = []
+        prefix_groups[prefix].append(i)
+
+    representatives = {
+        'noto': 'noto-sans-arabic',
+        'noto-serif': 'noto-serif-latin',
+        'ibm-plex': 'ibm-plex-sans',
+        'baloo': 'baloo-2',
+    }
+
+    merged_ids = []
+    merged_embeddings = []
+    merged_image_names = []
+
+    for prefix, indices in prefix_groups.items():
+        if len(indices) > 1:
+            rep_idx = indices[0]
+            if prefix in representatives:
+                for idx in indices:
+                    if font_ids[idx] == representatives[prefix]:
+                        rep_idx = idx
+                        break
+            merged_ids.append(prefix)
+            merged_embeddings.append(embeddings[rep_idx])
+            merged_image_names.append(font_ids[rep_idx])
+        else:
+            idx = indices[0]
+            merged_ids.append(font_ids[idx])
+            merged_embeddings.append(embeddings[idx])
+            merged_image_names.append(font_ids[idx])
+
+    merged_embeddings = np.array(merged_embeddings)
+    print(f"🔗 Font fusion: {len(font_ids)} → {len(merged_ids)} fonts ({len(font_ids) - len(merged_ids)} merged)")
+    return merged_ids, merged_embeddings, merged_image_names
+
+
+def run_pca_umap(embeddings):
+    import umap
+
+    print(f"\n📐 PCA: {embeddings.shape[1]}D → {PCA_COMPONENTS}D")
+    pca = PCA(n_components=PCA_COMPONENTS, random_state=RANDOM_STATE)
+    pca_result = pca.fit_transform(embeddings)
+    var = pca.explained_variance_ratio_.sum() * 100
+    print(f"   Variance conservée: {var:.1f}%")
+
+    print(f"🗺️  UMAP: {PCA_COMPONENTS}D → 2D (spectral init, n={UMAP_NEIGHBORS}, d={UMAP_MIN_DIST})")
+    reducer = umap.UMAP(
+        n_components=2,
+        n_neighbors=UMAP_NEIGHBORS,
+        min_dist=UMAP_MIN_DIST,
+        metric="cosine",
+        init="spectral",
+        random_state=RANDOM_STATE,
+        verbose=True,
+    )
+    coords = reducer.fit_transform(pca_result)
+    return coords, var
+
+
+def compute_knn(embeddings):
+    print(f"\n🔍 k-NN (k={KNN_K}) in {embeddings.shape[1]}D...")
+    nn = NearestNeighbors(n_neighbors=KNN_K + 1, metric="cosine", algorithm="brute")
+    nn.fit(embeddings)
+    _, indices = nn.kneighbors(embeddings)
+    return indices[:, 1:]
+
+
+def build_and_save(font_ids, coords, knn_indices, image_names=None):
+    font_index = {}
+    if FONT_INDEX_PATH.exists():
+        with open(FONT_INDEX_PATH) as f:
+            font_index = json.load(f)
+
+    fonts = []
+    for i, fid in enumerate(font_ids):
+        img_name = image_names[i] if image_names else fid
+        entry = {
+            "id": fid,
+            "name": fid,
+            "imageName": img_name,
+            "family": "sans-serif",
+            "x": float(coords[i, 0]),
+            "y": float(coords[i, 1]),
+            "neighbors": [font_ids[j] for j in knn_indices[i]],
+        }
+        lookup_id = img_name if img_name in font_index else fid
+        if lookup_id in font_index:
+            meta = font_index[lookup_id]
+            entry["family"] = meta.get("category", "sans-serif")
+            family = meta.get("family", lookup_id)
+            entry["google_fonts_url"] = f"https://fonts.google.com/specimen/{family.replace(' ', '+')}"
+            entry["weights"] = meta.get("weights", [])
+            entry["styles"] = meta.get("styles", [])
+            entry["subsets"] = meta.get("subsets", [])
+        fonts.append(entry)
+
+    result = {
+        "config": {
+            "nNeighbors": UMAP_NEIGHBORS,
+            "minDist": UMAP_MIN_DIST,
+            "metric": "cosine",
+            "enableFontFusion": ENABLE_FONT_FUSION,
+            "testName": "fontclip-spectral",
+            "randomSeed": RANDOM_STATE,
+        },
+        "metadata": {
+            "method": "umap_from_fontclip_python",
+            "model": "FontCLIP ViT-B/32 (fine-tuned for typography)",
+            "pca_components": PCA_COMPONENTS,
+            "knn_neighbors": KNN_K,
+            "umap_init": "spectral",
+            "total_fonts": len(fonts),
+            "note": "FontCLIP embeddings with spectral UMAP and high-dim k-NN",
+        },
+        "fonts": fonts,
+    }
+
+    os.makedirs(OUTPUT_DIR, exist_ok=True)
+    os.makedirs(RESULTS_DIR, exist_ok=True)
+
+    out1 = OUTPUT_DIR / "typography_data_fontclip.json"
+    with open(out1, "w") as f:
+        json.dump(result, f, indent=2)
+    print(f"💾 Saved: {out1}")
+
+    from datetime import datetime
+    ts = datetime.now().strftime("%Y-%m-%dT%H-%M-%S")
+    out2 = RESULTS_DIR / f"fontclip-spectral_{ts}.json"
+    with open(out2, "w") as f:
+        json.dump(result, f, indent=2)
+    print(f"💾 Saved: {out2}")
+
+    return out1
+
+
+def main():
+    device = "mps" if torch.backends.mps.is_available() else "cpu"
+    print(f"🖥️  Device: {device}\n")
+
+    if not CHECKPOINT_PATH.exists():
+        print(f"❌ Checkpoint manquant: {CHECKPOINT_PATH}")
+        print(f"   Téléchargez-le d'abord via:")
+        print(f"   curl -L 'https://drive.usercontent.google.com/download?id=1Tym7rAIuaGr6Gv-gZRSJmPstQjOWPgl1&export=download&confirm=t' -o '{CHECKPOINT_PATH}'")
+        sys.exit(1)
+    print(f"✅ Checkpoint found: {CHECKPOINT_PATH} ({CHECKPOINT_PATH.stat().st_size / 1e6:.0f} MB)")
+
+    model, preprocess = load_fontclip_model(device)
+    font_ids, embeddings = generate_embeddings(model, preprocess, device)
+
+    np.savez_compressed(OUTPUT_DIR / "embeddings_fontclip.npz", font_ids=font_ids, embeddings=embeddings)
+
+    image_names = None
+    umap_ids = font_ids
+    umap_embeddings = embeddings
+
+    if ENABLE_FONT_FUSION:
+        font_index = {}
+        if FONT_INDEX_PATH.exists():
+            with open(FONT_INDEX_PATH) as f:
+                font_index = json.load(f)
+        umap_ids, umap_embeddings, image_names = merge_font_families(font_ids, embeddings, font_index)
+
+    coords, var = run_pca_umap(umap_embeddings)
+    knn_indices = compute_knn(umap_embeddings)
+    out = build_and_save(umap_ids, coords, knn_indices, image_names)
+
+    print(f"\n🎉 Done! {len(umap_ids)} fonts processed with FontCLIP")
+    print(f"   PCA variance: {var:.1f}%, UMAP spectral init")
+    if ENABLE_FONT_FUSION:
+        print(f"   Font fusion enabled ({len(font_ids)} → {len(umap_ids)})")
+    print(f"\n💡 To deploy: node 8-deploy-to-prod.mjs fontclip-spectral")
+
+
+if __name__ == "__main__":
+    main()