update

app/src/components/HtmlEmbed.astro

@@ -6,13 +6,43 @@ const { src, title, desc, frameless = false, align = 'left' } = Astro.props as P
 const embeds = (import.meta as any).glob('../content/embeds/**/*.html', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
 
 function resolveFragment(requested: string): string | null {
-  // Allow both "banner.html" and "embeds/banner.html"
-  const needle = requested.replace(/^\/*/, '');
-  for (const [key, html] of Object.entries(embeds)) {
-    if (key.endsWith('/' + needle) || key.endsWith('/' + needle.replace(/^embeds\//, ''))) {
-      return html;
+  // Résolution tolérante: accepte avec/sans "embeds/", avec/sans ".html", insensible à la casse, et recherche par basename
+  const norm = (s: string) => String(s || '')
+    .trim()
+    .replace(/^\/*/, '')
+    .replace(/^\.\//, '')
+    .toLowerCase();
+  const raw = norm(requested);
+  const withHtml = raw.endsWith('.html') ? raw : `${raw}.html`;
+  const stripEmbeds = (s: string) => s.replace(/^embeds\//, '');
+  const v1 = raw;
+  const v2 = withHtml;
+  const v3 = stripEmbeds(v1);
+  const v4 = stripEmbeds(v2);
+  const needles = new Set([v1, v2, v3, v4]);
+
+  // Construire table des chemins normalisés -> contenu
+  const entries = Object.entries(embeds).map(([key, html]) => {
+    const nk = norm(key);
+    const base = nk.split('/').pop() || nk;
+    return { nk, base, html };
+  });
+
+  // 1) Correspondance par fin de chemin complète
+  for (const e of entries) {
+    for (const v of needles) {
+      if (e.nk.endsWith('/' + v) || e.nk === v) return e.html;
+    }
+  }
+
+  // 2) Correspondance par basename
+  for (const e of entries) {
+    for (const v of needles) {
+      const vb = v.split('/').pop();
+      if (e.base === vb) return e.html;
     }
   }
+
   return null;
 }
 
@@ -69,7 +99,7 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
   </script>
 
 <style is:global>
-  .html-embed { margin: 0 0 var(--block-spacing-y); overflow: hidden; }
+  .html-embed { margin: 0 0 var(--block-spacing-y); }
   .html-embed__title { 
     text-align: left; 
     font-weight: 600; 

app/src/content/article.mdx

@@ -491,15 +491,9 @@ The chosen models could simply not be powerful enough to recognize and judge the
 
 Even though our first proposal to judge the quality of multimodal data on a per-turn basis did not yield any improvement in model performance, we believe that this is still an exciting and important direction of research and hope the release of **FineVision** encourages the community to develop techniques for this at large scale.
 
----
-<HtmlEmbed src="formatting-filters.html" title="Formatting Filter" desc="Average Rank of Models that have the Formatting Filter above a threshold." />
-<br/>
-<HtmlEmbed src="relevance-filters.html" title="Relevance Filter" desc="Average Rank of Models that have the Relevance Filter above a threshold." />
----
-<HtmlEmbed src="visual-dependency-filters.html" title="Visual Dependency Filter" desc="Average Rank of Models that have the Visual Dependency Filter above a threshold." />
-<br/>
-<HtmlEmbed src="image-correspondence-filters.html" title="Image Correspondence Filter" desc="Average Rank of Models that have the Image-Correspondence Filter above a threshold." />
----
+<Wide>
+<HtmlEmbed src="filters-quad.html" title="Quality Filters Overview" desc="Interactive comparison across thresholds for all four filters: Formatting, Relevance, Visual Dependency, and Image-Question Correspondence." align="center" />
+</Wide>
 
 ### Should you train in multiple stages?