DEV Community: Uchit Chakma

Building an AI Auto-Caption Tool for Videos with React + WebAssembly

Uchit Chakma — Sun, 07 Jun 2026 00:39:05 +0000

Building an AI Auto-Caption Tool for Videos with React + WebAssembly

Caption generation is one of the most in-demand features in video editing today. Social media creators need captions for Instagram Reels, TikTok, YouTube Shorts, and more. Traditional server-based solutions require expensive GPU infrastructure for transcription and rendering. But what if you could do everything in the browser?

In this article, I will walk through the architecture of building a client-side auto-caption tool using React, WebAssembly, and modern browser APIs. The approach we used for Captionator keeps everything on the user's machine — no uploads, no server costs, and complete privacy.

Why Client-Side Processing?

Most video caption tools follow a server-based architecture. You upload a video, it gets processed on the backend, and you download the result. This works, but it has drawbacks:

Upload times for large video files
Server costs for GPU-backed transcription
Privacy concerns when handling sensitive footage
File size limitations

Modern browsers have evolved dramatically. With WebAssembly (Wasm), we can run computationally intensive tasks directly in the browser at near-native speed. Combined with the Web Audio API for audio extraction and Canvas API for video rendering, a fully client-side caption tool is not just possible — it is practical.

The Core Architecture

Our stack for Captionator looks like this:

Frontend: React with TypeScript
Audio Processing: Web Audio API + WebAssembly-ported Whisper model
Video Rendering: HTML5 Canvas + WebCodecs API
Styling: CSS-in-JS with custom animation engine

The audio transcription step is the hardest part. Speech-to-text models are typically large and require GPU acceleration. However, with quantised Whisper models compiled to WebAssembly via ONNX Runtime Web, we can run inference directly in the browser.

Step 1: Audio Extraction

Before we can transcribe, we need raw audio from the video file. The Web Audio API makes this straightforward:

const audioContext = new AudioContext();
const response = await fetch(videoFile);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

This gives us the raw PCM audio data, which we can feed into our transcription model.

Step 2: Running Transcription in the Browser

For the transcription engine, we use a quantised version of OpenAI's Whisper model compiled to WebAssembly. ONNX Runtime Web handles the inference:

import { InferenceSession } from 'onnxruntime-web';

const session = await InferenceSession.create(whisperModelPath);
const feeds = { input: new Tensor('float32', audioData, dimensions) };
const results = await session.run(feeds);

The key optimisation here is model quantisation. A full Whisper model is around 1.5GB. By quantising to 8-bit integers and trimming unnecessary layers, we get it down to about 300MB while maintaining over 95% accuracy.

Step 3: Word-Level Timing

Raw transcription gives you text but not timing. For animated captions, we need word-level timestamps. This requires a forced alignment pass after the initial transcription.

The Wav2Vec2 alignment model, also compiled to WebAssembly, handles this. It maps each word to its exact position in the audio timeline. This is what enables those smooth, perfectly synced caption animations.

Step 4: Rendering Captions onto Video

This is where the magic happens. Using Canvas and WebCodecs, we decode the original video frame by frame and overlay captions:

const decoder = new VideoDecoder({
  output: frame => {
    ctx.drawImage(frame, 0, 0);
    renderCaptions(ctx, currentTime, captions);
    frame.close();
  }
});

The caption renderer supports customisable styles — font, colour, animation, position. Each caption word gets its own animation properties: scale, opacity, and position offsets that create that viral "MrBeast-style" effect.

Step 5: Export Options

Users need different output formats. We support:

MP4 with baked-in captions — using Canvas captureStream + MediaRecorder2. SRT file export — for professional editing workflows
WebVTT export — for web video players

The SRT export is particularly useful for YouTubers who want to upload subtitle files separately.

Performance Considerations

Running Whisper in the browser is not trivial. Here are the key optimisations we made:

SIMD acceleration: WebAssembly SIMD instructions speed up matrix operations by 3-4x
Multi-threading: SharedArrayBuffer + Web Workers distribute the workload across CPU cores
Progressive processing: Transcription starts as soon as enough audio is buffered — no need to wait for the full extract

On a modern M-series Mac or a high-end Windows laptop, transcription completes in about 30% of the video duration. A 2-minute video transcribes in roughly 40 seconds.

What About Mobile?

Mobile browsers have less memory and slower CPUs. For mobile support, we fall back to a smaller distilled Whisper model (the "tiny" variant) that runs in under 100MB of RAM. Accuracy drops slightly but remains above 90%.

The Business Case

Building a client-side tool eliminates server costs entirely. For a startup or indie developer, this is massive. No GPU servers to rent, no bandwidth costs for video uploads, no storage for processed files.

This is exactly why we built Captionator the way we did. It processes everything locally, stays free to use, and handles videos of any length since there are no upload limits.

Future Improvements

We are exploring several enhancements:

GPU acceleration via WebGPU — for even faster transcription
Language detection — auto-detect and transcribe 50+ languages
Emoji insertion — automatically add emojis based on speech sentiment
Batch processing — caption multiple videos in sequence

Conclusion

