Spaces:

R-Kentaren
/

AudioEditingWeb

Running

App Files Files Community

R-Kentaren commited on Jun 13

Commit

fca6c6f

verified ·

1 Parent(s): 0822954

Update index.html

Browse files

Files changed (1) hide show

index.html +168 -8

index.html CHANGED Viewed

@@ -1,9 +1,169 @@
-<div class="container-xl px-2 sm:px-4 lg:px-8">
-  <div class="text-center py-6 md:py-12">
-    <h1 class="text-2xl md:text-4xl font-bold mb-2">Zero-Shot Audio Editing</h1>
-    <div class="flex flex-col md:flex-row justify-center gap-3 md:gap-6 mt-4">
-      <a href="#" class="w-full md:w-auto btn btn-outline-primary text-base md:text-lg py-2">ArXiv</a>
-      <a href="#" class="w-full md:w-auto btn btn-outline-primary text-base md:text-lg py-2">Code</a>
     </div>
-  </div>
-</div>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Zero-Shot Unsupervised and Text-Based Audio Editing Using DDPM Inversion</title>
+  <link rel="shortcut icon" href="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/favicon.ico">
+  <meta property="og:image" content="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/teaser.png"/>
+  <meta property="og:title" content="Zero-Shot Unsupervised and Text-Based Audio Editing Using DDPM Inversion" />
+  <meta property="og:description" content="Zero-Shot Unsupervised and Text-Based Audio Editing Using DDPM Inversion" />
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Google Fonts: Poppins -->
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+  <!-- Font Awesome -->
+  <script src="https://kit.fontawesome.com/ad96f96272.js" crossorigin="anonymous"></script>
+  <!-- Academicons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
+  <style>
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+      color: #f1f5f9;
+      min-height: 100vh;
+    }
+    ::selection {
+      background: #2563eb;
+      color: #fff;
+    }
+  </style>
+</head>
+<body class="bg-gradient-to-br from-slate-900 to-slate-800 min-h-screen">
+  <!-- Navigation Bar -->
+  <nav class="bg-gradient-to-r from-blue-600 to-blue-800 shadow-lg sticky top-0 z-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between h-16">
+        <a href="#" class="text-xl md:text-2xl font-bold text-white">Zero-Shot Audio Editing</a>
+        <div class="hidden md:flex space-x-6">
+          <a href="#supsamples" class="text-gray-200 hover:text-blue-300 transition">Text-based Editing</a>
+          <a href="#unsupsamples" class="text-gray-200 hover:text-blue-300 transition">Unsup. Editing</a>
+          <a href="#supcomparisons" class="text-gray-200 hover:text-blue-300 transition">Text-Based Editing Comp.</a>
+          <a href="#unsupcomparisons" class="text-gray-200 hover:text-blue-300 transition">Unsup. Editing Comp.</a>
+        </div>
+        <button id="mobile-menu-btn" class="md:hidden text-gray-200 text-2xl focus:outline-none">
+          <i class="fas fa-bars"></i>
+        </button>
+      </div>
+      <!-- Mobile Menu -->
+      <div id="mobile-menu" class="md:hidden hidden flex-col space-y-2 pb-4">
+        <a href="#supsamples" class="block text-gray-200 hover:text-blue-300">Text-based Editing</a>
+        <a href="#unsupsamples" class="block text-gray-200 hover:text-blue-300">Unsup. Editing</a>
+        <a href="#supcomparisons" class="block text-gray-200 hover:text-blue-300">Text-Based Editing Comp.</a>
+        <a href="#unsupcomparisons" class="block text-gray-200 hover:text-blue-300">Unsup. Editing Comp.</a>
+      </div>
     </div>
