这三件事儿 怎么做
用最简方式说明这三件事分别怎么实现，方便你拆开做或让我直接帮你改。
1）基础日志：请求耗时、token、错误码
要记什么
- 每次调用 chat 的时间、耗时、请求体大小、响应 token 数（可从 SSE 里数）、错误码或错误信息
放在哪
- 后端：在
/api/chat/stream的入口记开始时间，在流结束后计算耗时，并统计 token - 可以用一个内存数组
logEntries = []暂存，或者直接写文件（例如logs/chat.json）
实现要点
- 开始：
const start = Date.now() - 结束：
const elapsed = Date.now() - start - token：在解析 SSE 时对
event.type === "token"做计数 - 错误：在 catch 或
event.type === "error"时记录错误信息 - 每条日志：
{ time, elapsed, tokens, error?, model }
2）历史会话：切换、删除
要存什么
- 每个会话：
{ id, title, messages, createdAt } - 当前选中的会话 id
放在哪
-
前端用
localStorage即可，例如：sessions：会话列表currentSessionId：当前会话
实现要点
- 新建会话：生成 id，push 到列表，并设为当前
- 切换会话：把
currentSessionId改成选中会话，消息从该会话的messages渲染 - 删除会话：从列表移除，若删的是当前会话则切换到第一个
- 会话 title：可用第一条用户消息截断，或“新会话”+ 时间
3）成本面板：按会话统计 token / 费用
要算什么
- 每个会话的
inputTokens、outputTokens、totalTokens - 费用（按模型单价估算，例如 gpt-4o-mini 的 input/output 价格）
数据从哪来
- 后端：在 chat 流式结束后把本次的 token 数返回给前端（可在
done事件里带上） - 或：后端每次调用模型后记录 token，再通过接口按会话汇总
实现要点
-
前端：每个会话多存
usage: { inputTokens, outputTokens } -
单价可以写死一个配置，例如：
gpt-4o-mini: input 0.15/1M, output 0.6/1M
-
费用 =
(inputTokens * inputPrice + outputTokens * outputPrice) / 1e6 -
成本面板：展示当前会话的 token 和费用，可选展示所有会话总计
建议实现顺序
- 基础日志：只改后端，不动前端结构，最容易落地
- 历史会话：只改前端，用
localStorage，结构清晰 - 成本面板：依赖 token 数据，需要先有日志/usage，再在前端加展示
你更想自己按这个思路做，还是希望我直接按你当前项目结构写具体代码？可以说一下你更倾向哪种
你就站在我是想要转行ai前端开发的角度 我怎么学 回头跟面试管有的聊, 或者 你结合之前的经验 面试官最想了解我那些的 能力给我建议
从你“转行 AI 前端”的角度，结合常见面试偏好，给你一套可照着练、可对着说的思路。
1. 面试官更在意什么
AI 前端 / AI 应用开发岗位，往往看重这 4 类能力，而不是“会不会调 API”：
| 能力 | 含义 | 面试官常问的 |
|---|---|---|
| 产品思维 | 能把 AI 能力变成“可用的产品功能” | 你做了什么功能？解决了什么业务问题？ |
| 工程化 | 稳定、可观测、可迭代 | 怎么处理错误？有没有日志？成本怎么控制？ |
| 技术深度 | 理解原理，而不是只会调接口 | RAG 怎么实现的？为什么用流式？ |
| 业务闭环 | 有反馈、有迭代 | 怎么评估效果？用户反馈怎么用？ |
2. 和你现在项目对应起来
你现在的 AI Copilot 已经能支撑上面几块，只是需要你能“讲清楚”：
| 你的项目 | 面试时怎么讲 | 加分点 |
|---|---|---|
| 流式输出 | 用 SSE 边收边展示，而不是等整段返回 | 体验优化、首字延迟 |
| RAG | 上传文档 → 切分 → 检索 → 拼进 prompt | 减少幻觉、控制回答来源 |
| Prompt 模板 | 不同场景用不同 system prompt | 把“调参”变成“可配置产品” |
| 模型切换 | 用户可选不同模型 | 成本/效果权衡、路由思路 |
这些都可以作为“我做过”的证明，但关键是你能讲出“为什么这么做”和“遇到过什么问题”。
3. 怎么学，才更利于面试
（1）优先把“讲得清”的能力补齐
- 日志 / 观测：有请求耗时、token、错误码，能说“我做了可观测”
- 成本统计：能说出“我考虑过成本，做了统计”
- 历史会话：能体现“完整产品流程”
这三件事，比你再去学新框架，对面试更有用。
（2）能回答的 3 个问题
面试里几乎必会问到：
- “你这个 RAG 怎么实现的？”
能说：文本切分、检索方式（关键词/向量）、如何拼进 prompt、为什么这样设计。 - “流式输出是怎么做的？”
能说：SSE / fetch stream、前端怎么解析、为什么用流式（体验、首字延迟）。 - “怎么控制成本 / 幻觉？”
能说：模型选择、token 统计、RAG 减少幻觉、prompt 约束回答范围。
你现在项目里都有基础，差的是自己能用一两分钟说清楚。
（3）学习顺序建议
- 先把现有项目做到“能讲 15 分钟”：
功能 → 技术方案 → 遇到的问题 → 怎么解决的 - 再按你之前的 P0/P1 规划，把“基础日志 + 历史会话 + 成本面板”做完，每做一块就练一遍怎么讲
- 有余力再扩展：embedding RAG、Tool Calling、多智能体等
4. 面试官最想听的几类话
- “我解决了什么问题”
例：用户等整段回答太久，所以做了流式；回答容易乱说，所以做了 RAG。 - “我做了哪些工程化”
例：加了日志、错误处理、token 统计，便于排查和控成本。 - “我考虑了成本和效果”
例：不同模型切换、用便宜模型做草稿、强模型做定稿。 - “我有反馈和迭代思路”
例：用户反馈、低分样本回放、持续优化 prompt。
避免只说：
“我调了 OpenAI 的接口”“我用了 Vue”。
5. 建议你花时间做的事
- 把“基础日志 + 历史会话 + 成本面板”做完，让项目更完整。
- 准备一段 3 分钟的项目介绍：
背景 → 功能 → 技术亮点 → 踩坑与解决。 - 重点练习回答上面 3 个问题（RAG、流式、成本/幻觉）。
- 有 1～2 个“真实场景”用例：
例如：用你这个工具帮运营写文案、做客服回复、做知识库问答，而不是抽象 demo。
6. 一句话总结
面试官要的不是“会调 AI 接口”，而是：
你能把 AI 能力做成稳定、可观测、能讲清的产品，并且清楚原理和取舍。
按上面思路，把你现在的项目讲顺、讲深，比再追一堆新技术更有用。
