Hugging Face's logo

Spaces:
sovitich28
/
sovitich-projects
Running

App Files Community
sovitich-projects
File size: 41,428 Bytes
bf6d488
 
 
 
 
1a55a91
bf6d488
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
 
 
 
 
 
1a55a91
bf6d488
1a55a91
bf6d488
 
 
1a55a91
 
 
bf6d488
 
 
 
 
1a55a91
 
 
bf6d488
 
 
 
 
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
059338b
 
 
 
 
 
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
059338b
 
 
 
 
 
1a55a91
 
 
 
 
 
 
059338b
 
 
 
 
 
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
059338b
 
 
 
 
 
1a55a91
 
 
 
 
 
 
059338b
 
 
 
 
 
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
 
 
 
 
 
1a55a91
bf6d488
 
 
 
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65761ba
1a55a91
 
 
059338b
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
 
 
 
 
 
 
 
 
 
 
 
 
1a55a91
 
 
 
 
 
 
 
bf6d488
 
 
 
1a55a91
bf6d488
 
 
 
 
 
 
 
1a55a91
 
bf6d488
1a55a91
 
 
 
65761ba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a55a91
 
bf6d488
1a55a91
 
 
 
 
 
 
 
 
 
65761ba
 
 
 
 
 
 
 
 
 
1a55a91
 
 
 
 
bf6d488
1a55a91
 
 
 
 
 
 
bf6d488
 
65761ba
1a55a91
 
 
 
 
65761ba
 
 
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
1a55a91
 
 
bf6d488
1a55a91
bf6d488
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
1a55a91
 
 
 
