Python3 Flask 制作一个gpt对话框
YOUR_API_KEY。同时，我将使用Bootstrap 4作为CSS框架和jQuery库来帮助处理DOM操作。请确保您已经安装了这些依赖项。
首先，我们将创建一个名为templates的文件夹，并在其中创建一个名为index.html的文件，它将包含我们的HTML和JavaScript代码。
<!DOCTYPE html>
<html>
<head>
<title>Chat with AI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Chat with AI</h1>
<div class="card">
<div class="card-body" id="chatlog">
<p class="text-center">Chat log will appear here.</p>
</div>
</div>
<form id="chatform">
<div class="form-group">
<label for="userinput">User:</label>
<input type="text" class="form-control" id="userinput">
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
<script>
$(document).ready(function() {
$("#chatform").submit(function(event) {
event.preventDefault();
var userinput = $("#userinput").val();
if (userinput === "") {
return;
}
$("#chatlog").append("<p>User: " + userinput + "</p>");
$("#userinput").val("");
$.ajax({
url: "/chat",
type: "POST",
data: JSON.stringify({userinput: userinput}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var airesponse = response.airesponse;
$("#chatlog").append("<p>AI: " + airesponse + "</p>");
}
});
});
});
</script>
</body>
</html>
在上面的代码中，我们包含了所需的依赖项和样式表，以及一个用于呈现聊天记录和用户输入的<div>元素。我们还包含了一个用于发送用户消息的表单和一个用于发送按钮的按钮。
在JavaScript代码中，我们使用jQuery库来处理DOM元素的选择和操作。我们还创建了一个OpenAI对象，它接受OpenAI API密钥
作为参数，并在用户单击发送按钮时使用openai.completions.create方法向OpenAI API发送请求。该方法使用davinci模型生成AI的响应，并将用户输入作为模型的提示。我们还指定了一些生成响应的参数，例如max_tokens和temperature。
在成功接收到OpenAI API响应后，我们将聊天记录附加到聊天日志中，并清除用户输入。
接下来，我们将创建一个名为app.py的文件来实现Flask应用程序的主要逻辑。
from flask import Flask, jsonify, render_template, request import openai import os app = Flask(__name__) # Configure OpenAI API key openai.api_key = os.environ.get("OPENAI_API_KEY") # Define OpenAI API completion function def complete_prompt(prompt): response = openai.Completion.create( engine="davinci", prompt=prompt, max_tokens=1024, n=1, stop=None, temperature=0.5, ) return response.choices[0].text.strip() # Define home route @app.route('/') def home(): return render_template('index.html') # Define chat route @app.route('/chat', methods=['POST']) def chat(): data = request.get_json() userinput = data['userinput'] prompt = f"User: {userinput}\nAI:" airesponse = complete_prompt(prompt) return jsonify({'airesponse': airesponse}) if __name__ == '__main__': app.run(debug=True)
在上面的代码中，我们首先导入了Flask类和render_template函数。然后我们创建了一个名为app的Flask对象，并在/路由上定义了一个名为index的函数，它将呈现我们在templates/index.html文件中定义的HTML代码。
最后，我们使用app.run()方法运行应用程序。完成后，您可以使用以下命令在终端中运行应用程序：
FLASK_APP=app.py flask run
这将启动应用程序，并将其绑定到默认端口5000。您可以在浏览器中访问http://localhost:5000来查看您的应用程序。
您现在应该可以在网页中看到一个简单的聊天窗口，您可以在其中与AI进行对话。
如果您的问题仍未解决，还可以加入服务器在线技术交流QQ群:8017413寻求帮助。
