基于Flask搭建简单的GPT网站

一只程序猿子

已于 2023-12-10 15:06:23 修改

阅读量523

点赞数 4

分类专栏： Python项目文章标签：人工智能 chatgpt flask python

于 2023-05-25 11:23:53 首次发布

本文链接：https://blog.csdn.net/spx_0108/article/details/130861433

版权

Python项目专栏收录该内容

18 篇文章 1 订阅

订阅专栏

🎈 博主：一只程序猿子

🎈 博客主页：一只程序猿子博客主页

🎈 个人介绍：爱好(bushi)编程！

🎈 创作不易：喜欢的话麻烦您点个👍和⭐！

🎈 欢迎访问我的主页（点我直达）

🎈 除此之外您还可以通过个人名片联系我

额滴名片儿

1. 项目介绍

本系统调用OpenAI的API实现AI聊天功能,使用的是gpt-3.5-turbo模型,本项目基于Flask框架进行开发,实现了一个简单的聊天界面。效果如下图所示：

2. 项目要求

本项目需要实现以下两条基本需求：

（1）实现魔法上网。

（2）拥有一个自己的OpenAI的账号，且已创建一个OpenAI API密钥。

3. 项目实现

（1）后端部分

需要安装flask库和openai库

pip install flask

pip install openai

可使用国内镜像源加快下载速度。

gptbot.py：

from flask import Flask, render_template, request, jsonify     # 引入Flask框架及相关模块
import openai    # 引入openai模块

# 设置openai API Key
openai.api_key = '这里填写你的openai API Key'

# 创建Flask实例
app = Flask(__name__)

# 定义ask_gpt函数，输入问题，返回GPT-3的回答
def ask_gpt(question):
    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",  # 选择模型
        messages=[
            {"role": "user", "content": question},  # 用户提问
        ]
    )
    result = response['choices'][0]['message']['content'].strip()       # 获取GPT-3回答

    return result

# 定义路由，处理GET和POST请求
@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        question = request.json['question']     # 获取POST请求中的question字段
        answer = ask_gpt(question)      # 获取GPT-3的回答
        # 将回答以JSON格式返回
        response = {
            'answer': answer
        }

        return jsonify(response)    # 返回JSON格式的响应

    else:
        return render_template('index.html')   # 返回模板页面

if __name__ == '__main__':
    print('启动Flask服务...')
    app.run()     # 启动Flask服务

（2）前端代码

包含html、js、css代码。部分代码如下：

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>
  <link rel="stylesheet" href="../static/css/index.css">
</head>

<body>
  <div class="title"><h1>Chat-Bot</h1></div>
  <div class="chat-container">
    <ul id="message-list" class="message-list"></ul>
    <div class="input-container">
      <input id="input-message" type="text" placeholder="Type your message..." />
      <button id="send-button">Send</button>
    </div>
  </div>
  <div class="footer">
    <div class="copyright">
			Copyright ©sunpx108@gmail.com All rights reserved. &nbsp;&nbsp;&nbsp;&nbsp;
		</div>
    </div>

  <script src="../static/js/index.js"></script>
</body>

</html>

index.js：

document.addEventListener('DOMContentLoaded', function() {
  const messageList = document.getElementById('message-list');
  const inputMessage = document.getElementById('input-message');
  const sendButton = document.getElementById('send-button');

  sendButton.addEventListener('click', sendMessage);
  inputMessage.addEventListener('keydown', function(event) {
    if (event.keyCode === 13) {
      sendMessage();
    }
  });

  function sendMessage() {
    const message = inputMessage.value;
    if (message.trim() !== '') {
      appendUserMessage(message);
      inputMessage.value = '';
      sendRequest(message);
    }
  }

  function appendUserMessage(message) {
    const userMessageElement = createMessageElement(message, 'user-message');
    messageList.appendChild(userMessageElement);
    scrollToBottom();
  }

  function appendBotMessage(message) {
    const botMessageContainer = document.createElement('div');
    botMessageContainer.classList.add('bot-message-container');

    // Create header
    const botMessageHeader = document.createElement('div');
    botMessageHeader.classList.add('bot-message-header');

    // Create copy button
    const copyButton = document.createElement('button');
    copyButton.classList.add('copy-button');
    copyButton.textContent = '复制';
    copyButton.addEventListener('click', function() {
      copyMessage(message);
      copyButton.classList.add('copy-button-success');
      copyButton.textContent = '已复制';

      // Reset button state after 1.5 seconds
      setTimeout(function() {
        copyButton.classList.remove('copy-button-success');
        copyButton.textContent = '复制';
      }, 1500);
    });
    botMessageHeader.appendChild(copyButton);

    botMessageContainer.appendChild(botMessageHeader);

    // Create message content
    const botMessageContent = document.createElement('div');
    botMessageContent.classList.add('bot-message-content');
    botMessageContent.textContent = message;
    botMessageContainer.appendChild(botMessageContent);

    messageList.appendChild(botMessageContainer);
    scrollToBottom();
  }

index.css：

body {
  font-family: Arial, sans-serif;
}

.title {
  text-align: center;
}

/* 聊天框容器 */
.chat-container {
  max-width: 60%;
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  /*align-items: center; !* 居中对齐 *!*/
}

/* 输入框容器 */
.input-container {
  display: flex;
  align-items: center; /* 居中对齐 */
  padding: 10px;
}

/* 输入框样式 */
.input-container input {
  flex: 1;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  outline: none;
}

/* 发送按钮样式 */
.input-container button {
  padding: 10px 20px;
  margin-left: 10px;
  border-radius: 3px;
  border: none;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  cursor: pointer;
}