Skip to content

README.md

Latest commit

 

History

History
73 lines (54 loc) · 2.59 KB

README.md

File metadata and controls

73 lines (54 loc) · 2.59 KB

Spectral Split - AI Stem Separation

Spectral Split is a modern web application that allows you to easily separate vocals, drums, bass, and other instruments from audio files.

It uses the free, in-browser HTDemucs AI model via demucs-web and onnxruntime-web. This means audio processing and stem separation are performed entirely on your device for complete privacy and require no API keys or backend processing fees. image

Features

  • Local AI Inference: Stem separation runs completely in the browser utilizing WebAssembly (WASM) and WebGPU acceleration.
  • Privacy First: Your audio files are never uploaded to a backend server.
  • 4-Stem Output: Splits audio into Vocals, Drums, Bass, and Other.
  • Modern UI: Sleek, responsive interface built with React and Tailwind CSS.
  • Free to Use: Fully free with no API limits.

Prerequisites

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

Setup Instructions

  1. Clone the repository:

    git clone <repository_url>
cd <project_directory>

  2. Install dependencies:

    npm install

    Note: Ensure all dependencies, particularly demucs-web and onnxruntime-web are installed successfully.

  3. Start the development server:

    npm run dev

    The application will be accessible at http://localhost:3000.

Building for Production

  1. Build the application:

    npm run build

    This will compile both the Vite frontend assets into the dist/ directory and bundle the Node.js Express backend into dist/server.js.

  2. Start the production server:

    npm start

Note on Cross-Origin Isolation

Because the application relies on SharedArrayBuffer to support multi-threaded WASM and provide maximum performance via onnxruntime-web, the custom Express server (server.ts) automatically configures the application with strict Cross-Origin Isolation headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Using the included backend server ensures that the necessary environment is provided to the browser to execute the heavy AI workloads.

Technologies Used

  • React: Frontend framework
  • Vite: Build tool
  • Express.js: Lightweight backend to serve HTML assets and required headers
  • demucs-web: Browser port of the HTDemucs stem separation model
  • onnxruntime-web: Underlying ML runtime
  • Tailwind CSS: Styling
  • Lucide React: Icons