<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[KJ_28的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/KJ_28</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; KJ_28]]></copyright><item><title><![CDATA[Chatbot 如何判断一个 Prompt 好不好？—— 告别凭感觉，Prompt Evaluation 提示词评估与优化学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/170743325</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/170743325</guid><author>KJ_28</author><pubDate>Fri, 13 Nov 2026 21:11:39 +0800</pubDate><description><![CDATA[本文系统阐述了Prompt Evaluation在AI对话系统中的核心作用，提出通过固定测试集、多维度评估指标（如准确率、相关性、完整性等）及A/B测试、回归测试实现Prompt优化的可量化闭环。强调从“主观感觉”转向“数据驱动”，构建可迭代的Prompt工程体系，完成从模板设计到版本管理再到评估优化的完整工程化流程，为构建高效、稳定的AI应用奠定基础。]]></description><category></category></item><item><title><![CDATA[Chatbot 如何管理 Prompt？—— Prompt Version Management（提示词版本管理）学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/170651903</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/170651903</guid><author>KJ_28</author><pubDate>Thu, 12 Nov 2026 20:33:54 +0800</pubDate><description><![CDATA[本文系统阐述了提示词（Prompt）版本管理的必要性与实践方法。随着AI应用迭代，复杂Prompt需像代码一样进行版本控制，以实现修改追踪、回滚、对比与团队协作。通过引入元数据（Metadata）和提示词仓库（Prompt Registry），可规范化管理不同场景下的Prompt，支持版本演进、A/B测试与发布流程。在KK Chat项目中，该机制为构建可维护、可优化的AI应用奠定了工程基础。]]></description><category></category></item><item><title><![CDATA[Chatbot 如何完成复杂任务？—— Prompt Chaining（提示词链）学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/170527553</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/170527553</guid><author>KJ_28</author><pubDate>Wed, 11 Nov 2026 13:39:08 +0800</pubDate><description><![CDATA[本文总结了 Prompt Chaining 在复杂任务中的应用：将大任务拆分为多个小步骤，每个步骤由独立 Prompt 执行，前一结果作为后一输入。相比单一长 Prompt，Prompt Chaining 提升了可维护性、可扩展性与复用性，是 AI 工程化的重要实践。结合 KK Chat 项目，其流程涵盖意图识别、记忆注入、安全检测到任务执行，体现了 Prompt 工作流的设计思想。同时区分了 Prompt Chaining 与 Prompt Template、Agent 的本质差异，强调其作为“任务编排”]]></description><category></category></item><item><title><![CDATA[从零开发 AI Chatbot：JSON.parse()——JavaScript 如何解析 JSON 数据？]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/170445215</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/170445215</guid><author>KJ_28</author><pubDate>Tue, 10 Nov 2026 15:26:06 +0800</pubDate><description><![CDATA[本文详解 JSON.parse() 在 KK Chat 项目中的核心作用：将 API 返回的 JSON 字符串（如 Streaming 数据）解析为 JavaScript 对象，实现对 delta.content 等字段的访问。结合 ReadableStream 与 SSE 解析，展示如何安全处理流式数据，并通过 try...catch 防御非法 JSON 异常，确保前后端数据交互稳定可靠。]]></description><category></category></item><item><title><![CDATA[梳理篇 Chatbot 是如何一步步显示 AI 回复的？—— Streaming Pipeline 完整工作流程解析]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/170365713</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/170365713</guid><author>KJ_28</author><pubDate>Mon, 09 Nov 2026 20:39:06 +0800</pubDate><description><![CDATA[本文梳理了AI聊天机器人从用户提问到回复实时显示的完整Streaming Pipeline流程：用户输入经Fetch API发送至FastAPI后端，调用大模型生成流式响应，通过SSE推送至浏览器，经ReadableStream、TextDecoder、Buffer与SSE解析器逐层处理，最终通过delta.content拼接文本并渲染为Markdown，实现边生成边显示。各模块分工明确，形成高效、可维护的数据流水线，帮助开发者理解流式通信的本质与工程实现逻辑。]]></description><category></category></item><item><title><![CDATA[Chatbot 如何知道 AI 回复结束了？—— [DONE] 与 Streaming 生命周期学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/170291140</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/170291140</guid><author>KJ_28</author><pubDate>Sun, 08 Nov 2026 16:04:53 +0800</pubDate><description><![CDATA[本文深入解析了AI聊天机器人中Streaming机制的生命周期，重点阐述了[DONE]结束标记的作用。通过学习，明确了浏览器需依赖[DONE]信号判断AI回复结束，从而停止读取、释放资源并恢复界面状态。文章结合KK Chat项目实践，梳理了从SSE连接到ReadableStream读取、TextDecoder解码、JSON解析到最终触发[DONE]的完整流程，并指出[DONE]与done = true的本质区别，强调了正确处理结束信号对用户体验和系统稳定性的重要性。]]></description><category></category></item><item><title><![CDATA[Chatbot 如何读取 AI 回复？—— TextDecoder（文本解码）学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/170186650</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/170186650</guid><author>KJ_28</author><pubDate>Fri, 06 Nov 2026 09:51:22 +0800</pubDate><description><![CDATA[本文详解了 Chatbot 中如何通过 TextDecoder 将网络传输的字节流（Uint8Array）解码为可读字符串，解决了 ReadableStream 读取结果为数字数组的问题。文章梳理了从服务器流式响应到前端显示的完整流程：字节 → 解码 → 字符串 → JSON 解析 → 渲染，强调 TextDecoder 在流式处理中的关键作用，并提醒注意分段解码时的字符截断问题，为后续实现高效、流畅的 AI 回复展示奠定基础。]]></description><category></category></item><item><title><![CDATA[Chatbot 如何持续接收 AI 回复？—— ReadableStream（浏览器流读取机制）学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/170052599</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/170052599</guid><author>KJ_28</author><pubDate>Wed, 04 Nov 2026 20:45:00 +0800</pubDate><description><![CDATA[本文系统梳理了 Chatbot 实现持续接收 AI 回复的核心机制——ReadableStream。通过学习，明确了 SSE 仅负责服务器端流式推送，而浏览器需依赖 ReadableStream 实现逐段读取。结合 Fetch API 的 response.body 获取可读流，使用 getReader() 和 read() 方法循环读取数据（返回 Uint8Array），配合 TextDecoder 解码为文本，最终实现页面实时渲染。文章厘清了从服务器推送到前端展示的完整流程，揭示了 Streaming ]]></description><category></category></item><item><title><![CDATA[Chatbot 如何停止 AI 回复？—— AbortController 请求取消机制学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/169945780</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/169945780</guid><author>KJ_28</author><pubDate>Tue, 03 Nov 2026 15:53:20 +0800</pubDate><description><![CDATA[本文学习了 AbortController 在 AI Chatbot 中的请求取消机制，理解其如何实现「停止生成」功能。通过绑定 signal 到 fetch 请求，用户点击停止时调用 abort() 可立即中断 HTTP 流式响应，终止数据接收。结合 Error Handling 与 Loading State 管理，实现界面状态恢复。该机制虽不直接停止 AI 模型，但有效提升体验、节省资源。实践发现需正确绑定 signal 并处理取消后的状态，确保流程完整。]]></description><category></category></item><item><title><![CDATA[Chatbot 如何实现打字机效果？—— Typing Animation(打字动画)]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/169833536</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/169833536</guid><author>KJ_28</author><pubDate>Mon, 02 Nov 2026 11:48:41 +0800</pubDate><description><![CDATA[本文总结了Chatbot实现打字机效果（Typing Animation）的原理与实践。通过逐步渲染文本，模拟真人输入，提升用户交互体验。该效果不改变AI生成内容，仅控制前端显示速度，可独立或结合流式输出（Streaming）使用。文章梳理了其在KK Chat中的应用流程，强调需避免文本闪烁、速度过快等问题，并指出打字动画是前端动画技术，与AI模型能力无关。最终，它作为消息渲染链中关键一环，显著增强了聊天产品的自然感与流畅性。]]></description><category></category></item><item><title><![CDATA[从 Streaming 专题转向 Prompt Engineering（提示词工程）：Prompt Engineering 提示词工程基础]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/169650873</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/169650873</guid><author>KJ_28</author><pubDate>Sat, 31 Oct 2026 18:34:03 +0800</pubDate><description><![CDATA[本文系统梳理了提示词工程（Prompt Engineering）的基础概念，强调通过结构化设计角色、任务、上下文、约束与输出格式，提升大模型响应的准确性与一致性。结合 KK Chat 项目实践，介绍了 System Prompt 与 User Prompt 的分工，提出使用 Prompt Template 实现动态生成与模块化管理，并构建了包含角色、记忆、规则等组件的 Prompt Pipeline 架构，为 AI 应用开发提供可复用、易维护的工程化方案。]]></description><category></category></item><item><title><![CDATA[理解 delta.content，搞懂 AI 流式输出的增量机制]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/169463709</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/169463709</guid><author>KJ_28</author><pubDate>Thu, 29 Oct 2026 20:10:49 +0800</pubDate><description><![CDATA[本文深入解析 AI 流式输出中的 delta.content 机制，揭示其作为增量文本的核心作用。在流式响应中，delta.content 表示当前数据块新增的文本内容，而非完整回答。通过 ReadableStream、TextDecoder 和缓冲区处理，前端逐块解析 SSE 数据，提取 delta.content 并拼接成完整回复。与非流式 message.content 不同，delta 仅传递变化量，需动态累积。理解这一机制，是实现流畅、实时的 AI 回复展示的关键。]]></description><category></category></item><item><title><![CDATA[Buffer 缓冲区与 SSE 数据解析]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/169366587</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/169366587</guid><author>KJ_28</author><pubDate>Wed, 28 Oct 2026 21:14:44 +0800</pubDate><description><![CDATA[在AI Chatbot开发中，SSE流式数据可能被分块读取，导致单次数据不完整。为解决此问题，需引入缓冲区（Buffer）暂存未解析内容，通过TextDecoder解码后追加至缓冲区，并以\n\n查找事件分隔符，提取完整事件。利用slice()分离已处理部分，避免重复解析。结合JSON.parse()解析data:字段，识别[DONE]结束标记，实现可靠的数据流处理。关键点包括：缓冲区管理、流式解码、边界判断与尾部清理，确保多段数据正确重组与解析。]]></description><category></category></item><item><title><![CDATA[SSE（Server-Sent Events）—— 为什么 AI 能够一边思考一边回复?]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/169262533</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/169262533</guid><author>KJ_28</author><pubDate>Tue, 27 Oct 2026 15:40:43 +0800</pubDate><description><![CDATA[SSE（Server-Sent Events）是实现AI流式回复的核心技术。它通过保持HTTP连接不断开，让服务器可持续向浏览器推送数据，实现“一边生成、一边输出”的效果。相比传统一次性返回，SSE使前端能实时接收并渲染内容，提升用户体验。在AI Chatbot中，SSE负责传输生成的文本片段，配合前端渲染，完成流畅的流式交互。]]></description><category></category></item><item><title><![CDATA[从零开发 AI Chatbot（KK Chat）：Error Handling 错误处理机制]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/169157379</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/169157379</guid><author>KJ_28</author><pubDate>Mon, 26 Oct 2026 13:42:33 +0800</pubDate><description><![CDATA[本文系统讲解了在开发AI聊天机器人KK Chat过程中如何构建完善的错误处理机制。重点介绍了前端使用try...catch和finally管理异步请求，通过检查response.ok正确处理HTTP错误；后端则利用FastAPI的HTTPException统一响应异常。结合前后端协作，实现网络故障、API错误、数据解析失败等场景下的用户友好提示与界面恢复，确保程序在异常下仍能保持稳定可用。]]></description><category></category></item><item><title><![CDATA[从零开发 AI Chatbot：Loading State 加载状态管理]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/169070836</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/169070836</guid><author>KJ_28</author><pubDate>Sun, 25 Oct 2026 23:53:01 +0800</pubDate><description><![CDATA[本文介绍了AI Chatbot中Loading State的管理机制，涵盖其核心作用、状态控制逻辑（如isLoading布尔值）、界面更新方法及与异步请求的结合。重点强调使用try...finally确保状态正确恢复，避免按钮禁用异常或加载动画残留，并针对流式输出（Streaming）场景说明加载状态应与完整数据流生命周期同步。通过实践问题分析，总结出合理管理加载状态对提升用户体验、防止重复提交的关键意义。]]></description><category></category></item><item><title><![CDATA[聊天机器人 : Auto Scroll 聊天窗口自动滚动]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/168975919</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/168975919</guid><author>KJ_28</author><pubDate>Sat, 24 Oct 2026 18:35:50 +0800</pubDate><description><![CDATA[本文介绍了聊天窗口自动滚动（Auto Scroll）的实现原理与优化策略。通过理解 scrollTop、scrollHeight 和 clientHeight 三者关系，实现新消息出现时自动滚动到底部。针对 Streaming 场景，引入“是否接近底部”的判断逻辑，避免打断用户阅读历史内容。强调自动滚动不仅关乎技术实现，更需兼顾用户体验，体现了前端开发中“功能与交互并重”的核心思想。]]></description><category></category></item><item><title><![CDATA[Chatbot 为什么能够显示彩色代码？—— Highlight.js（代码高亮）学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/168849089</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/168849089</guid><author>KJ_28</author><pubDate>Fri, 23 Oct 2026 09:25:55 +0800</pubDate><description><![CDATA[本文总结了Highlight.js在AI聊天机器人中实现代码高亮的原理与应用。通过Markdown渲染生成HTML代码块后，Highlight.js依据class="language-x"识别语言，自动为关键字、字符串等添加颜色样式，提升可读性。文章详解其工作流程：从Markdown到HTML，再经Highlight.js高亮，最终在浏览器显示彩色代码。重点强调需调用highlightAll()或highlightElement()，并注意语言标识正确性及流式更新时的重新高亮问题。学习成果包括掌握语法高亮机]]></description><category></category></item><item><title><![CDATA[什么是 Markdown Rendering（Markdown 渲染）]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/168761871</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/168761871</guid><author>KJ_28</author><pubDate>Thu, 22 Oct 2026 13:39:39 +0800</pubDate><description><![CDATA[本文介绍了在 KK Chat 中实现 Markdown 渲染的必要性与流程。由于浏览器无法直接解析 Markdown，需通过 marked.js 将其转换为 HTML，再由 Message Rendering 显示。文章详细说明了从 AI 返回 Markdown 到最终页面渲染的完整链路，并指出仅使用 textContent 会丢失格式，必须用 innerHTML 配合 marked.parse()。同时提及后续优化方向：代码高亮（highlight.js）与样式美化（GitHub Markdown Sty]]></description><category></category></item><item><title><![CDATA[Chatbot 中的聊天记录是如何显示出来的？—— Message Rendering 学习总结]]></title><link>https://blog.youkuaiyun.com/KJ_28/article/details/168651528</link><guid>https://blog.youkuaiyun.com/KJ_28/article/details/168651528</guid><author>KJ_28</author><pubDate>Wed, 21 Oct 2026 14:25:50 +0800</pubDate><description><![CDATA[在开发 KK Chat 时，我深入理解了 Message Rendering（消息渲染） 的核心机制：通过 JavaScript 动态创建 DOM 元素（createElement），设置样式与内容（textContent），并使用 appendChild() 插入聊天区域，最终实现消息的实时显示。结合 CSS 实现用户与 AI 消息的左右布局，利用浏览器局部重绘机制保证流畅性。整个流程涵盖 DOM 操作、事件处理、前后端协作，揭示了前端如何将数据转化为可视界面，是 ChatBot 实现交互体验的关键。]]></description><category></category></item></channel></rss>