Hugging Face's logo

Spaces:
batnyan
/
diffr
Running

App Files Community
batnyan commited on
Commit
c1b3446
·
verified ·
1 Parent(s): b77518a

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +115 -5
index.html CHANGED
@@ -60,6 +60,31 @@
60
  border-radius: 2px;
61
  transition: width 0.3s ease;
62
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  </style>
64
  </head>
65
  <body>
@@ -75,6 +100,7 @@
75
  <a href="#features" class="hover:text-purple-200 transition">Features</a>
76
  <a href="#technology" class="hover:text-purple-200 transition">Technology</a>
77
  <a href="#demo" class="hover:text-purple-200 transition">Demo</a>
 
78
  <a href="#resources" class="hover:text-purple-200 transition">Resources</a>
79
  </div>
80
  <button class="md:hidden text-xl">
@@ -94,8 +120,8 @@
94
  <button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-purple-100 transition">
95
  <i class="fas fa-play mr-2"></i> Try Demo
96
  </button>
97
- <button class="border border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition">
98
- <i class="fab fa-github mr-2"></i> GitHub
99
  </button>
100
  </div>
101
  </div>
@@ -272,8 +298,81 @@
272
  </div>
273
  </section>
274
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  <!-- Sample Songs -->
276
- <section class="py-16 bg-gray-50">
277
  <div class="container mx-auto px-4">
278
  <h2 class="text-3xl font-bold text-center mb-12">Sample Songs</h2>
279
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -351,7 +450,7 @@
351
  </section>
352
 
353
  <!-- Resources Section -->
354
- <section id="resources" class="py-16 bg-white">
355
  <div class="container mx-auto px-4">
356
  <h2 class="text-3xl font-bold text-center mb-12">Resources</h2>
357
  <div class="grid md:grid-cols-3 gap-8">
@@ -398,6 +497,7 @@
398
  <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
399
  <li><a href="#technology" class="text-gray-400 hover:text-white transition">Technology</a></li>
400
  <li><a href="#demo" class="text-gray-400 hover:text-white transition">Demo</a></li>
 
401
  </ul>
402
  </div>
403
  <div>
@@ -405,7 +505,7 @@
405
  <ul class="space-y-2">
406
  <li><a href="#" class="text-gray-400 hover:text-white transition">Research Paper</a></li>
407
  <li><a href="#" class="text-gray-400 hover:text-white transition">GitHub</a></li>
408
- <li><a href="#" class="text-gray-400 hover:text-white transition">Hugging Face</a></li>
409
  <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
410
  </ul>
411
  </div>
@@ -483,6 +583,16 @@
483
  button.classList.add('bg-white', 'text-purple-600');
484
  });
485
  });
 
 
 
 
 
 
 
 
 
 
486
  </script>
487
  <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>
488
  </html>
 
60
  border-radius: 2px;
61
  transition: width 0.3s ease;
62
  }
63
+
64
+ .huggingface-card {
65
+ transition: all 0.3s ease;
66
+ border: 2px solid transparent;
67
+ }
68
+
69
+ .huggingface-card:hover {
70
+ transform: translateY(-5px);
71
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
72
+ border-color: #FFD21E;
73
+ }
74
+
75
+ .repo-stats {
76
+ display: flex;
77
+ gap: 15px;
78
+ margin-top: 15px;
79
+ }
80
+
81
+ .repo-stat {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 5px;
85
+ font-size: 14px;
86
+ color: #6b7280;
87
+ }
88
  </style>
89
  </head>
90
  <body>
 
100
  <a href="#features" class="hover:text-purple-200 transition">Features</a>
101
  <a href="#technology" class="hover:text-purple-200 transition">Technology</a>
102
  <a href="#demo" class="hover:text-purple-200 transition">Demo</a>
103
+ <a href="#huggingface" class="hover:text-purple-200 transition">Hugging Face</a>
104
  <a href="#resources" class="hover:text-purple-200 transition">Resources</a>
105
  </div>
106
  <button class="md:hidden text-xl">
 
120
  <button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-purple-100 transition">
121
  <i class="fas fa-play mr-2"></i> Try Demo
122
  </button>
123
+ <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">
124
+ <i class="fas fa-external-link-alt mr-2"></i> Hugging Face
125
  </button>
126
  </div>
127
  </div>
 
298
  </div>
299
  </section>
300
 
