-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
185 lines (142 loc) · 6.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 64px;
}
.hide {
color: transparent;
transition: color 0.5s ease-in-out;
}
.on-hover:hover + .hide,
.on-hover:hover + .hide+.hide {
display: block;
color: black;
}
.audio-piano-roll {
display: flex;
flex-direction: column;
justify-content: space-between;
/* align-items: center; */
}
.sample-container {
/* Adjust color and thickness as needed */
/* border-bottom: 1px solid black; */
/* Adjust color and thickness as needed */
padding: 4px;
padding-left: 2em;
/* add left border */
border-left: 4px solid lightgray;
margin-bottom: 4em;
}
.piano-roll {
border: 1px solid black;
transform: scaleY(-1);
width: 300px;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <img src="./misc/logo.svg" alt="textsynth logo" width="200" height="200"> -->
</head>
<body>
<h2>
Gold-Caps <img src="./misc/goldcaps_logo.svg" alt="goldcaps logo" height="20em">
</h2>
<p>
Welcome to the demo page accompanying the <a href="https://github.com/erl-j/Gold-Caps">Gold-Caps dataset
repository</a>.
</p>
<p>
This page demonstrates the use of the "gpt-4-1106-preview" OpenAI API endpoint for generating captions with a prompt
solely referencing the track title and artist name.
<b>The webpage has been tested with Google Chrome</b>
</p>
<hr>
<div>
<h3>Prompts</h3>
<p> 💬 General description: <i>Give a general description of the track <title> by artist_name> in one
sentence. Don't mention the title or artist.</i></p>
<p> ☕️ Vibe: <i>Describe the vibe of the track <title> by artist_name> in one sentence. Don't mention the
title or artist.</i></p>
<p> 🎼 Arrangement: <i>Describe the arrangement of the track <title> by artist_name> in one sentence.
Don't mention the title or artist.</i></p>
<p> 🎛️ Production: <i>Describe the production style of the track <title> by artist_name> in one sentence.
Don't mention the title or artist.</i></p>
<p> 🤖 AI instruction: <i>What prompt would you give an AI text-to-music generation if you wanted the output to
sound like the track <title> by artist_name>. One sentence only. Don't mention the title or
artist.</i></p>
<p> 🎬 Movie scene: <i>Describe an imagined movie scene that would be set to the track <title> by
artist_name> in one sentence. Don't mention the title or artist.</i></p>
</div>
<hr>
<!-- Placeholder for audio examples -->
<h3>Example captions</h3>
<p>
Short audio previews are provided for research purposes.
</p>
<div id="examplesContainer"></div>
<script src="demoData.js"></script>
<script>
const captionEmoji = {
"General description" : "💬",
"Vibe" : "☕️",
"Arrangement" : "🎼",
"Production" : "🎛️",
"AI instruction" : "🤖",
"Movie scene" : "🎬"
}
const session_timestamp = "2023-11-17-11-32-37"
// Reference to the container div
const examplesContainer = document.getElementById('examplesContainer');
data.forEach((sample,sampleIdx) => {
const sampleContainer = document.createElement('div')
sampleContainer.setAttribute("class", "sample-container")
const sampleNr = document.createElement('h3')
sampleNr.innerHTML = `Example #${sampleIdx} (hover to show track title and artist)`
sampleNr.setAttribute("class", "on-hover")
// make not selectable
sampleNr.setAttribute("style", "-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;")
sampleContainer.appendChild(sampleNr);
const titleElement = document.createElement('p')
// set to on hover
titleElement.innerHTML = `<b>Title:</b> ${sample.title}`
titleElement.setAttribute("class", "hide")
sampleContainer.appendChild(titleElement);
const artistElement = document.createElement('p')
artistElement.innerHTML = `<b>Artist</b>: ${sample.artist_name}`
artistElement.setAttribute("class", "hide")
sampleContainer.appendChild(artistElement);
const audioPianoRollDiv = document.createElement('div')
// set class
audioPianoRollDiv.setAttribute("class", "audio-piano-roll")
// // piano roll with class "piano-roll"
// const prElement = document.createElement('img')
// prElement.setAttribute("class", "piano-roll")
// prElement.setAttribute("src", "./web_assets/" + session_timestamp + "/png_piano_roll/" + sample.track_id + ".png")
// audioPianoRollDiv.appendChild(prElement);
// audio
const audioElement = document.createElement('audio');
audioElement.controls = true;
// Create source element
const sourceElement = document.createElement('source');
sourceElement.src = "./web_assets/" + session_timestamp + "/mp3_previews/" + sample.track_id + ".mp3";
sourceElement.type = "audio/mp3";
// Append elements
audioElement.appendChild(sourceElement);
audioPianoRollDiv.appendChild(audioElement);
sampleContainer.append(audioPianoRollDiv);
// for (caption of ["Vibe"]) {
for (caption of Object.keys(sample.captions)) {
const captionElement = document.createElement('p')
captionElement.innerHTML = "<b>"+captionEmoji[caption] +" " + caption +"</b>" + ": " + sample.captions[caption]
sampleContainer.appendChild(captionElement);
}
examplesContainer.appendChild(sampleContainer)
});
</script>
</body>
</body>
</html>