How to Do Text Classification Using Hugging Face API in Laravel

Text classification is a fundamental task in NLP (Natural Language Processing) that categorizes text into predefined labels, such as sentiment analysis, spam detection, or topic classification. With the Hugging Face API, integrating powerful transformer-based models into your Laravel application becomes seamless.

In this article we will se how to do text classification using Hugging Face API in Laravel. For example you will provide a text and as an output we will get labels that justifies the input text like whether its positive, Negative or Neutral etc. To achieve this we will using distilbert/distilbert-base-uncased-finetuned-sst-2-english Model with Hugging Face API.

If you want to know how to get started with Hugging Face API and how to get Access Token, then you can read this article to get a full overview of how to get started with Hugging Face API in PHP Laravel.

Why Use Hugging Face for Text Classification?

Hugging Face provides pre-trained models that save time and computational resources, allowing developers to perform text classification without deep learning expertise. The API handles inference, meaning you don’t need to set up a dedicated machine learning environment.

Step 1: Having Access Token

Make sure you have Hugging Face access token stored anywhere in the project, so that we can use it while dealing with Hugging Face API's. In My case i have stored the access token in my .env file. It should look something like this.

HUGGINGFACE_TOKEN=hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Step 2: Define Routes

I have created two routes here, one for the UI and another is to process the image and for dealing with Hugging face API.

Route::get('/text-classification', [HuggingFaceController::class, 'textClassification']);
Route::post('/text-classification-process', [HuggingFaceController::class, 'textClassificationProcess'])->name('text-classification');

Step 3: HuggingFaceController.php

Now setup your controller as shown below. Feel free to update this according to your needs.

public function textClassification()
    {
        return view('huggingface.text-classification');
    }
    public function textClassificationProcess(Request $request)
    {
        $url = "https://api-inference.huggingface.co/models/distilbert/distilbert-base-uncased-finetuned-sst-2-english";
        $data = ["inputs" => $request->text];
        $response = Http::withHeaders([
            'Authorization' => 'Bearer ' . env('HUGGINGFACE_TOKEN'),
            'Content-Type' => 'application/json',
        ])->post($url, $data);
        $result = $response->json();
        return response()->json([
            'result' => $result
        ]);
    }

Step 4: text-classification.blade.php

Next step is to setup your view file to render the image and show results that comes from Hugging Face API. I have used AJAX and Javascript to make the UI look better but you can use them according to your needs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Classification</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md text-center">
        <h1 class="text-2xl font-bold mb-4 text-gray-700">Text Classification</h1>
        
        <form id="textSubmitForm" class="mb-4">
            <input type="text" id="textInput" placeholder="Enter text here..." class="border p-2 rounded-lg w-full mb-2">
            <button type="submit" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-semibold">
                Submit Text
            </button>
        </form>
        
        <div id="loading" class="hidden text-blue-500 font-semibold">Processing...</div>
        
        <div id="result" class="mt-4 hidden">
            <h2 class="text-xl font-semibold text-gray-700">Result:</h2>
            <div id="classificationResults"></div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $("#textSubmitForm").submit(function(event) {
                event.preventDefault();
                
                var textData = $("#textInput").val();
                if (!textData) {
                    alert("Please enter some text.");
                    return;
                }
                
                $("#loading").removeClass("hidden");
                $("#result").addClass("hidden");
                
                $.ajax({
                    url: "{{ route('text-classification') }}", 
                    type: "POST",
                    data: JSON.stringify({ text: textData }),
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    contentType: "application/json",
                    success: function(response) {
                        if (response.result.length > 0 && response.result[0].length > 0) {
                            let resultsHtml = "";
                            response.result[0].forEach(result => {
                                let label = result.label;
                                let score = (result.score * 100).toFixed(2);
                                let colorClass = label === "POSITIVE" ? "bg-green-500" : "bg-red-500";
                                resultsHtml += `
                                    <div class="mt-2">
                                        <p class="font-semibold text-gray-700">${label} - ${score}% Confidence</p>
                                        <div class="w-full bg-gray-200 rounded-full h-4 mt-1 relative">
                                            <div class="${colorClass} h-4 rounded-full" style="width: ${score}%;"></div>
                                        </div>
                                    </div>
                                `;
                            });
                            $("#classificationResults").html(resultsHtml);
                            $("#result").removeClass("hidden");
                        }
                    },
                    error: function() {
                        alert("Error submitting text.");
                    },
                    complete: function() {
                        $("#loading").addClass("hidden");
                    }
                });
            });
        });
    </script>
</body>
</html>