update Image, fix css

app/scripts/TRACKIO-SPACES-MAPPING.md

@@ -0,0 +1,48 @@
+# Mapping des projets Trackio vers leurs Spaces
+
+Ce fichier liste tous les projets Trackio et leurs Space IDs correspondants pour éviter le flooding quand plusieurs embeds sont affichés.
+
+## Projets et leurs Spaces
+
+| Projet | Space ID | URL |
+|--------|----------|-----|
+| attention-loss-comparison | tfrere/loss-attention-loss-comparison | https://huggingface.co/spaces/tfrere/loss-attention-loss-comparison |
+| batch-size-loss-comparison | tfrere/loss-batch-size-loss-comparison | https://huggingface.co/spaces/tfrere/loss-batch-size-loss-comparison |
+| doc-masking-loss-comparison | tfrere/loss-doc-masking-loss-comparison | https://huggingface.co/spaces/tfrere/loss-doc-masking-loss-comparison |
+| lr-loss-comparison | tfrere/loss-lr-loss-comparison | https://huggingface.co/spaces/tfrere/loss-lr-loss-comparison |
+| nope-loss-comparison | tfrere/loss-nope-loss-comparison | https://huggingface.co/spaces/tfrere/loss-nope-loss-comparison |
+| spike-loss-comparison | tfrere/loss-spike-loss-comparison | https://huggingface.co/spaces/tfrere/loss-spike-loss-comparison |
+| tied-embeddings-loss-comparison | tfrere/loss-tied-embeddings-loss-comparison | https://huggingface.co/spaces/tfrere/loss-tied-embeddings-loss-comparison |
+| tp-debug-fix-loss-comparison | tfrere/loss-tp-debug-fix-loss-comparison | https://huggingface.co/spaces/tfrere/loss-tp-debug-fix-loss-comparison |
+| wsd-loss-comparison | tfrere/loss-wsd-loss-comparison | https://huggingface.co/spaces/tfrere/loss-wsd-loss-comparison |
+
+## Utilisation dans l'article
+
+Pour chaque projet, utilise son Space ID spécifique dans l'iframe :
+
+```html
+<!-- Attention Loss -->
+<iframe 
+  src="https://tfrere-loss-attention-loss-comparison.hf.space?project=attention-loss-comparison&metrics=loss&sidebar=hidden&navbar=hidden&xmin=0&xmax=40&smoothing=0" 
+  style="width:100%; height:350px; border:0;">
+</iframe>
+
+<!-- Batch Size Loss -->
+<iframe 
+  src="https://tfrere-loss-batch-size-loss-comparison.hf.space?project=batch-size-loss-comparison&metrics=loss&sidebar=hidden&navbar=hidden&xmin=0&xmax=40&smoothing=0" 
+  style="width:100%; height:350px; border:0;">
+</iframe>
+```
+
+## Avantages
+
+✅ **Pas de flooding** : Chaque embed utilise son propre Space
+✅ **Meilleure performance** : Les requêtes sont distribuées
+✅ **Isolation** : Chaque projet est indépendant
+✅ **Scalabilité** : Facile d'ajouter de nouveaux projets
+
+## Notes
+
+- Les Spaces seront créés automatiquement lors du premier `trackio.init()`
+- Chaque Space a son propre dataset Hugging Face
+- Les Spaces sont publics par défaut (configurable dans le script)

app/scripts/log-all-loss-files-separate-spaces.py