bf6d488
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
1a55a91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf6d488
1a55a91
 
 
bf6d488
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Teleprompter</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .teleprompter-container {
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        .teleprompter-text {
            transform: rotateX(20deg);
            transform-origin: top center;
        }
        .gradient-mask {
            mask-image: linear-gradient(to bottom, 
                rgba(0,0,0,0) 0%, 
                rgba(0,0,0,1) 10%,
                rgba(0,0,0,1) 90%,
                rgba(0,0,0,0) 100%);
            -webkit-mask-image: linear-gradient(to bottom, 
                rgba(0,0,0,0) 0%, 
                rgba(0,0,0,1) 10%,
                rgba(0,0,0,1) 90%,
                rgba(0,0,0,0) 100%);
        }
        .speed-control::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
        }
        .word-line {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        .word {
            margin: 0 0.5rem;
        }
        .card {
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex flex-col">
    <header class="bg-black py-4 px-6 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold text-blue-400">
                <i class="fas fa-newspaper mr-2"></i> Advanced Teleprompter
            </h1>
            <div id="headerControls" class="flex items-center space-x-4 hidden">
                <button id="playPauseBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-play mr-2"></i> Play
                </button>
                <button id="listenBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-volume-up mr-2"></i> Listen
                </button>
                <div class="flex items-center">
                    <i class="fas fa-tachometer-alt mr-2 text-blue-400"></i>
                    <input type="range" id="speedControl" min="1" max="20" value="5" class="speed-control w-32">
                    <span id="speedValue" class="ml-2 text-blue-400">5x</span>
                </div>
                <button id="backBtn" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </button>
            </div>
        </div>
    </header>

    <main class="flex-grow flex items-center justify-center p-6">
        <!-- Main Menu -->
        <div id="mainMenu" class="w-full max-w-4xl text-center fade-in">
            <h2 class="text-3xl font-bold mb-12 text-blue-400">Welcome to Teleprompter</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="card bg-gray-800 p-8 rounded-lg cursor-pointer hover:bg-gray-700 transition-all" onclick="showBookCategories()">
                    <div class="text-5xl mb-4 text-blue-400">
                        <i class="fas fa-book"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Read Book</h3>
                    <p class="text-gray-300">Choose from our collection of books</p>
                </div>
                <div class="card bg-gray-800 p-8 rounded-lg cursor-pointer hover:bg-gray-700 transition-all" onclick="showArticleCategories()">
                    <div class="text-5xl mb-4 text-green-400">
                        <i class="fas fa-newspaper"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Read Article</h3>
                    <p class="text-gray-300">Browse through various articles</p>
                </div>
                <div class="card bg-gray-800 p-8 rounded-lg cursor-pointer hover:bg-gray-700 transition-all" onclick="showGenerateText()">
                    <div class="text-5xl mb-4 text-purple-400">
                        <i class="fas fa-magic"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Generate Text</h3>
                    <p class="text-gray-300">Create custom content with AI</p>
                </div>
            </div>
        </div>

        <!-- Book Categories -->
        <div id="bookCategories" class="w-full max-w-4xl hidden fade-in">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-3xl font-bold text-blue-400">Book Categories</h2>
                <button onclick="showMainMenu()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showBooks('fiction')">
                    <img src="https://source.unsplash.com/random/300x200/?fiction,book" alt="Fiction" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-bold">Fiction</h3>
                        <p class="text-gray-400 text-sm">Novels and stories</p>
                    </div>
                </div>
                <div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showBooks('science')">
                    <img src="https://source.unsplash.com/random/300x200/?science,book" alt="Science" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-bold">Science</h3>
                        <p class="text-gray-400 text-sm">Scientific literature</p>
                    </div>
                </div>
                <div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showBooks('history')">
                    <img src="https://source.unsplash.com/random/300x200/?history,book" alt="History" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-bold">History</h3>
                        <p class="text-gray-400 text-sm">Historical accounts</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Books List -->
        <div id="booksList" class="w-full max-w-4xl hidden fade-in">
            <div class="flex justify-between items-center mb-8">
                <h2 id="booksCategoryTitle" class="text-3xl font-bold text-blue-400"></h2>
                <button onclick="showBookCategories()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Books will be inserted here by JavaScript -->
            </div>
        </div>

        <!-- Article Categories -->
        <div id="articleCategories" class="w-full max-w-4xl hidden fade-in">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-3xl font-bold text-green-400">Article Categories</h2>
                <button onclick="showMainMenu()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showArticles('technology')">
                    <img src="https://source.unsplash.com/random/300x200/?technology" alt="Technology" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-bold">Technology</h3>
                        <p class="text-gray-400 text-sm">Tech news and reviews</p>
                    </div>
                </div>
                <div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showArticles('health')">
                    <img src="https://source.unsplash.com/random/300x200/?health" alt="Health" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-bold">Health</h3>
                        <p class="text-gray-400 text-sm">Medical and wellness</p>
                    </div>
                </div>
                <div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showArticles('business')">
                    <img src="https://source.unsplash.com/random/300x200/?business" alt="Business" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-bold">Business</h3>
                        <p class="text-gray-400 text-sm">Finance and markets</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Articles List -->
        <div id="articlesList" class="w-full max-w-4xl hidden fade-in">
            <div class="flex justify-between items-center mb-8">
                <h2 id="articlesCategoryTitle" class="text-3xl font-bold text-green-400"></h2>
                <button onclick="showArticleCategories()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Articles will be inserted here by JavaScript -->
            </div>
        </div>

        <!-- Generate Text -->
        <div id="generateText" class="w-full max-w-4xl hidden fade-in">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-3xl font-bold text-purple-400">Generate Text</h2>
                <button onclick="showMainMenu()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </button>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg">
                <div class="mb-6">
                    <label for="promptInput" class="block text-lg font-medium mb-2">Enter your prompt:</label>
                    <textarea id="promptInput" rows="3" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g., Create an article about cyber security"></textarea>
                </div>
                <button onclick="generateContent()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium flex items-center mx-auto">
                    <i class="fas fa-magic mr-2"></i> Generate Content
                </button>
            </div>
            <div id="generatedContent" class="mt-8 hidden">
                <h3 class="text-xl font-bold mb-4">Generated Content</h3>
                <div class="bg-gray-800 p-6 rounded-lg">
                    <div id="generatedText" class="mb-6"></div>
                    <button onclick="loadGeneratedContent()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium">
                        <i class="fas fa-upload mr-2"></i> Load to Teleprompter
                    </button>
                </div>
            </div>
        </div>

        <!-- Teleprompter View -->
        <div id="teleprompterView" class="w-full max-w-4xl hidden">
            <div class="teleprompter-container w-full h-96 bg-black border-2 border-blue-800 rounded-lg overflow-hidden shadow-xl">
                <div id="teleprompterText" class="teleprompter-text h-full overflow-y-hidden text-3xl leading-relaxed p-8 gradient-mask">
                    <!-- Content will be inserted here by JavaScript -->
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-black py-4 px-6">
        <div class="container mx-auto text-center text-gray-400">
            <p id="footerText">Select an option to begin using the teleprompter</p>
        </div>
    </footer>

    <script>
        // Sample data for books and articles
        const bookData = {
            fiction: [
                { title: "The Great Novel", image: "https://source.unsplash.com/random/300x400/?fiction,novel", file: "fiction1.txt" },
                { title: "Mystery Tales", image: "https://source.unsplash.com/random/300x400/?mystery,book", file: "fiction2.txt" }
            ],
            science: [
                { title: "Quantum Physics", image: "https://source.unsplash.com/random/300x400/?quantum,physics", file: "science1.txt" },
                { title: "Cosmos Explained", image: "https://source.unsplash.com/random/300x400/?cosmos,space", file: "science2.txt" }
            ],
            history: [
                { title: "Ancient Civilizations", image: "https://source.unsplash.com/random/300x400/?ancient,history", file: "history1.txt" },
                { title: "World War Chronicles", image: "https://source.unsplash.com/random/300x400/?war,history", file: "history2.txt" }
            ]
        };

        const articleData = {
            technology: [
                { title: "The Future of AI", image: "https://source.unsplash.com/random/300x200/?ai,technology", file: "tech1.txt" },
                { title: "Blockchain Revolution", image: "https://source.unsplash.com/random/300x200/?blockchain", file: "tech2.txt" }
            ],
            health: [
                { title: "Nutrition Science", image: "https://source.unsplash.com/random/300x200/?nutrition", file: "health1.txt" },
                { title: "Mental Wellness", image: "https://source.unsplash.com/random/300x200/?mental,health", file: "health2.txt" }
            ],
            business: [
                { title: "Market Trends 2023", image: "https://source.unsplash.com/random/300x200/?market,trends", file: "business1.txt" },
                { title: "Startup Success", image: "https://source.unsplash.com/random/300x200/?startup", file: "business2.txt" }
            ]
        };

        // Sample book and article content (in a real app, this would be loaded from files)
        const fileContents = {
            "fiction1.txt": "CHAPTER 1\n\nThe rain fell in torrents as Eleanor stepped off the train, her small suitcase clutched tightly in her hand. The station was nearly empty at this late hour, and the few people who remained hurried past her without a glance. She pulled her coat tighter around her shoulders and walked into the storm, unaware that this night would change her life forever...",
            "fiction2.txt": "DETECTIVE'S JOURNAL - ENTRY 47\n\nThe case of the missing heiress had grown cold, but something about the butler's testimony didn't add up. Why would he claim to have been in the garden at midnight when the groundskeeper swore he saw him in the library? The pieces were there, I just needed to put them together...",
            "science1.txt": "QUANTUM ENTANGLEMENT: A NEW ERA\n\nThe phenomenon of quantum entanglement, where particles become interconnected and the state of one instantly influences the other regardless of distance, has baffled scientists for decades. Recent experiments at CERN have demonstrated that this 'spooky action at a distance' (as Einstein called it) may hold the key to quantum computing breakthroughs...",
            "science2.txt": "THE COSMIC WEB\n\nOur universe is not just a random scattering of galaxies but forms an intricate cosmic web of filaments and voids. This large-scale structure, revealed through advanced telescope observations and computer simulations, shows how dark matter acts as the scaffolding upon which visible matter assembles into the galaxies we observe today...",
            "history1.txt": "THE LOST CITY OF ATLANTIS\n\nWhile Plato's account of Atlantis was long considered allegorical, recent underwater archaeological discoveries suggest there may be truth to the ancient tale. Marine surveys off the coast of Spain have revealed structures that match Plato's descriptions with uncanny accuracy, dating to the exact time period he mentioned...",
            "history2.txt": "DECODING THE ENIGMA\n\nThe breaking of the German Enigma code by Allied cryptanalysts during World War II was one of the most significant intelligence victories in history. This breakthrough, largely credited to Alan Turing and his team at Bletchley Park, is estimated to have shortened the war by two years and saved countless lives...",
            "tech1.txt": "ARTIFICIAL INTELLIGENCE: BEYOND THE HYPE\n\nWhile AI has dominated tech headlines, the real revolution is happening behind the scenes. From drug discovery to climate modeling, machine learning algorithms are solving problems that were previously intractable. The next decade will see AI move from narrow applications to more general intelligence, fundamentally changing how we interact with technology...",
            "tech2.txt": "BLOCKCHAIN'S SECOND Act\n\nAfter the cryptocurrency boom and bust, blockchain technology is finding its true calling in supply chain management, digital identity, and secure voting systems. The key innovation isn't decentralization but the creation of tamper-proof, transparent records that multiple parties can trust without a central authority...",
            "health1.txt": "THE MICROBIOME REVOLUTION\n\nResearch into the human microbiome - the trillions of bacteria living in and on our bodies - is transforming our understanding of health. These microbial communities influence everything from digestion to mental health, and personalized microbiome therapies may soon become standard medical practice...",
            "health2.txt": "MINDFULNESS IN THE DIGITAL AGE\n\nAs screen time increases and attention spans decrease, neuroscientists are documenting the benefits of mindfulness practices. Regular meditation has been shown to reduce stress, improve focus, and even increase gray matter density in brain regions associated with memory and emotional regulation...",
            "business1.txt": "2023 MARKET OUTLOOK\n\nDespite economic headwinds, several sectors show strong growth potential. Renewable energy, cybersecurity, and healthcare technology are expected to outperform, while traditional retail and commercial real estate face continued challenges. Investors should focus on companies with strong cash flows and adaptable business models...",
            "business2.txt": "FROM GARAGE TO GLOBAL: STARTUP LESSONS\n\nAnalyzing the journeys of successful startups reveals common patterns: solving real problems, relentless focus on product-market fit, and ability to pivot when necessary. The most enduring companies aren't those with the most funding but those that create genuine value for their customers..."
        };

        // Navigation history stack
        let navigationStack = ['mainMenu'];
        let currentContentFile = '';
        let generatedTextContent = '';
        let audioContext;
        let audioBuffer;
        let audioSource;
        let isAudioPlaying = false;

        // DOM elements
        const mainMenu = document.getElementById('mainMenu');
        const bookCategories = document.getElementById('bookCategories');
        const booksList = document.getElementById('booksList');
        const booksCategoryTitle = document.getElementById('booksCategoryTitle');
        const articleCategories = document.getElementById('articleCategories');
        const articlesList = document.getElementById('articlesList');
        const articlesCategoryTitle = document.getElementById('articlesCategoryTitle');
        const generateText = document.getElementById('generateText');
        const teleprompterView = document.getElementById('teleprompterView');
        const teleprompterText = document.getElementById('teleprompterText');
        const headerControls = document.getElementById('headerControls');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const listenBtn = document.getElementById('listenBtn');
        const backBtn = document.getElementById('backBtn');
        const speedControl = document.getElementById('speedControl');
        const speedValue = document.getElementById('speedValue');
        const promptInput = document.getElementById('promptInput');
        const generatedContent = document.getElementById('generatedContent');
        const generatedText = document.getElementById('generatedText');
        const footerText = document.getElementById('footerText');

        // Show main menu
        function showMainMenu() {
            hideAllViews();
            mainMenu.classList.remove('hidden');
            headerControls.classList.add('hidden');
            navigationStack = ['mainMenu'];
            footerText.textContent = 'Select an option to begin using the teleprompter';
        }

        // Show book categories
        function showBookCategories() {
            hideAllViews();
            bookCategories.classList.remove('hidden');
            headerControls.classList.add('hidden');
            navigationStack.push('bookCategories');
            footerText.textContent = 'Select a book category to browse';
        }

        // Show article categories
        function showArticleCategories() {
            hideAllViews();
            articleCategories.classList.remove('hidden');
            headerControls.classList.add('hidden');
            navigationStack.push('articleCategories');
            footerText.textContent = 'Select an article category to browse';
        }

        // Show books for a category
        function showBooks(category) {
            hideAllViews();
            booksList.classList.remove('hidden');
            
            // Set category title
            const categoryTitles = {
                fiction: 'Fiction Books',
                science: 'Science Books',
                history: 'History Books'
            };
            booksCategoryTitle.textContent = categoryTitles[category];
            
            // Clear previous books
            booksList.querySelector('.grid').innerHTML = '';
            
            // Add books for the category
            bookData[category].forEach(book => {
                const bookElement = document.createElement('div');
                bookElement.className = 'card bg-gray-800 rounded-lg overflow-hidden cursor-pointer';
                bookElement.onclick = () => loadContent(book.file, book.title);
                
                bookElement.innerHTML = `
                    <img src="${book.image}" alt="${book.title}" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-bold">${book.title}</h3>
                    </div>
                `;
                
                booksList.querySelector('.grid').appendChild(bookElement);
            });
            
            navigationStack.push('booksList');
            footerText.textContent = `Browse ${categoryTitles[category]}`;
        }

        // Show articles for a category
        function showArticles(category) {
            hideAllViews();
            articlesList.classList.remove('hidden');
            
            // Set category title
            const categoryTitles = {
                technology: 'Technology Articles',
                health: 'Health Articles',
                business: 'Business Articles'
            };
            articlesCategoryTitle.textContent = categoryTitles[category];
            
            // Clear previous articles
            articlesList.querySelector('.grid').innerHTML = '';
            
            // Add articles for the category
            articleData[category].forEach(article => {
                const articleElement = document.createElement('div');
                articleElement.className = 'card bg-gray-800 rounded-lg overflow-hidden cursor-pointer';
                articleElement.onclick = () => loadContent(article.file, article.title);
                
                articleElement.innerHTML = `
                    <img src="${article.image}" alt="${article.title}" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-bold">${article.title}</h3>
                    </div>
                `;
                
                articlesList.querySelector('.grid').appendChild(articleElement);
            });
            
            navigationStack.push('articlesList');
            footerText.textContent = `Browse ${categoryTitles[category]}`;
        }

        // Show generate text view
        function showGenerateText() {
            hideAllViews();
            generateText.classList.remove('hidden');
            headerControls.classList.add('hidden');
            navigationStack.push('generateText');
            footerText.textContent = 'Enter a prompt to generate custom content';
        }

        // Show teleprompter view
        function showTeleprompterView() {
            hideAllViews();
            teleprompterView.classList.remove('hidden');
            headerControls.classList.remove('hidden');
            navigationStack.push('teleprompterView');
            footerText.textContent = 'Use the controls to manage the teleprompter';
        }

        // Hide all views
        function hideAllViews() {
            mainMenu.classList.add('hidden');
            bookCategories.classList.add('hidden');
            booksList.classList.add('hidden');
            articleCategories.classList.add('hidden');
            articlesList.classList.add('hidden');
            generateText.classList.add('hidden');
            teleprompterView.classList.add('hidden');
            generatedContent.classList.add('hidden');
        }

        // Load content into teleprompter
        function loadContent(filename, title) {
            currentContentFile = filename;
            
            // Format text into 5-word lines
            function formatTextToLines(text) {
                const words = text.split(/\s+/);
                const lines = [];
                
                for (let i = 0; i < words.length; i += 5) {
                    const lineWords = words.slice(i, i + 5);
                    lines.push(lineWords);
                }
                
                return lines;
            }

            // Get content from our "file system"
            const content = fileContents[filename];
            
            // Insert formatted content
            let formattedContent = `<div class="text-center text-4xl font-bold mb-8 text-blue-400">${title}</div>`;
            const paragraphs = content.split('\n\n');
            
            paragraphs.forEach(paragraph => {
                const lines = formatTextToLines(paragraph);
                lines.forEach(lineWords => {
                    formattedContent += '<div class="word-line">';
                    lineWords.forEach(word => {
                        formattedContent += `<span class="word">${word}</span>`;
                    });
                    formattedContent += '</div>';
                });
                // Add extra space between paragraphs
                formattedContent += '<div class="h-12"></div>';
            });
            
            teleprompterText.innerHTML = formattedContent;
            showTeleprompterView();
        }

        // Load generated content into teleprompter
        function loadGeneratedContent() {
            if (!generatedTextContent) return;
            
            // Format the generated content for teleprompter display
            function formatTextToLines(text) {
                const words = text.split(/\s+/);
                const lines = [];
                
                for (let i = 0; i < words.length; i += 5) {
                    const lineWords = words.slice(i, i + 5);
                    lines.push(lineWords);
                }
                
                return lines;
            }
            
            let formattedContent = `<div class="text-center text-4xl font-bold mb-8 text-purple-400">Generated Content</div>`;
            const paragraphs = generatedTextContent.split('\n\n');
            
            paragraphs.forEach(paragraph => {
                const lines = formatTextToLines(paragraph);
                lines.forEach(lineWords => {
                    formattedContent += '<div class="word-line">';
                    lineWords.forEach(word => {
                        formattedContent += `<span class="word">${word}</span>`;
                    });
                    formattedContent += '</div>';
                });
                // Add extra space between paragraphs
                formattedContent += '<div class="h-12"></div>';
            });
            
            teleprompterText.innerHTML = formattedContent;
            showTeleprompterView();
        }

        // Generate content using AI (simulated for now)
        function generateContent() {
            const prompt = promptInput.value.trim();
            if (!prompt) {
                alert('Please enter a prompt');
                return;
            }
            
            // Simulate API call with timeout
            promptInput.disabled = true;
            
            // Show loading state in teleprompter view
            teleprompterText.innerHTML = `
                <div class="text-center py-20">
                    <i class="fas fa-spinner fa-spin text-5xl text-purple-400 mb-4"></i>
                    <p class="text-2xl">Generating content...</p>
                </div>
            `;
            
            showTeleprompterView();
            
            // In a real app, this would call the Deepseek API
            setTimeout(() => {
                // Simulated response based on prompt
                let response = '';
                
                if (prompt.toLowerCase().includes('cyber security')) {
                    response = `CYBER SECURITY IN THE MODERN AGE\n\nThe digital landscape has become increasingly complex, with cyber threats evolving at an unprecedented pace. Recent years have seen a dramatic rise in sophisticated attacks targeting critical infrastructure, financial systems, and personal data.\n\nExperts agree that traditional security measures are no longer sufficient. The adoption of zero-trust architectures, AI-driven threat detection, and continuous employee training have become essential components of a robust cyber defense strategy.\n\nAs we move toward an increasingly connected world, the importance of cyber security cannot be overstated. Organizations must prioritize security at every level, from endpoint protection to cloud infrastructure, to safeguard against the growing threat of cybercrime.`;
                } else if (prompt.toLowerCase().includes('artificial intelligence')) {
                    response = `THE AI REVOLUTION: WHAT'S NEXT?\n\nArtificial Intelligence has transitioned from academic research to mainstream applications at a breathtaking pace. What began as simple pattern recognition has evolved into systems capable of generating human-like text, creating original artwork, and even writing functional code.\n\nThe next frontier for AI involves moving beyond narrow applications toward more general intelligence. Researchers are exploring techniques like meta-learning and neural architecture search to create systems that can adapt to new tasks with minimal additional training.\n\nWhile the potential benefits are enormous, ethical considerations around bias, transparency, and control remain critical challenges that must be addressed as AI systems become more powerful and pervasive in our daily lives.`;
                } else {
                    // Generic response for other prompts
                    response = `${prompt.toUpperCase()}\n\nThis is a simulated response to your prompt about "${prompt}". In a real implementation, this content would be generated by the Deepseek API based on your specific request.\n\nThe generated text would typically include several paragraphs of relevant, coherent content that addresses the topic you requested. The quality and depth of the response would depend on the specificity of your prompt and the capabilities of the AI model.\n\nFor demonstration purposes, this is placeholder text that shows where the actual generated content would appear. The real implementation would connect to the API endpoint you provide to fetch dynamic, AI-generated responses.`;
                }
                
                // Store the generated content
                generatedTextContent = response;
                
                // Create audio (simulated - in real app would use TTS API)
                createAudioFromText(response);
                
                // Format the content for teleprompter display
                loadGeneratedContent();
                
                promptInput.disabled = false;
            }, 2000);
        }

        // Create audio from text (simulated)
        function createAudioFromText(text) {
            // In a real app, this would call a Text-to-Speech API
            console.log('Audio would be generated from:', text.substring(0, 50) + '...');
            
            // For demo purposes, we'll just simulate that we have audio ready
            audioBuffer = 'simulated_audio_data';
        }

        // Play/pause audio
        function toggleAudio() {
            if (!audioBuffer) {
                alert('No audio available for this content');
                return;
            }
            
            if (isAudioPlaying) {
                // Pause audio
                if (audioSource) {
                    audioSource.stop();
                }
                listenBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i> Listen';
                isAudioPlaying = false;
            } else {
                // Play audio (simulated)
                listenBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
                isAudioPlaying = true;
                
                // In a real app, this would play the actual audio buffer
                console.log('Playing audio...');
                
                // Simulate audio ending after some time
                setTimeout(() => {
                    if (isAudioPlaying) {
                        listenBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i> Listen';
                        isAudioPlaying = false;
                    }
                }, 30000); // 30 seconds for demo
            }
        }

        // Navigation back
        function navigateBack() {
            if (navigationStack.length <= 1) return;
            
            navigationStack.pop();
            const previousView = navigationStack[navigationStack.length - 1];
            
            switch (previousView) {
                case 'mainMenu':
                    showMainMenu();
                    break;
                case 'bookCategories':
                    showBookCategories();
                    break;
                case 'booksList':
                    // We can't go directly back to books list as we don't store the category
                    // So just go back to book categories
                    navigationStack.pop();
                    showBookCategories();
                    break;
                case 'articleCategories':
                    showArticleCategories();
                    break;
                case 'articlesList':
                    // Same as books list
                    navigationStack.pop();
                    showArticleCategories();
                    break;
                case 'generateText':
                    showGenerateText();
                    break;
                case 'teleprompterView':
                    // Go back to wherever we came from
                    navigationStack.pop();
                    const viewBeforeTeleprompter = navigationStack[navigationStack.length - 1];
                    if (viewBeforeTeleprompter === 'generateText') {
                        showGenerateText();
                    } else {
                        // Default back to main menu if we don't know
                        showMainMenu();
                    }
                    break;
                default:
                    showMainMenu();
            }
        }

        // Teleprompter state
        let isPlaying = false;
        let scrollInterval;
        let scrollPosition = 0;
        let scrollSpeed = 5; // Default speed

        // Update speed display
        speedControl.addEventListener('input', function() {
            scrollSpeed = parseInt(this.value);
            speedValue.textContent = `${scrollSpeed}x`;
            
            if (isPlaying) {
                clearInterval(scrollInterval);
                startScrolling();
            }
        });

        // Play/Pause functionality
        playPauseBtn.addEventListener('click', function() {
            isPlaying = !isPlaying;
            
            if (isPlaying) {
                playPauseBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
                startScrolling();
            } else {
                playPauseBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Play';
                clearInterval(scrollInterval);
            }
        });

        // Listen button
        listenBtn.addEventListener('click', toggleAudio);

        // Back button
        backBtn.addEventListener('click', navigateBack);

        // Start scrolling function
        function startScrolling() {
            scrollInterval = setInterval(function() {
                scrollPosition += 0.5 * (scrollSpeed / 5);
                teleprompterText.scrollTop = scrollPosition;
                
                // Reset to top when reaching bottom
                if (scrollPosition >= teleprompterText.scrollHeight - teleprompterText.clientHeight) {
                    scrollPosition = 0;
                    teleprompterText.scrollTop = 0;
                }
            }, 16); // ~60fps
        }

        // Keyboard controls
        document.addEventListener('keydown', function(e) {
            // Spacebar to play/pause
            if (e.code === 'Space') {
                e.preventDefault();
                if (teleprompterView.classList.contains('hidden')) return;
                playPauseBtn.click();
            }
            
            // Arrow up to increase speed
            if (e.code === 'ArrowUp') {
                e.preventDefault();
                if (teleprompterView.classList.contains('hidden')) return;
                if (scrollSpeed < 20) {
                    speedControl.value = scrollSpeed + 1;
                    speedControl.dispatchEvent(new Event('input'));
                }
            }
            
            // Arrow down to decrease speed
            if (e.code === 'ArrowDown') {
                e.preventDefault();
                if (teleprompterView.classList.contains('hidden')) return;
                if (scrollSpeed > 1) {
                    speedControl.value = scrollSpeed - 1;
                    speedControl.dispatchEvent(new Event('input'));
                }
            }
            
            // Escape to go back
            if (e.code === 'Escape') {
                e.preventDefault();
                if (navigationStack.length > 1) {
                    navigateBack();
                }
            }
        });

        // Initialize
        showMainMenu();
    </script>
<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=sovitich28/sovitich-projects" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>