+  </nav>
+  <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <!-- Back to Top Button -->
+    <button onclick="window.scrollTo({top: 0, behavior: 'smooth'});" class="fixed bottom-8 right-8 bg-red-600 text-white rounded-full p-4 shadow-lg hover:bg-red-700 transition hidden md:block z-50" aria-label="Back to top" id="btn-back-to-top">
+      <i class="fas fa-arrow-up"></i>
+    </button>
+    <!-- Header Section -->
+    <section class="text-center py-10">
+      <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Zero-Shot Unsupervised and Text-Based Audio Editing Using DDPM Inversion</h1>
+      <h4 class="text-lg sm:text-xl md:text-2xl mb-2">ICML 2024</h4>
+      <div class="flex flex-wrap justify-center gap-4 mt-4 text-base sm:text-lg">
+        <a href="https://www.linkedin.com/in/hilamanor/" target="_blank" class="hover:text-blue-400 transition">Hila Manor</a>
+        <span class="text-gray-400 hidden sm:inline">|</span>
+        <a href="https://tomer.net.technion.ac.il/" target="_blank" class="hover:text-blue-400 transition">Tomer Michaeli</a>
+      </div>
+      <p class="text-center text-base sm:text-lg mt-2">Technion - Israel Institute of Technology</p>
+      <div class="flex flex-wrap justify-center gap-3 mt-6">
+        <a class="px-4 py-2 rounded-lg border border-blue-400 text-blue-400 hover:bg-blue-500 hover:text-white transition flex items-center gap-2" href="https://arxiv.org/abs/2402.10009" target="_blank">
+          <i class="ai ai-arxiv"></i>ArXiv
+        </a>
+        <a class="px-4 py-2 rounded-lg border border-blue-400 text-blue-400 hover:bg-blue-500 hover:text-white transition flex items-center gap-2" href="https://github.com/HilaManor/AudioEditingCode/" target="_blank">
+          <i class="fab fa-github"></i>Code
+        </a>
+        <a class="px-4 py-2 rounded-lg border border-blue-400 text-blue-400 hover:bg-blue-500 hover:text-white transition flex items-center gap-2" href="https://youtu.be/lBnldOQVbS4" target="_blank">
+          <i class="fab fa-youtube"></i>Presentation
+        </a>
+        <a class="px-4 py-2 rounded-lg border border-blue-400 text-blue-400 hover:bg-blue-500 hover:text-white transition flex items-center gap-2" href="https://huggingface.co/spaces/hilamanor/audioEditing/" target="_blank">
+          🤗 Text-Based Space
+        </a>
+      </div>
+    </section>
+    <!-- Abstract and Teaser -->
+    <section class="text-center py-8">
+      <img alt="Teaser" src="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/teaser.png" class="w-full max-w-lg mx-auto rounded-lg shadow-lg mb-6"/>
+      <h2 class="text-xl sm:text-2xl md:text-3xl font-semibold mb-2">Abstract</h2>
+      <p class="text-base sm:text-lg leading-relaxed mt-4 text-gray-200">
+        Editing signals using large pre-trained models, in a zero-shot manner, has recently seen rapid advancements in the image domain. However, this wave has yet to reach the audio domain.
+        In this paper, we explore two zero-shot editing techniques for audio signals, which use DDPM inversion on pre-trained diffusion models. The first, adopted from the image domain, allows text-based editing.
+        The second, is a novel approach for discovering semantically meaningful editing directions without supervision.
+        When applied to music signals, this method exposes a range of musically interesting modifications, from controlling the participation of specific instruments to improvisations on the melody.
+      </p>
+    </section>
+    <hr class="border-gray-700 my-8">
+    <!-- Video Overview -->
+    <section class="text-center py-8">
+      <h2 class="text-xl sm:text-2xl md:text-3xl font-semibold mb-2">Video Overview</h2>
+      <p class="text-base sm:text-lg mt-2 text-gray-300">For people in a hurry. Images generated by <a href="https://openai.com/dall-e-2" class="text-blue-400 hover:underline">DALL-E 2</a> and <a href="https://www.bing.com/copilot" class="text-blue-400 hover:underline">Copilot</a>.</p>
+      <video controls class="w-full max-w-md mx-auto rounded-lg shadow-lg mt-4">
+        <source src="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/overview.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
+    </section>
+    <hr class="border-gray-700 my-8">
+    <!-- Samples of Editing -->
+    <section class="text-center py-8">
+      <h2 class="text-xl sm:text-2xl md:text-3xl font-semibold mb-2">1. Samples of Editing</h2>
+      <p class="text-base sm:text-lg mt-2 text-gray-300">We present samples of audio editing using our proposed methods. The samples are organized into two sections: text-based editing and unsupervised editing.</p>
+      <!-- Text-Based Editing Table -->
+      <h3 id="supsamples" class="text-lg sm:text-xl md:text-2xl font-semibold mt-6 mb-4">1.1. Samples of Text-Based Editing</h3>
+      <div class="overflow-x-auto">
+        <table class="min-w-full text-sm text-left text-gray-200 border border-gray-700 rounded-lg">
+          <thead class="bg-blue-900/80">
+            <tr>
+              <th class="px-2 py-2">#</th>
+              <th class="px-2 py-2">Source Prompt</th>
+              <th class="px-2 py-2">Target Prompt</th>
+              <th class="px-2 py-2">Original Audio</th>
+              <th class="px-2 py-2">Edited Audio</th>
+              <th class="px-2 py-2">Edit T<sub>start</sub></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="hover:bg-blue-800/30 transition">
+              <td class="px-2 py-2">1</td>
+              <td class="px-2 py-2">A recording of a <b>sneaky jazz</b> song.</td>
+              <td class="px-2 py-2">A recording of a <b>tense classical</b> music score.</td>
+              <td class="px-2 py-2"><audio controls class="w-32 sm:w-40 md:w-52"><source src="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/audio/orig/MDDBFreeJazz.mp3" type="audio/mp4"></audio></td>
+              <td class="px-2 py-2"><audio controls class="w-32 sm:w-40 md:w-52"><source src="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/audio/sup_samples/orchestra_MDDBFreeJazz_ours_90.mp3" type="audio/mp4"></audio></td>
+              <td class="px-2 py-2 text-center">110</td>
+            </tr>
+            <tr class="hover:bg-blue-800/30 transition">
+              <td class="px-2 py-2">2</td>
+              <td class="px-2 py-2">A recording of a <b>hard rock</b> song.</td>
+              <td class="px-2 py-2">A recording of a <b>jazz</b> song.</td>
+              <td class="px-2 py-2"><audio controls class="w-32 sm:w-40 md:w-52"><source src="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/audio/orig/MDDBZeppelin.mp3" type="audio/mp4"></audio></td>
+              <td class="px-2 py-2"><audio controls class="w-32 sm:w-40 md:w-52"><source src="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/audio/sup_samples/jazz_MDDBZeppelin_ours_100.mp3" type="audio/mp4"></audio></td>
+              <td class="px-2 py-2 text-center">100</td>
+            </tr>
+            <!-- Add more rows as needed -->
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+  <script>
+    // Mobile menu toggle
+    const menuBtn = document.getElementById('mobile-menu-btn');
+    const menu = document.getElementById('mobile-menu');
+    menuBtn.addEventListener('click', () => {
+      menu.classList.toggle('hidden');
+    });
+    // Show back-to-top button on scroll
+    window.addEventListener('scroll', function() {
+      const btn = document.getElementById('btn-back-to-top');
+      if (window.scrollY > 300) {
+        btn.classList.remove('hidden');
+      } else {
+        btn.classList.add('hidden');
+      }
+    });
+  </script>
+</body>
+</html>