Java 工程师 LLM 工程化

Appearance

L02-22 项目实战（三）：用户看到的部分，才是决定成败的部分 ​

全局中心内容：同样的后端，交互设计不同，用户信任度差距巨大——流式、引用、反馈三件套。 全局讲解主线：体验对比 → 流式输出 → 引用交互 → 反馈入口 → 错误处理 → 交付验收。

P1 · 产出页 ​

中心内容：一个带流式输出、来源展示、反馈入口的问答界面。

  • 讲解技巧
    • 开场对比两个界面：一个只有纯文本，一个有流式+引用+反馈。让学员选。
    • 结论：技术一样，体验天差地别。
  • 时长：30s

P2 · 流式输出 ​

中心内容：不等全部生成完再返回，边生成边显示。

  • 页面内容：SSE 时序与前端渲染要点

  • 讲解技巧

    • 讲清为什么必须流式：8 秒的空白等待会被认为「卡死了」，1 秒出字 + 7 秒滚动会被认为「很快」。
    • 提醒前端：按 chunk 追加渲染，别每次重设 innerHTML，会闪烁且耗性能。

  • 时长：6min

P3 · 引用交互 ​

中心内容：角标可点击、可悬浮，能看到原文片段和出处。

  • 页面内容：引用面板设计（标题路径 / 原文 / 更新时间）

  • 讲解技巧

    • 强调引用要能点开看原文：只显示文件名不足以建立信任。
    • 提醒：无引用的句子要视觉上区分（比如灰色），让用户知道这部分是模型的推断。

  • 时长：6min

P4 · 反馈入口 ​

中心内容：点赞/点踩要能带原因，且点踩后要给替代路径。

  • 讲解技巧
    • 产品视角建议：点踩后立刻提供「转人工」或「提交工单」，否则用户只会离开。
    • 提醒反馈要带上下文（问题、答案、引用）一起存，否则事后无法复盘。
  • 时长：5min

P5 · 错误与超时 ​

中心内容：失败也要有体面的表达。

  • 页面内容：加载中 / 生成中断 / 服务不可用 / 已拒答 四种状态的展示

  • 讲解技巧

    • 重点讲「生成中断」：流式输出到一半断开，已生成的部分要保留并提示，不要整个清空。
    • 提醒前端要处理 EventSource 的 onerror，并做重连上限。

  • 时长：6min

P6 · 多轮与上下文 ​

中心内容：会话要能接续，且要显示「上下文用了哪几轮」。

  • 讲解技巧
    • 讲取舍：上下文越长越贵，要给一个「新开对话」的明确入口。
  • 时长：4min

P7 · 编码：前后端联调 ​

中心内容：SSE 接口 + 结构化引用字段，前端按 chunk 渲染。

  • 页面内容：接口返回结构；前端关键片段

  • 讲解技巧

    • 强调引用单独走一个事件（比如 event: citations），不要塞进正文流里解析。

  • 时长：6min

P8 · 交付验收清单 ​

中心内容：八条验收项，覆盖功能、体验、稳定性。

  • 页面内容：流式/引用/反馈/拒答/超时/多轮/降级模式/移动端

  • 讲解技巧

    • 把这份清单当交付物讲，它也是本章的收尾。

  • 时长：4min

P9 · 章节总结 ​

中心内容：RAG 的胜负手在离线段，尤其是切分和元数据。

  • 讲解技巧
    • 用一句话总结全篇：「RAG 不是把文档塞进去，是把文档整理好」。
    • 引出下一篇：需要模型自己决定调用什么工具时怎么办——03 篇 Agent 编排。
  • 时长：3min

讲师备忘 ​

项内容
课前必做准备两个界面的对比图；准备好可运行的 SSE 接口
最容易超时处P2 流式实现，前端细节容易展开
学员最常问「要不要用 WebSocket？」答：单向推送用 SSE 更简单，双向才上 WebSocket
现场备用前端跑不起来 → 用 curl 演示 SSE 原始输出