校园智能巴士系统

前端项目地址

基于YOLO深度学习框架的智能无人驾驶校园巴士。

ROBOTICS CONTROL LOOP

感知、决策、底盘与远程监控形成闭环

激光雷达、深度相机与目标识别共同描述校园环境，ROS 将感知结果转换成避障、停车和行驶动作。

13路标类别

300每类采集图片

>80%测试集准确率

01 SENSE 雷达 + 深度相机

02 PERCEIVE YOLOv5n

03 DECIDE ROS 节点

04 ACT 麦克纳姆轮

05 MONITOR Web 控制台

LiDAR

YOLOv5n

Jetson Nano

Flask API

COREROS

DESIGN DECISION

边缘计算与远程界面分离

Jetson Nano 在车端完成识别和控制，Flask 暴露状态与控制接口，React 前端只负责实时监控、站点展示和人工接管。

ROSJetson NanoTensorRTReactFlask

CAPABILITIES

校园任务

01避障行驶

02站牌识别

03定点停车

04远程控制

小车端介绍

车体介绍

校园模拟环境介绍

模型结果

针对目标识别的需求，我们采用Yolov5框架中体量最小的Yolov5 nano模型作为训练模型，以此保证最高的识别效率。为了实现精准识别，我们构建了包含13个类别的数据集用于模型训练，每个类别采集了300张图片数据。由于本项目对模型的泛化能力要求不是特别高，所以在训练模型的过程中，通过在较大的训练集中使用更高的训练周期，尽可能的充分训练，使得我们的模型在测试集上的准确率达到了80%以上。通过路标识别，得知当前所在的车站，并且利用深度相机返回的与路标的距离，校园巴士就可以在距离合适的位置靠边停车，实现乘客的上下车。

前端介绍

本项目是基于YOLO深度学习框架的智能无人驾驶校园巴士的前端部分，主要功能包括：

实时获取校园巴士摄像头信息
实时获取站点信息
实时监控校园巴士的位置
实时监控校园巴士的载客情况
远程手动控制校园巴士

前端效果图

项目特点

开发笔记: React NextJS App Router 实时获取API

校园巴士上使用Flask框架搭建一个API服务器，通过API获取校园巴士的数据并且发送控制信号。

本项目前端主要是在NextJS框架下使用React开发，在实现基本功能的同时，在面对需要实时获取数据的情况，我没有使用其他第三方库来实现API获取，而是根据NextJS官网来实现data-fetching。

最终，经过各种排列组合的尝试之后，我得出了一个合理的解决方案，就是在useEffect中调用getLocationInformation()，并且在获取后端API的代码中加入next: {revalidate: 0}，代码如下：

// 获取后端API的代码
export async function GET(request: NextRequest) {
    const res = await fetch(URL + '/api/information', {
        headers: {
            'Content-Type': 'application/json',
        },
        next: {revalidate: 0} // 0秒后重新获取数据
    })
    const data = await res.json()
    // return Response.json({ data })
    return NextResponse.json({ data })
}

// 调用本地API的代码
useEffect(() => {
        getLocationInformation();
    });

async function getLocationInformation() {
    const res = await fetch('/api/getLocationInformation');
    if (!res.ok) {
        setMessage("Connect fail!");
        return;
    }
    const data = await res.json();
    setLocationInformation(data.data);
    setRootLocationInformation(data.data);
    for (var _ in data.data) {
        if (data.data[_]["is_arrived"]) setIsNextLocation(LocationInformationLinkedList[_ as keyof TypeLocationInformationLinkedList])
    }
    console.log(locationInformation)
}

我个人的理解是，next: {revalidate: 0}是在获取数据的时候，告诉NextJS在0秒后重新获取数据，这样就可以实现实时获取数据了，同时由于useEffect函数的使用，使得后端每次获取新的API，这里就可以实时在页面上更新，也算是一个不错的解决方案吧。