EmbodiedCity Suite

一个无人机 · 三种能力 · 一次完整巡防

面向"城市低空具身智能"的纯前端演示站。围绕一架无人机，串联三类任务的真实运行结果：

• 看见 —— 视频 QA：从一段无人机视频里读出方向、地标、动作意图。
• 议定 —— 多智能体 QA：多视角协同观察，评估每路画面的可用性并回答问题。
• 抵达 —— 具身导航：从"想 → 说 → 做"逐步生成动作，遇阻自动重规划。

整个站是静态站，无后端，可离线双击 dist/index.html 直接放映；线上版部署在 GitHub Pages。

---

在线体验

• 🌐 Live Demo: https://rpxaaa.github.io/embodied-suite/

站点截图

首页	视频 QA	多智能体 QA	具身导航	Benchmark

---

页面导览

站点使用 HashRouter，所有路由都以 #/... 形式出现，方便打包后离线打开。

路由	页面	内容
#/	Home	项目简介 + 三幕入口 + 关键指标
#/qa-video	Act 1 · 视频 QA	五阶段 LangGraph（Reasoner → Scout → Verifier → Validator → Answer Verifier）流水线可视化
#/qa-multiagent	Act 2 · 多智能体 QA	多视角 ViewStateCard 评估 + DERV-GR 证据路由 + 答案对比
#/vln	Act 3 · 具身导航	视频 · 轨迹 · 动作日志三联播，支持 System-2 重规划事件跳转
#/benchmark	Benchmark	三个任务的量化指标一览

---

快速开始

环境要求

• Node.js ≥ 18（推荐 20）
• npm ≥ 9

本地开发

git clone https://github.com/rpxaaa/embodied-suite.git
cd embodied-suite
npm install
npm run dev              # 打开 http://localhost:5173

生产构建

npm run build            # 输出到 dist/
npm run preview          # 本地起 http://localhost:4173 预览构建产物

vite.config.ts 里配置了 base: './'，再加上 HashRouter，构建产物 直接双击 dist/index.html 也能正常打开，不依赖任何后端 —— 现场答辩离线放映友好。

部署

推送到 main 分支即触发 .github/workflows/deploy.yml，自动构建并发布到 GitHub Pages。若要 fork 一份自己用，请把仓库 Settings → Pages 的 Source 切到 GitHub Actions。

---

技术栈

层	选型
框架	React 18 · TypeScript 5 · Vite 5
路由	react-router-dom（HashRouter）
样式	TailwindCSS 3
动画	framer-motion
状态	zustand
图表	recharts
3D	@react-three/fiber + drei
图标	lucide-react

---

目录结构

embodied-suite/
├── public/
│   ├── data/            # 演示数据（4 份 JSON）
│   ├── videos/          # QA / 导航所需视频
│   ├── frames/          # 视频抽帧缩略图
│   └── aircop_images/   # 多智能体多视角画面
├── src/
│   ├── main.tsx  App.tsx  router.tsx
│   ├── pages/           # HomePage / Act1Page / Act2Page / Act3Page / BenchmarkPage
│   ├── components/
│   │   ├── layout/      # Navbar / Footer / PageShell
│   │   ├── common/      # 基础卡片、Pill、KpiNumber、HeatmapMatrix、MissionHud ...
│   │   ├── act1/        # 视频 QA 专用组件
│   │   ├── act2/        # 多智能体 QA 专用组件
│   │   └── act3/        # 导航专用组件（视频 / 轨迹 / 动作日志）
│   ├── data/            # schema.ts / loader.ts / matcher.ts
│   ├── store/           # zustand store（playback 等）
│   ├── lib/             # format / colors 工具
│   └── styles/globals.css
├── tools/               # Python 脚本：从赛题原始日志构建演示数据
├── docs/                # 案例清单等文档
└── .github/workflows/deploy.yml

---

License

内部演示 / 学术展示用途。所用数据集版权归各原作者所有。