# 基于 React + 华为云 DeepSeek-R1 实现的 AI 对话网站
想写这个项目是因为 DeepSeek-R1 的深度思考能力真的是市面上鲜有敌手，但是官网的经常服务器繁忙，其他地方的感觉不够” 满血 “，就想着自己搭建一个，供自己有事没事问问东西，便有了这个项目、网站以及这篇文章。
# 一、需求分析
首先我们需要搭建一个 AI 对话网站，我们得明确我们的需求，然后我们需要什么，能做到什么，做不到的地方要怎么变通去实现，最后达到我们想要的效果。
# 1、技术栈确认
# 1.1 前端
经过 25 年年初对招聘市场上各公司对于前端岗位的岗位要求，我发现 React 已经是作为前端一个不可或缺的框架和技术栈了。但是公司并没有什么 React 项目，虽然自己会 React 但苦于不经常用，也忘得多，所以决定前端部分采用 React 作为项目框架，使用 Vite 构建项目，使用 Ant Design 作为 UI 组件库。
# 1.2 后端
作为一个 AI 对话网站，后端的内容无外乎 AI 接口和用户接口，但考虑到只是为了方便使用，便只需要 AI 接口完成核心的问答聊天功能就行，不限制网站用户的使用权限。经过多方调研，最终决定使用华为云的 ModelArts Studio 大模型服务平台。该平台提供了六个不同版本的 DeepSeek 相关模型每个各 200 万 Tokens 额度，非常够用了。
# 2、需求确认
前端需要两个页面，一个是网站进来的默认页面即欢迎页，另一个就是对话页面，欢迎页需要简单清晰明了，让用户知道这个网站可以提供什么，他可以做什么，对话页面的话万变不离其宗，依旧是聊天对话样式的。总体要求就是足够简洁，在功能性完整的同时，保留足够舒适的交互效果。网站最好给对话提供一些预设，方便用户使用。
# 二、开发
其实需求没啥好确认的，就是让开发者明白，事务的主次、轻缓紧急，方便提升开发效率，这也是我上班两年以来学会的最重要的东西，他真的能帮助你在工作事情的安排上以及工作效率上提升很多，让你做事情有条不紊，正所谓磨刀不误砍柴工！
# 1、项目搭建
项目主要开发工作在前端，接口只是用的华为云平台现成的接口。
我采用 Vite+React+TS+Axios+Ant Design，能看到这篇文章的人应该也不是小白，怎么搭建项目应该不用我教，不过我个人倒是开发了一个自用前端项目搭建脚手架。Anixuil Cli Npm 主页
# 运行以下命令进行脚手架的安装 | |
npm i anixuil-cli -g | |
# 安装之后 | |
anicli -V # 查看脚手架版本 | |
anicli -h # 查看脚手架命令帮助文档 | |
anicli ls # 查看脚手架的模板项目列表以及对应作者 | |
# 脚手架新建项目 | |
anicli create helloworld # 创建一个名为 helloworld 的项目 | |
# 然后会让你选用哪个模板项目创建，选中之后便会拉取模板代码在命令行指定的目录创建指定项目名字的项目 |
该工具是本人根据自己平时项目的需求，上传了 Vue 和 React 各两个模板项目，通过这个脚手架工具可以进行安装，这个对话项目也是基于我这个脚手架新建的，毕竟每次从头搭真的很麻烦。
# 2、功能开发
这个项目是我一个周五晚上七点下班回到家，在同事群里一时兴起想写的项目，结果也是八点半开始写，十二点准时上线
这是网站地址 Ani Chat - 一个基于 DeepSeek 的智能助手
虽然功能简单，但是开发速度是不是还是有点快的呢？这得益于我年前把编辑器从 vscode 转到了 cursor，不得不说 cursor 的多文件是真的好用，且那个引用文档功能更是叼的一匹，妈妈再也不用担心我看不懂文档了，完全可以让 cursor 给我总结文档，提炼出文档的精髓信息，再也不怕文档的写的跟狗屎一样看不懂了！
对话的页面结构和功能大部分都是参照我的另一个开源项目 Anixuil/WebStartUI: 一款应用于前端本地开发阶段的项目管理工具 v1.0.2 版本上线的 GPT 功能开发的。
该项目是一个桌面应用程序，用于方便前端开发人员更加便捷的管理自己电脑上开发环境的前端项目，比如什么设定启动端口，修改配置文件，启停项目，查看项目运行日志等，之后还将陆续推出前端开发环境一键安装，node 版本切换等功能，方便前端新人们更快上手项目的开发！
不过这个项目是用 electrom+vite+vue+ts 实现的，跟我们现在这个项目技术栈不匹配，不过不用怕，我们有 cursor，我们把 WebStartUI 的对话界面文件放入 Ani Chat 项目当中，然后在 cursor 的对话中引入，并告诉 cursor 说我要参照这个文件写一个 react 版本的，并把 elementplus 组件都替换成 ant design 组件，很快他就给我们替换好了，如果没替换好有问题我只能说，没有有问题的工具，只有有问题的使用工具的人，AI 的使用完全看你怎么问，怎么要求，如果连需求都描述不明白，个人建议还是自己手动开发吧，基础还没牢固。
只要描述对了需求，很快我们的 Ani Chat 项目就搭的差不多了。
PS: 本人并不是从头到尾都是 AI 帮助，是我自己先 react 把逻辑写通了，接口也调通了，才让 cursor 参照 WebStartUI 项目的网页文件来优化页面样式和功能的，不要做让 AI 从头到尾给你写的春秋大梦了，真给你写了，你还干前端干什么，AI 不都能干了，你只能被淘汰了哥，所以还是要有核心技术，要学点有壁垒的东西。当然我说这些很难听不是嘲讽新人，吹嘘自己，有一说一还不如说是嘲讽自己，然后也给新人提个醒，别轻易满足现状！
# 三、项目总结
其实整个项目确实像我立下挑战的时候说的，很简单
并没有什么可说的，写这个项目也只是熟悉一下 react 的基本语法和一些 api 和依赖的使用，并搭建一个自己玩玩的项目而已，没有什么技术难点，只是提供一个这种 AI 对话网站搭建落地的思路供有想法但是还在观望的朋友一个立即行动的底气。
文章中提到的平台、工具、网站我都会在这里一一列出。
