Update index.html

index.html

@@ -144,8 +144,416 @@
   showHighlight(highlightIndex);
 </script>
 
-<!-- The rest of your sections go here -->
-<!-- Ensure other tables are also inside <div style="overflow-x:auto"> if needed -->
+<div class="container">
+  <h1>Bibtex</h1>
+  <p>TODO</p>
+</div>
+  
+<!-- Section 1 -->
+<div class="container">
+  <h1>Fixed Training Configuration</h1>
+
+  <h5>Text Descriptions</h5>
+  <table style="width:100%; border-collapse: separate; border-spacing: 0 10px;">
+    <tbody>
+      <tr><td style="font-weight: bold;">Text 1:</td><td>Cool and sophisticated, featuring crisp distorted guitar, shuffling drums and simple bass that create a vintage atmosphere.</td></tr>
+      <tr><td style="font-weight: bold;">Text 2:</td><td>Powerful rock track with continuously improvised electric guitar solo. Played by a rock band of drums, bass guitar, electric guitar, acoustic guitar and electric organ. Energetic and lively - ideal for sports, action and motivational soulfulness. BPM 106</td></tr>
+      <tr><td style="font-weight: bold;">Text 3:</td><td>Positive, tropical, shiny 4 tracks collection inspired by summer. Perfect for dance, energetic, party, travel or presentation video projects.</td></tr>
+      <tr><td style="font-weight: bold;">Text 4:</td><td>An upbeat and fast-pace jazz sing trailer featuring horns, drums and vibes. This full-length and face-paced track tells a story.This song is perfect for trailers, promotional videos, advertisements, commercials, TV ads, YouTube videos, corporate presentations and wedding videos.</td></tr>
+    </tbody>
+  </table>
+
+  <br>
+  <label><b>Latent Representation Frequency</b>:</label>
+  <select id="mappingSelect">
+    <option value="25">25</option>
+    <option value="50" selected>50</option>
+    <option value="100">100</option>
+  </select>
+
+  <table style="width:100%; border-collapse: separate; border-spacing: 0 10px;">
+    <thead>
+      <tr>
+        <th>Text Description</th>
+        <th>AR</th>
+        <th>FM</th>
+        <th>FM (VAE)</th>
+        <th>GT</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Row 1 -->
+      <tr>
+        <td><b>Text 1</b></td>
+        <td><audio controls data-text="1" data-model="ar"></audio></td>
+        <td><audio controls data-text="1" data-model="fm"></audio></td>
+        <td><audio controls data-text="1" data-model="fm_vae"></audio></td>
+        <td><audio controls data-text="1" data-model="gt"></audio></td>
+      </tr>
+      <!-- Row 2 -->
+      <tr>
+        <td><b>Text 2</b></td>
+        <td><audio controls data-text="2" data-model="ar"></audio></td>
+        <td><audio controls data-text="2" data-model="fm"></audio></td>
+        <td><audio controls data-text="2" data-model="fm_vae"></audio></td>
+        <td><audio controls data-text="2" data-model="gt"></audio></td>
+      </tr>
+      <!-- Row 3 -->
+      <tr>
+        <td><b>Text 3</b></td>
+        <td><audio controls data-text="3" data-model="ar"></audio></td>
+        <td><audio controls data-text="3" data-model="fm"></audio></td>
+        <td><audio controls data-text="3" data-model="fm_vae"></audio></td>
+        <td><audio controls data-text="3" data-model="gt"></audio></td>
+      </tr>
+      <!-- Row 4 -->
+      <tr>
+        <td><b>Text 4</b></td>
+        <td><audio controls data-text="4" data-model="ar"></audio></td>
+        <td><audio controls data-text="4" data-model="fm"></audio></td>
+        <td><audio controls data-text="4" data-model="fm_vae"></audio></td>
+        <td><audio controls data-text="4" data-model="gt"></audio></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- Section 2 -->
+<div class="container">
+  <h2>Controlability</h2>
+  <p>The following examples are conditioned using temporally-aligned drums, chord progressions and melody controls that were extracted the ground-truth sample.</p>
+  <p>The figure paired with each audio corresponds to the extracted ground-truth melody condition.</p>
+  <p>The exctacted melody corresponds to G2 to B7 note range, obtained by using a pretrained <a href=https://github.com/rabitt/ismir2017-deepsalience>multi-f0 classification model</a> followed by a threshold filtering and top-1 binarization.</p>
+  <div id="section2-table-container"></div>
+</div>
+
+<!-- Scripts -->
+<script>
+  // Update Section 1 dynamically based on dropdown
+  function updateAudioSources() {
+    const frameRate = document.getElementById('mappingSelect').value;
+    document.querySelectorAll('audio[data-text]').forEach(audio => {
+      const text = audio.getAttribute('data-text');
+      const model = audio.getAttribute('data-model');
+      if (model === 'gt') {
+        audio.src = `audio/section1/text${text}_gt.wav`;
+      } else {
+        audio.src = `audio/section1/text${text}_${model.toLowerCase()}_${frameRate}.wav`;
+      }
+    });
+  }
+
+  document.getElementById('mappingSelect').addEventListener('change', updateAudioSources);
+  updateAudioSources(); // Initialize
+
+  // Section 2: Generate static table
+  const texts = [1, 2, 3, 4];
+  const models = ['ar', 'fm', 'gt'];
+
+  function createSection2Table() {
+    const table = document.createElement('table');
+    table.style.width = '100%';
+    table.style.borderCollapse = 'separate';
+    table.style.borderSpacing = '0 10px';
+    const thead = document.createElement('thead');
+    const headerRow = document.createElement('tr');
+    ['Text Description', 'AR', 'FM', 'GT'].forEach(h => {
+      const th = document.createElement('th');
+      th.textContent = h;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    const tbody = document.createElement('tbody');
+
+    texts.forEach(textId => {
+      const row = document.createElement('tr');
+      const descCell = document.createElement('td');
+      descCell.textContent = `Text ${textId}`;
+      row.appendChild(descCell);
+
+      models.forEach(model => {
+        const cell = document.createElement('td');
+
+        const canvas = document.createElement('canvas');
+        canvas.width = 300;
+        canvas.height = 150;
+        canvas.style.border = '1px solid #ccc';
+        canvas.id = `canvas_2_${textId}_${model.toLowerCase()}`;
+
+        const audio = document.createElement('audio');
+        audio.controls = true;
+        audio.id = `audio_2_${textId}_${model.toLowerCase()}`;
+        audio.src = `audio/section2/text${textId}_${model.toLowerCase()}.wav`;
+
+        cell.appendChild(canvas);
+        cell.appendChild(document.createElement('br'));
+        cell.appendChild(audio);
+        row.appendChild(cell);
+      });
+
+      tbody.appendChild(row);
+    });
+
+    table.appendChild(tbody);
+    return table;
+  }
+
+  function setupCanvasOverlay(canvasId, audioId, imageSrc) {
+    const canvas = document.getElementById(canvasId);
+    const audio = document.getElementById(audioId);
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+    img.src = imageSrc;
+
+    img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+    function drawOverlay() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      const x = (audio.currentTime / audio.duration) * canvas.width;
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, canvas.height);
+      ctx.strokeStyle = 'red';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+    }
+
+    let interval;
+    audio.addEventListener('play', () => interval = setInterval(drawOverlay, 30));
+    audio.addEventListener('pause', () => clearInterval(interval));
+    audio.addEventListener('ended', () => {
+      clearInterval(interval);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    });
+  }
+
+  // Render Section 2
+  document.getElementById('section2-table-container').appendChild(createSection2Table());
+
+  // Setup canvas overlays
+  texts.forEach(textId => {
+    models.forEach(model => {
+      setupCanvasOverlay(
+        `canvas_2_${textId}_${model.toLowerCase()}`,
+        `audio_2_${textId}_${model.toLowerCase()}`,
+        `figures/section2/text${textId}.png`
+      );
+    });
+  });
+</script>
+
+<!-- Section 3 -->
+<div class="container">
+  <h2>Inpainting</h2>
+  <p>Below there's a table containing multiple examples of inpainting, flip through the pages to see modre examples.</p>
+  <label><b>Page:</b></label>
+  <select id="section3PageSelect">
+    <option value="1">1</option>
+    <option value="2">2</option>
+    <option value="3">3</option>
+<!--     <option value="4">4</option>
+    <option value="5">5</option>
+    <option value="6">6</option>
+    <option value="7">7</option>
+    <option value="8">8</option>
+    <option value="9">9</option>
+    <option value="10">10</option> -->
+  </select>
+
+  <div id="section3-text-table"></div>
+  <div id="section3-audio-table"></div>
+</div>
+
+<script>
+  const Section3Models = ['ar', 'fm', 'fm_zs', 'gt'];
+
+  const textsDict = {
+    1: [
+      "Heavy and driving, featuring gritty electric guitar and a powerful Heavy Metal groove that creates a bold, determined mood.",
+      "Upbeat and bright, featuring an Indie Pop feel, acoustic guitar and piano that create a positive mood.",
+      "A light floating acoustic orchestral piece with piano, bass, drums and choir.",
+      "Wintry and sweeping, featuring soaring strings, plinking harp and huge horns that create an atmosphere of magic."
+    ],
+
+    2: [
+      "Synthetic Hip Hop and soul derived from a poem about losing young friends to violence.",
+      "Soaring and hopeful, featuring atmospheric electric guitar, floating vocal chops, bouncy choir and light synth drums that create a dreamy, inspirational mood.",
+      "Bright and bouncy, with a Nu Disco feel, electric guitar and vintage keyboards that create a slick mood.",
+      "Smooth R&B groove featuring a female voice with hip hop elements."
+    ],
+
+    3: [
+      "Shimmering and flowing, with R&B neo-soul elements featuring euphoric synthesizer, electric guitar, and piano to create a chill and blissful mood.",
+      "Bouncy and bright, featuring electric guitar and a funky groove that creates a proud, confident mood.",
+      "A funky, driving jazz/r&b instrumental with a modern/retro feel.",
+      "Building and tense, with suspense elements featuring pulsing synthesizer, piano, and strings to create a menacing and anticipatory mood."
+    ],
+
+//     4: [
+//       "Building and tense, with suspense elements featuring pulsing synthesizer, piano, and strings to create a menacing and anticipatory mood.",
+//       "Radiant and flowing, with corporate inspirational and indie pop elements featuring positive piano, electric guitar, and vocal oohs to create a proud and happy mood.",
+//       "A light song with overtones of old western movie themes.",
+//       "Warm and driving, featuring heavy electric guitar, piano and pulsing drums that create a bold, reflective mood."
+//     ],
+
+//     5: [
+//       "Warm and bouncy, featuring groovy piano, synthesizers, vocal chops and synth drums that create a confident, hip mood.",
+//       "Radiant and gleaming, with pop bubblegum elements featuring happy electric guitar and synthesizer to create a joyful and enthusiastic mood.",
+//       "Dark and eerie, featuring urgent brass and strings that create an anxious mood.",
+//       "Groovy and hip, featuring soulful female vocal chops, electric guitar, keyboards and drums that create a laid-back, chill mood."
+//     ],
+
+//     6: [
+//       "Smooth Jazz piece.",
+//       "Bright and anthemic, featuring vocal samples, synthesizer and synth drums that create a happy, upbeat mood.",
+//       "Soaring and evocative, featuring jangling guitar, restless percussion and a long, slow build that create an atmosphere of progress.",
+//       "Bright and enthusiastic, featuring acoustic guitar, hand claps, vocal oohs and marimba that create a satisfied mood."
+//     ],
+
+//     7: [
+//       "Traditional Spanish Song",
+//       "Heavy and building, featuring gritty synth textures and a laid-back dance groove, creating a determined mood.",
+//       "Smooth and hypnotic, featuring floating piano and drones that create a peaceful mood.",
+//       "Bright and building, featuring a heavy Dance groove, pounding synth drums and floating electronic elements create a determined, hypnotic mood."
+//     ],
+
+//     8: [
+//       "Driving and determined with Indie rock elements, featuring edgy electric guitar, bass, drums, background vocals, and piano, creating an energetic and powerful mood.",
+//       "A Ragtime Blues improvisation done on a vintage tack-piano in an old-time saloon setting.",
+//       "Pulsing and hopeful, featuring lush piano, guitars, strings, percussion and drums that build up to a heartfelt, soaring mood.",
+//       "Warm and mellow, featuring a laidback downtempo groove, piano that build with edgy drums and gritty synth brass that create a confident mood."
+//     ],
+
+//     9: [
+//       "Bright and flowing, featuring an upbeat Indie Folk feel, vocal oohs and bells that create an enthusiastic mood.",
+//       "London, Montreal Caribbean inspired melody driven rap.",
+//       "Pulsing and bouncy, with corporate inspirational elements featuring reflective synthesizer, piano, and electric guitar to create a soaring and uplifting mood.",
+//       "Upbeat with a driving Pop Punk groove, featuring bright electric guitar and hand claps that create an energetic mood."
+//     ],
+
+//     10: [
+//       "Grime influenced hard hitting electro fusion",
+//       "Bright and grooving, featuring vocal chops, synthesizers, bass, and beats that create a proud, soaring mood.",
+//       "Atmospheric and growing, with cinematic and suspense elements featuring dramatic strings, synth pulses, and percussion to create an inquisitive and anxious mood.",
+//       "Think “ Curb Your Enthusiasm “ Theme. A fun quirky song with many different elements."
+//     ]
+  };
+
+  function createSection3TextTable(page) {
+    const container = document.getElementById('section3-text-table');
+    container.innerHTML = '';
+
+    const table = document.createElement('table');
+    table.style.width = '100%';
+    table.style.borderCollapse = 'separate';
+    table.style.borderSpacing = '0 10px';
+
+    const tbody = document.createElement('tbody');
+    const texts = textsDict[page] || [];
+
+    texts.forEach((text, i) => {
+      const row = document.createElement('tr');
+      const label = document.createElement('td');
+      label.style.fontWeight = 'bold';
+      label.textContent = `Text ${i + 1}:`;
+      const content = document.createElement('td');
+      content.textContent = text;
+      row.appendChild(label);
+      row.appendChild(content);
+      tbody.appendChild(row);
+    });
+
+    table.appendChild(tbody);
+    container.appendChild(table);
+  }
+
+  function createSection3AudioTable(page) {
+    const container = document.getElementById('section3-audio-table');
+    container.innerHTML = '';
+
+    const table = document.createElement('table');
+    table.style.width = '100%';
+    table.style.borderCollapse = 'separate';
+    table.style.borderSpacing = '0 10px';
+
+    const thead = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    ['Text', 'AR', 'FM', 'FM_ZS', 'GT'].forEach(h => {
+      const th = document.createElement('th');
+      th.textContent = h;
+      headRow.appendChild(th);
+    });
+    thead.appendChild(headRow);
+    table.appendChild(thead);
+
+    const tbody = document.createElement('tbody');
+
+    for (let i = 0; i < 4; i++) {
+      const globalIndex = (page - 1) * 4 + (i + 1); // 1-based indexing
+      const row = document.createElement('tr');
+
+      const labelCell = document.createElement('td');
+      labelCell.textContent = `Text ${i + 1}`;
+      row.appendChild(labelCell);
+
+      Section3Models.forEach(model => {
+        const cell = document.createElement('td');
+
+        const canvas = document.createElement('canvas');
+        canvas.width = 300;
+        canvas.height = 150;
+        canvas.style.border = '1px solid #ccc';
+        canvas.id = `canvas_3_${globalIndex}_${model.toLowerCase()}`;
+
+        const audio = document.createElement('audio');
+        audio.controls = true;
+        audio.id = `audio_3_${globalIndex}_${model.toLowerCase()}`;
+        audio.src = `audio/section3/text${globalIndex}_${model.toLowerCase()}.wav`;
+
+        cell.appendChild(canvas);
+        cell.appendChild(document.createElement('br'));
+        cell.appendChild(audio);
+        row.appendChild(cell);
+      });
+
+      tbody.appendChild(row);
+    }
+
+    table.appendChild(tbody);
+    container.appendChild(table);
+  }
+
+  function setupSection3Canvases(page) {
+    for (let i = 0; i < 4; i++) {
+      const globalIndex = (page - 1) * 4 + (i + 1);
+      Section3Models.forEach(model => {
+        setupCanvasOverlay(
+          `canvas_3_${globalIndex}_${model.toLowerCase()}`,
+          `audio_3_${globalIndex}_${model.toLowerCase()}`,
+          `figures/section3/text${globalIndex}_${model.toLowerCase()}.png`
+        );
+      });
+    }
+  }
+
+  function renderSection3() {
+    const page = parseInt(document.getElementById('section3PageSelect').value);
+    createSection3TextTable(page);
+    createSection3AudioTable(page);
+    setTimeout(() => setupSection3Canvases(page), 100);
+  }
+
+  document.getElementById('section3PageSelect').addEventListener('change', renderSection3);
+  renderSection3(); // initial render
+</script>
+
+
+</body>
+</html>
+
 
 </body>
 </html>