pontalk: Explore Python's Hidden Treasures!

Building a Simple Chatbot with Flask and a Pre-trained Model

Written by

ken

in

Welcome to our tech blog! Today, we’re going to embark on an exciting journey to build a basic chatbot using Python’s Flask framework and a pre-trained model. This project is perfect for beginners who want to dip their toes into the world of web development and artificial intelligence.

What is a Chatbot?

A chatbot is essentially a computer program designed to simulate conversation with human users, especially over the internet. Think of it as a digital assistant that can understand your questions and provide relevant answers.

What is Flask?

Flask is a lightweight and flexible web framework for Python. A web framework is like a toolkit that provides ready-made components and structures to help you build web applications faster and more efficiently. Flask is known for its simplicity and ease of use, making it an excellent choice for beginners.

What is a Pre-trained Model?

In the realm of artificial intelligence, a pre-trained model is a machine learning model that has already been trained on a massive dataset. Instead of starting from scratch, we can leverage these models to perform specific tasks, like understanding and generating text, saving us a lot of time and computational resources.

Project Setup

Before we dive into coding, let’s get our environment ready.

  1. Install Python: If you don’t have Python installed, you can download it from the official Python website: python.org.
  2. Create a Virtual Environment: It’s a good practice to create a separate environment for each project to avoid dependency conflicts.
    • Open your terminal or command prompt.
    • Navigate to your project directory.
    • Run the following command:
      bash
      python -m venv venv
      This creates a folder named venv that will hold your project’s dependencies.
  3. Activate the Virtual Environment:
    • On Windows:
      bash
      venv\Scripts\activate
    • On macOS and Linux:
      bash
      source venv/bin/activate
      You’ll see (venv) appear at the beginning of your command prompt, indicating that the environment is active.
  4. Install Required Libraries: We’ll need Flask and a library for our pre-trained model. For this example, we’ll use transformers from Hugging Face, which provides access to many powerful pre-trained models.
    bash
    pip install Flask transformers torch

    • torch is a library for deep learning that transformers often relies on.

Building the Chatbot Logic

Let’s create our Python script. Create a file named app.py in your project directory.

Importing Libraries

First, we need to import the necessary components.

from flask import Flask, render_template, request, jsonify
from transformers import pipeline
  • Flask: The main class for our web application.
  • render_template: Used to render HTML files (our chatbot interface).
  • request: To access incoming request data (like user messages).
  • jsonify: To convert Python dictionaries into JSON responses, which are commonly used for communication between web browsers and servers.
  • pipeline: A convenient function from the transformers library to easily use pre-trained models for various tasks.

Initializing Flask and the Chatbot Model

Now, let’s set up our Flask application and load our pre-trained chatbot model.

app = Flask(__name__)

chatbot = pipeline("conversational", model="microsoft/DialoGPT-medium")
  • app = Flask(__name__): This line initializes our Flask application.
  • chatbot = pipeline("conversational", model="microsoft/DialoGPT-medium"): This is where we load our pre-trained model. The pipeline function simplifies the process. We specify "conversational" as the task and "microsoft/DialoGPT-medium" as the model. DialoGPT is a powerful model trained by Microsoft specifically for generating dialogue.

Creating the Main Route

We need a route to serve our chatbot’s user interface.

