🎧 Semantic Audio Platform

A modern, AI-powered platform built with SvelteKit 5 for semantic audio generation and real-time, server-side audio generation.

A full-stack SaaS application demonstrating a production-grade RAG pipeline for free-text audio lookup and real-time, server-side audio generation. The core architecture is domain-agnostic and can be applied to any use case requiring semantic audio search and synthesis.

✨ Features

🎭 AI-Powered ASMR Artists

• Blair: Slow and smooth, gentle presence
• Aimee: Bubbly and high energy, personal attention specialist
• Cai: Tapping specialist with charming enthusiasm

🧠 Intelligent Content Generation

• AI Script Generation: Powered by OpenAI GPT-4 for personalized ASMR scripts
• Voice Synthesis: High-quality voice generation using ElevenLabs
• Content Categorization: Smart categorization using Pinecone vector database
• Personalized Experiences: Customized content based on user preferences

🎵 Audio Features

• Multiple Trigger Types: Hand sounds, mouth sounds, personal attention
• Dynamic Audio Generation: Real-time audio creation and playback
• Audio Storage: Secure cloud storage with Supabase
• Pre-generated Content: Curated library of ASMR triggers

💳 Subscription & Billing

• Stripe Integration: Secure payment processing
• Subscription Management: Flexible billing options
• User Authentication: Secure user accounts with Supabase Auth

🎨 Modern UI/UX

• SvelteKit 5: Latest Svelte with runes and modern reactivity
• Tailwind CSS + DaisyUI: Beautiful, responsive design
• Interactive Components: Floating bubbles, particle visualizations
• Dark/Light Themes: Customizable theme system
• Mobile Responsive: Optimized for all devices

🚀 Tech Stack

Frontend

• SvelteKit 5 - Modern web framework with runes
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• DaisyUI - Component library for Tailwind
• Three.js - 3D graphics and particle effects
• Framer Motion - Smooth animations

Backend & Services

• Supabase - Database, authentication, and storage
• OpenAI GPT-4 - AI script generation
• ElevenLabs - Voice synthesis
• Pinecone - Vector database for content categorization
• Stripe - Payment processing
• AWS S3 - Additional cloud storage

Development Tools

• Vite - Fast build tool and dev server
• ESLint + Prettier - Code quality and formatting
• TypeScript - Static type checking

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Git

🛠️ Installation

1. Clone the repository

   git clone https://github.com/yourusername/asmr-app.git
   cd asmr-app

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Fill in your environment variables in .env:

   # Supabase Configuration
   PUBLIC_SUPABASE_URL=your_supabase_project_url
   PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   PRIVATE_SUPABASE_SERVICE_KEY=your_supabase_service_role_key
   
   # OpenAI Configuration
   OPENAI_API_KEY=your_openai_api_key
   OPENAI_ORGANIZATION_ID=your_openai_organization_id
   OPENAI_PROJECT_ID=your_openai_project_id
   
   # ElevenLabs Configuration
   ELEVENLABS_API_KEY=your_elevenlabs_api_key
   
   # Pinecone Configuration
   PRIVATE_PINECONE_API_KEY=your_pinecone_api_key
   
   # Stripe Configuration
   PRIVATE_STRIPE_SECRET_KEY=your_stripe_secret_key
   PUBLIC_YOUR_DOMAIN=your_domain_url
   
   # Character Voice IDs (ElevenLabs)
   AIMEE_VOICE_ID=your_aimee_voice_id
   BLAIR_VOICE_ID=your_blair_voice_id
   CAI_VOICE_ID=your_cai_voice_id
   
   # Stripe Price IDs
   STRIPE_BASIC_PRICE_ID=your_basic_price_id
   STRIPE_PREMIUM_PRICE_ID=your_premium_price_id
   
   # Client-side Environment Variables (VITE_ prefix)
   VITE_STRIPE_BASIC_PRICE_ID=your_basic_price_id
   VITE_STRIPE_PREMIUM_PRICE_ID=your_premium_price_id

4. Set up your services

   • Create a Supabase project and configure authentication
   • Set up OpenAI API access
   • Create ElevenLabs account and voice IDs
   • Configure Pinecone vector database
   • Set up Stripe for payments

🏃‍♂️ Development

1. Start the development server

   npm run dev

2. Open your browser Navigate to http://localhost:5173

3. Available scripts

   npm run dev          # Start development server
   npm run build        # Build for production
   npm run preview      # Preview production build
   npm run check        # Type checking
   npm run format       # Format code with Prettier
   npm run lint         # Lint code with ESLint

🏗️ Project Structure

src/
├── components/           # Reusable UI components
│   ├── audio/           # Audio-related components
│   ├── billing/         # Payment and subscription components
│   ├── misc/            # Miscellaneous components
│   ├── pages/           # Page-level components
│   ├── shader/          # 3D graphics and visualizations
│   └── ui/              # Basic UI components
├── lib/                 # Utility libraries and stores
│   ├── stores/          # Svelte stores for state management
│   ├── server/          # Server-side utilities
│   └── utils/           # Helper functions
├── routes/              # SvelteKit routes and API endpoints
│   ├── api/             # API routes
│   ├── auth/            # Authentication pages
│   └── (protected)/     # Protected routes
└── static/              # Static assets

🔧 Configuration

Supabase Setup

1. Create a new Supabase project
2. Enable authentication providers
3. Set up storage buckets for audio files
4. Configure Row Level Security (RLS) policies

OpenAI Setup

1. Create an OpenAI account
2. Generate API keys
3. Set up organization and project IDs

ElevenLabs Setup

1. Create ElevenLabs account
2. Generate voice IDs for each character
3. Configure API access

Pinecone Setup

1. Create Pinecone account
2. Set up vector database
3. Configure embeddings for content categorization

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

Netlify

1. Connect repository to Netlify
2. Set build command: npm run build
3. Set publish directory: build
4. Configure environment variables

Self-hosted

1. Build the application: npm run build
2. Serve the build directory with your preferred web server
3. Ensure all environment variables are set

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add some amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

Development Guidelines

• Follow the existing code style
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

1. Check the Issues - Look for existing issues or create a new one
2. Documentation - Review this README and code comments
3. Community - Join our community discussions

🙏 Acknowledgments

• SvelteKit Team - For the amazing framework
• OpenAI - For powerful AI capabilities
• ElevenLabs - For high-quality voice synthesis
• Supabase - For backend infrastructure
• Tailwind CSS - For beautiful styling utilities

---

Made with ❤️ for the ASMR community