akukanara
55 lines
2.2 KiB
Markdown
55 lines
2.2 KiB
Markdown
# 🎨 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/)
|