Harsh

Posted on Mar 1

VoiceCanvas: Train Your Own Voice Command Model in the Browser — Free, No Signup!

#devchallenge #javascript #abotwrotethis #weekendchallenge

DEV Weekend Challenge: Community

This is a submission for the DEV Weekend Challenge: Community

The Community

This project is for the AI/ML developer community — especially beginners
who want to train their own custom models without paying for expensive services
or signing up for yet another platform.

When I started learning AI/ML, I faced a frustrating problem: every tool that
let me train a custom model either required a signup, had usage limits, or
needed an API key I had to hide. I just wanted to train a simple voice model
and use it in my project — for free, with full control.

So I built VoiceCanvas.

What I Built

VoiceCanvas is a free, browser-based tool that lets you train your own
custom voice command model — no server, no signup, no API key required.

You can create any voice commands you want (like "Hello", "Stop", "Next"),
record samples, train a neural network entirely in your browser using
TensorFlow.js, and download the trained model files to use in your own projects.

🔗 Live Demo: https://harsh70117-lang.github.io/VoiceCanvas
💻 GitHub: https://github.com/harsh70117-lang/VoiceCanvas

Demo

Step 1: Add Command Classes

Add the voice commands you want to train. For example: "Hello" and "Stop".

harsh70117-lang.github.io

Step 2: Record Voice Samples

Select a class and record 10 samples. A real-time waveform visualizer shows
your audio input while recording.

Step 3: Train Your Model

Click "Start Training" and watch the neural network train entirely in your
browser. No data leaves your device!

Result: 100% Accuracy achieved in seconds! 🎉

Step 4: Live Test

Speak a command and see the model detect it in real time with confidence score.

"Stop" detected with 99.9% confidence!

Step 5: Export & Use

Download your trained model as a ZIP file containing:

model.json — Model architecture
weights.bin — Trained weights
metadata.json — Class information

Use it in any JavaScript project!

How I Built It

Tech Stack:

Vanilla HTML, CSS, JavaScript
TensorFlow.js — in-browser ML training
Web Audio API — microphone access & audio processing
Canvas API — real-time waveform visualization
JSZip — model export as ZIP

The entire app runs client-side. No backend. No database. No cloud.

AI Tools Used: Cursor AI helped with code generation and debugging.

Why This Matters

Tools like Google Teachable Machine exist, but they require a Google account
and don't let you freely download and use your model files without limitations.

VoiceCanvas gives the AI/ML community:

✅ Complete freedom — no signup, no payment
✅ Full ownership — download and use your model anywhere
✅ Privacy — your voice data never leaves your browser
✅ Accessibility — works for anyone building Chrome Extensions, games, or any voice-controlled app

DEV Community