Hugging Face's logo

Spaces:
NativeAngels
/
chord-extractor
Running

App Files Community
chord-extractor
File size: 8,570 Bytes 
c8e1c1e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chord Extractor - Piano Chord Recognition Tool</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .piano-key {
            transition: all 0.2s ease;
        }
        
        .piano-key.active {
            transform: scale(0.98);
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }
        
        .progress-bar {
            transition: width 0.3s ease;
        }
        
        .chord-chip {
            transition: all 0.3s ease;
        }
        
        .chord-chip:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .waveform {
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
            height: 120px;
            border-radius: 8px;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .analyzing {
            animation: pulse 1.5s infinite;
        }
    </style>
</head>
<body class="text-gray-800">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold text-indigo-800 mb-2">Chord Extractor</h1>
            <p class="text-lg text-gray-600">Extract piano chords from YouTube videos or MP3 files with real-time analysis</p>
        </header>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Input Section -->
            <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-2">
                <h2 class="text-2xl font-semibold mb-4 text-indigo-700">Audio Source</h2>
                
                <div class="flex mb-6">
                    <button id="youtube-tab" class="tab-btn active px-4 py-2 rounded-l-lg bg-indigo-600 text-white font-medium">YouTube</button>
                    <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>
                </div>
                
                <!-- YouTube Input -->
                <div id="youtube-input" class="tab-content">
                    <div class="mb-4">
                        <label for="youtube-url" class="block text-sm font-medium text-gray-700 mb-1">YouTube URL</label>
                        <div class="flex">
                            <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">
                            <button id="load-youtube" class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700 transition">Load</button>
                        </div>
                    </div>
                    
                    <div id="youtube-preview" class="hidden">
                        <div class="flex items-center mb-4">
                            <img id="yt-thumbnail" src="" alt="Video thumbnail" class="w-16 h-12 rounded mr-3">
                            <div>
                                <h3 id="yt-title" class="font-medium"></h3>
                                <p id="yt-channel" class="text-sm text-gray-600"></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- MP3 Input -->
                <div id="mp3-input" class="tab-content hidden">
                    <div class="mb-4">
                        <label for="mp3-file" class="block text-sm font-medium text-gray-700 mb-1">Upload MP3 File</label>
                        <div class="flex items-center">
                            <input type="file" id="mp3-file" accept="audio/mp3" class="hidden">
                            <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>
                            <span id="mp3-filename" class="text-sm text-gray-600">No file selected</span>
                        </div>
                    </div>
                    
                    <div id="mp3-preview" class="hidden">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-music text-2xl text-indigo-600 mr-3"></i>
                            <div>
                                <h3 id="mp3-title" class="font-medium"></h3>
                                <p id="mp3-duration" class="text-sm text-gray-600"></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Audio Controls -->
                <div id="audio-controls" class="hidden">
                    <div class="waveform mb-4" id="waveform"></div>
                    
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <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">
                                <i class="fas fa-play"></i>
                            </button>
                            <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">
                                <i class="fas fa-pause"></i>
                            </button>
                            <span id="current-time" class="text-sm">0:00</span>
                            <span class="mx-2">/</span>
                            <span id="total-time" class="text-sm">0:00</span>
                        </div>
                        
                        <div class="flex items-center">
                            <span class="text-sm mr-2">Volume:</span>
                            <input type="range" id="volume" min="0" max="1" step="0.01" value="0.7" class="w-24">
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <button id="analyze-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
                            <i class="fas fa-search mr-2"></i> Analyze Chords
                        </button>
                        <div id="analyzing-indicator" class="ml-4 hidden">
                            <div class="flex items-center text-indigo-600">
                                <div class="w-4 h-4 rounded-full bg-indigo-600 mr-2 analyzing"></div>
                                <span>Analyzing...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Results Section -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-2xl font-semibold mb-4 text-indigo-700">Chord Analysis</h2>
                
                <div id="no-results" class="text-center py-8">
                    <i class="fas fa-music text-4xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500">Load a song and click "Analyze Chords" to detect the chords</p>
                </div>
                
                <div id="results" class="hidden">
                    <div class="mb-6">
                        <h3 class="text-lg font-medium mb-2">Detected Key</h3>
                        <div class="flex items-center">
                            <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>
                            <span class="text-sm text-gray-600">Confidence: <span id="key-confidence" class="font-medium">85%</span></span>
                        </div>
                    </div>
                    
                    <div
</html>