@@ -0,0 +1,183 @@
+#!/usr/bin/env python3
+"""
+Script pour créer un Space Trackio par projet de loss
+Utilise l'API Hugging Face Hub pour créer des Spaces séparés
+"""
+
+import trackio
+import pandas as pd
+import sys
+from pathlib import Path
+from huggingface_hub import HfApi, SpaceCard
+
+def get_project_space_id(project_name):
+    """Génère un space_id unique pour chaque projet"""
+    username = "tfrere"  # Ton username Hugging Face
+    space_name = f"loss-{project_name.replace('-', '-').lower()}"
+    return f"{username}/{space_name}"
+
+def create_space_if_needed(space_id):
+    """Crée un Space s'il n'existe pas déjà"""
+    api = HfApi()
+    
+    try:
+        # Vérifier si le Space existe
+        api.space_info(space_id)
+        print(f"  ✅ Space existant: {space_id}")
+        return space_id
+    except Exception:
+        # Créer le nouveau Space
+        try:
+            print(f"  🆕 Création du Space: {space_id}")
+            # Le Space sera créé automatiquement par Trackio lors du premier init
+            return space_id
+        except Exception as e:
+            print(f"  ⚠️ Erreur lors de la création du Space: {e}")
+            return space_id
+
+def log_loss_file_to_trackio(data_file, project_name=None):
+    """Log un fichier de loss vers Trackio avec son propre Space"""
+    print(f"\n🚀 Traitement de: {data_file.name}")
+    
+    if not data_file.exists():
+        print(f"❌ Fichier non trouvé: {data_file}")
+        return False
+    
+    try:
+        # Charger les données
+        df = pd.read_csv(data_file)
+        print(f"📁 Données chargées: {len(df)} lignes")
+        
+        # Obtenir les runs uniques
+        if 'run_name' not in df.columns:
+            print(f"❌ Pas de colonne 'run_name' dans {data_file.name}")
+            return False
+            
+        runs = df['run_name'].unique()
+        print(f"🔍 Runs à créer ({len(runs)}):")
+        for run in runs:
+            count = len(df[df['run_name'] == run])
+            print(f'  - "{run}": {count} points')
+        
+        # Déterminer le nom du projet et son Space
+        if project_name is None:
+            # Extraire le nom du fichier et créer un nom de projet
+            base_name = data_file.stem.replace('_loss', '').replace('_', '-')
+            project_name = f"{base_name}-comparison"
+        
+        space_id = get_project_space_id(project_name)
+        print(f"🎯 Projet Trackio: {project_name}")
+        print(f"🌐 Space ID: {space_id}")
+        
+        # Créer le Space si nécessaire
+        create_space_if_needed(space_id)
+        
+        # Logger chaque run dans le MÊME projet
+        for i, run_name in enumerate(runs):
+            print(f"\n🌐 Création du run: \"{run_name}\"")
+            
+            # Initialiser Trackio avec le même projet mais son propre Space
+            trackio.init(
+                project=project_name, 
+                space_id=space_id,  # Space unique pour ce projet
+                name=run_name,
+                resume="allow"
+            )
+            
+            # Filtrer les données pour ce run
+            run_data = df[df['run_name'] == run_name]
+            print(f"📊 Logging de {len(run_data)} points...")
+            
+            # Logger les données de ce run
+            for j, (_, row) in enumerate(run_data.iterrows()):
+                log_data = {
+                    "loss": float(row['loss'])
+                }
+                
+                # Utiliser tokens comme axe X principal si disponible
+                if 'tokens' in row:
+                    log_data["tokens"] = float(row['tokens'])
+                else:
+                    # Sinon utiliser un compteur de step
+                    log_data["step"] = j
+                
+                trackio.log(log_data)
+                
+                if j % 100 == 0 and j > 0:
+                    print(f"  ✅ Étape {j}/{len(run_data)}")
+            
+            # Finaliser ce run
+            trackio.finish()
+            print(f"✅ Run \"{run_name}\" terminé!")
+        
+        print(f"\n🎉 Projet {project_name} créé avec {len(runs)} runs dans Space {space_id}!")
+        return True, space_id
+        
+    except Exception as e:
+        print(f"❌ Erreur lors du logging de {data_file.name}: {e}")
+        import traceback
+        traceback.print_exc()
+        return False, None
+
+def main():
+    print("🎯 Logger tous les fichiers de loss vers Trackio")
+    print("=" * 60)
+    print("🔄 Un Space Trackio par projet de loss")
+    print("=" * 60)
+    
+    # Liste des fichiers à traiter
+    data_dir = Path("src/content/assets/data")
+    
+    # Mapping fichier -> nom de projet
+    file_mappings = {
+        "attention_loss.csv": "attention-loss-comparison",
+        "batch-size_loss.csv": "batch-size-loss-comparison",
+        "doc-masking_loss.csv": "doc-masking-loss-comparison",
+        "lr_loss.csv": "lr-loss-comparison",
+        "nope_loss.csv": "nope-loss-comparison",
+        "spike_loss.csv": "spike-loss-comparison",
+        "tied-embeddings_loss.csv": "tied-embeddings-loss-comparison",
+        "tp_debug_fix_loss.csv": "tp-debug-fix-loss-comparison",
+        "wsd_loss.csv": "wsd-loss-comparison",
+    }
+    
+    # Traiter chaque fichier et stocker les space_ids
+    results = {}
+    space_ids = {}
+    
+    for filename, project_name in file_mappings.items():
+        data_file = data_dir / filename
+        if data_file.exists():
+            success, space_id = log_loss_file_to_trackio(data_file, project_name)
+            results[filename] = success
+            if success:
+                space_ids[project_name] = space_id
+        else:
+            print(f"\n⚠️ Fichier non trouvé: {filename}")
+            results[filename] = False
+    
+    # Résumé avec les URLs des Spaces
+    print("\n" + "=" * 60)
+    print("📊 RÉSUMÉ")
+    print("=" * 60)
+    
+    success_count = sum(1 for v in results.values() if v)
+    total_count = len(results)
+    
+    print("\n✅ Projets créés avec leurs Spaces:")
+    for filename, success in results.items():
+        if success:
+            project_name = file_mappings[filename]
+            space_id = space_ids.get(project_name, "N/A")
+            status = "✅"
+            print(f"{status} {filename:30s} → {space_id}")
+    
+    print(f"\n🎉 {success_count}/{total_count} fichiers loggés avec succès!")
+    print(f"\n🌐 URLs des Spaces:")
+    for project_name, space_id in space_ids.items():
+        print(f"  - {project_name}: https://huggingface.co/spaces/{space_id}")
+    
+    return 0 if success_count == total_count else 1
+
+if __name__ == "__main__":
+    exit(main())

