I'm trying to built a chat bot using opeanAI. I have no idea why I can not see the response when using the following python code :
import openai
import streamlit as st
from flask import Flask, request, render_template
import openai
app = Flask(__name__)
# Set the GPT-3 API key
openai.api_key = st.secrets["Key"]
# Define the routes for the Flask app
@app.route('/')
def index():
# Feature detection
is_fetch_supported = True
if not hasattr(request, 'user_agent') or not request.user_agent.browser or request.user_agent.browser.family != 'Firefox':
try:
fetch = window.fetch
fetch('https://example.com', { method: 'HEAD' })
except:
is_fetch_supported = False
return render_template("index.html", is_fetch_supported=is_fetch_supported)
@app.route("/about.html")
def about():
return render_template('about.html')
@app.route("/contact.html")
def contact():
return render_template('contact.html')
@app.route('/chat', methods=['POST'])
def chat():
message = request.form['message']
response = openai.Completion.create(
engine="text-davinci-002",
prompt=message,
max_tokens=1000,
n=1,
stop=None,
temperature=0.5,
)
reply = response.choices[0].text.strip()
return {'response': reply}
if __name__ == '__main__':
app.run(debug=True)
I tested the openAi API with streamlit and it worked as expected and I get the response. Could someone help please ?
Here are the Index.html and Chat.html codes I have used
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>AIBot</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<h1>Welcome to AI Chat Bot!</h1>
<p>Enter your message below to start chatting:</p>
<form id="chat-form">
<input type="text" id="user-input" autocomplete="off" placeholder="Type your message...">
<button type="submit" id="send-btn">Send</button>
</form>
<div id="chat-box"></div>
</div>
{% if is_fetch_supported %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{% else %}
<!-- Handle unsupported browser case here -->
{% endif %}
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Chat with ChatGPT</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<header>
<h1>Chat with ChatGPT</h1>
</header>
<main id="chat-window">
<div id="message-log"></div>
<form id="message-form">
<input type="text" id="message-input" autocomplete="off">
<button type="submit" id="send-button">Send</button>
</form>
</main>
<script src="https://cdn.socket.io/3.0.4/socket.io.min.js"></script>
<script>
// Establish a WebSocket connection with the server
var socket = io.connect('{{ url_for("socketio") }}');
// Handle incoming bot messages
socket.on('bot_message', function(message) {
addBotMessage(message);
});
// Send user message to the server
function sendMessage(message) {
socket.emit('user_message', message);
addUserMessage(message);
}
// Add a message from the user to the message log
function addUserMessage(message) {
var messageLog = document.getElementById('message-log');
var messageNode = document.createElement('div');
messageNode.className = 'user-message';
messageNode.innerHTML = message;
messageLog.appendChild(messageNode);
}
// Add a message from the bot to the message log
function addBotMessage(message) {
var messageLog = document.getElementById('message-log');
var messageNode = document.createElement('div');
messageNode.className = 'bot-message';
messageNode.innerHTML = message;
messageLog.appendChild(messageNode);
}
// Handle form submission
document.getElementById('message-form').addEventListener('submit', function(event) {
event.preventDefault();
var inputField = document.getElementById('message-input');
var message = inputField.value;
inputField.value = '';
sendMessage(message);
});
</script>
</body>
</html>
I'm tryed to built a chat bot using opeanAI and I expect to receive an answer to my question when I click on send