Bach or Bot: Web Interface

Interactive web application for AI-generated vs human-composed music classification
Explore the main model »

View Demo · Report Bug · Request Feature

About The Project

Bach or Bot Web is the frontend interface for the Bach or Bot machine learning system that classifies music as human-composed or AI-generated. This React-based web application provides an intuitive platform for users to upload audio files or input lyrics and receive real-time classification results with explainable AI insights.

Table Of Contents

1. About The Project
   • Table Of Contents
   • Features
   • Technologies Used
2. Web Snapshots
3. Installation
   • Prerequisites
   • Setup
4. Usage
5. Deployment
6. Contributing
7. Contact
8. License

Features

• Audio File Upload: Support for various audio formats with drag-and-drop functionality
• Lyrics Input: Text-based analysis for song lyrics classification
• Real-time Results: Instant classification with confidence scores
• Explainable AI: Visual explanations showing which features influenced the prediction
• (Slightly) Responsive Design: Optimized for desktop and mobile devices
• Modern UI/UX: Clean, intuitive interface built with Tailwind CSS
• Loading States: Smooth loading animations and progress indicators
• Error Handling: Comprehensive error messages and fallback states

Technologies Used

• Frontend Framework: React 19.1.1 with TypeScript
• Build Tool: Vite 7.1.6 for fast development and optimized builds
• Styling: Tailwind CSS 4.1.13 for utility-first styling
• Icons: Lucide React for consistent iconography
• Routing: React Router DOM 7.9.1 for client-side navigation
• Analytics: Vercel Analytics for usage tracking
• Linting: ESLint with TypeScript support
• Containerization: Docker for consistent deployment environments

Web Snapshots

Landing Page

Inputs

Loading Screen

Results Page

Installation

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn package manager
• Docker (optional, for containerized deployment)

Setup

1. Clone the repository

   git clone https://github.com/krislette/bob-web.git
   cd bob-web

2. Install dependencies

   npm install

3. Environment Configuration

   cp .env.example .env

   Update the .env file with your backend API endpoint:

   VITE_API_URL=your_backend_api_url

4. Start the development server

   npm run dev

   The application will be available at http://localhost:5173

5. Build for production

   npm run build

Usage

Multimodal Classification

1. Navigate to the main interface
2. Click on the audio upload area or drag and drop an audio file
3. Supported formats: MP3 and WAV
4. Paste or type the song lyrics in the text area
5. Click "Analyze Music" to submit
6. Wait for the analysis to complete
7. View the classification result with confidence score
8. Review the classification results and explanations

Understanding Results

• Classification: Human-composed or AI-generated prediction
• Confidence Score: Percentage indicating model certainty
• Explanations: Visual breakdown of features that influenced the decision
• Feature Importance: Highlighted sections showing most influential elements

Deployment

Docker Deployment

1. Build the Docker image

   docker build -t bob-web:latest .

2. Run the container

   docker run -p 5173:5173 bob-web:latest

Production Build with Nginx

1. Build the application

   npm run build

2. Use the provided nginx configuration

   # Copy dist files to nginx web root
   cp -r dist/\* /var/www/html/
   
   # Use the provided nginx.conf for configuration
   cp nginx.conf /etc/nginx/sites-available/bob-web

Vercel Deployment

The application is optimized for Vercel deployment:

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

Contributing

If you have a suggestion that would make this better (maybe in our UI, or some performance-related suggestion), please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

1. Fork the Project
2. Create your feature branch ( git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature )
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Write meaningful commit messages
• Add comments for complex logic
• Test your changes thoroughly

Contact

For questions, suggestions, or collaboration inquiries, please reach out through:

• GitHub Issues: Create an issue
• Pull Requests: Submit a PR

Related Projects:

• Bach or Bot Model - The main machine learning system
• Live Demo - Try the application online

License

Distributed under the MIT License. See LICENSE for more information.

[Back to top]