# 🎨 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:
```bash
npm install
```

### 🏃 Running the Development Server
Start the Next.js local development server:
```bash
npm run dev
```
Open **[http://localhost:3000](http://localhost:3000)** in your web browser.

### 🏗️ Building for Production
To build the application for optimized production performance:
```bash
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](https://github.com/kanaratechnologyindonesia)** (Mirror: [git.kanara.tech](https://git.kanara.tech/kanara))
* Powered by [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/)