Hugging Face's logo

Spaces:
NativeAngels
/
chord-extractor
Running

App Files Community
NativeAngels commited on
Commit
c8e1c1e
·
verified ·
1 Parent(s): 2a74bdb

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +172 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chord Extractor
3
- emoji: 🐨
4
- colorFrom: blue
5
  colorTo: green
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: chord-extractor
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: green
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,172 @@
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>Chord Extractor - Piano Chord Recognition Tool</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15
+ min-height: 100vh;
16
+ }
17
+
18
+ .piano-key {
19
+ transition: all 0.2s ease;
20
+ }
21
+
22
+ .piano-key.active {
23
+ transform: scale(0.98);
24
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
25
+ }
26
+
27
+ .progress-bar {
28
+ transition: width 0.3s ease;
29
+ }
30
+
31
+ .chord-chip {
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ .chord-chip:hover {
36
+ transform: translateY(-2px);
37
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
38
+ }
39
+
40
+ .waveform {
41
+ background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
42
+ height: 120px;
43
+ border-radius: 8px;
44
+ }
45
+
46
+ @keyframes pulse {
47
+ 0%, 100% { opacity: 1; }
48
+ 50% { opacity: 0.5; }
49
+ }
50
+
51
+ .analyzing {
52
+ animation: pulse 1.5s infinite;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="text-gray-800">
57
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
58
+ <header class="text-center mb-12">
59
+ <h1 class="text-4xl font-bold text-indigo-800 mb-2">Chord Extractor</h1>
60
+ <p class="text-lg text-gray-600">Extract piano chords from YouTube videos or MP3 files with real-time analysis</p>
61
+ </header>
62
+
63
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
64
+ <!-- Input Section -->
65
+ <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-2">
66
+ <h2 class="text-2xl font-semibold mb-4 text-indigo-700">Audio Source</h2>
67
+
68
+ <div class="flex mb-6">
69
+ <button id="youtube-tab" class="tab-btn active px-4 py-2 rounded-l-lg bg-indigo-600 text-white font-medium">YouTube</button>
70
+ <button id="mp3-tab" class="tab-btn px-4 py-2 rounded-r-lg bg-gray-200 text-gray-700 font-medium">MP3 File</button>
71
+ </div>
72
+
73
+ <!-- YouTube Input -->
74
+ <div id="youtube-input" class="tab-content">
75
+ <div class="mb-4">
76
+ <label for="youtube-url" class="block text-sm font-medium text-gray-700 mb-1">YouTube URL</label>
77
+ <div class="flex">
78
+ <input type="text" id="youtube-url" placeholder="https://www.youtube.com/watch?v=..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
79
+ <button id="load-youtube" class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700 transition">Load</button>
80
+ </div>
81
+ </div>
82
+
83
+ <div id="youtube-preview" class="hidden">
84
+ <div class="flex items-center mb-4">
85
+ <img id="yt-thumbnail" src="" alt="Video thumbnail" class="w-16 h-12 rounded mr-3">
86
+ <div>
87
+ <h3 id="yt-title" class="font-medium"></h3>
88
+ <p id="yt-channel" class="text-sm text-gray-600"></p>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- MP3 Input -->
95
+ <div id="mp3-input" class="tab-content hidden">
96
+ <div class="mb-4">
97
+ <label for="mp3-file" class="block text-sm font-medium text-gray-700 mb-1">Upload MP3 File</label>
98
+ <div class="flex items-center">
99
+ <input type="file" id="mp3-file" accept="audio/mp3" class="hidden">
100
+ <button id="mp3-upload-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition mr-3">Choose File</button>
101
+ <span id="mp3-filename" class="text-sm text-gray-600">No file selected</span>
102
+ </div>
103
+ </div>
104
+
105
+ <div id="mp3-preview" class="hidden">
106
+ <div class="flex items-center mb-4">
107
+ <i class="fas fa-music text-2xl text-indigo-600 mr-3"></i>
108
+ <div>
109
+ <h3 id="mp3-title" class="font-medium"></h3>
110
+ <p id="mp3-duration" class="text-sm text-gray-600"></p>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Audio Controls -->
117
+ <div id="audio-controls" class="hidden">
118
+ <div class="waveform mb-4" id="waveform"></div>
119
+
120
+ <div class="flex items-center justify-between mb-4">
121
+ <div class="flex items-center">
122
+ <button id="play-btn" class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-700 transition mr-3">
123
+ <i class="fas fa-play"></i>
124
+ </button>
125
+ <button id="pause-btn" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 transition mr-3">
126
+ <i class="fas fa-pause"></i>
127
+ </button>
128
+ <span id="current-time" class="text-sm">0:00</span>
129
+ <span class="mx-2">/</span>
130
+ <span id="total-time" class="text-sm">0:00</span>
131
+ </div>
132
+
133
+ <div class="flex items-center">
134
+ <span class="text-sm mr-2">Volume:</span>
135
+ <input type="range" id="volume" min="0" max="1" step="0.01" value="0.7" class="w-24">
136
+ </div>
137
+ </div>
138
+
139
+ <div class="flex items-center">
140
+ <button id="analyze-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
141
+ <i class="fas fa-search mr-2"></i> Analyze Chords
142
+ </button>
143
+ <div id="analyzing-indicator" class="ml-4 hidden">
144
+ <div class="flex items-center text-indigo-600">
145
+ <div class="w-4 h-4 rounded-full bg-indigo-600 mr-2 analyzing"></div>
146
+ <span>Analyzing...</span>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Results Section -->
154
+ <div class="bg-white rounded-xl shadow-lg p-6">
155
+ <h2 class="text-2xl font-semibold mb-4 text-indigo-700">Chord Analysis</h2>
156
+
157
+ <div id="no-results" class="text-center py-8">
158
+ <i class="fas fa-music text-4xl text-gray-300 mb-4"></i>
159
+ <p class="text-gray-500">Load a song and click "Analyze Chords" to detect the chords</p>
160
+ </div>
161
+
162
+ <div id="results" class="hidden">
163
+ <div class="mb-6">
164
+ <h3 class="text-lg font-medium mb-2">Detected Key</h3>
165
+ <div class="flex items-center">
166
+ <span id="detected-key" class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-lg font-bold text-lg mr-4">C Major</span>
167
+ <span class="text-sm text-gray-600">Confidence: <span id="key-confidence" class="font-medium">85%</span></span>
168
+ </div>
169
+ </div>
170
+
171
+ <div
172
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create an interactive application that can extract the piano chords and key from any YouTube video or mp3 file with facility to transpose the outputted chords to any key save the output to a text file