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

9.0 KiB
Raw Blame History

tags, create time
tags create time
AI
前端
后端
技术栈
入门
概念解释
2026-06-12 15:00

技术名词解释

概述

项目架构与技术栈 中技术选型表里出现的所有关键名词,用初学者能理解的方式逐一解释。分为前端后端AI 服务三大板块,每个名词配一句话概括 + 展开说明。

正文

前端相关

React 18 + TypeScript

  • 一句话:用 JavaScript加了类型约束的版本来搭建网页界面的工具库。
  • 展开React 是 Facebook 开源的 UI 框架,核心思想是把页面拆成一个个「组件」,像搭积木一样拼装。TypeScript 是 JavaScript 的「增强版」,多了类型声明(告诉编辑器变量是数字还是字符串),能在写代码时就提前发现 bug。18 是版本号,带来了并发渲染等新特性。

[!question] 想一想 如果没有类型系统一个函数参数本来期望收到数字却传了字符串程序会怎样TypeScript 就是在编译阶段帮你拦截这类问题。

Vite

  • 一句话:帮你把写好的代码「打包」成浏览器能运行的文件,并提供飞快的开发体验。
  • 展开开发时改一行代码Vite 能在毫秒级刷新页面(叫热更新 / HMR)。构建发布时,它会压缩、优化代码,产出体积小的文件。相比老工具 WebpackVite 利用浏览器原生的 ES Module 能力,启动速度极快。

WebSocket原生 API

  • 一句话:让浏览器和服务器之间保持一条「持续在线」的双向通道。
  • 展开:普通 HTTP 请求是「一问一答」——你发请求,服务器回一个响应,连接就断了。WebSocket 则像打电话:接通后双方可以随时互发消息,直到某一方挂断。这对实时对话、聊天、推送通知等场景非常关键。
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 }) 就能让浏览器弹出授权提示,拿到摄像头画面和麦克风音频流。这是浏览器原生能力,不需要装插件。

后端相关

GoGolang

  • 一句话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 存储(键值对),数据放在内存里所以读写极快(微秒级)。在本项目里用来存放用户的会话状态和对话上下文——比如用户聊到第几轮、历史消息等,保证多个后端实例能共享数据。
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 服务相关

多模态 LLMGPT-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 能力 文字转语音

关联笔记