Update landing page: ecosystem diagram, workflow description, naming conventions, validation pipeline

index.html

@@ -9,15 +9,12 @@
     <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
         :root {
-            /* Brand primary */
             --navy: #3E3371;
             --gold: #E8B820;
             --teal: #1FA0A8;
             --teal-text: #167A80;
             --indigo: #4B0082;
             --blue: #8FA3D4;
-
-            /* Light theme (default) */
             --bg: #FFFFFF;
             --bg-subtle: #F8F9FA;
             --bg-card: #F0EDF8;
@@ -27,10 +24,7 @@
             --border: #E9ECEF;
             --heading: var(--navy);
             --link: var(--teal-text);
-            --accent-bg: var(--navy);
-            --accent-text: #FFFFFF;
         }
-
         @media (prefers-color-scheme: dark) {
             :root {
                 --bg: #1a1a2e;
@@ -42,13 +36,9 @@
                 --border: rgba(255,255,255,0.1);
                 --heading: #FFFFFF;
                 --link: #1FA0A8;
-                --accent-bg: var(--navy);
-                --accent-text: #FFFFFF;
             }
         }
-
         * { margin: 0; padding: 0; box-sizing: border-box; }
-
         body {
             font-family: 'Crimson Text', Georgia, serif;
             background: var(--bg);
@@ -56,76 +46,72 @@
             line-height: 1.7;
             font-size: 16px;
         }
-
-        .container {
-            max-width: 860px;
-            margin: 0 auto;
-            padding: 2.5rem 2rem;
-        }
-
-        /* Typography */
+        .container { max-width: 860px; margin: 0 auto; padding: 2.5rem 2rem; }
         h1, h2, h3 {
             font-family: 'Barlow', -apple-system, sans-serif;
             color: var(--heading);
             line-height: 1.3;
         }
-
-        h1 {
-            font-size: 2.2rem;
-            font-weight: 700;
-            margin-bottom: 0.15rem;
-        }
-
+        h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.15rem; }
         h1 .edge { color: var(--heading); }
         h1 .first { color: var(--gold); }
-
         h2 {
-            font-size: 1.15rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.06em;
-            margin-top: 2.5rem;
-            margin-bottom: 0.75rem;
-            padding-bottom: 0.35rem;
-            border-bottom: 2px solid var(--gold);
+            font-size: 1.15rem; font-weight: 600;
+            text-transform: uppercase; letter-spacing: 0.06em;
+            margin-top: 2.5rem; margin-bottom: 0.75rem;
+            padding-bottom: 0.35rem; border-bottom: 2px solid var(--gold);
         }
-
         .tagline {
-            font-family: 'Barlow', sans-serif;
-            font-weight: 500;
-            letter-spacing: 0.12em;
-            text-transform: uppercase;
-            color: var(--text-muted);
-            font-size: 0.85rem;
-            margin-bottom: 1.5rem;
+            font-family: 'Barlow', sans-serif; font-weight: 500;
+            letter-spacing: 0.12em; text-transform: uppercase;
+            color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.5rem;
         }
-
         p { margin-bottom: 1rem; }
-
         a { color: var(--link); text-decoration: none; }
         a:hover { text-decoration: underline; color: var(--navy); }
-        @media (prefers-color-scheme: dark) {
-            a:hover { color: var(--gold); }
-        }
-
-        /* Badges row */
-        .badges {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.4rem;
-            margin: 1.25rem 0;
-        }
+        @media (prefers-color-scheme: dark) { a:hover { color: var(--gold); } }
+        .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0; }
         .badges img { height: 22px; }
-
-        /* Link badges */
-        .link-badges {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.4rem;
+        .link-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.5rem 0; }
+        .link-badges img { height: 28px; }
+        /* Workflow diagram */
+        .diagram-container {
             margin: 1.5rem 0;
+            text-align: center;
+        }
+        .diagram-container img {
+            max-width: 100%;
+            height: auto;
+        }
+        /* Naming table */
+        .naming-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 0.75rem 0;
+            font-family: 'Barlow', sans-serif;
+            font-size: 0.9rem;
+        }
+        .naming-table th {
+            text-align: left;
+            padding: 0.4rem 0.6rem;
+            font-weight: 600;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            color: var(--text-muted);
+            border-bottom: 2px solid var(--border);
+        }
+        .naming-table td {
+            padding: 0.35rem 0.6rem;
+            border-bottom: 1px solid var(--border);
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.82rem;
+        }
+        .naming-table td:first-child {
+            font-family: 'Barlow', sans-serif;
+            font-weight: 500;
+            color: var(--text-strong);
         }