301
+ <!-- Hugging Face Section -->
302
+ <section id="huggingface" class="py-16 bg-gray-50">
303
+ <div class="container mx-auto px-4">
304
+ <h2 class="text-3xl font-bold text-center mb-12">Hugging Face Repository</h2>
305
+ <div class="max-w-4xl mx-auto">
306
+ <div class="huggingface-card bg-white p-8 rounded-xl shadow-md">
307
+ <div class="flex flex-col md:flex-row items-start">
308
+ <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center">
309
+ <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" class="h-20">
310
+ </div>
311
+ <div class="md:w-2/3 md:pl-8">
312
+ <h3 class="text-2xl font-bold mb-2">DiffRhythm on Hugging Face</h3>
313
+ <p class="text-gray-600 mb-4">Access the official DiffRhythm repository on Hugging Face, featuring the model, demo spaces, and detailed documentation.</p>
314
+
315
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
316
+ <div class="flex">
317
+ <div class="flex-shrink-0">
318
+ <i class="fas fa-exclamation-circle text-yellow-400"></i>
319
+ </div>
320
+ <div class="ml-3">
321
+ <p class="text-sm text-yellow-700">
322
+ The repository contains the complete model implementation, allowing you to run DiffRhythm locally or integrate it into your applications.
323
+ </p>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="repo-stats">
329
+ <div class="repo-stat">
330
+ <i class="fas fa-code-branch"></i>
331
+ <span>Main Branch</span>
332
+ </div>
333
+ <div class="repo-stat">
334
+ <i class="fas fa-star"></i>
335
+ <span>1.2k Stars</span>
336
+ </div>
337
+ <div class="repo-stat">
338
+ <i class="fas fa-code"></i>
339
+ <span>Python</span>
340
+ </div>
341
+ </div>
342
+
343
+ <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">
344
+ <i class="fab fa-hubspot mr-2"></i> Visit Repository
345
+ </button>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="grid md:grid-cols-2 gap-6 mt-8">
351
+ <div class="bg-white p-6 rounded-xl shadow-md">
352
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
353
+ <i class="fas fa-laptop-code text-purple-600 mr-3"></i> Live Demo
354
+ </h3>
355
+ <p class="text-gray-600 mb-4">Try the interactive demo directly on Hugging Face Spaces without any installation required.</p>
356
+ <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">
357
+ Open Demo <i class="fas fa-external-link-alt ml-2"></i>
358
+ </button>
359
+ </div>
360
+ <div class="bg-white p-6 rounded-xl shadow-md">
361
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
362
+ <i class="fas fa-book text-purple-600 mr-3"></i> Documentation
363
+ </h3>
364
+ <p class="text-gray-600 mb-4">Comprehensive documentation including installation instructions, API reference, and usage examples.</p>
365
+ <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">
366
+ Read Docs <i class="fas fa-external-link-alt ml-2"></i>
367
+ </button>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </section>
373
+
374
  <!-- Sample Songs -->
375
+ <section class="py-16 bg-white">
376
  <div class="container mx-auto px-4">
377
  <h2 class="text-3xl font-bold text-center mb-12">Sample Songs</h2>
378
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
 
450
  </section>
451
 
452
  <!-- Resources Section -->
453
+ <section id="resources" class="py-16 bg-gray-50">
454
  <div class="container mx-auto px-4">
455
  <h2 class="text-3xl font-bold text-center mb-12">Resources</h2>
456
  <div class="grid md:grid-cols-3 gap-8">
 
497
  <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
498
  <li><a href="#technology" class="text-gray-400 hover:text-white transition">Technology</a></li>
499
  <li><a href="#demo" class="text-gray-400 hover:text-white transition">Demo</a></li>
500
+ <li><a href="#huggingface" class="text-gray-400 hover:text-white transition">Hugging Face</a></li>
501
  </ul>
502
  </div>
503
  <div>
 
505
  <ul class="space-y-2">
506
  <li><a href="#" class="text-gray-400 hover:text-white transition">Research Paper</a></li>
507
  <li><a href="#" class="text-gray-400 hover:text-white transition">GitHub</a></li>
508
+ <li><a href="https://huggingface.co/spaces/ASLP-lab/DiffRhythm/tree/main" class="text-gray-400 hover:text-white transition">Hugging Face</a></li>
509
  <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
510
  </ul>
511
  </div>
 
583
  button.classList.add('bg-white', 'text-purple-600');
584
  });
585
  });
586
+
587
+ // Smooth scrolling for anchor links
588
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
589
+ anchor.addEventListener('click', function (e) {
590
+ e.preventDefault();
591
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
592
+ behavior: 'smooth'
593
+ });
594
+ });
595
+ });
596
  </script>
597
  <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>
598
  </html>