第40期 | 模块四复盘：AI应用开发模式总结

第40期 | 模块四复盘AI应用开发模式总结 今天你将学会整理 AI 应用的常见架构模式形成你的「开发模式库」掌握 AI 应用特有的性能优化策略理解 AI 应用安全注意事项——比传统 Web 应用更多回顾模块四全部知识完成能力自检 核心知识AI 前端开发模式库经过模块四 10 期的学习我们把所有模式整理成一份可复用的开发模式库模式1基础对话模式适用场景简单聊天、问答、翻译 架构前端 → 后端代理 → LLM API → SSE流式返回 关键组件ChatStore ChatMessage MarkdownRenderer ChatInput 关键技术SSE流式解析 Zustand状态管理 react-markdown渲染 常见问题流式渲染抖动、Markdown格式不一致、长消息性能模式2RAG问答模式适用场景知识库问答、文档搜索、技术助手 架构前端 → 后端(向量搜索LLM) → SSE流(contentsources) 关键组件ChatStore SourceReference DocumentUpload KnowledgeStore 关键技术向量搜索UI 引用来源展示 文档分片管理 常见问题搜索精度低、分片质量差、引用来源不可信模式3Agent交互模式适用场景AI助手、自动化任务、工具调用 架构前端 → 后端(Agent思考工具LLM) → SSE流(thinkingtooltext) 关键组件AgentStore AgentMessage ToolCall ThinkingStep DisplayModeToggle 关键技术Agent SSE多类型解析 工具调用可视化 思考过程展示 常见问题工具调用结果展示混乱、思考过程太长、用户不理解Agent逻辑模式4图片生成模式适用场景AI绘画、图片创作、设计辅助 架构前端 → 后端代理 → DALL-E/Stable Diffusion → 图片URL返回 关键组件ImageStore PromptInput StylePresets GenerationProgress ResultGallery 关键技术模拟进度条 图片下载持久化 风格预设组合 常见问题等待时间长(15-60s)、结果不确定、URL临时过期(2h)模式5语音交互模式适用场景语音聊天、语音助手、语音转文字 架构Web Speech API(免费) 或 Whisper API(付费) → 文字 → LLM → SpeechSynthesis播放 关键组件VoiceRecorder AudioVisualizer VoicePlayer 降级处理 关键技术SpeechRecognition实时转文字 AnalyserNode波形可视化 SpeechSynthesis播放 常见问题浏览器支持度差异、隐私提示、降级方案模式6多模态交互模式适用场景图片理解、混合对话、结构化提取 架构前端(文字图片) → 后端(GPT-4o多模态) → SSE流(文字可能图片) 关键组件MultimodalMessage ImageUploader StructuredResult ExportButton 关键技术图片base64编码 多模态消息渲染 结构化输出Prompt 常见问题图片压缩(20MB限制)、格式约束不稳定、结构化提取精度六种模式的选择决策树你的需求是什么 │ ├─ 纯文字对话 → 模式1基础对话 │ ├─ 需要知识库支撑 → 模式2RAG问答 │ ├─ 需要AI执行操作 → 模式3Agent交互 │ ├─ 需要生成图片 → 模式4图片生成 │ ├─ 需要语音输入/输出 → 模式5语音交互 │ ├─ 需要图片理解 → 模式6多模态交互 │ └─ 需要多种能力组合 → 组合模式如 RAG Agent 语音AI 应用性能优化策略AI 应用有传统 Web 应用没有的性能瓶颈瓶颈原因优化方案LLM 响应慢生成 1-30 秒流式响应SSE 模拟进度 预估时间提示长消息渲染Markdown 渲染重虚拟列表 分段渲染 懒加载图片Token 成本高每次请求 $0.01-0.30缓存相似问题 模型降级(gpt-4o-mini) max_tokens限制图片URL过期DALL-E URL 2小时失效立即下载保存 CDN持久化并发请求多多用户同时聊天限流 队列 降级到更小模型状态管理重对话历史可能很长Zustand persist 对话压缩 只持久化关键数据具体优化实现1. 虚拟列表聊天消息过多时当对话超过 100 条消息时渲染所有消息会变慢。用虚拟列表只渲染可见区域import { useVirtualizer } from tanstack/react-virtual; function VirtualMessageList({ messages }: { messages: Message[] }) { const parentRef useRefHTMLDivElement(null); const virtualizer useVirtualizer({ count: messages.length, getScrollElement: () parentRef.current, estimateSize: () 80, // 预估每条消息高度 overscan: 5, // 多渲染5条避免频繁重新渲染 }); return ( div ref{parentRef} classNameh-[600px] overflow-auto div style{{ height: virtualizer.getTotalSize(), position: relative }} {virtualizer.getVirtualItems().map((item) ( div key{item.key} style{{ position: absolute, top: item.start, height: item.size }} ChatMessage message{messages[item.index]} / /div ))} /div /div ); }2. 缓存相似问题// lib/cache.tsinterfaceCacheEntry{query:string;response:string;timestamp:string;tokensUsed:number;}classQueryCache{privatecache:Mapstring,CacheEntrynewMap();get(query:string):CacheEntry|null{// 简单的相似度判断去掉标点和空格后比较constnormalizedquery.toLowerCase().replace(/[^\w]/g,);for(const[key,entry]ofthis.cache){constnormalizedKeykey.toLowerCase().replace(/[^\w]/g,);if(normalizednormalizedKey||this.similarity(normalized,normalizedKey)0.8){returnentry;}}returnnull;}set(query:string,response:string,tokensUsed:number){this.cache.set(query,{query,response,timestamp:newDate().toISOString(),tokensUsed,});}privatesimilarity(a:string,b:string):number{// 简化的相似度公共字符数 / max(len)constsetAnewSet(a);constsetBnewSet(b);constcommon[...setA].filter(csetB.has(c)).length;returncommon/Math.max(setA.size,setB.size);}}3. 模型动态降级// lib/model-selector.tsexportfunctionselectModel(query:string,usage:TokenUsage):string{// 简单问题用 mini 模型if(query.length100!query.includes(代码)!query.includes(架构)){returngpt-4o-mini;}// 复杂问题用 gpt-4oreturngpt-4o;}AI 应用安全注意事项AI 应用比传统 Web 应用多了一层安全维度——内容安全安全维度传统 Web 应用AI 应用防护措施API Key 安全不暴露在前端同样不能暴露后端代理 环境变量数据隐私不泄露用户数据LLM 可能记住用户数据不传敏感数据给 LLM 数据脱敏内容安全不太多关注LLM 可能生成有害内容content moderation 内容过滤成本控制服务器成本可控API 成本随使用量飙升限流 缓存 模型降级Prompt 注入不存在用户可能通过输入操纵 AI输入验证 system prompt 保护幻觉风险不存在LLM 编造不存在的事实RAG 引用来源 用户验证提示Prompt 注入防护// lib/prompt-sanitizer.tsexportfunctionsanitizeUserInput(input:string):string{// 移除可能用于注入的标记constdangerousPatterns[/ignore previous instructions/gi,/forget everything/gi,/system:/gi,/\[SYSTEM\]/gi,/\/?system/gi,];letsanitizedinput;for(constpatternofdangerousPatterns){sanitizedsanitized.replace(pattern,[FILTERED]);}// 限制输入长度if(sanitized.length4000){sanitizedsanitized.slice(0,4000)... (输入过长已截断);}returnsanitized;}数据脱敏// lib/data-mask.tsexportfunctionmaskSensitiveData(text:string):string{// 脱敏手机号texttext.replace(/(\d{3})\d{4}(\d{4})/g,$1****$2);// 脱敏邮箱texttext.replace(/(\w{2})\w(\w\.\w)/g,$1***$2);// 脱敏身份证号texttext.replace(/(\d{4})\d{10}(\d{4})/g,$1**********$2);returntext;}模块四知识地图回顾模块四AI应用开发第31-40期 31. AI应用架构全景 ├─ 四种架构模式直接调用→代理→流式→RAGAgent ├─ AI应用 vs 传统Web差异 └─ 完整技术栈推荐 32. OpenAI API接入实战 ├─ SDK安装 Key管理 ├─ 后端代理非流式流式 ├─ AI客户端封装重试超时追踪 └─ 成本控制策略 33. 聊天界面开发 ├─ ChatStore ChatMessage ChatInput ├─ MarkdownRenderer CodeBlock ├─ 流式打字效果 └─ 5个交互细节滚动/中断/重试/复制/清空 34. RAG前端实现 ├─ 知识库管理界面上传/分片/搜索 ├─ 向量搜索交互 SourceReference ├─ RAG SSE流content sources └─ 引用来源展示 35. AI Agent前端交互 ├─ Agent思考-行动循环 ├─ 三种显示模式精简/详细/实时 ├─ ToolCall ThinkingStep组件 └─ Agent SSE多类型流解析 36. 实战4AI助手应用 ├─ TechAssist完整项目架构 ├─ 三种模式chat/rag/agent统一设计 ├─ 分模块逐步实现策略 └─ 产品级细节持久化/标题生成/模型切换/Token追踪 37. AI绘画前端 ├─ 图片生成界面 风格预设 ├─ 模拟进度条 等待体验设计 ├─ ResultGallery 下载持久化 └─ URL过期/版权提示 38. 语音AI前端 ├─ Web Speech API Whisper降级 ├─ VoiceRecorder AudioVisualizer ├─ VoicePlayer SpeechSynthesis └─ 语音UX原则实时反馈/可中断/文字兜底/隐私提示 39. 多模态AI应用 ├─ 三种交互模式图片理解/混合对话/多模态创作 ├─ MultimodalMessage ImageUploader ├─ 结构化输出Prompt └─ 图片压缩 格式约束 40. 模块四复盘 ├─ 六种开发模式库 ├─ 性能优化策略虚拟列表/缓存/模型降级 ├─ 安全注意事项Prompt注入/数据脱敏/内容安全 └─ 能力自检清单能力自检清单能力自检标准✅/❌AI 应用架构能根据需求选择正确的架构模式后端代理实现了安全的 LLM API 代理Key 不暴露流式响应实现 SSE 流式渲染 逐字打字效果聊天界面实现完整的 ChatGPT 风格聊天消息输入MarkdownRAG 前端实现知识库管理 引用来源展示Agent 交互实现思考过程 工具调用可视化图片生成实现风格预设 进度条 画廊展示语音交互实现 VoiceRecorder VoicePlayer 降级方案多模态实现图片上传 多模态消息渲染成本控制实现了模型降级 缓存 Token 追踪性能优化实现了虚拟列表 / 缓存 / 模型降级中的至少 2 种安全防护实现了 Prompt 注入防护 数据脱敏达标线12 项中至少 10 项 ✅。常见误区误区1AI 应用不需要特殊安全防护AI 应用有 Prompt 注入、数据隐私、内容安全、成本失控等独特风险——比传统 Web 应用需要更多防护。误区2性能优化不重要LLM 响应慢 高成本 长消息渲染重——这三个性能瓶颈不解决用户体验会很差。误区3只实现一种模式就够了AI 应用通常需要多种能力组合对话RAGAgent语音。六种模式库让你能快速组合出新的应用。 AI协作实战实战场景建立你的「AI 前端开发模式库」文档把模块四学到的所有模式整理成一份可复用的参考文档我的 AI 前端开发模式库 ├─ 模式1基础对话架构组件关键技术常见问题 ├─ 模式2RAG问答 ├─ 模式3Agent交互 ├─ 模式4图片生成 ├─ 模式5语音交互 ├─ 模式6多模态交互 ├─ 选择决策树 ├─ 性能优化策略表 └─ 安全注意事项表我给 AI 的 prompt帮我整理一份「AI前端开发模式库」文档包含六种模式的 1. 适用场景 2. 核心架构图 3. 关键组件列表 4. 关键技术栈 5. 常见问题和解决方案 6. 成本估算 还有 - 模式选择决策树 - 性能优化策略对比表 - 安全注意事项清单 格式Markdown适合放在项目 wiki 中。学到了什么整理模式库的过程本身就是最好的复习——你把 10 期的零散知识变成了一份可复用的参考文档。以后做新的 AI 应用时直接查模式库就能快速选择架构和组件。 动手练习练习1简单完成能力自检清单对照 12 项能力清单逐项评估标注 ✅/❌。❌ 的项目标注需要复习的期数。练习2中等写你的「AI前端开发模式库」根据本期的六种模式整理一份你自己的开发模式库文档。每个模式写适用场景、核心组件、关键技术、常见问题。保存为ai-patterns-library.md。练习3挑战组合两种模式实现一个新应用选两种模式组合如 RAG 语音或 Agent 图片生成实现一个原型设计组合架构实现核心组件测试验证功能 本期要点六种开发模式库基础对话 / RAG问答 / Agent交互 / 图片生成 / 语音交互 / 多模态交互——每种都有完整的架构、组件、技术栈模式选择决策树根据需求快速选择正确的架构模式性能优化三策略虚拟列表长消息 缓存相似问题 模型降级成本控制安全六维度API Key / 数据隐私 / 内容安全 / 成本控制 / Prompt注入 / 幻觉风险模式库是可复用资产以后做新 AI 应用时直接查模式库不需要从零开始设计 下期预告从下一期开始进入模块五——项目实战与就业第41期开始做你的第一个可展示项目AI 知识库产品。如果你没有苹果电脑需要上传ios到APPStore可以访问以下网站iPA上传工具 - IPA解析与AppStore提交