---

## 概述 **GadiInfo** 是一款全栈企业级车辆情报收集应用，采用高对比度的赛博朋克美学和现代玻璃拟态（glassmorphism）UI 设计。它允许已认证的用户输入车辆注册号（例如 `AS01AB1234` 或 `MH01AB1234`），并立即接收全面、结构化的车辆记录——包括注册日期、有效性、位置、燃料类型和保险详情。 除了原始记录外，GadiInfo 还将 **Google Gemini 3.5 Flash** 直接集成到其 Express 服务器架构中，以执行 **神经网络车主姓名预测**，利用统计人口统计学模型、区域语音频率和长度限制，重构被掩码的注册姓名（`A**********A` -> `Ankur Barua`）。 ## 视觉界面与亮点 以下实时截图展示了 GadiInfo 的高对比度扫描仪仪表板、神经姓名预测引擎和实时 AI 连接界面。 ## 核心功能与 UI 设计 ### 1. 霓虹赛博朋克与玻璃拟态美学 - **视觉识别**：采用精心设计的深色主题（`#08060d`）、复古网格背景图案和充满活力的霓虹紫/粉色渐变（`#863bff`，`#7e14ff`）。 - **玻璃拟态组件**：高耐用性半透明卡片，具有细微的边框、平滑的过渡效果，并能对用户交互做出动态响应的微动画。 ### 2. 车辆扫描仪界面 (`GridScan.tsx`) - **高对比度输入**：居中、无干扰的搜索输入框，允许快速输入注册号并进行即时验证。 - **结构化情报展示**：自动将检索到的数据整理为清晰的视觉区块： - **地址与区域管辖权** (`NH Byepass, Betkuchi, Guwahati, Assam 781035`) - **注册城市与 RTO 代码** (`Guwahati - Kamrup`) - **有效期与注册到期日期** (`24-Oct-2021`) - **燃料规格** (`PETROL` / `DIESEL` / `EV`) - **保险单信息** (`IFFCO Tokio General Insurance Co. Ltd.`, Expiry: `20-Feb-2026`) ### 3. AI 驱动的神经脱敏解除 (`AIModal.tsx`) - **车主姓名重构**：当注册数据返回掩码车主姓名（`A**********A`）时，用户可以启动神经脱敏解除。 - **统计概率候选**：Gemini 引擎分析区域 RTO 人口统计数据、字符长度和可见的首字母缩写，以预测确切姓名以及最佳备选候选人（`Anish Baruah`，`Arindam Deka`，`Abhijit Nath`）。 ### 4. 响应式移动优先架构 - **统一导航 (`AuthHeader.tsx`)**：无缝适应桌面宽屏显示器和紧凑的移动视口，同时显示实时个人资料数据（Google 账户显示名称和头像）。 - **自定义高分辨率品牌标识**：具有定制的多层 SVG logo（具有原生平滑圆角的 `favicon.svg`），可在浏览器标签页和应用程序标头中清晰显示，而无需依赖通用的占位符。 ## 技术架构 ``` graph TD subgraph Client [React 19 + TypeScript + Vite Frontend] UI[GridScan & Glassmorphic UI] AuthUI[AuthHeader Profile] Modal[AIModal Neural Unmasking] end subgraph ExpressServer [Express + Node.js Backend Server] Proxy[/api-lookup API Proxy/] Predict[/api/predict-owner Endpoint/] Static[Express Static Build Serving] end subgraph ExternalServices [External & Cloud Infrastructure] Gemini[Google Gemini 3.5 Flash API] Firebase[Firebase Auth & Firestore DB] Upstream[Upstream Registration API] end UI -->|1. Scan Request RC Token| Proxy AuthUI <-->|2. Google OAuth ID Tokens| Firebase Modal -->|3. POST Masked Name & Metadata| Predict Proxy -->|4. Verify Token & Fetch Data| Upstream Proxy -->|5. Log Daily Scan Stats| Firebase Predict -->|6. Structured Schema Query| Gemini ``` ### 全栈 Node.js + Express 后端 (`server.ts`) 为了实施严格的零信任安全并防止敏感 API 密钥泄露给客户端浏览器，GadiInfo 作为一个内聚的全栈应用程序运行，而不是独立的客户端 SPA： - **API 代理**：所有上游查找请求（`/api-lookup`）和 AI 预测调用（`/api/predict-owner`）都直接通过本地 Express 服务器传递。 - **令牌强制执行 (`enforceLimits`)**：在查询外部服务之前，使用 **Firebase Admin Auth**（`verifyIdToken`）验证传入请求或通过自定义 API 标头进行身份验证。 - **单文件生产包 (`dist/server.cjs`)**：我们统一的构建流水线（`npm run build`）构建 Vite 前端，并通过 `esbuild` 将 Node.js Express 后端打包成一个高度优化的 CommonJS 产物，用于快速冷启动部署。 ### AI 集成 (`Gemini 3.5 Flash`) - **服务器端智能引擎**：与 Google 最新的 `gemini-3.5-flash` 模型进行安全通信。 - **结构化 JSON schema**：实施严格的响应 schema（`responseMimeType: "application/json"`），以确保包含 `predictedName`、`possibleNames` 和 `reasoning` 的干净、确定性的 JSON 对象。 - **密钥隔离**：`GEMINI_API_KEY` 严格存在于服务器环境密钥中，绝不接触客户端包或公共代码库。 ### 数据库与身份验证 (`Firebase`) - **身份验证**：由 Firebase Auth 提供支持，支持 Google OAuth 工作流和安全会话跟踪。 - **Firestore 数据库**：将用户扫描历史和使用指标存储在 `/users/{userId}/daily_stats/{date}` 下。 - **自定义安全规则 (`firestore.rules`)**：严格的文档匹配规则确保用户只能读写自己的情报收集记录。 ## 项目结构 ``` gadiinfo-web/ ├── public/ │ ├── favicon.svg # Bespoke multi-layered SVG logo with rounded corners │ ├── icons.svg # Clean SVG icon sprite sheet │ ├── search-up.png # Dashboard scanner & structured details screenshot │ ├── unmasked name.png # Neural unmasking prediction modal screenshot │ └── unmasking.png # AI connection link loading spinner screenshot ├── src/ │ ├── components/ │ │ ├── GridScan.tsx # Primary vehicle scanner interface & data presentation │ │ ├── AIModal.tsx # Neural unmasking modal & probability candidates │ │ ├── AuthHeader.tsx # Responsive header featuring user profile & sign-in │ │ └── ui/ # Reusable UI primitives & glassmorphic containers │ ├── assets/ # Hero illustrations and static assets │ ├── App.tsx # Application root & state management │ ├── index.css # Tailwind CSS configuration & custom theme tokens │ └── main.tsx # Frontend entry point ├── server.ts # Full-stack Express server, API proxy, and Gemini engine ├── firestore.rules # Firebase Firestore security policies ├── package.json # Unified build scripts (`vite` + `esbuild`) └── tsconfig.json # TypeScript compiler configuration ``` ## 快速开始 ### 前置条件 - **Node.js**：`18.x` 或更高版本 - **npm** 或 **bun**：包管理器 - **Firebase 项目**：配置 Authentication 和 Firestore - **Google Gemini API 密钥**：来自 [Google AI Studio](https://aistudio.google.com/) ### 安装与本地开发 1. **克隆仓库** git clone https://github.com/lotus-outlook-6/gadiinfo-web.git cd gadiinfo-web 2. **安装依赖** npm install 3. **配置环境变量** 复制示例环境文件并填充您的凭据： cp .env.example .env 在 `.env` 中添加您的 Gemini API 密钥： GEMINI_API_KEY=your_gemini_api_key_here 4. **启动开发服务器** 在端口 `3000` 上运行带有 Vite 中间件的全栈服务器： npm run dev 打开浏览器并导航至：`http://localhost:3000` ## 生产构建与部署 ### 本地构建 要验证生产就绪情况或生成自包含的包： ``` npm run build ``` 此命令执行： 1. `vite build`：将所有 React 组件和 CSS 编译并优化到 `dist/` 中。 2. `esbuild server.ts`：将 Express 服务器、依赖项和 Gemini 客户端打包到 `dist/server.cjs` 中。 要在本地运行编译后的生产构建： ``` npm run start ``` ### 云部署 (`Render`) GadiInfo 已预配置并托管在 **Render** 上（`https://gadiinfo-web.onrender.com`）： - **构建命令**：`npm run build` - **启动命令**：`npm run start` - **环境变量**：在 Render 仪表板的 **Environment Secrets** 下设置 `GEMINI_API_KEY` 和您的 Firebase 配置。 - **统一端口架构**：Render 自动在端口 `3000`（或平台定义的 `PORT`）上公开 Express 服务器，同时提供 API 端点（`/api/*`）和编译的静态前端（`dist/index.html`）。 ## 安全最佳实践 - **零客户端密钥**：所有第三方 API 密钥（包括 `GEMINI_API_KEY` 和上游查找授权标头）都严格保留在后端 Node.js 进程中。 - **令牌验证**：上游请求在处理昂贵的 API 查找之前，会验证 Firebase Admin JWT 签名。 - **Firestore 规则隔离**：用户无法查询或篡改其指定用户 ID（`request.auth.uid == userId`）之外的扫描指标或历史记录。

标签：MITM代理, 自动化攻击