epatter1/promptshield-live

# 📘 PromptShield 实时 一个具有教师仪表盘、学生聊天界面和基于事件溯源的遥测系统的实时课堂规模 AI 监控平台。 ## **目录** - [概述](#overview) - [截图](#screenshots) - [核心功能](#core-capabilities) - [架构](#architecture) - [教师仪表盘](#teacher-dashboard) - [学生体验](#student-experience) - [数据模型](#data-model) - [技术栈](#tech-stack) - [安装与设置](#installation--setup) - [项目结构](#project-structure) - [路线图](#roadmap) ## 📌 **概述**

首席专家级总结

PromptShield Live 是一个**实时 AI 课堂监控系统**，提供： - 基于 Llama 3 的**学生端聊天界面** - 用于监控 prompt、响应和会话活动的**教师端仪表盘** - 存储在 Turso 中的**事件溯源遥测** - **实时更新**（目前采用轮询，即将支持 SSE/WebSockets） 该项目演示了如何构建一个具有清晰架构和现代工具链的**安全、可观测、且适用于课堂的 LLM 应用**。 ``` flowchart TD A[Phase 1: DB + API Pipeline ✓] --> B[Phase 2: Dashboard Layout ✓] B --> C[Phase 3: Filtering System ✓] C --> D[Phase 4: Archive System ✓] D --> E[Phase 5: Modal Navigation ✓] E --> F[Phase 6: ID Normalization ✓] F --> G[Phase 7: UI/UX Polish 90%] G --> H[Phase 8: Analytics & Insights Panel] H --> I[Phase 9: Session Replay Enhancements] I --> J[Phase 10: Admin Tools & Governance] J --> K[Phase 11: Real-Time Monitoring] K --> L[Phase 12: AI Safety Automation] L --> M[Phase 13: Multi-Teacher / Multi-Class Support] M --> N[Phase 14: Production Hardening & Deployment] ```

## 🖼 **截图**

点击展开

### **教师仪表盘** `/public/screenshots/dashboard.png` ### **学生聊天** `/public/screenshots/student-chat.png` ### **会话浏览器** `/public/screenshots/session-explorer.png`

## ✨ **核心功能**

点击展开

- 带有会话追踪的学生聊天界面 - 教师仪表盘包含： - 事件表格 - 会话浏览器 - 风险指标 - ECharts 可视化 - 过滤器（风险、类别、会话） - 自动刷新 + 手动刷新 - 结构化遥测日志 - 基于 Turso 的事件存储 - 由 Groq 驱动的 Llama 3 推理 - 干净、模块化的 Next.js 架构

## 🏗 **架构**

系统级架构图

``` flowchart TD A[Student UI
Next.js Client] --> B[/api/chat/] B --> C[LLM Execution
Groq Llama 3] C --> D[Telemetry Logger] D --> E[(Turso DB)] E --> F[/api/events/] F --> G[Teacher Dashboard
Next.js Client] ``` ### 架构原则 - 无状态 API 路由 - 事件溯源遥测 - 持久化的会话追踪 - 清晰的关注点分离 - 实时监控（轮询 → 即将支持 SSE）

## 📊 **教师仪表盘**

面向教育工作者的运营智能

该仪表盘提供对以下内容的实时可见性： - 学生 prompt - LLM 响应 - 会话活动 - 延迟指标 - 时间序列图表 - 风险指标 - 针对风险、类别和会话的过滤器 ``` flowchart LR A[(Turso Events Table)] A --> B[/api/events/] B --> C[DashboardClient] C --> D[ECharts + Tables + Filters] ```

## 💬 **学生体验**

安全、有引导的 LLM 交互

``` flowchart TD A["Student Chat UI"] --> B["/api/chat"] B --> C["LLM (Groq Llama 3)"] C --> D["Telemetry Logger"] D --> A ```

## 🗄 **数据模型**

事件溯源遥测模型

### `PromptShieldEvents` | 列名 | 类型 | 描述 | |---------------|----------|-------------| | id | text | 事件 UUID | | timestamp | numeric | 服务器时间戳 | | sessionId | text | 学生会话 | | input | text | 用户 prompt | | response | text | LLM 输出 | | modelName | text | 使用的 LLM 模型 | | latencyMs | integer | 端到端延迟 | | sourceIp | text | 客户端 IP | | userAgent | text | 浏览器 UA |

## 🧰 **技术栈**

点击展开

### **前端** - Next.js 14 (App Router) - React - TailwindCSS - ECharts ### **后端** - Next.js API 路由 - Groq Llama 3 推理 ### **数据库** - Turso (libSQL) ### **可观测性** - 事件溯源遥测 - 基于会话的分析

## ⚙️ **安装与设置**

点击展开

### 1. 克隆仓库 ``` git clone https://github.com/yourname/promptshield-live.git cd promptshield-live ``` ### 2. 安装依赖 ``` npm install ``` ### 3. 创建 `.env.local` ``` GROQ_API_KEY=your_key_here TURSO_DATABASE_URL=your_url_here TURSO_AUTH_TOKEN=your_token_here ``` ### 4. 启动开发服务器 ``` npm run dev ``` ### 5. 打开应用 - 学生 UI → http://localhost:3000/student - 教师仪表盘 → http://localhost:3000/teacher

## 📂 **项目结构**

点击展开

``` promptshield-live/ app/ api/chat/ api/events/ api/session/[id]/ student/ teacher/ dashboard/ lib/ types/ lib/ db/ llm/ public/ screenshots/ package.json tsconfig.json next.config.ts ```

## 🗺 **路线图**

点击展开

## **第一阶段 — 项目基础** 1. 初始化 Next.js 应用 2. 基础 UI 框架 ## **第二阶段 — 事件模型 + 数据库** 3. 定义 EventRow + Session 模型 4. Turso 集成 ## **第三阶段 — 学生聊天流水线** 5. 构建 `/api/chat` ## **第四阶段 — 教师仪表盘 v1** 6. 基础仪表盘 ## **第五阶段 — 遥测与安全（在 v2 中已移除）** 7. 安全流水线（已弃用） ## **第六阶段 — 仪表盘 v2 架构** 8. 新的文件夹结构 9. 新的图表 10. 过滤器 + 会话 ## **第七阶段 — 实时仪表盘行为** 11. 自动刷新 + 手动刷新 12. 移动端布局修复 ## **第八阶段 — 实时流式传输（下一步）** 13. SSE/WebSockets 14. LIVE 指示器 15. 新事件提示框 ## **第九阶段 — 取证会话浏览器** 16. 深入分析模态框 17. 时间轴导航 ## **第十阶段 — 教师工具与治理** 18. 导出工具 19. 备注 + 标记 20. 课堂分析

标签：AI安全, Chat Copilot, 教育平台, 自动化攻击