Files
onnx-voice-changer/frontend
T

🎨 ONNX VC - Frontend Client Dashboard

The premium user dashboard for the ONNX VC (Real-Time Voice Changer). Built using Next.js 15 (App Router), React 19, TypeScript, and Tailwind CSS, providing a high-fidelity control panel for real-time AI voice conversion.


Key Features

  • 🌐 Complete Internationalization (i18n): Supports English, Indonesian, Spanish, Japanese, and Chinese.
  • 🌓 Dark Mode & Custom Themes: Seamless dark/light theme switching with custom accent colors (Purple, Blue, Emerald, Rose, Amber).
  • 📊 Dual Waveform Visualizer: Displays real-time input and output audio waveform graphs side-by-side in a single row for compact, effective monitoring.
  • 📱 Collapsible Sidebar: Optimized UI layout with a smooth collapsible sidebar for managing settings.
  • 🎛️ Interactive DSP Controls: Easily adjust input/output gain staging, active 80Hz low-cut filters, noise gates, and pitch transposition.
  • ⚙️ Dual Routing Toggle: Switch between browser-side routing (Web Audio API) and server-side hardware routing (sounddevice).

🚀 Getting Started

📋 Prerequisites

  • Node.js 18+
  • npm, yarn, or pnpm package manager

📦 Installation

Navigate to this directory and install the project dependencies:

npm install

🏃 Running the Development Server

Start the Next.js local development server:

npm run dev

Open http://localhost:3000 in your web browser.

🏗️ Building for Production

To build the application for optimized production performance:

npm run build
npm run start

🔌 WebSocket Connection

The frontend connects to the Python WebSocket backend to stream binary audio chunks and receive converted audio.

  • Default backend URL: ws://127.0.0.1:8765
  • Ensure your backend server.py is running before starting voice conversion from the dashboard.

🤝 Credits & Acknowledgements