Import AITURK IDE 1.0.0-beta.1 from Hermes 63279301; preserve MIT license

optional-skills/creative/concept-diagrams/examples/ml-benchmark-grouped-bar-chart.md

@@ -0,0 +1,114 @@
+# ML Benchmark Grouped Bar Chart with Dual Axis
+
+A quantitative data visualization comparing LLM inference speed across quantization levels with dual Y-axes, threshold markers, and an inset accuracy table.
+
+## Key Patterns Used
+
+- **Grouped bars**: Min/max range pairs per category using semantic color pairs (lighter=min, darker=max)
+- **Dual Y-axis**: Left axis for primary metric (tok/s), right axis for secondary metric (VRAM GB)
+- **Overlay line graph**: `<polyline>` with labeled dots showing VRAM usage across categories
+- **Threshold marker**: Dashed red horizontal line indicating hardware limit (24 GB GPU)
+- **Zone annotations**: Subtle text labels above/below threshold for context
+- **Inset data table**: Alternating row fills below chart with quantitative accuracy data
+- **Semantic color coding**: Each quantization level gets its own color from the skill palette (red=OOM, amber=slow, teal=sweet spot, blue=fast)
+
+## Diagram Type
+
+This is a **quantitative data chart** with:
+- **Grouped vertical bars**: Range bars showing min–max performance per category
+- **Secondary axis line**: VRAM usage overlaid as a connected scatter plot
+- **Threshold annotation**: Hardware constraint line
+- **Inset table**: Supporting accuracy metrics
+
+## Chart Layout Formula
+
+```
+Chart area:  x=90–590, y=70–410 (500px wide, 340px tall)
+Left Y-axis: Primary metric (tok/s)
+             y = 410 − (val / max_val) × 340
+Right Y-axis: Secondary metric (VRAM GB)
+              Same formula, different scale labels
+Groups:       Divide width by number of categories
+Bars:         Each group → min bar (34px) + 8px gap + max bar (34px)
+Line overlay: <polyline> connecting data points across group centers
+Threshold:    Horizontal dashed line at critical value
+Table:        Below chart, alternating row fills
+```
+
+## Data Mapped
+
+| Quantization | Model Size | Speed (tok/s) | VRAM (GB) | MMLU Pro | Status |
+|-------------|-----------|---------------|-----------|----------|--------|
+| FP16 | 62 GB | 0.5–2 | 62 | 75.2 | OOM / unusable |
+| Q8_0 | 32 GB | 3–5 | 32 | 75.0 | Partial offload |
+| Q4_K_M | 16.8 GB | 8–12 | 16.8 | 73.1 | Fits in VRAM ✓ |
+| IQ3_M | 12 GB | 12–15 | 12 | 70.5 | Full GPU speed |
+
+## Bar CSS Classes
+
+```css
+/* Light mode */
+.bar-fp16-min { fill: #FCEBEB; stroke: #A32D2D; stroke-width: 0.75; }
+.bar-fp16-max { fill: #F7C1C1; stroke: #A32D2D; stroke-width: 0.75; }
+.bar-q8-min   { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.75; }
+.bar-q8-max   { fill: #FAC775; stroke: #854F0B; stroke-width: 0.75; }
+.bar-q4-min   { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.75; }
+.bar-q4-max   { fill: #9FE1CB; stroke: #0F6E56; stroke-width: 0.75; }
+.bar-iq3-min  { fill: #E6F1FB; stroke: #185FA5; stroke-width: 0.75; }
+.bar-iq3-max  { fill: #B5D4F4; stroke: #185FA5; stroke-width: 0.75; }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .bar-fp16-min { fill: #501313; stroke: #F09595; }
+  .bar-fp16-max { fill: #791F1F; stroke: #F09595; }
+  .bar-q8-min   { fill: #412402; stroke: #EF9F27; }
+  .bar-q8-max   { fill: #633806; stroke: #EF9F27; }
+  .bar-q4-min   { fill: #04342C; stroke: #5DCAA5; }
+  .bar-q4-max   { fill: #085041; stroke: #5DCAA5; }
+  .bar-iq3-min  { fill: #042C53; stroke: #85B7EB; }
+  .bar-iq3-max  { fill: #0C447C; stroke: #85B7EB; }
+}
+```
+
+## Overlay Line CSS
+
+```css
+.vram-line { stroke: #534AB7; stroke-width: 2.5; fill: none; }
+.vram-dot  { fill: #534AB7; stroke: var(--bg-primary); stroke-width: 2; }
+.vram-label { font-family: system-ui, sans-serif; font-size: 10px; fill: #534AB7; font-weight: 500; }
+```
+
+## Threshold CSS
+
+```css
+.threshold { stroke: #A32D2D; stroke-width: 1; stroke-dasharray: 6 3; fill: none; }
+.threshold-label { font-family: system-ui, sans-serif; font-size: 10px; fill: #A32D2D; font-weight: 500; }
+```
+
+## Table CSS
+
+```css
+.tbl-header { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.5; }
+.tbl-row    { fill: transparent; stroke: var(--border); stroke-width: 0.25; }
+.tbl-alt    { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.25; }
+```
+
+## Layout Notes
+
+- **ViewBox**: 680×660 (portrait, chart + legend + table)
+- **Chart area**: y=70–410, x=90–590
+- **Legend row**: y=458–470
+- **Inset table**: y=490–620
+- **Bar width**: 34px each, 8px gap between min/max pair
+- **Group spacing**: 125px center-to-center
+- **Dot halo**: White circle (r=6) behind colored dot (r=5) for legibility over bars/grid
+
+## When to Use This Pattern
+
+Use this diagram style for:
+- Model benchmark comparisons across quantization levels
+- Performance vs. resource usage tradeoff analysis
+- Any multi-metric comparison with a hardware/software constraint
+- GPU/TPU/accelerator benchmarking dashboards
+- Accuracy vs. speed Pareto frontiers
+- Hardware requirement sizing charts