DEV Community: Oluwamayowa Adeoni

Real-time Object Detection with TensorFlow.js

Oluwamayowa Adeoni — Thu, 12 Jun 2025 09:34:18 +0000

Run computer vision models in the browser — no server, no latency.

Deploying deep learning models in production often requires powerful servers, GPU hosting, and network latency trade-offs. But what if your users could run object detection models right in their browser, powered by WebGL?

That’s exactly what TensorFlow.js makes possible — and in this post, you’ll learn how to build a real-time object detection app that runs entirely on the client-side.

Why TensorFlow.js?

Runs directly in the browser
Uses WebGL for GPU acceleration
No server, no backend, no latency
Works offline
Ideal for privacy-sensitive apps

What You’ll Need

TensorFlow.js (npm or CDN)

COCO-SSD model or YOLO (pretrained)

A webcam + browser

Basic knowledge of HTML, JS & async functions

Step 1: Set Up HTML + JS Project

Create a simple index.html and include TensorFlow.js + the COCO-SSD model:
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Real-Time Object Detection</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
  </head>
  <body>
    <h2>Real-Time Object Detection</h2>
    <video id="webcam" autoplay playsinline width="640" height="480"></video>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script src="script.js"></script>
  </body>
</html>

Step 2: Capture the Webcam

script.js

const video = document.getElementById('webcam');

async function setupCamera() {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
  });
  video.srcObject = stream;
  return new Promise((resolve) => {
    video.onloadedmetadata = () => resolve(video);
  });
}

Step 3: Load COCO-SSD Model

let model;

async function loadModel() {
  model = await cocoSsd.load();
  console.log("Model loaded.");
}

Step 4: Start Real-Time Detection

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

async function detectFrame() {
  const predictions = await model.detect(video);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  predictions.forEach(pred => {
    ctx.strokeStyle = "#00FFFF";
    ctx.lineWidth = 2;
    ctx.strokeRect(...pred.bbox);
    ctx.font = "18px Arial";
    ctx.fillStyle = "#00FFFF";
    ctx.fillText(pred.class, pred.bbox[0], pred.bbox[1] > 10 ? pred.bbox[1] - 5 : 10);
  });

  requestAnimationFrame(detectFrame);
}

Step 5: Initialize

(async () => {
  await setupCamera();
  await loadModel();
  detectFrame();
})();

Now visit index.html in your browser and grant webcam permission — boom, you’ve got real-time object detection running locally and instantly!

Why This Works at the Edge

Runs 100% client-side

No video upload or cloud inference

Extremely fast thanks to WebGL

Great for offline or privacy-first use cases (e.g. education, field apps, kiosks)

Optional Enhancements

Swap in YOLOv8 via ONNX.js

Add image capture or video recording

Auto-capture and label training data

Build a Chrome Extension or PWA

Real-World Use Cases

Retail analytics (e.g., people counting)

Edge surveillance

Educational AR apps

Browser-based prototyping for ML engineers

No-backend demos for product teams

Useful Resources

Optimizing React Performance in Large Applications

Oluwamayowa Adeoni — Thu, 12 Jun 2025 08:29:25 +0000

Tips and patterns for keeping your React apps fast and maintainable

As your React app grows, performance bottlenecks and code complexity can sneak in. This post walks through battle-tested tips, tools, and patterns that will help you keep your large React apps fast, responsive, and developer-friendly.

Let’s get started

1. Use `React.memo` Smartly

React.memo prevents unnecessary re-renders of functional components by shallowly comparing props.

const ExpensiveComponent = React.memo(({ data }) => {
  // Only re-renders if props change
  return <div>{data.name}</div>;
});

Use when:

The component renders frequently.
Props rarely change.
Re-rendering is costly.

2. Split Your Bundle with `React.lazy`

Code-splitting helps you load parts of your app only when needed, keeping the initial load fast.

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

🔍 Works great with route-based splitting via React Router or Next.js dynamic imports.

3. Avoid Anonymous Functions in JSX

Inline arrow functions create new references on every render, causing unnecessary re-renders.

Avoid:

<button onClick={() => doSomething(id)}>Click</button>

Instead:

const handleClick = useCallback(() => doSomething(id), [id]);

<button onClick={handleClick}>Click</button>

4. Normalize Your State Shape

In large apps, deeply nested state structures lead to unnecessary updates. Flatten and normalize your state for performance.

Use libraries like:

zustand or jotai for simplified state management
redux-toolkit with createEntityAdapter for normalized lists

5. Clean Up with `useEffect`

Avoid memory leaks and stale references by always cleaning up effects:

useEffect(() => {
  const id = setInterval(doSomething, 1000);

  return () => clearInterval(id); // clean up
}, []);

6. Measure First, Optimize Later

Use tools like:

React DevTools Profiler
Chrome Lighthouse
why-did-you-render

Install why-did-you-render for development:

npm install @welldone-software/why-did-you-render

import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';

whyDidYouRender(React, { trackAllPureComponents: true });

7. Use Production-Optimized Builds

Always check:

Are you using NODE_ENV=production?
Are unused imports being tree-shaken?

For Next.js: it does this automatically.
For Create React App: run npm run build.

8. Consider Virtualization for Large Lists

For huge lists (e.g. 1,000+ items), use:

import { FixedSizeList as List } from 'react-window';

<List height={400} itemCount={1000} itemSize={35} width={300}>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</List>

Final Thoughts

Performance isn't just about speed — it’s also about maintainability, scalability, and developer happiness.

✅ Measure before optimizing
✅ Use tools, not hacks
✅ Think long-term

