Voice Transcript Widget

An AI-powered voice transcription widget that focuses on accurate, low-latency transcription using Google's Gemini Live API and an AI-assisted "Smart Word Coalescer". The widget provides a polished UI with animated, handwriting-style text rendering and a fast, more reliable transcription experience.

Features

• 🤖 Smart Word Coalescer: An AI-assisted component that coalesces noisy transcription chunks into correct, well-spaced English words. It provides an immediate preview while refining results in the background for improved accuracy and readability.
• 📊 Audio Visualizer: Live waveform/level visualization of the input audio stream.
• 🌙 Dark/Light Mode: Theme-aware UI with Tailwind CSS support.
• 📱 Responsive Design: Works across desktop and mobile devices.
• ✨ Animated Text Rendering: Handwriting-style stroke/draw animation powered by GSAP ( a fast, lightweight animation engine) for a polished text reveal effect.

Prerequisites

• Node.js 18+
• A Google Gemini API Key (get one from AI Studio)

Setup

1. Install dependencies:

   npm install

2. Configure API Key:

   • Copy .env.example to .env
   • Add your Gemini API key:

   VITE_GEMINI_API_KEY=your_api_key_here
   

3. Run the development server:

   npm run dev

4. Open in browser: Navigate to http://localhost:3000

Usage

1. Click the "INIT_SEQUENCE_START" button to begin recording.
2. Allow microphone access when prompted.
3. Speak into your microphone — the widget shows an immediate preview of words as you speak, and the Smart Word Coalescer refines the text in the background for better spacing and accuracy.
4. Click "TERMINATE" to stop recording and ensure the microphone is closed and no audio is sent to the API.
5. Click "TRY AGAIN" to reset the session and clear all buffers.

Project Structure

voice-transcript-widget/
├── src/
│   ├── components/
│   │   ├── ui/
│   │   │   ├── AnimatedButton.tsx   # Animated button component
│   │   │   └── GlowCard.tsx         # Card with glow effect
│   │   └── VoiceTranscriptWidget.tsx # Main widget component
│   ├── hooks/
│   │   └── useGeminiLive.ts         # Gemini Live API hook
│   ├── App.tsx                       # Main app component
│   ├── main.tsx                      # Entry point
│   └── index.css                     # Global styles
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
├── vite.config.ts
└── README.md

Tech Stack

• React 18+ - UI library
• TypeScript - Type safety and developer ergonomics
• Vite - Fast dev server and bundling
• Tailwind CSS - Utility-first styling
• GSAP - Smooth, high-performance animations for SVG stroke drawing
• Lucide React - Icon set
• @google/genai - Gemini Live / Models SDK for live transcription and server-side coalescing

Customization

Changing the Theme Colors

Edit the CSS variables in src/index.css:

:root {
  --bg-color: #ffffff;
  --text-primary: #09090b;
  /* ... other variables */
}

.dark {
  --bg-color: #09090b;
  --text-primary: #ffffff;
  /* ... other variables */
}

Using the Widget Component

You can import and use the widget in your own projects:

import { VoiceTranscriptWidget } from './components/VoiceTranscriptWidget';

function App() {
  return (
    <div className="h-[500px]">
      <VoiceTranscriptWidget />
    </div>
  );
}

Hooks & Important Modules

useGeminiLive Hook

Provides microphone capture, audio pipeline, and a live connection to Gemini's Live API. Key fields:

const {
  isLive,        // boolean - recording state
  transcription, // string[] - raw transcribed chunks (fed to coalescer)
  error,         // string | null - error message
  start,         // () => void - start recording
  stop,          // () => void - stop recording (ensures mic closed)
  reset,         // () => void - reset session
  analyserRef,   // ref to AnalyserNode for visualizer
} = useGeminiLive();

useWordCoalescer Hook

This project adds an AI-assisted coalescer separate from the raw transcription stream. It:

• Accepts raw chunks from useGeminiLive.
• Shows immediate preview words for low-latency feedback.
• Batched/ background refinement via Gemini model to correct spacing and join split words.
• Exposes addChunk, flush, and reset for integration with the widget.

const { words, isProcessing, addChunk, flush, reset } = useWordCoalescer();

Credits

Built using ideas from various open-source examples and the Gemini Live API. Thanks to the contributors of the original components used here.

• HelloStartup inspiration: https://github.com/mageshsridhar/HelloStartup