环境准备apt install net-toolsapt update apt upgrade -y# 安装 Python 和 pipapt install -y python3 python3-pip python3-venv# 安装 Git如果需要apt install -y git# 创建工作目录mkdir -p /opt/vpl-backendcd /opt/vpl-backendrequirements.txt 内容如果 Cline 没生成手动创建fastapi0.104.1uvicorn[standard]0.24.0sqlalchemy2.0.23pydantic2.5.0pydantic-settings2.1.0python-dotenv1.0.0paramiko3.4.0websockets12.0python-multipart0.0.6pip install -r requirements.txtvim /opt/vpl-backend/.env内容# 后端配置HOST0.0.0.0PORT8000DATABASE_URLsqlite:///./data/projects.db# SSH 默认配置部署用VM_HOST192.168.x.x # 改为你的虚拟机IPVM_PORT22VM_USERNAMErootVM_PASSWORD你的密码VM_PATH/opt/executor#给文件权限chmod 777 /data/projects.dbchmod 777 /data# 安装依赖pip install --upgrade pippip install fastapi uvicorn[standard] sqlalchemy pydantic python-dotenv \paramiko websockets python-multipart aiosqlite asyncssh passlib bcrypt pyjwt \-i https://pypi.tuna.tsinghua.edu.cn/simplepython3 -m venv venvsource venv/bin/activatepip install pyjwtuvicorn app.main:app --host 0.0.0.0 --port 8000 --reload# 安装 screenapt install -y screen# 启动 screen 会话screen -S backend# 在 screen 中启动后端cd /opt/vpl-backendsource venv/bin/activateuvicorn app.main:app --host 0.0.0.0 --port 8000# 按 CtrlAD 退出 screen后端继续运行# 查看运行中的后端screen -r backend#暴露后端公网curl -fsSL https://natapp.cn/get.sh?authtoken1e938187ee5adb67 | sh #1e938187ee5adb67 你的tokencd /opt/natapp./run_natapp.sh#git仓库配置git config --global user.name wuxiaogit config --global user.email 13032540wu-xiao111user.noreply.gitee.com# 查看配置是否生效git config --global --listssh-keygen -t ed25519 -C 13032540wu-xiao111user.noreply.gitee.comgit remote add origin gitgitee.com:wu-xiao111/mishi.git# 基于当前已推送成功的master新建dev分支并切换过去git checkout -b dev# 推送提交git push origin devgit checkout mastergit pull origin master# 将dev合并到mastergit merge devgit push origin master1框架设计mishi/├── backend/ # 后端服务Python / FastAPI│ ├── requirements.txt # Python 依赖包列表FastAPI、SQLAlchemy、asyncssh等│ ├── app/│ │ ├── main.py # 应用入口 - 创建 FastAPI 实例、注册路由、CORS配置、健康检查│ │ ││ │ ├── api/ # HTTP API 接口层│ │ │ ├── __init__.py # API 包初始化│ │ │ ├── auth.py # 用户认证 API - 注册、登录、JWT 令牌、获取用户信息、种子root用户│ │ │ ├── projects.py # 项目管理 API - 项目的增删改查基于 JSON 文件存储│ │ │ ├── compile.py # 编译 API - 接收前端流程图配置→校验→生成Python代码→保存到服务器│ │ │ └── deploy.py # 部署 API - 通过 SSH 将编译代码上传到目标设备并执行、WebSocket 实时日志│ │ ││ │ ├── models/ # 数据库数据模型层SQLAlchemy ORM SQLite│ │ │ ├── __init__.py # 数据模型包 - 导出 Project、Base│ │ │ ├── project.py # 项目数据模型 ORM - 定义 Project 表结构、数据库引擎与会话管理│ │ │ └── user.py # 用户数据模型 ORM - 定义 User 表结构、密码哈希与验证方法│ │ ││ │ ├── schemas/ # Pydantic 数据校验模型请求/响应结构定义│ │ │ ├── __init__.py # Schema 包初始化│ │ │ ├── auth_schema.py # 认证相关 Schema - RegisterRequest、LoginRequest、UserResponse 等│ │ │ └── project_schema.py # 项目/编译/部署相关 Schema - CompileRequest、DeployRequest 等│ │ ││ │ ├── compiler/ # 编译引擎流程图→Python代码│ │ │ ├── __init__.py # 编译器包初始化│ │ │ ├── validator.py # 逻辑校验器 - 环路检测、空悬连线检查、重复ID检测、类型兼容性检查│ │ │ └── generator.py # 代码生成器 - 拓扑排序节点将 JSON 配置转换为可执行的 Python 脚本│ │ ││ │ └── deploy/ # 部署引擎SSH远程执行│ │ ├── __init__.py # 部署包初始化│ │ ├── ssh_client.py # SSH 客户端 - 异步 SSH 连接管理、远程命令执行、连接检测│ │ ├── file_transfer.py # 文件传输模块 - 通过 SSH 上传文件到目标设备、远程程序启停│ │ └── executor.py # 远程执行器 - 代码上传语法检查远程执行日志获取 的高层封装│ ││ └── data/ # 数据持久化目录运行时自动创建│ ├── projects.json # 项目数据存储文件JSON 格式│ └── users.json # 用户数据存储文件JSON 格式│├── frontend/ # 前端应用React TypeScript Vite│ ├── index.html # HTML 入口 - 挂载 React 应用的根页面│ ├── package.json # 前端依赖配置React、Ant Design、ReactFlow、Zustand 等│ ├── package-lock.json # 依赖锁定文件│ ├── tsconfig.json # TypeScript 编译配置 - 目标 ES2020、React JSX、严格模式│ ├── tsconfig.node.json # Vite 的 TypeScript 配置文件引用│ ├── vite.config.ts # Vite 构建配置 - React 插件、开发服务器端口3000、API 代理│ ││ └── src/ # 前端源码│ ├── main.tsx # 应用入口 - 渲染 React 根组件 App / 到 DOM│ ├── App.tsx # 应用主组件 - React Router 路由配置、登录状态恢复、拖拽上下文提供│ ├── index.css # 全局样式 - CSS 变量、ReactFlow 样式覆盖、自定义节点样式│ ││ ├── types/│ │ └── index.ts # 集中类型定义 - ModulePort、FlowNodeData、CompileResult、DeployConfig 等│ ││ ├── utils/│ │ ├── api.ts # API 工具函数 - 封装 fetch 请求、自动添加 JWT 令牌、authApi / projectApi│ │ └── relayMapper.ts # 继电器端口映射工具 - 1000个逻辑端口↔125个芯片的地址映射算法│ ││ ├── stores/ # Zustand 状态管理│ │ ├── useAuthStore.ts # 认证状态 - token、用户信息、登录/登出、会话恢复│ │ ├── useFlowStore.ts # 流程图状态 - 节点/连线CRUD、拓扑排序、JSON导出│ │ └── levelStore.ts # 分区状态 - 管理4个分区的独立流程图数据编译时合并│ ││ ├── api/ # API 调用封装层│ │ ├── compile.ts # 编译 API - compileProject、listGeneratedFiles、downloadFile│ │ └── deploy.ts # 部署 API - deployToDevice、getDeploymentRecords、getDeploymentLogs│ ││ ├── data/ # 模块分类数据一级分类 二级模块定义│ │ ├── modules.ts # 模块分类主索引 - 汇总所有16个一级分类的配置数据│ │ └── categories/│ │ ├── audio.ts # 声音输出类 - 蜂鸣器、扬声器、MP3播放、语音合成│ │ ├── auxiliary.ts # 特殊辅助类 - 时间戳、看门狗、调试输出│ │ ├── communication.ts # 通信互联类 - 串口、I2C、SPI、蓝牙、WiFi、LoRa 等│ │ ├── controlFlow.ts # 控制流 - 开始、结束等程序结构标记│ │ ├── display.ts # ️ 输出显示类 - LED、灯带、数码管、OLED、LCD 等│ │ ├── execution.ts # 执行流程类 - 顺序、并行、分支、循环、子程序│ │ ├── interaction.ts # 用户交互类 - 按键、触摸、摇杆、指纹、二维码扫描等│ │ ├── logic.ts # 逻辑控制类 - 与或非门、锁存器、触发器、比较器│ │ ├── math.ts # 数学运算类 - 加减乘除、取模、随机数、滤波器│ │ ├── motor.ts # ⚡ 动力输出类 - 直流电机、步进电机、伺服电机、风扇│ │ ├── power.ts # 电源控制类 - 继电器、可控硅、电源开关、电压检测│ │ ├── props.ts # ️ 互动道具类 - 推杆、电磁铁、烟雾机、转盘│ │ ├── security.ts # 安防报警类 - 门磁、烟雾报警、电控锁│ │ ├── sensor.ts # 输入检测类 - 红外、霍尔、超声波、温湿度、气体等传感器│ │ ├── signalTrigger.ts # 信号触发 - 遥控/信号触发占位符│ │ └── timing.ts # ⏱️ 时序控制类 - 延时器、定时器、计数器、时钟触发│ ││ ├── pages/ # 页面级组件│ │ ├── LoginPage.tsx # 登录/注册页面 - 表单验证、JWT 认证、跳转项目管理│ │ ├── ProjectListPage.tsx # 项目列表页面 - 本地项目(localStorage)云端项目、新建/导入/删除/搜索│ │ └── EditorPage.tsx # 编辑器页面 - 组装工具栏分区标签模块面板流程图属性面板│ ││ └── components/ # UI 组件│ ├── Toolbar/│ │ ├── index.tsx # 顶部工具栏 - 新建/保存/导入/编译/部署/清空、用户信息、模块统计│ │ └── CompileResultModal.tsx # 编译结果弹窗 - 成功时显示代码、失败时显示错误详情│ ││ ├── LevelTabs/│ │ └── index.tsx # 分区切换标签 - 分区1~4切换时自动保存/加载流程图数据│ ││ ├── NodePalette/│ │ └── index.tsx # 左侧模块面板 - 一级分类菜单可折叠 可拖拽的二级模块列表│ ││ ├── FlowEditor/│ │ ├── index.tsx # 中央流程图编辑区 - 基于 ReactFlow支持拖拽、连线、缩放、小地图│ │ └── CustomNode.tsx # 自定义流程图节点 - 继电器/延时/通用三种节点样式渲染│ ││ ├── PropertyPanel/│ │ └── index.tsx # 右侧属性面板 - 选中模块的参数编辑数值/开关/选择/滑块、删除│ ││ └── DeployModal/│ └── index.tsx # 部署配置弹窗 - 设备预设虚拟机/树莓派/自定义、SSH 连接信息表单2联合开发环境配置方案服务器数量适合团队维护成本代码管控强度Gitea Gerrit2 台10 人以上长期开发中需维护 Gerrit 服务极高强制 CR 提交校验纯 Gitea MR1 台5 人以内小团队低中等仅人工评审GitHub/Gitee 云端0 自建服务器外包短期项目无运维中等公有仓库存在代码泄露风险用方案1 Gitea Gerrit.3数据流前端流程图 (React Flow)↓导出 JSON 配置↓发送到后端 API (/api/compile)↓后端编译器 (compiler/generator.py)↓生成 Python 可执行脚本↓通过 SSH 部署到虚拟机执行4AI视频流处理单 / 2 路摄像头、树莓派边缘部署RTSPOpenCVYOLO 本地 AI不用外网、不上传画面、无隐私风险 多路商用密室、需要稳定告警海康 SDK 取流低延迟、断线自动重连。5后端部署5.1 在虚拟机中准备环境# 更新系统apt update apt upgrade -y# 安装 Python 和 pipapt install -y python3 python3-pip python3-venv# 安装 Git如果需要apt install -y git# 创建工作目录mkdir -p /opt/vpl-backendcd /opt/vpl-backend2.2 上传后端代码到虚拟机方式一使用 scp本地直接上传# 在本地电脑执行不是虚拟机scp -r ./backend/* root你的虚拟机IP:/opt/vpl-backend/方式二使用 WinSCP/FileZilla打开 WinSCP连接你的虚拟机IP、用户名、密码将本地 backend/ 文件夹拖拽到 /opt/vpl-backend/安装 Python 依赖cd /opt/vpl-backend# 创建虚拟环境推荐python3 -m venv venvsource venv/bin/activate# 安装依赖pip install -r requirements.txtrequirements.txt 内容如果 Cline 没生成手动创建fastapi0.104.1uvicorn[standard]0.24.0sqlalchemy2.0.23pydantic2.5.0pydantic-settings2.1.0python-dotenv1.0.0paramiko3.4.0websockets12.0python-multipart0.0.65.2 配置环境变量创建 .env 文件vim /opt/vpl-backend/.env内容# 后端配置HOST0.0.0.0PORT8000DATABASE_URLsqlite:///./data/projects.db# SSH 默认配置部署用VM_HOST192.168.x.x # 改为你的虚拟机IPVM_PORT22VM_USERNAMErootVM_PASSWORD你的密码VM_PATH/opt/executor给文件权限chmod 777 /data/projects.dbchmod 777 /data5.3 启动后端服务cd /opt/vpl-backendsource venv/bin/activateuvicorn app.main:app --host 0.0.0.0 --port 8000 --reload看到以下输出表示成功INFO: Started server processINFO: Waiting for application startup.INFO: Application startup complete.INFO: Uvicorn running on http://0.0.0.0:8000验证在虚拟机浏览器访问 http://localhost:8000/docs能看到 Swagger API 文档。5.4 保持后端持续运行使用 screen# 安装 screenapt install -y screen# 启动 screen 会话screen -S backend# 在 screen 中启动后端cd /opt/vpl-backendsource venv/bin/activateuvicorn app.main:app --host 0.0.0.0 --port 8000# 按 CtrlAD 退出 screen后端继续运行# 查看运行中的后端screen -r backend第三步暴露后端到公网ngrok备选方案cd /opt/natapp ./opt/natapp/run_natapp.sh3.1 安装 ngrok# 下载 ngrokwget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zipunzip ngrok-stable-linux-amd64.zipsudo mv ngrok /usr/local/bin/# 验证安装ngrok --version3.2 注册并获取 Auth Token访问 https://ngrok.com 注册账号在 Dashboard 获取你的 Auth Token在虚拟机中配置bash复制下载ngrok config add-authtoken 你的token3.3 暴露后端服务bash复制下载# 在虚拟机中启动 ngrok另开一个 screenscreen -S ngrokngrok http 8000看到输出text复制下载Forwarding https://xxxx.ngrok.io - http://localhost:8000记住这个 https://xxxx.ngrok.io 地址前端需要用到。按 CtrlAD 退出 screen。 第四步修改前端 API 地址4.1 找到前端 API 配置文件在 frontend/src/ 目录下找到 API 配置文件通常是 src/config/index.ts 或 src/api/request.ts。4.2 修改为 ngrok 地址typescript复制下载// 原来// export const API_BASE_URL http://localhost:8000// 改成 ngrok 地址export const API_BASE_URL https://xxxx.ngrok.io // 替换为你的 ngrok 地址4.3 重新打包前端重启后端 cd /opt/vpl-backend source venv/bin/activate uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload编译前端打包cd frontendnpm run build上传到阿里云scp -r ./dist/* root123.57.224.65:/var/www/html/ 完整架构图┌─────────────────────────────────────────────────────────────┐│ 用户浏览器 ││ 访问 http://123.57.224.65/ │└─────────────────────────┬───────────────────────────────────┘│▼┌─────────────────────────────────────────────────────────────┐│ 阿里云服务器 (前端) ││ Nginx 托管静态文件 ││ 前端调用 ngrok 地址访问后端 │└─────────────────────────┬───────────────────────────────────┘││ HTTPS (公网)▼┌─────────────────────────────────────────────────────────────┐│ ngrok 内网穿透 ││ https://xxxx.ngrok.io │└─────────────────────────┬───────────────────────────────────┘│▼┌─────────────────────────────────────────────────────────────┐│ 本地虚拟机 (后端) ││ FastAPI :8000 ││ 编译 SSH 部署 │└─────────────────────────┬───────────────────────────────────┘││ SSH (内网)▼┌─────────────────────────────────────────────────────────────┐│ 本地虚拟机 (执行器) ││ /opt/executor/main.py ││ 运行生成的程序 │└─────────────────────────────────────────────────────────────┘6映射架构从前端模块到物理继电器整个对应关系可以分为三层形成一个清晰的映射表层级 描述 示例1. 逻辑模块层 前端画布上的一个“继电器”节点是用户操作的单元-4。 继电器1-1、继电器3-22. 物理地址层 为每个TPIC6C596芯片及其8个输出通道定义的唯一地址。 级联地址0x00 的 通道03. 硬件驱动层 树莓派最终执行的代码控制真实的GPIO引脚时序将数据位移到指定地址-7。 shift_out(芯片ID, 通道号, 状态)7树莓派7.1基础信息7.2硬件接口层框架设计8树莓派上跑模型由于树莓派没有NPU纯靠cpu跑性能太差所以增加了一个 Hailo-8L 26TPS可以轻松处理大部分模型。8.1YOLO模型YOLO 模型完全可以跑在 Hailo-8L 上而且效果非常显著但需要走一套特定的流程不能直接把标准 YOLO 模型放上去跑。Hailo-8L 不是通用的 GPU而是一个专用的 AI 加速芯片。因此标准的 PyTorch 或 ONNX 格式的 YOLO 模型无法直接在它上面运行。你需要使用 Hailo 提供的工具链将模型转换为其专用的.hef格式-10。而且这个模型转换工具Hailo Dataflow Compiler, DFC目前不支持在树莓派上直接运行你通常需要在一台 x86 架构的 Ubuntu 电脑上完成转换。1. 硬件安装与系统设置将 Hailo-8L 模块安装到树莓派的 M.2 HAT 上-5。确保使用官方电源保证供电稳定-5。更新系统固件sudo rpi-eeprom-update确保固件日期晚于2023年12月6日-8-12。进入raspi-config在 “Advanced Options” 中将PCIe Speed设置为Gen 3模式以获得最佳性能-2-5-9。2. 安装 Hailo 软件栈在树莓派终端执行以下命令这会一次性安装驱动程序、运行时库HailoRT和开发框架TAPPAS-2-5-8sudo apt install hailo-all sudo reboot重启后通过以下命令验证硬件和驱动是否安装成功hailortcli fw-control identify如果成功你会看到关于 Hailo-8L 芯片的详细信息-2-5。3. 准备并运行 YOLO 模型这是最核心的一步因为你需要一个 Hailo 专用的 YOLO 模型文件.hef格式。使用官方示例最简单树莓派官方提供了一些示例 JSON 配置文件如hailo_yolov6_inference.json可以配合rpicam-apps直接调用。克隆官方仓库后运行类似下面的命令即可体验-8-11-12rpicam-hello -t 0 --post-process-file ~/rpicam-apps/assets/hailo_yolov6_inference.json --lores-width 640 --lores-height 640转换自己的 YOLO 模型如果你想运行自己的 YOLOv8 或 YOLOv11 模型你需要遵循一个标准的转换流程-10导出 ONNX将 PyTorch 模型导出为 ONNX 格式。编译为 HEF在一台 x86 的 Ubuntu 机器上使用Hailo Dataflow Compiler (DFC)将 ONNX 模型编译成.hef文件-10。部署推理将生成的.hef文件复制回树莓派然后使用 Hailo 提供的 Python 示例代码如run.py或基于 GStreamer 的管道来加载模型并进行推理10遇到的问题failed to fetch前端IP配置错误要配置natapp新IP将后端IP暴露给公网http://pa49277b.natappfree.cc本地保存无权限报错保存项目失败: (sqlite3.OperationalError) attempt to write a readonly database [SQL: INSERT INTO projects (id, name, description, data, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)] [parameters: (5cfa59e2-cda4-4e2d-9e6c-1c75b95f0dd6, wuxiao, , {nodes:[],edges:[]}, 2026-07-10 15:55:07.767639, 2026-07-10 15:55:07.767643)] (Background on this error at: https://sqlalche.me/e/20/e3q8)修改# 进入后端项目目录 cd /opt/vpl-backend # 查找 .db 文件 find . -name *.db位于data/目录下。chmod 给权限./data/projects.db重启后端即可。uvicorn app.main:app --host 0.0.0.0 --port 8000 --reloadGPIO点不亮RPi.GPIO 不支持树莓派 5 改用 gpiozero