docs: update frontend README with project-specific details

2026-05-31 17:10:34 +07:00
parent 1151d1a716
commit fb2f8fa045
1 changed files with 43 additions and 25 deletions
@@ -1,36 +1,54 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# 🎨 ONNX VC - Frontend Client Dashboard

-## Getting Started
+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.

-First, run the development server:
+---

+## ✨ 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 run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npm install
 ```

-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### 🏃 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.

-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### 🏗️ Building for Production
+To build the application for optimized production performance:
+```bash
+npm run build
+npm run start
+```

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+---

-## Learn More
+## 🔌 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.

-To learn more about Next.js, take a look at the following resources:
+---

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+## 🤝 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/)