Building Scalable AI Apps with React & FastAPI

Oluwamayowa Adeoni — Wed, 11 Jun 2025 07:32:51 +0000

Step-by-step guide to integrating frontend and backend for production ML apps

In the AI era, it’s no longer enough to train great models; you need to deploy them in apps people can actually use.

This guide walks you through building scalable, real-world AI applications using React (or Next.js) on the frontend and FastAPI on the backend. A powerful stack for shipping intelligent tools quickly and effectively.

Architecture Overview

[React / Next.js]  <--->  [FastAPI Backend]  <--->  [ML Model / LLM API]
          ⬆                        ⬇
     User Interface         Business Logic + Inference

Tech Stack

Frontend: React.js or Next.js
Backend: FastAPI (Python, async-ready)
Model Serving: Custom models, Hugging Face, or OpenAI APIs
Database (optional): Supabase, PostgreSQL, MongoDB
Deployment: Vercel (frontend) + Render / Railway / Fly.io (backend)

Step-by-Step Guide

Set Up Your FastAPI Backend

mkdir ml-backend && cd ml-backend
python -m venv venv && source venv/bin/activate
pip install fastapi uvicorn

main.py

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class TextInput(BaseModel):
    text: str

@app.post("/api/analyze/")
def analyze_text(payload: TextInput):
    result = {"length": len(payload.text), "uppercase": payload.text.upper()}
    return result

Run it:

uvicorn main:app --reload

Create the React Frontend

npx create-react-app ml-frontend
cd ml-frontend
npm install axios

App.js

import { useState } from "react";
import axios from "axios";

function App() {
  const [text, setText] = useState("");
  const [result, setResult] = useState(null);

  const handleSubmit = async () => {
    const res = await axios.post("http://localhost:8000/api/analyze/", { text });
    setResult(res.data);
  };

  return (
    <div style={{ padding: "2rem" }}>
      <h2>Text Analyzer</h2>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <br />
      <button onClick={handleSubmit}>Analyze</button>
      {result && (
        <div>
          <p>Uppercase: {result.uppercase}</p>
          <p>Length: {result.length}</p>
        </div>
      )}
    </div>
  );
}

export default App;

Swap in Your ML Model

Let’s plug in a real Hugging Face sentiment classifier:

pip install transformers

from transformers import pipeline
classifier = pipeline("sentiment-analysis")

@app.post("/api/analyze/")
def analyze_text(payload: TextInput):
    result = classifier(payload.text)
    return {"label": result[0]['label'], "score": result[0]['score']}

Deployment Tips

Frontend: Deploy to https://vercel.com
Backend: Use https://render.com or https://railway.app

Enable CORS in FastAPI:

pip install fastapi[all]

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
  CORSMiddleware,
  allow_origins=["*"],
  allow_credentials=True,
  allow_methods=["*"],
  allow_headers=["*"],
)

Using OpenAI or LangChain

Want to make it LLM-powered?

pip install openai

import openai

@app.post("/api/analyze/")
def analyze_text(payload: TextInput):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[{"role": "user", "content": payload.text}]
    )
    return {"reply": response["choices"][0]["message"]["content"]}

Final Thoughts

This stack gives you the best of both worlds:

Python's flexibility for AI/ML
React’s power for interactive UIs

Start simple, scale fast.

DEV Community: Oluwamayowa Adeoni

Real-time Object Detection with TensorFlow.js

Why TensorFlow.js?

What You’ll Need

Step 1: Set Up HTML + JS Project

Step 2: Capture the Webcam

Step 3: Load COCO-SSD Model

Step 4: Start Real-Time Detection

Step 5: Initialize

Why This Works at the Edge

Optional Enhancements

Real-World Use Cases

Useful Resources

Optimizing React Performance in Large Applications

1. Use `React.memo` Smartly

2. Split Your Bundle with `React.lazy`

3. Avoid Anonymous Functions in JSX

4. Normalize Your State Shape

5. Clean Up with `useEffect`

6. Measure First, Optimize Later

7. Use Production-Optimized Builds

8. Consider Virtualization for Large Lists

Final Thoughts

Recommended Reads

Building Scalable AI Apps with React & FastAPI

Architecture Overview

Tech Stack

Step-by-Step Guide

Set Up Your FastAPI Backend

Create the React Frontend

Swap in Your ML Model

Deployment Tips

Using OpenAI or LangChain

Final Thoughts

Useful Links

DEV Community: Oluwamayowa Adeoni

Real-time Object Detection with TensorFlow.js

Why TensorFlow.js?

What You’ll Need

Step 1: Set Up HTML + JS Project

Step 2: Capture the Webcam

Step 3: Load COCO-SSD Model

Step 4: Start Real-Time Detection

Step 5: Initialize

Why This Works at the Edge

Optional Enhancements

Real-World Use Cases

Useful Resources

Optimizing React Performance in Large Applications

1. Use React.memo Smartly

2. Split Your Bundle with React.lazy

3. Avoid Anonymous Functions in JSX

4. Normalize Your State Shape

5. Clean Up with useEffect

6. Measure First, Optimize Later

7. Use Production-Optimized Builds

8. Consider Virtualization for Large Lists

Final Thoughts

Recommended Reads

Building Scalable AI Apps with React & FastAPI

Architecture Overview

Tech Stack

Step-by-Step Guide

Set Up Your FastAPI Backend

Create the React Frontend

Swap in Your ML Model

Deployment Tips

Using OpenAI or LangChain

Final Thoughts

Useful Links

1. Use `React.memo` Smartly

2. Split Your Bundle with `React.lazy`

5. Clean Up with `useEffect`