--- 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["自动清理"] ``` #### PostgreSQL - **一句话**：功能强大的开源关系型数据库，适合持久化存储结构化数据。 - **展开**：Redis 存的数据在内存里，重启就丢了。**PostgreSQL**（简称 PG）则把数据写到磁盘上，永久保存。它用**SQL**语言查询，支持复杂的联表查询和事务（保证数据一致性）。在本项目里，上线后用来存对话历史、用量统计、用户偏好等需要「永久保留」的数据。MVP 阶段可以先不用，等产品验证后再引入。 > [!question] 想一想 > Redis 超快但重启丢数据，PostgreSQL 慢一点但数据不丢。为什么不二选一？因为它们擅长的事情不同——Redis 做「热数据缓存」（频繁读写的会话状态），PG 做「冷数据持久化」（需要长期保存的记录）。两者配合才是生产级架构。 #### 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 缓存，读写极快 | | PostgreSQL | 数据库 | 关系型数据库，数据持久化 | | LLM | AI 模型 | 大语言模型 | | STT | AI 能力 | 语音转文字 | | TTS | AI 能力 | 文字转语音 | ## 关联笔记 - [[项目架构与技术栈]]