AI 趣闻见识

🛰️ 序章：什么是 BS 架构？ BS（Browser-Server）架构，顾名思义就是 浏览器与服务器的双人舞。 Browser（浏览器） ：前端舞台，用户点击、输入、发起请求。 Server（服务

在数字宇宙中，Web 本是一个静态的舞台，JavaScript 为其注入生命，而 AI，如今则为它赋予了灵魂。特别是大语言模型（LLM, Large Language Model）的出现，彻底颠覆了

1. 开场：把 AI 请进网址栏 公元前 2025 年，一位前端工程师在键盘上敲下 npm create aigc-app@latest， 浏览器瞬间变成了一座 24h 不打烊的剧院： 观众是用户 演

📜 目录（点击瞬移） 🌌 MCP 为何物？—— 从“对话”到“上下文” 🧠 底层原理：一条 SSE 流如何串起三大洲 🏗️ 对 Web 行业的五连击 🪄 实战：30 行 JS 搭一个“会自己写代码”的

0️⃣ 开场三行诗 1️⃣ 故事背景：当 AI 遇见 Markdown 想象一只名叫 Gena 的 AI，它每天都在云端胡言乱语： 我们需要把这段胡话： 用 纯文本 Markdown 存起来（轻量、可

🧠 开篇：当神经网络遇上浏览器 想象一下，当你在浏览器里输入 "生成一只会写代码的猫"，屏幕上瞬间跳出憨态可掬的像素猫捧着键盘敲代码 —— 这背后，是 Web AIGC 前端工程师们搭建的魔法桥梁。作

开场白：为什么你的 AI 像便秘？ 想象一下你在咖啡馆里，隔壁桌的程序员小哥对着屏幕怒吼：“快出来啊！” 你以为他在催稿，结果他只是调 OpenAI 的接口——等待 8 秒一次性返回 800 个 to

引言：在比特洪流中建造智能方舟 想象你站在数字世界的渡口，左手是满屏闪烁的代码瀑布，右手是呼啸而过的算法风暴。成为 AI 工程师的旅程，就像在二进制海洋中驾驶一叶扁舟，既要懂得洋流（数学原理）的规律，

在这个 AI 大模型如雨后春笋般涌现的时代，让前端应用与本地大模型来一场 “亲密接触”，就像给你的 React 应用装上一个 “本地智囊团”。今天，我们就来实现一个看似高深实则简单的需求：用 Reac

在现代 Web 应用的世界里，数据展示早已不再是枯燥的表格，而是一场视觉盛宴。 就像数据是食材，AI 是大厨，Chart.js / Recharts 是精致的餐具——最终的 UI 是那道端上用户桌面的

开场三句话 用户说：“发张图。” 用户说：“发段语音。” 你说：“稍等，我让浏览器先开个 AI 小灶。” 今天，我们要写一个聊天 UI 的上传组件，它既能识图又能辨音，还要保持界面优雅，像一位会魔法的

0x00 开场白：为什么连“打字中的点点”都要卷？ 在 AIGC 时代，每一次交互都是一次小型舞台剧。 当大模型在后台吭哧吭哧地推理，前端必须优雅地告诉用户： 于是，TypingDots——那三个一跳

🌱 需求解剖：一条丝带由哪些细胞组成？ 细胞类型 生物学意义 映射到 UI 气泡 细胞质 MessageBubble 头像 细胞核 Avatar 时间戳 细胞壁 TimeStamp 加载条 伪足 Ty

🌌 序章：为什么聊天框比火箭还难造 表面看，ChatInput 只是一片白框。底层看： 光标在 Blink Tree 与 Layout Engine 之间来回蹦迪； 每敲一个键，触发 合成事件 → 浏

🌌 1. 开场：一个异步请求的奥德赛 想象浏览器是一座剧院，舞台上的演员分别是： 角色 职责 道具 用户 提问 键盘 AI 回答 fetch React 导演 hooks 我们 剧务 useChat

在 AI 开发的世界里，HuggingFace 就像一个摆满了各种智能工具的超级市场，而 API 则是通往这个市场的大门。今天，我们就来亲手打造一把打开这扇门的 “钥匙”，用 JavaScript 实

引言：当 AI 成为你的编程搭档 想象一下，你正在编写代码时，旁边坐着一位无所不知的编程大师 —— 它能理解你的模糊需求，能帮你优化复杂逻辑，甚至能在你卡壳时递上一杯 "灵感咖啡"。这不是科幻电影的场

目录 为什么你的 AI 总像金鱼？ 内存、磁盘与宇宙热寂 把聊天记录塞进“琥珀”——三种持久化姿势 给历史加上“时光机”——版本控制与差分同步 彩蛋：用 ASCII 画一张“聊天宇宙” 尾声：让代码替

0. 开场白：为什么 AI 喜欢“挤牙膏”？ 想象一下，如果 AI 一次性把整篇《三体》丢给你，浏览器会像被三体人智子锁死的加速器——卡成 PPT。 于是，人类发明了 Server-Sent Even

🎬 前言：AI 很强，但前端不是魔术师 你可能也和我一样，第一次调 OpenAI 的时候满心欢喜： “终于可以做一个自己的 ChatGPT 了！” 然后： Prompt 工程调不准 API 请求要处理