Hugging Face's logo

Spaces:
meriks1
/
https-vocalremover-org-splitter-ai
Running

App Files Community
https-vocalremover-org-splitter-ai / index.html
meriks1's picture
meriks1
<!doctype html>
9f446ef verified
raw
history blame contribute delete
32.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Splitter AI - Vocal Remover and Music Source Separator</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
}
.file-uploader {
border: 2px dashed #ccc;
transition: all 0.3s ease;
}
.file-uploader:hover {
border-color: #4a6cf7;
background: rgba(74, 108, 247, 0.05);
}
.waveform {
height: 100px;
background: linear-gradient(90deg, #4a6cf7 50%, transparent 50%);
background-size: 8px 100%;
}
.play-btn {
transition: all 0.2s ease;
}
.play-btn:hover {
transform: scale(1.1);
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Navigation -->
<nav class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="music" class="w-6 h-6"></i>
<span class="text-xl font-bold hidden md:inline">Splitter AI</span>
<span class="text-xl font-bold md:hidden">SAI</span>
</div>
<div class="flex space-x-4 md:space-x-6">
<a href="/" class="hover:text-gray-200 font-medium">Home</a>
<a href="/help.html" class="hover:text-gray-200">Help</a>
<a href="/about.html" class="hover:text-gray-200">About</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="gradient-bg text-white py-16">
<div class="container mx-auto px-4 text-center" data-aos="fade-up">
<h1 class="text-3xl md:text-5xl font-bold mb-4">Splitter AI - Vocal Remover</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
Extract vocals, instrumental, drums, bass, piano and more from any song
</p>
<div class="flex justify-center space-x-4">
<button class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition">
Try for Free
</button>
<button class="border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-blue-600 transition">
Learn More
</button>
</div>
</div>
</section>
<!-- Main App Section -->
<section class="py-12">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up">
<div class="p-6 md:p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Upload Your Audio File</h2>
<!-- File Upload -->
<div class="file-uploader rounded-lg p-8 text-center mb-8 cursor-pointer">
<i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i>
<p class="text-gray-500 mb-2">Drag & drop your audio file here or click to browse</p>
<p class="text-sm text-gray-400">Supports MP3, WAV, FLAC, OGG, AAC (Max 100MB)</p>
<input type="file" class="hidden" accept="audio/*" id="fileInput">
</div>
<!-- Processing Options -->
<div class="mb-8">
<h3 class="font-bold text-gray-700 mb-4">Processing Options</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="processingOptions">
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="vocals">
<i data-feather="mic-off" class="w-6 h-6 text-blue-500 mb-2"></i>
<span>Vocals Only</span>
</button>
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="instrumental">
<i data-feather="mic" class="w-6 h-6 text-blue-500 mb-2"></i>
<span>Instrumental</span>
</button>
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="drums">
<i data-feather="drum" class="w-6 h-6 text-blue-500 mb-2"></i>
<span>Drums</span>
</button>
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="bass">
<i data-feather="music" class="w-6 h-6 text-blue-500 mb-2"></i>
<span>Bass</span>
</button>
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="piano">
<i data-feather="music" class="w-6 h-6 text-blue-500 mb-2"></i>
<span>Piano</span>
</button>
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="guitar">
<i data-feather="music" class="w-6 h-6 text-blue-500 mb-2"></i>
<span>Guitar</span>
</button>
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="other">
<i data-feather="music" class="w-6 h-6 text-blue-500 mb-2"></i>
<span>Other</span>
</button>
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="full">
<i data-feather="layers" class="w-6 h-6 text-blue-500 mb-2"></i>
<span>All Stems</span>
</button>
</div>
</div>
<!-- Advanced Settings -->
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-gray-700">Advanced Settings</h3>
<button class="text-blue-500 hover:text-blue-700 text-sm flex items-center">
<i data-feather="settings" class="w-4 h-4 mr-1"></i>
Show Settings
</button>
</div>
<div class="space-y-4 hidden">
<div class="flex flex-col">
<label class="text-sm text-gray-500 mb-1">Processing Quality</label>
<select class="border rounded p-2 bg-gray-50">
<option>Standard (Fastest)</option>
<option selected>High Quality</option>
<option>Professional (Slowest)</option>
</select>
</div>
<div class="flex flex-col">
<label class="text-sm text-gray-500 mb-1">Output Format</label>
<select class="border rounded p-2 bg-gray-50">
<option selected>MP3</option>
<option>WAV</option>
<option>FLAC</option>
</select>
</div>
</div>
</div>
<!-- Process Button -->
<button id="processBtn" class="gradient-bg text-white w-full py-3 rounded-lg font-bold hover:opacity-90 transition flex justify-center items-center hovered-element">
<i data-feather="zap" class="w-5 h-5 mr-2"></i>
Separate Now (Free)
</button>
<p class="text-center text-sm text-gray-500 mt-2">No registration required - process up to 10 minutes per file</p>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-12 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Powerful AI Audio Processing</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="100">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="cpu" class="w-6 h-6 text-blue-500"></i>
</div>
<h3 class="font-bold text-lg mb-2">AI-Powered Separation</h3>
<p class="text-gray-600">Uses deep neural networks to precisely isolate different elements of your music tracks.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="200">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="cloud" class="w-6 h-6 text-purple-500"></i>
</div>
<h3 class="font-bold text-lg mb-2">Cloud Processing</h3>
<p class="text-gray-600">All processing happens in the cloud - no software to install. Works on any device.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="300">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
<i data-feather="download" class="w-6 h-6 text-green-500"></i>
</div>
<h3 class="font-bold text-lg mb-2">High-Quality Output</h3>
<p class="text-gray-600">Download separated stems in high quality formats suitable for professional use.</p>
</div>
</div>
</div>
</section>
<!-- Results Preview Section -->
<section class="py-12 hidden" id="resultsSection">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">How It Works</h2>
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up">
<div class="md:flex">
<div class="p-6 md:p-8 flex-1">
<h3 class="font-bold text-xl mb-4">Vocal Separation Preview</h3>
<div class="space-y-4">
<!-- Original Track -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">Original Track</span>
<span class="text-xs text-gray-500">2:45</span>
</div>
<div class="waveform rounded overflow-hidden relative">
<div class="absolute inset-0 flex items-center justify-center play-btn bg-blue-500 bg-opacity-10 text-blue-500 rounded-full w-12 h-12 hover:bg-opacity-20">
<i data-feather="play" class="w-5 h-5 ml-0.5"></i>
</div>
</div>
</div>
<!-- Separated Vocals -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">Vocals Only</span>
<span class="text-xs text-gray-500">2:45</span>
</div>
<div class="waveform rounded overflow-hidden relative" style="background: linear-gradient(90deg, #f472b6 50%, transparent 50%);">
<div class="absolute inset-0 flex items-center justify-center play-btn bg-pink-500 bg-opacity-10 text-pink-500 rounded-full w-12 h-12 hover:bg-opacity-20">
<i data-feather="play" class="w-5 h-5 ml-0.5"></i>
</div>
</div>
<div class="mt-2 flex justify-end space-x-2">
<button class="text-xs border px-2 py-1 rounded hover:bg-gray-50 download-btn" data-type="vocals">
<i data-feather="download" class="w-3 h-3 inline mr-1"></i>
Download MP3
</button>
<button class="text-xs border px-2 py-1 rounded hover:bg-gray-50 download-btn" data-type="vocals" data-format="wav">
<i data-feather="download" class="w-3 h-3 inline mr-1"></i>
Download WAV
</button>
<button class="text-xs bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600">
<i data-feather="share-2" class="w-3 h-3 inline mr-1"></i>
Share
</button>
</div>
</div>
<!-- Instrumental -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">Instrumental</span>
<span class="text-xs text-gray-500">2:45</span>
</div>
<div class="waveform rounded overflow-hidden relative" style="background: linear-gradient(90deg, #10b981 50%, transparent 50%);">
<div class="absolute inset-0 flex items-center justify-center play-btn bg-green-500 bg-opacity-10 text-green-500 rounded-full w-12 h-12 hover:bg-opacity-20">
<i data-feather="play" class="w-5 h-5 ml-0.5"></i>
</div>
</div>
<div class="mt-2 flex justify-end space-x-2">
<button class="text-xs border px-2 py-1 rounded hover:bg-gray-50">
<i data-feather="download" class="w-3 h-3 inline mr-1"></i>
Download
</button>
<button class="text-xs bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600">
<i data-feather="share-2" class="w-3 h-3 inline mr-1"></i>
Share
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-12 bg-gray-100">
<div class="container mx-auto px-4 max-w-4xl">
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Frequently Asked Questions</h2>
<div class="space-y-4" data-aos="fade-up">
<div class="bg-white p-4 rounded-lg shadow-sm">
<button class="w-full flex justify-between items-center font-bold">
<span>How do I upload my audio file?</span>
<i data-feather="chevron-down" class="w-5 h-5"></i>
</button>
<div class="mt-2 text-gray-600 hidden">
<p>Simply drag and drop your audio file onto the upload area or click to browse your computer. We support MP3, WAV, FLAC, OGG and other common audio formats.</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<button class="w-full flex justify-between items-center font-bold">
<span>Is there a file size limit?</span>
<i data-feather="chevron-down" class="w-5 h-5"></i>
</button>
<div class="mt-2 text-gray-600 hidden">
<p>Yes, the maximum file size for free users is 50MB. For larger files, consider our premium plans for extended limits and faster processing.</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<button class="w-full flex justify-between items-center font-bold">
<span>How long does processing take?</span>
<i data-feather="chevron-down" class="w-5 h-5"></i>
</button>
<div class="mt-2 text-gray-600 hidden">
<p>Processing time depends on the length and quality of your audio file. Typically, a 3-minute song takes about 1-2 minutes to process at standard quality settings.</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<button class="w-full flex justify-between items-center font-bold">
<span>Can I use this for commercial purposes?</span>
<i data-feather="chevron-down" class="w-5 h-5"></i>
</button>
<div class="mt-2 text-gray-600 hidden">
<p>Yes, however you must ensure you have the rights to the original audio material you're processing. The separated stems inherit the same copyright status as the original track.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between">
<div class="mb-6 md:mb-0">
<div class="flex items-center space-x-2 mb-4">
<i data-feather="music" class="w-6 h-6"></i>
<span class="text-xl font-bold">Splitter AI</span>
</div>
<p class="text-gray-400 max-w-xs">AI-powered vocal remover and music stem separator for artists, DJs, and music enthusiasts.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
<div>
<h4 class="font-bold text-lg mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
</ul>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Splitter AI. All rights reserved.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter" class="w-5 h-5"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram" class="w-5 h-5"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook" class="w-5 h-5"></i></a>
</div>
</div>
</div>
</footer>
<script>
// Initialize AOS animations
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// Initialize feather icons
feather.replace();
// FAQ accordion functionality
document.querySelectorAll('footer button').forEach(button => {
button.addEventListener('click', () => {
const answer = button.nextElementSibling;
const icon = button.querySelector('i');
answer.classList.toggle('hidden');
if (!answer.classList.contains('hidden')) {
icon.setAttribute('data-feather', 'chevron-up');
} else {
icon.setAttribute('data-feather', 'chevron-down');
}
feather.replace();
});
});
// File upload interaction
const fileUploader = document.querySelector('.file-uploader');
const fileInput = document.getElementById('fileInput');
let selectedMode = 'vocals'; // Default to vocals
let uploadedFile = null;
// Auto-select vocals mode on page load
document.querySelector('[data-mode="vocals"]').classList.add('border-blue-500', 'bg-blue-50');
fileUploader.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
uploadedFile = e.target.files[0];
// Validate file type
const validTypes = ['audio/mpeg', 'audio/wav', 'audio/x-wav', 'audio/flac', 'audio/ogg', 'audio/aac'];
if (!validTypes.includes(uploadedFile.type)) {
alert('Please upload a valid audio file (MP3, WAV, FLAC, OGG, AAC)');
return;
}
// Validate file size (max 100MB)
if (uploadedFile.size > 100 * 1024 * 1024) {
alert('File size exceeds 100MB limit');
return;
}
fileUploader.innerHTML = `
<i data-feather="check-circle" class="w-12 h-12 mx-auto text-green-500 mb-4"></i>
<p class="text-gray-700 font-medium truncate max-w-xs mx-auto">${uploadedFile.name}</p>
<p class="text-sm text-gray-400">${(uploadedFile.size / 1024 / 1024).toFixed(2)} MB</p>
`;
feather.replace();
// Show processing options
document.getElementById('processingOptions').classList.remove('hidden');
}
});
// Processing mode selection
document.querySelectorAll('.option-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.option-btn').forEach(b => {
b.classList.remove('border-blue-500', 'bg-blue-50');
b.classList.add('border-gray-200');
});
btn.classList.remove('border-gray-200');
btn.classList.add('border-blue-500', 'bg-blue-50');
selectedMode = btn.dataset.mode;
});
});
// Process button functionality
document.getElementById('processBtn').addEventListener('click', async () => {
if (!uploadedFile) {
alert('Please upload an audio file first.');
return;
}
if (!selectedMode) {
alert('Please select a processing option.');
return;
}
// Show processing state
const processBtn = document.getElementById('processBtn');
const originalText = processBtn.innerHTML;
processBtn.innerHTML = '<i data-feather="loader" class="w-5 h-5 mr-2 animate-spin"></i>Processing...';
processBtn.disabled = true;
feather.replace();
try {
// Create FormData for file upload
const formData = new FormData();
formData.append('audio', uploadedFile);
formData.append('mode', selectedMode);
// Show loading state
document.getElementById('resultsSection').classList.remove('hidden');
document.querySelector('#resultsSection .waveform').innerHTML =
'<div class="absolute inset-0 flex items-center justify-center">Processing audio...</div>';
// Send to server for processing
const response = await fetch('/api/process', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error('Processing failed');
}
const result = await response.json();
// Update UI with results
document.querySelectorAll('.waveform').forEach(wave => {
wave.innerHTML = ''; // Clear loading message
wave.style.background = 'linear-gradient(90deg, #4a6cf7 50%, transparent 50%)';
});
// Enable download buttons
document.querySelectorAll('.download-btn').forEach(btn => {
btn.onclick = () => {
const format = btn.dataset.format || 'mp3';
const type = btn.dataset.type || selectedMode;
window.location.href = `/api/download?track=${type}&format=${format}&file=${result.id}`;
};
});
// Show success message
alert(`Successfully separated ${selectedMode} track!`);
} catch (error) {
console.error('Error:', error);
alert('Processing failed. Please try again later.');
} finally {
// Reset button
processBtn.innerHTML = originalText;
processBtn.disabled = false;
feather.replace();
}
});
// Make file upload draggable
fileUploader.addEventListener('dragover', (e) => {
e.preventDefault();
fileUploader.classList.add('border-blue-500', 'bg-blue-50');
});
fileUploader.addEventListener('dragleave', () => {
fileUploader.classList.remove('border-blue-500', 'bg-blue-50');
});
fileUploader.addEventListener('drop', (e) => {
e.preventDefault();
fileUploader.classList.remove('border-blue-500', 'bg-blue-50');
if (e.dataTransfer.files.length) {
const file = e.dataTransfer.files[0];
// Validate file type
const validTypes = ['audio/mpeg', 'audio/wav', 'audio/x-wav', 'audio/flac', 'audio/ogg', 'audio/aac'];
if (!validTypes.includes(file.type)) {
alert('Please upload a valid audio file (MP3, WAV, FLAC, OGG, AAC)');
return;
}
// Create a new DataTransfer to set the file
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;
const event = new Event('change');
fileInput.dispatchEvent(event);
}
});
// Advanced settings toggle
document.querySelector('[aria-label="Show Settings"]').addEventListener('click', (e) => {
const settings = e.target.closest('div').nextElementSibling;
settings.classList.toggle('hidden');
const icon = e.target.querySelector('i') || e.target.closest('button').querySelector('i');
if (settings.classList.contains('hidden')) {
icon.setAttribute('data-feather', 'settings');
e.target.querySelector('span').textContent = 'Show Settings';
} else {
icon.setAttribute('data-feather', 'chevron-up');
e.target.querySelector('span').textContent = 'Hide Settings';
}
feather.replace();
});
// Play button functionality for audio preview
document.querySelectorAll('.play-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const isPlaying = btn.classList.contains('playing');
if (isPlaying) {
btn.classList.remove('playing');
btn.innerHTML = '<i data-feather="play" class="w-5 h-5 ml-0.5"></i>';
} else {
btn.classList.add('playing');
btn.innerHTML = '<i data-feather="pause" class="w-5 h-5"></i>';
}
feather.replace();
});
});
// Download button functionality
document.querySelectorAll('button:has(i[data-feather="download"])').forEach(btn => {
btn.addEventListener('click', () => {
alert('Download functionality would be implemented here');
});
});
// Share button functionality
document.querySelectorAll('button:has(i[data-feather="share-2"])').forEach(btn => {
btn.addEventListener('click', () => {
alert('Share functionality would be implemented here');
});
});
</script>
</body>
</html>