Я пытаюсь добавить API на свою веб-страницу и никогда раньше не использовал сервер Flask, я также никогда не использовал Javascript, так что это совершенно новый опыт обучения. Моя проблема в том, что я продолжаю получать код ошибки 405, в котором говорится, что этот метод не разрешен. Я продолжаю использовать метод POST, но он не работает. Я уверен, что моя проблема может быть связана с моим HTML-кодом, а не с моим сервером Flask, потому что код чрезвычайно общий и простой.
import openai
from flask import Flask, request, jsonify
app = 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 и снова установил его. Я также широко использовал
🤔 А знаете ли вы, что...
С помощью JavaScript можно создавать клиентские приложения для мобильных устройств с использованием фреймворков, таких как React Native и NativeScript.
Вам нужно добавить маршрут для '/' для обслуживания html-файла. Я также исправил способ вызова API OpenAI, поскольку вы используете устаревший вариант.
import openai
from flask import Flask, request, jsonify, render_template
chat_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