Full UI Compiler
①多编译器IR对比麻烦（AOCC/ICX/LLVM/BiSheng）
②开发过程中源码映射麻烦（IR与源码，汇编与源码）
③对于初学者：LLVM固有API查询麻烦
下面给出一份可 直接照着落地 的完整方案。它分成两部分：
- “定案”级技术栈——包含前端、后端、任务执行、可视化、数据、DevOps 等关键选型，以及为什么这样选。
- “从 0 到 1”实施路线——按里程碑拆解 6 个阶段，每阶段列出必须完成的事项、推荐时间顺序、交付物与检验点。
1 | 技术栈总览（已经帮你定好）
| 层次 | 组件 / 技术 | 作用 | 关键理由 |
|---|
| 前端 SPA | **Next.js (React + TS)**Bundler: Vite (配好 SWC) | 单页应用＆路由、SSR/SSG 选项 | React 生态、Monaco 编辑器与 Next 兼容好；Vite 热更新快 |
| UI 组件 | shadcn/ui + Tailwind CSS | 快速搭建现代开发者工具界面 | 无侵入、深色模式、可完全自定义 |
| 代码编辑 / diff | Monaco Editor + @codemirror/diff | 源码 / IR / 汇编 高亮、行号映射、增删 diff | VS Code 同款体验；API 丰富、易写装饰器 |
| 图形可视化 | React Flow + D3.js | CFG、数据流、优化管线图 | React Flow 交互友好；D3 布局算法强 |
| API Gateway | FastAPI (Python 3.12) | 统一 REST / WebSocket 入口 | 类型提示强；异步 I/O 占用低；与 Celery 配合好 |
| 编译任务服务 | 独立 Worker：Docker + Python (llvmlite) | 拉起相应编译器容器并执行 clang/aooc/… | 隔离不同编译器环境；Worker 可横向扩 |
| 调度 & 队列 | Celery + Redis | 分布式任务、结果缓存 | Celery 原生支持 FastAPI；Redis 当缓存、消息中转 |
| 持久化 | PostgreSQL 16 | 用户、项目、配置、元数据 | JSONB 存优化记录；SQL 事务强 |
| 产物存储 | MinIO (S3 协议) | 存放编译产物 (IR、汇编、优化记录) | 无锁式对象存储；同 AWS S3 API |
| 容器 & Orchestration | Docker → Kubernetes (k3s 或 EKS) | 环境一致性；弹性伸缩 Worker | 早期单机 Docker，后期平滑迁移 K8s |
| CI/CD | GitHub Actions → Argo CD | Lint / Test / Build / Push 镜像；自动部署 | 从 GitHub PR→Preview；Argo 做声明式发布 |
| 监控 & 日志 | Prometheus + Grafana + Loki | CPU/GPU 指标、编译时长、异常追踪 | 可对比各编译器 Worker 平均耗时 |
| AI 服务（可选） | OpenAI API / Ollama | IR 自动注释、优化建议 | 独立微服务调用，随时下线不影响主链路 |
2 | 从 0 到 1 的实施路线
节奏建议：阶段 0–2「能跑通」≈ 2–3 周；阶段 3–4「核心亮点」≈ 3–5 周；阶段 5–6 「增值功能」按需求拉长。每阶段都交付可演示的最小可运行版本 (MRV)。
阶段 0 — 环境基线 & 仓库骨架
| 顺序 | 事项 (交付物) |
|---|
| 0-1 | 建 GitHub monorepo：/frontend、/backend、/worker 三个子目录 |
| 0-2 | 写 DevContainer (.devcontainer.json) + docker-compose.yaml：含 Postgres、Redis、MinIO 基础服务，方便任何人 clone 后 devcontainer up 就能跑 |
| 0-3 | 配置 pre-commit 钩子：ESLint+Prettier、Black、isort、ruff |
| 0-4 | 配 GitHub Actions：• push/PR → lint & unit test• 合并到 main → 构建并推 Docker 镜像 tag sha-xxx |
阶段 1 — 最小前端 + 网关 API
| 顺序 | 事项 | 技巧 & 检验点 |
|---|
| 1-1 | npx create-next-app → TypeScript；删模板，只保留 /playground 页面 | 访问 /playground 看到「Hello, IR」 |
| 1-2 | 装 Tailwind + shadcn/ui；做头部、侧边栏响应式布局 | 移动端无必要管 |
| 1-3 | FastAPI skeleton：路由 /healthz, /compile (POST) | uvicorn main:app --reload 返回 JSON {"status": "ok"} |
| 1-4 | 前端 fetch /compile (mock 回 fixed 字符串) 显示在 Monaco | 完成 FE ↔ BE 基本链路 |
阶段 2 — 编译 Worker 跑通（单编译器 × 单架构）
| 顺序 | 事项 | 关键实现 |
|---|
| 2-1 | 选 Clang 17 做第一目标；做 Dockerfile.clang | 镜像内预装 clang/llvm-ar/llvm-objdump |
| 2-2 | Worker 进程 (Celery) 监听队列 compile：接收源码 + 参数→ clang -S -emit-llvm / -S 生成 IR/asm输出结果上传 MinIO | 返回对象 {"ir": "s3://...", "asm": "s3://..."} |
| 2-3 | FastAPI /compile → delay() Celery 任务 → 轮询任务状态 | 若想实时日志可开 WebSocket |
| 2-4 | 前端加载 MinIO presigned URL，把 IR / asm 貌似「只读」文件丢进两个 MonacoPane | 支持 Ctrl + 鼠标 hover 显示行号 |
阶段 3 — 高亮映射 & 优化管线快照
| 顺序 | 事项 | 技巧 & 检验点 |
|---|
| 3-1 | 开启 -g -fdebug-info-for-profiling 生成 DWARF 行号 → 解析 .loc 元数据 | Worker 把 (src ↔ IR ↔ asm) 行映射 JSON 返回 |
| 3-2 | 前端给 Monaco 注册 Inline Decorations：• 鼠标指向源码行 → 高亮 IR & asm• 双击 IR → 反跳源码 | 体验：点源码行 IR/asm 跟着闪 |
| 3-3 | Worker 在 -O2 编译时加 -fsave-optimization-record; 用官方 opt-viewer 脚本→ YAML；写解析器抽关键 pass 顺序 | 构造 [{pass:"inline", before:"ir-id", after:"ir-id"}] |
| 3-4 | React Flow 画优化管线：节点=Pass，节点点击展示 diff (简易行增删) | 最少展示 “before→after” 两版本 IR 差异 |
阶段 4 — 多编译器 / 多架构 Diff
| 顺序 | 事项 |
|---|
| 4-1 | 再打 3 个镜像：AOCC、ICX、毕昇 (BiSheng LLVM)；镜像 tag 用实际版本号 |
| 4-2 | /compile 参数支持compilers=[clang-17,aocc-4.1]、targets=[x86_64,arm64]；Worker 根据 param 拉对应容器 |
| 4-3 | 结果结构升级：{ compiler:"clang-17", target:"x86", irUrl:"...", asmUrl:"..." }[] |
| 4-4 | 前端新增 对比视图：水平卡片；调用 @codemirror/diff 生成并列 diff；着色“优化差异” |
阶段 5 — CFG / 数据流图 & 搜索 / 过滤
| 顺序 | 事项 |
|---|
| 5-1 | Worker 使用 llvm-opt + opt -dot-cfg 输出 .dot；Graphviz (‐T json) 转 JSON |
| 5-2 | React Flow 渲染 CFG；点击基本块 → 弹窗显示块内 IR |
| 5-3 | IR 视图支持 fuzzy search/filter，只显示匹配指令；性能考量用虚拟滚动 |
| 5-4 | 加入 Postgres 索引，缓存常用查询场景 (源文件 + 编译器 + O-level) |
阶段 6 — AI 协同 & 插件化
| 顺序 | 事项 |
|---|
| 6-1 | 独立 ai-service (FastAPI)；路由 /explain：传 IR 片段→ 调 OpenAI/GPT-4o |
| 6-2 | 插件系统：声明式注册菜单，用户可 enable “Souper 超优化” 或“llvm-mca 分析” |
| 6-3 | DevOps：K8s HPA 按 Celery 队列长度自动扩 Worker；Grafana Dashboard 展示“编译平均耗时”“AI 调用成功率” |
快速检查清单
- 最小可运行：能把 C 源码 → IR 文本 + 汇编 → Web 高亮。
- 可视化里程碑：IR ↔ 源行映射；优化 pass diff；CFG 图可点击。
- 横向扩充：新增编译器 = 把镜像挂到
compile-worker 目录 + 注册 JSON。 - AI 不绑死：调用失败时不影响主要功能，开关独立。
- 性能底线：同一份源码第二次请求 < 300 ms（来自 Redis / MinIO 缓存），首次 < 3 s（小文件 O2 编译）。
照此路线推进，你随时可以截断在阶段 3～4 就交付一版 MVP，也能继续迭代到 AI 辅助和插件生态。祝开发顺利！
