Lumina

Lumina is a live text-to-speech web app that turns web articles or pasted text into natural-sounding audio using Google Gemini.

It runs fully in the browser, highlights paragraphs during playback, and lets you jump around the narration with a click.

Live site | GitHub repository

Lumina interface

What it does

Extracts main article text from a URL and narrates it with AI voices.
Narrates pasted text with the same playback and voice controls.
Lets you choose narrator voice and playback speed.
Highlights paragraphs during playback and supports click-to-jump.
Runs entirely in the browser with no backend.

How it works

You provide a URL or paste text.
For URL mode, Gemini uses search grounding to pull the primary article content.
The text is split into paragraph-sized chunks for TTS reliability.
Each chunk is sent to Gemini TTS and returned as base64 audio.
The app decodes the audio and queues it with the Web Audio API, prefetching upcoming chunks for smooth playback.

Tech stack

React + TypeScript + Vite
@google/genai client SDK
Web Audio API for streaming playback
Tailwind (CDN) plus custom utility classes for styling

Run locally

Prerequisites

Node.js

Install dependencies:
```
npm install
```
Start the dev server:
```
npm run dev
```
Open the app and enter your Gemini API key when prompted.

API key notes

You need a Google Gemini API key to use the app.
The key is stored in your browser localStorage and is only sent to Gemini APIs.
Click "Disconnect" in the app to clear the stored key.

Build for production

npm run build

Preview the production build:

npm run preview