Spaces:

R-Kentaren
/

AudioEditingWeb

Running

App Files Files Community

R-Kentaren commited on Jun 13, 2025

Commit

0822954

verified ·

1 Parent(s): dcdfae3

Update index.html

Browse files

Files changed (1) hide show

index.html +9 -168

index.html CHANGED Viewed

@@ -1,168 +1,9 @@
-<!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;
-    }
-    .glass {
-      background: rgba(30, 41, 59, 0.7);
-      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-      backdrop-filter: blur(8px);
-      border-radius: 1rem;
-      border: 1px solid rgba(255,255,255,0.08);
-    }
-    .gradient-btn {
-      background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);
-      color: #fff;
-      transition: transform 0.2s, box-shadow 0.2s;
-    }
-    .gradient-btn:hover {
-      transform: translateY(-2px) scale(1.03);
-      box-shadow: 0 4px 20px 0 rgba(37,99,235,0.25);
-      background: linear-gradient(90deg, #1e40af 0%, #2563eb 100%);
-    }
-    .audio-player {
-      width: 100%;
-      max-width: 260px;
-      background: #1e293b;
-      border-radius: 0.5rem;
-      box-shadow: 0 2px 8px rgba(16, 24, 39, 0.2);
-      padding: 0.5rem;
-    }
-    ::selection {
-      background: #2563eb;
-      color: #fff;
-    }
-  </style>
-</head>
-<body>
-  <!-- Navigation Bar -->
-  <nav class="glass sticky top-0 z-50 flex items-center justify-between px-6 py-4 shadow-lg">
-    <a href="#" class="text-2xl font-bold tracking-tight bg-gradient-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent">Zero-Shot Audio Editing</a>
-    <div class="hidden md:flex space-x-6">
-      <a href="#supsamples" class="hover:text-blue-400 transition">Text-based Editing</a>
-      <a href="#unsupsamples" class="hover:text-blue-400 transition">Unsup. Editing</a>
-      <a href="#supcomparisons" class="hover:text-blue-400 transition">Text-Based Editing Comp.</a>
-      <a href="#unsupcomparisons" class="hover:text-blue-400 transition">Unsup. Editing Comp.</a>
-    </div>
-    <button class="md:hidden text-2xl"><i class="fas fa-bars"></i></button>
-  </nav>
-  <!-- Header Section -->
-  <header class="max-w-3xl mx-auto mt-12 text-center glass py-10 px-6">
-    <h1 class="text-4xl md:text-5xl font-extrabold mb-4 bg-gradient-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent">
-      Zero-Shot Unsupervised and Text-Based Audio Editing Using DDPM Inversion
-    </h1>
-    <h4 class="text-xl md:text-2xl font-semibold mb-2">ICML 2024</h4>
-    <div class="flex flex-wrap justify-center gap-4 mb-2">
-      <a href="https://www.linkedin.com/in/hilamanor/" target="_blank" class="text-lg hover:text-blue-400 transition">Hila Manor</a>
-      <span class="text-gray-400">|</span>
-      <a href="https://tomer.net.technion.ac.il/" target="_blank" class="text-lg hover:text-blue-400 transition">Tomer Michaeli</a>
-    </div>
-    <p class="mb-4 text-gray-300">Technion - Israel Institute of Technology</p>
-    <div class="flex flex-wrap justify-center gap-4 mt-4">
-      <a class="gradient-btn px-5 py-2 rounded-lg font-semibold flex items-center gap-2" href="https://arxiv.org/abs/2402.10009" target="_blank"><i class="ai ai-arxiv"></i>ArXiv</a>
-      <a class="gradient-btn px-5 py-2 rounded-lg font-semibold flex items-center gap-2" href="https://github.com/HilaManor/AudioEditingCode/" target="_blank"><i class="fab fa-github"></i>Code</a>
-      <a class="gradient-btn px-5 py-2 rounded-lg font-semibold flex items-center gap-2" href="https://youtu.be/lBnldOQVbS4" target="_blank"><i class="fab fa-youtube"></i>Presentation</a>
-      <a class="gradient-btn px-5 py-2 rounded-lg font-semibold flex items-center gap-2" href="https://huggingface.co/spaces/hilamanor/audioEditing/" target="_blank">🤗 Text-Based Space</a>
-    </div>
-  </header>
-  <!-- Abstract and Teaser -->
-  <section class="max-w-3xl mx-auto my-12 glass py-8 px-6 text-center">
-    <img alt="Teaser" src="https://github.com/HilaManor/AudioEditingCode/raw/refs/heads/codeclean/docs/resources/teaser.png" class="mx-auto rounded-xl shadow-xl mb-6 w-full md:w-3/4"/>
-    <h2 class="text-2xl font-semibold mb-4">Abstract</h2>
-    <p class="text-lg leading-relaxed 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>
-  <!-- Video Overview -->
-  <section class="max-w-3xl mx-auto my-12 glass py-8 px-6 text-center">
-    <h2 class="text-2xl font-semibold mb-2">Video Overview</h2>
-    <p class="text-gray-300 mb-4">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="mx-auto rounded-xl shadow-xl w-full max-w-md">
-      <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>
-  <!-- Samples of Editing -->
-  <section class="max-w-5xl mx-auto my-12 glass py-8 px-6">
-    <h2 class="text-2xl font-semibold text-center mb-4">1. Samples of Editing</h2>
-    <p class="text-center text-gray-300 mb-8">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 -->
-    <div>
-      <h3 id="supsamples" class="text-xl font-semibold 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">
-          <thead class="bg-blue-900/80">
-            <tr>
-              <th class="px-4 py-2">#</th>
-              <th class="px-4 py-2">Source Prompt</th>
-              <th class="px-4 py-2">Target Prompt</th>
-              <th class="px-4 py-2">Original Audio</th>
-              <th class="px-4 py-2">Edited Audio</th>
-              <th class="px-4 py-2">Edit T<sub>start</sub></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr class="hover:bg-blue-800/30 transition">
-              <td class="px-4 py-2">1</td>
-              <td class="px-4 py-2">A recording of a <b>sneaky jazz</b> song.</td>
-              <td class="px-4 py-2">A recording of a <b>tense classical</b> music score.</td>
-              <td class="px-4 py-2"><audio controls class="audio-player"><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-4 py-2"><audio controls class="audio-player"><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-4 py-2 text-center">110</td>
-            </tr>
-            <!-- Repeat for other rows as needed ... -->
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <!-- Add more sections as needed -->
-  </section>
-  <!-- Back to Top Button -->
-  <button onclick="window.scrollTo({top: 0, behavior: 'smooth'});" class="fixed bottom-8 right-8 gradient-btn rounded-full p-4 shadow-xl hover:scale-110 transition hidden md:block" aria-label="Back to top">
-    <i class="fas fa-arrow-up"></i>
-  </button>
-  <script>
-    // Show back-to-top button on scroll
-    window.addEventListener('scroll', function() {
-      const btn = document.querySelector('.fixed.bottom-8.right-8');
-      if (window.scrollY > 300) {
-        btn.classList.remove('hidden');
-      } else {
-        btn.classList.add('hidden');
-      }
-    });
-  </script>
-</body>
-</html>

+<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>