-        .link-badges img { height: 28px; }
-
         /* Architecture table */
         .arch-table {
             width: 100%;
@@ -137,10 +123,8 @@
         .arch-table th {
             text-align: left;
             padding: 0.5rem 0.75rem;
-            font-weight: 600;
-            font-size: 0.8rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
+            font-weight: 600; font-size: 0.8rem;
+            text-transform: uppercase; letter-spacing: 0.05em;
             color: var(--text-muted);
             border-bottom: 2px solid var(--border);
         }
@@ -155,75 +139,52 @@
         }
         .roadmap-tag {
             font-family: 'Barlow', sans-serif;
-            font-size: 0.7rem;
-            font-weight: 600;
-            padding: 0.1rem 0.45rem;
-            border-radius: 3px;
-            background: var(--indigo);
-            color: #fff;
-            vertical-align: middle;
-            margin-left: 0.3rem;
-            letter-spacing: 0.03em;
-            text-transform: uppercase;
+            font-size: 0.7rem; font-weight: 600;
+            padding: 0.1rem 0.45rem; border-radius: 3px;
+            background: var(--indigo); color: #fff;
+            vertical-align: middle; margin-left: 0.3rem;
+            letter-spacing: 0.03em; text-transform: uppercase;
         }
-
-        /* Model section sub-headings */
-        h3.model-section, .container > h3 {
-            font-size: 0.95rem;
-            font-weight: 600;
+        .wip-tag {
+            font-family: 'Barlow', sans-serif;
+            font-size: 0.7rem; font-weight: 600;
+            padding: 0.1rem 0.45rem; border-radius: 3px;
+            background: var(--gold); color: #333;
+            vertical-align: middle; margin-left: 0.3rem;
+            letter-spacing: 0.03em; text-transform: uppercase;
+        }
+        /* Model sub-headings */
+        .container > h3 {
+            font-size: 0.95rem; font-weight: 600;
             color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-top: 1.25rem;
-            margin-bottom: 0.5rem;
+            text-transform: uppercase; letter-spacing: 0.05em;
+            margin-top: 1.25rem; margin-bottom: 0.5rem;
         }
-
-        /* Model grid */
         .model-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-            gap: 0.75rem;
-            margin: 1rem 0;
+            gap: 0.75rem; margin: 1rem 0;
         }
         .model-card {
             font-family: 'Barlow', sans-serif;
             background: var(--bg-card);
-            padding: 0.85rem 1rem;
-            border-radius: 5px;
+            padding: 0.85rem 1rem; border-radius: 5px;
             border-left: 3px solid var(--gold);
             transition: border-color 0.15s;
         }
         .model-card:hover { border-left-color: var(--teal); }
-        .model-card h3 {
-            font-size: 0.95rem;
-            font-weight: 600;
-            margin-bottom: 0.2rem;
-        }
+        .model-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; }
         .model-card h3 a { color: var(--text-strong); }
         .model-card h3 a:hover { color: var(--link); text-decoration: none; }
-        .model-card .meta {
-            color: var(--text-muted);
-            font-size: 0.82rem;
-            font-weight: 400;
-        }
-
-        /* Studio section */
-        .studio-features {
-            margin: 0.75rem 0 0 1.25rem;
-            color: var(--text);
-            font-size: 0.95rem;
-        }
+        .model-card .meta { color: var(--text-muted); font-size: 0.82rem; font-weight: 400; }
+        .studio-features { margin: 0.75rem 0 0 1.25rem; color: var(--text); font-size: 0.95rem; }
         .studio-features li { margin-bottom: 0.25rem; }
-
-        /* Footer */
         .footer {
-            margin-top: 3rem;
-            padding-top: 1.5rem;
+            margin-top: 3rem; padding-top: 1.5rem;
             border-top: 1px solid var(--border);
             text-align: center;
             font-family: 'Barlow', sans-serif;
-            font-size: 0.8rem;
-            color: var(--text-muted);
+            font-size: 0.8rem; color: var(--text-muted);
         }
         .footer a { color: var(--text-muted); }
         .footer a:hover { color: var(--link); }
