frontend/README.md

Voice Cloning – Personalized Speech Synthesis (Frontend)

Note: On first load, please wait 2–3 minutes. The app initializes several 3D elements which can take time to fetch and compile in the browser, including examples like:

• Spline-powered scenes and backgrounds
• Interactive Orb (Three.js) with real-time interaction
• Particle Field and Floating Elements
• Speaker/Microphone 3D scenes and visualizers

This repository contains the fully custom-built frontend for a Voice Cloning and Personalized Speech Synthesis application.

• Modern, responsive UI with smooth 3D visuals and an accessible design system.

---

Overview

The frontend provides:

• A clean interface to enroll voice samples and synthesize speech.
• Real-time audio recording, waveform visualization, and playback controls.
• Rich 3D/animated visuals to enhance the user experience (Spline and Three.js).
• A component-driven architecture for maintainability and reusability.

---

Features

• Audio

  • Audio recorder and waveform visualization
  • Error boundaries and robust UI states

• 3D & Visuals

  • Spline background scenes
  • Interactive Orb, Particle Field, Floating Elements
  • Speaker/Microphone scenes and animated transitions

• UI/UX

  • shadcn/ui components with Tailwind CSS
  • Responsive, accessible design
  • Theming and utility-first styling

---

Tech Stack

• Vite (bundler & dev server)
• React (UI) + TypeScript
• Tailwind CSS + PostCSS
• shadcn/ui component library
• Three.js & Spline (3D scenes and interactions)
• ESLint (code quality) and modern TS configs

---

Getting Started

Prerequisites:

• Node.js and npm installed (recommend using nvm)

Install and run:

npm install
npm run dev

Open the local URL printed in the terminal. First load may take 2–3 minutes due to 3D assets.

---

Available Scripts

• npm run dev – Start the development server
• npm run build – Build for production into dist/
• npm run preview – Preview the production build locally

---

Project Structure (high level)

• src/

  • components/
    • audio/ – Recorder, waveform, audio UI
    • three/ – Interactive Orb, Particle Field, Speaker/Mic scenes, Spline background
    • ui/ – shadcn/ui component wrappers and utilities
  • pages/ – App pages and routing
  • lib/ – Utility functions

• public/ – Static assets (icons, placeholders, robots.txt)

• tailwind.config.ts, postcss.config.js – Styling configuration

• eslint.config.js – Linting configuration

---

Deployment

Build a production bundle:

npm run build
npm run preview

Deploy the contents of dist/ to your hosting of choice (e.g., Netlify, Vercel, GitHub Pages, or a static server).

---

License

Copyright The project owner. All rights reserved.