Hugging Face's logo

Spaces:
NativeAngels
/
song-workout-assistant
Running

App Files Community
NativeAngels commited on
Commit
273eb2a
·
verified ·
1 Parent(s): 7f1e4ae

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +365 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Song Workout Assistant
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: song-workout-assistant
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,365 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE 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>Song Workout Assistant - Identify Keys & Chords by Ear</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .piano-key {
11
+ position: relative;
12
+ width: 40px;
13
+ height: 160px;
14
+ border: 1px solid #333;
15
+ border-radius: 0 0 5px 5px;
16
+ cursor: pointer;
17
+ user-select: none;
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: flex-end;
21
+ padding-bottom: 10px;
22
+ font-weight: bold;
23
+ transition: all 0.1s;
24
+ }
25
+
26
+ .white-key {
27
+ background-color: white;
28
+ color: #333;
29
+ z-index: 1;
30
+ }
31
+
32
+ .black-key {
33
+ width: 28px;
34
+ height: 100px;
35
+ background-color: #333;
36
+ color: white;
37
+ margin-left: -14px;
38
+ margin-right: -14px;
39
+ z-index: 2;
40
+ padding-bottom: 5px;
41
+ }
42
+
43
+ .white-key.active {
44
+ background-color: #e2e8f0;
45
+ box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
46
+ }
47
+
48
+ .black-key.active {
49
+ background-color: #111;
50
+ box-shadow: inset 0 0 10px rgba(255,255,255,0.2);
51
+ }
52
+
53
+ .chord-box {
54
+ width: 60px;
55
+ height: 60px;
56
+ display: flex;
57
+ justify-content: center;
58
+ align-items: center;
59
+ border-radius: 8px;
60
+ font-weight: bold;
61
+ transition: all 0.3s;
62
+ }
63
+
64
+ .key-indicator {
65
+ width: 120px;
66
+ height: 120px;
67
+ border-radius: 50%;
68
+ display: flex;
69
+ justify-content: center;
70
+ align-items: center;
71
+ font-size: 24px;
72
+ font-weight: bold;
73
+ margin: 0 auto;
74
+ transition: all 0.3s;
75
+ }
76
+
77
+ .note-badge {
78
+ display: inline-flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ width: 32px;
82
+ height: 32px;
83
+ border-radius: 50%;
84
+ margin: 2px;
85
+ font-weight: bold;
86
+ cursor: pointer;
87
+ }
88
+
89
+ .progression-step {
90
+ transition: all 0.3s;
91
+ transform: scale(1);
92
+ }
93
+
94
+ .progression-step.active {
95
+ transform: scale(1.1);
96
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
97
+ }
98
+
99
+ @keyframes pulse {
100
+ 0% { transform: scale(1); }
101
+ 50% { transform: scale(1.05); }
102
+ 100% { transform: scale(1); }
103
+ }
104
+
105
+ .pulse {
106
+ animation: pulse 1.5s infinite;
107
+ }
108
+ </style>
109
+ </head>
110
+ <body class="bg-gray-100 min-h-screen">
111
+ <div class="container mx-auto px-4 py-8">
112
+ <header class="text-center mb-12">
113
+ <h1 class="text-4xl font-bold text-indigo-800 mb-2">Song Workout Assistant</h1>
114
+ <p class="text-lg text-gray-600">Train your ear to identify song keys and chord progressions</p>
115
+ </header>
116
+
117
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
118
+ <!-- Left Column - Input Section -->
119
+ <div class="bg-white rounded-xl shadow-lg p-6">
120
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
121
+ <i class="fas fa-music mr-2 text-indigo-600"></i> Note Input
122
+ </h2>
123
+
124
+ <div class="mb-6">
125
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Piano Keyboard</h3>
126
+ <div class="flex justify-center mb-4">
127
+ <div class="flex relative" id="piano-keyboard">
128
+ <!-- C to B (one octave) -->
129
+ <div class="piano-key white-key" data-note="C">C</div>
130
+ <div class="piano-key black-key" data-note="C#">C#</div>
131
+ <div class="piano-key white-key" data-note="D">D</div>
132
+ <div class="piano-key black-key" data-note="D#">D#</div>
133
+ <div class="piano-key white-key" data-note="E">E</div>
134
+ <div class="piano-key white-key" data-note="F">F</div>
135
+ <div class="piano-key black-key" data-note="F#">F#</div>
136
+ <div class="piano-key white-key" data-note="G">G</div>
137
+ <div class="piano-key black-key" data-note="G#">G#</div>
138
+ <div class="piano-key white-key" data-note="A">A</div>
139
+ <div class="piano-key black-key" data-note="A#">A#</div>
140
+ <div class="piano-key white-key" data-note="B">B</div>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="flex justify-center space-x-2 mb-4">
145
+ <button id="play-chord-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
146
+ <i class="fas fa-play mr-2"></i> Play Chord
147
+ </button>
148
+ <button id="clear-notes-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
149
+ <i class="fas fa-trash-alt mr-2"></i> Clear
150
+ </button>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="mb-6">
155
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Selected Notes</h3>
156
+ <div id="selected-notes" class="flex flex-wrap min-h-12 bg-gray-50 rounded-lg p-3 border border-gray-200">
157
+ <p class="text-gray-400 italic">Click piano keys or buttons below to add notes</p>
158
+ </div>
159
+
160
+ <div class="grid grid-cols-7 gap-2 mt-3">
161
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="C">C</button>
162
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="C#">C#</button>
163
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="D">D</button>
164
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="D#">D#</button>
165
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="E">E</button>
166
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="F">F</button>
167
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="F#">F#</button>
168
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="G">G</button>
169
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="G#">G#</button>
170
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="A">A</button>
171
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="A#">A#</button>
172
+ <button class="note-btn bg-white border border-gray-300 rounded p-2 hover:bg-gray-100" data-note="B">B</button>
173
+ </div>
174
+ </div>
175
+
176
+ <div>
177
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Chord Progression</h3>
178
+ <div id="chord-progression" class="flex flex-wrap gap-2 mb-3 min-h-16 bg-gray-50 rounded-lg p-3 border border-gray-200">
179
+ <p class="text-gray-400 italic">Add chords to build a progression</p>
180
+ </div>
181
+ <button id="analyze-progression-btn" class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg font-medium flex items-center justify-center">
182
+ <i class="fas fa-search mr-2"></i> Analyze Progression
183
+ </button>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Middle Column - Analysis Results -->
188
+ <div class="bg-white rounded-xl shadow-lg p-6">
189
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
190
+ <i class="fas fa-chart-bar mr-2 text-indigo-600"></i> Analysis Results
191
+ </h2>
192
+
193
+ <div class="mb-8">
194
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Detected Chord</h3>
195
+ <div id="chord-result" class="flex flex-col items-center justify-center p-6 bg-gray-50 rounded-lg border border-gray-200">
196
+ <div id="chord-name" class="text-4xl font-bold text-indigo-700 mb-2">-</div>
197
+ <div id="chord-notes" class="text-gray-600">No chord analyzed yet</div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="mb-8">
202
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Possible Key</h3>
203
+ <div id="key-result" class="flex flex-col items-center justify-center p-6 bg-gray-50 rounded-lg border border-gray-200">
204
+ <div id="key-indicator" class="key-indicator bg-gray-200 text-gray-500 mb-3">
205
+ ?
206
+ </div>
207
+ <div id="key-info" class="text-center">
208
+ <p class="text-gray-600">Play 3 or more notes to detect possible key</p>
209
+ <div id="key-chords" class="mt-3 hidden">
210
+ <p class="font-medium text-gray-700">Chords in this key:</p>
211
+ <div class="flex flex-wrap justify-center gap-1 mt-2" id="key-chords-list"></div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <div>
218
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Progression Analysis</h3>
219
+ <div id="progression-result" class="p-6 bg-gray-50 rounded-lg border border-gray-200">
220
+ <div id="likely-key" class="mb-4">
221
+ <p class="font-medium text-gray-700">Likely Key:</p>
222
+ <p id="progression-key" class="text-xl font-bold text-indigo-700 mt-1">-</p>
223
+ </div>
224
+
225
+ <div id="roman-analysis" class="mb-4">
226
+ <p class="font-medium text-gray-700">Roman Numeral Analysis:</p>
227
+ <div id="roman-numerals" class="flex flex-wrap gap-2 mt-2"></div>
228
+ </div>
229
+
230
+ <div id="common-progressions" class="hidden">
231
+ <p class="font-medium text-gray-700">Common Progressions:</p>
232
+ <div class="mt-2 space-y-2">
233
+ <div class="p-2 bg-blue-50 rounded border border-blue-100">
234
+ <p class="text-blue-800 font-medium">I - V - vi - IV</p>
235
+ <p class="text-sm text-blue-600">Popular in pop music (e.g., "Let It Be", "Someone Like You")</p>
236
+ </div>
237
+ <div class="p-2 bg-blue-50 rounded border border-blue-100">
238
+ <p class="text-blue-800 font-medium">ii - V - I</p>
239
+ <p class="text-sm text-blue-600">Jazz standard progression</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Right Column - Reference & Help -->
248
+ <div class="bg-white rounded-xl shadow-lg p-6">
249
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
250
+ <i class="fas fa-book mr-2 text-indigo-600"></i> Music Theory Reference
251
+ </h2>
252
+
253
+ <div class="mb-8">
254
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Chord Types</h3>
255
+ <div class="space-y-3">
256
+ <div class="p-3 bg-purple-50 rounded-lg border border-purple-100">
257
+ <p class="font-medium text-purple-800">Major (C)</p>
258
+ <p class="text-sm text-purple-600">Root, Major 3rd, Perfect 5th (C-E-G)</p>
259
+ </div>
260
+ <div class="p-3 bg-purple-50 rounded-lg border border-purple-100">
261
+ <p class="font-medium text-purple-800">Minor (Cm)</p>
262
+ <p class="text-sm text-purple-600">Root, Minor 3rd, Perfect 5th (C-E♭-G)</p>
263
+ </div>
264
+ <div class="p-3 bg-purple-50 rounded-lg border border-purple-100">
265
+ <p class="font-medium text-purple-800">Dominant 7th (C7)</p>
266
+ <p class="text-sm text-purple-600">Major triad + Minor 7th (C-E-G-B♭)</p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <div class="mb-8">
272
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Circle of Fifths</h3>
273
+ <div class="flex justify-center">
274
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Circle_of_fifths_deluxe_4.svg/1200px-Circle_of_fifths_deluxe_4.svg.png" alt="Circle of Fifths" class="w-full h-auto rounded-lg border border-gray-200">
275
+ </div>
276
+ </div>
277
+
278
+ <div>
279
+ <h3 class="text-lg font-medium text-gray-700 mb-3">How to Use</h3>
280
+ <div class="space-y-3">
281
+ <div class="flex items-start">
282
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</div>
283
+ <p class="text-gray-700">Play notes on the piano or click note buttons to build a chord</p>
284
+ </div>
285
+ <div class="flex items-start">
286
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</div>
287
+ <p class="text-gray-700">The app will analyze possible chords and keys</p>
288
+ </div>
289
+ <div class="flex items-start">
290
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</div>
291
+ <p class="text-gray-700">Build a chord progression by adding multiple chords</p>
292
+ </div>
293
+ <div class="flex items-start">
294
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">4</div>
295
+ <p class="text-gray-700">Analyze the progression to see likely keys and patterns</p>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
300
+ <h4 class="font-medium text-yellow-800 mb-2 flex items-center">
301
+ <i class="fas fa-lightbulb mr-2"></i> Ear Training Tip
302
+ </h4>
303
+ <p class="text-yellow-700">Try to sing the root note of each chord to help identify the key. The note that feels most resolved is often the tonic (key note).</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <script>
311
+ document.addEventListener('DOMContentLoaded', function() {
312
+ // Audio context for playing sounds
313
+ const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
314
+
315
+ // Store selected notes and chords
316
+ let selectedNotes = [];
317
+ let chordProgression = [];
318
+
319
+ // Musical reference data
320
+ const noteFrequencies = {
321
+ 'C': 261.63, 'C#': 277.18, 'D': 293.66, 'D#': 311.13,
322
+ 'E': 329.63, 'F': 349.23, 'F#': 369.99, 'G': 392.00,
323
+ 'G#': 415.30, 'A': 440.00, 'A#': 466.16, 'B': 493.88
324
+ };
325
+
326
+ const chordTypes = {
327
+ 'major': [0, 4, 7],
328
+ 'minor': [0, 3, 7],
329
+ 'diminished': [0, 3, 6],
330
+ 'augmented': [0, 4, 8],
331
+ 'sus2': [0, 2, 7],
332
+ 'sus4': [0, 5, 7],
333
+ '7': [0, 4, 7, 10],
334
+ 'maj7': [0, 4, 7, 11],
335
+ 'm7': [0, 3, 7, 10],
336
+ 'm7b5': [0, 3, 6, 10]
337
+ };
338
+
339
+ const keySignatures = {
340
+ 'C': ['C', 'Dm', 'Em', 'F', 'G', 'Am', 'Bdim'],
341
+ 'G': ['G', 'Am', 'Bm', 'C', 'D', 'Em', 'F#dim'],
342
+ 'D': ['D', 'Em', 'F#m', 'G', 'A', 'Bm', 'C#dim'],
343
+ 'A': ['A', 'Bm', 'C#m', 'D', 'E', 'F#m', 'G#dim'],
344
+ 'E': ['E', 'F#m', 'G#m', 'A', 'B', 'C#m', 'D#dim'],
345
+ 'B': ['B', 'C#m', 'D#m', 'E', 'F#', 'G#m', 'A#dim'],
346
+ 'F#': ['F#', 'G#m', 'A#m', 'B', 'C#', 'D#m', 'E#dim'],
347
+ 'C#': ['C#', 'D#m', 'E#m', 'F#', 'G#', 'A#m', 'B#dim'],
348
+ 'F': ['F', 'Gm', 'Am', 'Bb', 'C', 'Dm', 'Edim'],
349
+ 'Bb': ['Bb', 'Cm', 'Dm', 'Eb', 'F', 'Gm', 'Adim'],
350
+ 'Eb': ['Eb', 'Fm', 'Gm', 'Ab', 'Bb', 'Cm', 'Ddim'],
351
+ 'Ab': ['Ab', 'Bbm', 'Cm', 'Db', 'Eb', 'Fm', 'Gdim'],
352
+ 'Db': ['Db', 'Ebm', 'Fm', 'Gb', 'Ab', 'Bbm', 'Cdim'],
353
+ 'Gb': ['Gb', 'Abm', 'Bbm', 'Cb', 'Db', 'Ebm', 'Fdim'],
354
+ 'Cb': ['Cb', 'Dbm', 'Ebm', 'Fb', 'Gb', 'Abm', 'Bbdim'],
355
+ 'Am': ['Am', 'Bdim', 'C', 'Dm', 'Em', 'F', 'G'],
356
+ 'Em': ['Em', 'F#dim', 'G', 'Am', 'Bm', 'C', 'D'],
357
+ 'Bm': ['Bm', 'C#dim', 'D', 'Em', 'F#m', 'G', 'A'],
358
+ 'F#m': ['F#m', 'G#dim', 'A', 'Bm', 'C#m', 'D', 'E'],
359
+ 'C#m': ['C#m', 'D#dim', 'E', 'F#m', 'G#m', 'A', 'B'],
360
+ 'G#m': ['G#m', 'A#dim', 'B', 'C#m', 'D#m', 'E', 'F#'],
361
+ 'D#m': ['D#m', 'E#dim', 'F#', 'G#m', 'A#m', 'B', 'C#'],
362
+ 'A#m': ['A#m', 'B#dim', 'C#', 'D#m', 'E#m', 'F#', 'G#'],
363
+ 'Dm': ['Dm', 'Edim', 'F', 'Gm', 'Am', 'Bb', 'C'],
364
+ 'Gm': ['Gm', '
365
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create an application that helps work out a song by ear using notes entries must work out the key and chords