AIGC时代 | 从零到一，打造你的专属AI Chat应用！

---

文章来源：IT阅读排行榜

---

本文摘编自《大模型项目实战：多领域智能应用开发》，高强文 著，机械工业出版社出版，经出版方授权发布，转载请标明文章来源。

---

目标

基于大语言模型的 Chat 应用，是一种利用自然语言处理技术来进行对话交互的智能应用。

大语言模型通过大量数据的学习和训练，能够理解自然语言表达的语义，具备智能对话的能力。当用户向 Chat 应用提出问题时，Chat 应用就会利用其学习到的知识和自然语言处理技术来理解用户的意图，然后推理生成相应的答案。

我们的目标是使用 React.js 开发一个通用的 Chat 应 用程序，提供对话 Web 界面，调用 ChatGLM3 项目的 OpenAI 兼容接口，编译并部署到 Nginx。

功能概要

（1）Chat 交互界面

该应用使用 Chat 对话模式的界面，接收用户的输入内容，并将其显示到聊天记录中。大语言模型返回的结果会回写到聊天记录中。用户与大模型交流的文本用左右位置或图标进行区分。

（2）流式接口

这是指 OpenAI 兼容的流式调用方式，最早由 ChatGPT 使用，目前已成为大语言模型 Chat 应用事实上的接口标准。流式访问是一种服务端逐步推送数据、客户端逐步接收结果并显示的方法，适用于处理大量数据或长时间运行的任务。

（3）多轮会话

多轮对话是指模型把当前的问题及上文的问答情况整合到一起，形成关于问题的上下文描述。由于在多轮会话中输入的 token 较长，问题的上下文描述得比较清楚，相关语境也构建得相对完整，所以相比于单轮对话，多轮会话生成的答案更为合理。

其缺点在于随着对话轮数的增加，输入的 token 越来越长，会影响大语言模型的运算效率。所以在具体实现 Chat 应用时，要对历史对话记录进行一定的限制，以防止输入 token 过长导致模型的生成性能下降。

（4）打字效果

ChatGPT 采用了模拟打字的视觉效果实现行文本的逐步生成，既保证用户能在第一时间获取生成的部分文本信息，不会觉得等待时间很长，也减少了大模型一次性生成长文本导致算力过载的情况。因此，这次所开发的应用也采用了此技术来显示文本的生成过程。

打字效果的实现基于 SSE 服务端推送技术。SSE 是一种 HTML5 技术，允许服务器向客户端推送数据，而不需要客户端主动请求。它能在服务端有新消息时，将消息实时推送到前 端，从而实现动态打字的聊天效果。

系统架构

Chat 应用是一个 B/S 结构的应用。服务端由大语言模型的 OpenAI API 服务提供，客户端使用 React.js 编写，部署于 Nginx。客户端通过浏览器访问页面，在浏览器中执行 JavaScript 代码，以将用户的输入发送至服务端，渲染页面显示服务端返回的结果。其架构图见图 1。

$$图1Chat应用架构图$$

（1）大模型服务层

模型推理服务由大语言模型的代码完成，如在 ChatGLM3-6B 模型的 modeling_chatglm.py 文件中，stream_chat 函数实现了流式推理。模型 API 服务则由 ChatGLM3 项目源码中的openai_api_demo/api_server.py 提供。

（2）应用服务层

在开发环境下由 npm 模拟一个本地应用服务，承担页面下载和请求代理的职责。而在正式运行环境中，这两个职责是由 Nginx 的页面部署服务和代理转发功能来完成的。Nginx 在配置上还要支持 SSE 推流模式。

（3）客户端浏览器层

通过运行在浏览器中的 HTML5 和 JavaScript 代码来与应用服务层交互。JavaScript 发出的 HTTP/HTTPS 请求经应用服务层转发到模型 API 服务。

运行原理

