Image Classification Using Hugging Face API

Image classification is a crucial task in computer vision that involves categorizing images into predefined classes. Thanks to AI and deep learning, pre-trained models make this process easier than ever. In this guide, we will use the Hugging Face API and the google/vit-base-patch16-224 model to classify images with minimal effort.

To simplify this more, Image classification is a process of assigning labels or classes to an entire image. For example you will upload an image and system will provide you the detail of the image like different properties of the uploaded image.

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 Image Classification?

Pre-trained AI Models: No need to train models from scratch.

Simple API Integration: Just a few lines of code.

Cloud-based Inference: No powerful hardware required.

High Accuracy: Models are optimized for real-world applications.

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_xxxxxxxxxxxxxxxxxxxxxxxx

Step 2: Setup Route

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('/image-manipulation', [HuggingFaceController::class, 'index']);
Route::post('/upload', [HuggingFaceController::class, 'classifyImage'])->name('classify.image');

Step 3: HuggingFaceController.php

Now setup your controller as shown below.

    public function index()
    {
        return view('huggingface.image-classifier');
    }

    public function classifyImage(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg|max:2048',
        ]);

        $image = $request->file('image');
        $imagePath = $image->store('uploads', 'public'); // Save image in public storage
        $imageUrl = asset('storage/' . $imagePath); // Get the accessible URL

        $imageData = file_get_contents($image->getRealPath());

        try {
            $response = Http::withHeaders([
                'Authorization' => 'Bearer ' . env('HUGGINGFACE_TOKEN'),
                'Content-Type'  => 'application/octet-stream',
            ])->withBody($imageData, 'application/octet-stream')
                ->post('https://api-inference.huggingface.co/models/google/vit-base-patch16-224');
        } catch (\Exception $e) {
            return back()->with('error', 'API request failed: ' . $e->getMessage());
        }

        $result = json_decode($response->body(), true);

        return view('huggingface.image-classifier', [
            'result' => $result,
            'imageUrl' => $imageUrl // Send image URL to view
        ]);
    }

Step 4: image-classifier.blade.php

Next step is to setup your view file to render the image and show results that comes from Hugging Face API.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Classifier</title>
    <script src="https://cdn.tailwindcss.com"></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-lg text-center">
        <h1 class="text-2xl font-bold mb-4 text-gray-700">Upload an Image for Classification</h1>
        
        <!-- Image Upload Form -->
        <form action="{{ route('classify.image') }}" method="POST" enctype="multipart/form-data" class="mb-4">
            @csrf
            <div class="flex flex-col items-center">
                <!-- Image Preview -->
                <img id="imagePreview" class="hidden w-48 h-48 object-cover rounded-lg shadow mb-4" />

                <input type="file" name="image" id="imageInput" required class="border p-2 rounded-lg w-full mb-2">
                
                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold">
                    Classify Image
                </button>
            </div>
        </form>

        <!-- Show Uploaded Image -->
        @if(isset($imageUrl))
            <h2 class="text-xl font-semibold mt-4 text-gray-700">Uploaded Image:</h2>
            <img src="{{ $imageUrl }}" alt="Uploaded Image" class="w-48 h-48 object-cover rounded-lg shadow mt-2">
        @endif

        <!-- Display Classification Results -->
        @if(isset($result) && is_array($result))
            <h2 class="text-xl font-semibold mt-4 text-gray-700">Classification Result:</h2>
            <div class="bg-gray-200 p-4 rounded-lg mt-2 shadow">
                <ul class="text-left space-y-2">
                    @foreach($result as $item)
                        <li class="flex justify-between bg-white p-2 rounded shadow">
                            <span class="font-semibold">{{ $item['label'] }}</span>
                            <span class="text-blue-600">{{ number_format($item['score'] * 100, 2) }}%</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <script>
        // Image preview before upload
        document.getElementById('imageInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imagePreview = document.getElementById('imagePreview');
                    imagePreview.src = e.target.result;
                    imagePreview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>