- 博客(33)
- 收藏
- 关注
RSS订阅原创 Chatbot 如何判断一个 Prompt 好不好？—— 告别凭感觉，Prompt Evaluation 提示词评估与优化学习总结
本文系统阐述了Prompt Evaluation在AI对话系统中的核心作用，提出通过固定测试集、多维度评估指标（如准确率、相关性、完整性等）及A/B测试、回归测试实现Prompt优化的可量化闭环。强调从“主观感觉”转向“数据驱动”，构建可迭代的Prompt工程体系，完成从模板设计到版本管理再到评估优化的完整工程化流程，为构建高效、稳定的AI应用奠定基础。
2026-11-13 21:11:39
275
原创 Chatbot 如何管理 Prompt？—— Prompt Version Management（提示词版本管理）学习总结
本文系统阐述了提示词（Prompt）版本管理的必要性与实践方法。随着AI应用迭代，复杂Prompt需像代码一样进行版本控制，以实现修改追踪、回滚、对比与团队协作。通过引入元数据（Metadata）和提示词仓库（Prompt Registry），可规范化管理不同场景下的Prompt，支持版本演进、A/B测试与发布流程。在KK Chat项目中，该机制为构建可维护、可优化的AI应用奠定了工程基础。
2026-11-12 20:33:54
560
原创 Chatbot 如何完成复杂任务？—— Prompt Chaining（提示词链）学习总结
本文总结了 Prompt Chaining 在复杂任务中的应用：将大任务拆分为多个小步骤，每个步骤由独立 Prompt 执行，前一结果作为后一输入。相比单一长 Prompt，Prompt Chaining 提升了可维护性、可扩展性与复用性，是 AI 工程化的重要实践。结合 KK Chat 项目，其流程涵盖意图识别、记忆注入、安全检测到任务执行，体现了 Prompt 工作流的设计思想。同时区分了 Prompt Chaining 与 Prompt Template、Agent 的本质差异，强调其作为“任务编排”
2026-11-11 13:39:08
603
原创 从零开发 AI Chatbot：JSON.parse()——JavaScript 如何解析 JSON 数据？
本文详解 JSON.parse() 在 KK Chat 项目中的核心作用：将 API 返回的 JSON 字符串（如 Streaming 数据）解析为 JavaScript 对象，实现对 delta.content 等字段的访问。结合 ReadableStream 与 SSE 解析，展示如何安全处理流式数据，并通过 try...catch 防御非法 JSON 异常，确保前后端数据交互稳定可靠。
2026-11-10 15:26:06
337
原创 梳理篇 Chatbot 是如何一步步显示 AI 回复的？—— Streaming Pipeline 完整工作流程解析
本文梳理了AI聊天机器人从用户提问到回复实时显示的完整Streaming Pipeline流程：用户输入经Fetch API发送至FastAPI后端，调用大模型生成流式响应，通过SSE推送至浏览器，经ReadableStream、TextDecoder、Buffer与SSE解析器逐层处理，最终通过delta.content拼接文本并渲染为Markdown，实现边生成边显示。各模块分工明确，形成高效、可维护的数据流水线，帮助开发者理解流式通信的本质与工程实现逻辑。
2026-11-09 20:39:06
457
原创 Chatbot 如何知道 AI 回复结束了？—— [DONE] 与 Streaming 生命周期学习总结
本文深入解析了AI聊天机器人中Streaming机制的生命周期，重点阐述了[DONE]结束标记的作用。通过学习，明确了浏览器需依赖[DONE]信号判断AI回复结束，从而停止读取、释放资源并恢复界面状态。文章结合KK Chat项目实践，梳理了从SSE连接到ReadableStream读取、TextDecoder解码、JSON解析到最终触发[DONE]的完整流程，并指出[DONE]与done = true的本质区别，强调了正确处理结束信号对用户体验和系统稳定性的重要性。
2026-11-08 16:04:53
472
原创 Chatbot 如何读取 AI 回复？—— TextDecoder（文本解码）学习总结
本文详解了 Chatbot 中如何通过 TextDecoder 将网络传输的字节流（Uint8Array）解码为可读字符串，解决了 ReadableStream 读取结果为数字数组的问题。文章梳理了从服务器流式响应到前端显示的完整流程：字节 → 解码 → 字符串 → JSON 解析 → 渲染，强调 TextDecoder 在流式处理中的关键作用，并提醒注意分段解码时的字符截断问题，为后续实现高效、流畅的 AI 回复展示奠定基础。
2026-11-06 09:51:22
666
原创 Chatbot 如何持续接收 AI 回复？—— ReadableStream（浏览器流读取机制）学习总结
本文系统梳理了 Chatbot 实现持续接收 AI 回复的核心机制——ReadableStream。通过学习，明确了 SSE 仅负责服务器端流式推送，而浏览器需依赖 ReadableStream 实现逐段读取。结合 Fetch API 的 response.body 获取可读流，使用 getReader() 和 read() 方法循环读取数据（返回 Uint8Array），配合 TextDecoder 解码为文本，最终实现页面实时渲染。文章厘清了从服务器推送到前端展示的完整流程，揭示了 Streaming
2026-11-04 20:45:00
286
原创 Chatbot 如何停止 AI 回复？—— AbortController 请求取消机制学习总结
本文学习了 AbortController 在 AI Chatbot 中的请求取消机制，理解其如何实现「停止生成」功能。通过绑定 signal 到 fetch 请求，用户点击停止时调用 abort() 可立即中断 HTTP 流式响应，终止数据接收。结合 Error Handling 与 Loading State 管理，实现界面状态恢复。该机制虽不直接停止 AI 模型，但有效提升体验、节省资源。实践发现需正确绑定 signal 并处理取消后的状态，确保流程完整。
2026-11-03 15:53:20
555
原创 Chatbot 如何实现打字机效果？—— Typing Animation(打字动画)
本文总结了Chatbot实现打字机效果（Typing Animation）的原理与实践。通过逐步渲染文本，模拟真人输入，提升用户交互体验。该效果不改变AI生成内容，仅控制前端显示速度，可独立或结合流式输出（Streaming）使用。文章梳理了其在KK Chat中的应用流程，强调需避免文本闪烁、速度过快等问题，并指出打字动画是前端动画技术，与AI模型能力无关。最终，它作为消息渲染链中关键一环，显著增强了聊天产品的自然感与流畅性。
2026-11-02 11:48:41
290
原创 从 Streaming 专题转向 Prompt Engineering（提示词工程）：Prompt Engineering 提示词工程基础
本文系统梳理了提示词工程（Prompt Engineering）的基础概念，强调通过结构化设计角色、任务、上下文、约束与输出格式，提升大模型响应的准确性与一致性。结合 KK Chat 项目实践，介绍了 System Prompt 与 User Prompt 的分工，提出使用 Prompt Template 实现动态生成与模块化管理，并构建了包含角色、记忆、规则等组件的 Prompt Pipeline 架构，为 AI 应用开发提供可复用、易维护的工程化方案。
2026-10-31 18:34:03
419
原创 理解 delta.content，搞懂 AI 流式输出的增量机制
本文深入解析 AI 流式输出中的 delta.content 机制，揭示其作为增量文本的核心作用。在流式响应中，delta.content 表示当前数据块新增的文本内容，而非完整回答。通过 ReadableStream、TextDecoder 和缓冲区处理，前端逐块解析 SSE 数据，提取 delta.content 并拼接成完整回复。与非流式 message.content 不同，delta 仅传递变化量，需动态累积。理解这一机制，是实现流畅、实时的 AI 回复展示的关键。
2026-10-29 20:10:49
532
原创 Buffer 缓冲区与 SSE 数据解析
在AI Chatbot开发中，SSE流式数据可能被分块读取，导致单次数据不完整。为解决此问题，需引入缓冲区（Buffer）暂存未解析内容，通过TextDecoder解码后追加至缓冲区，并以\n\n查找事件分隔符，提取完整事件。利用slice()分离已处理部分，避免重复解析。结合JSON.parse()解析data:字段，识别[DONE]结束标记，实现可靠的数据流处理。关键点包括：缓冲区管理、流式解码、边界判断与尾部清理，确保多段数据正确重组与解析。
2026-10-28 21:14:44
485
原创 SSE（Server-Sent Events）—— 为什么 AI 能够一边思考一边回复?
SSE（Server-Sent Events）是实现AI流式回复的核心技术。它通过保持HTTP连接不断开，让服务器可持续向浏览器推送数据，实现“一边生成、一边输出”的效果。相比传统一次性返回，SSE使前端能实时接收并渲染内容，提升用户体验。在AI Chatbot中，SSE负责传输生成的文本片段，配合前端渲染，完成流畅的流式交互。
2026-10-27 15:40:43
548
原创 从零开发 AI Chatbot（KK Chat）：Error Handling 错误处理机制
本文系统讲解了在开发AI聊天机器人KK Chat过程中如何构建完善的错误处理机制。重点介绍了前端使用try...catch和finally管理异步请求，通过检查response.ok正确处理HTTP错误；后端则利用FastAPI的HTTPException统一响应异常。结合前后端协作，实现网络故障、API错误、数据解析失败等场景下的用户友好提示与界面恢复，确保程序在异常下仍能保持稳定可用。
2026-10-26 13:42:33
369
原创 从零开发 AI Chatbot：Loading State 加载状态管理
本文介绍了AI Chatbot中Loading State的管理机制，涵盖其核心作用、状态控制逻辑（如isLoading布尔值）、界面更新方法及与异步请求的结合。重点强调使用try...finally确保状态正确恢复，避免按钮禁用异常或加载动画残留，并针对流式输出（Streaming）场景说明加载状态应与完整数据流生命周期同步。通过实践问题分析，总结出合理管理加载状态对提升用户体验、防止重复提交的关键意义。
2026-10-25 23:53:01
344
原创 聊天机器人 : Auto Scroll 聊天窗口自动滚动
本文介绍了聊天窗口自动滚动（Auto Scroll）的实现原理与优化策略。通过理解 scrollTop、scrollHeight 和 clientHeight 三者关系，实现新消息出现时自动滚动到底部。针对 Streaming 场景，引入“是否接近底部”的判断逻辑，避免打断用户阅读历史内容。强调自动滚动不仅关乎技术实现，更需兼顾用户体验，体现了前端开发中“功能与交互并重”的核心思想。
2026-10-24 18:35:50
442
原创 Chatbot 为什么能够显示彩色代码？—— Highlight.js（代码高亮）学习总结
本文总结了Highlight.js在AI聊天机器人中实现代码高亮的原理与应用。通过Markdown渲染生成HTML代码块后，Highlight.js依据class="language-x"识别语言，自动为关键字、字符串等添加颜色样式，提升可读性。文章详解其工作流程：从Markdown到HTML，再经Highlight.js高亮，最终在浏览器显示彩色代码。重点强调需调用highlightAll()或highlightElement()，并注意语言标识正确性及流式更新时的重新高亮问题。学习成果包括掌握语法高亮机
2026-10-23 09:25:55
225
原创 什么是 Markdown Rendering（Markdown 渲染）
本文介绍了在 KK Chat 中实现 Markdown 渲染的必要性与流程。由于浏览器无法直接解析 Markdown，需通过 marked.js 将其转换为 HTML，再由 Message Rendering 显示。文章详细说明了从 AI 返回 Markdown 到最终页面渲染的完整链路，并指出仅使用 textContent 会丢失格式，必须用 innerHTML 配合 marked.parse()。同时提及后续优化方向：代码高亮（highlight.js）与样式美化（GitHub Markdown Sty
2026-10-22 13:39:39
304
原创 Chatbot 中的聊天记录是如何显示出来的？—— Message Rendering 学习总结
在开发 KK Chat 时，我深入理解了 Message Rendering（消息渲染） 的核心机制：通过 JavaScript 动态创建 DOM 元素（createElement），设置样式与内容（textContent），并使用 appendChild() 插入聊天区域，最终实现消息的实时显示。结合 CSS 实现用户与 AI 消息的左右布局，利用浏览器局部重绘机制保证流畅性。整个流程涵盖 DOM 操作、事件处理、前后端协作，揭示了前端如何将数据转化为可视界面，是 ChatBot 实现交互体验的关键。
2026-10-21 14:25:50
363
原创 为什么 ChatGPT 能一个字一个字输出？——彻底理解 JavaScript Event Loop（事件循环）
JavaScript 之所以能实现 ChatGPT 逐字输出，核心在于 事件循环（Event Loop）。由于 JavaScript 是单线程，它将异步操作（如 fetch）交由浏览器的 Web APIs 处理，自身继续执行后续代码。当网络响应返回后，回调函数进入任务队列，由 Event Loop 在调用栈空闲时依次执行。尤其微任务（Microtask）优先于宏任务（Macrotask），确保 Promise 回调先于 setTimeout 执行。在流式响应（Streaming）中，服务器逐块发送数据，每次
2026-10-20 17:07:05
1024
原创 取餐小票到等待叫号--从Promise到async/await
JavaScript 异步编程解决任务等待阻塞问题。通过 Promise 表示未来结果，其状态为 pending、fulfilled 或 rejected。使用 .then() 处理成功，.catch() 捕获错误，Promise.all() 并行处理多个异步操作。结合 async/await 可使异步代码更简洁易读，提升用户体验，尤其适用于前端与后端通信场景。
2026-10-19 13:25:29
366
原创 REST API 在 Chatbot 中的作用（前后端通信）
REST API 是连接浏览器与 Python 后端的关键桥梁，实现前后端通信。通过 HTTP 协议，浏览器使用 JavaScript 的 fetch() 发送 JSON 格式请求至 FastAPI 接口，后端调用 OpenAI SDK 生成回复，并返回结果。该机制使终端 Chatbot 升级为可交互的 Web 应用，支撑流式输出、用户登录等高级功能，是构建现代 AI Chatbot 的基础。
2026-10-18 12:53:04
153
原创 代码保安 —— Exception Handling（异常处理）
本文介绍了在KK Chat项目中引入异常处理（Exception Handling）的重要性。通过try...except机制，有效捕获API调用、数据库操作及消息保存中的运行时错误，避免程序崩溃。结合日志系统记录错误详情，提升程序健壮性与可维护性，确保聊天流程持续稳定运行，是实现工程化开发的关键一步。
2026-10-17 19:16:25
212
原创 错误回溯 —— Logging (日志系统)
本文介绍了在开发中使用Logging日志系统替代print()的重要性。随着项目增大，print输出在程序关闭后消失，难以排查问题。Logging作为Python内置模块，可将运行信息、警告和错误分级记录至文件（如logs/app.log），实现持久化存储，便于后续调试与维护。通过info、warning、error等不同等级日志，开发者能清晰追踪程序状态，提升代码可维护性，是实现工程化开发的基础能力。
2026-10-16 21:11:55
420
原创 工程化基础 -- Project Refactor（工程化）
项目功能增多导致结构混乱，需进行工程化重构。通过整理目录结构，将数据库移至data/，日志存入logs/，编写README.md说明文档，使用requirements.txt管理依赖，配置.gitignore忽略缓存与敏感文件，规范项目结构。工程化不增功能，却提升可维护性与协作效率，为后续开发奠定基础。
2026-10-15 19:18:59
302
原创 Streaming流式输出 - 让回复像水一样丝滑
本文介绍了OpenAI SDK中流式输出（Streaming）的原理与应用。通过设置stream=True，实现AI边生成边输出，提升交互体验。核心机制包括：使用Generator和yield实现分段返回，通过chunk和delta逐字传递内容，并配合flush=True确保终端实时显示。此举使聊天过程更自然，接近主流AI产品体验，是现代AI应用的关键技术之一。
2026-10-13 16:11:02
746
原创 优化聊天机器人的第一步 - Context Optimization（上下文优化）
为应对多轮对话中聊天记录过长导致的性能问题，引入上下文优化（Context Optimization）：通过SQLite查询最近20条消息并倒序排列，确保发送给大模型的仅是最新有效上下文。此举显著减少Token消耗与延迟，提升响应速度，同时保留完整历史记录。核心在于“只传最有价值的上下文”，为后续实现记忆、摘要与知识检索奠定基础。
2026-10-12 14:03:28
309
原创 什么是让聊天机器人拥有理解上下文的能力?
本文介绍了多轮对话（Multi-turn Chat）的核心机制，揭示了AI理解上下文的关键在于历史聊天记录的传递。由于OpenAI API每次请求独立，模型无法自动记住之前内容，因此需通过SQLite保存聊天记录，并在每次请求时将历史（history）与系统提示（system）合并为messages发送给模型。这一过程使AI能理解“它”指代前文内容，实现真正意义上的上下文理解。流程闭环：读取历史 → 组装messages → 调用API → 保存新对话，构建了完整的多轮对话系统。
2026-10-10 20:15:23
197
原创 OpenAI SDK-让Python调用到大模型API——学习总结
OpenAI SDK（Software Development Kit，软件开发工具包）是 OpenAI 官方提供的一套开发库，用于帮助开发者在程序中调用 OpenAI 提供的大模型（如 GPT 系列）。可以把它理解成一个"中间层"。正常情况下，如果想调用大模型，需要自己编写 HTTP 请求、设置请求头（Headers）、发送 JSON 数据、解析返回结果等。而 OpenAI SDK 已经把这些底层工作封装好了，开发者只需要调用几个 Python 函数，就可以与大模型进行交互。
2026-10-07 16:10:40
224
原创 FastAPI 在KK Chat的作用 —— 学习总结
FastAPI 在 KK Chat 中充当 HTTP 与 Python 函数的翻译层，通过路由、Pydantic 校验、异步流式响应（StreamingResponse）和生成器实现逐字输出，解决前端请求、数据校验、长耗时等问题。项目采用分层架构，实现“换壳不换芯”，提升可维护性。基于 ASGI 的异步能力，天然支持高并发与流式输出，优于传统 Flask。核心心法：类型标注即契约，代码简洁高效。
2026-10-05 15:59:20
397
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人