WebGPU-accelerated local LLM inference, text-to-speech, video generation, and in-browser rendering. No upload, no render farm, no subscription.
Quick Start · Features · Use Cases · How It Works · Configuration · Requirements · Contributing
Origami AI is a browser-based AI Studio that runs AI-powered applications entirely on your device using WebGPU and WebLLM. No cloud dependency, no data upload, no API calls required (though optional cloud integrations are supported).
Originally a PDF-to-video tool, Origami AI has evolved into a versatile platform for:
- 📹 PDF-to-video creation — AI narration scripts, text-to-speech, and in-browser rendering
- 🎬 Shorts generation — topic-to-vertical-video with AI imagery and voiceovers
- 🎙️ Screen recording — cinematic auto-zoom with DOM telemetry
- 💬 AI assistant chat — local models with image/video analysis
- 🎯 Video scene analysis — MP4 breakdown with timestamped scenes
- 🧠 WebGPU-powered AI — local LLM inference for narration, chat, and analysis
- 🎬 AI narration scripts — generated locally with WebLLM, or via Gemini/OpenAI-compatible APIs
- 🎙️ In-browser TTS — Kokoro.js with multiple voices, no server round-trip
- 📹 In-browser rendering — FFmpeg.wasm composes slides, audio, music, and pan/zoom into MP4 (720p/1080p)
- 🎯 Smart screen recording — auto-zoom on idle, with optional Chrome extension for richer DOM telemetry
- 🔍 Scene-aware video analysis — turn an MP4 into a timestamped scene breakdown
- 💬 AI assistant chat — local WebLLM models or cloud fallback, with image/video attachments
- 🎬 Shorts generator — turn a topic into a vertical short: AI script, image/video generation, TTS voiceover, burned-in captions
- 🔒 Local & privacy-first — API keys and project data are stored locally in your browser
- 🎵 Background music & mixing — auto-ducking under narration with per-slide control
- 📦 Portable projects — export/import a full project (slides, media, audio, settings) as a
.origamiarchive - ⚡ Zero-config startup — works completely offline after first model download
Prerequisites: Node.js ≥ 20.19.0 and a WebGPU-capable browser.
git clone https://github.com/TechMitten/Origami-AI.git
cd Origami-AI
npm install
npm run devOpen http://localhost:3000 in your browser.
| Command | Purpose |
|---|---|
npm run dev |
Express + Vite dev server with HMR (http://localhost:3000) |
npm run build |
Build production client bundle → dist/ |
npm run preview |
Serve the production build locally |
npm run lint |
Run ESLint checks |
npm run stop |
Terminate any active process running on port 3000 |
Optional: install the Chrome extension
The extension adds DOM-level cursor, click, and scroll telemetry for more precise auto-zoom during screen recording. Origami AI also works without it via an in-page fallback.
- Open
chrome://extensions - Enable Developer mode
- Click Load unpacked → select the
chrome-extension/folder
You can also download a packaged ZIP from inside the app (header menu → Download Chrome Extension, or Slide Editor → Slide Media tab). See chrome-extension/README.md.
Upload a presentation deck, generate AI narration scripts per slide, select natural TTS voices, add background music, and export a polished MP4 video — all in your browser.
Describe a topic or concept, and Origami AI will generate a scene-by-scene script, create visuals (AI images or video clips via Pollinations), synthesize voiceovers, and burn in captions for a complete vertical short in minutes.
Record a browser tab or desktop window, and Origami AI automatically tracks mouse interactions and applies smooth, cinematic camera zooms and pans during idle periods.
Chat with local WebLLM models directly in your browser, attach images or video clips for local vision analysis, and get instant answers with zero internet connection required.
Upload an MP4 video to automatically analyze and segment scenes into timestamped summaries and key takeaways.
- Extraction: Upload a PDF deck; slide images and text are extracted automatically via
pdfjs-dist. - Script Generation: An LLM (local WebLLM or your configured API) drafts natural narration per slide.
- Voice Synthesis: Kokoro.js generates high-quality speech audio for each slide's script.
- Visual Editing: Fine-tune scripts, audio timing, slide transitions, and background music in the visual editor.
- Video Rendering: FFmpeg.wasm composes all assets into a 720p or 1080p MP4 directly in your browser.
- Prompt & Setup: Enter a topic, duration (15–90s), tone, aspect ratio (9:16 / 16:9 / 1:1), and visual style.
- Script & Prompt Review: The LLM creates scene-by-scene voiceovers and matching visual prompts for review before generation.
- Asset Generation: Generates images or video clips via Pollinations alongside Kokoro TTS voiceover in parallel.
- Captions & Music: Choose a dynamic caption style (Bold Pop, Karaoke Fill, or Clean Lower Third) and optional soundtrack.
- Client-Side Export: Renders the complete vertical video directly on your device.
Click ⚙️ Settings in the app header to customize your experience:
| Tab | Available Options |
|---|---|
| General | Intro fade timing, post-audio delay, default slide transition, screen recording options |
| TTS Model | Kokoro.js quantization quality (q8 high quality vs. q4 speed) |
| WebLLM | Enable/disable local AI, select models, precision filtering (f16/f32) |
| API | Connect custom OpenAI-compatible providers (Gemini, OpenRouter, Groq, Ollama, etc.) |
| AI Prompt | Customize narration tone, length, and generation behavior |
Origami AI works with zero API keys out of the box using local in-browser WebLLM and Kokoro TTS.
If you choose to use cloud AI providers, all settings and keys are configured directly in the frontend:
- OpenAI-compatible APIs: Open ⚙️ Settings → API to set your endpoint base URL, model name, and API key. Credentials are saved locally in your browser's IndexedDB and never stored on the server.
- Shorts Image & Video Generation: Powered by Pollinations. Connect your account or enter your API key directly in the app from the Shorts composer or Settings.
No backend .env file or server environment variables are needed for API keys.
Server environment variables (optional)
| Variable | Context | Purpose |
|---|---|---|
CLIENT_URL |
Server | Comma-separated allowed CORS origins (default http://localhost:5173) |
PORT |
Server | Port to listen on (default 3000) |
NODE_ENV |
Server | Set to production for production builds |
- Node.js: ≥ 20.19.0 (or ≥ 22.0.0)
- WebGPU-compatible browser: Required for local WebLLM inference and GPU-accelerated effects.
- Network: Stable connection required for initial model downloads (cached locally in browser storage).
Supported Browsers
| Browser | Min. Version | Status & Notes |
|---|---|---|
| Chrome / Chromium | 113+ | Fully supported; Chrome extension available for enhanced telemetry |
| Edge | 113+ | Fully supported; Chrome extension compatible |
| Firefox | Nightly | Supported with dom.webgpu.enabled enabled in about:config |
| Safari | 18+ (macOS Sonoma+) | Supported for desktop workflows |
Hardware Specifications & Model Sizes
- Minimum: 4-core CPU, 8GB RAM, integrated GPU
- Recommended: 8-core CPU, 16GB RAM, dedicated GPU with F16 support, NVMe SSD
Local WebLLM Models:
| Model | Download Size | Approx. VRAM | Focus / Capabilities |
|---|---|---|---|
| Gemma 2 2B | ~1.4 GB | ~2 GB | Fast, lightweight general text & narration |
| Llama 3.2 1B | ~800 MB | ~1.5 GB | Ultra-fast execution, low memory footprint |
| Llama 3.2 3B | ~1.7 GB | ~2.5 GB | Balanced performance & reasoning quality |
| Phi 3.5 Vision | ~3.9 GB | ~4 GB | Multimodal (adds image & video analysis) |
Core Libraries & Architecture
- Frontend Framework: React 19, TypeScript, Vite 7, Tailwind CSS 4, React Router 8
- AI Inference:
@mlc-ai/web-llm(local WebGPU LLMs) - Speech Synthesis:
kokoro-js(in-browser neural TTS) - Video Composition:
@ffmpeg/ffmpeg(client-side FFmpeg) - Document Processing:
pdfjs-dist(PDF rasterization & text extraction) - UI & Interactions:
@dnd-kit(drag-and-drop),lucide-react - Backend & Proxy: Express 5 + TypeScript (
server.ts) / Cloudflare Pages Functions (functions/api/)
Origami-AI/
├── src/
│ ├── components/ # React UI components & modal dialogs
│ │ └── shorts/ # Shorts composer, storyboard, and scene cards
│ ├── pages/ # Application views (Assistant, Shorts, etc.)
│ ├── services/ # WebLLM, TTS, FFmpeg renderer, storage, archives
│ ├── hooks/ # Custom React hooks (screen recording, audio, etc.)
│ ├── context/ # React Context providers (downloads, notifications)
│ └── utils/ # Helper functions & formatters
├── functions/ # Cloudflare Pages Functions API endpoints
├── chrome-extension/ # Optional DOM telemetry extension
├── server.ts # Local Express server with Vite middleware
└── public/ # Static assets, fonts, audio files
For comprehensive debugging and platform-specific tips, see TROUBLESHOOTING.md.
| Issue | Recommended Solution |
|---|---|
| WebGPU not detected | Enable hardware acceleration in browser settings, update GPU drivers, or use custom OpenAI-compatible API providers in ⚙️ Settings → API. |
| Dev server & header errors | Always start via npm run dev (or npm run pages:dev) to ensure required COOP/COEP security headers are applied for FFmpeg.wasm and WebWorkers. |
| Model download failures | Verify connection stability, clear browser cache / site data in DevTools, and ensure sufficient storage space. |
| Out of memory during rendering | Select a lighter LLM model (e.g. Gemma 2 2B / Llama 3.2 1B), switch export resolution to 720p, or run via Docker. |
| Shorts / Pollinations generation issues | Connect your Pollinations account in ⚙️ Settings → API, or select the free slow model fallback. |
| Project import / export issues | Verify .origami archive integrity and check browser IndexedDB storage quota. |
Contributions, issues, and feature requests are welcome! See CONTRIBUTING.md for local development setup, coding conventions, and pull request guidelines.
To report bugs or suggest enhancements, please open an issue at GitHub Issues.
- License: Released under the MIT License.
- Core Technologies: Built with gratitude to WebLLM, Kokoro.js, FFmpeg.wasm, PDF.js, and Pollinations.
Made with ❤️ by TechMitten LLC