getsuyash21/rapidguard-ai

# 🚨 RapidGuard AI - 紧急危机响应平台 一款专为酒店业打造的 **AI 驱动的紧急协调系统**。采用移动优先、紧急优先的 UX 设计，可在几秒钟内实现危机响应。 ## 🎯 核心功能 ### **阶段 1：紧急行动界面** 超简洁、防恐慌的触发紧急事件界面： - ✅ **巨大恐慌按钮** - 带脉冲动画的红色大型紧急触发器 - ✅ **语音指令系统** - 基于 Web Speech API 的免提紧急激活 - ✅ **紧急类型选择器** - 7 种预定义的紧急类型（火灾、医疗、安保等） - ✅ **短信回退模式** - 在离线状态下通过模拟紧急短信工作 - ✅ **AI 语音助手球** - 带波形动画的悬浮语音助手指示器 - ✅ **网络状态检测** - 实时连接状态指示器 - ✅ **位置检测** - 模拟访客位置跟踪（楼层/房间） - ✅ **语音响应系统** - 基于 SpeechSynthesis API 的 AI 语音引导 ### **阶段 2：高级指挥仪表板** 包含以下功能的完整紧急管理系统： - ✅ **置顶状态栏** - 始终可见的威胁等级、连接状态和活跃团队信息 - ✅ **AI 语音指挥中心** - 实时多部门通信模拟 - ✅ **5 个组织有序的标签页**： 1. 📊 **概览** - 威胁等级、指标、响应状态 2. 🚪 **疏散** - 路线、个性化引导、人群热力图 3. 👥 **协调** - 部门状态、时间轴、通信 4. ⚡ **AI 分析** - Gemini AI 分析、假设（what-if）模拟 5. 📋 **日志** - 事件历史和时间轴 ### **AI 语音引导系统** - 🎙️ 来自 AI、安保、医疗、消防响应团队的实时语音指令 - 📢 基于威胁严重程度的动态语音调节 - 🔊 多语音部门通信模拟 - 🎯 危机期间的持续引导更新 ### **高级功能** - ✅ 个性化疏散路线（老年人、受伤人员、员工、儿童） - ✅ 带有聚集密度预警的实时热力图可视化 - ✅ 多部门响应协调 - ✅ 带有动态更新的时间轴模拟 - ✅ 假设（What-if）模拟系统（火势蔓延、人群恐慌、出口堵塞） - ✅ 带有 SMS 回退的离线紧急模式 - ✅ 响应指标和协调效率评分 ## 🛠️ 技术栈 **前端：** - React 18 + Vite - Framer Motion 动画 - Web Speech API（语音指令与合成） - 毛玻璃 + 霓虹灯紧急美学 **后端：** - Node.js + Express - Google Gemini 1.5 Flash API - 启用 CORS 的 REST endpoint ## 🚀 快速开始 ### 前置条件 - Node.js 16+ - 从 [makersuite.google.com](https://makersuite.google.com/app/apikey) 获取的 Google Gemini API 密钥 ### 安装说明 **1. 克隆并设置后端** ``` cd backend npm install ``` **2. 配置环境** 编辑 `backend/.env`： ``` GEMINI_API_KEY=your_actual_api_key_here ``` **3. 启动后端** ``` npm start # 服务器运行在 http://localhost:5000 ``` **4. 设置前端** ``` cd frontend npm install ``` **5. 启动前端** ``` npm run dev # App 打开于 http://localhost:5173 ``` ## 📱 使用说明 ### 紧急触发流程 1. **阶段 1 - 紧急行动界面** - 选择紧急类型或说出 "Fire"、"Medical" 等 - 点击巨大的红色 EMERGENCY 按钮 - 或在离线模式下点击 "Send Emergency SMS" 2. **阶段 2 - 指挥仪表板** - AI 语音指挥中心显示实时引导 - 浏览标签页以查看疏散、协调、分析 - 使用 "Back to Emergency" 进行重置 ### 语音指令 说出以下指令以触发紧急情况： - "Fire" - "Medical emergency" / "Help" - "Security threat" - "Gas leak" - "Flooding" - "Violence" - "Electrical failure" ## 🎨 UI/UX 亮点 ### 紧急优先设计 - 在恐慌期间保持**最小的认知负荷** - 紧急情况的**一键激活** - 为了无障碍体验设计的**大型、高对比度按钮** - 用于免提操作的**语音优先界面** - 为所有设备优化的**移动端布局** ### 美学设计 - 带有紧急红色光晕的暗黑模式 - 呈现现代外观的毛玻璃效果 - 霓虹指示灯（绿色=安全，红色=危险，黄色=警告） - 用于表示危急状态的脉冲动画 - 增强清晰度的平滑过渡 ## 🔧 API 端点 ### POST `/analyze` ``` Request: { "emergencyType": "Fire" } Response: { "analysis": "AI analysis text from Gemini..." } ``` ## 📋 项目结构 ``` google prototype/ ├── backend/ │ ├── package.json │ ├── server.js # Express server │ └── .env # Gemini API key ├── frontend/ │ ├── package.json │ ├── vite.config.js │ ├── index.html │ ├── .env # Backend URL │ └── src/ │ ├── App.jsx # Main app with 2-stage flow │ ├── index.css # Complete styling │ ├── hooks/ │ │ └── useEmergency.js # Voice & network hooks │ └── components/ │ ├── EmergencyActionScreen.jsx │ ├── CommandDashboard.jsx │ ├── AIVoiceAssistant.jsx │ ├── HeroCommandPanel.jsx │ ├── AIAnalysisPanel.jsx │ ├── DepartmentStatus.jsx │ ├── TimelinePanel.jsx │ ├── AlertFeed.jsx │ ├── MetricsPanel.jsx │ ├── PersonalizedEvacuationAI.jsx │ ├── LiveEvacuationNavigator.jsx │ ├── HeatmapPanel.jsx │ ├── SimulationControls.jsx │ └── IncidentLog.jsx ``` ## 🎓 黑客松提示 ### 致评委 - **从紧急行动界面开始** - 展示紧急优先的 UX 理念 - **不选择紧急类型直接点击恐慌按钮** - 演示灵活的触发机制 - **启用语音指令** - 说出 "Fire" 或 "Help"（需要麦克风权限） - **浏览标签页** - 展示有条理的信息层级 - **查看 AI 语音中心** - 展现实时语音引导模拟 - **测试离线模式** - 在离线状态下点击 SMS 按钮（模拟） - **移动端视图** - 切换设备模拟（Ctrl+Shift+M）以查看响应式设计 ### 演示脚本（2-3 分钟） 1. **紧急场景设置**（15 秒） - "我们在 4 楼发生火灾紧急情况" - 展示紧急行动界面简洁、防恐慌的设计 2. **语音优先响应**（30 秒） - 点击语音按钮并说 "Fire" - 展示 AI 识别并自动填充紧急类型 - 点击紧急按钮进行触发 3. **AI 指挥中心**（45 秒） - 展示带有威胁等级的置顶状态栏 - 指出提供实时引导的 AI 语音指挥中心 - 强调多部门通信（AI、安保、消防响应） 4. **协调仪表板**（45 秒） - 浏览各标签页（疏散、协调、分析） - 展示实时指标和响应状态 - 演示影响实时数据的假设模拟 5. **离线弹性**（15 秒） - 展示 SMS 回退按钮 - 解释离线语音引导的紧急模式 ## 🔐 安全与隐私 - **无数据库** - 所有数据均基于会话 - **无身份验证** - 紧急情况下的无障碍访问优先 - **无个人数据存储** - 隐私设计保护 - **支持离线** - 无需持续的网络连接 ## 🚀 性能 - **快速启动** - Vite 提供即时热重载 - **语音识别延迟** - 约 1-2 秒即可完成指令检测 - **API 响应时间** - 取决于 Gemini（通常为 2-5 秒） - **离线模式** - 通过 SMS 模拟实现即时响应 - **移动端优化** - 在 4G 网络下页面切换耗时不到 1 秒 ## 🎯 下一步计划（超越 MVP） - 使用 Twilio 实现真实的 SMS 集成 - 带有动态路线规划的真实酒店楼层地图 - 人群密度检测（计算机视觉） - 真实的紧急救援人员 API - 多语言语音支持 - 紧急避难所位置映射 - 访客疏散状态跟踪 - 来自安防摄像头的实时视频源 ## 📞 支持 如遇问题： 1. 确保 API 密钥有效 2. 检查网络连接 3. 尝试刷新页面 4. 检查浏览器控制台以排查错误 ## 📄 许可证 MIT - 为黑客松展示而构建 **为酒店业的应急能力而用 ❤️ 构建。**

标签：AI语音引导, MITM代理, UI/UX设计, Web语音API, 事件管理, 人工智能, 人群热力图, 危机管理, 安全合规, 库, 应急响应, 应急指挥平台, 智慧酒店, 智能建筑, 智能路由, 灾害响应, 用户模式Hook绕过, 离线通信, 移动优先, 紧急疏散, 网络代理, 自定义脚本, 语音助手, 语音指令, 酒店管理