🎨 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

Made with ❤️ by Kanara Technology (Mirror: git.kanara.tech)
Powered by Next.js and Tailwind CSS

2.2 KiB Raw Permalink Blame History