@@ -245,60 +206,45 @@
             <a href="https://www.au-zone.com"><img src="https://img.shields.io/badge/Au--Zone_Technologies-6C757D?style=for-the-badge" alt="Au-Zone Technologies"></a>
         </div>
 
+        <h2>Workflow</h2>
+
+        <div class="diagram-container">
+            <img src="01-ecosystem.svg" alt="EdgeFirst Model Zoo Ecosystem: Training, Validation, and Publication Workflow">
+        </div>
+
+        <p>
+            Every model in the EdgeFirst Model Zoo passes through a validated pipeline. <a href="https://edgefirst.studio"><strong>EdgeFirst Studio</strong></a> manages datasets, training, multi-format export (ONNX, TFLite INT8, eIQ Neutron, Kinara DVM, HailoRT HEF, TensorRT), and reference validation. Models are then deployed to our board farm for <strong>full-dataset on-target validation</strong> on real hardware &mdash; measuring both accuracy (mAP) and detailed timing breakdown per device. Results are published here on HuggingFace with per-platform performance tables.
+        </p>
+
         <h2>Supported Hardware</h2>
         <div class="badges">
             <img src="https://img.shields.io/badge/NXP-i.MX_8M_Plus-3E3371?style=flat-square&logoColor=white" alt="NXP i.MX 8M Plus">
-            <img src="https://img.shields.io/badge/NXP-i.MX_93-3E3371?style=flat-square&logoColor=white" alt="NXP i.MX 93">
             <img src="https://img.shields.io/badge/NXP-i.MX_95-3E3371?style=flat-square&logoColor=white" alt="NXP i.MX 95">
             <img src="https://img.shields.io/badge/NXP-Ara240-3E3371?style=flat-square&logoColor=white" alt="NXP Ara240">
             <img src="https://img.shields.io/badge/RPi5-Hailo--8%2F8L-1FA0A8?style=flat-square&logoColor=white" alt="RPi5 + Hailo-8/8L">
             <img src="https://img.shields.io/badge/NVIDIA-Jetson-76B900?style=flat-square&logoColor=white" alt="NVIDIA Jetson">
         </div>
 
-        <h2>Architecture</h2>
-        <table class="arch-table">
-            <tr>
-                <th>Layer</th>
-                <th>Description</th>
-            </tr>
-            <tr>
-                <td>Foundation</td>
-                <td>Hardware abstraction, video I/O, accelerated inference delegates</td>
-            </tr>
-            <tr>
-                <td>Zenoh</td>
-                <td>Modular perception pipeline over Zenoh pub/sub</td>
-            </tr>
-            <tr>
-                <td>GStreamer</td>
-                <td>Spatial perception elements for GStreamer / NNStreamer</td>
-            </tr>
-            <tr>
-                <td>ROS 2</td>
-                <td>Native ROS 2 nodes extending Zenoh microservices <span class="roadmap-tag">Roadmap</span></td>
-            </tr>
-        </table>
-
         <h2>Model Zoo</h2>
-        <p>Pre-trained YOLO models for edge deployment &mdash; ONNX FP32 and TFLite INT8 with platform-specific compiled variants.</p>
+        <p>Pre-trained YOLO models for edge deployment. Each model repo contains all sizes (nano through x-large), ONNX FP32 and TFLite INT8 formats, with platform-specific compiled variants as they become available.</p>
 
         <h3>Detection</h3>
         <div class="model-grid">
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolo26-det">YOLO26</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano mAP@0.5: 54.9%</p>
+                <p class="meta">n/s/m/l/x &middot; COCO 80 classes &middot; Nano mAP@0.5: 54.9%</p>
             </div>
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolo11-det">YOLO11</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano mAP@0.5: 53.4%</p>
+                <p class="meta">n/s/m/l/x &middot; COCO 80 classes &middot; Nano mAP@0.5: 53.4%</p>
             </div>
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolov8-det">YOLOv8</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano mAP@0.5: 50.2%</p>
+                <p class="meta">n/s/m/l/x &middot; COCO 80 classes &middot; Nano mAP@0.5: 50.2%</p>
             </div>
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolov5-det">YOLOv5</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano mAP@0.5: 49.6%</p>
+                <p class="meta">n/s/m/l/x &middot; COCO 80 classes &middot; Nano mAP@0.5: 49.6%</p>
             </div>
         </div>
 
