botbook/src/assets/diagrams/embedded-architecture.svg

125 lines
6.9 KiB
XML
Raw Normal View History

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500" width="1200" height="500">
<defs>
<style>
.title { font: bold 20px Arial, sans-serif; fill: #333; }
.box-label { font: bold 13px Arial, sans-serif; fill: #333; }
.small-text { font: 11px Arial, sans-serif; fill: #666; }
@media (prefers-color-scheme: dark) {
.title { fill: #eee; }
.box-label { fill: #eee; }
.small-text { fill: #ccc; }
}
</style>
</defs>
<rect width="100%" height="100%" fill="transparent"/>
<text x="600" y="35" text-anchor="middle" class="title">Embedded GB Architecture</text>
<!-- User Input -->
<g transform="translate(50, 60)">
<rect width="200" height="160" rx="8" fill="#E3F2FD" stroke="#1976D2" stroke-width="2"/>
<text x="100" y="25" text-anchor="middle" class="box-label">User Input</text>
<rect x="15" y="40" width="50" height="45" rx="4" fill="#BBDEFB" stroke="#1976D2"/>
<text x="40" y="68" text-anchor="middle" class="small-text">Keyboard</text>
<rect x="75" y="40" width="50" height="45" rx="4" fill="#BBDEFB" stroke="#1976D2"/>
<text x="100" y="68" text-anchor="middle" class="small-text">Touch</text>
<rect x="135" y="40" width="50" height="45" rx="4" fill="#BBDEFB" stroke="#1976D2"/>
<text x="160" y="68" text-anchor="middle" class="small-text">GPIO</text>
<rect x="15" y="95" width="170" height="50" rx="4" fill="#BBDEFB" stroke="#1976D2"/>
<text x="100" y="125" text-anchor="middle" class="small-text">Sensors (I2C/SPI)</text>
</g>
<!-- Display Output -->
<g transform="translate(50, 250)">
<rect width="200" height="120" rx="8" fill="#F3E5F5" stroke="#7B1FA2" stroke-width="2"/>
<text x="100" y="25" text-anchor="middle" class="box-label">Display</text>
<rect x="10" y="40" width="40" height="35" rx="4" fill="#E1BEE7" stroke="#7B1FA2"/>
<text x="30" y="62" text-anchor="middle" class="small-text">LCD</text>
<rect x="55" y="40" width="40" height="35" rx="4" fill="#E1BEE7" stroke="#7B1FA2"/>
<text x="75" y="62" text-anchor="middle" class="small-text">OLED</text>
<rect x="100" y="40" width="40" height="35" rx="4" fill="#E1BEE7" stroke="#7B1FA2"/>
<text x="120" y="62" text-anchor="middle" class="small-text">TFT</text>
<rect x="145" y="40" width="45" height="35" rx="4" fill="#E1BEE7" stroke="#7B1FA2"/>
<text x="168" y="62" text-anchor="middle" class="small-text">HDMI</text>
</g>
<!-- BotServer -->
<g transform="translate(320, 80)">
<rect width="240" height="280" rx="10" fill="#E8F5E9" stroke="#388E3C" stroke-width="2"/>
<text x="120" y="30" text-anchor="middle" class="box-label">botserver (Rust)</text>
<text x="120" y="50" text-anchor="middle" class="small-text">Port 8088</text>
<rect x="20" y="70" width="200" height="40" rx="4" fill="#C8E6C9" stroke="#388E3C"/>
<text x="120" y="95" text-anchor="middle" class="small-text">BASIC Interpreter</text>
<rect x="20" y="120" width="200" height="40" rx="4" fill="#C8E6C9" stroke="#388E3C"/>
<text x="120" y="145" text-anchor="middle" class="small-text">GPIO Keywords</text>
<rect x="20" y="170" width="200" height="40" rx="4" fill="#C8E6C9" stroke="#388E3C"/>
<text x="120" y="195" text-anchor="middle" class="small-text">SQLite Database</text>
<rect x="20" y="220" width="200" height="40" rx="4" fill="#C8E6C9" stroke="#388E3C"/>
<text x="120" y="245" text-anchor="middle" class="small-text">Embedded UI Server</text>
</g>
<!-- LLM Server -->
<g transform="translate(630, 80)">
<rect width="200" height="150" rx="10" fill="#FFF3E0" stroke="#F57C00" stroke-width="2"/>
<text x="100" y="30" text-anchor="middle" class="box-label">llama.cpp</text>
<text x="100" y="50" text-anchor="middle" class="small-text">Port 8080 (Optional)</text>
<rect x="20" y="70" width="160" height="30" rx="4" fill="#FFE0B2" stroke="#F57C00"/>
<text x="100" y="90" text-anchor="middle" class="small-text">TinyLlama GGUF</text>
<rect x="20" y="105" width="160" height="30" rx="4" fill="#FFE0B2" stroke="#F57C00"/>
<text x="100" y="125" text-anchor="middle" class="small-text">NPU Acceleration</text>
</g>
<!-- SBC Hardware -->
<g transform="translate(630, 260)">
<rect width="200" height="100" rx="10" fill="#ECEFF1" stroke="#607D8B" stroke-width="2"/>
<text x="100" y="25" text-anchor="middle" class="box-label">SBC Hardware</text>
<text x="100" y="50" text-anchor="middle" class="small-text">Orange Pi / Raspberry Pi</text>
<text x="100" y="70" text-anchor="middle" class="small-text">ARM64 CPU + NPU</text>
<text x="100" y="90" text-anchor="middle" class="small-text">1-16GB RAM</text>
</g>
<!-- Actuators -->
<g transform="translate(900, 80)">
<rect width="180" height="150" rx="10" fill="#FCE4EC" stroke="#C2185B" stroke-width="2"/>
<text x="90" y="25" text-anchor="middle" class="box-label">Actuators</text>
<rect x="15" y="45" width="70" height="35" rx="4" fill="#F8BBD9" stroke="#C2185B"/>
<text x="50" y="68" text-anchor="middle" class="small-text">Relay</text>
<rect x="95" y="45" width="70" height="35" rx="4" fill="#F8BBD9" stroke="#C2185B"/>
<text x="130" y="68" text-anchor="middle" class="small-text">Motor</text>
<rect x="15" y="90" width="70" height="35" rx="4" fill="#F8BBD9" stroke="#C2185B"/>
<text x="50" y="113" text-anchor="middle" class="small-text">LED</text>
<rect x="95" y="90" width="70" height="35" rx="4" fill="#F8BBD9" stroke="#C2185B"/>
<text x="130" y="113" text-anchor="middle" class="small-text">Buzzer</text>
</g>
<!-- Cloud (Optional) -->
<g transform="translate(900, 260)">
<rect width="180" height="100" rx="10" fill="#E0F7FA" stroke="#00838F" stroke-width="2" stroke-dasharray="5,3"/>
<text x="90" y="25" text-anchor="middle" class="box-label">Cloud (Optional)</text>
<text x="90" y="50" text-anchor="middle" class="small-text">Remote botserver</text>
<text x="90" y="70" text-anchor="middle" class="small-text">LLM APIs</text>
<text x="90" y="90" text-anchor="middle" class="small-text">Updates</text>
</g>
<!-- Arrows -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
</marker>
</defs>
<!-- Input to Server -->
<line x1="250" y1="140" x2="320" y2="180" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Display from Server -->
<line x1="320" y1="280" x2="250" y2="310" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Server to LLM -->
<line x1="560" y1="155" x2="630" y2="155" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Server to Actuators -->
<line x1="560" y1="200" x2="900" y2="155" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Server to Cloud -->
<line x1="560" y1="320" x2="900" y2="310" stroke="#666" stroke-width="2" stroke-dasharray="5,3" marker-end="url(#arrowhead)"/>
</svg>