Hugging Face's logo

Spaces:
Moonie805
/
anycoder-95f2bff2
Running

App Files Community
Moonie805 commited on
Commit
a9376cb
·
verified ·
1 Parent(s): f8a7a59

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +491 -1582
index.html CHANGED
@@ -1,1587 +1,496 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
-
4
  <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Song Title Generator</title>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <style>
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- }
15
-
16
- :root {
17
- --primary-color: #6366f1;
18
- --secondary-color: #8b5cf6;
19
- --accent-color: #ec4899;
20
- --dark-color: #1e293b;
21
- --light-color: #f8fafc;
22
- --text-color: #334155;
23
- --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
24
- --card-bg: rgba(255, 255, 255, 0.95);
25
- --glass-bg: rgba(255, 255, 255, 0.1);
26
- --glass-border: rgba(255, 255, 255, 0.2);
27
- }
28
-
29
- body {
30
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
31
- background: var(--gradient);
32
- min-height: 100vh;
33
- color: var(--text-color);
34
- line-height: 1.6;
35
- overflow-x: hidden;
36
- position: relative;
37
- }
38
-
39
- body::before {
40
- content: '';
41
- position: fixed;
42
- top: 0;
43
- left: 0;
44
- width: 100%;
45
- height: 100%;
46
- background:
47
- radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
48
- radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
49
- radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
50
- pointer-events: none;
51
- z-index: 1;
52
- }
53
-
54
- .container {
55
- max-width: 1200px;
56
- margin: 0 auto;
57
- padding: 20px;
58
- position: relative;
59
- z-index: 2;
60
- }
61
-
62
- header {
63
- padding: 30px 0;
64
- text-align: center;
65
- position: relative;
66
- }
67
-
68
- .logo {
69
- font-size: 3rem;
70
- font-weight: bold;
71
- background: var(--gradient);
72
- -webkit-background-clip: text;
73
- -webkit-text-fill-color: transparent;
74
- margin-bottom: 15px;
75
- animation: pulse 3s infinite;
76
- text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
77
- }
78
-
79
- .anycoder-link {
80
- color: white;
81
- text-decoration: none;
82
- font-size: 1.1rem;
83
- padding: 10px 20px;
84
- border-radius: 30px;
85
- background: var(--glass-bg);
86
- backdrop-filter: blur(10px);
87
- border: 1px solid var(--glass-border);
88
- transition: all 0.3s ease;
89
- display: inline-flex;
90
- align-items: center;
91
- gap: 8px;
92
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
93
- }
94
-
95
- .anycoder-link:hover {
96
- background: rgba(255, 255, 255, 0.25);
97
- transform: translateY(-3px);
98
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
99
- }
100
-
101
- main {
102
- display: flex;
103
- flex-direction: column;
104
- align-items: center;
105
- padding: 40px 0;
106
- gap: 40px;
107
- }
108
-
109
- .generator-card {
110
- background: var(--card-bg);
111
- backdrop-filter: blur(20px);
112
- border-radius: 30px;
113
- padding: 50px;
114
- width: 100%;
115
- max-width: 700px;
116
- box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
117
- transform: translateY(0);
118
- transition: all 0.4s ease;
119
- border: 1px solid rgba(255, 255, 255, 0.3);
120
- }
121
-
122
- .generator-card:hover {
123
- transform: translateY(-8px);
124
- box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2);
125
- }
126
-
127
- .genre-selector {
128
- display: flex;
129
- flex-wrap: wrap;
130
- gap: 12px;
131
- margin-bottom: 40px;
132
- justify-content: center;
133
- padding: 20px;
134
- background: var(--glass-bg);
135
- border-radius: 20px;
136
- backdrop-filter: blur(10px);
137
- }
138
-
139
- .genre-btn {
140
- padding: 12px 24px;
141
- border: none;
142
- border-radius: 25px;
143
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
144
- color: white;
145
- cursor: pointer;
146
- transition: all 0.3s ease;
147
- font-weight: 600;
148
- font-size: 1rem;
149
- position: relative;
150
- overflow: hidden;
151
- border: 1px solid rgba(255, 255, 255, 0.3);
152
- }
153
-
154
- .genre-btn::before {
155
- content: '';
156
- position: absolute;
157
- top: 0;
158
- left: 0;
159
- width: 100%;
160
- height: 100%;
161
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
162
- opacity: 0;
163
- transition: opacity 0.3s ease;
164
- }
165
-
166
- .genre-btn:hover::before {
167
- opacity: 1;
168
- }
169
-
170
- .genre-btn span {
171
- position: relative;
172
- z-index: 1;
173
- }
174
-
175
- .genre-btn:hover {
176
- transform: scale(1.08);
177
- box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
178
- }
179
-
180
- .genre-btn.active {
181
- background: var(--gradient);
182
- transform: scale(1.1);
183
- box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
184
- }
185
-
186
- .title-display {
187
- text-align: center;
188
- margin: 30px 0;
189
- min-height: 150px;
190
- display: flex;
191
- flex-direction: column;
192
- justify-content: center;
193
- align-items: center;
194
- padding: 30px;
195
- background: var(--glass-bg);
196
- border-radius: 20px;
197
- backdrop-filter: blur(10px);
198
- border: 1px solid var(--glass-border);
199
- }
200
-
201
- .generated-title {
202
- font-size: 2.8rem;
203
- font-weight: 800;
204
- color: var(--dark-color);
205
- margin-bottom: 20px;
206
- word-wrap: break-word;
207
- transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
208
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
209
- line-height: 1.2;
210
- }
211
-
212
- .title-subtext {
213
- font-size: 1.2rem;
214
- color: #64748b;
215
- font-style: italic;
216
- opacity: 0.8;
217
- }
218
-
219
- .action-buttons {
220
- display: flex;
221
- gap: 20px;
222
- justify-content: center;
223
- margin-top: 30px;
224
- flex-wrap: wrap;
225
- }
226
-
227
- .btn {
228
- padding: 14px 36px;
229
- border: none;
230
- border-radius: 30px;
231
- cursor: pointer;
232
- font-weight: 700;
233
- transition: all 0.4s ease;
234
- display: inline-flex;
235
- align-items: center;
236
- gap: 10px;
237
- font-size: 1.1rem;
238
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
239
- position: relative;
240
- overflow: hidden;
241
- }
242
-
243
- .btn::after {
244
- content: '';
245
- position: absolute;
246
- top: 50%;
247
- left: 50%;
248
- width: 0;
249
- height: 0;
250
- border-radius: 50%;
251
- background: rgba(255, 255, 255, 0.3);
252
- transform: translate(-50%, -50%);
253
- transition: width 0.6s, height 0.6s;
254
- }
255
-
256
- .btn:active::after {
257
- width: 300px;
258
- height: 300px;
259
- }
260
-
261
- .generate-btn {
262
- background: var(--gradient);
263
- color: white;
264
- box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
265
- }
266
-
267
- .generate-btn:hover {
268
- transform: translateY(-4px);
269
- box-shadow: 0 15px 30px rgba(99, 102, 241, 0.4);
270
- }
271
-
272
- .copy-btn {
273
- background: #f1f5f9;
274
- color: var(--dark-color);
275
- border: 2px solid var(--primary-color);
276
- }
277
-
278
- .copy-btn:hover {
279
- background: #e2e8f0;
280
- transform: translateY(-4px);
281
- box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
282
- }
283
-
284
- .history-section {
285
- width: 100%;
286
- max-width: 700px;
287
- }
288
-
289
- .history-title {
290
- font-size: 1.8rem;
291
- margin-bottom: 25px;
292
- color: white;
293
- text-align: center;
294
- text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
295
- display: flex;
296
- align-items: center;
297
- justify-content: center;
298
- gap: 10px;
299
- }
300
-
301
- .history-list {
302
- background: var(--card-bg);
303
- backdrop-filter: blur(20px);
304
- border-radius: 25px;
305
- padding: 25px;
306
- max-height: 400px;
307
- overflow-y: auto;
308
- border: 1px solid rgba(255, 255, 255, 0.3);
309
- }
310
-
311
- .history-item {
312
- padding: 18px;
313
- margin-bottom: 15px;
314
- background: linear-gradient(135deg, #f8fafc, #e2e8f0);
315
- border-radius: 15px;
316
- display: flex;
317
- justify-content: space-between;
318
- align-items: center;
319
- transition: all 0.3s ease;
320
- border: 1px solid rgba(0, 0, 0, 0.05);
321
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
322
- }
323
-
324
- .history-item:hover {
325
- transform: translateX(8px);
326
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
327
- background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
328
- }
329
-
330
- .history-title-text {
331
- font-weight: 700;
332
- color: var(--dark-color);
333
- font-size: 1.1rem;
334
- flex: 1;
335
- }
336
-
337
- .history-genre {
338
- font-size: 0.95rem;
339
- color: #64748b;
340
- background: rgba(99, 102, 241, 0.1);
341
- padding: 6px 16px;
342
- border-radius: 20px;
343
- font-weight: 600;
344
- display: inline-flex;
345
- align-items: center;
346
- gap: 6px;
347
- }
348
-
349
- .copy-history-btn {
350
- background: transparent;
351
- color: var(--primary-color);
352
- border: 2px solid var(--primary-color);
353
- padding: 8px 16px;
354
- border-radius: 20px;
355
- transition: all 0.3s ease;
356
- }
357
-
358
- .copy-history-btn:hover {
359
- background: var(--primary-color);
360
- color: white;
361
- transform: scale(1.05);
362
- }
363
-
364
- .empty-history {
365
- text-align: center;
366
- padding: 60px 20px;
367
- color: #94a3b8;
368
- font-style: italic;
369
- display: flex;
370
- flex-direction: column;
371
- align-items: center;
372
- gap: 20px;
373
- }
374
-
375
- .empty-history i {
376
- font-size: 4rem;
377
- opacity: 0.5;
378
- }
379
-
380
- .toast {
381
- position: fixed;
382
- bottom: 40px;
383
- right: 40px;
384
- background: var(--dark-color);
385
- color: white;
386
- padding: 18px 30px;
387
- border-radius: 15px;
388
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
389
- transform: translateY(100px);
390
- opacity: 0;
391
- transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
392
- z-index: 1000;
393
- display: flex;
394
- align-items: center;
395
- gap: 12px;
396
- font-weight: 600;
397
- }
398
-
399
- .toast.show {
400
- transform: translateY(0);
401
- opacity: 1;
402
- }
403
-
404
- .toast i {
405
- font-size: 1.2rem;
406
- }
407
-
408
- @keyframes pulse {
409
- 0%, 100% {
410
- transform: scale(1);
411
- }
412
- 50% {
413
- transform: scale(1.05);
414
- }
415
- }
416
-
417
- @keyframes fadeIn {
418
- from {
419
- opacity: 0;
420
- transform: translateY(20px);
421
- }
422
- to {
423
- opacity: 1;
424
- transform: translateY(0);
425
- }
426
- }
427
-
428
- @keyframes slideIn {
429
- from {
430
- opacity: 0;
431
- transform: translateX(-20px);
432
- }
433
- to {
434
- opacity: 1;
435
- transform: translateX(0);
436
- }
437
- }
438
-
439
- @media (max-width: 768px) {
440
- .generator-card {
441
- padding: 35px 25px;
442
- }
443
-
444
- .generated-title {
445
- font-size: 2.2rem;
446
- }
447
-
448
- .action-buttons {
449
- flex-direction: column;
450
- }
451
-
452
- .btn {
453
- width: 100%;
454
- justify-content: center;
455
- }
456
-
457
- .genre-selector {
458
- padding: 15px;
459
- }
460
-
461
- .genre-btn {
462
- padding: 10px 20px;
463
- font-size: 0.95rem;
464
- }
465
- }
466
-
467
- @media (max-width: 480px) {
468
- .logo {
469
- font-size: 2.2rem;
470
- }
471
-
472
- .generated-title {
473
- font-size: 1.8rem;
474
- }
475
-
476
- .genre-selector {
477
- flex-direction: column;
478
- align-items: center;
479
- }
480
-
481
- .genre-btn {
482
- width: 90%;
483
- max-width: 300px;
484
- }
485
-
486
- .toast {
487
- bottom: 20px;
488
- right: 20px;
489
- left: 20px;
490
- padding: 15px 20px;
491
- }
492
- }
493
-
494
- /* Custom scrollbar */
495
- .history-list::-webkit-scrollbar {
496
- width: 8px;
497
- }
498
-
499
- .history-list::-webkit-scrollbar-track {
500
- background: rgba(0, 0, 0, 0.05);
501
- border-radius: 10px;
502
- }
503
-
504
- .history-list::-webkit-scrollbar-thumb {
505
- background: var(--primary-color);
506
- border-radius: 10px;
507
- }
508
-
509
- .history-list::-webkit-scrollbar-thumb:hover {
510
- background: var(--secondary-color);
511
- }
512
- </style>
513
  </head>
514
-
515
  <body>
516
- <div class="container">
517
- <header>
518
- <h1 class="logo">Song Title Generator</h1>
519
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
520
- <i class="fas fa-code"></i>
521
- Built with anycoder
522
- </a>
523
- </header>
524
-
525
- <main>
526
- <div class="generator-card">
527
- <div class="genre-selector">
528
- <button class="genre-btn active" data-genre="all">
529
- <span>🎵 All Genres</span>
530
- </button>
531
- <button class="genre-btn" data-genre="pop">
532
- <span>🎤 Pop</span>
533
- </button>
534
- <button class="genre-btn" data-genre="rock">
535
- <span>🎸 Rock</span>
536
- </button>
537
- <button class="genre-btn" data-genre="hiphop">
538
- <span>🎤 Hip-Hop</span>
539
- </button>
540
- <button class="genre-btn" data-genre="rnb">
541
- <span>🎶 R&B</span>
542
- </button>
543
- <button class="genre-btn" data-genre="electronic">
544
- <span>🎧 Electronic</span>
545
- </button>
546
- <button class="genre-btn" data-genre="country">
547
- <span>🤠 Country</span>
548
- </button>
549
- </div>
550
-
551
- <div class="title-display">
552
- <h2 class="generated-title" id="generatedTitle">Click Generate to Create a Song Title</h2>
553
- <p class="title-subtext" id="titleSubtext">Your next hit awaits</p>
554
- </div>
555
-
556
- <div class="action-buttons">
557
- <button class="btn generate-btn" id="generateBtn">
558
- <i class="fas fa-magic"></i>
559
- Generate
560
- </button>
561
- <button class="btn copy-btn" id="copyBtn">
562
- <i class="fas fa-copy"></i>
563
- Copy
564
- </button>
565
- </div>
566
- </div>
567
-
568
- <div class="history-section">
569
- <h3 class="history-title">
570
- <i class="fas fa-history"></i>
571
- Generated Titles History
572
- </h3>
573
- <div class="history-list" id="historyList">
574
- <div class="empty-history">
575
- <i class="fas fa-music"></i>
576
- <p>No titles generated yet. Start creating!</p>
577
- </div>
578
- </div>
579
- </div>
580
- </main>
581
- </div>
582
-
583
- <div class="toast" id="toast">
584
- <i class="fas fa-check"></i>
585
- Copied to clipboard!
586
- </div>
587
-
588
- <script>
589
- const songTitleTemplates = {
590
- all: [
591
- "Midnight Dreams",
592
- "Electric Heart",
593
- "Summer Breeze",
594
- "Neon Lights",
595
- "Golden Hour",
596
- "Starry Night",
597
- "Ocean Waves",
598
- "City Lights",
599
- "Broken Dreams",
600
- "Love Again",
601
- "Dancing Shadows",
602
- "Silent Whispers",
603
- "Fire & Ice",
604
- "Rainy Days",
605
- "Sunset Boulevard",
606
- "Moonlight Serenade",
607
- "Urban Jungle",
608
- "Crystal Tears",
609
- "Velvet Sky",
610
- "Golden Memories",
611
- "Midnight Express",
612
- "Echoes of Tomorrow",
613
- "Whispers in the Dark",
614
- "Painted Skies",
615
- "Lost in Translation",
616
- "Second Chance",
617
- "Electric Dreams",
618
- "Midnight Chronicles",
619
- "Fading Memories",
620
- "Urban Legends",
621
- "Digital Love",
622
- "Soul Connection",
623
- "Blue Moon Rising",
624
- "Heartbeat Echo",
625
- "Neon Dreamscape",
626
- "Golden Afternoon",
627
- "Starry Dreams",
628
- "Ocean's Whisper",
629
- "City of Stars",
630
- "Broken Promises",
631
- "Love Revolution",
632
- "Dancing in the Rain",
633
- "Silent Symphony",
634
- "Fireworks",
635
- "Rainy Soul",
636
- "Sunset Dreams",
637
- "Moonlight Dreams",
638
- "Urban Rhythm",
639
- "Crystal Heart",
640
- "Velvet Dreams",
641
- "Golden Sunset",
642
- "Midnight Journey",
643
- "Echoes of Time",
644
- "Whispers of the Wind",
645
- "Painted Memories",
646
- "Lost in Space",
647
- "Second Chance Love",
648
- "Electric Pulse",
649
- "Midnight Tales",
650
- "Fading Light",
651
- "Urban Poetry",
652
- "Digital Dreams",
653
- "Soulful Nights",
654
- "Blue Moon Dreams",
655
- "Heartbeat Dreams",
656
- "Neon Nights",
657
- "Golden Dreams",
658
- "Starry Dreams",
659
- "Ocean Dreams",
660
- "City Dreams",
661
- "Broken Dreams",
662
- "Love Dreams",
663
- "Dancing Dreams",
664
- "Silent Dreams",
665
- "Fire Dreams",
666
- "Rainy Dreams",
667
- "Sunset Dreams",
668
- "Moonlight Dreams",
669
- "Urban Dreams",
670
- "Crystal Dreams",
671
- "Velvet Dreams",
672
- "Golden Dreams",
673
- "Midnight Dreams"
674
- ],
675
- pop: [
676
- "Dancing Queen",
677
- "Summer Love",
678
- "Heartbeat",
679
- "Electric Feel",
680
- "Pop Star Dreams",
681
- "Dance Floor",
682
- "Love Story",
683
- "Party Time",
684
- "Neon Dreams",
685
- "Golden Hour",
686
- "Sunset Boulevard",
687
- "City Lights",
688
- "Midnight Dreams",
689
- "Electric Heart",
690
- "Summer Breeze",
691
- "Neon Lights",
692
- "Golden Hour",
693
- "Starry Night",
694
- "Ocean Waves",
695
- "City Lights",
696
- "Broken Dreams",
697
- "Love Again",
698
- "Dancing Shadows",
699
- "Silent Whispers",
700
- "Fire & Ice",
701
- "Rainy Days",
702
- "Sunset Boulevard",
703
- "Moonlight Serenade",
704
- "Urban Jungle",
705
- "Crystal Tears",
706
- "Velvet Sky",
707
- "Golden Memories",
708
- "Midnight Express",
709
- "Echoes of Tomorrow",
710
- "Whispers in the Dark",
711
- "Painted Skies",
712
- "Lost in Translation",
713
- "Second Chance",
714
- "Electric Dreams",
715
- "Midnight Chronicles",
716
- "Fading Memories",
717
- "Urban Legends",
718
- "Digital Love",
719
- "Soul Connection",
720
- "Blue Moon Rising",
721
- "Heartbeat Echo",
722
- "Neon Dreamscape",
723
- "Golden Afternoon",
724
- "Starry Dreams",
725
- "Ocean's Whisper",
726
- "City of Stars",
727
- "Broken Promises",
728
- "Love Revolution",
729
- "Dancing in the Rain",
730
- "Silent Symphony",
731
- "Fireworks",
732
- "Rainy Soul",
733
- "Sunset Dreams",
734
- "Moonlight Dreams",
735
- "Urban Rhythm",
736
- "Crystal Heart",
737
- "Velvet Dreams",
738
- "Golden Sunset",
739
- "Midnight Journey",
740
- "Echoes of Time",
741
- "Whispers of the Wind",
742
- "Painted Memories",
743
- "Lost in Space",
744
- "Second Chance Love",
745
- "Electric Pulse",
746
- "Midnight Tales",
747
- "Fading Light",
748
- "Urban Poetry",
749
- "Digital Dreams",
750
- "Soulful Nights",
751
- "Blue Moon Dreams",
752
- "Heartbeat Dreams",
753
- "Neon Nights",
754
- "Golden Dreams",
755
- "Starry Dreams",
756
- "Ocean Dreams",
757
- "City Dreams",
758
- "Broken Dreams",
759
- "Love Dreams",
760
- "Dancing Dreams",
761
- "Silent Dreams",
762
- "Fire Dreams",
763
- "Rainy Dreams",
764
- "Sunset Dreams",
765
- "Moonlight Dreams",
766
- "Urban Dreams",
767
- "Crystal Dreams",
768
- "Velvet Dreams",
769
- "Golden Dreams",
770
- "Midnight Dreams"
771
- ],
772
- rock: [
773
- "Rock & Roll",
774
- "Thunderstruck",
775
- "Electric Storm",
776
- "Midnight Rider",
777
- "Highway to Hell",
778
- "Rock Star",
779
- "Guitar Hero",
780
- "Rock Revolution",
781
- "Thunder Road",
782
- "Electric Soul",
783
- "Midnight Express",
784
- "Rock Nation",
785
- "Guitar Dreams",
786
- "Rock & Roll Heaven",
787
- "Thunder Strike",
788
- "Electric Thunder",
789
- "Midnight Rock",
790
- "Highway Dreams",
791
- "Hell's Kitchen",
792
- "Rock Star Life",
793
- "Electric Rock",
794
- "Midnight Thunder",
795
- "Rock Rebellion",
796
- "Electric Lightning",
797
- "Highway Thunder",
798
- "Rock & Roll Revolution",
799
- "Thunder Dreams",
800
- "Electric Rocker",
801
- "Midnight Highway",
802
- "Rock Star Dreams",
803
- "Thunder Storm",
804
- "Electric Thunder",
805
- "Highway to Heaven",
806
- "Rock Nation",
807
- "Guitar Thunder",
808
- "Rock & Roll Dreams",
809
- "Thunder Strike",
810
- "Electric Rock",
811
- "Midnight Rider",
812
- "Highway Dreams",
813
- "Hell's Kitchen",
814
- "Rock Star Life",
815
- "Electric Rock",
816
- "Midnight Thunder",
817
- "Rock Rebellion",
818
- "Electric Lightning",
819
- "Highway Thunder",
820
- "Rock & Roll Revolution",
821
- "Thunder Dreams",
822
- "Electric Rocker",
823
- "Midnight Highway",
824
- "Rock Star Dreams",
825
- "Thunder Storm",
826
- "Electric Thunder",
827
- "Highway to Heaven",
828
- "Rock Nation",
829
- "Guitar Thunder",
830
- "Rock & Roll Dreams",
831
- "Thunder Strike",
832
- "Electric Rock",
833
- "Midnight Rider",
834
- "Highway Dreams",
835
- "Hell's Kitchen",
836
- "Rock Star Life",
837
- "Electric Rock",
838
- "Midnight Thunder",
839
- "Rock Rebellion",
840
- "Electric Lightning",
841
- "Highway Thunder",
842
- "Rock & Roll Revolution",
843
- "Thunder Dreams",
844
- "Electric Rocker",
845
- "Midnight Highway",
846
- "Rock Star Dreams",
847
- "Thunder Storm",
848
- "Electric Thunder",
849
- "Highway to Heaven",
850
- "Rock Nation",
851
- "Guitar Thunder",
852
- "Rock & Roll Dreams",
853
- "Thunder Strike",
854
- "Electric Rock"
855
- ],
856
- hiphop: [
857
- "Street Dreams",
858
- "Urban Legends",
859
- "Mic Drop",
860
- "Rap Battle",
861
- "Flow Master",
862
- "Beat Drop",
863
- "Street Life",
864
- "Urban Poetry",
865
- "Mic Check",
866
- "Rap Revolution",
867
- "Flow State",
868
- "Beat King",
869
- "Street Dreams",
870
- "Urban Legends",
871
- "Mic Drop",
872
- "Rap Battle",
873
- "Flow Master",
874
- "Beat Drop",
875
- "Street Life",
876
- "Urban Poetry",
877
- "Mic Check",
878
- "Street Dreams",
879
- "Urban Legends",
880
- "Mic Drop",
881
- "Rap Battle",
882
- "Flow Master",
883
- "Beat Drop",
884
- "Street Life",
885
- "Urban Poetry",
886
- "Mic Check",
887
- "Street Dreams",
888
- "Urban Legends",
889
- "Mic Drop",
890
- "Rap Battle",
891
- "Flow Master",
892
- "Beat Drop",
893
- "Street Life",
894
- "Urban Poetry",
895
- "Mic Check",
896
- "Street Dreams",
897
- "Urban Legends",
898
- "Mic Drop",
899
- "Rap Battle",
900
- "Flow Master",
901
- "Beat Drop",
902
- "Street Life",
903
- "Urban Poetry",
904
- "Mic Check",
905
- "Street Dreams",
906
- "Urban Legends",
907
- "Mic Drop",
908
- "Rap Battle",
909
- "Flow Master",
910
- "Beat Drop",
911
- "Street Life",
912
- "Urban Poetry",
913
- "Mic Check",
914
- "Street Dreams",
915
- "Urban Legends",
916
- "Mic Drop",
917
- "Rap Battle",
918
- "Flow Master",
919
- "Beat Drop",
920
- "Street Life",
921
- "Urban Poetry",
922
- "Mic Check",
923
- "Street Dreams",
924
- "Urban Legends",
925
- "Mic Drop",
926
- "Rap Battle",
927
- "Flow Master",
928
- "Beat Drop",
929
- "Street Life",
930
- "Urban Poetry",
931
- "Mic Check",
932
- "Street Dreams",
933
- "Urban Legends",
934
- "Mic Drop",
935
- "Rap Battle",
936
- "Flow Master",
937
- "Beat Drop",
938
- "Street Life",
939
- "Urban Poetry",
940
- "Mic Check",
941
- "Street Dreams",
942
- "Urban Legends",
943
- "Mic Drop",
944
- "Rap Battle",
945
- "Flow Master",
946
- "Beat Drop",
947
- "Street Life",
948
- "Urban Poetry",
949
- "Mic Check",
950
- "Street Dreams",
951
- "Urban Legends",
952
- "Mic Drop",
953
- "Rap Battle",
954
- "Flow Master",
955
- "Beat Drop",
956
- "Street Life",
957
- "Urban Poetry",
958
- "Mic Check",
959
- "Street Dreams",
960
- "Urban Legends",
961
- "Mic Drop",
962
- "Rap Battle",
963
- "Flow Master",
964
- "Beat Drop",
965
- "Street Life",
966
- "Urban Poetry",
967
- "Mic Check"
968
- ],
969
- rnb: [
970
- "Soulful Nights",
971
- "Rhythm & Blues",
972
- "Midnight Groove",
973
- "Soul Connection",
974
- "Blue Moon",
975
- "R&B Dreams",
976
- "Soulful Heart",
977
- "Midnight Serenade",
978
- "Rhythm of Love",
979
- "Soulful Memories",
980
- "Blue Velvet",
981
- "R&B Romance",
982
- "Soulful Nights",
983
- "Rhythm & Blues",
984
- "Midnight Groove",
985
- "Soul Connection",
986
- "Blue Moon",
987
- "R&B Dreams",
988
- "Soulful Heart",
989
- "Midnight Serenade",
990
- "Rhythm of Love",
991
- "Soulful Nights",
992
- "Rhythm & Blues",
993
- "Midnight Groove",
994
- "Soul Connection",
995
- "Blue Moon",
996
- "R&B Dreams",
997
- "Soulful Heart",
998
- "Midnight Serenade",
999
- "Rhythm of Love",
1000
- "Soulful Nights",
1001
- "Rhythm & Blues",
1002
- "Midnight Groove",
1003
- "Soul Connection",
1004
- "Blue Moon",
1005
- "R&B Dreams",
1006
- "Soulful Heart",
1007
- "Midnight Serenade",
1008
- "Rhythm of Love",
1009
- "Soulful Nights",
1010
- "Rhythm & Blues",
1011
- "Midnight Groove",
1012
- "Soul Connection",
1013
- "Blue Moon",
1014
- "R&B Dreams",
1015
- "Soulful Heart",
1016
- "Midnight Serenade",
1017
- "Rhythm of Love",
1018
- "Soulful Nights",
1019
- "Rhythm & Blues",
1020
- "Midnight Groove",
1021
- "Soul Connection",
1022
- "Blue Moon",
1023
- "R&B Dreams",
1024
- "Soulful Heart",
1025
- "Midnight Serenade",
1026
- "Rhythm of Love",
1027
- "Soulful Nights",
1028
- "Rhythm & Blues",
1029
- "Midnight Groove",
1030
- "Soul Connection",
1031
- "Blue Moon",
1032
- "R&B Dreams",
1033
- "Soulful Heart",
1034
- "Midnight Serenade",
1035
- "Rhythm of Love",
1036
- "Soulful Nights",
1037
- "Rhythm & Blues",
1038
- "Midnight Groove",
1039
- "Soul Connection",
1040
- "Blue Moon",
1041
- "R&B Dreams",
1042
- "Soulful Heart",
1043
- "Midnight Serenade",
1044
- "Rhythm of Love",
1045
- "Soulful Nights",
1046
- "Rhythm & Blues",
1047
- "Midnight Groove",
1048
- "Soul Connection",
1049
- "Blue Moon",
1050
- "R&B Dreams",
1051
- "Soulful Heart",
1052
- "Midnight Serenade",
1053
- "Rhythm of Love",
1054
- "Soulful Nights",
1055
- "Rhythm & Blues",
1056
- "Midnight Groove",
1057
- "Soul Connection",
1058
- "Blue Moon",
1059
- "R&B Dreams",
1060
- "Soulful Heart",
1061
- "Midnight Serenade",
1062
- "Rhythm of Love"
1063
- ],
1064
- electronic: [
1065
- "Digital Dreams",
1066
- "Synth Wave",
1067
- "Electric Pulse",
1068
- "Neon Nights",
1069
- "Beat Drop",
1070
- "Digital Love",
1071
- "Synth Revolution",
1072
- "Electric Dreams",
1073
- "Neon Lights",
1074
- "Beat King",
1075
- "Digital Pulse",
1076
- "Synth Wave",
1077
- "Electric Pulse",
1078
- "Neon Nights",
1079
- "Beat Drop",
1080
- "Digital Love",
1081
- "Synth Revolution",
1082
- "Electric Dreams",
1083
- "Neon Lights",
1084
- "Beat King",
1085
- "Digital Pulse",
1086
- "Digital Dreams",
1087
- "Synth Wave",
1088
- "Electric Pulse",
1089
- "Neon Nights",
1090
- "Beat Drop",
1091
- "Digital Love",
1092
- "Synth Revolution",
1093
- "Electric Dreams",
1094
- "Neon Lights",
1095
- "Beat King",
1096
- "Digital Pulse",
1097
- "Digital Dreams",
1098
- "Synth Wave",
1099
- "Electric Pulse",
1100
- "Neon Nights",
1101
- "Beat Drop",
1102
- "Digital Love",
1103
- "Synth Revolution",
1104
- "Electric Dreams",
1105
- "Neon Lights",
1106
- "Beat King",
1107
- "Digital Pulse",
1108
- "Digital Dreams",
1109
- "Synth Wave",
1110
- "Electric Pulse",
1111
- "Neon Nights",
1112
- "Beat Drop",
1113
- "Digital Love",
1114
- "Synth Revolution",
1115
- "Electric Dreams",
1116
- "Neon Lights",
1117
- "Beat King",
1118
- "Digital Pulse",
1119
- "Digital Dreams",
1120
- "Synth Wave",
1121
- "Electric Pulse",
1122
- "Neon Nights",
1123
- "Beat Drop",
1124
- "Digital Love",
1125
- "Synth Revolution",
1126
- "Electric Dreams",
1127
- "Neon Lights",
1128
- "Beat King",
1129
- "Digital Pulse",
1130
- "Digital Dreams",
1131
- "Synth Wave",
1132
- "Electric Pulse",
1133
- "Neon Nights",
1134
- "Beat Drop",
1135
- "Digital Love",
1136
- "Synth Revolution",
1137
- "Electric Dreams",
1138
- "Neon Lights",
1139
- "Beat King",
1140
- "Digital Pulse",
1141
- "Digital Dreams",
1142
- "Synth Wave",
1143
- "Electric Pulse",
1144
- "Neon Nights",
1145
- "Beat Drop",
1146
- "Digital Love",
1147
- "Synth Revolution",
1148
- "Electric Dreams",
1149
- "Neon Lights",
1150
- "Beat King",
1151
- "Digital Pulse",
1152
- "Digital Dreams",
1153
- "Synth Wave",
1154
- "Electric Pulse",
1155
- "Neon Nights",
1156
- "Beat Drop",
1157
- "Digital Love",
1158
- "Synth Revolution",
1159
- "Electric Dreams",
1160
- "Neon Lights",
1161
- "Beat King",
1162
- "Digital Pulse"
1163
- ],
1164
- country: [
1165
- "Country Roads",
1166
- "Southern Comfort",
1167
- "Dirt Roads",
1168
- "Honky Tonk",
1169
- "Cowboy Dreams",
1170
- "Southern Nights",
1171
- "Dirt Roads",
1172
- "Honky Tonk",
1173
- "Cowboy Dreams",
1174
- "Southern Comfort",
1175
- "Country Roads",
1176
- "Southern Nights",
1177
- "Dirt Roads",
1178
- "Honky Tonk",
1179
- "Cowboy Dreams",
1180
- "Southern Comfort",
1181
- "Country Roads",
1182
- "Southern Nights",
1183
- "Dirt Roads",
1184
- "Honky Tonk",
1185
- "Cowboy Dreams",
1186
- "Country Roads",
1187
- "Southern Comfort",
1188
- "Dirt Roads",
1189
- "Honky Tonk",
1190
- "Cowboy Dreams",
1191
- "Southern Nights",
1192
- "Dirt Roads",
1193
- "Honky Tonk",
1194
- "Cowboy Dreams",
1195
- "Southern Comfort",
1196
- "Country Roads",
1197
- "Southern Nights",
1198
- "Dirt Roads",
1199
- "Honky Tonk",
1200
- "Cowboy Dreams",
1201
- "Southern Comfort",
1202
- "Country Roads",
1203
- "Southern Nights",
1204
- "Dirt Roads",
1205
- "Honky Tonk",
1206
- "Cowboy Dreams",
1207
- "Southern Comfort",
1208
- "Country Roads",
1209
- "Southern Nights",
1210
- "Dirt Roads",
1211
- "Honky Tonk",
1212
- "Cowboy Dreams",
1213
- "Southern Comfort",
1214
- "Country Roads",
1215
- "Southern Nights",
1216
- "Dirt Roads",
1217
- "Honky Tonk",
1218
- "Cowboy Dreams",
1219
- "Southern Comfort",
1220
- "Country Roads",
1221
- "Southern Nights",
1222
- "Dirt Roads",
1223
- "Honky Tonk",
1224
- "Cowboy Dreams",
1225
- "Southern Comfort",
1226
- "Country Roads",
1227
- "Southern Nights",
1228
- "Dirt Roads",
1229
- "Honky Tonk",
1230
- "Cowboy Dreams",
1231
- "Southern Comfort",
1232
- "Country Roads",
1233
- "Southern Nights",
1234
- "Dirt Roads",
1235
- "Honky Tonk",
1236
- "Cowboy Dreams",
1237
- "Southern Comfort",
1238
- "Country Roads",
1239
- "Southern Nights",
1240
- "Dirt Roads",
1241
- "Honky Tonk",
1242
- "Cowboy Dreams",
1243
- "Southern Comfort",
1244
- "Country Roads",
1245
- "Southern Nights",
1246
- "Dirt Roads",
1247
- "Honky Tonk",
1248
- "Cowboy Dreams",
1249
- "Southern Comfort",
1250
- "Country Roads",
1251
- "Southern Nights",
1252
- "Dirt Roads",
1253
- "Honky Tonk",
1254
- "Cowboy Dreams",
1255
- "Southern Comfort",
1256
- "Country Roads",
1257
- "Southern Nights",
1258
- "Dirt Roads",
1259
- "Honky Tonk",
1260
- "Cowboy Dreams",
1261
- "Southern Comfort",
1262
- "Country Roads",
1263
- "Southern Nights",
1264
- "Dirt Roads",
1265
- "Honky Tonk",
1266
- "Cowboy Dreams",
1267
- "Southern Comfort",
1268
- "Country Roads",
1269
- "Southern Nights",
1270
- "Dirt Roads",
1271
- "Honky Tonk",
1272
- "Cowboy Dreams",
1273
- "Southern Comfort",
1274
- "Country Roads",
1275
- "Southern Nights",
1276
- "Dirt Roads",
1277
- "Honky Tonk",
1278
- "Cowboy Dreams",
1279
- "Southern Comfort",
1280
- "Country Roads",
1281
- "Southern Nights",
1282
- "Dirt Roads",
1283
- "Honky Tonk",
1284
- "Cowboy Dreams",
1285
- "Southern Comfort",
1286
- "Country Roads",
1287
- "Southern Nights",
1288
- "Dirt Roads",
1289
- "Honky Tonk",
1290
- "Cowboy Dreams",
1291
- "Southern Comfort",
1292
- "Country Roads",
1293
- "Southern Nights",
1294
- "Dirt Roads",
1295
- "Honky Tonk",
1296
- "Cowboy Dreams",
1297
- "Southern Comfort",
1298
- "Country Roads",
1299
- "Southern Nights",
1300
- "Dirt Roads",
1301
- "Honky Tonk",
1302
- "Cowboy Dreams",
1303
- "Southern Comfort",
1304
- "Country Roads",
1305
- "Southern Nights",
1306
- "Dirt Roads",
1307
- "Honky Tonk",
1308
- "Cowboy Dreams",
1309
- "Southern Comfort",
1310
- "Country Roads",
1311
- "Southern Nights",
1312
- "Dirt Roads",
1313
- "Honky Tonk",
1314
- "Cowboy Dreams",
1315
- "Southern Comfort",
1316
- "Country Roads",
1317
- "Southern Nights",
1318
- "Dirt Roads",
1319
- "Honky Tonk",
1320
- "Cowboy Dreams",
1321
- "Southern Comfort",
1322
- "Country Roads",
1323
- "Southern Nights",
1324
- "Dirt Roads",
1325
- "Honky Tonk",
1326
- "Cowboy Dreams",
1327
- "Southern Comfort",
1328
- "Country Roads",
1329
- "Southern Nights",
1330
- "Dirt Roads",
1331
- "Honky Tonk",
1332
- "Cowboy Dreams",
1333
- "Southern Comfort",
1334
- "Country Roads",
1335
- "Southern Nights",
1336
- "Dirt Roads",
1337
- "Honky Tonk",
1338
- "Cowboy Dreams",
1339
- "Southern Comfort",
1340
- "Country Roads",
1341
- "Southern Nights",
1342
- "Dirt Roads",
1343
- "Honky Tonk",
1344
- "Cowboy Dreams",
1345
- "Southern Comfort",
1346
- "Country Roads",
1347
- "Southern Nights",
1348
- "Dirt Roads",
1349
- "Honky Tonk",
1350
- "Cowboy Dreams",
1351
- "Southern Comfort",
1352
- "Country Roads",
1353
- "Southern Nights",
1354
- "Dirt Roads",
1355
- "Honky Tonk",
1356
- "Cowboy Dreams",
1357
- "Southern Comfort",
1358
- "Country Roads",
1359
- "Southern Nights",
1360
- "Dirt Roads",
1361
- "Honky Tonk",
1362
- "Cowboy Dreams",
1363
- "Southern Comfort",
1364
- "Country Roads",
1365
- "Southern Nights",
1366
- "Dirt Roads",
1367
- "Honky Tonk",
1368
- "Cowboy Dreams",
1369
- "Southern Comfort",
1370
- "Country Roads",
1371
- "Southern Nights",
1372
- "Dirt Roads",
1373
- "Honky Tonk",
1374
- "Cowboy Dreams",
1375
- "Southern Comfort",
1376
- "Country Roads",
1377
- "Southern Nights",
1378
- "Dirt Roads",
1379
- "Honky Tonk",
1380
- "Cowboy Dreams",
1381
- "Southern Comfort",
1382
- "Country Roads",
1383
- "Southern Nights",
1384
- "Dirt Roads",
1385
- "Honky Tonk",
1386
- "Cowboy Dreams",
1387
- "Southern Comfort",
1388
- "Country Roads",
1389
- "Southern Nights",
1390
- "Dirt Roads",
1391
- "Honky Tonk",
1392
- "Cowboy Dreams",
1393
- "Southern Comfort",
1394
- "Country Roads",
1395
- "Southern Nights",
1396
- "Dirt Roads",
1397
- "Honky Tonk",
1398
- "Cowboy Dreams",
1399
- "Southern Comfort",
1400
- "Country Roads",
1401
- "Southern Nights",
1402
- "Dirt Roads",
1403
- "Honky Tonk",
1404
- "Cowboy Dreams",
1405
- "Southern Comfort",
1406
- "Country Roads",
1407
- "Southern Nights",
1408
- "Dirt Roads",
1409
- "Honky Tonk",
1410
- "Cowboy Dreams",
1411
- "Southern Comfort",
1412
- "Country Roads",
1413
- "Southern Nights",
1414
- "Dirt Roads",
1415
- "Honky Tonk",
1416
- "Cowboy Dreams",
1417
- "Southern Comfort",
1418
- "Country Roads",
1419
- "Southern Nights",
1420
- "Dirt Roads",
1421
- "Honky Tonk",
1422
- "Cowboy Dreams",
1423
- "Southern Comfort",
1424
- "Country Roads",
1425
- "Southern Nights",
1426
- "Dirt Roads",
1427
- "Honky Tonk",
1428
- "Cowboy Dreams",
1429
- "Southern Comfort",
1430
- "Country Roads",
1431
- "Southern Nights",
1432
- "Dirt Roads",
1433
- "Honky Tonk",
1434
- "Cowboy Dreams",
1435
- "Southern Comfort",
1436
- "Country Roads",
1437
- "Southern Nights",
1438
- "Dirt Roads",
1439
- "Honky Tonk",
1440
- "Cowboy Dreams",
1441
- "Southern Comfort",
1442
- "Country Roads",
1443
- "Southern Nights",
1444
- "Dirt Roads",
1445
- "Honky Tonk",
1446
- "Cowboy Dreams",
1447
- "Southern Comfort",
1448
- "Country Roads",
1449
- "Southern Nights",
1450
- "Dirt Roads",
1451
- "Honky Tonk",
1452
- "Cowboy Dreams",
1453
- "Southern Comfort",
1454
- "Country Roads",
1455
- "Southern Nights",
1456
- "Dirt Roads",
1457
- "Honky Tonk",
1458
- "Cowboy Dreams",
1459
- "Southern Comfort",
1460
- "Country Roads",
1461
- "Southern Nights",
1462
- "Dirt Roads",
1463
- "Honky Tonk",
1464
- "Cowboy Dreams",
1465
- "Southern Comfort",
1466
- "Country Roads",
1467
- "Southern Nights",
1468
- "Dirt Roads",
1469
- "Honky Tonk",
1470
- "Cowboy Dreams",
1471
- "Southern Comfort",
1472
- "Country Roads",
1473
- "Southern Nights",
1474
- "Dirt Roads",
1475
- "Honky Tonk",
1476
- "Cowboy Dreams",
1477
- "Southern Comfort",
1478
- "Country Roads",
1479
- "Southern Nights",
1480
- "Dirt Roads",
1481
- "Honky Tonk",
1482
- "Cowboy Dreams",
1483
- "Southern Comfort",
1484
- "Country Roads",
1485
- "Southern Nights",
1486
- "Dirt Roads",
1487
- "Honky Tonk",
1488
- "Cowboy Dreams",
1489
- "Southern Comfort",
1490
- "Country Roads",
1491
- "Southern Nights",
1492
- "Dirt Roads",
1493
- "Honky Tonk",
1494
- "Cowboy Dreams",
1495
- "Southern Comfort",
1496
- "Country Roads",
1497
- "Southern Nights",
1498
- "Dirt Roads",
1499
- "Honky Tonk",
1500
- "Cowboy Dreams",
1501
- "Southern Comfort",
1502
- "Country Roads",
1503
- "Southern Nights",
1504
- "Dirt Roads",
1505
- "Honky Tonk",
1506
- "Cowboy Dreams",
1507
- "Southern Comfort",
1508
- "Country Roads",
1509
- "Southern Nights",
1510
- "Dirt Roads",
1511
- "Honky Tonk",
1512
- "Cowboy Dreams",
1513
- "Southern Comfort",
1514
- "Country Roads",
1515
- "Southern Nights",
1516
- "Dirt Roads",
1517
- "Honky Tonk",
1518
- "Cowboy Dreams",
1519
- "Southern Comfort",
1520
- "Country Roads",
1521
- "Southern Nights",
1522
- "Dirt Roads",
1523
- "Honky Tonk",
1524
- "Cowboy Dreams",
1525
- "Southern Comfort",
1526
- "Country Roads",
1527
- "Southern Nights",
1528
- "Dirt Roads",
1529
- "Honky Tonk",
1530
- "Cowboy Dreams",
1531
- "Southern Comfort",
1532
- "Country Roads",
1533
- "Southern Nights",
1534
- "Dirt Roads",
1535
- "Honky Tonk",
1536
- "Cowboy Dreams",
1537
- "Southern Comfort",
1538
- "Country Roads",
1539
- "Southern Nights",
1540
- "Dirt Roads",
1541
- "Honky Tonk",
1542
- "Cowboy Dreams",
1543
- "Southern Comfort",
1544
- "Country Roads",
1545
- "Southern Nights",
1546
- "Dirt Roads",
1547
- "Honky Tonk",
1548
- "Cowboy Dreams",
1549
- "Southern Comfort",
1550
- "Country Roads",
1551
- "Southern Nights",
1552
- "Dirt Roads",
1553
- "Honky Tonk",
1554
- "Cowboy Dreams",
1555
- "Southern Comfort",
1556
- "Country Roads",
1557
- "Southern Nights",
1558
- "Dirt Roads",
1559
- "Honky Tonk",
1560
- "Cowboy Dreams",
1561
- "Southern Comfort",
1562
- "Country Roads",
1563
- "Southern Nights",
1564
- "Dirt Roads",
1565
- "Honky Tonk",
1566
- "Cowboy Dreams",
1567
- "Southern Comfort",
1568
- "Country Roads",
1569
- "Southern Nights",
1570
- "Dirt Roads",
1571
- "Honky Tonk",
1572
- "Cowboy Dreams",
1573
- "Southern Comfort",
1574
- "Country Roads",
1575
- "Southern Nights",
1576
- "Dirt Roads",
1577
- "Honky Tonk",
1578
- "Cowboy Dreams",
1579
- "Southern Comfort",
1580
- "Country Roads",
1581
- "Southern Nights",
1582
- "Dirt Roads",
1583
- "Honky Tonk",
1584
- "Cowboy Dreams",
1585
- "Southern Comfort",
1586
- "Country Roads",
1587
- "
 
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>i2i Body Editor with Chat</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ * {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20
+ }
21
+
22
+ .glass-effect {
23
+ background: rgba(255, 255, 255, 0.1);
24
+ backdrop-filter: blur(10px);
25
+ border: 1px solid rgba(255, 255, 255, 0.2);
26
+ }
27
+
28
+ .tool-button {
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .tool-button:hover {
33
+ transform: translateY(-2px);
34
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
35
+ }
36
+
37
+ .chat-bubble {
38
+ animation: slideIn 0.3s ease;
39
+ }
40
+
41
+ @keyframes slideIn {
42
+ from {
43
+ opacity: 0;
44
+ transform: translateY(10px);
45
+ }
46
+ to {
47
+ opacity: 1;
48
+ transform: translateY(0);
49
+ }
50
+ }
51
+
52
+ .editor-canvas {
53
+ background: repeating-linear-gradient(
54
+ 45deg,
55
+ #f0f0f0,
56
+ #f0f0f0 10px,
57
+ #e0e0e0 10px,
58
+ #e0e0e0 20px
59
+ );
60
+ }
61
+
62
+ .filter-preview {
63
+ transition: all 0.3s ease;
64
+ }
65
+
66
+ .filter-preview:hover {
67
+ transform: scale(1.05);
68
+ }
69
+
70
+ .slider {
71
+ -webkit-appearance: none;
72
+ appearance: none;
73
+ height: 6px;
74
+ border-radius: 5px;
75
+ background: #d3d3d3;
76
+ outline: none;
77
+ }
78
+
79
+ .slider::-webkit-slider-thumb {
80
+ -webkit-appearance: none;
81
+ appearance: none;
82
+ width: 20px;
83
+ height: 20px;
84
+ border-radius: 50%;
85
+ background: #667eea;
86
+ cursor: pointer;
87
+ }
88
+
89
+ .slider::-moz-range-thumb {
90
+ width: 20px;
91
+ height: 20px;
92
+ border-radius: 50%;
93
+ background: #667eea;
94
+ cursor: pointer;
95
+ }
96
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  </head>
 
98
  <body>
99
+ <div id="root"></div>
100
+
101
+ <script type="text/babel">
102
+ const { useState, useEffect, useRef } = React;
103
+
104
+ const App = () => {
105
+ const [selectedImage, setSelectedImage] = useState(null);
106
+ const [chatMessages, setChatMessages] = useState([
107
+ { id: 1, user: 'AI Assistant', message: 'Welcome to i2i Body Editor! Upload an image to start editing.', time: '10:30 AM' },
108
+ { id: 2, user: 'System', message: 'Ready to help with your editing needs.', time: '10:31 AM' }
109
+ ]);
110
+ const [newMessage, setNewMessage] = useState('');
111
+ const [activeTool, setActiveTool] = useState('crop');
112
+ const [brightness, setBrightness] = useState(100);
113
+ const [contrast, setContrast] = useState(100);
114
+ const [saturation, setSaturation] = useState(100);
115
+ const [rotation, setRotation] = useState(0);
116
+ const [scale, setScale] = useState(100);
117
+ const [selectedFilter, setSelectedFilter] = useState(null);
118
+ const [isDrawing, setIsDrawing] = useState(false);
119
+ const [drawColor, setDrawColor] = useState('#000000');
120
+ const [brushSize, setBrushSize] = useState(5);
121
+ const messagesEndRef = useRef(null);
122
+
123
+ const filters = [
124
+ { name: 'None', value: 'none' },
125
+ { name: 'Vintage', value: 'sepia(0.5) contrast(1.2) brightness(0.9)' },
126
+ { name: 'Black & White', value: 'grayscale(1)' },
127
+ { name: 'Vintage Blue', value: 'sepia(0.3) hue-rotate(180deg)' },
128
+ { name: 'Warm', value: 'sepia(0.5) saturate(1.5)' },
129
+ { name: 'Cool', value: 'hue-rotate(180deg) saturate(0.8)' }
130
+ ];
131
+
132
+ const tools = [
133
+ { id: 'crop', icon: 'fas fa-crop-alt', name: 'Crop' },
134
+ { id: 'rotate', icon: 'fas fa-sync-alt', name: 'Rotate' },
135
+ { id: 'brush', icon: 'fas fa-paint-brush', name: 'Brush' },
136
+ { id: 'eraser', icon: 'fas fa-eraser', name: 'Eraser' },
137
+ { id: 'text', icon: 'fas fa-font', name: 'Text' },
138
+ { id: 'filter', icon: 'fas fa-magic', name: 'Filters' }
139
+ ];
140
+
141
+ const sendMessage = () => {
142
+ if (newMessage.trim()) {
143
+ const newMsg = {
144
+ id: chatMessages.length + 1,
145
+ user: 'You',
146
+ message: newMessage,
147
+ time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
148
+ };
149
+ setChatMessages([...chatMessages, newMsg]);
150
+ setNewMessage('');
151
+
152
+ // Simulate AI response
153
+ setTimeout(() => {
154
+ const aiResponse = {
155
+ id: chatMessages.length + 2,
156
+ user: 'AI Assistant',
157
+ message: `I understand your request. Let me help you with that. Current brightness: ${brightness}%, contrast: ${contrast}%, saturation: ${saturation}%.`,
158
+ time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
159
+ };
160
+ setChatMessages(prev => [...prev, aiResponse]);
161
+ }, 1000);
162
+ }
163
+ };
164
+
165
+ const handleImageUpload = (e) => {
166
+ const file = e.target.files[0];
167
+ if (file) {
168
+ const reader = new FileReader();
169
+ reader.onload = (e) => {
170
+ setSelectedImage(e.target.result);
171
+ };
172
+ reader.readAsDataURL(file);
173
+
174
+ // Add message to chat
175
+ const uploadMsg = {
176
+ id: chatMessages.length + 1,
177
+ user: 'System',
178
+ message: `Image uploaded successfully! Ready for editing.`,
179
+ time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
180
+ };
181
+ setChatMessages(prev => [...prev, uploadMsg]);
182
+ }
183
+ };
184
+
185
+ const applyFilter = (filterValue) => {
186
+ setSelectedFilter(filterValue);
187
+ const filterMsg = {
188
+ id: chatMessages.length + 1,
189
+ user: 'You',
190
+ message: `Applied filter: ${filters.find(f => f.value === filterValue)?.name}`,
191
+ time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
192
+ };
193
+ setChatMessages(prev => [...prev, filterMsg]);
194
+ };
195
+
196
+ const resetFilters = () => {
197
+ setBrightness(100);
198
+ setContrast(100);
199
+ setSaturation(100);
200
+ setRotation(0);
201
+ setScale(100);
202
+ setSelectedFilter(null);
203
+ };
204
+
205
+ const downloadImage = () => {
206
+ const canvas = document.createElement('canvas');
207
+ const ctx = canvas.getContext('2d');
208
+ const img = new Image();
209
+
210
+ img.onload = () => {
211
+ canvas.width = img.width;
212
+ canvas.height = img.height;
213
+
214
+ ctx.filter = selectedFilter || 'none';
215
+ ctx.drawImage(img, 0, 0);
216
+
217
+ const link = document.createElement('a');
218
+ link.download = 'edited-image.png';
219
+ link.href = canvas.toDataURL();
220
+ link.click();
221
+
222
+ const downloadMsg = {
223
+ id: chatMessages.length + 1,
224
+ user: 'System',
225
+ message: 'Image downloaded successfully!',
226
+ time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
227
+ };
228
+ setChatMessages(prev => [...prev, downloadMsg]);
229
+ };
230
+
231
+ img.src = selectedImage;
232
+ };
233
+
234
+ useEffect(() => {
235
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
236
+ }, [chatMessages]);
237
+
238
+ return (
239
+ <div className="min-h-screen gradient-bg">
240
+ {/* Header */}
241
+ <header className="glass-effect text-white p-4">
242
+ <div className="container mx-auto flex justify-between items-center">
243
+ <h1 className="text-2xl font-bold">i2i Body Editor</h1>
244
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-white hover:text-gray-200 transition-colors">
245
+ Built with anycoder
246
+ </a>
247
+ </div>
248
+ </header>
249
+
250
+ <div className="container mx-auto p-4 flex flex-col lg:flex-row gap-4">
251
+ {/* Editor Section */}
252
+ <div className="flex-1 glass-effect rounded-xl p-6">
253
+ <h2 className="text-white text-xl font-semibold mb-4">Image Editor</h2>
254
+
255
+ {/* Image Upload */}
256
+ <div className="mb-6">
257
+ <label className="block text-white mb-2">Upload Image</label>
258
+ <input
259
+ type="file"
260
+ accept="image/*"
261
+ onChange={handleImageUpload}
262
+ className="w-full p-2 rounded-lg bg-white/20 text-white file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-white/30 file:text-white hover:file:bg-white/40"
263
+ />
264
+ </div>
265
+
266
+ {/* Editor Canvas */}
267
+ <div className="editor-canvas rounded-lg p-4 mb-6 min-h-96 flex items-center justify-center">
268
+ {selectedImage ? (
269
+ <div className="relative">
270
+ <img
271
+ src={selectedImage}
272
+ alt="Edited"
273
+ style={{
274
+ filter: selectedFilter || 'none',
275
+ transform: `rotate(${rotation}deg) scale(${scale / 100})`,
276
+ brightness: `${brightness}%`,
277
+ contrast: `${contrast}%`,
278
+ saturate: `${saturation}%`
279
+ }}
280
+ className="max-w-full max-h-96 rounded-lg shadow-lg"
281
+ />
282
+ {isDrawing && (
283
+ <div
284
+ className="absolute inset-0 cursor-crosshair"
285
+ onMouseDown={() => setIsDrawing(true)}
286
+ onMouseUp={() => setIsDrawing(false)}
287
+ onMouseMove={(e) => {
288
+ if (isDrawing) {
289
+ const canvas = document.createElement('canvas');
290
+ const ctx = canvas.getContext('2d');
291
+ canvas.width = e.target.width;
292
+ canvas.height = e.target.height;
293
+ ctx.strokeStyle = drawColor;
294
+ ctx.lineWidth = brushSize;
295
+ ctx.lineCap = 'round';
296
+ // Drawing logic would go here
297
+ }
298
+ }}
299
+ />
300
+ )}
301
+ </div>
302
+ ) : (
303
+ <div className="text-center text-white/60">
304
+ <i className="fas fa-image text-6xl mb-4"></i>
305
+ <p>No image uploaded</p>
306
+ </div>
307
+ )}
308
+ </div>
309
+
310
+ {/* Tools */}
311
+ <div className="mb-6">
312
+ <h3 className="text-white mb-3">Tools</h3>
313
+ <div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
314
+ {tools.map(tool => (
315
+ <button
316
+ key={tool.id}
317
+ onClick={() => setActiveTool(tool.id)}
318
+ className={`tool-button p-3 rounded-lg glass-effect text-white transition-all ${
319
+ activeTool === tool.id ? 'ring-2 ring-white' : ''
320
+ }`}
321
+ title={tool.name}
322
+ >
323
+ <i className={`${tool.icon} text-lg`}></i>
324
+ </button>
325
+ ))}
326
+ </div>
327
+ </div>
328
+
329
+ {/* Adjustments */}
330
+ <div className="mb-6">
331
+ <h3 className="text-white mb-3">Adjustments</h3>
332
+ <div className="space-y-4">
333
+ <div>
334
+ <label className="text-white text-sm block mb-1">Brightness: {brightness}%</label>
335
+ <input
336
+ type="range"
337
+ min="0"
338
+ max="200"
339
+ value={brightness}
340
+ onChange={(e) => setBrightness(e.target.value)}
341
+ className="slider w-full"
342
+ />
343
+ </div>
344
+ <div>
345
+ <label className="text-white text-sm block mb-1">Contrast: {contrast}%</label>
346
+ <input
347
+ type="range"
348
+ min="0"
349
+ max="200"
350
+ value={contrast}
351
+ onChange={(e) => setContrast(e.target.value)}
352
+ className="slider w-full"
353
+ />
354
+ </div>
355
+ <div>
356
+ <label className="text-white text-sm block mb-1">Saturation: {saturation}%</label>
357
+ <input
358
+ type="range"
359
+ min="0"
360
+ max="200"
361
+ value={saturation}
362
+ onChange={(e) => setSaturation(e.target.value)}
363
+ className="slider w-full"
364
+ />
365
+ </div>
366
+ <div>
367
+ <label className="text-white text-sm block mb-1">Rotation: {rotation}°</label>
368
+ <input
369
+ type="range"
370
+ min="-180"
371
+ max="180"
372
+ value={rotation}
373
+ onChange={(e) => setRotation(e.target.value)}
374
+ className="slider w-full"
375
+ />
376
+ </div>
377
+ <div>
378
+ <label className="text-white text-sm block mb-1">Scale: {scale}%</label>
379
+ <input
380
+ type="range"
381
+ min="50"
382
+ max="200"
383
+ value={scale}
384
+ onChange={(e) => setScale(e.target.value)}
385
+ className="slider w-full"
386
+ />
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ {/* Filters */}
392
+ <div className="mb-6">
393
+ <h3 className="text-white mb-3">Filters</h3>
394
+ <div className="grid grid-cols-3 gap-2">
395
+ {filters.map(filter => (
396
+ <button
397
+ key={filter.value}
398
+ onClick={() => applyFilter(filter.value)}
399
+ className={`filter-preview p-2 rounded-lg glass-effect text-white text-sm transition-all ${
400
+ selectedFilter === filter.value ? 'ring-2 ring-white' : ''
401
+ }`}
402
+ >
403
+ {filter.name}
404
+ </button>
405
+ ))}
406
+ </div>
407
+ </div>
408
+
409
+ {/* Action Buttons */}
410
+ <div className="flex gap-2">
411
+ <button
412
+ onClick={resetFilters}
413
+ className="px-4 py-2 rounded-lg glass-effect text-white hover:bg-white/20 transition-colors"
414
+ >
415
+ Reset
416
+ </button>
417
+ <button
418
+ onClick={downloadImage}
419
+ className="px-4 py-2 rounded-lg bg-white text-purple-600 font-semibold hover:bg-gray-100 transition-colors"
420
+ >
421
+ Download
422
+ </button>
423
+ </div>
424
+ </div>
425
+
426
+ {/* Chat Section */}
427
+ <div className="lg:w-96 glass-effect rounded-xl p-6">
428
+ <h2 className="text-white text-xl font-semibold mb-4">Chat Editor</h2>
429
+
430
+ {/* Chat Messages */}
431
+ <div className="bg-white/10 rounded-lg p-4 h-96 overflow-y-auto mb-4">
432
+ {chatMessages.map(msg => (
433
+ <div key={msg.id} className="chat-bubble mb-3">
434
+ <div className="flex items-start gap-2">
435
+ <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-white text-sm font-semibold">
436
+ {msg.user[0]}
437
+ </div>
438
+ <div className="flex-1">
439
+ <div className="flex items-center gap-2 mb-1">
440
+ <span className="text-white font-semibold text-sm">{msg.user}</span>
441
+ <span className="text-white/60 text-xs">{msg.time}</span>
442
+ </div>
443
+ <p className="text-white/90 text-sm">{msg.message}</p>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ ))}
448
+ <div ref={messagesEndRef} />
449
+ </div>
450
+
451
+ {/* Chat Input */}
452
+ <div className="flex gap-2">
453
+ <input
454
+ type="text"
455
+ value={newMessage}
456
+ onChange={(e) => setNewMessage(e.target.value)}
457
+ onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
458
+ placeholder="Type your message..."
459
+ className="flex-1 p-3 rounded-lg bg-white/20 text-white placeholder-white/60 border border-white/30 focus:outline-none focus:border-white/50"
460
+ />
461
+ <button
462
+ onClick={sendMessage}
463
+ className="px-4 py-3 rounded-lg bg-white text-purple-600 font-semibold hover:bg-gray-100 transition-colors"
464
+ >
465
+ <i className="fas fa-paper-plane"></i>
466
+ </button>
467
+ </div>
468
+
469
+ {/* Quick Actions */}
470
+ <div className="mt-4">
471
+ <h3 className="text-white mb-2">Quick Actions</h3>
472
+ <div className="grid grid-cols-2 gap-2">
473
+ <button className="p-2 rounded-lg glass-effect text-white text-sm hover:bg-white/20 transition-colors">
474
+ <i className="fas fa-undo mr-1"></i> Undo
475
+ </button>
476
+ <button className="p-2 rounded-lg glass-effect text-white text-sm hover:bg-white/20 transition-colors">
477
+ <i className="fas fa-redo mr-1"></i> Redo
478
+ </button>
479
+ <button className="p-2 rounded-lg glass-effect text-white text-sm hover:bg-white/20 transition-colors">
480
+ <i className="fas fa-save mr-1"></i> Save
481
+ </button>
482
+ <button className="p-2 rounded-lg glass-effect text-white text-sm hover:bg-white/20 transition-colors">
483
+ <i className="fas fa-share mr-1"></i> Share
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ );
491
+ };
492
+
493
+ ReactDOM.render(<App />, document.getElementById('root'));
494
+ </script>
495
+ </body>
496
+ </html>