curl 看不出双轨
M5 做前端，是因为 /v1/dual 光靠接口返回讲不清楚。
curl 里当然能看到 A 线和 B 线两个字段，但别人很难直观看出差别：哪个是问诊，哪个是报告，为什么要分开。这个 demo 需要一个页面，把双轨关系摆出来。
所以第一版前端非常小：左边聊天，右边报告，顶部放一点状态。
为什么是 Vite，不是 Next
这里我没有用 Next.js。原因很简单：这个前端不需要 SEO，不需要服务端渲染，也没有复杂路由。它只是一个教学演示壳。
Vite + React 足够快，启动也轻。一个 App.tsx 就能把核心状态串起来。对这个阶段来说，少一点框架心智负担，比预留一堆未来能力更重要。
样式也没有上 Tailwind 或组件库，直接手写 CSS。页面小，组件少，引 UI 库反而会让依赖和样式覆盖变复杂。
左边问，右边看报告
页面结构对应后端的双轨：
- 左侧展示用户输入和 A 线回复；
- 右侧展示 B 线结构化报告和引用来源；
session_id放在 localStorage 里，保证多轮对话能接上。
右侧报告其实很关键。它让用户看到 B 线不是“另一段长回答”，而是一份基于证据整理的结构化结果。引用来源也放在这里，因为它比任何口头解释都更能说明 RAG 在工作。
不做暗色科技风
我一开始也想过做得“AI 医疗感”一点，深色背景、发光卡片、各种状态灯。但最后放弃了。
这个 demo 不是卖视觉，它要讲清楚问诊流程。强风格很容易抢走注意力，还会让医疗演示显得不够克制。
所以第一版前端更像一个教学控制台：能输入，能看到 A 线追问，能看到 B 线报告，能解释接口契约。够用就停。
M5 做完后，这个项目终于可以不靠讲述运行了。打开页面，左边和右边的差异就在那里。对一个 demo 来说，这一步比多加几个模型参数更有价值。