@@ -306,25 +252,62 @@
         <div class="model-grid">
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolo26-seg">YOLO26</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano Mask mAP: 37.0%</p>
+                <p class="meta">n/s/m/l/x &middot; COCO 80 classes &middot; Nano Mask mAP: 37.0%</p>
             </div>
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolo11-seg">YOLO11</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano Mask mAP: 35.5%</p>
+                <p class="meta">n/s/m/l/x &middot; COCO 80 classes &middot; Nano Mask mAP: 35.5%</p>
             </div>
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolov8-seg">YOLOv8</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano Mask mAP: 34.1%</p>
+                <p class="meta">n/s/m/l/x &middot; COCO 80 classes &middot; Nano Mask mAP: 34.1%</p>
             </div>
         </div>
 
+        <h2>Naming Convention</h2>
+        <p>Each HuggingFace repo contains one model family for one task, with all size variants inside.</p>
+        <table class="naming-table">
+            <tr><th>Component</th><th>Pattern</th><th>Example</th></tr>
+            <tr><td>HF Repo</td><td>EdgeFirst/{version}-{task}</td><td>EdgeFirst/yolov8-det</td></tr>
+            <tr><td>ONNX Model</td><td>{version}{size}-{task}-coco.onnx</td><td>yolov8n-det-coco.onnx</td></tr>
+            <tr><td>TFLite Model</td><td>{version}{size}-{task}-coco-int8.tflite</td><td>yolov8n-det-coco-int8.tflite</td></tr>
+            <tr><td>Studio Project</td><td>{Dataset} {Task}</td><td>COCO Detection</td></tr>
+            <tr><td>Studio Experiment</td><td>{Version} {Task}</td><td>YOLOv8 Detection</td></tr>
+        </table>
+
+        <h2>Validation Pipeline</h2>
+        <p>Models go through two validation stages before publication:</p>
+        <table class="arch-table">
+            <tr><th>Stage</th><th>What</th><th>Where</th></tr>
+            <tr>
+                <td>Reference</td>
+                <td>ONNX FP32 and TFLite INT8 mAP on full COCO val2017 (5000 images)</td>
+                <td>EdgeFirst Studio (cloud)</td>
+            </tr>
+            <tr>
+                <td>On-Target</td>
+                <td>Full dataset mAP + timing breakdown (load, preproc, invoke, decode, e2e) per device</td>
+                <td>Board farm (real hardware) <span class="wip-tag">In Progress</span></td>
+            </tr>
+        </table>
+
+        <h2>Perception Architecture</h2>
+        <table class="arch-table">
+            <tr><th>Layer</th><th>Description</th></tr>
+            <tr><td>Foundation</td><td>Hardware abstraction, video I/O, accelerated inference delegates</td></tr>
+            <tr><td>Zenoh</td><td>Modular perception pipeline over Zenoh pub/sub</td></tr>
+            <tr><td>GStreamer</td><td>Spatial perception elements for GStreamer / NNStreamer</td></tr>
+            <tr><td>ROS 2</td><td>Native ROS 2 nodes extending Zenoh microservices <span class="roadmap-tag">Roadmap</span></td></tr>
+        </table>
+
         <h2>EdgeFirst Studio</h2>
         <p>
-            <a href="https://edgefirst.studio"><strong>EdgeFirst Studio</strong></a> is the companion SaaS platform for the complete perception development lifecycle. <strong>Free tier available.</strong>
+            <a href="https://edgefirst.studio"><strong>EdgeFirst Studio</strong></a> is the MLOps platform that drives the entire model zoo pipeline. <strong>Free tier available.</strong>
         </p>
         <ul class="studio-features">
             <li>Dataset management &amp; AI-assisted annotation</li>
-            <li>YOLO model training with automatic INT8 quantization</li>
+            <li>Model training with automatic multi-format export and INT8 quantization</li>
+            <li>Reference and on-target validation with full metrics collection</li>
             <li>CameraAdaptor integration for native sensor format training</li>
             <li>Deploy trained models to edge devices via the <a href="https://github.com/EdgeFirstAI/client">EdgeFirst Client</a> CLI</li>
         </ul>