app/scripts/log-all-loss-files.py

@@ -0,0 +1,144 @@
+#!/usr/bin/env python3
+"""
+Script générique pour logger n'importe quel fichier de loss vers Trackio
+Un projet Trackio par fichier de loss
+"""
+
+import trackio
+import pandas as pd
+import sys
+from pathlib import Path
+
+def get_project_name_from_file(filename):
+    """Convertit un nom de fichier en nom de projet Trackio"""
+    # Enlever l'extension et les tirets, remplacer par des tirets simples
+    project = filename.replace('_loss.csv', '').replace('_', '-').replace('.csv', '')
+    return f"{project}-comparison"
+
+def log_loss_file_to_trackio(data_file, project_name=None):
+    """Log un fichier de loss vers Trackio"""
+    print(f"\n🚀 Traitement de: {data_file.name}")
+    
+    if not data_file.exists():
+        print(f"❌ Fichier non trouvé: {data_file}")
+        return False
+    
+    try:
+        # Charger les données
+        df = pd.read_csv(data_file)
+        print(f"📁 Données chargées: {len(df)} lignes")
+        
+        # Obtenir les runs uniques
+        if 'run_name' not in df.columns:
+            print(f"❌ Pas de colonne 'run_name' dans {data_file.name}")
+            return False
+            
+        runs = df['run_name'].unique()
+        print(f"🔍 Runs à créer ({len(runs)}):")
+        for run in runs:
+            count = len(df[df['run_name'] == run])
+            print(f'  - "{run}": {count} points')
+        
+        # Déterminer le nom du projet
+        if project_name is None:
+            project_name = get_project_name_from_file(data_file.name)
+        print(f"🎯 Projet Trackio: {project_name}")
+        
+        # Logger chaque run dans le MÊME projet
+        for i, run_name in enumerate(runs):
+            print(f"\n🌐 Création du run: \"{run_name}\"")
+            
+            # Initialiser Trackio avec le même projet
+            trackio.init(
+                project=project_name, 
+                space_id="tfrere/loss-experiment",
+                name=run_name,
+                resume="allow"  # Permettre de reprendre ou créer un nouveau run
+            )
+            
+            # Filtrer les données pour ce run
+            run_data = df[df['run_name'] == run_name]
+            print(f"📊 Logging de {len(run_data)} points...")
+            
+            # Logger les données de ce run
+            for j, (_, row) in enumerate(run_data.iterrows()):
+                log_data = {
+                    "loss": float(row['loss'])
+                }
+                
+                # Utiliser tokens comme axe X principal si disponible
+                if 'tokens' in row:
+                    log_data["tokens"] = float(row['tokens'])
+                else:
+                    # Sinon utiliser un compteur de step
+                    log_data["step"] = j
+                
+                trackio.log(log_data)
+                
+                if j % 100 == 0 and j > 0:
+                    print(f"  ✅ Étape {j}/{len(run_data)}")
+            
+            # Finaliser ce run
+            trackio.finish()
+            print(f"✅ Run \"{run_name}\" terminé!")
+        
+        print(f"\n🎉 Projet {project_name} créé avec {len(runs)} runs!")
+        return True
+        
+    except Exception as e:
+        print(f"❌ Erreur lors du logging de {data_file.name}: {e}")
+        import traceback
+        traceback.print_exc()
+        return False
+
+def main():
+    print("🎯 Logger tous les fichiers de loss vers Trackio")
+    print("=" * 60)
+    print("🔄 Un projet Trackio par fichier de loss")
+    print("=" * 60)
+    
+    # Liste des fichiers à traiter
+    data_dir = Path("src/content/assets/data")
+    
+    # Mapping fichier -> nom de projet (optionnel, sinon généré automatiquement)
+    file_mappings = {
+        "attention_loss.csv": "attention-loss-comparison",
+        "batch-size_loss.csv": "batch-size-loss-comparison",
+        "doc-masking_loss.csv": "doc-masking-loss-comparison",
+        "lr_loss.csv": "lr-loss-comparison",
+        "nope_loss.csv": "nope-loss-comparison",
+        "spike_loss.csv": "spike-loss-comparison",
+        "tied-embeddings_loss.csv": "tied-embeddings-loss-comparison",
+        "tp_debug_fix_loss.csv": "tp-debug-fix-loss-comparison",
+        "wsd_loss.csv": "wsd-loss-comparison",
+    }
+    
+    # Traiter chaque fichier
+    results = {}
+    for filename, project_name in file_mappings.items():
+        data_file = data_dir / filename
+        if data_file.exists():
+            results[filename] = log_loss_file_to_trackio(data_file, project_name)
+        else:
+            print(f"\n⚠️ Fichier non trouvé: {filename}")
+            results[filename] = False
+    
+    # Résumé
+    print("\n" + "=" * 60)
+    print("📊 RÉSUMÉ")
+    print("=" * 60)
+    
+    success_count = sum(1 for v in results.values() if v)
+    total_count = len(results)
+    
+    for filename, success in results.items():
+        status = "✅" if success else "❌"
+        print(f"{status} {filename}")
+    
+    print(f"\n🎉 {success_count}/{total_count} fichiers loggés avec succès!")
+    print(f"📊 Consultez votre dashboard: https://huggingface.co/spaces/tfrere/loss-experiment")
+    
+    return 0 if success_count == total_count else 1
+
+if __name__ == "__main__":
+    exit(main())

