rudra496/cityguardai

## 概述 CityGuard AI 是一个由 AI 驱动的多步骤代理，它能监控实时城市信号——人群密度、交通流量、监控异常和事件信息源——以检测新兴风险、评估严重性等级，并触发自动化事件响应工作流。 由 **Rudra Sarker** 为 **Google Cloud 快速代理黑客马拉松（Elastic 合作伙伴赛道）** 构建，他是 **SUST**（沙赫贾拉尔科技大学）工业与生产工程系三年级学生，就读于孟加拉国锡尔赫特。 - **Google Cloud Agent Builder** —— 推理、关联与决策 - **Elastic MCP** —— 实时异常检测与信号接入 - **MongoDB MCP** —— 事件日志记录与完整审计追踪 - **GitLab MCP** —— 自动问题创建与响应团队调度 ## 功能特性 - **多源信号接入** —— 人群遥测、交通摄像头、IoT 传感器通过 Elastic MCP 统一接入 - **AI 驱动的威胁检测** —— Agent Builder 使用链式推理实时识别模式 - **自动化严重性分级** —— 每个事件被标记为高/中/低严重性，并附带证据和置信度分数 - **渐进式代理推理** —— 在仪表板中通过动画时间线观看代理逐步思考过程 - **交互式城市地图** —— 可视化区域风险网格，实时严重性着色，高风险区域脉冲动画 - **完整审计追踪** —— 每个决策和操作通过 MongoDB MCP 记录，供事后审查 - **即时响应调度** —— GitLab MCP 自动创建问题、分配响应团队、跟踪 SLA - **3 个逼真场景** —— 世界杯体育场（7.8 万人流）、商场周末（火灾+安防）、市中心高峰时段（信号拥堵） - **零配置静态部署** —— 构建为纯 HTML/CSS/JS，无需服务器即可部署在 GitHub Pages 上 ## 技术栈 | 层级 | 技术 | |-------|-----------| | 前端 | Next.js 14 (App Router), React 18, TypeScript | | 样式 | Tailwind CSS（自定义暗黑主题、动画、发光效果） | | 构建 | 静态 HTML 导出 (`next export`) | | 部署 | 通过 GitHub Actions 部署到 GitHub Pages | | 代理框架 | Google Cloud Agent Builder | | 异常检测 | Elastic MCP | | 事件存储 | MongoDB MCP | | 问题跟踪 | GitLab MCP | ## 架构 ``` ┌──────────────────────────────────────────────────────────┐ │ CityGuard AI Agent │ │ │ │ ┌──────────┐ ┌──────────┐ ┌───────────────────┐ │ │ │ Elastic │───▶│ Agent │───▶│ MongoDB + GitLab │ │ │ │ MCP │ │ Builder │ │ MCP │ │ │ │ │ │ │ │ │ │ │ │ Ingest & │ │ Reason & │ │ Log incidents & │ │ │ │ Detect │ │ Decide │ │ Create issues │ │ │ └──────────┘ └──────────┘ └───────────────────┘ │ │ │ │ Monitor ──────▶ Detect ──────▶ Decide ──────▶ Act │ └──────────────────────────────────────────────────────────┘ ``` ### 代理流水线 1. **监控** —— Elastic MCP 接入实时人群、交通和监控数据流。异常和阈值突破触发代理。 2. **检测** —— Agent Builder 对多源数据进行推理，以发现异常、计算关联性并分类风险严重性。 3. **决策** —— 代理评估上下文，交叉引用历史模式，并使用链式推理确定最优升级路径。 4. **行动** —— MongoDB MCP 记录事件及完整的传感器数据。GitLab MCP 创建问题并分配团队。通过 webhooks 通知响应人员。 ### 演示模式 此演示使用客户端模拟数据，其结构与生产环境流水线输出完全一致。仪表板是完全交互式的——选择一个场景，点击 **运行场景**，即可实时观看代理逐步推理处理事件的过程。 所有数据结构均设计为可直接替换为真实的 Google Cloud Agent Builder 和 Elastic MCP 集成。 ## 快速入门 ### 前置条件 - **Node.js** 18+（推荐 LTS 版本） - **npm**（随 Node 附带） ### 安装说明 ``` git clone https://github.com/rudra496/cityguardai.git cd cityguardai npm install npm run dev ``` 打开 [http://localhost:3000/cityguardai/](http://localhost:3000/cityguardai/) 查看主页。导航到仪表板即可运行场景。 ### 脚本命令 | 命令 | 说明 | |---------|-------------| | `npm run dev` | 启动开发服务器 | | `npm run build` | 生产环境静态构建（输出到 `./out` 目录） | | `npm run start` | 本地预览生产环境构建 | 无需环境变量——所有数据都是自包含的模拟数据。 ## 部署 ### GitHub Pages（自动部署） 项目包含一个 GitHub Actions 工作流，会在每次推送到 `main` 分支时自动部署： 1. 将仓库推送到 `github.com/rudra496/cityguardai` 2. 进入 **Settings → Pages → Source → GitHub Actions** 3. 工作流会自动构建和部署 4. 访问地址：`https://rudra496.github.io/cityguardai/` ### 自定义域名 如果使用自定义域名，请从 `next.config.mjs` 中移除 `basePath`，并在 GitHub Pages 设置中配置该域名。 ### 任何静态托管服务 ``` npm run build # 上传 ./out 目录至任意静态托管服务（Netlify、Cloudflare Pages 等） ``` ## 项目结构 ``` cityguardai/ ├── .github/workflows/ │ └── deploy.yml # GitHub Actions → GitHub Pages ├── app/ │ ├── globals.css # Tailwind + animations + dark theme │ ├── layout.tsx # Root layout + full SEO metadata + JSON-LD │ ├── page.tsx # Landing page (hero, features, architecture, CTA) │ └── dashboard/ │ └── page.tsx # Interactive 3-panel dashboard ├── components/ │ ├── Navbar.tsx # Sticky nav with Elastic Track badge │ ├── StatsBar.tsx # Summary metric cards │ ├── IncidentList.tsx # Animated incident cards with severity │ ├── CityMap.tsx # 3×3 zone risk grid with pulse effects │ └── AgentLog.tsx # Step-by-step reasoning timeline ├── lib/ │ └── scenarios.ts # Type definitions + 3 full mock scenarios ├── public/ │ ├── robots.txt # Search engine crawl rules │ └── sitemap.xml # Sitemap for SEO ├── package.json ├── tsconfig.json ├── next.config.mjs # Static export + GitHub Pages basePath ├── tailwind.config.ts # Custom theme + animations ├── postcss.config.mjs ├── README.md └── LICENSE ``` ## SEO 与性能 - 为社交分享提供完整的 OpenGraph 和 Twitter Card 元标签 - JSON-LD 结构化数据（SoftwareApplication 模式） - 包含 XML 站点地图和 robots.txt 文件 - 静态导出 = 零服务器冷启动 = 即时加载 - Tailwind CSS 已清除未使用样式 = 最小化 CSS 包 ## 关于作者

