assets/aion_architecture.svg

<svg width="1400" height="820" viewBox="0 0 1400 820" xmlns="http://www.w3.org/2000/svg" role="img">
  <defs>
    <!-- Gradients -->
    <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#020617"/>
      <stop offset="100%" stop-color="#0a0f2e"/>
    </linearGradient>
    <linearGradient id="boxGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#1e293b"/>
      <stop offset="100%" stop-color="#0f172a"/>
    </linearGradient>
    <linearGradient id="accentGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#7c3aed"/>
      <stop offset="100%" stop-color="#06b6d4"/>
    </linearGradient>
    <linearGradient id="accentGradV" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#7c3aed"/>
      <stop offset="100%" stop-color="#06b6d4"/>
    </linearGradient>
    <linearGradient id="promptGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#1e1b4b"/>
      <stop offset="100%" stop-color="#312e81"/>
    </linearGradient>
    <linearGradient id="routerGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#164e63"/>
      <stop offset="100%" stop-color="#0e7490"/>
    </linearGradient>
    <linearGradient id="outputGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#14532d"/>
      <stop offset="100%" stop-color="#166534"/>
    </linearGradient>
    <linearGradient id="composerGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#1e293b"/>
      <stop offset="100%" stop-color="#1e3a5f"/>
    </linearGradient>
    <linearGradient id="py" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#3b0764"/>
      <stop offset="100%" stop-color="#581c87"/>
    </linearGradient>
    <linearGradient id="web" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#0c4a6e"/>
      <stop offset="100%" stop-color="#075985"/>
    </linearGradient>
    <linearGradient id="math" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#422006"/>
      <stop offset="100%" stop-color="#92400e"/>
    </linearGradient>
    <linearGradient id="neural" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#064e3b"/>
      <stop offset="100%" stop-color="#065f46"/>
    </linearGradient>
    <linearGradient id="artifactsGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#0f172a"/>
      <stop offset="100%" stop-color="#1a1040"/>
    </linearGradient>

    <!-- Glow filter -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="4" result="blur"/>
      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
    </filter>
    <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#7c3aed" flood-opacity="0.3"/>
    </filter>
    <filter id="shadowCyan">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#06b6d4" flood-opacity="0.3"/>
    </filter>
    <filter id="shadowGreen">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#10b981" flood-opacity="0.3"/>
    </filter>

    <!-- Arrow markers -->
    <marker id="arrowCyan" viewBox="0 0 12 12" refX="10" refY="6"
            markerWidth="8" markerHeight="8" orient="auto-start-reverse">
      <path d="M0 1l10 5-10 5z" fill="#67e8f9" filter="url(#glow)"/>
    </marker>
    <marker id="arrowPurple" viewBox="0 0 12 12" refX="10" refY="6"
            markerWidth="8" markerHeight="8" orient="auto-start-reverse">
      <path d="M0 1l10 5-10 5z" fill="#a78bfa"/>
    </marker>
    <marker id="arrowGreen" viewBox="0 0 12 12" refX="10" refY="6"
            markerWidth="8" markerHeight="8" orient="auto-start-reverse">
      <path d="M0 1l10 5-10 5z" fill="#34d399"/>
    </marker>

    <style>
      .title { fill: #f8fafc; font: 700 30px 'Inter', Arial, sans-serif; letter-spacing: -0.5px; }
      .subtitle { fill: #94a3b8; font: 400 14px 'Inter', Arial, sans-serif; letter-spacing: 1px; }
      .boxLabel { fill: #f1f5f9; font: 700 17px 'Inter', Arial, sans-serif; }
      .boxSub { fill: #94a3b8; font: 400 13px 'Inter', Arial, sans-serif; }
      .tag { font: 600 11px 'Inter', Arial, sans-serif; letter-spacing: 0.5px; }
      .lineMain { stroke: #67e8f9; stroke-width: 2.5; fill: none; stroke-dasharray: none; marker-end: url(#arrowCyan); }
      .linePurple { stroke: #a78bfa; stroke-width: 2; fill: none; stroke-dasharray: 6 3; marker-end: url(#arrowPurple); opacity: 0.8; }
      .lineGreen { stroke: #34d399; stroke-width: 2.5; fill: none; marker-end: url(#arrowGreen); }
    </style>
  </defs>

  <!-- Background -->
  <rect width="1400" height="820" rx="24" fill="url(#bgGrad)"/>

  <!-- Subtle grid pattern -->
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5" opacity="0.5"/>
  </pattern>
  <rect width="1400" height="820" rx="24" fill="url(#grid)" opacity="0.4"/>

  <!-- Top accent bar -->
  <rect x="0" y="0" width="1400" height="4" rx="2" fill="url(#accentGrad)"/>

  <!-- Header -->
  <text x="60" y="55" class="title">AION Unified Hybrid Architecture</text>
  <text x="60" y="78" class="subtitle">INTELLIGENT ROUTING · MULTI-DOMAIN GENERATION · LEARNED ARTIFACTS</text>

  <!-- Decorative circles top-right -->
  <circle cx="1340" cy="55" r="28" fill="none" stroke="url(#accentGrad)" stroke-width="1.5" opacity="0.4"/>
  <circle cx="1340" cy="55" r="18" fill="none" stroke="url(#accentGrad)" stroke-width="1" opacity="0.3"/>
  <circle cx="1340" cy="55" r="6" fill="url(#accentGrad)" opacity="0.6"/>

  <!-- ═══════════════════════════════════════ -->
  <!-- PROMPT BOX -->
  <!-- ═══════════════════════════════════════ -->
  <g filter="url(#shadow)">
    <rect x="55" y="115" width="220" height="120" rx="16" fill="url(#promptGrad)" stroke="#6366f1" stroke-width="1.5"/>
  </g>
  <!-- Icon circle -->
  <circle cx="100" cy="147" r="16" fill="#4338ca" opacity="0.6"/>
  <text x="100" y="152" text-anchor="middle" fill="#a5b4fc" font-size="14">✎</text>
  <text x="125" y="151" class="boxLabel" fill="#e0e7ff">Prompt</text>
  <text x="75" y="176" class="boxSub">User text input</text>
  <text x="75" y="196" class="boxSub">Natural language query</text>
  <!-- Tag -->
  <rect x="75" y="208" width="60" height="18" rx="9" fill="#4338ca" opacity="0.5"/>
  <text x="105" y="221" text-anchor="middle" class="tag" fill="#a5b4fc">INPUT</text>

  <!-- ═══════════════════════════════════════ -->
  <!-- UNIFIED ROUTER -->
  <!-- ═══════════════════════════════════════ -->
  <g filter="url(#shadowCyan)">
    <rect x="360" y="95" width="270" height="160" rx="16" fill="url(#routerGrad)" stroke="#0891b2" stroke-width="1.5"/>
  </g>
  <circle cx="404" cy="130" r="16" fill="#0e7490" opacity="0.7"/>
  <text x="404" y="135" text-anchor="middle" fill="#67e8f9" font-size="14">⇄</text>
  <text x="428" y="134" class="boxLabel" fill="#e0f2fe">Unified Router</text>
  <text x="380" y="160" class="boxSub">Char n-gram intent classifier</text>
  <text x="380" y="180" class="boxSub">Rule-based overrides</text>
  <text x="380" y="200" class="boxSub">Confidence thresholding</text>
  <!-- Tag -->
  <rect x="380" y="213" width="76" height="18" rx="9" fill="#0e7490" opacity="0.6"/>
  <text x="418" y="226" text-anchor="middle" class="tag" fill="#67e8f9">ROUTING</text>

  <!-- Arrow: Prompt → Router -->
  <path d="M275 175 L360 175" class="lineMain"/>

  <!-- ═══════════════════════════════════════ -->
  <!-- SUBSYSTEM PANEL BACKGROUND -->
  <!-- ═══════════════════════════════════════ -->
  <rect x="745" y="85" width="440" height="430" rx="20" fill="#0f172a" stroke="#1e293b" stroke-width="1.5" opacity="0.7"/>
  <text x="840" y="112" class="subtitle" fill="#475569">SUBSYSTEMS</text>

  <!-- ═══════════════════════════════════════ -->
  <!-- SUBSYSTEM BOXES -->
  <!-- ═══════════════════════════════════════ -->

  <!-- Python -->
  <g filter="url(#shadow)">
    <rect x="765" y="120" width="400" height="85" rx="14" fill="url(#py)" stroke="#7c3aed" stroke-width="1.5"/>
  </g>
  <circle cx="800" cy="145" r="10" fill="#6d28d9" opacity="0.8"/>
  <text x="800" y="149" text-anchor="middle" fill="#ddd6fe" font-size="10">Py</text>
  <text x="822" y="149" class="boxLabel" fill="#ede9fe">Python Subsystem</text>
  <text x="785" y="171" class="boxSub">Learned intent classification · Code composer</text>
  <rect x="785" y="183" width="82" height="14" rx="7" fill="#5b21b6" opacity="0.6"/>
  <text x="826" y="194" text-anchor="middle" class="tag" fill="#ddd6fe">CODE GEN</text>

  <!-- Web -->
  <g filter="url(#shadowCyan)">
    <rect x="765" y="220" width="400" height="85" rx="14" fill="url(#web)" stroke="#0891b2" stroke-width="1.5"/>
  </g>
  <circle cx="800" cy="245" r="10" fill="#0369a1" opacity="0.8"/>
  <text x="800" y="249" text-anchor="middle" fill="#bae6fd" font-size="9">W</text>
  <text x="822" y="249" class="boxLabel" fill="#e0f2fe">Web Subsystem</text>
  <text x="785" y="271" class="boxSub">HTML · CSS · JavaScript generator</text>
  <rect x="785" y="283" width="70" height="14" rx="7" fill="#075985" opacity="0.6"/>
  <text x="820" y="294" text-anchor="middle" class="tag" fill="#bae6fd">WEB GEN</text>

  <!-- Math/Science -->
  <g filter="url(#shadow)">
    <rect x="765" y="320" width="400" height="85" rx="14" fill="url(#math)" stroke="#d97706" stroke-width="1.5"/>
  </g>
  <circle cx="800" cy="345" r="10" fill="#b45309" opacity="0.8"/>
  <text x="800" y="349" text-anchor="middle" fill="#fde68a" font-size="10">∑</text>
  <text x="822" y="349" class="boxLabel" fill="#fef3c7">Math / Science Solvers</text>
  <text x="785" y="371" class="boxSub">Equations · Physics · Chemistry · GSM8K</text>
  <rect x="785" y="383" width="62" height="14" rx="7" fill="#92400e" opacity="0.6"/>
  <text x="816" y="394" text-anchor="middle" class="tag" fill="#fde68a">SOLVER</text>

  <!-- Neural -->
  <g filter="url(#shadowGreen)">
    <rect x="765" y="420" width="400" height="85" rx="14" fill="url(#neural)" stroke="#059669" stroke-width="1.5"/>
  </g>
  <circle cx="800" cy="445" r="10" fill="#047857" opacity="0.8"/>
  <text x="800" y="449" text-anchor="middle" fill="#6ee7b7" font-size="9">GRU</text>
  <text x="822" y="449" class="boxLabel" fill="#d1fae5">Neural Syntax Model</text>
  <text x="785" y="471" class="boxSub">NumPy char-GRU · Python style transfer</text>
  <rect x="785" y="483" width="68" height="14" rx="7" fill="#065f46" opacity="0.6"/>
  <text x="819" y="494" text-anchor="middle" class="tag" fill="#6ee7b7">NEURAL</text>

  <!-- ═══════════════════════════════════════ -->
  <!-- ROUTER → SUBSYSTEMS ARROWS -->
  <!-- ═══════════════════════════════════════ -->
  <!-- To Python -->
  <path d="M630 155 C695 155 730 162 765 162" class="linePurple"/>
  <!-- To Web -->
  <path d="M630 175 C695 200 730 262 765 262" class="linePurple"/>
  <!-- To Math -->
  <path d="M630 195 C695 250 730 362 765 362" class="linePurple"/>
  <!-- To Neural -->
  <path d="M630 215 C695 300 730 462 765 462" class="linePurple"/>

  <!-- ═══════════════════════════════════════ -->
  <!-- ANSWER COMPOSER -->
  <!-- ═══════════════════════════════════════ -->
  <g filter="url(#shadow)">
    <rect x="360" y="590" width="440" height="115" rx="16" fill="url(#composerGrad)" stroke="#3b82f6" stroke-width="1.5"/>
  </g>
  <circle cx="404" cy="625" r="16" fill="#1d4ed8" opacity="0.5"/>
  <text x="404" y="630" text-anchor="middle" fill="#93c5fd" font-size="13">⊕</text>
  <text x="428" y="629" class="boxLabel" fill="#dbeafe">Answer Composer</text>
  <text x="380" y="653" class="boxSub">Reasoning summary · Unified response generation</text>
  <text x="380" y="673" class="boxSub">Context stitching · Format normalization</text>
  <rect x="380" y="685" width="94" height="16" rx="8" fill="#1e40af" opacity="0.5"/>
  <text x="427" y="697" text-anchor="middle" class="tag" fill="#93c5fd">COMPOSER</text>

  <!-- SUBSYSTEMS → COMPOSER ARROWS -->
  <path d="M965 205 C1000 540 900 610 800 647" class="lineGreen"/>
  <path d="M965 305 C990 490 880 610 800 647" class="lineGreen"/>
  <path d="M965 405 C980 530 870 610 800 647" class="lineGreen"/>
  <path d="M965 505 C970 580 860 635 800 647" class="lineGreen"/>

  <!-- ═══════════════════════════════════════ -->
  <!-- OUTPUT BOX -->
  <!-- ═══════════════════════════════════════ -->
  <g filter="url(#shadowGreen)">
    <rect x="900" y="590" width="280" height="115" rx="16" fill="url(#outputGrad)" stroke="#16a34a" stroke-width="1.5"/>
  </g>
  <circle cx="940" cy="625" r="16" fill="#15803d" opacity="0.6"/>
  <text x="940" y="630" text-anchor="middle" fill="#86efac" font-size="13">↗</text>
  <text x="964" y="629" class="boxLabel" fill="#dcfce7">Output</text>
  <text x="920" y="655" class="boxSub">Text · Code · HTML · Math</text>
  <text x="920" y="675" class="boxSub">Structured responses</text>
  <rect x="920" y="687" width="68" height="16" rx="8" fill="#166534" opacity="0.6"/>
  <text x="954" y="699" text-anchor="middle" class="tag" fill="#86efac">OUTPUT</text>

  <!-- Composer → Output arrow -->
  <path d="M800 647 L900 647" class="lineMain"/>

  <!-- ═══════════════════════════════════════ -->
  <!-- LEARNED ARTIFACTS PANEL -->
  <!-- ═══════════════════════════════════════ -->
  <g filter="url(#shadow)">
    <rect x="55" y="590" width="280" height="160" rx="16" fill="url(#artifactsGrad)" stroke="url(#accentGrad)" stroke-width="1.5"/>
  </g>
  <!-- Top accent line -->
  <rect x="55" y="590" width="280" height="4" rx="2" fill="url(#accentGrad)"/>

  <text x="90" y="625" class="boxLabel" fill="#e2e8f0">Learned Artifacts</text>
  <rect x="75" y="638" width="1" height="80" fill="url(#accentGradV)" opacity="0.5"/>

  <!-- Artifact items -->
  <circle cx="95" cy="655" r="3" fill="#a78bfa"/>
  <text x="108" y="659" class="boxSub">GRU weights</text>
  <circle cx="95" cy="675" r="3" fill="#67e8f9"/>
  <text x="108" y="679" class="boxSub">Python n-gram Naive Bayes</text>
  <circle cx="95" cy="695" r="3" fill="#67e8f9"/>
  <text x="108" y="699" class="boxSub">Web n-gram Naive Bayes</text>
  <circle cx="95" cy="715" r="3" fill="#a78bfa"/>
  <text x="108" y="719" class="boxSub">Unified intent NB model</text>
  <circle cx="95" cy="735" r="3" fill="#fbbf24"/>
  <text x="108" y="739" class="boxSub">GSM8K JSONL dataset</text>

  <!-- Artifacts → Router dashed link -->
  <path d="M335 650 C348 640 355 300 360 255" stroke="#475569" stroke-width="1.5" fill="none" stroke-dasharray="4 4" opacity="0.5"/>

  <!-- ═══════════════════════════════════════ -->
  <!-- FLOW LABELS on main arrows -->
  <!-- ═══════════════════════════════════════ -->
  <rect x="283" y="160" width="60" height="20" rx="10" fill="#0f172a" stroke="#67e8f9" stroke-width="1" opacity="0.8"/>
  <text x="313" y="174" text-anchor="middle" class="tag" fill="#67e8f9">query</text>

  <rect x="808" y="634" width="76" height="20" rx="10" fill="#0f172a" stroke="#34d399" stroke-width="1" opacity="0.8"/>
  <text x="846" y="648" text-anchor="middle" class="tag" fill="#34d399">response</text>

  <!-- ═══════════════════════════════════════ -->
  <!-- VERSION BADGE -->
  <!-- ═══════════════════════════════════════ -->
  <rect x="1280" y="780" width="100" height="22" rx="11" fill="#1e293b" stroke="#334155" stroke-width="1"/>
  <text x="1330" y="795" text-anchor="middle" class="tag" fill="#64748b">AION v2.0</text>
</svg>