ortal1602 commited on
Commit
007cdd7
·
verified ·
1 Parent(s): 969a72f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +39 -417
index.html CHANGED
@@ -2,28 +2,55 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
 
5
  <title>AR vs FM Experiment Page</title>
6
  <link rel="stylesheet" href="style/bootstrap.min.css">
7
  <style>
8
  body {
9
- margin: 30px 80px;
 
10
  }
 
 
 
 
 
 
 
 
 
 
 
11
  td, th {
12
  text-align: center;
13
  padding: 8px;
14
  border-bottom: 0.1px solid #aaa;
15
  }
 
16
  audio {
17
- width: 20vw;
18
- min-width: 100px;
19
  max-width: 250px;
20
  }
21
- .container {
22
- background: white;
23
- border-radius: 16px;
24
- padding: 30px;
25
- box-shadow: 0 4px 20px rgba(0,0,0,0.05);
26
- margin-bottom: 50px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
  </style>
29
  </head>
@@ -114,416 +141,11 @@
114
  showHighlight(highlightIndex);
115
  }
116
 
117
- // Initialize
118
  showHighlight(highlightIndex);
119
  </script>
120
 
121
- <div class="container">
122
- <h1>Bibtex</h1>
123
- <p>TODO</p>
124
- </div>
125
-
126
- <!-- Section 1 -->
127
- <div class="container">
128
- <h1>Fixed Training Configuration</h1>
129
-
130
- <h5>Text Descriptions</h5>
131
- <table style="width:100%; border-collapse: separate; border-spacing: 0 10px;">
132
- <tbody>
133
- <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>
134
- <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>
135
- <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>
136
- <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>
137
- </tbody>
138
- </table>
139
-
140
- <br>
141
- <label><b>Latent Representation Frequency</b>:</label>
142
- <select id="mappingSelect">
143
- <option value="25">25</option>
144
- <option value="50" selected>50</option>
145
- <option value="100">100</option>
146
- </select>
147
-
148
- <table style="width:100%; border-collapse: separate; border-spacing: 0 10px;">
149
- <thead>
150
- <tr>
151
- <th>Text Description</th>
152
- <th>AR</th>
153
- <th>FM</th>
154
- <th>FM (VAE)</th>
155
- <th>GT</th>
156
- </tr>
157
- </thead>
158
- <tbody>
159
- <!-- Row 1 -->
160
- <tr>
161
- <td><b>Text 1</b></td>
162
- <td><audio controls data-text="1" data-model="ar"></audio></td>
163
- <td><audio controls data-text="1" data-model="fm"></audio></td>
164
- <td><audio controls data-text="1" data-model="fm_vae"></audio></td>
165
- <td><audio controls data-text="1" data-model="gt"></audio></td>
166
- </tr>
167
- <!-- Row 2 -->
168
- <tr>
169
- <td><b>Text 2</b></td>
170
- <td><audio controls data-text="2" data-model="ar"></audio></td>
171
- <td><audio controls data-text="2" data-model="fm"></audio></td>
172
- <td><audio controls data-text="2" data-model="fm_vae"></audio></td>
173
- <td><audio controls data-text="2" data-model="gt"></audio></td>
174
- </tr>
175
- <!-- Row 3 -->
176
- <tr>
177
- <td><b>Text 3</b></td>
178
- <td><audio controls data-text="3" data-model="ar"></audio></td>
179
- <td><audio controls data-text="3" data-model="fm"></audio></td>
180
- <td><audio controls data-text="3" data-model="fm_vae"></audio></td>
181
- <td><audio controls data-text="3" data-model="gt"></audio></td>
182
- </tr>
183
- <!-- Row 4 -->
184
- <tr>
185
- <td><b>Text 4</b></td>
186
- <td><audio controls data-text="4" data-model="ar"></audio></td>
187
- <td><audio controls data-text="4" data-model="fm"></audio></td>
188
- <td><audio controls data-text="4" data-model="fm_vae"></audio></td>
189
- <td><audio controls data-text="4" data-model="gt"></audio></td>
190
- </tr>
191
- </tbody>
192
- </table>
193
- </div>
194
-
195
- <!-- Section 2 -->
196
- <div class="container">
197
- <h2>Controlability</h2>
198
- <p>The following examples are conditioned using temporally-aligned drums, chord progressions and melody controls that were extracted the ground-truth sample.</p>
199
- <p>The figure paired with each audio corresponds to the extracted ground-truth melody condition.</p>
200
- <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>
201
- <div id="section2-table-container"></div>
202
- </div>
203
-
204
- <!-- Scripts -->
205
- <script>
206
- // Update Section 1 dynamically based on dropdown
207
- function updateAudioSources() {
208
- const frameRate = document.getElementById('mappingSelect').value;
209
- document.querySelectorAll('audio[data-text]').forEach(audio => {
210
- const text = audio.getAttribute('data-text');
211
- const model = audio.getAttribute('data-model');
212
- if (model === 'gt') {
213
- audio.src = `audio/section1/text${text}_gt.wav`;
214
- } else {
215
- audio.src = `audio/section1/text${text}_${model.toLowerCase()}_${frameRate}.wav`;
216
- }
217
- });
218
- }
219
-
220
- document.getElementById('mappingSelect').addEventListener('change', updateAudioSources);
221
- updateAudioSources(); // Initialize
222
-
223
- // Section 2: Generate static table
224
- const texts = [1, 2, 3, 4];
225
- const models = ['ar', 'fm', 'gt'];
226
-
227
- function createSection2Table() {
228
- const table = document.createElement('table');
229
- table.style.width = '100%';
230
- table.style.borderCollapse = 'separate';
231
- table.style.borderSpacing = '0 10px';
232
- const thead = document.createElement('thead');
233
- const headerRow = document.createElement('tr');
234
- ['Text Description', 'AR', 'FM', 'GT'].forEach(h => {
235
- const th = document.createElement('th');
236
- th.textContent = h;
237
- headerRow.appendChild(th);
238
- });
239
- thead.appendChild(headerRow);
240
- table.appendChild(thead);
241
-
242
- const tbody = document.createElement('tbody');
243
-
244
- texts.forEach(textId => {
245
- const row = document.createElement('tr');
246
- const descCell = document.createElement('td');
247
- descCell.textContent = `Text ${textId}`;
248
- row.appendChild(descCell);
249
-
250
- models.forEach(model => {
251
- const cell = document.createElement('td');
252
-
253
- const canvas = document.createElement('canvas');
254
- canvas.width = 300;
255
- canvas.height = 150;
256
- canvas.style.border = '1px solid #ccc';
257
- canvas.id = `canvas_2_${textId}_${model.toLowerCase()}`;
258
-
259
- const audio = document.createElement('audio');
260
- audio.controls = true;
261
- audio.id = `audio_2_${textId}_${model.toLowerCase()}`;
262
- audio.src = `audio/section2/text${textId}_${model.toLowerCase()}.wav`;
263
-
264
- cell.appendChild(canvas);
265
- cell.appendChild(document.createElement('br'));
266
- cell.appendChild(audio);
267
- row.appendChild(cell);
268
- });
269
-
270
- tbody.appendChild(row);
271
- });
272
-
273
- table.appendChild(tbody);
274
- return table;
275
- }
276
-
277
- function setupCanvasOverlay(canvasId, audioId, imageSrc) {
278
- const canvas = document.getElementById(canvasId);
279
- const audio = document.getElementById(audioId);
280
- const ctx = canvas.getContext('2d');
281
- const img = new Image();
282
- img.src = imageSrc;
283
-
284
- img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
285
-
286
- function drawOverlay() {
287
- ctx.clearRect(0, 0, canvas.width, canvas.height);
288
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
289
- const x = (audio.currentTime / audio.duration) * canvas.width;
290
- ctx.beginPath();
291
- ctx.moveTo(x, 0);
292
- ctx.lineTo(x, canvas.height);
293
- ctx.strokeStyle = 'red';
294
- ctx.lineWidth = 2;
295
- ctx.stroke();
296
- }
297
-
298
- let interval;
299
- audio.addEventListener('play', () => interval = setInterval(drawOverlay, 30));
300
- audio.addEventListener('pause', () => clearInterval(interval));
301
- audio.addEventListener('ended', () => {
302
- clearInterval(interval);
303
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
304
- });
305
- }
306
-
307
- // Render Section 2
308
- document.getElementById('section2-table-container').appendChild(createSection2Table());
309
-
310
- // Setup canvas overlays
311
- texts.forEach(textId => {
312
- models.forEach(model => {
313
- setupCanvasOverlay(
314
- `canvas_2_${textId}_${model.toLowerCase()}`,
315
- `audio_2_${textId}_${model.toLowerCase()}`,
316
- `figures/section2/text${textId}.png`
317
- );
318
- });
319
- });
320
- </script>
321
-
322
- <!-- Section 3 -->
323
- <div class="container">
324
- <h2>Inpainting</h2>
325
- <p>Below there's a table containing multiple examples of inpainting, flip through the pages to see modre examples.</p>
326
- <label><b>Page:</b></label>
327
- <select id="section3PageSelect">
328
- <option value="1">1</option>
329
- <option value="2">2</option>
330
- <option value="3">3</option>
331
- <!-- <option value="4">4</option>
332
- <option value="5">5</option>
333
- <option value="6">6</option>
334
- <option value="7">7</option>
335
- <option value="8">8</option>
336
- <option value="9">9</option>
337
- <option value="10">10</option> -->
338
- </select>
339
-
340
- <div id="section3-text-table"></div>
341
- <div id="section3-audio-table"></div>
342
- </div>
343
-
344
- <script>
345
- const Section3Models = ['ar', 'fm', 'fm_zs', 'gt'];
346
-
347
- const textsDict = {
348
- 1: [
349
- "Heavy and driving, featuring gritty electric guitar and a powerful Heavy Metal groove that creates a bold, determined mood.",
350
- "Upbeat and bright, featuring an Indie Pop feel, acoustic guitar and piano that create a positive mood.",
351
- "A light floating acoustic orchestral piece with piano, bass, drums and choir.",
352
- "Wintry and sweeping, featuring soaring strings, plinking harp and huge horns that create an atmosphere of magic."
353
- ],
354
-
355
- 2: [
356
- "Synthetic Hip Hop and soul derived from a poem about losing young friends to violence.",
357
- "Soaring and hopeful, featuring atmospheric electric guitar, floating vocal chops, bouncy choir and light synth drums that create a dreamy, inspirational mood.",
358
- "Bright and bouncy, with a Nu Disco feel, electric guitar and vintage keyboards that create a slick mood.",
359
- "Smooth R&B groove featuring a female voice with hip hop elements."
360
- ],
361
-
362
- 3: [
363
- "Shimmering and flowing, with R&B neo-soul elements featuring euphoric synthesizer, electric guitar, and piano to create a chill and blissful mood.",
364
- "Bouncy and bright, featuring electric guitar and a funky groove that creates a proud, confident mood.",
365
- "A funky, driving jazz/r&b instrumental with a modern/retro feel.",
366
- "Building and tense, with suspense elements featuring pulsing synthesizer, piano, and strings to create a menacing and anticipatory mood."
367
- ],
368
-
369
- // 4: [
370
- // "Building and tense, with suspense elements featuring pulsing synthesizer, piano, and strings to create a menacing and anticipatory mood.",
371
- // "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.",
372
- // "A light song with overtones of old western movie themes.",
373
- // "Warm and driving, featuring heavy electric guitar, piano and pulsing drums that create a bold, reflective mood."
374
- // ],
375
-
376
- // 5: [
377
- // "Warm and bouncy, featuring groovy piano, synthesizers, vocal chops and synth drums that create a confident, hip mood.",
378
- // "Radiant and gleaming, with pop bubblegum elements featuring happy electric guitar and synthesizer to create a joyful and enthusiastic mood.",
379
- // "Dark and eerie, featuring urgent brass and strings that create an anxious mood.",
380
- // "Groovy and hip, featuring soulful female vocal chops, electric guitar, keyboards and drums that create a laid-back, chill mood."
381
- // ],
382
-
383
- // 6: [
384
- // "Smooth Jazz piece.",
385
- // "Bright and anthemic, featuring vocal samples, synthesizer and synth drums that create a happy, upbeat mood.",
386
- // "Soaring and evocative, featuring jangling guitar, restless percussion and a long, slow build that create an atmosphere of progress.",
387
- // "Bright and enthusiastic, featuring acoustic guitar, hand claps, vocal oohs and marimba that create a satisfied mood."
388
- // ],
389
-
390
- // 7: [
391
- // "Traditional Spanish Song",
392
- // "Heavy and building, featuring gritty synth textures and a laid-back dance groove, creating a determined mood.",
393
- // "Smooth and hypnotic, featuring floating piano and drones that create a peaceful mood.",
394
- // "Bright and building, featuring a heavy Dance groove, pounding synth drums and floating electronic elements create a determined, hypnotic mood."
395
- // ],
396
-
397
- // 8: [
398
- // "Driving and determined with Indie rock elements, featuring edgy electric guitar, bass, drums, background vocals, and piano, creating an energetic and powerful mood.",
399
- // "A Ragtime Blues improvisation done on a vintage tack-piano in an old-time saloon setting.",
400
- // "Pulsing and hopeful, featuring lush piano, guitars, strings, percussion and drums that build up to a heartfelt, soaring mood.",
401
- // "Warm and mellow, featuring a laidback downtempo groove, piano that build with edgy drums and gritty synth brass that create a confident mood."
402
- // ],
403
-
404
- // 9: [
405
- // "Bright and flowing, featuring an upbeat Indie Folk feel, vocal oohs and bells that create an enthusiastic mood.",
406
- // "London, Montreal Caribbean inspired melody driven rap.",
407
- // "Pulsing and bouncy, with corporate inspirational elements featuring reflective synthesizer, piano, and electric guitar to create a soaring and uplifting mood.",
408
- // "Upbeat with a driving Pop Punk groove, featuring bright electric guitar and hand claps that create an energetic mood."
409
- // ],
410
-
411
- // 10: [
412
- // "Grime influenced hard hitting electro fusion",
413
- // "Bright and grooving, featuring vocal chops, synthesizers, bass, and beats that create a proud, soaring mood.",
414
- // "Atmospheric and growing, with cinematic and suspense elements featuring dramatic strings, synth pulses, and percussion to create an inquisitive and anxious mood.",
415
- // "Think “ Curb Your Enthusiasm “ Theme. A fun quirky song with many different elements."
416
- // ]
417
- };
418
-
419
- function createSection3TextTable(page) {
420
- const container = document.getElementById('section3-text-table');
421
- container.innerHTML = '';
422
-
423
- const table = document.createElement('table');
424
- table.style.width = '100%';
425
- table.style.borderCollapse = 'separate';
426
- table.style.borderSpacing = '0 10px';
427
-
428
- const tbody = document.createElement('tbody');
429
- const texts = textsDict[page] || [];
430
-
431
- texts.forEach((text, i) => {
432
- const row = document.createElement('tr');
433
- const label = document.createElement('td');
434
- label.style.fontWeight = 'bold';
435
- label.textContent = `Text ${i + 1}:`;
436
- const content = document.createElement('td');
437
- content.textContent = text;
438
- row.appendChild(label);
439
- row.appendChild(content);
440
- tbody.appendChild(row);
441
- });
442
-
443
- table.appendChild(tbody);
444
- container.appendChild(table);
445
- }
446
-
447
- function createSection3AudioTable(page) {
448
- const container = document.getElementById('section3-audio-table');
449
- container.innerHTML = '';
450
-
451
- const table = document.createElement('table');
452
- table.style.width = '100%';
453
- table.style.borderCollapse = 'separate';
454
- table.style.borderSpacing = '0 10px';
455
-
456
- const thead = document.createElement('thead');
457
- const headRow = document.createElement('tr');
458
- ['Text', 'AR', 'FM', 'FM_ZS', 'GT'].forEach(h => {
459
- const th = document.createElement('th');
460
- th.textContent = h;
461
- headRow.appendChild(th);
462
- });
463
- thead.appendChild(headRow);
464
- table.appendChild(thead);
465
-
466
- const tbody = document.createElement('tbody');
467
-
468
- for (let i = 0; i < 4; i++) {
469
- const globalIndex = (page - 1) * 4 + (i + 1); // 1-based indexing
470
- const row = document.createElement('tr');
471
-
472
- const labelCell = document.createElement('td');
473
- labelCell.textContent = `Text ${i + 1}`;
474
- row.appendChild(labelCell);
475
-
476
- Section3Models.forEach(model => {
477
- const cell = document.createElement('td');
478
-
479
- const canvas = document.createElement('canvas');
480
- canvas.width = 300;
481
- canvas.height = 150;
482
- canvas.style.border = '1px solid #ccc';
483
- canvas.id = `canvas_3_${globalIndex}_${model.toLowerCase()}`;
484
-
485
- const audio = document.createElement('audio');
486
- audio.controls = true;
487
- audio.id = `audio_3_${globalIndex}_${model.toLowerCase()}`;
488
- audio.src = `audio/section3/text${globalIndex}_${model.toLowerCase()}.wav`;
489
-
490
- cell.appendChild(canvas);
491
- cell.appendChild(document.createElement('br'));
492
- cell.appendChild(audio);
493
- row.appendChild(cell);
494
- });
495
-
496
- tbody.appendChild(row);
497
- }
498
-
499
- table.appendChild(tbody);
500
- container.appendChild(table);
501
- }
502
-
503
- function setupSection3Canvases(page) {
504
- for (let i = 0; i < 4; i++) {
505
- const globalIndex = (page - 1) * 4 + (i + 1);
506
- Section3Models.forEach(model => {
507
- setupCanvasOverlay(
508
- `canvas_3_${globalIndex}_${model.toLowerCase()}`,
509
- `audio_3_${globalIndex}_${model.toLowerCase()}`,
510
- `figures/section3/text${globalIndex}_${model.toLowerCase()}.png`
511
- );
512
- });
513
- }
514
- }
515
-
516
- function renderSection3() {
517
- const page = parseInt(document.getElementById('section3PageSelect').value);
518
- createSection3TextTable(page);
519
- createSection3AudioTable(page);
520
- setTimeout(() => setupSection3Canvases(page), 100);
521
- }
522
-
523
- document.getElementById('section3PageSelect').addEventListener('change', renderSection3);
524
- renderSection3(); // initial render
525
- </script>
526
-
527
 