@app.route('/')
def index():
    return render_template('index.html')
  • @app.route('/'): This decorator tells Flask that when a user visits the root URL of our application (e.g., http://127.0.0.1:5000/), the index() function should be executed.
  • return render_template('index.html'): This function will look for an index.html file in a templates folder within your project directory and display it to the user.

Creating the Chat API Endpoint

This is where the magic happens! We’ll create an endpoint that receives user messages, passes them to the chatbot model, and returns the model’s response.

@app.route('/chat', methods=['POST'])
def chat():
    user_message = request.json.get('message')
    if not user_message:
        return jsonify({'error': 'No message provided'}), 400

    # The 'conversational' pipeline expects a conversation history.
    # For simplicity in this basic example, we'll pass the current message directly.
    # In a more advanced bot, you'd manage conversation context.
    response = chatbot(user_message)

    # The response from the conversational pipeline is a list containing a dictionary.
    # We extract the generated text from the 'generated_text' key.
    bot_response = response[0]['generated_text']

    return jsonify({'response': bot_response})
  • @app.route('/chat', methods=['POST']): This defines an endpoint at /chat that only accepts POST requests. POST requests are typically used to send data to a server.
  • user_message = request.json.get('message'): This line retrieves the user’s message from the incoming JSON data. request.json parses the JSON body of the request.
  • response = chatbot(user_message): This is the core of our chatbot. We send the user_message to our loaded chatbot pipeline.
  • bot_response = response[0]['generated_text']: The conversational pipeline returns a structured response. We access the generated text from the first element of the list, specifically under the key 'generated_text'.
  • return jsonify({'response': bot_response}): We send the chatbot’s response back to the frontend as a JSON object.

Running the Flask Application

Finally, add this at the end of your app.py file to run the server:

if __name__ == '__main__':
    app.run(debug=True)
  • if __name__ == '__main__':: This ensures that the code inside this block only runs when the script is executed directly (not when it’s imported as a module).
  • app.run(debug=True): This starts the Flask development server. debug=True is very useful during development as it provides helpful error messages and automatically reloads the server when you make changes to your code.

Creating the User Interface (HTML)

Now, let’s create the visual part of our chatbot. Create a folder named templates in your project directory. Inside the templates folder, create a file named index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Chatbot</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
        .chat-container { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        .chat-box { height: 300px; overflow-y: scroll; border: 1px solid #ddd; padding: 10px; margin-bottom: 15px; border-radius: 4px; }
        .message { margin-bottom: 10px; }
        .user-message { text-align: right; color: blue; }
        .bot-message { text-align: left; color: green; }
        .input-area { display: flex; }
        #userInput { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px; }
        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <div class="chat-container">
        <h1>My Simple Chatbot</h1>
        <div class="chat-box" id="chatBox">
            <div class="message bot-message">Hello! How can I help you today?</div>
        </div>
        <div class="input-area">
            <input type="text" id="userInput" placeholder="Type your message here...">
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>

    <script>
        async function sendMessage() {
            const userInput = document.getElementById('userInput');
            const messageText = userInput.value.trim();
            if (messageText === '') return;

            // Display user message
            appendMessage('user-message', messageText);
            userInput.value = ''; // Clear input

            try {
                // Send message to Flask backend
                const response = await fetch('/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ message: messageText }),
                });

                const data = await response.json();
                if (data.response) {
                    appendMessage('bot-message', data.response);
                } else if (data.error) {
                    console.error('Error from server:', data.error);
                    appendMessage('bot-message', 'Sorry, I encountered an error.');
                }
            } catch (error) {
                console.error('Network error:', error);
                appendMessage('bot-message', 'Sorry, I cannot connect to the server.');
            }
        }

        function appendMessage(className, text) {
            const chatBox = document.getElementById('chatBox');
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message', className);
            messageDiv.textContent = text;
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to the bottom
        }

        // Allow sending messages by pressing Enter key
        document.getElementById('userInput').addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>
  • HTML Structure: Sets up a basic page with a title, a container for the chat, a chat-box to display messages, and an input-area for typing messages and sending them.
  • CSS Styling: Provides basic styling to make the chatbot look presentable.
  • JavaScript (<script> tag):
    • sendMessage() function:
      • Gets the text from the user input field.
      • Displays the user’s message in the chat-box.
      • Clears the input field.
      • Uses fetch to send a POST request to the /chat endpoint on our Flask server.
      • Receives the JSON response from the server and displays the chatbot’s reply.
      • Includes basic error handling for network issues or server errors.
    • appendMessage() function: A helper to create and add new message div elements to the chat-box and automatically scroll to the latest message.
    • Enter Key Functionality: Adds an event listener to the input field so pressing Enter also sends the message.

Running Your Chatbot

  1. Ensure your virtual environment is active.
  2. Navigate to your project directory in the terminal.
  3. Run the Flask application:
    bash
    python app.py
  4. Open your web browser and go to http://127.0.0.1:5000/
    • 127.0.0.1 is your local computer’s address.
    • 5000 is the default port Flask runs on.

You should now see your chatbot interface! You can type messages, and the chatbot, powered by the pre-trained DialoGPT model, will respond.

Next Steps and Improvements

This is a very basic chatbot. Here are some ideas to make it more advanced:

  • Conversation History: The current implementation doesn’t remember previous turns in the conversation. You would need to pass a history of messages to the chatbot pipeline for more coherent responses.
  • More Powerful Models: Explore other models available on Hugging Face, such as GPT-2, GPT-3 (if you have API access), or specialized task models.
  • Error Handling: Implement more robust error handling for various scenarios.
  • Deployment: Learn how to deploy your Flask application to a cloud platform like Heroku, AWS, or Google Cloud so others can use it.
  • User Interface: Enhance the UI with more features like typing indicators, timestamps, and better styling.

Conclusion

Congratulations! You’ve successfully built a simple chatbot using Flask and a pre-trained model. This project demonstrates how to combine web development with powerful AI capabilities. Keep experimenting and building – the world of AI and web development is vast and exciting!

Comments

Leave a Reply

More posts