Build a Simple OpenAI Chatbot with HTML, Flask, and Python

Here's a step-by-step guide to creating a simple OpenAI chatbot using HTML, Flask, and Python:

Create the HTML Interface (index.html):

<!DOCTYPE html>
<html>
<head>
	<title>OpenAI Chatbot</title>
</head>
<body>
	<h1>OpenAI Chatbot</h1>
	<input id='prompt' type='text' placeholder='Ask me anything...'>
	<button onclick='get_answer()'>Ask</button>
	<br><br>
	<textarea id='answer' rows='10' cols='50' readonly></textarea>
	<script src='https://cdn.jsdelivr.net/npm/@openai/api@0.2.1/dist/openai-api.min.js'></script>
	<script src='main.js'></script>
</body>
</html>

This code creates a basic HTML page with a header, an input box for questions, a button to submit, and a text area to display responses. It includes scripts for the OpenAI API and custom JavaScript functionality.

Write the Python Logic (main.py):

import openai_secret_manager
import openai

def get_answer(prompt):
    secret = openai_secret_manager.get_secret('openai')
    api_key = secret['api_key']
    model_engine = 'text-davinci-002'
    openai.api_key = api_key
    response = openai.Completion.create(
        engine=model_engine,
        prompt=prompt,
        max_tokens=1024,
        n=1,
        stop=None,
        temperature=0.5,
    )
    answer = response.choices[0].text.strip()
    return answer

This Python code defines a function get_answer() that takes a question (prompt) as input and uses the OpenAI API to generate a response. It utilizes the openai library and a secret manager to securely access your OpenAI API key.

Set up the Flask Application (app.py):

from flask import Flask, request, render_template
from main import get_answer

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/get_answer', methods=['POST'])
def process():
    prompt = request.form['prompt']
    answer = get_answer(prompt)
    return answer

if __name__ == '__main__':
    app.run(debug=True)

This code creates a simple Flask application with two routes: one for the main HTML page (index.html) and another to process questions sent from the user interface. It uses the get_answer() function from main.py to generate responses.

Implement the JavaScript Interaction (main.js):

function get_answer() {
	var prompt = document.getElementById('prompt').value;
	var xhr = new XMLHttpRequest();
	xhr.open('POST', '/get_answer', true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			document.getElementById('answer').value = xhr.responseText;
		}
	};
	xhr.send('prompt=' + prompt);
}

This JavaScript code handles the user interaction. When the 'Ask' button is clicked, it retrieves the question from the input box, sends it to the Flask server via an AJAX request, and displays the received answer in the text area.

Install Required Packages:

pip install flask
pip install openai

Run the Flask Application:

python app.py

Access the Chatbot:

Open your web browser and visit http://localhost:5000. You can now input questions in the text box and get answers generated by the OpenAI API.

This setup provides a basic foundation for your OpenAI chatbot. You can customize and extend the functionality by adding more advanced features such as conversational context, user authentication, and personalized responses.

Build a Simple OpenAI Chatbot with HTML, Flask, and Python