Thanks to visit codestin.com
Credit goes to github.com

Skip to content

JumbleBumble/ElevenLabs-Studio

Repository files navigation

ElevenLabs Desktop Studio

Modern Tauri + React dashboard for exploring the ElevenLabs API across both sound effect and voice line workflows. The UI handles project management, preset storage, history, audio remastering, and optional WAV exports directly on your desktop.

✨ Feature highlights

  • Dual project modes – switch between sound effects (text-to-sound) and voice line (text-to-speech) pipelines, each with its own model + format settings.
  • Persistent workspace – projects, presets, history, API key, theme, output format, and volume preferences live in hardened local storage.
  • Audio post-processing – automatically remasters ElevenLabs MP3 responses, applies the selected volume percentage, and can export the result as WAV.
  • Detailed generation history – every render records status, metadata, and allows immediate playback/download.
  • Sleek desktop shell – Tailwind-powered React 19 SPA packaged by Tauri 2 for native menus, notifications, and multi-platform builds.

🧱 Tech stack

  • Tauri 2 (Rust backend) with tauri_plugin_opener.
  • React 19 + Vite 7 + TypeScript strict mode.
  • Tailwind CSS v4 (single-file import) for styling.
  • ElevenLabs REST API integrations (/sound-generation, /text-to-speech/.../with-timestamps, /voices).

✅ Prerequisites

  • Node.js 20+ and npm 10+.
  • Rust (stable channel) with the Tauri prerequisites for your OS (official guide).
  • An ElevenLabs API key (stored locally inside the app via Settings ➝ API Key).

🚀 Getting started

  1. Install dependencies

    npm install
  2. Run the web preview (front-end only) – quick iteration without spinning up the Rust side:

    npm run dev
  3. Run the full desktop app – launches Vite and the native Tauri shell with hot reload:

    npm run tauri dev
  4. Add your ElevenLabs API key – open the app, paste the key in the “ElevenLabs connection” card, and hit Save. Voices load automatically for voice-mode projects.

🧪 Build & packaging commands

  • Type check + production web build (runs tsc --noEmit then vite build):

    npm run build
  • Create native installers/binaries (invokes the previous command and packages via Tauri):

    npm run tauri build

⚙️ Configuration & data flow

  • Projects – store name, mode, preferred models, formats, and default prompt settings.
  • Presets – save frequently used prompts per project (capped for clarity, with LRU trimming).
  • History – keeps the latest renders (MP3/WAV data URLs, metadata, statuses) and supports quick replays.
  • Theme – toggleable light/dark via the sidebar; preference persists per device.
  • Audio remasteringsrc/lib/audio.ts rescales gain using the Web Audio Offline API before saving files locally.

All persistence happens client-side; no ElevenLabs credentials touch disk outside the encrypted store provided by Tauri.

🗂️ Key directories

  • src/ – React SPA (App shell, hooks, storage helpers, ElevenLabs client wrappers).
  • src-tauri/ – Rust entrypoint (lib.rs) registering commands/plugins and tauri.conf.json packaging metadata.
  • src/lib/ – domain types (types.ts), storage helpers (storage.ts), API client (elevenlabs.ts), audio utilities (audio.ts).

🧯 Troubleshooting

  • No voices appear – ensure the API key is valid and has access to the ElevenLabs voice endpoints. The app re-fetches voices after every successful key save.
  • Audio sounds unchanged – WAV re-encoding runs in a background task; check DevTools for any Web Audio errors if the browser denies OfflineAudioContext usage.
  • Build failures on Windows – confirm the Visual Studio Build Tools + necessary C++ workloads are installed per the Tauri docs.

🤝 Contributing

Pull requests are welcome. Please run npm run build (front-end) and npm run tauri build (desktop) before opening a PR to ensure both surfaces stay healthy.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published