Building a Text Summarizer

In this blog post, I’ll walk you through how to set up a simple project that summarizes text using BART, a powerful model developed by Facebook AI Research (FAIR) and available via Hugging Face’s model hub. We’ll use Flask as the backend server and leverage Google Colab’s GPU resources for faster, more efficient text summarization. By connecting Colab to our local environment using Ngrok for tunneling, we’ll enable GPU-powered inference directly from your local machine. Here’s the complete breakdown of our project setup, with step-by-step instructions, code snippets, and screenshots to guide you.

 

Project Directory Structure

Text_Summary_Project/ (main project directory)

  • app.py (Flask app backend)
  • requirements.txt (lists all required packages)
  • static/ (contains stylesheets)
    • styles.css (styling for the frontend)
  • templates/ (contains HTML files)
    • index.html (main webpage)

Step 1: Setting Up the Environment

To keep things organized and dependencies isolated, create a virtual environment in your project directory. Run the following command in your terminal:


$ python3 -m venv venv

$ source venv/bin/activate

 

Step 2: Flask Backend (app.py)

In app.py, we set up a Flask application to process requests from the frontend and make requests to Colab for summarization.

Here’s a sample code snippet for app.py:

 

Text Summarizer using Bert

 

I initially planned to run my Flask application on the default port 5000. However, when I checked if it was available using the command lsof -i :5000, I found that it was already occupied by another process. To avoid any conflicts, I decided to use port 8000 instead. This simple check helped ensure that my application would run smoothly without interference.

Step 3: Frontend – HTML Template (index.html)

In templates/index.html, create a simple form to enter the text and get the summary. Here’s a quick HTML structure for your page:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BART Summarizer</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/style.css"> <!-- Your custom CSS -->
</head>
<body class="bg-light">
    <div class="container mt-5">
        <h1 class="text-center text-primary">Text Summarizer Using BART</h1>
        <form id="summarize-form" class="mt-4">
            <div class="form-group">
                <textarea id="text-input" name="text" class="form-control" rows="10" placeholder="Enter text to summarize"></textarea>
            </div>
            <button type="submit" class="btn btn-success btn-block">Summarize</button>
        </form>

        <h2 class="mt-4">Summary:</h2>
        <div id="summary-result" class="alert alert-info" role="alert"></div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script>
        document.getElementById('summarize-form').addEventListener('submit', function(event) {
            event.preventDefault();

            const text = document.getElementById('text-input').value;

            fetch('/summarize', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `text=${encodeURIComponent(text)}`
            })
            .then(response => response.json())
            .then(data => {
                const summaryResult = document.getElementById('summary-result');
                if (data.summary) {
                    summaryResult.innerText = data.summary;
                    summaryResult.classList.remove('alert-info');
                    summaryResult.classList.add('alert-success');
                } else {
                    summaryResult.innerText = "Error: " + data.error;
                    summaryResult.classList.remove('alert-info');
                    summaryResult.classList.add('alert-danger');
                }
            });
        });
    </script>
</body>
</html>

 

Step 4: Colab Code for BART Summarization

In your Colab notebook, install the Hugging Face Transformers library and set up the BART model. Here’s a minimal setup to load the model and create a summarization endpoint:


AI Text Summarization

Run the code and note the public URL generated by Ngrok; use it in app.py as COLAB_BACKEND_URL.

AI Text Summarizer

Step 5: Running the Flask App Locally

In your terminal, start the Flask app:

 

$ Python3 app.py

 

Open your browser and go to http://localhost:8000/. Enter a sample paragraph, click the “Summarize” button, and your text summary should appear.

 

Build Text Summarizer using Bert

 

That’s it! You now have a working text summarization app using BART, Flask, and Colab. With Ngrok, your local project is accessible online. Keep experimenting and building awesome things. Happy coding!