arshitamalhotra19/OceanSentinel
GitHub: arshitamalhotra19/OceanSentinel
一个零后端依赖的海事威胁情报与供应链风险分析前端原型，以国防级可视化指挥中心的形式集成了地图监控、AI 预测、数字孪生和自动报告生成等二十项功能。
Stars: 0 | Forks: 0
# MaritimeShield AI
### AI 驱动的海事威胁情报与供应链风险分析平台
一个具有国防科技/ Bloomberg Terminal 风格的海事威胁情报指挥中心，使用原生 HTML/CSS/JS、Leaflet.js、Chart.js 和 GSAP 构建。
## 包含内容
这是一个完全独立的**前端应用程序** —— 无需构建步骤，也无需 Node 服务器即可运行。需求说明中的所有 20 个功能均已实现，并附带逼真的模拟情报数据（咽喉要道、威胁评分、船只、事件、预测、场景模拟器、多智能体 AI 助手、报告生成器）。
```
maritimeshield/
├── index.html # Main app shell — all views
├── css/
│ └── style.css # Dark "defense intelligence" theme, glassmorphism
├── js/
│ ├── data.js # Core intelligence dataset (chokepoints, ports, vessels, incidents, threats)
│ ├── map.js # Leaflet map module (layers, heatmap, routes, vessel animation)
│ ├── charts.js # Chart.js visualizations (risk trends, forecasts, scenario impact)
│ ├── assistant.js # Multi-agent AI reasoning engine + scenario simulator
│ └── app.js # Main app logic — navigation, panels, interactions
└── README.md
```
## ▶ 在 VS Code 中使用 Live Server 运行
1. **解压**项目并在 VS Code 中打开 `maritimeshield` 文件夹（`File → Open Folder...`）。
2. 从扩展市场（`Ctrl+Shift+X`，搜索 "Live Server"）安装 **"Live Server"** 扩展（由 Ritwick Dey 开发）。
3. 在文件资源管理器中，右键点击 **`index.html`** → **"Open with Live Server"**。
- 或者点击右下角状态栏中的 **"Go Live"**，然后在弹出的浏览器标签页中打开 `index.html`。
4. 应用程序将在 `http://127.0.0.1:5500/index.html`（或类似端口）打开。
无需 `npm install`、无需 API 密钥、无需数据库 —— 一切均在客户端使用模拟情报数据运行，因此每个功能都能立即使用。
## 功能映射 → 实现
| 功能 | 所在位置 |
|---|---|
| 全球互动海事地图 | 指挥中心地图面板 + 完整的“全球地图”视图（`map.js`） |
| 战略咽喉要道监控 | 咽喉要道监控面板 + 地图标记（霍尔木兹海峡、苏伊士运河、曼德海峡、马六甲海峡、巴拿马运河） |
| 威胁情报引擎 | “威胁情报”视图 —— 柱状图/饼图 + 评分区域表 |
| AI 海事分析师 | “AI 分析师”视图 —— 多智能体聊天（`assistant.js`） |
| 航线风险分析器 | “航线分析器”视图 —— 起点/目的地/货物 → 地图上的安全/替代/紧急航线 |
| AI 预测风险模型 | “预测”视图 —— 30/60/90 天预测图表 + 热点列表 |
| 供应链漏洞引擎 | “供应链”视图 —— 国家/航线/货物 → 健康评分 |
| 自动事件检测 | 带有类型过滤的事件监控面板 |
| 海事数字孪生 | “数字孪生”视图 —— 场景模拟器（封锁/海盗/中断） |
| AI 生成的情报报告 | “生成全球海事风险评估”模态报告 |
| 国防级警报系统 | 顶部栏警报指示器（绿色/黄色/橙色/红色）+ toast 通知 |
| 海事热力图 | 两张地图上的风险热力图图层切换 |
| 船只追踪模拟器 | 全地图上的动画船只，点击查看详情面板 |
| AI 洞察卡片 | 指挥中心上的自动生成卡片，可刷新 |
| 高管指挥中心 | KPI 行（活跃威胁、高风险航线等） |
| 多智能体 AI 系统 | AI 分析师视图中可见的 5 个专家智能体 + 协调员 |
| AI 场景模拟器 | “如果苏伊士运河关闭 10 天会怎样？” → 数字孪生 |
| 自然语言地图搜索 | 自动导航/高亮显示地图的聊天查询 |
| 现代 UI | 玻璃拟态、深色主题、JetBrains Mono + Inter 字体、响应式设计 |
| 黑客马拉松惊艳亮点 | 大型 CTA 横幅 → 完整的互动式风险评估报告 |
## 连接真实后端（可选，适用于生产环境）
需求说明指出，生产部署需使用 Node.js/Express、MongoDB 和 OpenAI/Gemini。前端结构已设计好，支持直接进行即插即用式升级：
1. **将 `assistant.js` 中的 `AIAssistant.respond()` 替换**为对 Express 端点的 `fetch('/api/chat', { method: 'POST', body: JSON.stringify({ query }) })` 调用，该端点将请求转发给 OpenAI/Gemini API，并将实时数据集作为上下文。
2. **将 `data.js` 中的静态数组**（`INCIDENTS`、`VESSELS`、`THREAT_REGIONS` 等）**替换**为 `fetch('/api/incidents')`、`/api/vessels` 等，这些请求由 MongoDB 集合支持，并通过计划任务（AIS 数据源摄取、新闻抓取等）进行更新。
3. **电子邮件警报**：添加一个在警报级别更改时触发的 Express 路由（`/api/alerts`），并使用事务性电子邮件服务（如 SendGrid 等）。
4. **PDF 报告**：“生成全球海事风险评估”模态框已经可以渲染完整的 HTML 报告 —— 通过 headless-Chrome/Puppeteer 端点（`/api/report/pdf`）将其转换为真正的 PDF 导出，或者在演示时使用内置的“导出/打印报告” → 浏览器打印为 PDF 功能。
最小化的 Express 骨架：
```
// server.js
const express = require('express');
const app = express();
app.use(express.json());
app.use(express.static('public')); // place frontend files here
app.post('/api/chat', async (req, res) => {
// call OpenAI/Gemini with req.body.query + maritime context
res.json({ agent: 'Coordinator Agent', html: '...' });
});
app.listen(3000, () => console.log('MaritimeShield AI backend on :3000'));
```
## 注意事项
- 地图图块使用 CARTO Dark + Esri World Imagery（代码中可通过 `MaritimeMap.toggleSatellite()` 切换卫星视图）。
- 所有威胁评分、事件和预测均为**说明性的模拟情报数据**，仅供演示之用。
标签：Chart.js, Leaflet, 供应链分析, 前端可视化, 多模态安全, 数据可视化, 海运物流, 自定义脚本, 风险分析