本系列将讲述如何从零开始私有化实现及部署类ChatGPT的对话机器人，主要分环境安装，模型现状与选型，基础chatglm模型详解及部署，chatglm不同环境常见bug，前后端对话简单实现，流式对话实现，chatpdf实现，海量本地知识库搜索能力实现，visualglm图片描述模型详解，集成，文本生成图片模型集成，语音识别详解，语音合成详解，语音对话功能集成等等内容。

阅读本系列需要有一定的人工智能算法能力，对nlp算法，语音算法有一定了解，还涉及多方面工程能力知识，如阅读中有任何问题，可以留言，本人会一一解答。

本章节主要讲述如何通过bootstrap+jquery+flask的方式将清华大模型chatglm对话能力做成web服务。

一.前期准备

安装flask环境

pip install flask  

二.后端api编写

通过flask将chatglm的输出结果作为返回,如下代码，在最外层加载模型，并且编写flask的api服务调用模型。

from flask import Flask, request  
from flask import render_template  
from transformers import AutoTokenizer, AutoModel  
import os  
import cv2  
import json  
import base64  
import numpy  
  
tokenizer = AutoTokenizer.from_pretrained("THUDM/chatglm-6b",trust_remote_code=True)  
model = AutoModel.from_pretrained("THUDM/chatglm-6b",trust_remote_code=True).half().cuda()  
model = model.eval()  
app=Flask(__name__)  
  
@app.route('/get_chat_response')  
def get_chat_response():  
req = request.args.get("text")  
response, history = model.chat(tokenizer, req, history=[])  
return response 
  
if __name__ == '__main__':  
app.run(host='0.0.0.0', port=8080)  

如上代码，我们请求http://0.0.0.0:8080/get_chat_response?text=你好，即可看到chatglm返回的结果。

三.前端bootstrap与jquery

先在html的头部引入bootstrap与jquery，如下所示

<!-- CSS -->  
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">  
<!-- jQuery and JavaScript Bundle with Popper -->  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>  
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>  

在前端，我们需要一个框，以及一个输入条和一个button，如下代码所示：

<div class="card border-success col-6">  
<div class="card-header bg-transparent border-success">对话机器人</div>  
<div class="card-body text-success pre-scrollable" style="height:500px">  
  
</div>  
<div class="card-footer bg-transparent border-success">  
<div class="input-group mb-3">  
<input type="text" class="form-control" id="chat_text" placeholder="请输入对话内容" aria-label="请输入对话内容"  
aria-describedby="basic-addon2">  
<div class="input-group-append">  
<button class="btn btn-primary" id="text_to" onclick="send_text()" type="button">文字发送</button>  
</div>  
</div>  
</div>  
</div>  

在这里，我们使用了bootstrap的card样式，在card-header上写上标题，card-body保留500px的对话框，card-footer里放入对话框和文字发送按钮。
现在仅剩与后端交互的js代码，我们采用ajax的方式请求并填充元素：

<script>  
function send_text(){  
var chat_text = $("#chat_text").val();  
$("#text_to").attr('disabled',true);  
$("#chat_box").append('<p class="p-3 mb-2 offset-6 bg-success text-white">' + chat_text + '</p>');  
$.get('/get_chat_response',{text:chat_text},function(data){  
$("#chat_box").append('<p class="p-3 mb-2 col-6 card-text bg-light text-dark">' + data + '</p>')  
$("#text_to").attr('disabled',false);  
});  
}  
</script>  

然后，保存如上html，并通过flask定向页面。

@app.route('/')  
def index():  
return render_template('index.html')  

至此，便可到http://localhost:8080执行页面查看效果。