Build a Simple Chatbot with OpenAI, Flask, and HTML

Introduction:

This project guides you through building a functional chatbot that interacts with users through a simple web interface. We'll use OpenAI's API to power the chatbot and Flask to build the web application.

Prerequisites:

Before we begin, ensure you have the following installed:

• Python 3.x* Flask: pip install Flask* OpenAI API Key: Sign up for an account at https://platform.openai.com/ and obtain your API key.

Step 1: Project Structure:

Create a new directory for your project and navigate into it. Create the following files:

• index.html* main.py* app.py

Step 2: Creating the HTML file (index.html):

Open index.html in a text editor and add the following code:html

Chatbot

This HTML code creates a simple web page with a heading, a textbox for user input ('prompt'), and a readonly textbox ('answer') to display the chatbot's response.

Step 3: Creating the Python program (main.py):

Open main.py and add the following code:pythonimport openaifrom flask import Flask, request, jsonify

app = Flask(name)

openai.api_key = 'YOUR_API_KEY'

@app.route('/chatbot', methods=['POST'])def chatbot(): prompt = request.form['prompt'] response = openai.Completion.create( model='text-davinci-002', prompt=prompt, temperature=0.5, max_tokens=1024, n=1, stop=None, frequency_penalty=0, presence_penalty=0 )

answer = response.choices[0].text.strip()    return jsonify({'answer': answer})

if name == 'main': app.run()

This code defines a Flask application that handles POST requests to the '/chatbot' endpoint. When a request is received, it extracts the user's 'prompt', uses the OpenAI API to generate a response, and returns the response in JSON format.

Remember to replace 'YOUR_API_KEY' with your actual OpenAI API key.

Step 4: Creating the Flask Application (app.py):

Open app.py and add the following code:pythonfrom flask import Flask, render_template, request, jsonifyimport requests

app = Flask(name)

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

@app.route('/chatbot', methods=['POST'])def chatbot(): prompt = request.form['prompt'] response = requests.post('http://localhost:5000/chatbot', data={'prompt': prompt}) answer = response.json()['answer'] return jsonify({'answer': answer})

if name == 'main': app.run()

This code sets up a Flask application that serves the index.html file at the root URL. When the user submits a message, the chatbot() function sends a POST request to main.py running on localhost:5000 to generate a response, which is then returned to the user.

Step 5: Running the Application:

1. Open a terminal and navigate to your project directory.2. Run the Flask application: python app.py3. Open a web browser and visit http://localhost:5000.4. Enter a message in the prompt textbox and press enter. The chatbot will generate a response and display it in the answer textbox.

Conclusion:

You've successfully created a functional chatbot using OpenAI, Flask, and HTML. The project demonstrates how to integrate OpenAI's API into a simple web application, allowing for interactive user experiences