Athena Engine

AI-Driven Frontend Engine — 从自然语言到可运行的 React 代码。

用户意图："暗黑风格数据看板，包含KPI卡片和趋势图"
    ↓
[引擎1: DeepSeek] → TaskJSON（结构化页面描述）
    ↓
[引擎2: DeepSeek] → React TSX 代码
    ↓
[沙箱预览] → 浏览器渲染

快速开始

git clone https://github.com/你的用户名/athena-engine.git
cd athena-engine
pnpm install
cp .env.example .env  # 编辑 .env 填入你的 DeepSeek API Key
pnpm dev

访问 http://localhost:3001/api/health 确认服务启动。

测试引擎1（意图→JSON）

curl -X POST http://localhost:3001/api/engine/intent \
  -H "Content-Type: application/json; charset=utf-8" \
  -d '{"intent":"暗黑风格：2个KPI卡片（总销售额、订单数），1个折线图"}'

测试引擎2（JSON→代码）

# 将引擎1的返回结果传给引擎2
curl -X POST http://localhost:3001/api/engine/generate \
  -H "Content-Type: application/json; charset=utf-8" \
  -d '{"taskJSON": { ... }}'

生成可预览的 HTML

curl -X POST http://localhost:3001/api/engine/preview \
  -H "Content-Type: application/json; charset=utf-8" \
  -d '{"code": "function Dashboard() { ... }"}' \
  > preview.html

架构

apps/
  server/          # Fastify 后端服务
  web/             # Next.js 前端控制台（开发中）
packages/
  shared/          # 共享类型定义 + Zod Schema + 组件库元数据
  component-library/  # React 组件库（KPICard、LineChart 等）
  ui-toolkit/      # UI 工具包
scripts/
  generate-structure.ps1  # Windows 项目初始化脚本
  setup.ps1               # 依赖安装脚本

核心类型定义 (packages/shared/src/types/task-json.ts)

interface TaskJSON {
  taskId: string;
  summary: string;
  originalIntent: string;
  components: ComponentDef[];
  layout: LayoutConfig;
  theme: ThemeConfig;
  dataBinding?: Record<string, DataSource>;
}

支持的组件类型

组件	类型	说明
KPICard	kpi	关键指标卡片
StatCard	kpi	统计卡片（带对比）
LineChart	chart	折线图
BarChart	chart	柱状图
PieChart	chart	饼图
AreaChart	chart	面积图
DataTable	data	数据表格
ProgressBar	decorative	进度条
SummaryCard	layout	摘要卡片

API 文档

POST /api/engine/intent

将自然语言转为结构化 TaskJSON。

Request:

{
  "intent": "暗黑风格数据看板",
  "constraints": {
    "maxComponents": 6,
    "preferredTheme": "dark"
  }
}

Response:

{
  "success": true,
  "taskJSON": {
    "taskId": "550e8400-...",
    "summary": "暗黑风格数据看板",
    "components": [...],
    "layout": {...},
    "theme": {...}
  }
}

POST /api/engine/generate

根据 TaskJSON 生成 React 组件代码。

Request:

{
  "taskJSON": { ... }
}

Response:

{
  "success": true,
  "files": {
    "dashboard": "function Dashboard() { ... }"
  }
}

POST /api/engine/preview

将生成的代码转为可直接在浏览器打开的 HTML。

Request:

{
  "code": "function Dashboard() { ... }"
}

Response: text/html

技术栈

层级	技术
AI 引擎	DeepSeek Pro API
后端框架	Fastify + TypeScript
前端框架	Next.js 14 + React 18
类型校验	Zod
浏览器沙箱	Babel Standalone
包管理	pnpm (monorepo)
构建工具	Turborepo

开发日志

已完成的踩坑

• LLM 输出格式不稳定 — 用 Zod Schema + 反例 Prompt 解决
• PowerShell 中文乱码 — Invoke-RestMethod 默认 ASCII 编码，需手动指定 UTF-8
• Recharts CDN 加载失败 — react-smooth 依赖的 UMD 构建有 bug，改用 SVG mock
• Babel standalone 作用域隔离 — 全局组件需挂载 window 对象
• TypeScript 类型注解残留 — sandbox 内正则清理 : React.FC 等注解
• file:// 协议 CORS — 必须用 HTTP 服务器 serve HTML

待完成

• 引擎3：Puppeteer 截图 + 千问 VL 视觉反馈闭环
• 真实数据绑定（API / mock 数据源）
• 前端控制台（Next.js 可视化界面）
• 组件库扩展至 20+ 组件
• WebSocket 流式输出生成过程

License

MIT