1. 浏览器负责展现页面，调用 OpenAI 兼容接口来获取生成内容。
2. Nginx 提供页面内容以及代理调用 OpenAI 兼容接口。
3. 页面请求和接口调用在一个域名或IP:端口内，这样可以避免跨域问题。跨域问题是指在 Web 开发中，当一个网站的客户端（前端）需要调用服务端（后端）的 API 时，请求的 URL 与页面的 URL 来自不同的域名，导致安全风险，而被浏览器拦截。
4. openai_api.py 用于装载模型，提供 API 服务。

开发

（1）Node.js 安装

React.js 程序的开发调试要在 Node.js 环境下进行。从 https://nodejs.org/ 中下载并安装 Node.js，然后在命令行运行node -v命令来测试它是否安装成功。

（2）chat-app 新建

1）新建应用新建一个名为 chat-app 的 React.js 应用，命令如下。

npm install -g create-react-app
create-react-app chat-app
cd chat-app

2）安装组件chat-app 用到两个第三方组件，一个是作为 Chat 界面的 ChatUI 框架，另一个是调用模型 API 服务的 Node.js 组件—openai-node。

npm i --save @chatui/core
npm i --save openai

源代码

实现 Chat 页面和业务逻辑的代码在 src/app.js 中。它只有 61 行代码，下面完整展示出来。

import './App.css';
import React from 'react';
import '@chatui/core/es/styles/index.less';
import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/dist/index.css';
import OpenAI from 'openai';
const openai = new OpenAI({apiKey: 'EMPTY', dangerouslyAllowBrowser: true,baseURL: "http://server-llm-dev:8000/v1"
});
var message_history = [];
function App() {const { messages, appendMsg, setTyping, updateMsg } = useMessages([]);async function chat_stream(prompt, _msgId) {message_history.push({ role: 'user', content: prompt });const stream = openai.beta.chat.completions.stream({model: 'ChatGLM3-6B',messages: message_history,stream: true,});var snapshot = "";for await (const chunk of stream) {snapshot = snapshot + chunk.choices[0]?.delta?.content || '';updateMsg(_msgId, {type: "text",content: { text: snapshot.trim() }});}message_history.push({ "role": "assistant", "content": snapshot });}function handleSend(type, val) {if (type === 'text' && val.trim()) {appendMsg({type: 'text',content: { text: val },position: 'right',});const msgID = new Date().getTime();setTyping(true);appendMsg({_id: msgID,type: 'text',content: { text: '' },});chat_stream(val, msgID);}
}
function renderMessageContent(msg) {const { content } = msg;return <Bubble content={content.text} />;
}
return (
<Chatnavbar={{ title: 'chat-app' }}messages={messages}renderMessageContent={renderMessageContent}onSend={handleSend}/>);
}
export default App;

测试

（1）启动大模型 API 服务

安装 ChatGLM3-6B 模型。API 服务则由 ChatGLM3 代码库的 openai_api_demo/api_server.py 提供。在这个文件中，/v1/embeddings 接口依赖一个较小文本向量模型 BAAI/bge-large-zh-v1.5。虽然本次开发应用程序中不会用到它，但为了保证程序能正常运行，建议先下载这个模型。

cd ChatGLM3
conda activate ChatGLM3
wget https://aliendao.cn/model_download.py
python model_download.py --e --repo_id BAAI/bge-large-zh-v1.5 \
--token YPY8KHDQ2NAHQ2SG

设定模型及文本向量模型文件所在位置，启动 API 服务，监听 8000 端口。

MODEL_PATH=./dataroot/models/THUDM/chatglm3-6b \
EMBEDDING_PATH=./dataroot/models/BAAI/bge-large-zh-v1.5 \
python openai_api_demo/api_server.py

（2）测试 chat-app

客户端程序目录下运行npm start命令，以启动客户端的开发环境服务。在浏览器中打开http://localhost:3000，运行结果如图 2 所示。

$$图2chat-app运行$$

运行发现，在 chat-app 应用中，用户可以进行流式人机对话。该应用同时支持多轮对话，也实现了打字的视觉效果。

也就是说，该应用达到了原先设定的目标。

（3）界面美化

chat-app 是一个通用的 Chat 应用客户端，通过改变程序中的apiKey和baseURL参数，可以连接任意一个兼容 OpenAI 接口的大语言模型推理服务，当然包括在正确设置apiKey的情况下连接 OpenAI 的服务。

