Building Scalable AI Applications with Next.js and TensorFlow.js

Integrating artificial intelligence into user-facing web applications has transformed how users interact with software. Traditional AI deployments send raw user data across the network to a GPU server, incurring significant cloud infrastructure costs and creating privacy concerns. By running TensorFlow.js inside Next.js, developers can execute deep learning models directly in the user’s browser using WebGL hardware acceleration.

Advantages of Client-Side Machine Learning

Running inference client-side provides several architectural advantages:

• Absolute User Privacy: Sensitive inputs, such as webcam feeds, personal photos, or audio recordings, never leave the client device.
• Zero Cloud Inference Costs: The client’s CPU and GPU execute the math, eliminating recurring cloud API charges for model compute.
• Offline Availability: Models cached in IndexedDB continue working even when the user is completely offline.
• Sub-Millisecond Response Times: Zero network round-trip overhead once the model weights are loaded into browser memory.

Integrating MobileNet for Real-Time Image Classification

Here is a complete, production-ready React component in Next.js that loads the MobileNet model asynchronously and classifies images with confidence metrics:

import React, { useState, useEffect, useRef } from 'react';
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';

export default function VisionClassifier() {
  const [model, setModel] = useState<mobilenet.MobileNet | null>(null);
  const [predictions, setPredictions] = useState<Array<{ className: string; probability: number }>>([]);
  const [isLoading, setIsLoading] = useState(true);
  const imageRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    async function initTensorFlow() {
      await tf.ready();
      const loadedModel = await mobilenet.load({ version: 2, alpha: 1.0 });
      setModel(loadedModel);
      setIsLoading(false);
    }
    initTensorFlow();
  }, []);

  const handleClassify = async () => {
    if (model && imageRef.current) {
      const results = await model.classify(imageRef.current);
      setPredictions(results);
    }
  };

  return (
    <div className="ai-classifier-card">
      <h3>Browser-Based AI Vision</h3>
      {isLoading ? (
        <p>Downloading neural network weights...</p>
      ) : (
        <button onClick={handleClassify}>Classify Sample Image</button>
      )}
      <ul>
        {predictions.map((p, idx) => (
          <li key={idx}>
            {p.className}: <strong>{(p.probability * 100).toFixed(1)}%</strong>
          </li>
        ))}
      </ul>
    </div>
  );
}