vault backup: 2026-06-12 15:25:47

课题一/AI 视觉对话助手/项目架构与技术栈.md

@@ -285,3 +285,4 @@ graph LR
 - [[语音交互]]
 - [[成本控制]]
 - [[用户故事]]
+- [[项目架构与技术栈/技术名词解释]]

课题一/AI 视觉对话助手/项目架构与技术栈/技术名词解释.md

@@ -0,0 +1,145 @@
+---
+tags: [AI, 前端, 后端, 技术栈, 入门, 概念解释]
+create time: 2026-06-12 15:00
+---
+
+# 技术名词解释
+
+## 概述
+
+对 [[项目架构与技术栈]] 中技术选型表里出现的所有关键名词，用初学者能理解的方式逐一解释。分为**前端**、**后端**、**AI 服务**三大板块，每个名词配一句话概括 + 展开说明。
+
+## 正文
+
+### 前端相关
+
+#### React 18 + TypeScript
+
+- **一句话**：用 JavaScript（加了类型约束的版本）来搭建网页界面的工具库。
+- **展开**：**React** 是 Facebook 开源的 UI 框架，核心思想是把页面拆成一个个「组件」，像搭积木一样拼装。**TypeScript** 是 JavaScript 的「增强版」，多了类型声明（告诉编辑器变量是数字还是字符串），能在写代码时就提前发现 bug。**18** 是版本号，带来了并发渲染等新特性。
+
+> [!question] 想一想
+> 如果没有类型系统，一个函数参数本来期望收到数字，却传了字符串，程序会怎样？TypeScript 就是在编译阶段帮你拦截这类问题。
+
+#### Vite
+
+- **一句话**：帮你把写好的代码「打包」成浏览器能运行的文件，并提供飞快的开发体验。
+- **展开**：开发时改一行代码，Vite 能在毫秒级刷新页面（叫**热更新 / HMR**）。构建发布时，它会压缩、优化代码，产出体积小的文件。相比老工具 Webpack，Vite 利用浏览器原生的 ES Module 能力，启动速度极快。
+
+#### WebSocket（原生 API）
+
+- **一句话**：让浏览器和服务器之间保持一条「持续在线」的双向通道。
+- **展开**：普通 HTTP 请求是「一问一答」——你发请求，服务器回一个响应，连接就断了。**WebSocket** 则像打电话：接通后双方可以随时互发消息，直到某一方挂断。这对实时对话、聊天、推送通知等场景非常关键。
+
+```mermaid
+graph LR
+    A["HTTP 模式"] -->|"请求1: 你好"| B["服务器"]
+    B -->|"响应1: 你好"| A
+    A -->|"请求2: 问题?"| B
+    B -->|"响应2: 答案"| A
+    C["WebSocket 模式"] -->|"连接建立"| D["服务器"]
+    C <-->|"持续双向通信"| D
+```
+
+#### ONNX Runtime Web
+
+- **一句话**：在浏览器里直接运行 AI 模型，不用把数据发到服务器。
+- **展开**：**ONNX** 是微软定义的通用模型格式，**Runtime** 就是运行引擎。它让你可以把训练好的轻量模型（比如判断"有没有人在说话"的 VAD 模型）直接放在浏览器里跑。好处是零延迟、不耗服务器资源。缺点是浏览器算力有限，只能跑小模型。
+
+#### VAD / WebRTC VAD
+
+- **一句话**：自动检测「人有没有在说话」的技术。
+- **展开**：**VAD** 全称 Voice Activity Detection（语音活动检测）。**WebRTC** 是 Google 开源的实时通信技术栈，里面内置了一套高效的 VAD 算法。在我们的项目里，前端用它来判断用户什么时候开始/停止说话，省去了用户手动按按钮录音的操作。
+
+#### MediaDevices API
+
+- **一句话**：浏览器提供的标准接口，用来访问摄像头和麦克风。
+- **展开**：调用 `navigator.mediaDevices.getUserMedia({ video: true, audio: true })` 就能让浏览器弹出授权提示，拿到摄像头画面和麦克风音频流。这是浏览器原生能力，不需要装插件。
+
+---
+
+### 后端相关
+
+#### Go（Golang）
+
+- **一句话**：Google 开发的编程语言，擅长高并发场景。
+- **展开**：Go 的杀手锏是 **goroutine**——一种极轻量的「协程」，一个程序可以轻松开几万个 goroutine 同时工作，而每个只占几 KB 内存。对比传统的线程（一个就占几 MB），在管理大量 WebSocket 长连接时优势巨大。
+
+> [!question] 想一想
+> 如果同时有 10000 个用户在线聊天，每人一个连接，用传统线程模型可能需要几 GB 内存；用 goroutine，几十 MB 就够了。这就是选 Go 的原因。
+
+#### gorilla/websocket
+
+- **一句话**：Go 语言里最流行的 WebSocket 库。
+- **展开**：Go 标准库没有内置 WebSocket 支持，`gorilla/websocket` 是社区维护的第三方包，API 简洁、文档完善、生产环境验证充分。它帮你处理了 WebSocket 协议的握手、帧解析等底层细节。
+
+#### Redis
+
+- **一句话**：一种超快的内存数据库，常用来做缓存和临时数据存储。
+- **展开**：Redis 是 **Key-Value 存储**（键值对），数据放在内存里所以读写极快（微秒级）。在本项目里用来存放用户的会话状态和对话上下文——比如用户聊到第几轮、历史消息等，保证多个后端实例能共享数据。
+
+```mermaid
+graph LR
+    GW1["Gateway-1"] -->|"写入会话状态"| REDIS["Redis"]
+    GW2["Gateway-2"] -->|"读取会话状态"| REDIS
+    REDIS -->|"TTL 过期自动清理"| CLEANUP["自动清理"]
+```
+
+#### Viper
+
+- **一句话**：Go 语言的配置管理工具，帮你读取各种格式的配置文件。
+- **展开**：项目运行时需要读取端口号、数据库地址、API Key 等配置。**Viper** 能读 JSON、YAML、TOML 等格式，还支持用环境变量覆盖配置——方便在开发、测试、生产环境用不同配置而不用改代码。
+
+#### Zap
+
+- **一句话**：高性能的日志库，用来记录程序运行时的信息。
+- **展开**：程序运行时需要记录「谁在什么时候做了什么、出了什么错」，这就是日志。**Zap** 是 Uber 开源的日志库，输出的是**结构化日志**（JSON 格式），方便后续用工具搜索和分析。性能远超标准库 `log`。
+
+---
+
+### AI 服务相关
+
+#### 多模态 LLM（GPT-4o / Claude Sonnet）
+
+- **一句话**：既能读文字又能看图片的大语言模型。
+- **展开**：**LLM** = Large Language Model（大语言模型），就是 ChatGPT 背后的那种 AI。**多模态**意味着它不只是处理文本，还能理解图像——你给它一张照片和一个问题，它能「看懂」照片再回答。GPT-4o 是 OpenAI 的，Claude Sonnet 是 Anthropic 的，都是主流选择。
+
+#### STT（语音转文字）/ Deepgram
+
+- **一句话**：把人说的话自动转成文字。
+- **展开**：**STT** = Speech-to-Text。**Deepgram** 是一家专注语音识别的公司，它的流式识别延迟可低至 500 毫秒以内——用户还在说话时就开始转录，说完时文字已经出来了。备选方案 **FunASR** 是阿里开源的，可以自己部署，适合对数据隐私有要求的场景。
+
+#### TTS（文字转语音）/ OpenAI TTS
+
+- **一句话**：把 AI 的文字回复自动读出来。
+- **展开**：**TTS** = Text-to-Speech。OpenAI TTS 生成的语音自然度很高，听起来接近真人。**Edge TTS** 是微软提供的免费方案，音质也不错，适合成本敏感场景。**支持流式**意味着不用等全部文字生成完才开始读，边生成边读，用户体验更流畅。
+
+#### GPT-4o-mini / Haiku（轻量分类模型）
+
+- **一句话**：又快又便宜的小模型，用来做「初步判断」。
+- **展开**：不是每个请求都需要用最强的模型。比如判断「这个问题简单还是复杂」，用小模型几毫秒就能搞定，省下大模型的调用费。**模型路由**就是这个逻辑：先用小模型分类，简单问题走小模型，复杂问题再升级到大模型。
+
+> [!tip] 成本思维
+> 在实际项目中，AI API 是按调用量计费的。用小模型做前置判断，能省 80% 以上的 API 费用。这也是为什么技术选型表里有「轻量分类」这一行。
+
+---
+
+### 横向对比速查
+
+| 名词 | 类别 | 一句话定义 |
+|------|------|-----------|
+| React | 前端框架 | 组件化搭建 UI |
+| TypeScript | 编程语言 | 带类型的 JS，提前防 bug |
+| Vite | 构建工具 | 快速打包和热更新 |
+| WebSocket | 通信协议 | 浏览器与服务器的双向通道 |
+| ONNX Runtime | 推理引擎 | 浏览器端跑 AI 模型 |
+| VAD | 语音技术 | 检测人有没有在说话 |
+| Go | 后端语言 | 高并发，轻量协程 |
+| Redis | 数据库 | 内存 KV 缓存，读写极快 |
+| LLM | AI 模型 | 大语言模型 |
+| STT | AI 能力 | 语音转文字 |
+| TTS | AI 能力 | 文字转语音 |
+
+## 关联笔记
+
+- [[项目架构与技术栈]]