ISEE小语
佛家有一言：
“欲知前世因，则今生所受者是，欲知后世果，则今生所为者是。”
突发奇想，本地下载了一个语言模型，使用Flask制作了一个本地语言模型对话聊天，没有他人干涉，无需担心说的什么话，只要你想说、你想问……，都可以有回应，只不过回应不一定是你想得到的答案，但非常有趣！
就当娱乐了~~
接下来我们看一下具体的实现吧^^
环境：
Pycharm
Python 3.7.1
安装：
本次我们用到了两个三方库用以下方式可自行安装：
pip install dialogbot==0.1.3pip install torch==1.13.1pip install Flask==2.2.5
先看实际效果
项目结构
首先，我们看一下Flask小项目的结构：
```结构Flask Dialog├─static│ ├─css│ └─js├─templates│ └─index.html├─app.py├─test.py└─requirements.txt```
实现原理
主要实现步骤：
下载语言模型：首先要下载语言模型到本地。
后端对话逻辑：语言模型使用及与前端交互。
前端对话页面：前端对话页面实现。
下载语言模型
首先，通过以下命令下载依赖的三方库
pip install dialogbot==0.1.3pip install torch==1.13.1
注意：库有点大，下载时间有点长，耐心等待
下载完成后，我们先调试一下
# -*- coding: utf-8 -*-from dialogbot import Botbot = Bot()response = bot.answer("Hello", False, True, False)print(response)
（左右滑动查看完整代码）
如果出现：
则是无法下载大模型，需要配置一翻
首先，在hosts文件中添加访问地址：
hosts文件路径：
C:\Windows\System32\drivers\etc\hosts然后，将以下内容复制到hosts文件最后
157.240.17.36 huggingface.co140.82.113.4 github.com185.199.108.153 assets-cdn.github.com185.199.110.153 assets-cdn.github.com185.199.111.153 assets-cdn.github.com185.199.108.133 raw.githubusercontent.com199.232.69.194 github.global.ssl.fastly.net
最后，打开python环境的file_download.py文件
file_download.py文件路径
..\envs\flask_dialog\Lib\site-packages\huggingface_hub\file_download.py将251行的
)修改为
).replace("cdn-lfs.huggingface.co","hf-mirror.com").replace("huggingface.co","hf-mirror.com")即可！
后端对话逻辑
其实这个很简单，分两个部分，一是打开页面，二是对话输出
def index():return render_template('index.html', chart_html='')def send():data = request.jsonmessage = data.get('message')bot = Bot()response_message = bot.answer(message, False, True, False)return jsonify({'response_message': response_message})
（左右滑动查看完整代码）
前端对话页面
在项目templates文件夹中新建index.html页面
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Chat Interface</title><link rel="stylesheet" href="{{ url_for('static', filename='css/dialog.css') }}"></head><body><div class="chat-container"><div class="chat-header">ModelChat</div><div class="chat-messages" id="chat-messages"></div><div class="chat-input"><input type="text" id="message-input" placeholder="Type your message..."><button onclick="sendMessage()">Send</button></div></div><script src="{{ url_for('static', filename='js/dialog.js') }}"></script></body></html>
（左右滑动查看完整代码）
在项目static/css文件夹中新建dialog.css
body {font-family: Arial, sans-serif;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.chat-container {width: 400px;height: 600px;background-color: white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 8px;overflow: hidden;display: flex;flex-direction: column;}.chat-header {background-color: #007bff;color: white;padding: 10px;text-align: center;}.chat-messages {flex: 1;padding: 10px;overflow-y: auto;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}.message {margin: 10px 0;display: flex;align-items: center;}.message .avatar {width: 40px;height: 40px;border-radius: 50%;background: #ccc;margin-right: 10px;}.message .content {background: #f1f1f1;padding: 10px;border-radius: 15px;max-width: 70%;}.message.user {flex-direction: row-reverse;}.message.user .content {background: #007bff;color: white;}.chat-input {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-top: 1px solid #ddd;}.chat-input input {flex: 1;height: 40px;padding: 10px;border: 1px solid #ddd;border-radius: 5px;margin-right: 10px;white-space: pre-wrap;}.chat-input button {height: 40px;padding: 0 20px;border: none;background-color: #007bff;color: white;border-radius: 5px;cursor: pointer;}
（左右滑动查看完整代码）
在项目static/js文件夹中新建dialog.js
function sendMessage() {const input = document.getElementById('message-input');const message = input.value.trim();if (message) {const messagesContainer = document.getElementById('chat-messages');const messageElement = createMessageElement(message, 'user');messagesContainer.appendChild(messageElement);messagesContainer.scrollTop = messagesContainer.scrollHeight;// 发送消息到后端fetch('/send', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ message: message }),}).then(response => response.json()).then(data => {// 将后端返回的消息添加到聊天窗口const responseMessage = createMessageElement(data.response_message.gen_response, 'message');messagesContainer.appendChild(responseMessage);messagesContainer.scrollTop = messagesContainer.scrollHeight;}).catch(error => console.error('Error:', error));// Simulate backend responsesetTimeout(() => {const responseMessage = createMessageElement('对方可能未上线，请再次呼叫！', 'message');messagesContainer.appendChild(responseMessage);messagesContainer.scrollTop = messagesContainer.scrollHeight;}, 3000000);input.value = '';}}function createMessageElement(message, className) {const messageElement = document.createElement('div');messageElement.classList.add('message', className);messageElement.innerHTML = `<div class="avatar"></div><div class="content">${message}</div>`;return messageElement;}document.getElementById('message-input').addEventListener('keypress', function(event) {if (event.key === 'Enter') {sendMessage();}});
（左右滑动查看完整代码）
启动项目
在电脑上启动，直接切换到venv下，输入：
python app.py出现以上日志信息说明已经启动成功！
接下来……
打开浏览器，输入：
http://127.0.0.1:5000/总结
小栈的代码主打一个简单，将项目代码实例整体梳理了，有兴趣可下载。
本次分享可能会有些BUG，任何校验与适应并不完善，如有同学感兴趣可深入研究。
源码已整理：
有兴趣的朋友点个“赞”和“在看”，谢谢支持~！
后台回复“dialog”即可获取！
文章就分享到这儿，喜欢就点个赞吧!
