MogFace人脸检测模型WebUI集成STM32CubeMX开发流程详解

MogFace人脸检测模型WebUI集成STM32CubeMX开发流程详解最近在做一个智能门锁的项目需要用到人脸识别功能。直接跑大模型在嵌入式设备上不太现实但把模型部署在服务器上让STM32去调用API接口这个思路就靠谱多了。正好看到MogFace这个人脸检测模型有现成的WebUI我就琢磨着怎么把它和STM32CubeMX开发流程结合起来让嵌入式设备也能轻松“看脸”。这篇文章我就来手把手带你走一遍这个流程。从在STM32CubeMX里创建工程、配置网络到写代码去调用WebUI的API再到解析返回的JSON数据整个过程我都会用最直白的话讲清楚。即使你之前没怎么接触过网络编程或者JSON解析跟着做下来也能搞定。1. 准备工作与环境搭建在开始敲代码之前我们得先把“舞台”搭好。这里主要分两部分一是确保MogFace的WebUI服务已经跑起来了二是准备好STM32的开发环境。1.1 MogFace WebUI服务端准备首先你得有一个正在运行的MogFace WebUI服务。这个服务通常部署在一台性能足够的电脑或者服务器上它提供了通过HTTP请求进行人脸检测的API接口。假设你的服务地址是http://192.168.1.100:7860请替换成你实际的IP和端口。关键是要知道它的API端点Endpoint是什么。对于这类WebUI常见的接口是/run/predict用于提交预测任务。你需要通过浏览器的开发者工具按F12看Network标签或者查阅WebUI的文档确认具体的请求URL、方法通常是POST以及需要发送的数据格式比如一个包含图片的multipart/form-data表单。简单来说这一步的目标就是弄清楚你的STM32设备需要向哪个地址、发送什么样格式的数据才能拿到人脸检测的结果。1.2 STM32开发环境准备硬件方面你需要一块带网络功能的STM32开发板比如STM32F407 Discovery带以太网或者STM32H743 Nucleo带以太网或Wi-Fi模块。软件方面需要STM32CubeMX用于图形化配置芯片外设和生成代码框架。确保安装的是较新版本。IDE/编译器比如STM32CubeIDE、Keil MDK或者IAR。我用的是STM32CubeIDE因为它和CubeMX集成得比较好。串口调试助手比如Putty、SecureCRT或者CubeIDE自带的串口终端用于查看程序打印的日志这对调试网络通信至关重要。准备好这些我们就可以打开CubeMX开始创建工程了。2. STM32CubeMX工程创建与外设配置CubeMX就像乐高说明书帮我们把芯片里复杂的时钟、引脚、外设模块都配置好生成一个可以直接写业务逻辑的“毛坯房”代码。2.1 创建新工程与芯片选择打开STM32CubeMX点击“New Project”。在芯片选择器里输入你的开发板型号比如STM32F407ZG然后选中对应的芯片点击“Start Project”。接下来我们要配置几个核心部分时钟、调试接口、网络外设和串口。2.2 系统核心配置时钟配置Clock Configuration 切换到“Clock Configuration”标签页。网络模块对时钟精度有要求。对于STM32F4系列通常需要配置外部高速时钟HSE并通过PLL将系统时钟SYSCLK设置到最高频率如168MHz。CubeMX的时钟树界面很直观你只需要在对应位置输入目标频率它就会自动帮你计算和配置分频、倍频系数。确保ETH以太网或对应的外设时钟被正确使能并达到所需频率。调试接口SYS 在“Pinout Configuration”标签页的左侧找到“System Core” - “SYS”。在“Debug”下拉菜单中选择“Serial Wire”。这样就能通过ST-Link进行调试和下载程序了。2.3 网络通信外设配置这是最关键的一步我们要让STM32能够连接网络。对于有线以太网如STM32F407在左侧找到“Connectivity” - “ETH”。在“Mode”中勾选“RMII”接口这是大多数开发板使用的精简接口。然后切换到“Parameter Settings”标签。在“PHY Interface”中选择你板载PHY芯片的型号常见的是LAN8742。配置“Auto Negotiation”为开启让板子自动和路由器协商速率和双工模式。“MAC Address”可以自定义一个只要在局域网内唯一就行。配置完成后CubeMX会自动帮你分配好ETH相关的引脚如RMII_TXD0, RMII_MDC等这些引脚通常已经固定不需要手动调整。对于无线Wi-Fi如通过ESP8266/AT指令或SPI接口Wi-Fi模块如果使用串口AT指令的Wi-Fi模块最常见则主要配置一个串口USART用于发送AT命令。在“Connectivity”下选择一个USART比如USART3。配置模式为“Asynchronous”异步并设置一个合适的波特率比如115200。记下分配的TX和RX引脚。2.4 调试与日志输出配置USART为了方便查看程序运行状态和调试信息我们配置一个串口来打印日志。在“Connectivity”下选择另一个USART比如USART2。同样配置为“Asynchronous”模式波特率设置为115200。记住分配的引脚比如PA2TX PA3RX。你需要用杜邦线将这两个引脚连接到USB转TTL模块再接到电脑上用串口助手软件查看输出。2.5 生成工程代码所有配置检查无误后就可以生成代码了。点击顶部菜单的“Project Manager”。在“Project”标签页给你的工程起个名字比如MogFace_Client选择工程保存的路径。在“Toolchain / IDE”中选择你使用的IDE比如“STM32CubeIDE”。重要在“Code Generator”部分我强烈建议勾选“Generate peripheral initialization as a pair of ‘.c/.h’ files per peripheral”。这会把每个外设的初始化代码放在独立的文件里代码结构更清晰。最后点击右上角的“GENERATE CODE”。CubeMX会生成完整的工程文件并自动打开你的IDE如果选择了STM32CubeIDE。3. 编写HTTP客户端与图像上传代码现在“毛坯房”的骨架已经搭好了我们开始进行“室内装修”——编写业务逻辑代码。我们的目标是让STM32能拍一张照片或从内存中读取一张预设图片然后通过HTTP POST请求把它发送给MogFace WebUI服务器。3.1 添加必要的软件库HTTP通信和JSON解析需要用到一些库。在STM32CubeIDE中工程通常已经包含了HAL库和标准C库。我们还需要网络协议栈如果使用以太网ETHCubeMX默认会集成LwIP一个轻量级TCP/IP协议栈。如果使用AT指令的Wi-Fi模块我们通常需要自己实现基于串口的TCP/IP AT命令驱动。JSON解析器推荐使用cJSON它非常轻量适合嵌入式系统。你可以从GitHub下载cJSON.c和cJSON.h添加到工程的Src和Inc文件夹中并在IDE里将其加入编译路径。3.2 实现图片数据准备在实际项目中图片可能来自摄像头模块如OV7670。但为了简化教程我们先假设有一张已经存储在STM32内部Flash或外部SPI Flash中的JPEG格式图片。我们需要将这张图片以二进制数组的形式准备好。一个取巧的方法是使用一些在线工具将小尺寸的测试图片比如test_face.jpg转换成C语言数组。这个数组就是我们要发送的图片数据。/* 假设这是转换后得到的图片数组存储在flash中 */ const uint8_t test_jpeg_image[] { 0xFF, 0xD8, 0xFF, 0xE0, 0x00, 0x10, 0x4A, 0x46, 0x49, 0x46, 0x00, 0x01, 0x01, 0x00, 0x00, 0x01, // ... 大量的图片数据 ... 0xFF, 0xD9 // JPEG结束标记 }; const uint32_t test_jpeg_image_size sizeof(test_jpeg_image);3.3 构建HTTP POST请求这是核心步骤。我们需要构造一个符合multipart/form-data格式的HTTP请求体并将图片数据填充进去。同时还要构造完整的HTTP请求头。下面是一个简化的示例函数展示了如何为LwIP以太网构造请求。如果使用AT指令的Wi-Fi原理类似但需要将构造好的整个请求字符串通过AT命令发送。#include lwip/netdb.h #include lwip/sockets.h #include cJSON.h #define SERVER_IP 192.168.1.100 #define SERVER_PORT 7860 #define BOUNDARY ----WebKitFormBoundary7MA4YWxkTrZu0gW // 边界字符串可以任意定义 void send_http_post_request(const uint8_t* image_data, uint32_t image_size) { struct sockaddr_in server_addr; int sockfd; char *request_buffer NULL; int total_length 0; // 1. 创建TCP Socket if ((sockfd socket(AF_INET, SOCK_STREAM, 0)) 0) { printf(Socket creation error\r\n); return; } server_addr.sin_family AF_INET; server_addr.sin_port htons(SERVER_PORT); inet_pton(AF_INET, SERVER_IP, server_addr.sin_addr); // 2. 连接服务器 if (connect(sockfd, (struct sockaddr *)server_addr, sizeof(server_addr)) 0) { printf(Connection Failed\r\n); close(sockfd); return; } // 3. 计算请求体总长度 (这是一个简化示例实际需要精确计算各部分长度) // 请求体 边界头部分 图片数据 边界尾部分 int boundary_header_len strlen(BOUNDARY) 100; // 估算头部长度 int boundary_tail_len strlen(BOUNDARY) 10; // 估算尾部长度 total_length boundary_header_len image_size boundary_tail_len; // 4. 动态分配内存构造完整的HTTP请求 (实际项目需考虑内存管理) request_buffer (char*)pvPortMalloc(total_length 512); // 额外空间放请求头 if (!request_buffer) return; char *ptr request_buffer; // 5. 构造HTTP请求头 ptr sprintf(ptr, POST /run/predict HTTP/1.1\r\n); ptr sprintf(ptr, Host: %s:%d\r\n, SERVER_IP, SERVER_PORT); ptr sprintf(ptr, Content-Type: multipart/form-data; boundary%s\r\n, BOUNDARY); ptr sprintf(ptr, Content-Length: %d\r\n, total_length); ptr sprintf(ptr, Connection: close\r\n\r\n); // 双换行结束头部 // 6. 构造请求体multipart/form-data格式 ptr sprintf(ptr, --%s\r\n, BOUNDARY); ptr sprintf(ptr, Content-Disposition: form-data; name\data\; filename\face.jpg\\r\n); ptr sprintf(ptr, Content-Type: image/jpeg\r\n\r\n); // 7. 拷贝图片二进制数据 memcpy(ptr, image_data, image_size); ptr image_size; ptr sprintf(ptr, \r\n--%s--\r\n, BOUNDARY); // 结束边界 // 8. 发送整个HTTP请求 int total_sent send(sockfd, request_buffer, ptr - request_buffer, 0); printf(Sent %d bytes to server.\r\n, total_sent); // 9. 接收服务器响应见下一节 // ... // 10. 清理 vPortFree(request_buffer); close(sockfd); }这段代码看起来有点长但逻辑很直接连接服务器 - 按照HTTP协议格式拼装请求 - 发送。最难的部分可能就是计算Content-Length和构造multipart格式多试几次用串口打印出构造的请求字符串看看就能摸清规律。4. 解析JSON响应与结果处理发送请求后MogFace WebUI服务器会处理图片并返回一个JSON格式的结果。我们的STM32需要接收这个响应并从中提取出人脸检测的信息。4.1 接收HTTP响应在上面的send_http_post_request函数中发送请求后我们需要添加接收响应的代码。// ... 接上面的发送代码 ... // 9. 接收HTTP响应 char response_buffer[4096]; // 根据响应大小调整缓冲区 int received_total 0; int len 0; printf(Waiting for response...\r\n); // 循环接收直到连接关闭或缓冲区满 while ((len recv(sockfd, response_buffer received_total, sizeof(response_buffer) - received_total - 1, 0)) 0) { received_total len; if (received_total sizeof(response_buffer) - 1) { break; // 防止缓冲区溢出 } } response_buffer[received_total] \0; // 确保字符串结束 printf(Received %d bytes response.\r\n, received_total); // 可以先简单打印前几百个字符看看 // printf(Response: %s\r\n, response_buffer); // 10. 从HTTP响应中提取JSON主体 // HTTP响应格式状态行 头部 空行 正文(JSON) char *json_start strstr(response_buffer, \r\n\r\n); if (json_start) { json_start 4; // 跳过空行 parse_mogface_response(json_start); // 调用JSON解析函数 } else { printf(Failed to find JSON in response.\r\n); } // ... 清理代码 ...4.2 使用cJSON解析人脸检测结果现在我们来写parse_mogface_response函数。MogFace返回的JSON结构可能类似这样具体格式需查看其API文档{ data: [ { bbox: [100, 150, 200, 300], // 人脸框坐标 [x1, y1, x2, y2] confidence: 0.98, landmarks: [[120, 170], [180, 170], ...] // 关键点坐标 } ], status: success }我们的解析函数如下#include cJSON.h void parse_mogface_response(const char *json_str) { cJSON *root cJSON_Parse(json_str); if (root NULL) { const char *error_ptr cJSON_GetErrorPtr(); if (error_ptr ! NULL) { printf(JSON parse error before: %s\r\n, error_ptr); } return; } // 1. 检查状态 cJSON *status cJSON_GetObjectItemCaseSensitive(root, status); if (cJSON_IsString(status) (strcmp(status-valuestring, success) 0)) { printf(API call successful.\r\n); } else { printf(API call failed or status not success.\r\n); cJSON_Delete(root); return; } // 2. 获取data数组 cJSON *data cJSON_GetObjectItemCaseSensitive(root, data); if (cJSON_IsArray(data)) { int face_count cJSON_GetArraySize(data); printf(Detected %d face(s).\r\n, face_count); // 3. 遍历检测到的每一张人脸 for (int i 0; i face_count; i) { cJSON *face_item cJSON_GetArrayItem(data, i); cJSON *bbox cJSON_GetObjectItemCaseSensitive(face_item, bbox); cJSON *confidence cJSON_GetObjectItemCaseSensitive(face_item, confidence); if (cJSON_IsArray(bbox) cJSON_GetArraySize(bbox) 4) { int x1 cJSON_GetArrayItem(bbox, 0)-valueint; int y1 cJSON_GetArrayItem(bbox, 1)-valueint; int x2 cJSON_GetArrayItem(bbox, 2)-valueint; int y2 cJSON_GetArrayItem(bbox, 3)-valueint; printf(Face %d: BBox [%d, %d, %d, %d], i1, x1, y1, x2, y2); } if (cJSON_IsNumber(confidence)) { printf(, Confidence: %.2f\r\n, confidence-valuedouble); } // 可以继续解析landmarks等其它信息... } } else { printf(No data array found or its not an array.\r\n); } // 4. 释放cJSON对象 cJSON_Delete(root); }解析完成后你就得到了人脸在图片中的位置边界框和置信度。在智能门锁项目中你可以根据这些信息做进一步判断比如只有一张人脸且置信度高于阈值时才触发开锁信号。5. 整合测试与调试技巧代码都写好了最后一步就是把它们整合到main函数里并烧录到板子上测试。5.1 主程序逻辑整合在main.c的/* USER CODE BEGIN 2 */和/* USER CODE END 2 */之间这是HAL库初始化完成后主循环开始前的位置初始化网络并调用我们的函数。/* USER CODE BEGIN 2 */ printf(System Booted.\r\n); // 初始化网络以LwIP为例如果是AT指令Wi-Fi则需初始化串口并发送AT命令连接Wi-Fi MX_LWIP_Init(); // 这个函数由CubeMX生成 // 等待网络连接就绪这里需要根据实际网络状态添加检查逻辑 HAL_Delay(3000); printf(Network ready. Starting face detection test...\r\n); // 调用函数发送测试图片 send_http_post_request(test_jpeg_image, test_jpeg_image_size); /* USER CODE END 2 */5.2 关键调试技巧嵌入式网络调试串口打印是你的“眼睛”。以下是一些实用的调试方法打印关键步骤在连接服务器、发送数据、接收数据的每个关键节点都用printf打印状态信息。打印原始数据在发送HTTP请求前可以先把构造好的请求字符串打印出来复制到电脑上的网络调试工具如Postman里发送对比结果验证请求格式是否正确。分段测试先确保STM32能Ping通服务器。然后单独测试TCP连接是否成功。再测试发送一个简单的HTTP GET请求比如请求一个网页是否能收到响应。最后再测试复杂的POST请求。检查内存动态内存分配pvPortMalloc在嵌入式系统中要谨慎。确保分配成功并在使用后及时释放vPortFree避免内存泄漏。超时与重试网络操作必须添加超时机制。HAL库的socket相关函数可以设置SO_RCVTIMEO和SO_SNDTIMEO。对于不稳定的网络还需要实现重试逻辑。6. 总结与后续优化建议走完这一整套流程你应该已经成功让STM32通过HTTP调用远程的MogFace模型完成了一次人脸检测。这个过程的核心思路其实就是“嵌入式设备作为客户端向强大的云端/边缘服务器请求AI服务”这是一种非常实用且高效的AI落地方式。回顾一下关键步骤就三步在CubeMX里把网络和调试串口配通写代码按照HTTP协议把图片“打包”发送出去再把服务器返回的JSON数据“拆包”提取出我们需要的人脸坐标信息。实际项目中你可能会遇到更多挑战比如图片怎么从摄像头实时获取、网络不稳定怎么处理、如何设计一个简单的通信协议来管理多个请求等等。针对这些可以做一些优化比如使用更高效的图片编码如JPEG压缩、实现一个非阻塞的网络任务在后台运行、加入心跳包机制保持连接、甚至设计一个简单的本地队列来管理待发送的图片帧。这套方法不仅适用于人脸检测任何提供了HTTP API的AI模型比如物体识别、语音识别、OCR等都可以用类似的方式集成到你的STM32项目中。希望这个详细的流程能帮你打开思路把更多有趣的AI功能带到嵌入式设备里。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。