Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>AR vs FM Experiment Page</title> | |
| <link rel="stylesheet" href="style/bootstrap.min.css"> | |
| <style> | |
| body { | |
| margin: 30px 80px; | |
| } | |
| td, th { | |
| text-align: center; | |
| padding: 8px; | |
| border-bottom: 0.1px solid #aaa; | |
| } | |
| audio { | |
| width: 20vw; | |
| min-width: 100px; | |
| max-width: 250px; | |
| } | |
| .container { | |
| background: white; | |
| border-radius: 16px; | |
| padding: 30px; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.05); | |
| margin-bottom: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 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> | |