Hugging Face's logo

Spaces:
FGF897
/
mureka
Running

App Files Community
FGF897 commited on
Commit
888d153
·
verified ·
1 Parent(s): e969880

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1446 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mureka
3
- emoji: 😻
4
  colorFrom: red
5
- colorTo: red
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: mureka
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: pink
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,1446 @@
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>Mureka Music Generator</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
+ .glass-effect {
11
+ background: rgba(255, 255, 255, 0.15);
12
+ backdrop-filter: blur(10px);
13
+ -webkit-backdrop-filter: blur(10px);
14
+ border-radius: 20px;
15
+ border: 1px solid rgba(255, 255, 255, 0.18);
16
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
17
+ }
18
+
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21
+ }
22
+
23
+ .song-card {
24
+ transition: all 0.3s ease;
25
+ }
26
+
27
+ .song-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
30
+ }
31
+
32
+ .progress-bar {
33
+ height: 4px;
34
+ background: rgba(255, 255, 255, 0.3);
35
+ border-radius: 2px;
36
+ }
37
+
38
+ .progress-fill {
39
+ height: 100%;
40
+ background: white;
41
+ border-radius: 2px;
42
+ transition: width 0.3s ease;
43
+ }
44
+
45
+ .lyrics-input {
46
+ min-height: 150px;
47
+ resize: none;
48
+ }
49
+
50
+ .audio-player {
51
+ width: 100%;
52
+ height: 40px;
53
+ background: rgba(255, 255, 255, 0.1);
54
+ border-radius: 20px;
55
+ }
56
+
57
+ /* Custom scrollbar */
58
+ ::-webkit-scrollbar {
59
+ width: 8px;
60
+ }
61
+
62
+ ::-webkit-scrollbar-track {
63
+ background: rgba(255, 255, 255, 0.1);
64
+ border-radius: 10px;
65
+ }
66
+
67
+ ::-webkit-scrollbar-thumb {
68
+ background: rgba(255, 255, 255, 0.3);
69
+ border-radius: 10px;
70
+ }
71
+
72
+ ::-webkit-scrollbar-thumb:hover {
73
+ background: rgba(255, 255, 255, 0.5);
74
+ }
75
+
76
+ /* Tab styling */
77
+ .tab {
78
+ padding: 10px 20px;
79
+ cursor: pointer;
80
+ border-radius: 9999px;
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .tab.active {
85
+ background: rgba(255, 255, 255, 0.2);
86
+ font-weight: 500;
87
+ }
88
+
89
+ /* Loading spinner */
90
+ .spinner {
91
+ width: 24px;
92
+ height: 24px;
93
+ border: 3px solid rgba(255,255,255,0.3);
94
+ border-radius: 50%;
95
+ border-top-color: white;
96
+ animation: spin 1s ease-in-out infinite;
97
+ }
98
+
99
+ @keyframes spin {
100
+ to { transform: rotate(360deg); }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="gradient-bg min-h-screen text-white font-sans">
105
+ <div class="container mx-auto px-4 py-8">
106
+ <!-- Header -->
107
+ <header class="flex justify-between items-center mb-8">
108
+ <div class="flex items-center">
109
+ <i class="fas fa-music text-3xl mr-3"></i>
110
+ <h1 class="text-3xl font-bold">Mureka Music</h1>
111
+ </div>
112
+ <div class="flex items-center space-x-4">
113
+ <button id="accountBtn" class="glass-effect px-4 py-2 rounded-full flex items-center">
114
+ <i class="fas fa-user mr-2"></i>
115
+ <span>Account</span>
116
+ </button>
117
+ <button id="settingsBtn" class="glass-effect px-4 py-2 rounded-full flex items-center">
118
+ <i class="fas fa-cog mr-2"></i>
119
+ <span>Settings</span>
120
+ </button>
121
+ </div>
122
+ </header>
123
+
124
+ <!-- Main Content -->
125
+ <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
126
+ <!-- Generator Panel -->
127
+ <div class="glass-effect p-6 rounded-2xl lg:col-span-2">
128
+ <div class="flex space-x-2 mb-6">
129
+ <div class="tab active" data-tab="song">Song</div>
130
+ <div class="tab" data-tab="instrumental">Instrumental</div>
131
+ <div class="tab" data-tab="lyrics">Lyrics</div>
132
+ <div class="tab" data-tab="video">Video</div>
133
+ </div>
134
+
135
+ <!-- Song Generation Tab -->
136
+ <div id="songTab" class="tab-content">
137
+ <h2 class="text-2xl font-semibold mb-6">Create New Song</h2>
138
+
139
+ <div class="mb-6">
140
+ <label class="block text-sm font-medium mb-2">Song Title</label>
141
+ <input type="text" id="songTitle" placeholder="Enter song title"
142
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
143
+ </div>
144
+
145
+ <div class="mb-6">
146
+ <label class="block text-sm font-medium mb-2">Lyrics</label>
147
+ <textarea id="songLyrics" placeholder="Enter your lyrics here..."
148
+ class="lyrics-input glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea>
149
+ </div>
150
+
151
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
152
+ <div>
153
+ <label class="block text-sm font-medium mb-2">Genre</label>
154
+ <select id="songGenre" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
155
+ <option value="pop">Pop</option>
156
+ <option value="rock">Rock</option>
157
+ <option value="r&b">R&B</option>
158
+ <option value="hiphop">Hip Hop</option>
159
+ <option value="electronic">Electronic</option>
160
+ <option value="jazz">Jazz</option>
161
+ <option value="classical">Classical</option>
162
+ </select>
163
+ </div>
164
+
165
+ <div>
166
+ <label class="block text-sm font-medium mb-2">Mood</label>
167
+ <select id="songMood" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
168
+ <option value="happy">Happy</option>
169
+ <option value="sad">Sad</option>
170
+ <option value="energetic">Energetic</option>
171
+ <option value="calm">Calm</option>
172
+ <option value="romantic">Romantic</option>
173
+ <option value="angry">Angry</option>
174
+ </select>
175
+ </div>
176
+
177
+ <div>
178
+ <label class="block text-sm font-medium mb-2">Vocal Type</label>
179
+ <select id="songVocal" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
180
+ <option value="male">Male</option>
181
+ <option value="female">Female</option>
182
+ <option value="duet">Duet</option>
183
+ <option value="choir">Choir</option>
184
+ </select>
185
+ </div>
186
+
187
+ <div>
188
+ <label class="block text-sm font-medium mb-2">Model</label>
189
+ <select id="songModel" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
190
+ <option value="auto">Auto (Recommended)</option>
191
+ <option value="mureka-6">Mureka V6</option>
192
+ <option value="mureka-5.5">Mureka V5.5</option>
193
+ <option value="mureka-o1">Mureka O1</option>
194
+ </select>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="flex justify-between items-center">
199
+ <div class="flex items-center space-x-2">
200
+ <input type="checkbox" id="advancedOptions" class="rounded">
201
+ <label for="advancedOptions">Advanced Options</label>
202
+ </div>
203
+
204
+ <button id="generateSongBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-white/90 transition flex items-center">
205
+ <i class="fas fa-magic mr-2"></i> Generate Song
206
+ </button>
207
+ </div>
208
+
209
+ <!-- Advanced Options (Hidden by default) -->
210
+ <div id="advancedOptionsPanel" class="mt-6 hidden">
211
+ <h3 class="text-lg font-medium mb-4">Advanced Options</h3>
212
+
213
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
214
+ <div>
215
+ <label class="block text-sm font-medium mb-2">Tempo (BPM)</label>
216
+ <input type="range" id="songTempo" min="60" max="200" value="120"
217
+ class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer">
218
+ <div class="flex justify-between text-xs mt-1">
219
+ <span>60</span>
220
+ <span id="tempoValue">120</span>
221
+ <span>200</span>
222
+ </div>
223
+ </div>
224
+
225
+ <div>
226
+ <label class="block text-sm font-medium mb-2">Duration (seconds)</label>
227
+ <input type="range" id="songDuration" min="30" max="300" value="180"
228
+ class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer">
229
+ <div class="flex justify-between text-xs mt-1">
230
+ <span>30</span>
231
+ <span id="durationValue">180</span>
232
+ <span>300</span>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="mb-4">
238
+ <label class="block text-sm font-medium mb-2">Reference Track (URL)</label>
239
+ <input type="text" id="songReference" placeholder="Paste a YouTube or Spotify URL"
240
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
241
+ </div>
242
+
243
+ <div>
244
+ <label class="block text-sm font-medium mb-2">Additional Description</label>
245
+ <textarea id="songDescription" placeholder="Describe the style, instruments, or any specific requirements..."
246
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Instrumental Generation Tab -->
252
+ <div id="instrumentalTab" class="tab-content hidden">
253
+ <h2 class="text-2xl font-semibold mb-6">Create Instrumental</h2>
254
+
255
+ <div class="mb-6">
256
+ <label class="block text-sm font-medium mb-2">Track Title</label>
257
+ <input type="text" id="instrumentalTitle" placeholder="Enter track title"
258
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
259
+ </div>
260
+
261
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
262
+ <div>
263
+ <label class="block text-sm font-medium mb-2">Genre</label>
264
+ <select id="instrumentalGenre" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
265
+ <option value="electronic">Electronic</option>
266
+ <option value="orchestral">Orchestral</option>
267
+ <option value="jazz">Jazz</option>
268
+ <option value="rock">Rock</option>
269
+ <option value="ambient">Ambient</option>
270
+ <option value="hiphop">Hip Hop</option>
271
+ </select>
272
+ </div>
273
+
274
+ <div>
275
+ <label class="block text-sm font-medium mb-2">Mood</label>
276
+ <select id="instrumentalMood" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
277
+ <option value="happy">Happy</option>
278
+ <option value="sad">Sad</option>
279
+ <option value="energetic">Energetic</option>
280
+ <option value="calm">Calm</option>
281
+ <option value="dark">Dark</option>
282
+ <option value="uplifting">Uplifting</option>
283
+ </select>
284
+ </div>
285
+
286
+ <div>
287
+ <label class="block text-sm font-medium mb-2">Instruments</label>
288
+ <select id="instrumentalInstruments" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
289
+ <option value="piano">Piano</option>
290
+ <option value="guitar">Guitar</option>
291
+ <option value="strings">Strings</option>
292
+ <option value="synth">Synth</option>
293
+ <option value="drums">Drums</option>
294
+ <option value="full-band">Full Band</option>
295
+ </select>
296
+ </div>
297
+
298
+ <div>
299
+ <label class="block text-sm font-medium mb-2">Model</label>
300
+ <select id="instrumentalModel" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
301
+ <option value="auto">Auto (Recommended)</option>
302
+ <option value="mureka-6">Mureka V6</option>
303
+ <option value="mureka-5.5">Mureka V5.5</option>
304
+ <option value="mureka-o1">Mureka O1</option>
305
+ </select>
306
+ </div>
307
+ </div>
308
+
309
+ <div class="flex justify-between items-center">
310
+ <div class="flex items-center space-x-2">
311
+ <input type="checkbox" id="instrumentalAdvancedOptions" class="rounded">
312
+ <label for="instrumentalAdvancedOptions">Advanced Options</label>
313
+ </div>
314
+
315
+ <button id="generateInstrumentalBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-white/90 transition flex items-center">
316
+ <i class="fas fa-magic mr-2"></i> Generate Instrumental
317
+ </button>
318
+ </div>
319
+
320
+ <!-- Advanced Options (Hidden by default) -->
321
+ <div id="instrumentalAdvancedOptionsPanel" class="mt-6 hidden">
322
+ <h3 class="text-lg font-medium mb-4">Advanced Options</h3>
323
+
324
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
325
+ <div>
326
+ <label class="block text-sm font-medium mb-2">Tempo (BPM)</label>
327
+ <input type="range" id="instrumentalTempo" min="60" max="200" value="120"
328
+ class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer">
329
+ <div class="flex justify-between text-xs mt-1">
330
+ <span>60</span>
331
+ <span id="instrumentalTempoValue">120</span>
332
+ <span>200</span>
333
+ </div>
334
+ </div>
335
+
336
+ <div>
337
+ <label class="block text-sm font-medium mb-2">Duration (seconds)</label>
338
+ <input type="range" id="instrumentalDuration" min="30" max="300" value="180"
339
+ class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer">
340
+ <div class="flex justify-between text-xs mt-1">
341
+ <span>30</span>
342
+ <span id="instrumentalDurationValue">180</span>
343
+ <span>300</span>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="mb-4">
349
+ <label class="block text-sm font-medium mb-2">Reference Track (URL)</label>
350
+ <input type="text" id="instrumentalReference" placeholder="Paste a YouTube or Spotify URL"
351
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
352
+ </div>
353
+
354
+ <div>
355
+ <label class="block text-sm font-medium mb-2">Additional Description</label>
356
+ <textarea id="instrumentalDescription" placeholder="Describe the style, instruments, or any specific requirements..."
357
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Lyrics Generation Tab -->
363
+ <div id="lyricsTab" class="tab-content hidden">
364
+ <h2 class="text-2xl font-semibold mb-6">Generate Lyrics</h2>
365
+
366
+ <div class="mb-6">
367
+ <label class="block text-sm font-medium mb-2">Song Title</label>
368
+ <input type="text" id="lyricsTitle" placeholder="Enter song title"
369
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
370
+ </div>
371
+
372
+ <div class="mb-6">
373
+ <label class="block text-sm font-medium mb-2">Theme/Subject</label>
374
+ <textarea id="lyricsTheme" placeholder="Describe what the song should be about..."
375
+ class="lyrics-input glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea>
376
+ </div>
377
+
378
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
379
+ <div>
380
+ <label class="block text-sm font-medium mb-2">Genre</label>
381
+ <select id="lyricsGenre" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
382
+ <option value="pop">Pop</option>
383
+ <option value="rock">Rock</option>
384
+ <option value="r&b">R&B</option>
385
+ <option value="hiphop">Hip Hop</option>
386
+ <option value="country">Country</option>
387
+ <option value="jazz">Jazz</option>
388
+ </select>
389
+ </div>
390
+
391
+ <div>
392
+ <label class="block text-sm font-medium mb-2">Mood</label>
393
+ <select id="lyricsMood" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
394
+ <option value="happy">Happy</option>
395
+ <option value="sad">Sad</option>
396
+ <option value="romantic">Romantic</option>
397
+ <option value="angry">Angry</option>
398
+ <option value="nostalgic">Nostalgic</option>
399
+ <option value="hopeful">Hopeful</option>
400
+ </select>
401
+ </div>
402
+
403
+ <div>
404
+ <label class="block text-sm font-medium mb-2">Style</label>
405
+ <select id="lyricsStyle" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
406
+ <option value="standard">Standard</option>
407
+ <option value="poetic">Poetic</option>
408
+ <option value="simple">Simple</option>
409
+ <option value="complex">Complex</option>
410
+ <option value="metaphorical">Metaphorical</option>
411
+ <option value="direct">Direct</option>
412
+ </select>
413
+ </div>
414
+
415
+ <div>
416
+ <label class="block text-sm font-medium mb-2">Length</label>
417
+ <select id="lyricsLength" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
418
+ <option value="short">Short (1 verse + chorus)</option>
419
+ <option value="medium" selected>Medium (2 verses + chorus)</option>
420
+ <option value="long">Long (3 verses + chorus + bridge)</option>
421
+ </select>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="flex justify-between items-center">
426
+ <div class="flex items-center space-x-2">
427
+ <input type="checkbox" id="lyricsAdvancedOptions" class="rounded">
428
+ <label for="lyricsAdvancedOptions">Advanced Options</label>
429
+ </div>
430
+
431
+ <button id="generateLyricsBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-white/90 transition flex items-center">
432
+ <i class="fas fa-magic mr-2"></i> Generate Lyrics
433
+ </button>
434
+ </div>
435
+
436
+ <!-- Advanced Options (Hidden by default) -->
437
+ <div id="lyricsAdvancedOptionsPanel" class="mt-6 hidden">
438
+ <h3 class="text-lg font-medium mb-4">Advanced Options</h3>
439
+
440
+ <div class="mb-4">
441
+ <label class="block text-sm font-medium mb-2">Reference Artist/Song</label>
442
+ <input type="text" id="lyricsReference" placeholder="E.g., 'Taylor Swift style'"
443
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
444
+ </div>
445
+
446
+ <div>
447
+ <label class="block text-sm font-medium mb-2">Specific Instructions</label>
448
+ <textarea id="lyricsInstructions" placeholder="Any specific requirements for the lyrics..."
449
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Generated Lyrics Display -->
454
+ <div id="generatedLyricsContainer" class="mt-6 hidden">
455
+ <h3 class="text-lg font-medium mb-4">Generated Lyrics</h3>
456
+ <div id="generatedLyrics" class="glass-effect p-4 rounded-xl whitespace-pre-line"></div>
457
+ <div class="flex justify-end mt-4">
458
+ <button id="copyLyricsBtn" class="glass-effect px-4 py-2 rounded-full mr-2">
459
+ <i class="fas fa-copy mr-2"></i> Copy
460
+ </button>
461
+ <button id="useLyricsBtn" class="bg-white text-purple-700 px-4 py-2 rounded-full">
462
+ <i class="fas fa-music mr-2"></i> Use for Song
463
+ </button>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Video Generation Tab -->
469
+ <div id="videoTab" class="tab-content hidden">
470
+ <h2 class="text-2xl font-semibold mb-6">Generate Music Video</h2>
471
+
472
+ <div class="mb-6">
473
+ <label class="block text-sm font-medium mb-2">Select Song</label>
474
+ <select id="videoSongSelect" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
475
+ <option value="">Select a generated song...</option>
476
+ <!-- Songs will be populated here -->
477
+ </select>
478
+ </div>
479
+
480
+ <div class="mb-6">
481
+ <label class="block text-sm font-medium mb-2">Video Style</label>
482
+ <select id="videoStyle" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
483
+ <option value="abstract">Abstract</option>
484
+ <option value="performance">Performance</option>
485
+ <option value="story">Story</option>
486
+ <option value="lyric">Lyric Video</option>
487
+ <option value="concert">Concert</option>
488
+ <option value="animation">Animation</option>
489
+ </select>
490
+ </div>
491
+
492
+ <div class="mb-6">
493
+ <label class="block text-sm font-medium mb-2">Theme/Concept</label>
494
+ <textarea id="videoTheme" placeholder="Describe the video concept or provide reference images/links..."
495
+ class="lyrics-input glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea>
496
+ </div>
497
+
498
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
499
+ <div>
500
+ <label class="block text-sm font-medium mb-2">Color Palette</label>
501
+ <select id="videoColors" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
502
+ <option value="vibrant">Vibrant</option>
503
+ <option value="pastel">Pastel</option>
504
+ <option value="monochrome">Monochrome</option>
505
+ <option value="dark">Dark</option>
506
+ <option value="light">Light</option>
507
+ <option value="custom">Custom</option>
508
+ </select>
509
+ </div>
510
+
511
+ <div>
512
+ <label class="block text-sm font-medium mb-2">Video Length</label>
513
+ <select id="videoLength" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
514
+ <option value="full">Full Song</option>
515
+ <option value="30s">30 Seconds</option>
516
+ <option value="60s">60 Seconds</option>
517
+ <option value="90s">90 Seconds</option>
518
+ <option value="teaser">Teaser (15s)</option>
519
+ </select>
520
+ </div>
521
+ </div>
522
+
523
+ <div class="flex justify-between items-center">
524
+ <div class="flex items-center space-x-2">
525
+ <input type="checkbox" id="videoAdvancedOptions" class="rounded">
526
+ <label for="videoAdvancedOptions">Advanced Options</label>
527
+ </div>
528
+
529
+ <button id="generateVideoBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-white/90 transition flex items-center">
530
+ <i class="fas fa-video mr-2"></i> Generate Video
531
+ </button>
532
+ </div>
533
+
534
+ <!-- Advanced Options (Hidden by default) -->
535
+ <div id="videoAdvancedOptionsPanel" class="mt-6 hidden">
536
+ <h3 class="text-lg font-medium mb-4">Advanced Options</h3>
537
+
538
+ <div class="mb-4">
539
+ <label class="block text-sm font-medium mb-2">Reference Videos (URLs)</label>
540
+ <input type="text" id="videoReferences" placeholder="Paste YouTube or Vimeo URLs separated by commas"
541
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30">
542
+ </div>
543
+
544
+ <div>
545
+ <label class="block text-sm font-medium mb-2">Specific Instructions</label>
546
+ <textarea id="videoInstructions" placeholder="Any specific requirements for the video..."
547
+ class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Generation Progress -->
553
+ <div id="generationProgress" class="mt-6 hidden">
554
+ <div class="flex justify-between items-center mb-2">
555
+ <span class="font-medium" id="progressTitle">Generating your song...</span>
556
+ <span id="progressPercent">0%</span>
557
+ </div>
558
+ <div class="progress-bar">
559
+ <div id="progressFill" class="progress-fill" style="width: 0%"></div>
560
+ </div>
561
+ <div class="text-sm text-center mt-2" id="statusMessage">Preparing generation...</div>
562
+ </div>
563
+ </div>
564
+
565
+ <!-- Generated Content -->
566
+ <div class="glass-effect p-6 rounded-2xl">
567
+ <div class="flex justify-between items-center mb-6">
568
+ <h2 class="text-2xl font-semibold">Your Library</h2>
569
+ <button id="refreshLibraryBtn" class="glass-effect px-3 py-1 rounded-full text-sm">
570
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
571
+ </button>
572
+ </div>
573
+
574
+ <div class="flex space-x-2 mb-4">
575
+ <div class="tab active" data-filter="all">All</div>
576
+ <div class="tab" data-filter="songs">Songs</div>
577
+ <div class="tab" data-filter="instrumentals">Instrumentals</div>
578
+ <div class="tab" data-filter="videos">Videos</div>
579
+ </div>
580
+
581
+ <div id="libraryContent" class="space-y-4 max-h-[600px] overflow-y-auto pr-2">
582
+ <!-- Content will be loaded here -->
583
+ <div class="text-center py-8">
584
+ <i class="fas fa-music text-4xl mb-4 opacity-50"></i>
585
+ <p class="opacity-70">Your generated content will appear here</p>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </main>
590
+ </div>
591
+
592
+ <!-- Account Modal -->
593
+ <div id="accountModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
594
+ <div class="glass-effect w-full max-w-md p-6 rounded-2xl">
595
+ <div class="flex justify-between items-center mb-4">
596
+ <h3 class="text-xl font-semibold">Account</h3>
597
+ <button id="closeAccountModal" class="text-xl">&times;</button>
598
+ </div>
599
+
600
+ <div class="mb-6">
601
+ <div class="flex items-center mb-4">
602
+ <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mr-4">
603
+ <i class="fas fa-user text-2xl"></i>
604
+ </div>
605
+ <div>
606
+ <h4 class="font-medium" id="accountName">Guest User</h4>
607
+ <p class="text-sm opacity-70" id="accountEmail">guest@example.com</p>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="glass-effect p-4 rounded-xl mb-4">
612
+ <div class="flex justify-between items-center mb-2">
613
+ <span class="font-medium">Plan</span>
614
+ <span id="accountPlan" class="bg-white text-purple-700 px-2 py-1 rounded-full text-xs">Basic</span>
615
+ </div>
616
+ <div class="flex justify-between items-center">
617
+ <span>Credits</span>
618
+ <span id="accountCredits">400</span>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="glass-effect p-4 rounded-xl">
623
+ <div class="flex justify-between items-center mb-2">
624
+ <span class="font-medium">API Key</span>
625
+ <button id="showApiKey" class="text-xs">Show</button>
626
+ </div>
627
+ <div class="relative">
628
+ <input type="password" id="apiKeyField" value="sk_test_1234567890abcdef"
629
+ class="glass-effect w-full px-3 py-2 rounded bg-transparent border border-white/20 text-sm" readonly>
630
+ <button id="copyApiKey" class="absolute right-2 top-1/2 transform -translate-y-1/2">
631
+ <i class="fas fa-copy"></i>
632
+ </button>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <div class="flex justify-between">
638
+ <button class="glass-effect px-4 py-2 rounded-full">
639
+ <i class="fas fa-sign-out-alt mr-2"></i> Logout
640
+ </button>
641
+ <button class="bg-white text-purple-700 px-4 py-2 rounded-full">
642
+ <i class="fas fa-crown mr-2"></i> Upgrade
643
+ </button>
644
+ </div>
645
+ </div>
646
+ </div>
647
+
648
+ <!-- Settings Modal -->
649
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
650
+ <div class="glass-effect w-full max-w-md p-6 rounded-2xl">
651
+ <div class="flex justify-between items-center mb-4">
652
+ <h3 class="text-xl font-semibold">Settings</h3>
653
+ <button id="closeSettingsModal" class="text-xl">&times;</button>
654
+ </div>
655
+
656
+ <div class="space-y-4">
657
+ <div>
658
+ <label class="block text-sm font-medium mb-2">Default Model</label>
659
+ <select class="glass-effect w-full px-4 py-2 rounded-xl bg-transparent border border-white/20">
660
+ <option value="auto">Auto (Recommended)</option>
661
+ <option value="mureka-6">Mureka V6</option>
662
+ <option value="mureka-5.5">Mureka V5.5</option>
663
+ <option value="mureka-o1">Mureka O1</option>
664
+ </select>
665
+ </div>
666
+
667
+ <div>
668
+ <label class="block text-sm font-medium mb-2">Default Quality</label>
669
+ <select class="glass-effect w-full px-4 py-2 rounded-xl bg-transparent border border-white/20">
670
+ <option value="standard">Standard</option>
671
+ <option value="high">High (uses more credits)</option>
672
+ <option value="premium">Premium (best quality)</option>
673
+ </select>
674
+ </div>
675
+
676
+ <div>
677
+ <label class="block text-sm font-medium mb-2">Default Duration</label>
678
+ <select class="glass-effect w-full px-4 py-2 rounded-xl bg-transparent border border-white/20">
679
+ <option value="short">Short (30-60s)</option>
680
+ <option value="medium" selected>Medium (2-3 min)</option>
681
+ <option value="full">Full Length (3-5 min)</option>
682
+ </select>
683
+ </div>
684
+
685
+ <div class="flex items-center justify-between pt-4 border-t border-white/20">
686
+ <span>Dark Mode</span>
687
+ <label class="relative inline-flex items-center cursor-pointer">
688
+ <input type="checkbox" class="sr-only peer" checked>
689
+ <div class="w-11 h-6 bg-white/20 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
690
+ </label>
691
+ </div>
692
+
693
+ <div class="flex items-center justify-between">
694
+ <span>Auto-save generations</span>
695
+ <label class="relative inline-flex items-center cursor-pointer">
696
+ <input type="checkbox" class="sr-only peer" checked>
697
+ <div class="w-11 h-6 bg-white/20 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
698
+ </label>
699
+ </div>
700
+ </div>
701
+
702
+ <div class="mt-6 flex justify-end">
703
+ <button class="bg-white text-purple-700 px-4 py-2 rounded-full">
704
+ Save Settings
705
+ </button>
706
+ </div>
707
+ </div>
708
+ </div>
709
+
710
+ <script>
711
+ // DOM Elements
712
+ const tabs = document.querySelectorAll('[data-tab]');
713
+ const tabContents = document.querySelectorAll('.tab-content');
714
+ const filterTabs = document.querySelectorAll('[data-filter]');
715
+ const advancedOptionsCheckbox = document.getElementById('advancedOptions');
716
+ const advancedOptionsPanel = document.getElementById('advancedOptionsPanel');
717
+ const instrumentalAdvancedOptionsCheckbox = document.getElementById('instrumentalAdvancedOptions');
718
+ const instrumentalAdvancedOptionsPanel = document.getElementById('instrumentalAdvancedOptionsPanel');
719
+ const lyricsAdvancedOptionsCheckbox = document.getElementById('lyricsAdvancedOptions');
720
+ const lyricsAdvancedOptionsPanel = document.getElementById('lyricsAdvancedOptionsPanel');
721
+ const videoAdvancedOptionsCheckbox = document.getElementById('videoAdvancedOptions');
722
+ const videoAdvancedOptionsPanel = document.getElementById('videoAdvancedOptionsPanel');
723
+
724
+ // Generation buttons
725
+ const generateSongBtn = document.getElementById('generateSongBtn');
726
+ const generateInstrumentalBtn = document.getElementById('generateInstrumentalBtn');
727
+ const generateLyricsBtn = document.getElementById('generateLyricsBtn');
728
+ const generateVideoBtn = document.getElementById('generateVideoBtn');
729
+
730
+ // Progress elements
731
+ const generationProgress = document.getElementById('generationProgress');
732
+ const progressFill = document.getElementById('progressFill');
733
+ const progressPercent = document.getElementById('progressPercent');
734
+ const progressTitle = document.getElementById('progressTitle');
735
+ const statusMessage = document.getElementById('statusMessage');
736
+
737
+ // Library elements
738
+ const libraryContent = document.getElementById('libraryContent');
739
+ const refreshLibraryBtn = document.getElementById('refreshLibraryBtn');
740
+ const videoSongSelect = document.getElementById('videoSongSelect');
741
+
742
+ // Lyrics elements
743
+ const generatedLyricsContainer = document.getElementById('generatedLyricsContainer');
744
+ const generatedLyrics = document.getElementById('generatedLyrics');
745
+ const copyLyricsBtn = document.getElementById('copyLyricsBtn');
746
+ const useLyricsBtn = document.getElementById('useLyricsBtn');
747
+
748
+ // Modal elements
749
+ const accountBtn = document.getElementById('accountBtn');
750
+ const accountModal = document.getElementById('accountModal');
751
+ const closeAccountModal = document.getElementById('closeAccountModal');
752
+ const showApiKey = document.getElementById('showApiKey');
753
+ const apiKeyField = document.getElementById('apiKeyField');
754
+ const copyApiKey = document.getElementById('copyApiKey');
755
+
756
+ const settingsBtn = document.getElementById('settingsBtn');
757
+ const settingsModal = document.getElementById('settingsModal');
758
+ const closeSettingsModal = document.getElementById('closeSettingsModal');
759
+
760
+ // Form elements
761
+ const songTitle = document.getElementById('songTitle');
762
+ const songLyrics = document.getElementById('songLyrics');
763
+ const songGenre = document.getElementById('songGenre');
764
+ const songMood = document.getElementById('songMood');
765
+ const songVocal = document.getElementById('songVocal');
766
+ const songModel = document.getElementById('songModel');
767
+ const songTempo = document.getElementById('songTempo');
768
+ const tempoValue = document.getElementById('tempoValue');
769
+ const songDuration = document.getElementById('songDuration');
770
+ const durationValue = document.getElementById('durationValue');
771
+ const songReference = document.getElementById('songReference');
772
+ const songDescription = document.getElementById('songDescription');
773
+
774
+ const instrumentalTitle = document.getElementById('instrumentalTitle');
775
+ const instrumentalGenre = document.getElementById('instrumentalGenre');
776
+ const instrumentalMood = document.getElementById('instrumentalMood');
777
+ const instrumentalInstruments = document.getElementById('instrumentalInstruments');
778
+ const instrumentalModel = document.getElementById('instrumentalModel');
779
+ const instrumentalTempo = document.getElementById('instrumentalTempo');
780
+ const instrumentalTempoValue = document.getElementById('instrumentalTempoValue');
781
+ const instrumentalDuration = document.getElementById('instrumentalDuration');
782
+ const instrumentalDurationValue = document.getElementById('instrumentalDurationValue');
783
+ const instrumentalReference = document.getElementById('instrumentalReference');
784
+ const instrumentalDescription = document.getElementById('instrumentalDescription');
785
+
786
+ const lyricsTitle = document.getElementById('lyricsTitle');
787
+ const lyricsTheme = document.getElementById('lyricsTheme');
788
+ const lyricsGenre = document.getElementById('lyricsGenre');
789
+ const lyricsMood = document.getElementById('lyricsMood');
790
+ const lyricsStyle = document.getElementById('lyricsStyle');
791
+ const lyricsLength = document.getElementById('lyricsLength');
792
+ const lyricsReference = document.getElementById('lyricsReference');
793
+ const lyricsInstructions = document.getElementById('lyricsInstructions');
794
+
795
+ const videoStyle = document.getElementById('videoStyle');
796
+ const videoTheme = document.getElementById('videoTheme');
797
+ const videoColors = document.getElementById('videoColors');
798
+ const videoLength = document.getElementById('videoLength');
799
+ const videoReferences = document.getElementById('videoReferences');
800
+ const videoInstructions = document.getElementById('videoInstructions');
801
+
802
+ // Mock data
803
+ const mockSongs = [
804
+ {
805
+ id: 'song1',
806
+ title: 'Summer Breeze',
807
+ type: 'song',
808
+ genre: 'Pop',
809
+ mood: 'Happy',
810
+ vocal: 'Female',
811
+ duration: '2:45',
812
+ date: '2023-06-15',
813
+ cover: 'https://via.placeholder.com/150',
814
+ audio: 'https://example.com/audio1.mp3'
815
+ },
816
+ {
817
+ id: 'song2',
818
+ title: 'Midnight Thoughts',
819
+ type: 'song',
820
+ genre: 'R&B',
821
+ mood: 'Sad',
822
+ vocal: 'Male',
823
+ duration: '3:12',
824
+ date: '2023-06-10',
825
+ cover: 'https://via.placeholder.com/150',
826
+ audio: 'https://example.com/audio2.mp3'
827
+ },
828
+ {
829
+ id: 'inst1',
830
+ title: 'Dreamscape',
831
+ type: 'instrumental',
832
+ genre: 'Ambient',
833
+ mood: 'Calm',
834
+ vocal: 'None',
835
+ duration: '4:20',
836
+ date: '2023-06-05',
837
+ cover: 'https://via.placeholder.com/150',
838
+ audio: 'https://example.com/audio3.mp3'
839
+ },
840
+ {
841
+ id: 'video1',
842
+ title: 'Summer Breeze Video',
843
+ type: 'video',
844
+ genre: 'Pop',
845
+ mood: 'Happy',
846
+ duration: '2:45',
847
+ date: '2023-06-18',
848
+ cover: 'https://via.placeholder.com/150',
849
+ video: 'https://example.com/video1.mp4'
850
+ }
851
+ ];
852
+
853
+ // Mock API Key - In a real app, this would be securely stored and retrieved
854
+ const MUREKA_API_KEY = 'your_api_key_here';
855
+
856
+ // Initialize the app
857
+ function initApp() {
858
+ // Load library content
859
+ loadLibraryContent('all');
860
+
861
+ // Populate video song select
862
+ populateVideoSongSelect();
863
+ }
864
+
865
+ // Tab switching
866
+ tabs.forEach(tab => {
867
+ tab.addEventListener('click', () => {
868
+ // Remove active class from all tabs
869
+ tabs.forEach(t => t.classList.remove('active'));
870
+ // Add active class to clicked tab
871
+ tab.classList.add('active');
872
+
873
+ // Hide all tab contents
874
+ tabContents.forEach(content => content.classList.add('hidden'));
875
+ // Show the selected tab content
876
+ const tabId = tab.getAttribute('data-tab') + 'Tab';
877
+ document.getElementById(tabId).classList.remove('hidden');
878
+
879
+ // Update progress title based on tab
880
+ switch(tab.getAttribute('data-tab')) {
881
+ case 'song':
882
+ progressTitle.textContent = 'Generating your song...';
883
+ break;
884
+ case 'instrumental':
885
+ progressTitle.textContent = 'Generating instrumental...';
886
+ break;
887
+ case 'lyrics':
888
+ progressTitle.textContent = 'Generating lyrics...';
889
+ break;
890
+ case 'video':
891
+ progressTitle.textContent = 'Generating video...';
892
+ break;
893
+ }
894
+ });
895
+ });
896
+
897
+ // Filter switching
898
+ filterTabs.forEach(tab => {
899
+ tab.addEventListener('click', () => {
900
+ // Remove active class from all filter tabs
901
+ filterTabs.forEach(t => t.classList.remove('active'));
902
+ // Add active class to clicked tab
903
+ tab.classList.add('active');
904
+
905
+ // Load content based on filter
906
+ const filter = tab.getAttribute('data-filter');
907
+ loadLibraryContent(filter);
908
+ });
909
+ });
910
+
911
+ // Advanced options toggles
912
+ advancedOptionsCheckbox.addEventListener('change', function() {
913
+ advancedOptionsPanel.classList.toggle('hidden', !this.checked);
914
+ });
915
+
916
+ instrumentalAdvancedOptionsCheckbox.addEventListener('change', function() {
917
+ instrumentalAdvancedOptionsPanel.classList.toggle('hidden', !this.checked);
918
+ });
919
+
920
+ lyricsAdvancedOptionsCheckbox.addEventListener('change', function() {
921
+ lyricsAdvancedOptionsPanel.classList.toggle('hidden', !this.checked);
922
+ });
923
+
924
+ videoAdvancedOptionsCheckbox.addEventListener('change', function() {
925
+ videoAdvancedOptionsPanel.classList.toggle('hidden', !this.checked);
926
+ });
927
+
928
+ // Range input updates
929
+ songTempo.addEventListener('input', function() {
930
+ tempoValue.textContent = this.value;
931
+ });
932
+
933
+ songDuration.addEventListener('input', function() {
934
+ durationValue.textContent = this.value;
935
+ });
936
+
937
+ instrumentalTempo.addEventListener('input', function() {
938
+ instrumentalTempoValue.textContent = this.value;
939
+ });
940
+
941
+ instrumentalDuration.addEventListener('input', function() {
942
+ instrumentalDurationValue.textContent = this.value;
943
+ });
944
+
945
+ // Generate buttons
946
+ generateSongBtn.addEventListener('click', generateSong);
947
+ generateInstrumentalBtn.addEventListener('click', generateInstrumental);
948
+ generateLyricsBtn.addEventListener('click', generateLyrics);
949
+ generateVideoBtn.addEventListener('click', generateVideo);
950
+
951
+ // Library refresh
952
+ refreshLibraryBtn.addEventListener('click', function() {
953
+ const activeFilter = document.querySelector('[data-filter].active').getAttribute('data-filter');
954
+ loadLibraryContent(activeFilter);
955
+ });
956
+
957
+ // Lyrics actions
958
+ copyLyricsBtn.addEventListener('click', copyLyrics);
959
+ useLyricsBtn.addEventListener('click', useLyricsForSong);
960
+
961
+ // Modal controls
962
+ accountBtn.addEventListener('click', () => accountModal.classList.remove('hidden'));
963
+ closeAccountModal.addEventListener('click', () => accountModal.classList.add('hidden'));
964
+
965
+ settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));
966
+ closeSettingsModal.addEventListener('click', () => settingsModal.classList.add('hidden'));
967
+
968
+ // API key controls
969
+ showApiKey.addEventListener('click', function() {
970
+ if (apiKeyField.type === 'password') {
971
+ apiKeyField.type = 'text';
972
+ this.textContent = 'Hide';
973
+ } else {
974
+ apiKeyField.type = 'password';
975
+ this.textContent = 'Show';
976
+ }
977
+ });
978
+
979
+ copyApiKey.addEventListener('click', function() {
980
+ apiKeyField.select();
981
+ document.execCommand('copy');
982
+
983
+ // Show copied feedback
984
+ const originalText = this.innerHTML;
985
+ this.innerHTML = '<i class="fas fa-check"></i> Copied!';
986
+ setTimeout(() => {
987
+ this.innerHTML = originalText;
988
+ }, 2000);
989
+ });
990
+
991
+ // Close modals when clicking outside
992
+ window.addEventListener('click', (e) => {
993
+ if (e.target === accountModal) {
994
+ accountModal.classList.add('hidden');
995
+ }
996
+ if (e.target === settingsModal) {
997
+ settingsModal.classList.add('hidden');
998
+ }
999
+ });
1000
+
1001
+ // Load library content
1002
+ function loadLibraryContent(filter) {
1003
+ // In a real app, this would fetch from API
1004
+ let content = mockSongs;
1005
+
1006
+ if (filter !== 'all') {
1007
+ content = content.filter(item => item.type === filter ||
1008
+ (filter === 'songs' && item.type === 'song') ||
1009
+ (filter === 'instrumentals' && item.type === 'instrumental') ||
1010
+ (filter === 'videos' && item.type === 'video'));
1011
+ }
1012
+
1013
+ if (content.length === 0) {
1014
+ libraryContent.innerHTML = `
1015
+ <div class="text-center py-8">
1016
+ <i class="fas fa-music text-4xl mb-4 opacity-50"></i>
1017
+ <p class="opacity-70">No ${filter} found in your library</p>
1018
+ </div>
1019
+ `;
1020
+ return;
1021
+ }
1022
+
1023
+ libraryContent.innerHTML = '';
1024
+
1025
+ content.forEach(item => {
1026
+ const card = document.createElement('div');
1027
+ card.className = 'song-card glass-effect p-4 rounded-xl';
1028
+
1029
+ let typeIcon = 'fa-music';
1030
+ if (item.type === 'instrumental') typeIcon = 'fa-headphones';
1031
+ if (item.type === 'video') typeIcon = 'fa-video';
1032
+
1033
+ card.innerHTML = `
1034
+ <div class="flex justify-between items-start mb-2">
1035
+ <div>
1036
+ <h3 class="font-medium">${item.title}</h3>
1037
+ <p class="text-sm opacity-70">${item.genre} • ${item.mood}${item.vocal !== 'None' ? ' • ' + item.vocal : ''}</p>
1038
+ </div>
1039
+ <div class="flex space-x-2">
1040
+ <button class="glass-effect p-2 rounded-full" data-id="${item.id}" data-type="${item.type}">
1041
+ <i class="fas fa-download"></i>
1042
+ </button>
1043
+ <button class="glass-effect p-2 rounded-full" data-id="${item.id}" data-type="${item.type}">
1044
+ <i class="fas fa-share-alt"></i>
1045
+ </button>
1046
+ </div>
1047
+ </div>
1048
+ <div class="flex items-center justify-between text-sm opacity-70 mb-2">
1049
+ <span><i class="fas ${typeIcon} mr-1"></i> ${item.type.charAt(0).toUpperCase() + item.type.slice(1)}</span>
1050
+ <span>${item.date}</span>
1051
+ </div>
1052
+ <div class="audio-player flex items-center px-3">
1053
+ <button class="mr-3">
1054
+ <i class="fas fa-play"></i>
1055
+ </button>
1056
+ <div class="flex-1">
1057
+ <input type="range" class="w-full" value="0">
1058
+ </div>
1059
+ <span class="ml-3 text-xs">${item.duration}</span>
1060
+ </div>
1061
+ `;
1062
+
1063
+ // Add play button functionality
1064
+ const playBtn = card.querySelector('.audio-player button');
1065
+ playBtn.addEventListener('click', function() {
1066
+ const icon = this.querySelector('i');
1067
+ if(icon.classList.contains('fa-play')) {
1068
+ icon.classList.remove('fa-play');
1069
+ icon.classList.add('fa-pause');
1070
+ // In a real app, would play the audio here
1071
+ } else {
1072
+ icon.classList.remove('fa-pause');
1073
+ icon.classList.add('fa-play');
1074
+ // In a real app, would pause the audio here
1075
+ }
1076
+ });
1077
+
1078
+ libraryContent.appendChild(card);
1079
+ });
1080
+ }
1081
+
1082
+ // Populate video song select
1083
+ function populateVideoSongSelect() {
1084
+ // In a real app, this would fetch from API
1085
+ const songs = mockSongs.filter(item => item.type === 'song');
1086
+
1087
+ videoSongSelect.innerHTML = '<option value="">Select a generated song...</option>';
1088
+
1089
+ songs.forEach(song => {
1090
+ const option = document.createElement('option');
1091
+ option.value = song.id;
1092
+ option.textContent = song.title;
1093
+ videoSongSelect.appendChild(option);
1094
+ });
1095
+ }
1096
+
1097
+ // Generate song
1098
+ async function generateSong() {
1099
+ // Validate inputs
1100
+ if(!songLyrics.value.trim()) {
1101
+ alert('Please enter lyrics for your song');
1102
+ return;
1103
+ }
1104
+
1105
+ // Show loading state on button
1106
+ const originalBtnContent = generateSongBtn.innerHTML;
1107
+ generateSongBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...';
1108
+ generateSongBtn.disabled = true;
1109
+
1110
+ // Show progress
1111
+ generationProgress.classList.remove('hidden');
1112
+
1113
+ // Prepare request data
1114
+ const requestData = {
1115
+ lyrics: songLyrics.value,
1116
+ title: songTitle.value || 'Untitled Song',
1117
+ model: songModel.value,
1118
+ prompt: `${songGenre.value}, ${songMood.value}, ${songVocal.value} vocal`
1119
+ };
1120
+
1121
+ // Add advanced options if enabled
1122
+ if(advancedOptionsCheckbox.checked) {
1123
+ requestData.tempo = songTempo.value;
1124
+ requestData.duration = songDuration.value;
1125
+ requestData.reference = songReference.value;
1126
+ requestData.additional_description = songDescription.value;
1127
+ }
1128
+
1129
+ // Simulate API call with progress updates
1130
+ await simulateApiCall(requestData, 'song');
1131
+
1132
+ // Restore button state
1133
+ generateSongBtn.innerHTML = originalBtnContent;
1134
+ generateSongBtn.disabled = false;
1135
+ }
1136
+
1137
+ // Generate instrumental
1138
+ async function generateInstrumental() {
1139
+ // Show loading state on button
1140
+ const originalBtnContent = generateInstrumentalBtn.innerHTML;
1141
+ generateInstrumentalBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...';
1142
+ generateInstrumentalBtn.disabled = true;
1143
+
1144
+ // Show progress
1145
+ generationProgress.classList.remove('hidden');
1146
+
1147
+ // Prepare request data
1148
+ const requestData = {
1149
+ title: instrumentalTitle.value || 'Untitled Instrumental',
1150
+ model: instrumentalModel.value,
1151
+ prompt: `${instrumentalGenre.value}, ${instrumentalMood.value}, ${instrumentalInstruments.value}`
1152
+ };
1153
+
1154
+ // Add advanced options if enabled
1155
+ if(instrumentalAdvancedOptionsCheckbox.checked) {
1156
+ requestData.tempo = instrumentalTempo.value;
1157
+ requestData.duration = instrumentalDuration.value;
1158
+ requestData.reference = instrumentalReference.value;
1159
+ requestData.additional_description = instrumentalDescription.value;
1160
+ }
1161
+
1162
+ // Simulate API call with progress updates
1163
+ await simulateApiCall(requestData, 'instrumental');
1164
+
1165
+ // Restore button state
1166
+ generateInstrumentalBtn.innerHTML = originalBtnContent;
1167
+ generateInstrumentalBtn.disabled = false;
1168
+ }
1169
+
1170
+ // Generate lyrics
1171
+ async function generateLyrics() {
1172
+ // Validate inputs
1173
+ if(!lyricsTheme.value.trim()) {
1174
+ alert('Please enter a theme or subject for the lyrics');
1175
+ return;
1176
+ }
1177
+
1178
+ // Show loading state on button
1179
+ const originalBtnContent = generateLyricsBtn.innerHTML;
1180
+ generateLyricsBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...';
1181
+ generateLyricsBtn.disabled = true;
1182
+
1183
+ // Show progress
1184
+ generationProgress.classList.remove('hidden');
1185
+
1186
+ // Prepare request data
1187
+ const requestData = {
1188
+ theme: lyricsTheme.value,
1189
+ title: lyricsTitle.value || 'Untitled Lyrics',
1190
+ genre: lyricsGenre.value,
1191
+ mood: lyricsMood.value,
1192
+ style: lyricsStyle.value,
1193
+ length: lyricsLength.value
1194
+ };
1195
+
1196
+ // Add advanced options if enabled
1197
+ if(lyricsAdvancedOptionsCheckbox.checked) {
1198
+ requestData.reference = lyricsReference.value;
1199
+ requestData.instructions = lyricsInstructions.value;
1200
+ }
1201
+
1202
+ // Simulate API call with progress updates
1203
+ await simulateApiCall(requestData, 'lyrics');
1204
+
1205
+ // Restore button state
1206
+ generateLyricsBtn.innerHTML = originalBtnContent;
1207
+ generateLyricsBtn.disabled = false;
1208
+ }
1209
+
1210
+ // Generate video
1211
+ async function generateVideo() {
1212
+ // Validate inputs
1213
+ if(!videoSongSelect.value) {
1214
+ alert('Please select a song to create a video for');
1215
+ return;
1216
+ }
1217
+
1218
+ // Show loading state on button
1219
+ const originalBtnContent = generateVideoBtn.innerHTML;
1220
+ generateVideoBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...';
1221
+ generateVideoBtn.disabled = true;
1222
+
1223
+ // Show progress
1224
+ generationProgress.classList.remove('hidden');
1225
+
1226
+ // Prepare request data
1227
+ const selectedSong = mockSongs.find(song => song.id === videoSongSelect.value);
1228
+ const requestData = {
1229
+ song_id: videoSongSelect.value,
1230
+ song_title: selectedSong.title,
1231
+ style: videoStyle.value,
1232
+ theme: videoTheme.value,
1233
+ color_palette: videoColors.value,
1234
+ length: videoLength.value
1235
+ };
1236
+
1237
+ // Add advanced options if enabled
1238
+ if(videoAdvancedOptionsCheckbox.checked) {
1239
+ requestData.references = videoReferences.value;
1240
+ requestData.instructions = videoInstructions.value;
1241
+ }
1242
+
1243
+ // Simulate API call with progress updates
1244
+ await simulateApiCall(requestData, 'video');
1245
+
1246
+ // Restore button state
1247
+ generateVideoBtn.innerHTML = originalBtnContent;
1248
+ generateVideoBtn.disabled = false;
1249
+ }
1250
+
1251
+ // Simulate API call with progress updates
1252
+ function simulateApiCall(requestData, type) {
1253
+ return new Promise((resolve) => {
1254
+ let progress = 0;
1255
+ const interval = setInterval(() => {
1256
+ progress += Math.random() * 10;
1257
+ if(progress > 100) progress = 100;
1258
+
1259
+ progressFill.style.width = `${progress}%`;
1260
+ progressPercent.textContent = `${Math.floor(progress)}%`;
1261
+
1262
+ // Update status messages based on type
1263
+ if(type === 'song') {
1264
+ if(progress < 20) {
1265
+ statusMessage.textContent = 'Preparing generation...';
1266
+ } else if(progress < 50) {
1267
+ statusMessage.textContent = 'Generating melody...';
1268
+ } else if(progress < 80) {
1269
+ statusMessage.textContent = 'Adding vocals...';
1270
+ } else {
1271
+ statusMessage.textContent = 'Finalizing your song...';
1272
+ }
1273
+ }
1274
+ else if(type === 'instrumental') {
1275
+ if(progress < 20) {
1276
+ statusMessage.textContent = 'Preparing generation...';
1277
+ } else if(progress < 60) {
1278
+ statusMessage.textContent = 'Composing instrumental...';
1279
+ } else {
1280
+ statusMessage.textContent = 'Finalizing your track...';
1281
+ }
1282
+ }
1283
+ else if(type === 'lyrics') {
1284
+ if(progress < 30) {
1285
+ statusMessage.textContent = 'Brainstorming ideas...';
1286
+ } else if(progress < 70) {
1287
+ statusMessage.textContent = 'Writing lyrics...';
1288
+ } else {
1289
+ statusMessage.textContent = 'Refining your lyrics...';
1290
+ }
1291
+ }
1292
+ else if(type === 'video') {
1293
+ if(progress < 20) {
1294
+ statusMessage.textContent = 'Analyzing song...';
1295
+ } else if(progress < 50) {
1296
+ statusMessage.textContent = 'Generating visuals...';
1297
+ } else if(progress < 80) {
1298
+ statusMessage.textContent = 'Editing video...';
1299
+ } else {
1300
+ statusMessage.textContent = 'Rendering final video...';
1301
+ }
1302
+ }
1303
+
1304
+ // When complete
1305
+ if(progress >= 100) {
1306
+ clearInterval(interval);
1307
+ statusMessage.textContent = 'Generation complete!';
1308
+
1309
+ // Add the new content to the library after a short delay
1310
+ setTimeout(() => {
1311
+ if(type === 'lyrics') {
1312
+ showGeneratedLyrics(requestData);
1313
+ } else {
1314
+ addGeneratedContent(requestData, type);
1315
+ }
1316
+
1317
+ generationProgress.classList.add('hidden');
1318
+ progressFill.style.width = '0%';
1319
+ resolve();
1320
+ }, 1000);
1321
+ }
1322
+ }, 500);
1323
+ });
1324
+ }
1325
+
1326
+ // Show generated lyrics
1327
+ function showGeneratedLyrics(requestData) {
1328
+ // Mock generated lyrics
1329
+ const mockLyrics = `[Verse 1]
1330
+ ${requestData.theme || 'Walking through the city lights'}
1331
+ ${requestData.theme || 'Memories of you keep me up at night'}
1332
+ ${requestData.theme || 'Every corner holds a piece of you'}
1333
+ ${requestData.theme || 'Every shadow makes me think it's true'}
1334
+
1335
+ [Chorus]
1336
+ ${requestData.theme || 'I'm lost without you, can't you see'}
1337
+ ${requestData.theme || 'You're the only one who completes me'}
1338
+ ${requestData.theme || 'Come back home, don't make me plead'}
1339
+ ${requestData.theme || 'You're the air that I need to breathe'}
1340
+
1341
+ [Verse 2]
1342
+ ${requestData.theme || 'Empty rooms and silent phones'}
1343
+ ${requestData.theme || 'Wondering if you're all alone'}
1344
+ ${requestData.theme || 'Time moves slow when you're not here'}
1345
+ ${requestData.theme || 'Wish I could make it all disappear'}
1346
+
1347
+ [Chorus]
1348
+ ${requestData.theme || 'I'm lost without you, can't you see'}
1349
+ ${requestData.theme || 'You're the only one who completes me'}
1350
+ ${requestData.theme || 'Come back home, don't make me plead'}
1351
+ ${requestData.theme || 'You're the air that I need to breathe'}`;
1352
+
1353
+ generatedLyrics.textContent = mockLyrics;
1354
+ generatedLyricsContainer.classList.remove('hidden');
1355
+ }
1356
+
1357
+ // Copy lyrics to clipboard
1358
+ function copyLyrics() {
1359
+ navigator.clipboard.writeText(generatedLyrics.textContent)
1360
+ .then(() => {
1361
+ const originalText = copyLyricsBtn.innerHTML;
1362
+ copyLyricsBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
1363
+ setTimeout(() => {
1364
+ copyLyricsBtn.innerHTML = originalText;
1365
+ }, 2000);
1366
+ })
1367
+ .catch(err => {
1368
+ console.error('Failed to copy lyrics: ', err);
1369
+ });
1370
+ }
1371
+
1372
+ // Use lyrics for song
1373
+ function useLyricsForSong() {
1374
+ songLyrics.value = generatedLyrics.textContent;
1375
+ if(lyricsTitle.value) {
1376
+ songTitle.value = lyricsTitle.value;
1377
+ }
1378
+
1379
+ // Switch to song tab
1380
+ document.querySelector('[data-tab="song"]').click();
1381
+ generatedLyricsContainer.classList.add('hidden');
1382
+ }
1383
+
1384
+ // Add generated content to library
1385
+ function addGeneratedContent(requestData, type) {
1386
+ // In a real app, this would be the actual API response
1387
+ const newContent = {
1388
+ id: `new-${type}-${Date.now()}`,
1389
+ title: requestData.title || `New ${type.charAt(0).toUpperCase() + type.slice(1)}`,
1390
+ type: type,
1391
+ genre: requestData.prompt ? requestData.prompt.split(',')[0] : 'Various',
1392
+ mood: requestData.prompt ? requestData.prompt.split(',')[1] : 'Various',
1393
+ vocal: type === 'song' ? (requestData.prompt ? requestData.prompt.split(',')[2] : 'Unknown') : 'None',
1394
+ duration: requestData.duration ? `${Math.floor(requestData.duration / 60)}:${(requestData.duration % 60).toString().padStart(2, '0')}` : '2:30',
1395
+ date: new Date().toISOString().split('T')[0],
1396
+ cover: 'https://via.placeholder.com/150',
1397
+ audio: type !== 'video' ? 'https://example.com/new-audio.mp3' : undefined,
1398
+ video: type === 'video' ? 'https://example.com/new-video.mp4' : undefined
1399
+ };
1400
+
1401
+ // Add to mock data
1402
+ mockSongs.unshift(newContent);
1403
+
1404
+ // Reload library
1405
+ const activeFilter = document.querySelector('[data-filter].active').getAttribute('data-filter');
1406
+ loadLibraryContent(activeFilter);
1407
+
1408
+ // Update video song select if a new song was added
1409
+ if(type === 'song') {
1410
+ populateVideoSongSelect();
1411
+ }
1412
+
1413
+ // Show success message
1414
+ alert(`${type.charAt(0).toUpperCase() + type.slice(1)} generated successfully!`);
1415
+ }
1416
+
1417
+ // In a real implementation, you would have actual API calls like this:
1418
+ /*
1419
+ async function callMurekaApi(endpoint, data) {
1420
+ try {
1421
+ const response = await fetch(`https://api.mureka.ai/v1/${endpoint}`, {
1422
+ method: 'POST',
1423
+ headers: {
1424
+ 'Authorization': `Bearer ${MUREKA_API_KEY}`,
1425
+ 'Content-Type': 'application/json'
1426
+ },
1427
+ body: JSON.stringify(data)
1428
+ });
1429
+
1430
+ if(!response.ok) {
1431
+ throw new Error(`API request failed with status ${response.status}`);
1432
+ }
1433
+
1434
+ return await response.json();
1435
+ } catch (error) {
1436
+ console.error('Error calling Mureka API:', error);
1437
+ throw error;
1438
+ }
1439
+ }
1440
+ */
1441
+
1442
+ // Initialize the app
1443
+ initApp();
1444
+ </script>
1445
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=FGF897/mureka" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1446
+ </html>