基于Sanic（Python）和ChatGPT的超级简易聊天应用

文章目录

一、项目简介：
二、代码结构：
三、具体代码：
- main.py
- templates/index.html
- static/css/custom.css
- static/js/custom.js
四、使用方法:
- 1. 安装依赖：
- 2. 在main.py中替换自己的openai_key
- 3. 运行项目：
- 4. 打开浏览器，访问 http://localhost:8000 以查看聊天界面。
五、完善建议：
六、[代码在这里](https://download.csdn.net/download/fengtaokelly/87755940)

一、项目简介：

本项目是一个简易的聊天应用，基于Sanic Web框架搭建后端，使用Bootstrap 3和JavaScript搭建前端，通过调用ChatGPT API实现智能对话。项目包含一个简单的Token认证，以及一些页面的简单美化处理。

非常之简易，只有150行左右的代码（还包括很多空行）。前提是你得有openai的api_key，而且不建议在墙内搭建。

二、代码结构：

├── main.py
├── templates
│   └── index.html
└── static├── css│   └── custom.css└── js└── custom.js

三、具体代码：

main.py

from sanic import Sanic
from sanic.response import json, text, html
from sanic.log import logger
from sanic.exceptions import Unauthorized
import openaiapp = Sanic(__name__)
app.static('/static', './static')openai.api_key = 'your_openai_key'
VALID_TOKEN = '2RTjaZSfgzLHW3in'@app.middleware('request')
async def check_token(request):if request.path == '/api/chat':token = request.headers.get('Authorization', '').split(' ')[-1]if token != VALID_TOKEN:raise Unauthorized('Invalid token')@app.get("/")
async def index(request):with open('templates/index.html', 'r', encoding='utf-8') as file:return html(file.read())@app.post('/api/chat')
async def api_chat_handler(request):chat_history = request.json.get('message', [])if not chat_history:return json({'error': 'Message cannot be empty'}, status=400)response = openai.ChatCompletion.create(model="gpt-3.5-turbo",temperature=0.7,messages=chat_history)logger.info(response)reply = response['choices'][0]['message']['content'].strip()return json({'reply': reply})if __name__ == '__main__':app.run(host='0.0.0.0', port=8000, dev=True)

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ChatGPT</title><!-- 引入Bootstrap3 --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- 引入markdown-it库 --><script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script><!-- 引入自定义的CSS和JS文件 --><link rel="stylesheet" href="/static/css/custom.css"><script src="/static/js/custom.js"></script>
</head>
<body><div class="container"><div class="row"><div class="col-md-8 col-md-offset-2"><h1 class="text-center">EasyChatGPT</h1><div id="chat-container" class="well"><!-- 聊天消息将显示在这里 --></div><form id="chat-form"><div class="form-group"><label for="token-input">Token:</label><input type="text" id="token-input" class="form-control" placeholder="Enter your token here..." value="2RTjaZSfgzLHW3in"></div><div class="input-group"><input type="text" id="user-input" class="form-control" placeholder="Type your message here..."><span class="input-group-btn"><button id="send-btn" class="btn btn-primary" type="submit">Send</button></span></div></form></div></div></div>
</body>
</html>

static/css/custom.css

body {font-family: Arial, sans-serif;margin-top: 50px;
}#chat-container {height: 400px;overflow-y: auto;border: 1px solid #ccc;border-radius: 4px;padding: 10px;background-color: #f8f8f8;
}.alert {padding: 10px;margin-bottom: 10px;border-radius: 4px;
}.alert-info {background-color: #d9edf7;border-color: #bce8f1;color: #31708f;
}.alert-warning {background-color: #fcf8e3;border-color: #faebcc;color: #8a6d3b;
}.input-group {margin-top: 20px;
}

static/js/custom.js

const chatHistory = [{role: 'system', content: '您现在是一位乐于助人的助手。'}
];
// 初始化markdown-it库
const md = window.markdownit();
$(document).ready(function () {document.getElementById('chat-form').addEventListener('submit', async (event) => {event.preventDefault();const userInput = document.getElementById('user-input');const tokenInput = document.getElementById('token-input');const message = userInput.value.trim();if (!message) return;// 显示用户发送的消息displayMessage('user', message);// 清空输入框userInput.value = '';// 调用后端API获取ChatGPT的回复const response = await fetch('/api/chat', {method: 'POST',headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${tokenInput.value}`},body: JSON.stringify({message: chatHistory})});if (response.ok) {const data = await response.json();displayMessage('assistant', data.reply);} else {displayMessage('error', JSON.stringify(await response.json()));}});});function displayMessage(type, message) {// 将新的消息添加到聊天记录chatHistory.push({role: type, content: message});console.log(chatHistory)const chatContainer = document.getElementById('chat-container');const messageDiv = document.createElement('div');messageDiv.className = type === 'user' ? 'alert alert-info' : 'alert alert-warning';// 如果消息来自助手，将Markdown转换为HTMLif (type === 'assistant') {message = md.render(message);}// 将消息内容设置为messageDiv的innerHTMLmessageDiv.innerHTML = message;chatContainer.appendChild(messageDiv);chatContainer.scrollTop = chatContainer.scrollHeight;
}