**Rudra Sarker**

**沙赫贾拉尔科技大学 (SUST)** 工业与生产工程系三年级学生，就读于孟加拉国锡尔赫特。 AI 开发者和黑客马拉松参与者，项目涵盖**辅助技术**（SightlineAI —— 面向盲人的 AI 智能眼镜，MIT Solve 2026 申请者）、**STEM 教育**（ScienceLab 3D —— 40+ 互动实验）、**心理健康**（MindWell）和**手语无障碍**（Team SignTalk —— 获奖智能手套）。 目前正在参加 **Google Gen AI Academy APAC Cohort 2** 和 **Google Cloud 快速代理黑客马拉松**。

**链接：** - 作品集：[rudra496.github.io/site](https://rudra496.github.io/site/) - GitHub：[github.com/rudra496](https://github.com/rudra496) - Google 技能档案：[skills.google](https://www.skills.google/public_profiles/ef0923da-68a6-4eee-97ad-6e2a37650e9d) - SightlineAI：[rudra496.github.io/sightlineai](https://rudra496.github.io/sightlineai/) ## 许可证 MIT —— 详见 [LICENSE](./LICENSE)。

标签：AI代理, Elasticsearch, GitLab, Google Cloud, MongoDB, WSL, 人工智能, 信号处理, 公共安全, 城市安全, 多源数据融合, 威胁分类, 异常检测, 智能城市, 用户模式Hook绕过, 自动化攻击