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

搬码侠

已于 2023-05-05 18:26:18 修改

阅读量849

点赞数

分类专栏： AI 文章标签： python chatgpt 开发语言人工智能 ai

于 2023-05-05 18:11:34 首次发布

本文链接：https://blog.csdn.net/fengtaokelly/article/details/130512402

版权

AI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、项目简介：
二、代码结构：
三、具体代码：
四、使用方法:
五、完善建议：
六、[代码在这里](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 openai

app = 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转换为HTML
    if (type === 'assistant') {
        message = md.render(message);
    }

    // 将消息内容设置为messageDiv的innerHTML
    messageDiv.innerHTML = message;
    chatContainer.appendChild(messageDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

四、使用方法:

1. 安装依赖：

pip install -r requirements.txt

2. 在main.py中替换自己的openai_key

3. 运行项目：

python main.py

4. 打开浏览器，访问 http://localhost:8000 以查看聊天界面。

五、完善建议：

接口很慢，所以下一步准备先实现流式响应。之后可以考虑以下的建议来完善和提高聊天应用的功能和用户体验：

用户鉴权和注册：为了提高安全性，可以添加用户注册和登录功能。
持久化聊天历史记录：将用户的聊天历史记录保存在数据库中，如 SQLite、PostgreSQL 或 MongoDB。这样用户在不同设备上登录时，可以查看之前的聊天记录。

六、代码在这里

https://download.csdn.net/download/fengtaokelly/87755940

搬码侠

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于Sanic（Python）和ChatGPT的超级简易聊天应用

本项目是一个简易的聊天应用，基于Sanic Web框架搭建后端，使用Bootstrap 3和JavaScript搭建前端，通过调用ChatGPT API实现智能对话。项目包含一个简单的Token认证，以及一些页面的简单美化处理。非常之简易，只有150行左右的代码（还包括很多空行）。前提是你得有openai的api_key，而且不建议在墙内搭建。
复制链接

扫一扫