app/src/components/Image.astro

@@ -76,6 +76,21 @@ const getOriginalSrc = (imageSrc: any): string => {
 };
 
 const originalSrc = getOriginalSrc(src);
+
+// Apply safe defaults without requiring callers to specify them
+const MAX_DISPLAY_WIDTH = 1800;
+const resolvedFormat = (imgProps as any).format || "webp";
+
+// If no explicit width is provided and we have metadata, cap to MAX_DISPLAY_WIDTH
+let resolvedWidth = (imgProps as any).width;
+if (
+  !resolvedWidth &&
+  src &&
+  typeof src === "object" &&
+  typeof src.width === "number"
+) {
+  resolvedWidth = Math.min(src.width, MAX_DISPLAY_WIDTH);
+}
 const hasCaptionSlot = Astro.slots.has("caption");
 const hasCaption =
   hasCaptionSlot || (typeof caption === "string" && caption.length > 0);
@@ -115,6 +130,8 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
               >
                 <AstroImage
                   src={src}
+                  format={resolvedFormat}
+                  width={resolvedWidth}
                   {...imgProps}
                   data-zoomable={dataZoomable}
                   data-downloadable={dataDownloadable}
@@ -125,6 +142,8 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
             ) : (
               <AstroImage
                 src={src}
+                format={resolvedFormat}
+                width={resolvedWidth}
                 {...imgProps}
                 data-zoomable={dataZoomable}
                 data-downloadable={dataDownloadable}
@@ -152,10 +171,22 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
             target={resolvedTarget}
             rel={resolvedRel}
           >
-            <AstroImage src={src} {...imgProps} data-zoomable={dataZoomable} />
+            <AstroImage
+              src={src}
+              format={resolvedFormat}
+              width={resolvedWidth}
+              {...imgProps}
+              data-zoomable={dataZoomable}
+            />
           </a>
         ) : (
-          <AstroImage src={src} {...imgProps} data-zoomable={dataZoomable} />
+          <AstroImage
+            src={src}
+            format={resolvedFormat}
+            width={resolvedWidth}
+            {...imgProps}
+            data-zoomable={dataZoomable}
+          />
         )}
         <figcaption>
           {hasCaptionSlot ? (
@@ -176,6 +207,8 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
           >
             <AstroImage
               src={src}
+              format={resolvedFormat}
+              width={resolvedWidth}
               {...imgProps}
               data-zoomable={dataZoomable}
               data-downloadable={dataDownloadable}
@@ -186,6 +219,8 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
         ) : (
           <AstroImage
             src={src}
+            format={resolvedFormat}
+            width={resolvedWidth}
             {...imgProps}
             data-zoomable={dataZoomable}
             data-downloadable={dataDownloadable}
@@ -213,6 +248,8 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
       >
         <AstroImage
           src={src}
+          format={resolvedFormat}
+          width={resolvedWidth}
           {...imgProps}
           data-zoomable={dataZoomable}
           class={fullWidth ? "full" : ""}
@@ -221,6 +258,8 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
     ) : (
       <AstroImage
         src={src}
+        format={resolvedFormat}
+        width={resolvedWidth}
         {...imgProps}
         data-zoomable={dataZoomable}
         class={fullWidth ? "full" : ""}

app/src/components/Note.astro

@@ -54,9 +54,9 @@ const hasHeader =
   .note {
     background: var(--surface-bg);
     border-left: 2px solid var(--border-color);
-    border-radius-top-right: 4px;
-    border-radius-bottom-right: 4px;
-    padding: 10px 14px;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    padding: 20px 18px;
     margin: var(--block-spacing-y) 0;
   }
   .note__layout {

app/src/content/embeds/train-model-decision-flowchart.html

@@ -19,29 +19,52 @@
     }
 
     .train-model-decision-flowchart .node-rect {
-        stroke-width: 2px;
-        rx: 12px;
-        ry: 12px;
+        stroke-width: 2.5px;
+        rx: 14px;
+        ry: 14px;
     }
 
     .train-model-decision-flowchart .node-text {
         font-size: 18px;
-        font-weight: 500;
+        font-weight: 600;
         text-anchor: middle;
         pointer-events: none;
         fill: var(--text-color, #333);
     }
 
     .train-model-decision-flowchart .node-question {
-        fill: color-mix(in srgb, var(--primary-color) 30%, var(--page-bg));
+        fill: oklch(from var(--primary-color) calc(l + 0.4) c h / 0.26);
+        stroke: oklch(from var(--primary-color) calc(l + 0.15) c h / 0.5) !important;
     }
 
     .train-model-decision-flowchart .node-success {
-        fill: color-mix(in srgb, var(--success-color) 30%, var(--page-bg));
+        fill: oklch(from var(--success-color) calc(l + 0.4) c h / 0.26);
+        stroke: oklch(from var(--success-color) calc(l + 0.15) c h / 0.5) !important;
     }
 
     .train-model-decision-flowchart .node-category {
-        fill: color-mix(in srgb, var(--danger-color) 25%, var(--page-bg));
+        fill: oklch(from var(--danger-color) calc(l + 0.4) c h / 0.26);
+        stroke: oklch(from var(--danger-color) calc(l + 0.15) c h / 0.5) !important;
+    }
+
+    .train-model-decision-flowchart .node-decision {
+        stroke: var(--border-color, #ddd) !important;
+    }
+
+    /* Dark mode adjustments */
+    [data-theme="dark"] .train-model-decision-flowchart .node-question {
+        fill: oklch(from var(--primary-color) calc(l + 0.3) c h / 0.2);
+        stroke: oklch(from var(--primary-color) calc(l + 0.1) c h / 0.6) !important;
+    }
+
+    [data-theme="dark"] .train-model-decision-flowchart .node-success {
+        fill: oklch(from var(--success-color) calc(l + 0.3) c h / 0.2);
+        stroke: oklch(from var(--success-color) calc(l + 0.1) c h / 0.6) !important;
+    }
+
+    [data-theme="dark"] .train-model-decision-flowchart .node-category {
+        fill: oklch(from var(--danger-color) calc(l + 0.3) c h / 0.2);
+        stroke: oklch(from var(--danger-color) calc(l + 0.1) c h / 0.6) !important;
     }
 
     .train-model-decision-flowchart .link-path {
@@ -185,8 +208,8 @@
                 const nodeExtent = {
                     minX: d3.min(nodes, d => d.x) - 140,
                     maxX: d3.max(nodes, d => d.x) + 140,
-                    minY: d3.min(nodes, d => d.y) - 20,
-                    maxY: d3.max(nodes, d => d.y) + 20
+                    minY: d3.min(nodes, d => d.y),
+                    maxY: d3.max(nodes, d => d.y)
                 };
 
                 const contentWidth = nodeExtent.maxX - nodeExtent.minX;
@@ -423,15 +446,8 @@
                             case 'category': return 'currentColor';
                             default: return colors.decision;
                         }
-                    })
-                    .each(function (d) {
-                        // Set stroke based on type, using CSS variables
-                        const strokeColor = d.type === 'decision'
-                            ? 'var(--border-color, #ddd)'
-                            : 'var(--border-color, #ccc)';
-                        d3.select(this).attr('stroke', strokeColor);
-                    })
-                    .attr('stroke-width', 2);
+                    });
+                // Stroke is handled by CSS classes
 
                 nodeMerge.select('.node-text')
                     .attr('x', d => d.x)