Add Data Pipeline and Reproducibility features

Author: Yassine El Kheir

assets/css/style.css

@@ -74,13 +74,43 @@ h3 {
 }
 
 
+
 .gradient-text {
     background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
+/* Utilities */
+.mt-4 {
+    margin-top: 1.5rem;
+}
+
+/* Hugging Face Section */
+.huggingface-section {
+    padding: 80px 0;
+    background: #fffcf4;
+    border-top: 1px solid #fef3c7;
+}
+
+.hf-text {
+    color: #facc15;
+    font-size: 1.2em;
+    vertical-align: middle;
+}
+
+.hf-card {
+    background: white;
+    border: 1px solid #fef3c7;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+.hf-card:hover {
+    border-color: #facc15;
+}
+
+
 
 /* Buttons */
 .btn {

index.html

@@ -116,6 +116,24 @@ <h3>Standardized Metrics</h3>
                     <p>Automatic tracking of EER, minDCF, and F1-score with integrated WandB logging and checkpointing.
                     </p>
                 </div>
+
+                <div class="card">
+                    <div class="icon-box purple">
+                        <i class="fas fa-layer-group"></i>
+                    </div>
+                    <h3>Smart Data Pipeline</h3>
+                    <p>Robust handling of variable-length audio with smart padding, unified dataset construction, and
+                        efficient collation.</p>
+                </div>
+
+                <div class="card">
+                    <div class="icon-box blue">
+                        <i class="fas fa-list-check"></i>
+                    </div>
+                    <h3>Reproducible Research</h3>
+                    <p>Unified reporting protocols ensure every experiment is tractable, comparable, and fully
+                        reproducible.</p>
+                </div>
             </div>
         </div>
     </section>
@@ -178,6 +196,44 @@ <h3>Optimizers</h3>
         </div>
     </section>
 
+    <!-- Hugging Face Section -->
+    <section class="huggingface-section">
+        <div class="container">
+            <div class="section-header">
+                <h2>DeepFense <span class="hf-text">♥</span> Hugging Face</h2>
+                <p>Accelerate your research with our open-source model zoo and processed datasets.</p>
+            </div>
+
+            <div class="grid-2">
+                <div class="card hf-card">
+                    <div class="icon-box yellow">
+                        <i class="fas fa-boxes-stacked"></i>
+                    </div>
+                    <h3>Pre-trained Models</h3>
+                    <p>Access state-of-the-art checkpoints for WavLM, EAT, and AASIST. Ready for inference or
+                        fine-tuning on your own data.</p>
+                    <div class="mt-4">
+                        <a href="https://huggingface.co/deepfense" target="_blank" class="btn btn-outline">Visit Model
+                            Zoo</a>
+                    </div>
+                </div>
+
+                <div class="card hf-card">
+                    <div class="icon-box yellow">
+                        <i class="fas fa-database"></i>
+                    </div>
+                    <h3>Processed Datasets</h3>
+                    <p>We host cleaned and aligned versions of major deepfake datasets (ASVspoof 2019/2021, In-the-wild)
+                        for immediate use.</p>
+                    <div class="mt-4">
+                        <a href="https://huggingface.co/deepfense" target="_blank" class="btn btn-outline">View
+                            Datasets</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- Quickstart Section -->
     <section id="quickstart" class="quickstart">
         <div class="container">