Building a Flask Chat Web App with OpenAI's ChatGPT API

Building a Flask Chat Web App with OpenAI’s ChatGPT API

Hello Learners…

Welcome to the blog…

Table Of Contents

  • Introduction
  • Building a Flask Chat Web App with OpenAI’s ChatGPT API
  • Conclusion
  • References

Introduction

In this post, we are Building a Flask Chat Web App with OpenAI’s ChatGPT API, that harnesses the capabilities of the ChatGPT API to create seamless and captivating conversations with our users.

Building a Flask Chat Web App with OpenAI’s ChatGPT API

As we know that OpenAI’s ChatGPT API opens up a world of possibilities for creating interactive and natural conversations.

Developers can integrate the advanced language capabilities of the model into their applications, enabling AI-powered interactions that have a remarkably human-like feel.

Requirements:

Set Up OpenAI API Key

Now we have to set up OpenAI API key into the ‘.env’ file

Create and Activate Python Virtual Environment

It is always good practice to use Python virtual environment. So Here we are using Python virtual environment, we hope that you know how to create and activate the Python virtual environment.

Here, We are using Linux OS so maybe there are some differences in the commands.

To create Python virtual environment

python3 -m venv venv

Activate Python virtual environment

source venv/bin/activate

Installation of Required Libraries

Now we are ready to install the required libraries.

pip install openai python-dotenv flask

Creating a Flask Chat Web App with OpenAI’s ChatGPT API

To create a Flask Web app we have to follow a file structure that is predefined and we must follow that to run our Flask chat web application.

flask api file structure

Now we create an app.py file which is our Flask API file and paste the below code into this file.

from flask import Flask, render_template, request
import openai
import os 
from dotenv import load_dotenv,find_dotenv

__ = load_dotenv(find_dotenv()) #read local .env file
openai.api_key=os.environ["OPENAI_API_KEY"]

app = Flask(__name__)
app.static_folder = 'static'
@app.route("/")
def home():
    return render_template("index.html")

@app.route("/get")
def get_bot_response():
    
    userText = request.args.get('msg')
    completion = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=[
        {"role": "system", "content": "You are a helpful assistant."},
        {"role": "user", "content": userText}
    ]
    )
    result=completion.choices[0].message['content']
 
    return result
   


if __name__ == "__main__":
    app.run(host='0.0.0.0',port=8002,debug=True)

This is our main Flask API file, Now we have required a user interface to chat with OpenAI’s Chatgpt from the web.

Now we have to require HTML, JAVASCRIPT, AND CSS Files for the Flask Web APP.

You can get all the required files for the Chatbot UI from the below Github URL:

After getting all the files and putting that files as a Flask web app directory structure as we showed above.

After that, we are ready to run our Flask Chat Web Application.

run flask web app

And we get two URLs, Here we use http://127.0.0.1:8002 and open it in our web browser.

We can see below,

flask web app interface Building a Flask Chat Web App with OpenAI's ChatGPT API

Here we can see Chat Pop-Up in the Right bottom corner and when we click on that Pop-Up we see as below,

Building a Flask Chat Web App with OpenAI's ChatGPT API

So, this is the Our Chatbot UI part, and On the backend side we set up OpenAI’s ChatGPT API, So whenever we ask questions in this chatbot we get a response from the OpenAI’s ChatGPT API models.

Here are some examples of the question-answeres,

Building a Flask Web App with OpenAI's ChatGPT API

So this the Full Flask Chat Web Application For the Conversations Using OpenAI’s ChatGPT API Models, You can change chat models based on your specific requirements.

You can use this Chatbot UI directly on any Website.

Full Code Download: https://github.com/galaxyofai/chatgpt_flask_webapp

Conclusion

The journey of infusing a Flask chat web app with OpenAI’s ChatGPT API showcases the dynamic possibilities that emerge at the intersection of web development and advanced AI technologies.

Also, you can refer to this,

Happy Learning And Keep Learning…

Thank You…

References

Leave a Comment