mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-01 12:52:11 +03:00
docs(readme): animate CLI command list + compression flow as SMIL SVGs (#7637)
* docs(readme): animate CLI command list + compression flow as SMIL SVGs Two more README ASCII/text blocks become hand-authored animated SVGs (SMIL only, GitHub <img>-sandbox safe, DESIGN_SYSTEM.md palette), following the tier-cascade / pool / combo pattern: - cli-terminal.svg — compact terminal window (640x500) cycling three real CLI screens (providers list / combo list / health) with character-by-character typing, output formats copied from the actual bin/cli printers (headings, column layout, status colors, circuit breaker block), plus a scrolling ticker carrying the full 30-subcommand list the image replaces (also preserved in the img alt). - compression-pipeline.svg — the 'Client -> 10 engines -> Provider' flow line as an animated funnel: 10,000 tok in, ~1,080 tok out, token dots evaporating engine by engine behind the cells, RTK -> Caveman default stack highlighted, a code token passing through untouched (always preserved byte-perfect) and the stacked savings math badge. Registered both in docs/diagrams/README.md (hand-authored table). * docs(changelog): add fragment for #7637 (CLI terminal + compression SVGs) * docs(readme): enlarge CLI terminal diagram (full-width, 1200x700) Per review: the mini 640x500 terminal read too small. Rebuild it as a full-width widescreen terminal (viewBox 1200x700, embedded at width=100%) with larger type, wider aligned columns, 6 provider rows and 4 combo rows so each screen fills the frame. Same 3 real CLI screens, same SMIL, same DESIGN_SYSTEM.md palette, same command-ticker footer.
This commit is contained in:
Diego Rodrigues de Sa e Souza
committed by
GitHub
GitHub
parent
89025c12f1
commit
ea5862d15b
@@ -502,7 +502,7 @@ Tokens are scoped `read` / `write` / `admin`; process-spawning routes stay loopb
|
||||
|
||||
<div align="center">
|
||||
|
||||
`providers` · `oauth` · `keys` · `combo` · `nodes` · `models` · `cache` · `compression` · `cost` · `usage` · `quota` · `health` · `resilience` · `telemetry` · `logs` · `audit` · `mcp` · `a2a` · `cloud` · `memory` · `skills` · `eval` · `tunnel` · `backup` · `sync` · `webhooks` · `policy` · `pricing` · `translator` · `simulate` …
|
||||
<img src="./docs/diagrams/cli-terminal.svg" width="100%" alt="Animated terminal demoing the OmniRoute CLI — omniroute providers list, omniroute combo list, omniroute health — cycling over the 80+ command surface: providers · oauth · keys · combo · nodes · models · cache · compression · cost · usage · quota · health · resilience · telemetry · logs · audit · mcp · a2a · cloud · memory · skills · eval · tunnel · backup · sync · webhooks · policy · pricing · translator · simulate …"/>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -582,9 +582,7 @@ Code blocks, URLs and structured data are **always preserved** byte-perfect. **O
|
||||
|
||||
### 📖 How it works — pipeline, architecture & savings math
|
||||
|
||||
```
|
||||
Client (10,000 tok) ──▶ OmniRoute Compression (10 engines) ──▶ Provider (~1,080 tok, up to 95% saved)
|
||||
```
|
||||
<img src="./docs/diagrams/compression-pipeline.svg" width="100%" alt="OmniRoute compression pipeline: a client request of 10,000 tokens passes through 10 stacked engines — Session-Dedup, CCR, RTK, Headroom, Relevance, Caveman, LLMLingua-2, Lite, Aggressive, Ultra — and reaches the provider at about 1,080 tokens, up to 95% saved. Code, URLs and JSON are always preserved byte-perfect."/>
|
||||
|
||||
Default stacked combo runs `RTK → Caveman`. When both act on the same tool/context payload, savings compound:
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
- **README animated diagrams, round 3** (`docs/diagrams/cli-terminal.svg`, `docs/diagrams/compression-pipeline.svg`): the CLI subcommand list becomes a mini animated terminal (3 real commands typed and answered with formats copied from the actual `bin/cli` printers + a scrolling 30-subcommand ticker), and the compression flow line becomes an animated 10-engine funnel (10,000→~1,080 tok, RTK → Caveman stack highlighted, code token always preserved). SMIL-only, DESIGN_SYSTEM.md palette, GitHub `<img>`-sandbox safe — completing the set from #7615/#7626. Both registered in `docs/diagrams/README.md`.
|
||||
@@ -32,6 +32,8 @@ inside GitHub's `<img>` sandbox:
|
||||
| [tier-cascade.svg](./tier-cascade.svg) | README.md (root) | Animated 4-tier auto-fallback cascade (16s loop, 4 acts). Edit the SVG directly — there is no `.mmd` source. |
|
||||
| [pool-fair-share.svg](./pool-fair-share.svg) | README.md (root) | Animated key-pool fair-share quota (generous → strict, 16s loop). Edit the SVG directly — there is no `.mmd` source. |
|
||||
| [combo-always-on.svg](./combo-always-on.svg) | README.md (root) | Animated priority-combo fallback (4 layers, 16s loop). Edit the SVG directly — there is no `.mmd` source. |
|
||||
| [cli-terminal.svg](./cli-terminal.svg) | README.md (root) | Animated terminal cycling 3 CLI commands (providers/combo/health) + subcommand ticker (18s loop). Edit the SVG directly — there is no `.mmd` source. |
|
||||
| [compression-pipeline.svg](./compression-pipeline.svg) | README.md (root) | Animated 10-engine compression funnel (8s loop). Edit the SVG directly — there is no `.mmd` source. |
|
||||
|
||||
## How to update
|
||||
|
||||
|
||||
120
docs/diagrams/cli-terminal.svg
Normal file
120
docs/diagrams/cli-terminal.svg
Normal file
@@ -0,0 +1,120 @@
|
||||
<svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Animated terminal demoing the OmniRoute CLI: omniroute providers list, omniroute combo list and omniroute health, cycling over the 80+ command surface: providers, oauth, keys, combo, nodes, models, cache, compression, cost, usage, quota, health, resilience, telemetry, logs, audit, mcp, a2a, cloud, memory, skills, eval, tunnel, backup, sync, webhooks, policy, pricing, translator, simulate and more.">
|
||||
<defs>
|
||||
<clipPath id="tickerClipM"><rect x="16" y="648" width="1168" height="40"/></clipPath>
|
||||
<clipPath id="twMA"><rect x="72" y="104" height="32" width="0">
|
||||
<animate attributeName="width" calcMode="discrete" values="0;36;72;108;144;180;216;252;288;288" keyTimes="0;0.014;0.021;0.028;0.035;0.042;0.049;0.056;0.063;1" dur="18s" repeatCount="indefinite"/>
|
||||
</rect></clipPath>
|
||||
<clipPath id="twMB"><rect x="72" y="104" height="32" width="0">
|
||||
<animate attributeName="width" calcMode="discrete" values="0;36;72;108;144;180;216;240;240" keyTimes="0;0.348;0.355;0.362;0.369;0.376;0.383;0.390;1" dur="18s" repeatCount="indefinite"/>
|
||||
</rect></clipPath>
|
||||
<clipPath id="twMC"><rect x="72" y="104" height="32" width="0">
|
||||
<animate attributeName="width" calcMode="discrete" values="0;36;72;108;144;180;192;192" keyTimes="0;0.654;0.661;0.668;0.675;0.682;0.689;1" dur="18s" repeatCount="indefinite"/>
|
||||
</rect></clipPath>
|
||||
</defs>
|
||||
|
||||
<!-- ═══ Window ═══ -->
|
||||
<rect x="8" y="8" width="1184" height="684" rx="16" fill="#0d1117" stroke="#ffffff" stroke-opacity="0.1" stroke-width="1"/>
|
||||
<path d="M 24 8 h 1152 a 16 16 0 0 1 16 16 v 32 h -1184 v -32 a 16 16 0 0 1 16 -16 z" fill="#161b22"/>
|
||||
<path d="M 8 56 L 1192 56" stroke="#ffffff" stroke-opacity="0.08" stroke-width="1"/>
|
||||
<circle cx="46" cy="32" r="8" fill="#ff5f56"/>
|
||||
<circle cx="76" cy="32" r="8" fill="#ffbd2e"/>
|
||||
<circle cx="106" cy="32" r="8" fill="#27c93f"/>
|
||||
<text x="600" y="38" text-anchor="middle" font-family="Consolas, 'Courier New', monospace" font-size="15" fill="#71717a">omniroute — 80+ commands</text>
|
||||
|
||||
<!-- ═══ Screen A · omniroute providers list ═══ -->
|
||||
<g>
|
||||
<animate attributeName="opacity" values="1;1;0;0" keyTimes="0;0.315;0.33;1" dur="18s" repeatCount="indefinite"/>
|
||||
<text x="40" y="128" font-family="Consolas, 'Courier New', monospace" font-size="20" fill="#22c55e">$</text>
|
||||
<g clip-path="url(#twMA)">
|
||||
<text x="72" y="128" font-family="Consolas, 'Courier New', monospace" font-size="20" fill="#F7F6FC">omniroute providers list</text>
|
||||
</g>
|
||||
<rect y="108" width="10" height="26" fill="#a1a1aa">
|
||||
<animate attributeName="x" calcMode="discrete" values="72;108;144;180;216;252;288;324;360;360" keyTimes="0;0.014;0.021;0.028;0.035;0.042;0.049;0.056;0.063;1" dur="18s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.15;1;0.15;1;0.15;1;0.15;1;0;0" keyTimes="0;0.011;0.022;0.033;0.044;0.055;0.066;0.077;0.085;0.09;1" dur="18s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<g font-family="Consolas, 'Courier New', monospace" font-size="20">
|
||||
<text x="40" y="192" font-weight="700" fill="#38bdf8" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;1" keyTimes="0;0.075" dur="18s" repeatCount="indefinite"/>OmniRoute Providers</text>
|
||||
<text x="40" y="234" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;1" keyTimes="0;0.083" dur="18s" repeatCount="indefinite"/>1f3a9c2e  anthropic   Claude Max 20x    <tspan fill="#22c55e">active</tspan></text>
|
||||
<text x="40" y="276" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;1" keyTimes="0;0.090" dur="18s" repeatCount="indefinite"/>8c2d5b1a  codex       Codex Pro (team)  <tspan fill="#22c55e">active</tspan></text>
|
||||
<text x="40" y="318" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;1" keyTimes="0;0.097" dur="18s" repeatCount="indefinite"/>f4e0a97b  glm         GLM Coding Plan   <tspan fill="#22c55e">active</tspan></text>
|
||||
<text x="40" y="360" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;1" keyTimes="0;0.104" dur="18s" repeatCount="indefinite"/>03bd6e5f  kimi        Kimi K2 free      <tspan fill="#22c55e">active</tspan></text>
|
||||
<text x="40" y="402" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;1" keyTimes="0;0.111" dur="18s" repeatCount="indefinite"/>9d4e1a08  gemini-cli  Gemini 2.5 Pro    <tspan fill="#22c55e">active</tspan></text>
|
||||
<text x="40" y="444" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;1" keyTimes="0;0.118" dur="18s" repeatCount="indefinite"/>b7c3f26d  copilot     GPT-5 (Copilot)   <tspan fill="#22c55e">active</tspan></text>
|
||||
<text x="40" y="486" fill="#71717a" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;1" keyTimes="0;0.125" dur="18s" repeatCount="indefinite"/>… 253 more connections</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ═══ Screen B · omniroute combo list ═══ -->
|
||||
<g opacity="0">
|
||||
<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.333;0.345;0.62;0.635;1" dur="18s" repeatCount="indefinite"/>
|
||||
<text x="40" y="128" font-family="Consolas, 'Courier New', monospace" font-size="20" fill="#22c55e">$</text>
|
||||
<g clip-path="url(#twMB)">
|
||||
<text x="72" y="128" font-family="Consolas, 'Courier New', monospace" font-size="20" fill="#F7F6FC">omniroute combo list</text>
|
||||
</g>
|
||||
<rect y="108" width="10" height="26" fill="#a1a1aa">
|
||||
<animate attributeName="x" calcMode="discrete" values="72;108;144;180;216;252;288;312;312" keyTimes="0;0.348;0.355;0.362;0.369;0.376;0.383;0.390;1" dur="18s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;1;0.15;1;0.15;1;0.15;1;0;0" keyTimes="0;0.345;0.352;0.362;0.372;0.382;0.392;0.402;0.41;0.42;1" dur="18s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<g font-family="Consolas, 'Courier New', monospace" font-size="20">
|
||||
<text x="40" y="192" font-weight="700" fill="#38bdf8" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.402;0.404" dur="18s" repeatCount="indefinite"/>OmniRoute Combos</text>
|
||||
<text x="40" y="234" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.412;0.414" dur="18s" repeatCount="indefinite"/>  <tspan fill="#22c55e">●</tspan> always-on     [priority      ] <tspan fill="#22c55e">enabled</tspan></text>
|
||||
<text x="40" y="276" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.419;0.421" dur="18s" repeatCount="indefinite"/>  <tspan fill="#71717a">○</tspan> cost-saver    [cost-optimized] <tspan fill="#22c55e">enabled</tspan></text>
|
||||
<text x="40" y="318" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.426;0.428" dur="18s" repeatCount="indefinite"/>  <tspan fill="#71717a">○</tspan> fusion-panel  [fusion        ] <tspan fill="#22c55e">enabled</tspan></text>
|
||||
<text x="40" y="360" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.433;0.435" dur="18s" repeatCount="indefinite"/>  <tspan fill="#71717a">○</tspan> context-relay [context-relay ] <tspan fill="#22c55e">enabled</tspan></text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ═══ Screen C · omniroute health ═══ -->
|
||||
<g opacity="0">
|
||||
<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.639;0.651;0.93;0.945;1" dur="18s" repeatCount="indefinite"/>
|
||||
<text x="40" y="128" font-family="Consolas, 'Courier New', monospace" font-size="20" fill="#22c55e">$</text>
|
||||
<g clip-path="url(#twMC)">
|
||||
<text x="72" y="128" font-family="Consolas, 'Courier New', monospace" font-size="20" fill="#F7F6FC">omniroute health</text>
|
||||
</g>
|
||||
<rect y="108" width="10" height="26" fill="#a1a1aa">
|
||||
<animate attributeName="x" calcMode="discrete" values="72;108;144;180;216;252;264;264" keyTimes="0;0.654;0.661;0.668;0.675;0.682;0.689;1" dur="18s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;1;0.15;1;0.15;1;0;0" keyTimes="0;0.651;0.658;0.668;0.678;0.688;0.694;0.70;1" dur="18s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<g font-family="Consolas, 'Courier New', monospace" font-size="20">
|
||||
<text x="40" y="192" font-weight="700" fill="#38bdf8" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.694;0.696" dur="18s" repeatCount="indefinite"/>OmniRoute Health</text>
|
||||
<text x="40" y="234" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.702;0.704" dur="18s" repeatCount="indefinite"/>  Status: <tspan fill="#22c55e">healthy</tspan></text>
|
||||
<text x="40" y="276" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.709;0.711" dur="18s" repeatCount="indefinite"/>  Uptime: 4d 12h 33m</text>
|
||||
<text x="40" y="318" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.716;0.718" dur="18s" repeatCount="indefinite"/>  Requests (24h): 18,412</text>
|
||||
<text x="40" y="378" font-weight="700" fill="#F7F6FC" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.728;0.730" dur="18s" repeatCount="indefinite"/>  Circuit Breakers</text>
|
||||
<text x="40" y="420" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.735;0.737" dur="18s" repeatCount="indefinite"/>    <tspan fill="#22c55e">● closed</tspan>     24</text>
|
||||
<text x="40" y="462" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.742;0.744" dur="18s" repeatCount="indefinite"/>    <tspan fill="#f59e0b">○ half-open</tspan>  1</text>
|
||||
<text x="40" y="504" fill="#a1a1aa" opacity="0">
|
||||
<animate attributeName="opacity" calcMode="discrete" values="0;0;1" keyTimes="0;0.749;0.751" dur="18s" repeatCount="indefinite"/>    <tspan fill="#ef4444">○ open</tspan>       0</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ═══ Command ticker (the 30 subcommands, scrolling) ═══ -->
|
||||
<path d="M 8 636 L 1192 636" stroke="#ffffff" stroke-opacity="0.08" stroke-width="1"/>
|
||||
<g clip-path="url(#tickerClipM)">
|
||||
<g font-family="Consolas, 'Courier New', monospace" font-size="15" fill="#71717a">
|
||||
<animateTransform attributeName="transform" type="translate" from="0 0" to="-2570 0" dur="60s" repeatCount="indefinite"/>
|
||||
<text x="24" y="674"><tspan fill="#8b5cf6">providers</tspan> · oauth · keys · <tspan fill="#8b5cf6">combo</tspan> · nodes · models · cache · <tspan fill="#8b5cf6">compression</tspan> · cost · usage · quota · <tspan fill="#8b5cf6">health</tspan> · resilience · telemetry · logs · audit · <tspan fill="#8b5cf6">mcp</tspan> · a2a · cloud · <tspan fill="#8b5cf6">memory</tspan> · skills · eval · tunnel · backup · sync · webhooks · policy · pricing · translator · simulate …</text>
|
||||
<text x="2594" y="674"><tspan fill="#8b5cf6">providers</tspan> · oauth · keys · <tspan fill="#8b5cf6">combo</tspan> · nodes · models · cache · <tspan fill="#8b5cf6">compression</tspan> · cost · usage · quota · <tspan fill="#8b5cf6">health</tspan> · resilience · telemetry · logs · audit · <tspan fill="#8b5cf6">mcp</tspan> · a2a · cloud · <tspan fill="#8b5cf6">memory</tspan> · skills · eval · tunnel · backup · sync · webhooks · policy · pricing · translator · simulate …</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
198
docs/diagrams/compression-pipeline.svg
Normal file
198
docs/diagrams/compression-pipeline.svg
Normal file
@@ -0,0 +1,198 @@
|
||||
<svg viewBox="0 0 1200 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="OmniRoute compression pipeline: a client request of 10,000 tokens passes through 10 stacked engines — Session-Dedup, CCR, RTK, Headroom, Relevance, Caveman, LLMLingua-2, Lite, Aggressive, Ultra — and reaches the provider at about 1,080 tokens, up to 95% saved. The default stacked combo runs RTK then Caveman (average 89.2%, range 78.4–94.6%). Code, URLs and JSON are always preserved byte-perfect.">
|
||||
<defs>
|
||||
<pattern id="gridPaperZ" width="32" height="32" patternUnits="userSpaceOnUse">
|
||||
<path d="M 32 0 L 0 0 0 32" fill="none" stroke="#ffffff" stroke-opacity="0.06" stroke-width="1"/>
|
||||
</pattern>
|
||||
<radialGradient id="bgGlowZ" cx="50%" cy="35%" r="60%">
|
||||
<stop offset="0%" stop-color="#6366f1" stop-opacity="0.10"/>
|
||||
<stop offset="100%" stop-color="#6366f1" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="funnelZ" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8b5cf6" stop-opacity="0.16"/>
|
||||
<stop offset="100%" stop-color="#22c55e" stop-opacity="0.14"/>
|
||||
</linearGradient>
|
||||
<path id="pTokZ" d="M 245,230 L 955,230"/>
|
||||
</defs>
|
||||
|
||||
<rect width="1200" height="460" fill="#0b0e14"/>
|
||||
<rect width="1200" height="460" fill="url(#gridPaperZ)"/>
|
||||
<rect width="1200" height="460" fill="url(#bgGlowZ)"/>
|
||||
|
||||
|
||||
<!-- ═══ Client card ═══ -->
|
||||
<rect x="70" y="160" width="175" height="130" rx="14" fill="#161b22" stroke="#ffffff" stroke-opacity="0.08" stroke-width="1"/>
|
||||
<text x="90" y="190" font-family="Consolas, 'Courier New', monospace" font-size="10" letter-spacing="2.5" font-weight="700" fill="#a78bfa">CLIENT</text>
|
||||
<text x="90" y="222" font-family="Consolas, 'Courier New', monospace" font-size="18" font-weight="800" fill="#F7F6FC">10,000 tok</text>
|
||||
<text x="90" y="246" font-family="Consolas, 'Courier New', monospace" font-size="10" fill="#71717a">prompt · tools · history</text>
|
||||
<circle cx="222" cy="186" r="4" fill="#8b5cf6">
|
||||
<animate attributeName="opacity" values="1;0.4;1" dur="2.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- ═══ Pipeline container ═══ -->
|
||||
<rect x="285" y="112" width="630" height="230" rx="14" fill="#161b22" stroke="#8b5cf6" stroke-width="1.2" stroke-opacity="0.4"/>
|
||||
<text x="600" y="140" text-anchor="middle" font-family="Consolas, 'Courier New', monospace" font-size="10.5" letter-spacing="2.5" font-weight="700" fill="url(#gradBrandZ)">OMNIROUTE COMPRESSION — 10 ENGINES</text>
|
||||
<linearGradient id="gradBrandZ" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#e54d5e"/>
|
||||
<stop offset="100%" stop-color="#a855f7"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- token funnel: wide in, thin out -->
|
||||
<path d="M 245,208 L 285,210 L 915,226 L 955,227 L 955,233 L 915,234 L 285,250 L 245,252 Z" fill="url(#funnelZ)"/>
|
||||
|
||||
<!-- ═══ Token dots: 5 leave, 4 evaporate at engines, 1 arrives · plus the code token that always survives ═══ -->
|
||||
<g fill="#a78bfa">
|
||||
<!-- dies at engine 1 -->
|
||||
<circle r="4">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" keyPoints="0;0;0.12;0.12" keyTimes="0;0.08;0.13;1" calcMode="linear"><mpath href="#pTokZ"/></animateMotion>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.08;0.09;0.125;0.14;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- dies at engine 3 (RTK) -->
|
||||
<circle r="4">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" keyPoints="0;0;0.29;0.29" keyTimes="0;0.085;0.22;1" calcMode="linear"><mpath href="#pTokZ"/></animateMotion>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.085;0.095;0.215;0.23;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- dies at engine 6 (Caveman) -->
|
||||
<circle r="4">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" keyPoints="0;0;0.55;0.55" keyTimes="0;0.09;0.355;1" calcMode="linear"><mpath href="#pTokZ"/></animateMotion>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.09;0.10;0.35;0.365;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- dies at engine 9 -->
|
||||
<circle r="4">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" keyPoints="0;0;0.81;0.81" keyTimes="0;0.095;0.49;1" calcMode="linear"><mpath href="#pTokZ"/></animateMotion>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.095;0.105;0.485;0.50;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- the survivor: shrinks and reaches the provider -->
|
||||
<circle r="4">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.10;0.60;1" calcMode="linear"><mpath href="#pTokZ"/></animateMotion>
|
||||
<animate attributeName="r" values="4;4;2.4;2.4" keyTimes="0;0.10;0.60;1" dur="8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.10;0.11;0.60;0.64;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<!-- code token: passes through untouched -->
|
||||
<g>
|
||||
<animateMotion dur="8s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.14;0.64;1" calcMode="linear"><mpath href="#pTokZ"/></animateMotion>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.14;0.15;0.64;0.68;1" dur="8s" repeatCount="indefinite"/>
|
||||
<rect x="-5" y="-5" width="10" height="10" rx="2" fill="none" stroke="#22c55e" stroke-width="1.4"/>
|
||||
<text y="3" text-anchor="middle" font-family="Consolas, 'Courier New', monospace" font-size="7" font-weight="700" fill="#22c55e">{}</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- 10 engine cells -->
|
||||
<g font-family="Consolas, 'Courier New', monospace" text-anchor="middle">
|
||||
<!-- 1 Session-Dedup -->
|
||||
<g transform="translate(303,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#8b5cf6" stroke-width="1.4" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0.9;0;0" keyTimes="0;0.10;0.13;0.17;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#71717a">1</text>
|
||||
<text x="27.5" y="56" font-size="8" fill="#a1a1aa">Session</text>
|
||||
<text x="27.5" y="68" font-size="8" fill="#a1a1aa">Dedup</text>
|
||||
</g>
|
||||
<!-- 2 CCR -->
|
||||
<g transform="translate(364,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#8b5cf6" stroke-width="1.4" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0.9;0;0" keyTimes="0;0.145;0.175;0.215;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#71717a">2</text>
|
||||
<text x="27.5" y="62" font-size="8" fill="#a1a1aa">CCR</text>
|
||||
</g>
|
||||
<!-- 3 RTK (default stack) -->
|
||||
<g transform="translate(425,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#e54d5e" stroke-opacity="0.55" stroke-width="1.2"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#e54d5e" stroke-width="1.6" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;1;0;0" keyTimes="0;0.19;0.22;0.26;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#e54d5e">3</text>
|
||||
<text x="27.5" y="62" font-size="8.5" font-weight="700" fill="#F7F6FC">RTK</text>
|
||||
</g>
|
||||
<!-- 4 Headroom -->
|
||||
<g transform="translate(486,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#8b5cf6" stroke-width="1.4" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0.9;0;0" keyTimes="0;0.235;0.265;0.305;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#71717a">4</text>
|
||||
<text x="27.5" y="62" font-size="8" fill="#a1a1aa">Headroom</text>
|
||||
</g>
|
||||
<!-- 5 Relevance -->
|
||||
<g transform="translate(547,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#8b5cf6" stroke-width="1.4" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0.9;0;0" keyTimes="0;0.275;0.305;0.345;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#71717a">5</text>
|
||||
<text x="27.5" y="62" font-size="8" fill="#a1a1aa">Relevance</text>
|
||||
</g>
|
||||
<!-- 6 Caveman (default stack) -->
|
||||
<g transform="translate(608,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#e54d5e" stroke-opacity="0.55" stroke-width="1.2"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#e54d5e" stroke-width="1.6" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;1;0;0" keyTimes="0;0.325;0.355;0.395;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#e54d5e">6</text>
|
||||
<text x="27.5" y="62" font-size="8.5" font-weight="700" fill="#F7F6FC">Caveman</text>
|
||||
</g>
|
||||
<!-- 7 LLMLingua-2 -->
|
||||
<g transform="translate(669,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#8b5cf6" stroke-width="1.4" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0.9;0;0" keyTimes="0;0.375;0.405;0.445;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#71717a">7</text>
|
||||
<text x="27.5" y="56" font-size="8" fill="#a1a1aa">LLM</text>
|
||||
<text x="27.5" y="68" font-size="8" fill="#a1a1aa">Lingua-2</text>
|
||||
</g>
|
||||
<!-- 8 Lite -->
|
||||
<g transform="translate(730,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#8b5cf6" stroke-width="1.4" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0.9;0;0" keyTimes="0;0.415;0.445;0.485;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#71717a">8</text>
|
||||
<text x="27.5" y="62" font-size="8" fill="#a1a1aa">Lite</text>
|
||||
</g>
|
||||
<!-- 9 Aggressive -->
|
||||
<g transform="translate(791,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#8b5cf6" stroke-width="1.4" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0.9;0;0" keyTimes="0;0.46;0.49;0.53;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#71717a">9</text>
|
||||
<text x="27.5" y="62" font-size="7.5" fill="#a1a1aa">Aggressive</text>
|
||||
</g>
|
||||
<!-- 10 Ultra -->
|
||||
<g transform="translate(852,168)">
|
||||
<rect width="55" height="86" rx="8" fill="#1c2230" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<rect width="55" height="86" rx="8" fill="none" stroke="#8b5cf6" stroke-width="1.4" stroke-opacity="0">
|
||||
<animate attributeName="stroke-opacity" values="0;0;0.9;0;0" keyTimes="0;0.50;0.53;0.57;1" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="27.5" y="30" font-size="13" font-weight="800" fill="#71717a">10</text>
|
||||
<text x="27.5" y="62" font-size="8" fill="#a1a1aa">Ultra</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- default stack bracket -->
|
||||
<path d="M 452,262 L 452,272 L 635,272 L 635,262" fill="none" stroke="#e54d5e" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<text x="543" y="288" text-anchor="middle" font-family="Consolas, 'Courier New', monospace" font-size="9.5" fill="#e54d5e">default stack: RTK → Caveman</text>
|
||||
|
||||
<!-- preservation note -->
|
||||
<text x="600" y="326" text-anchor="middle" font-family="Consolas, 'Courier New', monospace" font-size="9.5" fill="#22c55e" opacity="0.85">{ } code · URLs · JSON — always preserved byte-perfect</text>
|
||||
|
||||
<!-- ═══ Provider card ═══ -->
|
||||
<rect x="955" y="160" width="175" height="130" rx="14" fill="#161b22" stroke="#ffffff" stroke-opacity="0.08" stroke-width="1"/>
|
||||
<text x="975" y="190" font-family="Consolas, 'Courier New', monospace" font-size="10" letter-spacing="2.5" font-weight="700" fill="#a78bfa">PROVIDER</text>
|
||||
<text x="975" y="222" font-family="Consolas, 'Courier New', monospace" font-size="18" font-weight="800" fill="#F7F6FC">~1,080 tok</text>
|
||||
<g transform="translate(975,236)">
|
||||
<rect width="132" height="22" rx="11" fill="none" stroke="#22c55e" stroke-width="1" stroke-opacity="0.6"/>
|
||||
<text x="66" y="15" text-anchor="middle" font-family="Consolas, 'Courier New', monospace" font-size="9.5" letter-spacing="1" font-weight="700" fill="#22c55e">
|
||||
<animate attributeName="opacity" values="0.75;0.75;1;1;0.75" keyTimes="0;0.58;0.62;0.78;1" dur="8s" repeatCount="indefinite"/>up to 95% saved</text>
|
||||
</g>
|
||||
|
||||
<!-- ═══ Savings math badge ═══ -->
|
||||
<g transform="translate(600,404)">
|
||||
<rect x="-268" y="-16" width="536" height="30" rx="15" fill="#161b22" stroke="#ffffff" stroke-opacity="0.08"/>
|
||||
<text y="4" text-anchor="middle" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#a1a1aa">combined = 1 − (1−RTK)×(1−Caveman) → avg <tspan fill="#22c55e" font-weight="700">89.2%</tspan> · range <tspan fill="#22c55e">78.4–94.6%</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user