Client-side video processing is not just a gimmick. It is a legitimate architecture choice that saves money, protects user privacy, and delivers a better experience. With modern WebAssembly, Canvas, and WebCodecs APIs, the browser has become a powerful media processing platform.

If you are building a video tool, consider this approach. Your users will thank you for the speed and privacy. And your AWS bill will thank you for the zero server costs.

Check out Captionator to see the architecture in action. The entire tool is open for testing — no signup needed, just upload and go.

Building a Real-Time Chat Feature with Django Channels and React

Uchit Chakma — Fri, 05 Jun 2026 00:10:07 +0000

Building a Real-Time Chat Feature with Django Channels and React

Real-time features have become table stakes for modern web applications. Whether it is a customer support widget, a collaborative tool, or a social platform, users expect instant communication without page refreshes. In this article, I will walk through how we built a production-ready real-time chat feature using Django Channels and React at UCDREAMS.

Why Django Channels?

Django is traditionally synchronous. It handles one request at a time per worker. This works fine for standard HTTP requests, but WebSocket connections require persistent, bidirectional communication. Django Channels extends Django to handle WebSockets, background tasks, and asynchronous protocols alongside traditional HTTP.

The beauty of Channels is that it does not replace Django. It layers on top, letting you keep your existing models, ORM, authentication, and admin panel while adding real-time capabilities. For a team already invested in Django, this is a massive advantage over introducing an entirely separate real-time server.

Setting Up the Backend

Start by installing Django Channels and a channel layer. Redis is the recommended backend for production use:

channels==4.0.0
channels-redis==4.2.0
daphne==4.0.0

Configure your Django settings:

INSTALLED_APPS = [
    ...
    "channels",
]

ASGI_APPLICATION = "your_project.asgi.application"

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("127.0.0.1", 6379)],
        },
    },
}

Building the WebSocket Consumer

The consumer handles WebSocket connections:

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
        self.room_group_name = f"chat_{self.room_name}"
        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
        await self.accept()

    async def disconnect(self, close_code):
        await self.channel_layer.group_discard(self.room_group_name, self.channel_name)

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json["message"]
        await self.channel_layer.group_send(
            self.room_group_name,
            {"type": "chat_message", "message": message, "user": self.scope["user"].username},
        )

    async def chat_message(self, event):
        await self.send(text_data=json.dumps({
            "message": event["message"],
            "user": event["user"],
        }))

The React Frontend

On the React side, we use the native WebSocket API:

import React, { useState, useEffect, useRef } from "react";

const Chat = ({ roomName, username }) => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const ws = useRef(null);

  useEffect(() => {
    ws.current = new WebSocket(`ws://localhost:8000/ws/chat/${roomName}/`);
    ws.current.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setMessages((prev) => [...prev, data]);
    };
    return () => ws.current.close();
  }, [roomName]);

  const sendMessage = () => {
    if (input.trim()) {
      ws.current.send(JSON.stringify({ message: input }));
      setInput("");
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i} className="message"><strong>{msg.user}:</strong> {msg.message}</div>
        ))}
      </div>
      <div className="input-area">
        <input value={input} onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === "Enter" && sendMessage()} />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
};

Handling Authentication

In production, you will want authenticated WebSocket connections. Django Channels provides AuthMiddlewareStack which makes the user available in self.scope.user. For token-based auth with React, pass the token during connection.

Scaling Considerations

For production deployment, consider these points:

Redis Clustering - Use Redis Sentinel or Redis Cluster for high availability
Daphne for Production - Run Daphne as your ASGI server
Horizontal Scaling - Django Channels with Redis allows multiple app servers to share the channel layer
Message Persistence - Store messages in your database for history
Rate Limiting - Implement per-user rate limiting
Connection Management - Handle reconnection with exponential backoff

Real-World Implementation

At UCDREAMS (https://ucdreams.com), we have implemented this architecture for several client projects. One notable implementation powers a real-time customer support dashboard handling thousands of concurrent connections. The same pattern extends beyond chat to live notifications, collaborative editing, and real-time analytics.

You can also check out Captionator (https://captionator.ucdreams.com), a project where real-time WebSocket communication plays a key role in delivering captioning services with minimal latency.

Conclusion

Django Channels plus React gives you a powerful, scalable foundation for real-time features. The learning curve is gentle if you already know Django and React, and the architecture scales from a simple chat room to complex real-time applications. For custom web application development tailored to your business needs, reach out to UCDREAMS.

React + WordPress: The Full-Stack Combo That Powers Modern Web Applications

Uchit Chakma — Thu, 04 Jun 2026 00:07:25 +0000

If you think WordPress is just for blogs and React is just for single-page apps, you're missing the biggest trend in modern web development. Combining React with WordPress gives you the best of both worlds: a powerful CMS backend with a blazing-fast, component-driven frontend.

At UCDREAMS, we've built everything from brochure sites to full-scale booking platforms using exactly this stack. Here's why it works, and how you can use it too.

Why WordPress + React?

WordPress powers over 40% of the web. Its REST API (and now the GraphQL API via WPGraphQL) makes it a headless CMS that can feed content to any frontend. React takes that content and turns it into a smooth, app-like experience.

The magic happens when you:

Use WordPress as your content admin panel (clients love it)
Expose content via REST or GraphQL APIs
Build a React frontend that fetches and renders that content dynamically

Setting Up the Stack

Step 1: WordPress as a Headless CMS

Install WordPress as usual. Add the WPGraphQL plugin (or use the built-in REST API). Create custom post types with ACF (Advanced Custom Fields) for structured content.

For example, a portfolio site might have:

Custom post type: projects
Fields: client name, tech stack, live URL, screenshots
Categories: web, mobile, branding

Step 2: Build Your React Frontend

Create a React app (Next.js is our preference at UCDREAMS for SSR/SEO benefits):

const API_URL = 'https://yourdomain.com/graphql';

async function getProjects() {
  const query = `{ projects { nodes { title slug acf { clientName techStack } } } }`;
  const res = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query })
  });
  return res.json();
}

