assets/architecture.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="780" viewBox="0 0 1400 780">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#07111f"/>
      <stop offset="1" stop-color="#10233d"/>
    </linearGradient>
    <filter id="shadow"><feDropShadow dx="0" dy="8" stdDeviation="10" flood-opacity=".28"/></filter>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
      <path d="M0,0 L0,6 L9,3 z" fill="#67e8f9"/>
    </marker>
    <style>
      .title{font:700 34px Arial,sans-serif;fill:#f8fafc}
      .sub{font:400 17px Arial,sans-serif;fill:#a5b4c7}
      .h{font:700 20px Arial,sans-serif;fill:#f8fafc}
      .t{font:400 15px Arial,sans-serif;fill:#cbd5e1}
      .tiny{font:400 13px Arial,sans-serif;fill:#94a3b8}
      .box{fill:#142a46;stroke:#315477;stroke-width:2;rx:18;filter:url(#shadow)}
      .accent{fill:#123a4b;stroke:#22d3ee;stroke-width:2;rx:18;filter:url(#shadow)}
      .head{fill:#312e5d;stroke:#a78bfa;stroke-width:2;rx:16}
      .arrow{stroke:#67e8f9;stroke-width:3;fill:none;marker-end:url(#arrow)}
    </style>
  </defs>
  <rect width="1400" height="780" fill="url(#bg)"/>
  <text x="60" y="62" class="title">AIFlow Math Ink 0.6 — Point / Stroke Recognition Stack</text>
  <text x="60" y="92" class="sub">Raw touch is preserved; 6 Hz is a canonical model view, not a replacement for device events.</text>

  <rect x="60" y="145" width="250" height="230" class="box"/>
  <text x="85" y="180" class="h">Online ink</text>
  <text x="85" y="205" class="t">raw touch events</text>
  <polyline points="102,315 112,272 128,239 148,220 165,231 168,262 154,292 132,317 112,333 151,332 185,320 205,299 213,272"
            fill="none" stroke="#f8fafc" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
  <g fill="#22d3ee" stroke="#07111f" stroke-width="2">
    <circle cx="102" cy="315" r="7"/><circle cx="112" cy="272" r="7"/><circle cx="128" cy="239" r="7"/>
    <circle cx="148" cy="220" r="7"/><circle cx="165" cy="231" r="7"/><circle cx="168" cy="262" r="7"/>
    <circle cx="154" cy="292" r="7"/><circle cx="132" cy="317" r="7"/><circle cx="112" cy="333" r="7"/>
    <circle cx="151" cy="332" r="7"/><circle cx="185" cy="320" r="7"/><circle cx="205" cy="299" r="7"/>
    <circle cx="213" cy="272" r="7"/>
  </g>
  <text x="85" y="357" class="tiny">time · direction · pen-up · speed</text>

  <rect x="60" y="440" width="250" height="210" class="box"/>
  <text x="85" y="475" class="h">Raster ink</text>
  <text x="85" y="500" class="t">128×128 grayscale image</text>
  <rect x="112" y="520" width="118" height="105" fill="#fff" rx="8"/>
  <path d="M135 604 C126 575 130 542 153 536 C180 528 194 552 179 573 C169 587 151 598 135 607 C160 610 189 606 209 588"
        fill="none" stroke="#111827" stroke-width="7" stroke-linecap="round"/>

  <rect x="390" y="160" width="285" height="195" class="accent"/>
  <text x="420" y="198" class="h">Canonical ink encoder</text>
  <text x="420" y="228" class="t">aspect-preserving 128×128 space</text>
  <text x="420" y="255" class="t">≤128 events · 19 channels</text>
  <text x="420" y="282" class="t">6 Hz taps + start/end anchors</text>
  <text x="420" y="309" class="t">timestamp: observed | canonical</text>
  <text x="420" y="334" class="tiny">missing values remain explicitly masked</text>

  <rect x="390" y="455" width="285" height="175" class="accent"/>
  <text x="420" y="493" class="h">Raster vectorizer</text>
  <text x="420" y="523" class="t">depthwise CNN</text>
  <text x="420" y="550" class="t">causal trajectory decoder</text>
  <text x="420" y="577" class="t">top-4 virtual stroke hypotheses</text>
  <text x="420" y="605" class="tiny">no direct raster → label shortcut</text>

  <rect x="770" y="255" width="285" height="250" class="box"/>
  <text x="800" y="296" class="h">Shared trajectory encoder</text>
  <text x="800" y="329" class="t">Residual TCN · hidden 128</text>
  <text x="800" y="357" class="t">point order + local geometry</text>
  <text x="800" y="385" class="t">online adapter: dual_tcn_v3</text>
  <text x="800" y="413" class="t">exact/family representation</text>
  <rect x="800" y="445" width="222" height="34" fill="#0d1d31" stroke="#315477" rx="8"/>
  <text x="815" y="468" class="tiny">seed 17 · seed 31 · seed 47</text>

  <rect x="1140" y="150" width="205" height="105" class="head"/>
  <text x="1165" y="188" class="h">Exact head</text>
  <text x="1165" y="218" class="t">378 symbol logits</text>
  <rect x="1140" y="285" width="205" height="105" class="head"/>
  <text x="1165" y="323" class="h">Family head</text>
  <text x="1165" y="353" class="t">324 visual families</text>
  <rect x="1140" y="420" width="205" height="105" class="head"/>
  <text x="1165" y="458" class="h">Behavior head</text>
  <text x="1165" y="488" class="t">x · X · multiplication</text>
  <rect x="1140" y="555" width="205" height="105" class="head"/>
  <text x="1165" y="593" class="h">Boundary head</text>
  <text x="1165" y="623" class="t">merge vs symbol edge</text>

  <path d="M310 260 L390 260" class="arrow"/>
  <path d="M310 545 L390 545" class="arrow"/>
  <path d="M675 258 C720 258 725 335 770 335" class="arrow"/>
  <path d="M675 545 C720 545 725 425 770 425" class="arrow"/>
  <path d="M1055 315 C1090 315 1090 202 1140 202" class="arrow"/>
  <path d="M1055 350 L1140 338" class="arrow"/>
  <path d="M1055 395 L1140 472" class="arrow"/>
  <path d="M1055 450 C1090 450 1090 608 1140 608" class="arrow"/>

  <text x="60" y="720" class="sub">Device contract: return top-k token probabilities, confidence, modelVersion and latency only; raw ink remains local.</text>
</svg>