此时，chat-app 的界面还需要进一步美化。比如，将输入框从一行变为多行以便于输入。

需要在 app.js 文件的同级目录下建一个 chatui-theme.css 文件，内容如下。

.ChatFooter .Composer-input {background: white;max-height: 160px;border: 1px solid darkgray;min-height: 80px;height: auto;
}

在 app.js 文件中的第 6 行代码import OpenAI from ’openai’;后增加一行 命令，如下所示。

import './chatui-theme.css';

重新用npm start命令运行程序，就可以看到输入框变成多行了。

应用发布

在程序开发调试过程中，应用依赖于 Node.js，并以“ npm start”的方式运行。

对此，可以通过编译过程，将 React.js 程序编译成脱离 Node.js 的 HTML5 和 JavaScript 文件，部署到 Nginx 等应用服务器中运行。

（1）编译

运行以下命令编译源代码，将编译结果存放在 build 目录下。

npm run build

（2）发布

将 build 目录下的所有文件复制到 Nginx 的 html 目录下即可完成部署。

如果是 Windows操作系统，则 html 在 Nginx 的目录下；如果是 Linux 操作系统，其目录则可能是/usr/local/share/nginx/html 或 /usr/local/nginx/html。

（3）运行

首次运行 Nginx 时，在 Windows 上直接运行 nginx.exe，在 Linux 上则要运行sudo nginx命令。

如果 Nginx 已运行，那么配置文件会发生改变，需要重启。可以执行以下命令。

sudo nginx -s reload 

对于该命令，在 Windows 或 Linux 上的形式几乎是一样的，区别在于因为涉及权限问题，对于 Linux 系统，需要在命令前加sudo。

（4）应用升级

借助浏览器的缓存机制可以减少页面、JavaScript 代码的下载量。因为它会对相同请求 URL 的 HTML5 页面、JavaScript 代码进行缓存。然而，每次执行npm build命令产生的文件名是固定的，这样即使代码有调整，且 Nginx 的 html 目录下的文件已更新，但由于 URL 未发生变化，浏览器仍会从缓存中加载旧版本。

为了解决这个问题，可修改 package.json 中的 version参数值，提高版本号，以编译出不同的文件名。这样浏览器会由于 URL发生变化而忽略缓存，加载文件的最新版本。

（5）SSE 配置

启动 Nginx 服务后，就可以使用诸如http://127.0.0.1这样不带端口的 URL 访问页面，但是可能会存在跨域问题。因为页面对应 Nginx 所在计算机的 80 端口，JavaScript 调用的是 API 服务器的 8000 端口，两者的 IP 和端口是不一样的。

如果 API 服务端不处理跨域问题的话，chat-app 调 API 服务就会报跨域错误。解决的方法是在 Nginx 的 80 端口上配置一个 API 服务的路径代理。因为要支持 SSE，这个代理配置要与一般的路径代理有一定的区别。

举例来说，在 baseURL 为http://server-llm-dev:8000/v1的情况下，在 Nginx 的 conf/nginx.conf 中的 server 模块下增加一个location，如下所示。

location /v1 {proxy_http_version 1.1;proxy_set_header Connection "";proxy_set_header X-Real-IP $remote_addr;proxy_set_header Host $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# SSE 连接时的超时时间proxy_read_timeout 86400s;# 取消缓冲proxy_buffering off;# 关闭代理缓存proxy_cache off;# 禁用分块传输编码chunked_transfer_encoding off;# 反向代理到 SSE 应用的地址和端口proxy_pass http://server-llm-dev:8000/v1;
}

重启 Nginx，将 app.js 中的 baseURL 由http://server-llm-dev:8000/v1更改为http://127.0.0.1/ v1。

重新编译部署后，即可发现跨域问题得以解决。

文章来源：IT阅读排行榜

---

本文摘编自《大模型项目实战：多领域智能应用开发》，高强文 著，机械工业出版社出版，经出版方授权发布，转载请标明文章来源。

