From fb2f8fa0452836a89abab39454750652ad44d195 Mon Sep 17 00:00:00 2001 From: akukanara Date: Sun, 31 May 2026 17:10:34 +0700 Subject: [PATCH] docs: update frontend README with project-specific details --- frontend/README.md | 68 +++++++++++++++++++++++++++++----------------- 1 file changed, 43 insertions(+), 25 deletions(-) diff --git a/frontend/README.md b/frontend/README.md index e215bc4..f602073 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -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/)