0

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

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.