|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DiffRhythm - AI Music Generation</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
color: #1e293b; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); |
|
|
} |
|
|
|
|
|
.music-wave { |
|
|
position: relative; |
|
|
height: 100px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.wave-bar { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
width: 4px; |
|
|
background-color: rgba(255, 255, 255, 0.7); |
|
|
animation: wave 1.5s infinite ease-in-out; |
|
|
transform-origin: bottom; |
|
|
} |
|
|
|
|
|
@keyframes wave { |
|
|
0%, 100% { |
|
|
transform: scaleY(0.3); |
|
|
} |
|
|
50% { |
|
|
transform: scaleY(1); |
|
|
} |
|
|
} |
|
|
|
|
|
.song-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 4px; |
|
|
background-color: #e2e8f0; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background-color: #6366f1; |
|
|
border-radius: 2px; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.huggingface-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 2px solid transparent; |
|
|
} |
|
|
|
|
|
.huggingface-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
border-color: #FFD21E; |
|
|
} |
|
|
|
|
|
.repo-stats { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.repo-stat { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
font-size: 14px; |
|
|
color: #6b7280; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-music text-2xl"></i> |
|
|
<span class="text-xl font-bold">DiffRhythm</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#features" class="hover:text-purple-200 transition">Features</a> |
|
|
<a href="#technology" class="hover:text-purple-200 transition">Technology</a> |
|
|
<a href="#demo" class="hover:text-purple-200 transition">Demo</a> |
|
|
<a href="#huggingface" class="hover:text-purple-200 transition">Hugging Face</a> |
|
|
<a href="#resources" class="hover:text-purple-200 transition">Resources</a> |
|
|
</div> |
|
|
<button class="md:hidden text-xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Revolutionizing Music Creation with AI</h1> |
|
|
<p class="text-xl mb-8">Generate complete, professional-quality songs with synchronized vocals and instrumentals in just seconds.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-purple-100 transition"> |
|
|
<i class="fas fa-play mr-2"></i> Try Demo |
|
|
</button> |
|
|
<button onclick="window.open('https://huggingface.co/spaces/ASLP-lab/DiffRhythm/tree/main', '_blank')" class="border border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition"> |
|
|
<i class="fas fa-external-link-alt mr-2"></i> Hugging Face |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="music-wave flex justify-center items-end h-40"> |
|
|
|
|
|
</div> |
|
|
<div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 mt-8 max-w-md mx-auto"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-purple-200 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-semibold">AI Generated Song</h3> |
|
|
<p class="text-sm text-purple-200">DiffRhythm • 3:42</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar mb-2"> |
|
|
<div class="progress-fill w-1/3"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-purple-200 mb-4"> |
|
|
<span>1:12</span> |
|
|
<span>3:42</span> |
|
|
</div> |
|
|
<div class="flex justify-center space-x-6"> |
|
|
<button class="text-white hover:text-purple-200"> |
|
|
<i class="fas fa-step-backward text-xl"></i> |
|
|
</button> |
|
|
<button class="bg-white text-purple-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-100"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="text-white hover:text-purple-200"> |
|
|
<i class="fas fa-step-forward text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
|
|
<div class="p-6 rounded-lg bg-gray-50"> |
|
|
<div class="text-3xl font-bold text-purple-600 mb-2">10s</div> |
|
|
<div class="text-gray-600">Generation Time</div> |
|
|
</div> |
|
|
<div class="p-6 rounded-lg bg-gray-50"> |
|
|
<div class="text-3xl font-bold text-purple-600 mb-2">4:45</div> |
|
|
<div class="text-gray-600">Max Song Length</div> |
|
|
</div> |
|
|
<div class="p-6 rounded-lg bg-gray-50"> |
|
|
<div class="text-3xl font-bold text-purple-600 mb-2">60k+</div> |
|
|
<div class="text-gray-600">Training Hours</div> |
|
|
</div> |
|
|
<div class="p-6 rounded-lg bg-gray-50"> |
|
|
<div class="text-3xl font-bold text-purple-600 mb-2">2</div> |
|
|
<div class="text-gray-600">Languages Supported</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Key Features</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-bolt text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Blazing Fast Generation</h3> |
|
|
<p class="text-gray-600">Create complete songs up to 4 minutes and 45 seconds long in just 10 seconds, transforming the music creation process.</p> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-globe text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Multi-Language Support</h3> |
|
|
<p class="text-gray-600">Generate songs in both English and Chinese with natural pronunciation and appropriate musical styling.</p> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-star text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Professional Quality</h3> |
|
|
<p class="text-gray-600">High-quality output with perfect synchronization between vocals and accompaniment, maintaining musical coherence.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="technology" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Technical Innovation</h2> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<img src="https://via.placeholder.com/600x400" alt="DiffRhythm Architecture" class="rounded-lg shadow-lg w-full"> |
|
|
</div> |
|
|
<div class="md:w-1/2 md:pl-12"> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-semibold mb-2 flex items-center"> |
|
|
<span class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center mr-3">1</span> |
|
|
Latent Diffusion Approach |
|
|
</h3> |
|
|
<p class="text-gray-600">Utilizes a non-autoregressive structure for parallel audio content generation, significantly faster than language model-based methods.</p> |
|
|
</div> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-semibold mb-2 flex items-center"> |
|
|
<span class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center mr-3">2</span> |
|
|
Two-Stage Architecture |
|
|
</h3> |
|
|
<p class="text-gray-600">Combines a Variational Autoencoder (VAE) for compact latent representations and a Diffusion Transformer (DiT) for song generation through iterative denoising.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2 flex items-center"> |
|
|
<span class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center mr-3">3</span> |
|
|
Lyrics Alignment |
|
|
</h3> |
|
|
<p class="text-gray-600">Novel mechanism ensures semantic correspondence between lyrics and vocals, maintaining high intelligibility in the final output.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="demo" class="py-16 gradient-bg text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Experience DiffRhythm</h2> |
|
|
<div class="max-w-4xl mx-auto bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8"> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4">Generate Your Song</h3> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-purple-200 mb-2">Song Style</label> |
|
|
<select class="w-full bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg px-4 py-2 text-white"> |
|
|
<option>Pop</option> |
|
|
<option>Rock</option> |
|
|
<option>Hip Hop</option> |
|
|
<option>Electronic</option> |
|
|
<option>R&B</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-purple-200 mb-2">Language</label> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="px-4 py-2 bg-white text-purple-600 rounded-lg font-medium">English</button> |
|
|
<button class="px-4 py-2 bg-white bg-opacity-10 text-white rounded-lg font-medium">Chinese</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-purple-200 mb-2">Song Length</label> |
|
|
<input type="range" min="30" max="285" value="180" class="w-full"> |
|
|
<div class="flex justify-between text-sm text-purple-200"> |
|
|
<span>30s</span> |
|
|
<span>3:00</span> |
|
|
<span>4:45</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-purple-200 mb-2">Enter Lyrics</label> |
|
|
<textarea class="w-full h-40 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg px-4 py-2 text-white" placeholder="Type your lyrics here..."></textarea> |
|
|
<button class="w-full mt-4 bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-purple-100 transition"> |
|
|
Generate Song |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="huggingface" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Hugging Face Repository</h2> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="huggingface-card bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex flex-col md:flex-row items-start"> |
|
|
<div class="md:w-1/3 mb-6 md:mb-0 flex justify-center"> |
|
|
<img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" class="h-20"> |
|
|
</div> |
|
|
<div class="md:w-2/3 md:pl-8"> |
|
|
<h3 class="text-2xl font-bold mb-2">DiffRhythm on Hugging Face</h3> |
|
|
<p class="text-gray-600 mb-4">Access the official DiffRhythm repository on Hugging Face, featuring the model, demo spaces, and detailed documentation.</p> |
|
|
|
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-exclamation-circle text-yellow-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm text-yellow-700"> |
|
|
The repository contains the complete model implementation, allowing you to run DiffRhythm locally or integrate it into your applications. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="repo-stats"> |
|
|
<div class="repo-stat"> |
|
|
<i class="fas fa-code-branch"></i> |
|
|
<span>Main Branch</span> |
|
|
</div> |
|
|
<div class="repo-stat"> |
|
|
<i class="fas fa-star"></i> |
|
|
<span>1.2k Stars</span> |
|
|
</div> |
|
|
<div class="repo-stat"> |
|
|
<i class="fas fa-code"></i> |
|
|
<span>Python</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button onclick="window.open('https://huggingface.co/spaces/ASLP-lab/DiffRhythm/tree/main', '_blank')" class="mt-6 w-full md:w-auto bg-[#FFD21E] text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-[#e6bd1a] transition flex items-center justify-center"> |
|
|
<i class="fab fa-hubspot mr-2"></i> Visit Repository |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 mt-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-laptop-code text-purple-600 mr-3"></i> Live Demo |
|
|
</h3> |
|
|
<p class="text-gray-600 mb-4">Try the interactive demo directly on Hugging Face Spaces without any installation required.</p> |
|
|
<button onclick="window.open('https://huggingface.co/spaces/ASLP-lab/DiffRhythm', '_blank')" class="text-purple-600 hover:text-purple-800 font-medium flex items-center"> |
|
|
Open Demo <i class="fas fa-external-link-alt ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-book text-purple-600 mr-3"></i> Documentation |
|
|
</h3> |
|
|
<p class="text-gray-600 mb-4">Comprehensive documentation including installation instructions, API reference, and usage examples.</p> |
|
|
<button onclick="window.open('https://huggingface.co/spaces/ASLP-lab/DiffRhythm/tree/main#documentation', '_blank')" class="text-purple-600 hover:text-purple-800 font-medium flex items-center"> |
|
|
Read Docs <i class="fas fa-external-link-alt ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Sample Songs</h2> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="song-card bg-white p-6 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-semibold">Summer Breeze</h3> |
|
|
<p class="text-sm text-gray-500">Pop • English • 3:12</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar mb-2"> |
|
|
<div class="progress-fill w-1/4"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-4"> |
|
|
<span>0:48</span> |
|
|
<span>3:12</span> |
|
|
</div> |
|
|
<div class="flex justify-center space-x-6"> |
|
|
<button class="text-gray-600 hover:text-purple-600"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="song-card bg-white p-6 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-semibold">城市之光</h3> |
|
|
<p class="text-sm text-gray-500">R&B • Chinese • 2:56</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar mb-2"> |
|
|
<div class="progress-fill w-2/3"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-4"> |
|
|
<span>1:56</span> |
|
|
<span>2:56</span> |
|
|
</div> |
|
|
<div class="flex justify-center space-x-6"> |
|
|
<button class="text-gray-600 hover:text-purple-600"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="song-card bg-white p-6 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="font-semibold">Digital Dreams</h3> |
|
|
<p class="text-sm text-gray-500">Electronic • English • 4:18</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar mb-2"> |
|
|
<div class="progress-fill w-1/2"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-4"> |
|
|
<span>2:09</span> |
|
|
<span>4:18</span> |
|
|
</div> |
|
|
<div class="flex justify-center space-x-6"> |
|
|
<button class="text-gray-600 hover:text-purple-600"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="resources" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Resources</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<a href="#" class="resource-card bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition group"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-200 transition"> |
|
|
<i class="fas fa-file-alt text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-purple-600 transition">Research Paper</h3> |
|
|
<p class="text-gray-600">Read the full technical paper detailing DiffRhythm's architecture and performance.</p> |
|
|
</a> |
|
|
<a href="#" class="resource-card bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition group"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-200 transition"> |
|
|
<i class="fab fa-github text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-purple-600 transition">GitHub Repository</h3> |
|
|
<p class="text-gray-600">Access the open-source code and contribute to the project's development.</p> |
|
|
</a> |
|
|
<a href="#" class="resource-card bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition group"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-200 transition"> |
|
|
<i class="fas fa-hands-helping text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-purple-600 transition">Hugging Face</h3> |
|
|
<p class="text-gray-600">Try the model directly on Hugging Face's platform with easy-to-use interfaces.</p> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-music text-2xl"></i> |
|
|
<span class="text-xl font-bold">DiffRhythm</span> |
|
|
</div> |
|
|
<p class="text-gray-400">Revolutionizing music creation through AI innovation.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Navigation</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> |
|
|
<li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li> |
|
|
<li><a href="#technology" class="text-gray-400 hover:text-white transition">Technology</a></li> |
|
|
<li><a href="#demo" class="text-gray-400 hover:text-white transition">Demo</a></li> |
|
|
<li><a href="#huggingface" class="text-gray-400 hover:text-white transition">Hugging Face</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Research Paper</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">GitHub</a></li> |
|
|
<li><a href="https://huggingface.co/spaces/ASLP-lab/DiffRhythm/tree/main" class="text-gray-400 hover:text-white transition">Hugging Face</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Connect</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition"> |
|
|
<i class="fab fa-discord"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2024 DiffRhythm by ASLP@NPU. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const musicWave = document.querySelector('.music-wave'); |
|
|
for (let i = 0; i < 20; i++) { |
|
|
const bar = document.createElement('div'); |
|
|
bar.className = 'wave-bar'; |
|
|
bar.style.left = `${i * 8}px`; |
|
|
bar.style.height = `${Math.random() * 60 + 20}px`; |
|
|
bar.style.animationDelay = `${Math.random() * 0.5}s`; |
|
|
musicWave.appendChild(bar); |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const progressFill = document.querySelector('.progress-fill'); |
|
|
const currentWidth = parseFloat(progressFill.style.width || '0%'); |
|
|
const newWidth = currentWidth + 0.5; |
|
|
if (newWidth <= 100) { |
|
|
progressFill.style.width = `${newWidth}%`; |
|
|
} else { |
|
|
progressFill.style.width = '0%'; |
|
|
} |
|
|
}, 1000); |
|
|
|
|
|
|
|
|
const songCards = document.querySelectorAll('.song-card'); |
|
|
songCards.forEach(card => { |
|
|
card.addEventListener('mouseenter', () => { |
|
|
card.style.transform = 'translateY(-5px)'; |
|
|
card.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'; |
|
|
}); |
|
|
card.addEventListener('mouseleave', () => { |
|
|
card.style.transform = ''; |
|
|
card.style.boxShadow = ''; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const languageButtons = document.querySelectorAll('#demo button'); |
|
|
languageButtons.forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
languageButtons.forEach(btn => { |
|
|
btn.classList.remove('bg-white', 'text-purple-600'); |
|
|
btn.classList.add('bg-white', 'bg-opacity-10', 'text-white'); |
|
|
}); |
|
|
button.classList.remove('bg-white', 'bg-opacity-10', 'text-white'); |
|
|
button.classList.add('bg-white', 'text-purple-600'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=batnyan/diffr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