$$▼延伸阅读$$

$$《大模型项目实战：多领域智能应用开发》$$

$$高强文著$$

$$从模型理解到高级应用开发真正解决实操问题$$

$$10大场景案例覆盖主流开发需求$$

获取方式：https://item.jd.com/14810472.html

内容简介：

本书系统地讲解了大语言模型的实战应用过程，涵盖基础知识、常见操作和应用开发3个方面，帮助大语言模型的使用者、应用开发者循序渐进地掌握大模型的原理、操作以及多个场景下的应用开发技能。

目录

前　言基础篇第1章　大语言模型的基础知识  31.1　大语言模型概述  41.1.1　基本情况  41.1.2　发展历史  41.1.3　发展现状  61.1.4　发展趋势  71.2　基本原理  71.2.1　Transformer架构  81.2.2　编码器与解码器  81.2.3　自注意力机制  91.3　应用开发技术  111.3.1　Python  111.3.2　React.js  111.4　训练方法  121.4.1　FFT  121.4.2　RLHF  131.4.3　P-Tuning  131.4.4　LoRA  131.5　常见现象  131.5.1　幻觉  141.5.2　灾难性遗忘  141.5.3　涌现  141.5.4　价值对齐  15第2章　大语言模型应用架构  162.1　整体架构  162.2　基础设施  172.2.1　硬件部分  172.2.2　操作系统  182.3　基础软件  182.3.1　CUDA  182.3.2　PyTorch  182.3.3　Anaconda  192.3.4　Nginx  192.4　应用软件  202.4.1　大语言模型文件  202.4.2　Transformers库  202.4.3　服务程序  202.4.4　API  212.4.5　客户端程序  21第3章　大语言模型应用的工作模式  223.1　硬件部署  223.2　应用软件部署  233.3　运行模式  243.3.1　模型API服务的工作模式  243.3.2　模型API服务的运行过程  253.3.3　前后端交互方法  263.3.4　前端实现  27操作篇第4章　应用环境搭建  314.1　基础设施  314.1.1　服务器要求  314.1.2　操作系统准备  314.1.3　推理卡安装  324.2　基础软件安装  324.2.1　Linux  324.2.2　Windows  404.3　其他软件安装  414.3.1　Nginx  414.3.2　Git  42第5章　大语言模型安装  435.1　ChatGLM安装  435.1.1　ChatGLM3模型介绍  435.1.2　ChatGLM3-6B安装  445.1.3　编程验证  455.2　Qwen-VL安装  475.2.1　Qwen模型介绍  475.2.2　Qwen-VL-Chat-Int4安装  475.2.3　编程验证  495.3　LLaMA2安装  505.3.1　LLaMA2模型介绍  505.3.2　Llama-2-7b-chat安装  515.3.3　运行验证  515.4　Gemma安装  545.4.1　Gemma模型介绍  545.4.2　Gemma-2B安装  555.4.3　编程验证  555.5　Whisper安装  575.5.1　Whisper-large-v3介绍  575.5.2　Whisper-large-v3安装  575.5.3　编程验证  58第6章　大语言模型微调  606.1　ChatGLM微调  606.1.1　微调方法介绍  616.1.2　微调环境准备  616.1.3　语料准备  626.1.4　模型下载  656.1.5　微调过程  656.1.6　微调模型测试  676.2　LLaMA2微调  686.2.1　微调方法介绍  686.2.2　微调环境准备  696.2.3　语料准备  706.2.4　模型下载  716.2.5　微调过程  716.2.6　PEFT微调模型测试  736.2.7　模型合并  746.2.8　合并后模型测试  746.3　Gemma微调  746.3.1　微调方法介绍  746.3.2　微调环境准备  756.3.3　模型下载  756.3.4　微调程序开发  756.3.5　语料文件下载  776.3.6　微调与测试过程  78第7章　大语言模型量化  797.1　量化介绍  797.2　llama.cpp量化过程  807.2.1　llama.cpp编译  807.2.2　模型GGUF格式转换  817.2.3　模型下载  817.2.4　量化过程  817.2.5　量化模型测试  827.2.6　Web方式运行  827.3　gemma.cpp量化过程  837.3.1　gemma.cpp源码下载  837.3.2　gemma.cpp编译  837.3.3　量化模型下载  847.3.4　推理  84第8章　多模态模型应用  868.1　Stable Diffusion介绍  868.2　Stable Diffusion部署  878.2.1　代码获取  878.2.2　Python虚拟环境准备  878.2.3　依赖库安装  878.2.4　模型下载  888.2.5　服务运行  888.3　Stable Diffusion应用  888.3.1　文生图应用  898.3.2　图生图应用  90开发篇第9章　Chat应用  949.1　目标  949.2　原理  949.2.1　功能概要  949.2.2　系统架构  959.2.3　运行原理  969.3　开发过程  969.3.1　Node.js安装  969.3.2　chat-app新建  969.3.3　源代码  979.3.4　测试  989.3.5　应用发布  99第10章　辅助编程应用  10210.1　目标  10310.2　原理  10310.2.1　功能概要  10310.2.2　系统架构  10310.2.3　运行原理  10410.3　开发过程  10410.3.1　开发环境准备  10410.3.2　测试模型准备  10510.3.3　API服务实现  10610.3.4　测试  110第11章　VS Code插件  11211.1　目标  11211.2　原理  11211.2.1　功能概要  11211.2.2　系统架构  11311.2.3　运行原理  11411.3　开发过程  11411.3.1　环境准备与项目创建  11511.3.2　插件开发  11511.3.3　插件发布  118第12章　检索增强生成应用  12112.1　目标  12112.2　原理  12212.2.1　功能概要  12212.2.2　系统架构  12312.2.3　运行原理  12412.3　开发过程  12512.3.1　大语言模型安装  12512.3.2　依赖库安装  12512.3.3　向量化模型下载  12612.3.4　源代码  12612.3.5　测试  128第13章　PDF翻译应用  13013.1　目标  13013.2　原理  13013.2.1　功能概要  13013.2.2　系统架构  13113.2.3　运行原理  13113.3　开发过程  13513.3.1　大语言模型安装  13513.3.2　依赖环境安装  13513.3.3　下载英译中模型  13513.3.4　源代码  13613.3.5　测试  138第14章　智能代理应用  14014.1　目标  14014.2　原理  14114.2.1　AI Agent  14114.2.2　AutoGen  14114.3　开发过程  14314.3.1　大语言模型安装  14314.3.2　Docker安装  14414.3.3　虚拟环境准备  14514.3.4　运行环境验证  14514.3.5　多代理会话应用开发  146第15章　语音模型应用  14915.1　目标  14915.2　原理  14915.2.1　功能概要  14915.2.2　系统架构  15015.2.3　运行原理  15115.3　开发过程  15215.3.1　运行环境安装  15215.3.2　模型下载  15315.3.3　Demo运行  15315.3.4　服务端开发  15415.3.5　客户端开发  16015.3.6　测试  163第16章　数字人应用  16616.1　目标  16616.2　原理  16716.2.1　功能概要  16716.2.2　系统架构  16716.2.3　运行原理  16816.3　开发过程  16916.3.1　环境准备  16916.3.2　源代码  17316.3.3　测试  177第17章　提示词生成应用：从零训练模型  17917.1　目标  17917.2　原理  18017.2.1　GPT-2  18017.2.2　训练流程与应用架构  18117.2.3　训练方法与运行原理  18217.3　开发与训练过程  18517.3.1　语料整理  18617.3.2　训练  18817.3.3　推理与服务  19617.3.4　测试  202第18章　AI小镇应用  20418.1　目标  20418.2　原理  20518.2.1　功能概要  20518.2.2　系统架构  20618.2.3　运行原理  20718.3　开发过程  20918.3.1　大语言模型安装  21018.3.2　开发环境搭建  21018.3.3　地图制作  21018.3.4　app.js  21118.3.5　BootScene.js  21318.3.6　GameScene.js  21318.3.7　ChatUtils.js  21818.3.8　测试  219