Step 3: Deploy and Connect

Deploy React on Vercel, Netlify, or your own server. Point your WordPress domain or subdomain to the React frontend. Use rewrites so /about and /contact still feel like a normal site.

Real-World Use Cases

E-commerce: WooCommerce backend + React storefront = custom checkout flows, real-time inventory, and seamless UX.

Booking Platforms: WordPress manages availability and bookings via plugins; React renders a calendar-based UI.

Portfolio/Agency Sites: Clients edit content in WordPress; the live site is a lightning-fast React app.

That's exactly the architecture we used at UCDREAMS for several client projects. It gives non-technical clients full control over content while developers control the UI layer.

Pros and Cons

Pros	Cons
Clients use familiar WP admin	Extra server for React rendering
Fast, interactive frontend	More complex deployment
SEO-friendly with Next.js	Initial setup takes longer
Scalable content structure	Caching needs careful planning

When Should You NOT Use This Combo?

Simple 5-page brochure site? Just use vanilla WordPress.
You have no developer on the team? Stick with page builders.
Real-time features (chat, live updates)? Consider a full MERN stack.

But for mid-to-large content sites that need a modern frontend experience? WordPress + React is the sweet spot.

Getting Started

If you're a developer, spin up a local WordPress instance, add WPGraphQL, and build a tiny React app that fetches posts. You'll see the potential in under an hour.

If you need help building something production-ready, our team at UCDREAMS specializes in WordPress + React integrations, custom plugin development, and headless WordPress architecture. We're a Bangalore-based digital solutions agency with experience across e-commerce, booking platforms, and custom web applications.

What's your experience been with headless WordPress? Drop a comment below!

How to Hire a React.js Developer in Bangalore

Uchit Chakma — Tue, 02 Jun 2026 23:52:21 +0000

How to Hire a React.js Developer in Bangalore: A Founder's Guide

Finding the right React.js developer can make or break your project. In Bangalore, where the tech talent pool is deep but competitive, knowing how to identify, evaluate, and hire the right person is a skill in itself.

I've hired React developers for my own agency at UCDREAMS and for client projects over the last three years. Here's what I've learned about finding great React talent in India's Silicon Valley.

Why Bangalore?

Bangalore isn't just India's IT hub — it's the single largest concentration of React developers in the country. With over 8,000 tech companies, countless startups, and a thriving developer community, the city offers access to talent across every experience level and budget.

Where to Find React Developers in Bangalore

LinkedIn remains the most reliable platform. Use filters for "Bangalore" + "React.js" and look for candidates with 2+ years specific React experience, GitHub profiles, and community involvement.

GitHub

Bangalore has a vibrant open-source community. Search for React projects with contributors based in Bangalore.

Developer Communities

React Bangalore Meetup: One of India's largest React communities
Dev.to and Hashnode: Many Bangalore developers write here
JSConf India: Great for networking with top talent

What to Look For

Technical Skills

Beyond React itself, look for TypeScript, Next.js, state management (Redux, Zustand, React Query), testing (Jest, RTL), and modern styling (Tailwind, CSS-in-JS).

Key Interview Questions

How does React's reconciliation algorithm work?
How would you optimize component re-renders?
What's the difference between controlled and uncontrolled components?
How do you handle state in a large application?

Salary Expectations in Bangalore (2026)

Junior (0-2 yrs): ₹4-8 LPA
Mid-level (2-5 yrs): ₹10-20 LPA
Senior (5+ yrs): ₹22-40 LPA
Architect/Lead: ₹40-70 LPA

Hiring Models

Full-time Employee

Best for long-term projects needing deep product knowledge.

Freelancer / Contractor

Ideal for specific projects with clear scope. Faster to hire, flexible.

Development Agency

When you need a team, not just an individual. Agencies like UCDREAMS provide end-to-end React development with project management, QA, and support.

The Hidden Cost of a Wrong Hire

A bad hire costs more than salary — missed deadlines, technical debt, team morale, and lost opportunities. Start with a small paid project before committing full-time.

Final Advice

If you're a startup looking to build a React app without in-house hiring infrastructure, consider a professional web development agency that handles technical evaluation, scoping, and delivery.

This guide is based on experience at UCDREAMS, where we build React applications for startups and businesses across India, the UAE, and Australia.