I’m creating a Chat app from a user to GPT 3.5 Turbo. But when I send a message, the bot never responds. Help me fix the code please. I spent days on it but it never works. Here is the app.py file(Note: I installed all the nessacary modules, the console installed them successfully):
from flask import Flask, render_template, request
import openai
app = Flask(name)
openai.api_key = 'MY VALID API KEY'
@app.route("/")
def index():
return render_template("index.html")
@app.route("/api", methods=["POST"])
def api():
message = request.json.get("message")
completion = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
{"role": "user", "content": message}
]
)
if completion.choices[0].message!=None:
return completion.choices[0].message
else :
return 'Failed to Generate response!'
if name=='main':
app.run()
And here is the index.HTML file:
<!DOCTYPE html> <html> <head> <title>Chat App</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> body { background-color: #f5f5f5; padding-top: 20px; }
#chat-box {
max-width: 800px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#chat-header {
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
padding: 10px;
font-weight: bold;
text-align: center;
}
#message-list {
height: 400px;
overflow-y: scroll;
padding: 10px;
}
.user-message {
background-color: #ffc107;
color: white;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
}
.bot-message {
background-color: #007bff;
color: white;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
}
input[type="text"] {
width: 100%;
border: none;
border-top: 1px solid #e9ecef;
padding: 10px;
font-size: 16px;
outline: none;
}
input[type="text"]:focus {
border-color: #007bff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}
.btn-send {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
border-radius: 5px;
}
.btn-send:hover {
background-color: #0069d9;
cursor: pointer;
}
</style>
</head> <body> <div id="chat-box" class="container"> <div id="chat-header">Chat App</div> <div id="message-list"></div> <form id="message-form" class="d-flex flex-column align-items-center"> <input type="text" id="message" placeholder="Type a message..."> <button type="submit" class="btn btn-send">Send</button> </form> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> $(function() { // When the user submits the message form $("#message-form").submit(function(e) { e.preventDefault(); // add this line to prevent form submission
// Get the user's message
var message = $("#message").val();
// Display the user's message
displayMessage(message, "user-message");
// Send the message to the server
$.ajax({
url: "/api",
type: "POST",
data: { message: message },
success: function(response) {
// Display the bot's message
displayMessage(response, "bot-message");
// Animate the scroll bar to the bottom of the message list
$("#message-list").animate({ scrollTop: $("#message-list")[0].scrollHeight }, 1000);
},
error: function(error) {
console.log("Error:", error);
}
});
});
// Function to display a message in the chat box
function displayMessage(message, className) {
// Create a new message element
var messageElement = $("<div>").addClass(className).text(message);
// Append the message element to the message list
$("#message-list").append(messageElement);
}
});
</script> </body> </html>
I tried debugging it, changing the functions of the javascript but it still doesn’t work!