Spaces:
Sleeping
Sleeping
File size: 2,864 Bytes
5008b66 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
# 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:
```bash
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:
```bash
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.
|