Implement ChatGPT in a Flask Application

You can build dynamic and interactive chat interfaces by integrating ChatGPT into a Flask application. This article’s instructions can help you integrate ChatGPT into your Flask project and give users engaging chat experiences. Improve the user interface, try out new prompts, and look into new options to make your chat program more functional.

Steps to Implement ChatGPT in a Flask Application Using API

Integrating ChatGPT into a Flask web application allows you to build interactive chat interfaces and provide dynamic conversational experiences to users. Let’s see the overall steps in summary:

Setting up the Flask Project.
Define a Flask app.py that handles the chat functionality.
Configure Django’s URL routing to connect the chat view to a specific URL pattern.
Designing the User Interface.
Testing and Running the Application.

Implement ChatGPT in a Flask Application

Folder Structure

app.py: Creating the Chat View

In this code, you need to have a valid OpenAI API key, which you should replace with ‘YOUR_API_KEY’. The Flask application listens for requests on the root route ‘/’, and when a POST request is received, it generates a response based on the user’s prompt using the OpenAI API. The response is then returned as JSON.

Python3

from flask import Flask, render_template, request, jsonify 

import openai 

app = Flask(__name__) 

# OpenAI API Key 

openai.api_key = 'YOUR_API_KEY'

def get_completion(prompt): 

    print(prompt) 

    query = openai.Completion.create( 

        engine="text-davinci-003", 

        prompt=prompt, 

        max_tokens=1024, 

        n=1, 

        stop=None, 

        temperature=0.5, 

    ) 

    response = query.choices[0].text 

    return response 

@app.route("/", methods=['POST', 'GET']) 

def query_view(): 

    if request.method == 'POST': 

        print('step1') 

        prompt = request.form['prompt'] 

        response = get_completion(prompt) 

        print(response) 

        return jsonify({'response': response}) 

    return render_template('index.html') 

if __name__ == "__main__": 

    app.run(debug=True)

templates/index.html: Creating User Interface

Create an HTML template for the chat interface using HTML, CSS, and Bootstrap, and Set up the necessary JavaScript and AJAX code to handle user interaction.

HTML

<!-- query.html -->

<html> 

<head> 

    <title>Query</title> 

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script> 

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> 

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> 

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous"> 

    <script> 

        $(document).ready(function() { 

            // Send the form on enter keypress and avoid if shift is pressed 

            $('#prompt').keypress(function(event) { 

                if (event.keyCode === 13 && !event.shiftKey) { 

                    event.preventDefault(); 

                    $('form').submit(); 

                } 

            }); 

            $('form').on('submit', function(event) { 

                event.preventDefault(); 

            // get the CSRF token from the cookie 

            var csrftoken = Cookies.get('csrftoken'); 

            // set the CSRF token in the AJAX headers 

            $.ajaxSetup({ 

                headers: { 'X-CSRFToken': csrftoken } 

            }); 

                // Get the prompt 

                var prompt = $('#prompt').val(); 

                var dateTime = new Date(); 

                var time = dateTime.toLocaleTimeString(); 

                // Add the prompt to the response div 

                $('#response').append('<p id="GFG1">('+ time + ') <i class="bi bi-person"></i>: ' + prompt + '</p>'); 

                $('#response #GFG1').css({"color": "green", "width": "90%", "float": "left"}); 

                // Clear the prompt 

                $('#prompt').val(''); 

                $.ajax({ 

                    url: '/', 

                    type: 'POST', 

                    data: {prompt: prompt}, 

                    dataType: 'json', 

                    success: function(data) { 

                        $('#response').append('<p id="GFG2">('+ time + ') <i class="bi bi-robot"></i>: ' + data.response + '</p>'); 

                        $('#response #GFG2').css({"color": "red", "width": "90%", "float": "right"}); 

                    } 

                }); 

            }); 

        }); 

    </script> 

</head> 

<body> 

    <div class="container p-3"> 

        <h3>GFG ChatGPT Clone</h3> 

        <div class="mb-3"> 

            <form method="post" action=""> 

                <label for="prompt" class="form-label"><strong>Prompt: </strong></label> 

                <textarea class="form-control" type="textarea" id="prompt" name="prompt" rows="3"></textarea> 

                <br> 

                <button class="btn btn-primary " type="submit">Submit</button> 

            </form> 

        </div> 

        <br> 

        <div class="mb-3"> 

            <h6>Response:</h6>  

            <div class="container border overflow-auto h-50" id="response"></div> 

        </div> 

    </div> 

</body> 

</html>

Output:

To learn more about Chat GPT, you can refer to:

Article Tags :

Python

ChatGPT

Flask Projects

Python Flask