|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>DiffRhythm-full | 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=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
background-color: #f8fafc; |
|
} |
|
|
|
.gradient-bg { |
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); |
|
} |
|
|
|
.model-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); |
|
} |
|
|
|
.waveform { |
|
background: linear-gradient(90deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%); |
|
height: 60px; |
|
border-radius: 8px; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.waveform::after { |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); |
|
animation: shimmer 2s infinite; |
|
} |
|
|
|
@keyframes shimmer { |
|
0% { transform: translateX(-100%); } |
|
100% { transform: translateX(100%); } |
|
} |
|
|
|
.animate-pulse-slow { |
|
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0%, 100% { opacity: 1; } |
|
50% { opacity: 0.5; } |
|
} |
|
|
|
.code-block { |
|
background-color: #1e293b; |
|
color: #f8fafc; |
|
border-radius: 0.5rem; |
|
padding: 1.5rem; |
|
font-family: 'Courier New', Courier, monospace; |
|
position: relative; |
|
} |
|
|
|
.copy-btn { |
|
position: absolute; |
|
top: 0.5rem; |
|
right: 0.5rem; |
|
background-color: #334155; |
|
color: #f8fafc; |
|
border: none; |
|
border-radius: 0.25rem; |
|
padding: 0.25rem 0.5rem; |
|
cursor: pointer; |
|
font-size: 0.75rem; |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen"> |
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="flex justify-between h-16"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 flex items-center"> |
|
<svg class="h-8 w-8 text-indigo-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
<path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
<path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
</svg> |
|
<span class="ml-2 text-xl font-bold text-gray-900">DiffRhythm</span> |
|
</div> |
|
</div> |
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
<a href="#demo" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-indigo-500 text-sm font-medium">Demo</a> |
|
<a href="#features" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-indigo-500 text-sm font-medium">Features</a> |
|
<a href="#api" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-indigo-500 text-sm font-medium">API</a> |
|
<a href="#research" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-indigo-500 text-sm font-medium">Research</a> |
|
</div> |
|
<div class="flex items-center"> |
|
<a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"> |
|
<i class="fab fa-github mr-2"></i> View on Hugging Face |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
|
<div class="text-center"> |
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> |
|
DiffRhythm-full |
|
</h1> |
|
<p class="mt-6 max-w-2xl mx-auto text-xl"> |
|
A diffusion-based model for high-quality rhythm generation in music |
|
</p> |
|
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4"> |
|
<a href="#try-it" class="bg-white text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-md font-medium transition-colors duration-200"> |
|
<i class="fas fa-play mr-2"></i> Try Demo |
|
</a> |
|
<a href="https://arxiv.org/abs/2305.18874" target="_blank" class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-3 rounded-md font-medium transition-colors duration-200"> |
|
<i class="fas fa-file-alt mr-2"></i> Research Paper |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8" id="demo"> |
|
<div class="text-center mb-12"> |
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
AI-Powered Rhythm Generation |
|
</h2> |
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
DiffRhythm-full generates realistic and diverse rhythm patterns for music composition |
|
</p> |
|
</div> |
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-6"> |
|
<div class="flex flex-col md:flex-row gap-6"> |
|
<div class="md:w-1/2"> |
|
<h3 class="text-lg font-medium text-gray-900">Live Demo</h3> |
|
<p class="mt-2 text-gray-500"> |
|
Generate rhythm patterns by specifying your preferences: |
|
</p> |
|
|
|
<div class="mt-6 space-y-4"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700">Genre</label> |
|
<select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
|
<option>Pop</option> |
|
<option>Rock</option> |
|
<option>Jazz</option> |
|
<option>Electronic</option> |
|
<option>Hip Hop</option> |
|
<option>Classical</option> |
|
</select> |
|
</div> |
|
|
|
<div> |
|
<label class="block text-sm font-medium text-gray-700">Tempo (BPM)</label> |
|
<input type="range" min="60" max="200" value="120" class="mt-1 block w-full"> |
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
<span>60</span> |
|
<span>120</span> |
|
<span>200</span> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<label class="block text-sm font-medium text-gray-700">Complexity</label> |
|
<select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
|
<option>Simple</option> |
|
<option selected>Medium</option> |
|
<option>Complex</option> |
|
</select> |
|
</div> |
|
|
|
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200"> |
|
Generate Rhythm |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="md:w-1/2"> |
|
<h3 class="text-lg font-medium text-gray-900">Output Preview</h3> |
|
<div class="mt-6 bg-gray-50 rounded-lg p-4"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<div> |
|
<h4 class="font-medium">Generated Rhythm</h4> |
|
<p class="text-sm text-gray-500">Pop • 120 BPM • Medium complexity</p> |
|
</div> |
|
<button class="text-indigo-600 hover:text-indigo-800"> |
|
<i class="fas fa-download"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="waveform"></div> |
|
|
|
<div class="mt-4 grid grid-cols-4 gap-2"> |
|
<div class="bg-indigo-100 h-8 rounded flex items-center justify-center"> |
|
<i class="fas fa-drum text-indigo-600"></i> |
|
</div> |
|
<div class="bg-indigo-100 h-8 rounded flex items-center justify-center"> |
|
<i class="fas fa-drum text-indigo-600"></i> |
|
</div> |
|
<div class="bg-indigo-100 h-8 rounded flex items-center justify-center"> |
|
<i class="fas fa-drum text-indigo-600"></i> |
|
</div> |
|
<div class="bg-indigo-100 h-8 rounded flex items-center justify-center"> |
|
<i class="fas fa-drum text-indigo-600"></i> |
|
</div> |
|
<div class="bg-indigo-100 h-8 rounded flex items-center justify-center"> |
|
<i class="fas fa-drum text-indigo-600"></i> |
|
</div> |
|
<div class="bg-gray-200 h-8 rounded"></div> |
|
<div class="bg-indigo-100 h-8 rounded flex items-center justify-center"> |
|
<i class="fas fa-drum text-indigo-600"></i> |
|
</div> |
|
<div class="bg-gray-200 h-8 rounded"></div> |
|
</div> |
|
|
|
<div class="mt-4 flex justify-between"> |
|
<button class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
|
<i class="fas fa-play mr-2"></i> Play |
|
</button> |
|
<button class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
|
<i class="fas fa-redo mr-2"></i> Regenerate |
|
</button> |
|
<button class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
|
<i class="fas fa-music mr-2"></i> Add to Project |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 py-16" id="features"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="lg:text-center"> |
|
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2> |
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
Why Choose DiffRhythm-full? |
|
</p> |
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
Advanced AI capabilities for professional music production |
|
</p> |
|
</div> |
|
|
|
<div class="mt-20"> |
|
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> |
|
<div class="relative"> |
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
<i class="fas fa-brain"></i> |
|
</div> |
|
<div class="ml-16"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Diffusion-Based</h3> |
|
<p class="mt-2 text-base text-gray-500"> |
|
Utilizes state-of-the-art diffusion models for high-quality rhythm generation |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="relative"> |
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
<i class="fas fa-sliders-h"></i> |
|
</div> |
|
<div class="ml-16"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Parameter Control</h3> |
|
<p class="mt-2 text-base text-gray-500"> |
|
Fine-tune generation with tempo, genre, and complexity parameters |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="relative"> |
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
<i class="fas fa-music"></i> |
|
</div> |
|
<div class="ml-16"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Multi-Instrument</h3> |
|
<p class="mt-2 text-base text-gray-500"> |
|
Generates coordinated rhythms across drum kits and percussion instruments |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="relative"> |
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
<i class="fas fa-file-export"></i> |
|
</div> |
|
<div class="ml-16"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">MIDI Export</h3> |
|
<p class="mt-2 text-base text-gray-500"> |
|
Export generated rhythms as MIDI files for use in any DAW |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="relative"> |
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
<i class="fas fa-random"></i> |
|
</div> |
|
<div class="ml-16"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Diverse Styles</h3> |
|
<p class="mt-2 text-base text-gray-500"> |
|
Capable of generating everything from simple beats to complex polyrhythms |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="relative"> |
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
<i class="fas fa-robot"></i> |
|
</div> |
|
<div class="ml-16"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">AI-Powered</h3> |
|
<p class="mt-2 text-base text-gray-500"> |
|
Trained on extensive datasets of professional rhythm patterns |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8" id="api"> |
|
<div class="text-center mb-12"> |
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
API Integration |
|
</h2> |
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
Easily integrate DiffRhythm-full into your applications |
|
</p> |
|
</div> |
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-6"> |
|
<div class="flex flex-col md:flex-row gap-6"> |
|
<div class="md:w-1/2"> |
|
<h3 class="text-lg font-medium text-gray-900">Python Example</h3> |
|
<p class="mt-2 text-gray-500"> |
|
Generate rhythms programmatically with our Python API: |
|
</p> |
|
|
|
<div class="mt-6 code-block"> |
|
<button class="copy-btn" onclick="copyCode()"> |
|
<i class="fas fa-copy mr-1"></i> Copy |
|
</button> |
|
<pre><code>from diffrhythm import DiffRhythmGenerator |
|
|
|
# Initialize the generator |
|
generator = DiffRhythmGenerator.from_pretrained("ASLP-lab/DiffRhythm-full") |
|
|
|
# Generate a rhythm pattern |
|
params = { |
|
"genre": "rock", |
|
"tempo": 110, |
|
"complexity": "medium", |
|
"duration": 8 # bars |
|
} |
|
|
|
rhythm = generator.generate(**params) |
|
|
|
# Save as MIDI |
|
rhythm.save("output.mid")</code></pre> |
|
</div> |
|
</div> |
|
|
|
<div class="md:w-1/2"> |
|
<h3 class="text-lg font-medium text-gray-900">API Parameters</h3> |
|
<div class="mt-6 space-y-4"> |
|
<div class="border-b border-gray-200 pb-4"> |
|
<h4 class="font-medium text-gray-900">genre</h4> |
|
<p class="text-sm text-gray-500 mt-1">Specifies the musical genre for the rhythm (e.g., pop, rock, jazz, electronic)</p> |
|
</div> |
|
|
|
<div class="border-b border-gray-200 pb-4"> |
|
<h4 class="font-medium text-gray-900">tempo</h4> |
|
<p class="text-sm text-gray-500 mt-1">Beats per minute (BPM) for the generated rhythm (range: 60-200)</p> |
|
</div> |
|
|
|
<div class="border-b border-gray-200 pb-4"> |
|
<h4 class="font-medium text-gray-900">complexity</h4> |
|
<p class="text-sm text-gray-500 mt-1">Controls the rhythmic complexity (simple, medium, complex)</p> |
|
</div> |
|
|
|
<div class="border-b border-gray-200 pb-4"> |
|
<h4 class="font-medium text-gray-900">duration</h4> |
|
<p class="text-sm text-gray-500 mt-1">Length of the generated rhythm in musical bars</p> |
|
</div> |
|
|
|
<div class="border-b border-gray-200 pb-4"> |
|
<h4 class="font-medium text-gray-900">instruments</h4> |
|
<p class="text-sm text-gray-500 mt-1">Optional list of percussion instruments to include</p> |
|
</div> |
|
|
|
<a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-4"> |
|
<i class="fas fa-book mr-2"></i> Full API Documentation |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 py-16" id="research"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="lg:text-center"> |
|
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Research</h2> |
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
The Science Behind DiffRhythm |
|
</p> |
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
Cutting-edge AI research in music generation |
|
</p> |
|
</div> |
|
|
|
<div class="mt-12 grid gap-8 lg:grid-cols-2"> |
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
<div class="p-5"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
|
<i class="fas fa-file-alt text-white text-xl"></i> |
|
</div> |
|
<div class="ml-5 w-0 flex-1"> |
|
<h3 class="text-lg font-medium text-gray-900">Research Paper</h3> |
|
<p class="mt-1 text-sm text-gray-500"> |
|
Learn about the architecture and training methodology |
|
</p> |
|
<a href="https://arxiv.org/abs/2305.18874" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-2"> |
|
Read paper <i class="fas fa-external-link-alt ml-1 text-xs"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
<div class="p-5"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
|
<i class="fas fa-chart-bar text-white text-xl"></i> |
|
</div> |
|
<div class="ml-5 w-0 flex-1"> |
|
<h3 class="text-lg font-medium text-gray-900">Model Performance</h3> |
|
<p class="mt-1 text-sm text-gray-500"> |
|
Evaluation metrics and comparative analysis |
|
</p> |
|
<a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-2"> |
|
View details <i class="fas fa-external-link-alt ml-1 text-xs"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
<div class="p-5"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
|
<i class="fas fa-code-branch text-white text-xl"></i> |
|
</div> |
|
<div class="ml-5 w-0 flex-1"> |
|
<h3 class="text-lg font-medium text-gray-900">Model Architecture</h3> |
|
<p class="mt-1 text-sm text-gray-500"> |
|
Technical details of the diffusion model implementation |
|
</p> |
|
<a href="https://github.com/ASLP-Lab/DiffRhythm" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-2"> |
|
GitHub repository <i class="fas fa-external-link-alt ml-1 text-xs"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
<div class="p-5"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
|
<i class="fas fa-users text-white text-xl"></i> |
|
</div> |
|
<div class="ml-5 w-0 flex-1"> |
|
<h3 class="text-lg font-medium text-gray-900">Research Team</h3> |
|
<p class="mt-1 text-sm text-gray-500"> |
|
ASLP-Lab at Peking University |
|
</p> |
|
<a href="https://aslp-kx-pku.github.io/" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-2"> |
|
Visit lab website <i class="fas fa-external-link-alt ml-1 text-xs"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-indigo-700"> |
|
<div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> |
|
<h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
|
<span class="block">Ready to integrate DiffRhythm?</span> |
|
<span class="block">Start generating professional rhythms today.</span> |
|
</h2> |
|
<p class="mt-4 text-lg leading-6 text-indigo-200"> |
|
Available on Hugging Face for easy integration into your projects. |
|
</p> |
|
<a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto transition-colors duration-200"> |
|
<i class="fab fa-hubspot mr-2"></i> Get the Model |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<footer class="bg-white"> |
|
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> |
|
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> |
|
<div class="px-5 py-2"> |
|
<a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
|
Home |
|
</a> |
|
</div> |
|
<div class="px-5 py-2"> |
|
<a href="#demo" class="text-base text-gray-500 hover:text-gray-900"> |
|
Demo |
|
</a> |
|
</div> |
|
<div class="px-5 py-2"> |
|
<a href="#features" class="text-base text-gray-500 hover:text-gray-900"> |
|
Features |
|
</a> |
|
</div> |
|
<div class="px-5 py-2"> |
|
<a href="#api" class="text-base text-gray-500 hover:text-gray-900"> |
|
API |
|
</a> |
|
</div> |
|
<div class="px-5 py-2"> |
|
<a href="#research" class="text-base text-gray-500 hover:text-gray-900"> |
|
Research |
|
</a> |
|
</div> |
|
<div class="px-5 py-2"> |
|
<a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
|
Terms |
|
</a> |
|
</div> |
|
</nav> |
|
<div class="mt-8 flex justify-center space-x-6"> |
|
<a href="https://github.com/ASLP-Lab/DiffRhythm" target="_blank" class="text-gray-400 hover:text-gray-500"> |
|
<span class="sr-only">GitHub</span> |
|
<i class="fab fa-github"></i> |
|
</a> |
|
<a href="https://arxiv.org/abs/2305.18874" target="_blank" class="text-gray-400 hover:text-gray-500"> |
|
<span class="sr-only">arXiv</span> |
|
<i class="fas fa-file-alt"></i> |
|
</a> |
|
<a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="text-gray-400 hover:text-gray-500"> |
|
<span class="sr-only">Hugging Face</span> |
|
<i class="fab fa-hubspot"></i> |
|
</a> |
|
<a href="https://aslp-kx-pku.github.io/" target="_blank" class="text-gray-400 hover:text-gray-500"> |
|
<span class="sr-only">ASLP-Lab</span> |
|
<i class="fas fa-university"></i> |
|
</a> |
|
</div> |
|
<p class="mt-8 text-center text-base text-gray-400"> |
|
© 2023 ASLP-Lab, Peking University. All rights reserved. |
|
</p> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
function copyCode() { |
|
const code = document.querySelector('.code-block code').innerText; |
|
navigator.clipboard.writeText(code).then(() => { |
|
const btn = document.querySelector('.copy-btn'); |
|
btn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!'; |
|
setTimeout(() => { |
|
btn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copy'; |
|
}, 2000); |
|
}); |
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
const generateBtn = document.querySelector('button:contains("Generate Rhythm")'); |
|
if (generateBtn) { |
|
generateBtn.addEventListener('click', function() { |
|
const genre = document.querySelector('select').value; |
|
const tempo = document.querySelector('input[type="range"]').value; |
|
const complexity = document.querySelectorAll('select')[1].value; |
|
|
|
document.querySelector('.waveform').classList.add('animate-pulse-slow'); |
|
|
|
setTimeout(() => { |
|
document.querySelector('.waveform').classList.remove('animate-pulse-slow'); |
|
|
|
const outputTitle = document.querySelector('.bg-gray-50 h4'); |
|
const outputDesc = document.querySelector('.bg-gray-50 p'); |
|
|
|
outputTitle.textContent = "Generated " + genre + " Rhythm"; |
|
outputDesc.textContent = genre + " • " + tempo + " BPM • " + complexity + " complexity"; |
|
|
|
alert('Rhythm generated successfully! Click "Play" to listen.'); |
|
}, 2000); |
|
}); |
|
} |
|
}); |
|
</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/musicsong" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