528
  </body>
529
- </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>AR vs FM Experiment Page</title>
7
  <link rel="stylesheet" href="style/bootstrap.min.css">
8
  <style>
9
  body {
10
+ padding: 20px;
11
+ margin: 0;
12
  }
13
+
14
+ .container {
15
+ background: white;
16
+ border-radius: 16px;
17
+ padding: 30px;
18
+ box-shadow: 0 4px 20px rgba(0,0,0,0.05);
19
+ margin: 0 auto 50px auto;
20
+ max-width: 960px;
21
+ width: 100%;
22
+ }
23
+
24
  td, th {
25
  text-align: center;
26
  padding: 8px;
27
  border-bottom: 0.1px solid #aaa;
28
  }
29
+
30
  audio {
31
+ width: 100%;
 
32
  max-width: 250px;
33
  }
34
+
35
+ table {
36
+ display: block;
37
+ overflow-x: auto;
38
+ white-space: nowrap;
39
+ width: 100%;
40
+ }
41
+
42
+ @media (max-width: 600px) {
43
+ h1 {
44
+ font-size: 1.5rem;
45
+ }
46
+
47
+ h2 {
48
+ font-size: 1.25rem;
49
+ }
50
+
51
+ p {
52
+ font-size: 1rem;
53
+ }
54
  }
55
  </style>
56
  </head>
 
141
  showHighlight(highlightIndex);
142
  }
143
 
 
144
  showHighlight(highlightIndex);
145
  </script>
146
 
147
+ <!-- The rest of your sections go here -->
148
+ <!-- Ensure other tables are also inside <div style="overflow-x:auto"> if needed -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
 
150
  </body>
151
+ </html>