拓冰网站定制 
Velxio架构深度解析React 19、FastAPI与QEMU如何协作仿真5大CPU架构【免费下载链接】velxioEmulate Arduino, ESP32 Raspberry Pi. in your browser. Write code, compile, and run on 19 real boards — Arduino Uno, ESP32, ESP32-C3, Raspberry Pi Pico, Raspberry Pi 3, and more. No hardware, no cloud, no limits.. Discord: https://discord.gg/3mARjJrh4E项目地址: https://gitcode.com/gh_mirrors/ve/velxioVelxio 是一款开源的浏览器端多板卡硬件仿真器与电路模拟器你可以用 Arduino C、MicroPython、ESP-IDF 或 Python 写代码编译后直接在浏览器里对着真实的 CPU 指令集AVR8、ARM Cortex-M、Xtensa、RISC-V、ARM Cortex-A运行——支持 Arduino Uno、ESP32、Raspberry Pi Pico 与 Raspberry Pi 3 等 40 多块开发板、150 电子元件无需硬件、无需云端。这篇文章带你完整拆解前端 React 19 画板、FastAPI 编译后端与 QEMU 仿真内核三者是如何接力协作让你在浏览器标签页里点亮一块真 ESP32 的。一、架构全景一张图看懂三层协作Velxio 的官方架构文档 docs/ARCHITECTURE.md 用一张 ASCII 图概括了整个系统核心结构如下浏览器 / Tauri 桌面端 │ ▼ 前端 React 19 Vite 7 TypeScript Monaco 编辑器 Zustand 状态 仿真画板 5 个 CPU 后端统一 PinManager 门面 │ HTTP 编译 WebSocket 仿真 ▼ 后端 FastAPI Python 3.12 /api/compile/ arduino-cli / ESP-IDF 编译 /ws/sim/{id} QEMU 仿真桥接 │ ▼ arduino-cli · ESP-IDF · libqemu-xtensa.so · qemu-system-aarch64一个关键设计后端完全无状态。没有数据库、没有用户体系——编译结果通过 HTTP 返回后即丢弃QEMU 实例的生命周期与一条 WebSocket 会话绑定。这让整个系统可以一键 Docker 自托管docker-compose.yml 一条命令启动。五大 CPU 家族与后端对应关系CPU 架构代表板卡仿真位置实现方式AVR8Arduino Uno / ATtiny 浏览器内avr8js纯 JS 指令集解释器ARM Cortex-MPi Pico (RP2040) / STM32 浏览器内rp2040jsXtensa LX6/LX7ESP32 / ESP32-S3️ 后端QEMUlibqemu-xtensaRISC-VESP32-C3 / C6️ 后端QEMUlibqemu-riscv32ARM Cortex-A (Linux)Raspberry Pi 3/4/5️ 后端qemu-system-aarch64 官方架构原则是真仿真无捷径没有任何一块板卡是手工状态机模拟每个后端执行的都是真实 ISA 指令。二、前端React 19 画板如何驱动 5 种 CPU前端技术栈见 frontend/package.jsonReact 19 Vite 7 TypeScript 5.9应用外壳Zustand 5五个核心 Store编辑器、仿真器、工程、电路、虚拟文件系统Monaco EditorVS Code 同款代码编辑器wokwi-elements (Lit) 原生 Web Components150 元件的渲染与交互avr8js / rp2040js跑在浏览器里的 AVR 与 RP2040 CPU2.1 浏览器内仿真60 FPS 的指令循环以 Arduino 为例AVRSimulator.ts 把 avr8js 的 CPU、定时器、ADC、SPI、I2C 全部装配起来。点击运行后的流程requestAnimationFrame 循环约 60 FPS → 每帧执行 cyclesPerSecond / 60 条指令 → 端口写操作触发 AVRIOPort 监听器 → PinManager.updatePort() → PartSimulationRegistry 回调 → LED 变色 / LCD 刷新 / NeoPixel 逐灯点亮PinManager 是整个前端的中枢不管 CPU 是浏览器里的 JS 解释器还是远端 QEMU引脚状态最终都汇聚到同一个门面再通过PartSimulationRegistry分发给 16 种已注册元件。新增一个元件行为只需注册一个 handler画板代码零改动——这是典型的插件式架构。反向通道画板输入 → CPU同样统一你按下画板上的按钮Web Component 发出事件最终变成 AVR 的setPin()注入或一条发给 QEMU 的 WebSocket 指令。2.2 跨后端桥接WebSocket 上的 JSON 协议ESP32 和树莓派跑不动在浏览器里指令吞吐量和外设模型太重所以前端只做桥Esp32Bridge.ts连接/ws/sim/{boardId}把后端的gpio_change/uart_tx/i2c_event等事件分发进 PinManagerRaspberryPi3Bridge.ts更精巧——客机的 I2C/SPI 事务会打包成pi_bus_request帧发回浏览器由画板上的器件模型应答模拟出真实的总线交互。这套桥接甚至能模拟 WiFiESP32 固件连上虚拟 AP、拿到 IP、与真实 MQTT broker 收发报文全程由 QEMU 内核 后端代理完成。三、后端FastAPI 的编译分发与 QEMU 管理3.1 编译一个端点三种编译器点击Compile后前端通过 Axios POST 到/api/compile/后端按 FQBN 前缀分发FQBN 前缀编译器产物arduino:avr:*arduino-cli子进程.hexrp2040:rp2040:*arduino-cli earlephilhower core.binesp32:esp32:*ESP-IDF 完整项目构建ccache 持久化构建目录闪存镜像编译日志与固件一起返回前端useSimulatorStore自动loadHex/loadBin——从点编译到固件就位是一条流水线用户无感。一个工程细节很值得称道ESP-IDF 首次编译要 5–7 分钟Docker 部署通过ccache 持久化 ninja 构建目录两个命名卷把热构建压到 5–30 秒见 docker-compose.yml 中的IDF_CCACHE_ENABLE与VELXIO_PERSISTENT_BUILD_DIR。3.2 QEMU 内核子进程隔离 双套实现ESP32 系有两条并行的 QEMU 接入路径进程模式esp_qemu_manager.py每个实例拉起一个qemu-system-xtensaESP32/S3或qemu-system-riscv32ESP32-C3进程UART0 和 GPIO 分别映射到 TCP socket库模式esp32_worker.py把libqemu-xtensa.so加载进独立的 Python 子进程通过 stdin/stdout 的 JSON 行协议驱动。子进程隔离是关键——多个 QEMU 实例共存时不会发生 DLL 状态冲突。树莓派则由qemu-system-aarch64加载 SD 卡镜像qcow2 overlay启动完整 LinuxPython 文件通过虚拟文件系统useVfsStore挂载进去。后端端点职责/api/compile/同步 异步编译/api/compile/chip/自定义芯片 C→WASM 编译/api/libraries/arduino-cli 库搜索/安装/ws/sim/{id}QEMU 仿真桥接每板一条/api/iot/浏览器 ↔ 模拟 ESP32 Web 服务器代理/api/mcp/、/sse/MCP 服务器供 AI 工具接入四、两条特色链路电气共仿真与自定义芯片4.1 ngspice-WASM数字与模拟在同一循环里大多数 Web 仿真器里analogRead()只是查表Velxio 则把ngspice经 WASM 编译懒加载约 39 MB直接跑在浏览器里NetlistBuilder用 Union-Find 并查集把画板上的导线合并成电气节点每个元件componentToSpice()生成 SPICE 卡MCU 引脚建模为戴维南电源ngspice 解算节点电压电压表/电流表/示波器读探针analogRead()拿到的是真实解算出的电压。4.2 自定义芯片用 C 写一颗 IC在 custom-chip 页面你用 C 写一颗 IC后端经 Emscripten 编译成 WebAssembly前端 ChipRuntimeWASI shim GPIO/总线桥在浏览器里逐实例运行在 ESP32 场景下 WASM 芯片则运行在后端 QEMU worker 子进程里wasmtime保证 I2C 事务能同步应答。仓库自带 30 示例芯片Intel 4004、Z80、MCP3008……五、一次点亮 LED的完整生命周期把前面所有环节串起来从打开浏览器到 LED 闪烁1. Monaco 编辑 blink.ino useEditorStore按板卡分组多文件 2. POST /api/compile/ → arduino-cli → hex_content 返回 3. useSimulatorStore 自动 loadHex 4. 点击 Run · AVR 板浏览器内 rAF 循环逐条执行指令 · ESP32 板WebSocket → 后端拉起 QEMU 子进程 → 事件回流 5. 引脚写 → PinManager → 元件 Web Component 变色 6. 开启电气层ngspice 每帧解算示波器画出真实波形工程可保存为.vlx单文件 JSON板卡、元件、连线、全部代码前端 vlxFile.ts 负责导出/导入——不需要服务器也能分享工程。六、这套架构给嵌入式开发者的启示真仿真 ≠ 只能服务器跑AVR/RP2040 用 JS 指令集解释器跑在前端ESP32/Pi 用 QEMU 跑在后端前端用统一 PinManager 门面抹平差异——这是分层仿真的教科书案例无状态后端极大降低了自托管门槛一条docker compose up即可拥有完整仿真服务插件化元件注册表PartSimulationRegistry让 150 元件的添加不侵入画板核心代码MCP 服务器stdio SSE 双入口docs/MCP.md让 AI 编码工具也能直接读写这块虚拟电路板。如果你想亲手把玩这套架构docker compose up --build # 打开 http://localhost:3080更多细节可阅读 docs/ARCHITECTURE.md、docs/emulator.md 与 docs/RISCV_EMULATION.md——从浏览器里的第一条指令到 QEMU 内核里的 GPIO 翻转Velxio 都为你留了完整的源码地图。【免费下载链接】velxioEmulate Arduino, ESP32 Raspberry Pi. in your browser. Write code, compile, and run on 19 real boards — Arduino Uno, ESP32, ESP32-C3, Raspberry Pi Pico, Raspberry Pi 3, and more. No hardware, no cloud, no limits.. Discord: https://discord.gg/3mARjJrh4E项目地址: https://gitcode.com/gh_mirrors/ve/velxio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Velxio架构深度解析：React 19、FastAPI与QEMU如何协作仿真5大CPU架构
Velxio架构深度解析React 19、FastAPI与QEMU如何协作仿真5大CPU架构【免费下载链接】velxioEmulate Arduino, ESP32 Raspberry Pi. in your browser. Write code, compile, and run on 19 real boards — Arduino Uno, ESP32, ESP32-C3, Raspberry Pi Pico, Raspberry Pi 3, and more. No hardware, no cloud, no limits.. Discord: https://discord.gg/3mARjJrh4E项目地址: https://gitcode.com/gh_mirrors/ve/velxioVelxio 是一款开源的浏览器端多板卡硬件仿真器与电路模拟器你可以用 Arduino C、MicroPython、ESP-IDF 或 Python 写代码编译后直接在浏览器里对着真实的 CPU 指令集AVR8、ARM Cortex-M、Xtensa、RISC-V、ARM Cortex-A运行——支持 Arduino Uno、ESP32、Raspberry Pi Pico 与 Raspberry Pi 3 等 40 多块开发板、150 电子元件无需硬件、无需云端。这篇文章带你完整拆解前端 React 19 画板、FastAPI 编译后端与 QEMU 仿真内核三者是如何接力协作让你在浏览器标签页里点亮一块真 ESP32 的。一、架构全景一张图看懂三层协作Velxio 的官方架构文档 docs/ARCHITECTURE.md 用一张 ASCII 图概括了整个系统核心结构如下浏览器 / Tauri 桌面端 │ ▼ 前端 React 19 Vite 7 TypeScript Monaco 编辑器 Zustand 状态 仿真画板 5 个 CPU 后端统一 PinManager 门面 │ HTTP 编译 WebSocket 仿真 ▼ 后端 FastAPI Python 3.12 /api/compile/ arduino-cli / ESP-IDF 编译 /ws/sim/{id} QEMU 仿真桥接 │ ▼ arduino-cli · ESP-IDF · libqemu-xtensa.so · qemu-system-aarch64一个关键设计后端完全无状态。没有数据库、没有用户体系——编译结果通过 HTTP 返回后即丢弃QEMU 实例的生命周期与一条 WebSocket 会话绑定。这让整个系统可以一键 Docker 自托管docker-compose.yml 一条命令启动。五大 CPU 家族与后端对应关系CPU 架构代表板卡仿真位置实现方式AVR8Arduino Uno / ATtiny 浏览器内avr8js纯 JS 指令集解释器ARM Cortex-MPi Pico (RP2040) / STM32 浏览器内rp2040jsXtensa LX6/LX7ESP32 / ESP32-S3️ 后端QEMUlibqemu-xtensaRISC-VESP32-C3 / C6️ 后端QEMUlibqemu-riscv32ARM Cortex-A (Linux)Raspberry Pi 3/4/5️ 后端qemu-system-aarch64 官方架构原则是真仿真无捷径没有任何一块板卡是手工状态机模拟每个后端执行的都是真实 ISA 指令。二、前端React 19 画板如何驱动 5 种 CPU前端技术栈见 frontend/package.jsonReact 19 Vite 7 TypeScript 5.9应用外壳Zustand 5五个核心 Store编辑器、仿真器、工程、电路、虚拟文件系统Monaco EditorVS Code 同款代码编辑器wokwi-elements (Lit) 原生 Web Components150 元件的渲染与交互avr8js / rp2040js跑在浏览器里的 AVR 与 RP2040 CPU2.1 浏览器内仿真60 FPS 的指令循环以 Arduino 为例AVRSimulator.ts 把 avr8js 的 CPU、定时器、ADC、SPI、I2C 全部装配起来。点击运行后的流程requestAnimationFrame 循环约 60 FPS → 每帧执行 cyclesPerSecond / 60 条指令 → 端口写操作触发 AVRIOPort 监听器 → PinManager.updatePort() → PartSimulationRegistry 回调 → LED 变色 / LCD 刷新 / NeoPixel 逐灯点亮PinManager 是整个前端的中枢不管 CPU 是浏览器里的 JS 解释器还是远端 QEMU引脚状态最终都汇聚到同一个门面再通过PartSimulationRegistry分发给 16 种已注册元件。新增一个元件行为只需注册一个 handler画板代码零改动——这是典型的插件式架构。反向通道画板输入 → CPU同样统一你按下画板上的按钮Web Component 发出事件最终变成 AVR 的setPin()注入或一条发给 QEMU 的 WebSocket 指令。2.2 跨后端桥接WebSocket 上的 JSON 协议ESP32 和树莓派跑不动在浏览器里指令吞吐量和外设模型太重所以前端只做桥Esp32Bridge.ts连接/ws/sim/{boardId}把后端的gpio_change/uart_tx/i2c_event等事件分发进 PinManagerRaspberryPi3Bridge.ts更精巧——客机的 I2C/SPI 事务会打包成pi_bus_request帧发回浏览器由画板上的器件模型应答模拟出真实的总线交互。这套桥接甚至能模拟 WiFiESP32 固件连上虚拟 AP、拿到 IP、与真实 MQTT broker 收发报文全程由 QEMU 内核 后端代理完成。三、后端FastAPI 的编译分发与 QEMU 管理3.1 编译一个端点三种编译器点击Compile后前端通过 Axios POST 到/api/compile/后端按 FQBN 前缀分发FQBN 前缀编译器产物arduino:avr:*arduino-cli子进程.hexrp2040:rp2040:*arduino-cli earlephilhower core.binesp32:esp32:*ESP-IDF 完整项目构建ccache 持久化构建目录闪存镜像编译日志与固件一起返回前端useSimulatorStore自动loadHex/loadBin——从点编译到固件就位是一条流水线用户无感。一个工程细节很值得称道ESP-IDF 首次编译要 5–7 分钟Docker 部署通过ccache 持久化 ninja 构建目录两个命名卷把热构建压到 5–30 秒见 docker-compose.yml 中的IDF_CCACHE_ENABLE与VELXIO_PERSISTENT_BUILD_DIR。3.2 QEMU 内核子进程隔离 双套实现ESP32 系有两条并行的 QEMU 接入路径进程模式esp_qemu_manager.py每个实例拉起一个qemu-system-xtensaESP32/S3或qemu-system-riscv32ESP32-C3进程UART0 和 GPIO 分别映射到 TCP socket库模式esp32_worker.py把libqemu-xtensa.so加载进独立的 Python 子进程通过 stdin/stdout 的 JSON 行协议驱动。子进程隔离是关键——多个 QEMU 实例共存时不会发生 DLL 状态冲突。树莓派则由qemu-system-aarch64加载 SD 卡镜像qcow2 overlay启动完整 LinuxPython 文件通过虚拟文件系统useVfsStore挂载进去。后端端点职责/api/compile/同步 异步编译/api/compile/chip/自定义芯片 C→WASM 编译/api/libraries/arduino-cli 库搜索/安装/ws/sim/{id}QEMU 仿真桥接每板一条/api/iot/浏览器 ↔ 模拟 ESP32 Web 服务器代理/api/mcp/、/sse/MCP 服务器供 AI 工具接入四、两条特色链路电气共仿真与自定义芯片4.1 ngspice-WASM数字与模拟在同一循环里大多数 Web 仿真器里analogRead()只是查表Velxio 则把ngspice经 WASM 编译懒加载约 39 MB直接跑在浏览器里NetlistBuilder用 Union-Find 并查集把画板上的导线合并成电气节点每个元件componentToSpice()生成 SPICE 卡MCU 引脚建模为戴维南电源ngspice 解算节点电压电压表/电流表/示波器读探针analogRead()拿到的是真实解算出的电压。4.2 自定义芯片用 C 写一颗 IC在 custom-chip 页面你用 C 写一颗 IC后端经 Emscripten 编译成 WebAssembly前端 ChipRuntimeWASI shim GPIO/总线桥在浏览器里逐实例运行在 ESP32 场景下 WASM 芯片则运行在后端 QEMU worker 子进程里wasmtime保证 I2C 事务能同步应答。仓库自带 30 示例芯片Intel 4004、Z80、MCP3008……五、一次点亮 LED的完整生命周期把前面所有环节串起来从打开浏览器到 LED 闪烁1. Monaco 编辑 blink.ino useEditorStore按板卡分组多文件 2. POST /api/compile/ → arduino-cli → hex_content 返回 3. useSimulatorStore 自动 loadHex 4. 点击 Run · AVR 板浏览器内 rAF 循环逐条执行指令 · ESP32 板WebSocket → 后端拉起 QEMU 子进程 → 事件回流 5. 引脚写 → PinManager → 元件 Web Component 变色 6. 开启电气层ngspice 每帧解算示波器画出真实波形工程可保存为.vlx单文件 JSON板卡、元件、连线、全部代码前端 vlxFile.ts 负责导出/导入——不需要服务器也能分享工程。六、这套架构给嵌入式开发者的启示真仿真 ≠ 只能服务器跑AVR/RP2040 用 JS 指令集解释器跑在前端ESP32/Pi 用 QEMU 跑在后端前端用统一 PinManager 门面抹平差异——这是分层仿真的教科书案例无状态后端极大降低了自托管门槛一条docker compose up即可拥有完整仿真服务插件化元件注册表PartSimulationRegistry让 150 元件的添加不侵入画板核心代码MCP 服务器stdio SSE 双入口docs/MCP.md让 AI 编码工具也能直接读写这块虚拟电路板。如果你想亲手把玩这套架构docker compose up --build # 打开 http://localhost:3080更多细节可阅读 docs/ARCHITECTURE.md、docs/emulator.md 与 docs/RISCV_EMULATION.md——从浏览器里的第一条指令到 QEMU 内核里的 GPIO 翻转Velxio 都为你留了完整的源码地图。【免费下载链接】velxioEmulate Arduino, ESP32 Raspberry Pi. in your browser. Write code, compile, and run on 19 real boards — Arduino Uno, ESP32, ESP32-C3, Raspberry Pi Pico, Raspberry Pi 3, and more. No hardware, no cloud, no limits.. Discord: https://discord.gg/3mARjJrh4E项目地址: https://gitcode.com/gh_mirrors/ve/velxio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考