你有没有想过，让大模型直接在你的浏览器里跑起来，不用调用远程 API，不用花钱，数据也不出本地？这篇笔记带你从零开始，搭建一个端侧 AI 项目，顺便把 React + TS + Tailwind 这套现代前端技术栈彻底搞懂。
一、为什么要做端侧模型？
1.1 远程 API 的痛点
平时我们调用 OpenAI、DeepSeek 的 API，本质上是把请求发到远程服务器，模型在云端推理，再把结果返回给我们。这种方式有两个绕不开的问题：
- 贵：每一次调用都要花钱，token 用得越多账单越厚
- 不安全：你的 context（上下文）会随着请求一起发到远端，敏感数据有泄露风险
1.2 端侧模型的优势
端侧模型，顾名思义就是把模型部署在用户端，推理过程完全在本地完成。
- ollama：本地开源模型部署方案，在用户端跑模型
- 手机端、汽车端：Agent 场景下，开源小参数模型就能胜任大部分任务
- 浏览器端 ：开源模型随时下载、随时使用，借助 WebGPU 实现 GPU 加速
一句话总结：端侧模型 = 省钱 + 安全 + 离线可用，这也是这个项目要解决的核心问题。
二、技术选型：为什么是 React + TS？
AI 时代的大型项目，前端首选技术栈非 React + TypeScript 莫属。
| 维度 | React | Vue |
|---|---|---|
| 入门难度 | 较高 | 较低 |
| 大型项目适配 | ✅ 非常适合 | 也适合 |
| AI 训练代码生态 | 偏多 | 较少 |
React 虽然比 Vue 难入门，但 React + TS 更适合大型项目，而且 AI 训练相关代码里 React 的占比更高，生态优势明显。
三、项目初始化：React + TS + ESLint
使用 Vite 创建项目，自带 TypeScript 和 ESLint 配置。
ESLint 是大公司必备的代码约束工具，它能统一团队的代码风格------比如用单引号还是双引号、语句末尾要不要加分号，这些细节全部交给 ESLint 自动检查和修复。
bash
# 项目依赖概览（package.json）
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0",
"tailwindcss": "^4.3.3",
"@tailwindcss/vite": "^4.3.3"
}四、Tailwind CSS：告别原生 CSS
4.1 一句话理解 Tailwind
有了 Tailwind，几乎不用再写原生 CSS。它是一个原子类 CSS 框架，提供一堆语义化的类名，直接在 HTML 上写类名就能完成样式。
4.2 运行原理
- Tailwind 不是原生 CSS，而是一套原子类名体系
- 通过 Vite 插件集成，构建时会把你用到的类名对应的样式提取出来，注入到代码中
- 原子类名都是英文单词，简单、语义化好，特别适合自然语义编程
以前写 CSS 要写「选择器 + rules（key:value）」，太底层、太低效；Tailwind 直接写类名就行，已经成为 Vibe UI 的基本构成。
4.3 项目集成方式
在 index.css 中引入 Tailwind：
css
@import "tailwindcss";在 vite.config.ts 中注册插件：
ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
react(),
tailwindcss()
],
})五、React 组件：搭积木式开发
5.1 组件化思想
搭积木的方式搭建页面------组件就是一组 HTML、CSS、JS 组合在一起的功能单元。
- Vue ：通过
template、script、style三明治的方式写在一个文件中，所以好入门 - React ：用 TSX 封装一个组件（函数），函数就是组件
只要一个函数返回 HTML，它就是一个组件。函数 return 之前的部分是 JS 逻辑，CSS 则通过类名引入。
5.2 实际代码示例
tsx
import { useState } from 'react'
function App() {
// count 是数据状态，setCount 用来修改它
// useState 实现响应式，相当于 Vue 里的 ref
const [count, setCount] = useState(0);
return (
// 返回 HTML ------ 这就是 JSX
<div className="flex justify-center">
Hello World! {count}
<h1 className="text-3xl font-bold underline">你好世界</h1>
</div>
)
}
export default App六、深入理解：className 与 JSX
6.1 为什么是 className 而不是 class？
在 HTML 里我们用 class 给元素加样式，但在 React 的 JSX 里必须写成 className。
原因很简单：class 是 JavaScript 里面向对象（OOP）的关键字，用来声明类。如果在 JSX 里写 class，解析器会误以为你要声明一个 JS 类。className 就没有这个歧义。
6.2 JSX 是什么？
JSX 是 React 的专用语法（模板），全称 JavaScript with XML。
它能让你在 JS 代码里直接写 HTML 标签，编译后会转为原生 DOM 操作。这是 React 最骄傲的特性之一，非常方便地表达 UI 界面。
tsx
// JSX 里可以直接写 HTML 标签
<div>
<h1>标题</h1>
<p>段落</p>
</div>七、总结
这个项目覆盖了现代前端 + 端侧 AI 的核心技能点：
- 端侧模型：用 WebGPU 在浏览器端跑开源大模型，解决远程 API 贵和不安全的问题
- React + TS：大型项目首选技术栈，组件化 + 类型安全
- ESLint：统一代码风格，工程化必备
- Tailwind CSS：原子类 CSS，告别低效的选择器写法
- JSX + className：React 的核心语法细节
如果你也想做一个能写进简历的「超然项目」，不妨跟着这套技术栈动手实践一遍。端侧 AI 是未来的趋势，提前布局，才能在 AI 时代抢得先机。
觉得有帮助的话，点赞收藏关注一下，后续会持续更新 WebGPU 模型推理的实战内容