进阶方向：多模态、本地部署与成本优化

恭喜你到达这里

走完前 9 篇，你已经具备：

• 理解 LLM 的本质和能力边界
• 调用各家 API、处理流式输出
• 会写 Prompt、让输出结构化
• 理解 Embedding + 向量检索
• 搭起 RAG 系统
• 用 Function Calling 让 AI 调 API
• 懂 Agent 循环、MCP 协议
• 做过完整的 AI 聊天产品

这份技能组合已经能覆盖 80% 的 AI 应用开发场景。最后这一篇我们聊聊剩下的 20%——你接下来可以深入的方向。

方向一：多模态

LLM 已经不只是"文本"模型了。

图像输入（Vision）

让 AI 看图片，几乎所有主流模型都支持：

await client.chat.completions.create({
 model: 'gpt-4o',
 messages: [
 {
 role: 'user',
 content: [
 { type: 'text', text: '这张设计稿有什么可以改进的？' },
 { type: 'image_url', image_url: { url: 'https://.../design.png' } },
 ],
 },
 ],
})

典型应用： -设计稿转代码（v0.dev、Anima） -UI 审查/无障碍检查 -OCR + 结构化提取（发票、表单） -截图理解（描述 bug、错误定位）

图像生成

-DALL·E 3（OpenAI）：API 简单 -Stable Diffusion 3：开源、可本地 -Flux：2024 年最火的开源模型 -Google Imagen 3/Ideogram：文字渲染强 -Midjourney：质量最高但无官方 API

前端经常用：Replicate / fal.ai 托管 API + 流式预览 UI。

音频

-语音识别 (ASR)：OpenAI Whisper（开源，可本地跑）、Deepgram -语音合成 (TTS)：OpenAI TTS、ElevenLabs（克隆声音）、Microsoft Edge TTS（免费） -实时语音对话：OpenAI Realtime API、livekit Agents

做法示例：ChatGPT 语音模式（基于 WebRTC）。

视频

2024-2025 的爆点： -Sora、可灵、Runway Gen-3— 文生视频 -Google Veo、字节 PixelDance— 真·好莱坞级别

当前阶段成本和时间还比较高，但前端可以提前准备：生成任务队列、进度展示、视频处理 UI。

方向二：本地部署

为什么要本地：隐私、离线、无限量、零成本（除了硬件和电）。

推理引擎

上手推荐：

# Mac/Linux 装 Ollama
curl -fsSL https://ollama.com/install.sh | sh

# 下模型
ollama pull llama3.2
ollama pull qwen2.5

# 它默认在 http://localhost:11434 暴露 OpenAI 兼容 API

然后你前 9 篇所有代码把 baseURL 改成 Ollama，一行都不用动。

值得一跑的本地模型（2026）

-Llama 3.3 70B/Llama 4（Meta） -Qwen 2.5 / 3系列（阿里，中文极好） -DeepSeek-V3（全能，参数 600B+） -Mistral Small/Large -Phi-4（微软小模型） -Gemma 3（Google）

30B 以下基本 Mac M2 Pro（32G）就能跑。70B 需要 M3 Max / M4 Max。

浏览器里的本地 AI

浏览器厂商都在内置： -Chrome Built-in AI（Gemini Nano）：Chrome 127+ 支持 window.ai -Web LLM：用 WebGPU 在浏览器加载 Llama、Phi（mlc.ai/web-llm） -Transformers.js：Hugging Face 官方出品，浏览器跑小模型

前端独有的优势：边缘 AI，用户数据永不出浏览器。

方向三：成本优化

当你的 AI 应用开始有真实用户，账单会让你清醒。

1. 选对模型

按任务复杂度分级：

function pickModel(task) {
 if (task.type === 'classify') return 'gpt-4o-mini' // $0.15/M
 if (task.type === 'summarize') return 'gpt-4o-mini'
 if (task.type === 'reasoning') return 'gpt-4.1' // $2/M
 if (task.type === 'code') return 'claude-sonnet-4'
}

-mini / -haiku / Flash 类的小模型便宜 10 倍以上，够用就别用旗舰。

2. Prompt Caching

OpenAI、Anthropic、DeepSeek 都支持 Prompt 缓存。长 System Prompt、RAG 资料、少样本示例放在开头，缓存命中后这部分只收 10% 的费用。

// Anthropic
{
 role: 'system',
 content: [
 { type: 'text', text: '很长的指令...', cache_control: { type: 'ephemeral' } },
 ],
}

3. Batch API

非实时任务（离线生成、批量标注）走 Batch 接口，5 折。

4. 输出截断

{
 max_tokens: 500, // 别让它啰嗦
 stop: ['\n\n'],
}

5. 模型蒸馏 / 自部署小模型

高频简单任务（分类、关键词提取）：

• 用 GPT-4o 产出几千条高质量数据
• 微调一个 Qwen 0.5B 或 Phi-3
• 自己跑，成本降到 1%

6. 监控 + 预算墙

• 每个用户每天限额
• 关键指标：每次调用的 Token 数、每个用户每日消费
• 工具：Helicone / Langfuse 一行代码接入

方向四：AI + 前端专属机会

前端开发者在 AI 浪潮里有独特优势：

1. AI 产品的 UI/UX 模型再强，用户看到的还是界面。聊天流式渲染、工具调用可视化、思考过程动画、多模态结果展示……这些都是前端的主场。参考 v0.dev、Perplexity、Claude Artifacts。

2. 浏览器/设备侧 AI 前端天然靠近用户，是边缘 AI 的最佳舞台。WebGPU、WASM、Worker、IndexedDB 的组合拳。

3. 开发者工具 Cursor / Windsurf / Copilot / v0 都是"前端型"产品——本质是前端 + Agent。你熟悉的 Monaco Editor、Tree-sitter、CodeMirror 都是必备武器。

4. AI 原生组件库 React Flow、shadcn/ui、Assistant UI……专为 AI 应用设计的组件生态正在爆发。

5. 低代码 + AI 用自然语言生成 UI、表单、流程。前端是最容易切入的方向之一。

继续学习的路径

必读

• Anthropic: Building Effective Agents
• Sebastian Raschka: Building a Large Language Model from Scratch
• llm-course — 从零到精通的开源课程
• 12-Factor Agents — Agent 工程实践原则

关注的人

• Andrej Karpathy（YouTube，前特斯拉/OpenAI）
• Simon Willison（simonwillison.net，每天一篇 LLM 文章）
• Jeremy Howard（fast.ai 创始人）
• Jerry Liu（LlamaIndex 作者）

追踪动态

• Hugging Face — 模型发布地
• Papers with Code
• The Batch — Andrew Ng 的周报
• Latent Space 播客
• X 上 AI 圈：@karpathy @simonw @swyx @jerryjliu0

最后想说

AI 不是"会取代开发者"，它只是一个前所未有的放大器。一个会用 AI 的前端开发者，能做到三年前十个前端才能做的事。

这个系列是起点，不是终点。真正的学习发生在你尝试解决自己真实问题的时候。

去做一个 AI 产品吧，哪怕只是给自己用的小工具。完工的第一天，你对 AI 的理解就比读 100 篇文章都深。

参考资料汇总

前 9 篇里的链接已经很多了，这里不再重复。强烈建议收藏：

• Awesome LLM Apps
• Awesome ChatGPT Prompts
• LLM Leaderboard — 用户盲测排行
• Artificial Analysis — 模型性能/价格对比