我正在尝试为我的网页添加一个API,我之前从未使用过Flask服务器,也从未使用过JavaScript,所以这对我来说是一个全新的学习体验。我的问题是我不断收到405错误代码,提示方法不被允许。我一直在使用POST方法,但它不起作用,我认为问题可能更多地出在我的HTML代码上,而不是Flask服务器,因为代码非常通用和简单。
import openaifrom flask import Flask, request, jsonifyapp = Flask(__name__)openai.api_key = '**my key is in here**'@app.route('/', methods=['POST'])def chat(): data = request.get_json() message = data.get('message') response = openai.Completion.create( model="gpt-3.5-turbo", prompt=message, max_tokens=50 ) return {'response': response.choices[0].text.strip()}if __name__ == '__main__': app.run(port=5000)
async function sendMessage() { const message = document.getElementById('message').value; document.getElementById('chat-box').innerHTML += `<div>You: ${message}</div>`; const response = await fetch('/', { method: "POST", body: JSON.stringify({ message }), headers: { 'Content-Type': 'application/json', }, }); const data = await response.json(); document.getElementById('chat-box').innerHTML += `<div>Bot: ${data.reply}</div>`; document.getElementById('message').value = ''; }
我尝试过改变代码的结构,我卸载并重新安装了Flask。我还广泛使用了chatgpt来尝试编写更好的代码,但它只是让我绕圈子。我希望有人能帮助解决这个问题。我甚至尝试了一个简单的服务器,只显示“hello world”,它工作了,但我真的认为问题可能出在我的JavaScript上。此外,我是一个初学者,这是我第一个编码项目之一,所以如果可能的话,请对我宽容一些。谢谢。
回答:
你需要为’/’添加一个路由来提供HTML文件。我还修复了你调用OpenAI API的方式,因为你使用的是一个已废弃的API版本。
import openaifrom flask import Flask, request, jsonify, render_templatechat_client = OpenAI(api_key='....')@app.route('/')def index(): return render_template('index.html')@app.route('/', methods=['POST'])def chat(): data = request.get_json() message = data.get('message') response = chat_client.chat.completions.create( model="gpt-3.5-turbo", messages=[ {"role": "user", "content": message} ], max_tokens=50 ) return jsonify({'reply': response.choices[0].message.content.strip()})if __name__ == '__main__': app.run(port=5000, debug=True)
我测试时使用的示例index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat app</title> <script> async function sendMessage() { const message = document.getElementById('message').value; document.getElementById('chat-box').innerHTML += `<div>You: ${message}</div>`; const response = await fetch('/', { method: "POST", body: JSON.stringify({ message }), headers: { 'Content-Type': 'application/json', }, }); const data = await response.json(); document.getElementById('chat-box').innerHTML += `<div>Bot: ${data.reply}</div>`; document.getElementById('message').value = ''; } </script></head><body> <div id="chat-box"></div> <input type="text" id="message" placeholder="Type your message here..."> <button onclick="sendMessage()">Send</button></body></html>
目录结构
- app.py- templates/ - index.html