CodeAntidote commited on
Commit
ef36e43
·
verified ·
1 Parent(s): 0d6ea51
Files changed (1) hide show
  1. app(6).py +0 -601
app(6).py DELETED
@@ -1,601 +0,0 @@
1
- """Kids Rhyme Studio: simple, four-language Gradio app."""
2
-
3
- # UI_BUILD: dark-v3
4
-
5
- from audio_engine import make_sung_song
6
- from dataclasses import asdict
7
- import gradio as gr
8
- from rhyme_engine import parse_request, validate_lyric_for_audio, write_rhyme
9
- from themes import THEME_CHOICES
10
-
11
-
12
- THEME = gr.themes.Base().set(
13
- body_background_fill="#07152f",
14
- body_background_fill_dark="#07152f",
15
- body_text_color="#f7fbff",
16
- body_text_color_dark="#f7fbff",
17
- background_fill_primary="#07152f",
18
- background_fill_primary_dark="#07152f",
19
- background_fill_secondary="#10264a",
20
- background_fill_secondary_dark="#10264a",
21
- block_background_fill="#10264a",
22
- block_background_fill_dark="#10264a",
23
- block_border_color="#294b78",
24
- block_border_color_dark="#294b78",
25
- block_label_background_fill="#ff4f9a",
26
- block_label_background_fill_dark="#ff4f9a",
27
- block_label_text_color="#ffffff",
28
- block_label_text_color_dark="#ffffff",
29
- block_title_text_color="#ffffff",
30
- block_title_text_color_dark="#ffffff",
31
- input_background_fill="#f8fbff",
32
- input_background_fill_dark="#f8fbff",
33
- input_text_weight="500",
34
- input_placeholder_color="#7d8da3",
35
- input_placeholder_color_dark="#7d8da3",
36
- panel_background_fill="#10264a",
37
- panel_background_fill_dark="#10264a",
38
- accordion_text_color="#f7fbff",
39
- accordion_text_color_dark="#f7fbff",
40
- button_primary_background_fill="#ff4f9a",
41
- button_primary_background_fill_dark="#ff4f9a",
42
- button_primary_text_color="#ffffff",
43
- button_primary_text_color_dark="#ffffff",
44
- button_secondary_background_fill="#65c7ff",
45
- button_secondary_background_fill_dark="#65c7ff",
46
- button_secondary_text_color="#08213e",
47
- button_secondary_text_color_dark="#08213e",
48
- )
49
-
50
-
51
- CSS = r"""
52
- /* ==========================================================
53
- Kids Rhyme Studio — midnight playground theme
54
- High contrast, kid-friendly, and readable in light/dark OS modes.
55
- ========================================================== */
56
-
57
- :root {
58
- --kids-bg: #07152f;
59
- --kids-bg-2: #0a1d3d;
60
- --kids-card: #10264a;
61
- --kids-card-2: #142d56;
62
- --kids-ink: #f7fbff;
63
- --kids-muted: #b9c8df;
64
- --kids-pink: #ff4f9a;
65
- --kids-pink-2: #ff77b3;
66
- --kids-yellow: #ffd75e;
67
- --kids-blue: #65c7ff;
68
- --kids-mint: #7ce6c1;
69
- --kids-border: rgba(165, 194, 235, .22);
70
- --kids-input-ink: #15233b;
71
- }
72
-
73
- html, body, #root, #root > div, main, .app,
74
- .gradio-container,
75
- .gradio-container .main,
76
- .gradio-container .contain {
77
- background: linear-gradient(180deg, #07152f 0%, #0a1b37 56%, #07152f 100%) !important;
78
- color: var(--kids-ink) !important;
79
- }
80
-
81
- body {
82
- min-height: 100vh;
83
- }
84
-
85
- /* Force the entire Space canvas dark, not just the centered app. */
86
- body, #root, main, .app {
87
- min-height: 100vh !important;
88
- background: #07152f !important;
89
- }
90
-
91
-
92
- .gradio-container {
93
- max-width: 1180px !important;
94
- margin: 0 auto !important;
95
- padding: 28px 20px 40px !important;
96
- font-family: Inter, ui-rounded, "Nunito", system-ui, -apple-system, BlinkMacSystemFont,
97
- "Segoe UI", sans-serif !important;
98
- }
99
-
100
- /* Hero banner */
101
- #hero {
102
- position: relative;
103
- overflow: hidden;
104
- background:
105
- radial-gradient(circle at 0% 0%, rgba(255, 79, 154, .24), transparent 28%),
106
- radial-gradient(circle at 100% 100%, rgba(101, 199, 255, .22), transparent 27%),
107
- linear-gradient(135deg, #17366a 0%, #214a82 54%, #1c3e70 100%);
108
- border: 1px solid rgba(174, 208, 255, .28);
109
- border-radius: 30px;
110
- padding: 60px 34px 36px;
111
- margin: 4px 0 18px;
112
- text-align: center;
113
- box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
114
- }
115
-
116
- #hero:before,
117
- #hero:after {
118
- content: "";
119
- position: absolute;
120
- border-radius: 999px;
121
- pointer-events: none;
122
- }
123
-
124
- #hero:before {
125
- width: 155px;
126
- height: 155px;
127
- background: rgba(255, 97, 169, .16);
128
- left: -52px;
129
- top: -54px;
130
- }
131
-
132
- #hero:after {
133
- width: 135px;
134
- height: 135px;
135
- background: rgba(89, 198, 255, .16);
136
- right: -45px;
137
- bottom: -50px;
138
- }
139
-
140
- #hero-copyright {
141
- position: absolute;
142
- z-index: 3;
143
- top: 18px;
144
- left: 24px;
145
- color: #ffffff !important;
146
- font-size: 14px;
147
- font-weight: 900;
148
- letter-spacing: .04em;
149
- }
150
-
151
- #hero-badge {
152
- position: absolute;
153
- z-index: 3;
154
- top: 14px;
155
- right: 20px;
156
- display: inline-flex;
157
- align-items: center;
158
- gap: 6px;
159
- background: rgba(255, 215, 94, .14);
160
- border: 1px solid rgba(255, 224, 127, .55);
161
- color: #ffe792 !important;
162
- border-radius: 999px;
163
- padding: 8px 13px;
164
- font-size: 13px;
165
- font-weight: 800;
166
- white-space: nowrap;
167
- }
168
-
169
- #hero h1 {
170
- position: relative;
171
- z-index: 2;
172
- font-size: clamp(2.3rem, 5vw, 4rem);
173
- line-height: 1.04;
174
- margin: 0 0 12px;
175
- color: #ffffff !important;
176
- letter-spacing: -.04em;
177
- text-shadow: 0 3px 18px rgba(0, 0, 0, .20);
178
- }
179
-
180
- #hero p {
181
- position: relative;
182
- z-index: 2;
183
- max-width: 760px;
184
- margin: 0 auto;
185
- color: #e5efff !important;
186
- font-size: clamp(1rem, 2vw, 1.18rem);
187
- line-height: 1.6;
188
- }
189
-
190
- /* Three easy steps */
191
- #steps {
192
- display: flex;
193
- justify-content: center;
194
- align-items: center;
195
- gap: 9px;
196
- flex-wrap: wrap;
197
- margin: 10px 0 24px;
198
- }
199
-
200
- .step-pill {
201
- display: inline-flex;
202
- align-items: center;
203
- gap: 6px;
204
- padding: 9px 13px;
205
- border-radius: 999px;
206
- background: #102b52;
207
- border: 1px solid rgba(167, 201, 250, .20);
208
- color: #eef6ff !important;
209
- font-size: 13px;
210
- font-weight: 800;
211
- box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
212
- }
213
-
214
- .step-arrow {
215
- color: #7ebce8 !important;
216
- font-weight: 900;
217
- }
218
-
219
- /* Main cards */
220
- .studio-card {
221
- background: linear-gradient(180deg, #10264a 0%, #0f2344 100%) !important;
222
- border: 1px solid var(--kids-border) !important;
223
- border-radius: 25px !important;
224
- padding: 19px !important;
225
- box-shadow: 0 18px 38px rgba(0, 0, 0, .22) !important;
226
- }
227
-
228
- .card-title {
229
- margin: 0 0 5px;
230
- color: #ffffff !important;
231
- font-size: 19px;
232
- font-weight: 900;
233
- }
234
-
235
- .card-subtitle {
236
- margin: 0 0 14px;
237
- color: var(--kids-muted) !important;
238
- font-size: 13px;
239
- line-height: 1.5;
240
- }
241
-
242
- /* Gradio text and blocks */
243
- .gradio-container .block,
244
- .gradio-container .form,
245
- .gradio-container .wrap,
246
- .gradio-container .secondary-wrap,
247
- .gradio-container .panel,
248
- .gradio-container .container {
249
- color: var(--kids-ink) !important;
250
- }
251
-
252
- .gradio-container label,
253
- .gradio-container .label-wrap,
254
- .gradio-container .label-wrap span {
255
- color: #f7fbff !important;
256
- font-weight: 750 !important;
257
- }
258
-
259
- .gradio-container .info {
260
- color: #aebfd8 !important;
261
- }
262
-
263
- /* Inputs stay light for maximum readability */
264
- .gradio-container input,
265
- .gradio-container textarea,
266
- .gradio-container select {
267
- background: #f8fbff !important;
268
- color: var(--kids-input-ink) !important;
269
- border: 1px solid #bcd1ec !important;
270
- border-radius: 14px !important;
271
- box-shadow: none !important;
272
- }
273
-
274
- .gradio-container input::placeholder,
275
- .gradio-container textarea::placeholder {
276
- color: #7d8da3 !important;
277
- opacity: 1 !important;
278
- }
279
-
280
- /* Dropdown controls */
281
- .gradio-container [role="listbox"],
282
- .gradio-container [role="combobox"] {
283
- color: var(--kids-input-ink) !important;
284
- }
285
-
286
- /* Rhyme editor */
287
- #lyrics textarea {
288
- min-height: 330px !important;
289
- line-height: 1.8 !important;
290
- font-size: 1.04rem !important;
291
- background: #fbfdff !important;
292
- color: #17243a !important;
293
- }
294
-
295
- /* Buttons */
296
- #make-rhyme,
297
- #make-audio {
298
- min-height: 54px !important;
299
- border-radius: 16px !important;
300
- font-weight: 900 !important;
301
- font-size: 1.04rem !important;
302
- transition: transform .15s ease, box-shadow .15s ease !important;
303
- }
304
-
305
- #make-rhyme {
306
- background: linear-gradient(135deg, #ff3e91, #ff6dad) !important;
307
- border: 0 !important;
308
- color: #ffffff !important;
309
- box-shadow: 0 10px 22px rgba(255, 62, 145, .26) !important;
310
- }
311
-
312
- #make-audio {
313
- background: linear-gradient(135deg, #55c1ff, #78d0ff) !important;
314
- border: 0 !important;
315
- color: #08213e !important;
316
- box-shadow: 0 10px 22px rgba(85, 193, 255, .22) !important;
317
- }
318
-
319
- #make-rhyme:hover,
320
- #make-audio:hover {
321
- transform: translateY(-1px);
322
- }
323
-
324
- /* Accordion */
325
- .gradio-container .accordion {
326
- background: #132b50 !important;
327
- color: #f6fbff !important;
328
- border-color: rgba(170, 201, 242, .18) !important;
329
- border-radius: 16px !important;
330
- }
331
-
332
- .gradio-container .accordion button,
333
- .gradio-container .accordion span {
334
- color: #f6fbff !important;
335
- }
336
-
337
- /* Examples */
338
- .gradio-container table {
339
- background: #10264a !important;
340
- color: #f5f9ff !important;
341
- border-color: rgba(170, 201, 242, .18) !important;
342
- }
343
-
344
- .gradio-container table th {
345
- background: #17335f !important;
346
- color: #ffffff !important;
347
- border-color: rgba(170, 201, 242, .18) !important;
348
- }
349
-
350
- .gradio-container table td {
351
- background: #122b51 !important;
352
- color: #edf5ff !important;
353
- border-color: rgba(170, 201, 242, .13) !important;
354
- }
355
-
356
- /* Audio/result area */
357
- #result-note {
358
- background: #0c1f3d !important;
359
- border: 1px solid rgba(118, 188, 246, .24) !important;
360
- border-radius: 16px;
361
- padding: 12px 14px;
362
- color: #d7e7fb !important;
363
- margin-top: 5px;
364
- }
365
-
366
- #result-note p,
367
- #result-note span {
368
- color: #d7e7fb !important;
369
- }
370
-
371
- .gradio-container audio {
372
- filter: none !important;
373
- }
374
-
375
- #safety-note {
376
- margin: 20px auto 0;
377
- max-width: 960px;
378
- text-align: center;
379
- color: #9eb1cb !important;
380
- font-size: 12.5px;
381
- line-height: 1.55;
382
- }
383
-
384
- /* Mobile */
385
- @media (max-width: 700px) {
386
- .gradio-container {
387
- padding: 18px 12px 28px !important;
388
- }
389
-
390
- #hero {
391
- padding: 68px 18px 28px;
392
- border-radius: 22px;
393
- }
394
-
395
- #hero h1 {
396
- font-size: 2.25rem;
397
- }
398
-
399
- #hero-copyright {
400
- top: 16px;
401
- left: 17px;
402
- font-size: 12px;
403
- }
404
-
405
- #hero-badge {
406
- top: 12px;
407
- right: 14px;
408
- font-size: 11px;
409
- padding: 6px 9px;
410
- }
411
-
412
- #steps {
413
- margin-bottom: 17px;
414
- }
415
-
416
- .step-arrow {
417
- display: none;
418
- }
419
-
420
- .studio-card {
421
- padding: 13px !important;
422
- border-radius: 19px !important;
423
- }
424
-
425
- #lyrics textarea {
426
- min-height: 250px !important;
427
- }
428
- }
429
- """
430
-
431
-
432
- def create_rhyme(name, words, goal, language, mood, theme, use_ai):
433
- try:
434
- req = parse_request(name, words, goal, language, mood, theme)
435
- except ValueError as exc:
436
- raise gr.Error(str(exc)) from exc
437
- rhyme, writer = write_rhyme(req, use_ai)
438
- return rhyme, asdict(req), f"✨ {language} rhyme ready · {theme} ({writer}). You can edit it, then sing it.", None
439
-
440
-
441
- def create_audio(lyrics, settings, name, words, goal, language, mood, theme):
442
- try:
443
- if not settings:
444
- raise ValueError("Write a rhyme first, then make its song.")
445
- req = parse_request(name, words, goal, language, mood, theme)
446
- if asdict(req) != settings:
447
- raise ValueError("Your options changed. Click Make my rhyme again so the lyrics match your language and theme.")
448
- safe_lyrics = validate_lyric_for_audio(lyrics)
449
- result, status = make_sung_song(safe_lyrics, req.language, req.mood, req.theme, req.goal)
450
- return result, f"🎤 {language} · {theme} — {status}"
451
- except (ValueError, RuntimeError) as exc:
452
- raise gr.Error(str(exc)) from exc
453
-
454
-
455
- with gr.Blocks(
456
- title="Kids Rhyme Studio",
457
- theme=THEME,
458
- css=CSS,
459
- ) as demo:
460
- gr.HTML("""
461
- <section id="hero">
462
- <div id="hero-copyright">© JDM</div>
463
- <div id="hero-badge">🌈 Made for little learners</div>
464
- <h1>🎵 Kids Rhyme Studio</h1>
465
- <p>Turn a child's favorite words and learning goal into a fun little rhyme — then make it sing.</p>
466
- </section>
467
-
468
- <div id="steps" aria-label="How it works">
469
- <span class="step-pill">✏️ 1. Add words</span>
470
- <span class="step-arrow">›</span>
471
- <span class="step-pill">✨ 2. Make a rhyme</span>
472
- <span class="step-arrow">›</span>
473
- <span class="step-pill">🎤 3. Sing & download</span>
474
- </div>
475
- """)
476
-
477
- settings = gr.State(value=None)
478
-
479
- with gr.Row(equal_height=False):
480
- with gr.Column(scale=1, elem_classes=["studio-card"]):
481
- gr.HTML("""
482
- <div class="card-title">🧸 Build the rhyme</div>
483
- <div class="card-subtitle">Keep it simple: add a name, a few favorite words, then choose a lesson.</div>
484
- """)
485
-
486
- name = gr.Textbox(
487
- label="Child's first name (optional)",
488
- placeholder="Maya",
489
- max_length=32,
490
- )
491
- words = gr.Textbox(
492
- label="Words to use (1–10)",
493
- placeholder="moon, bunny, stars, rainbow…",
494
- info="Separate up to 10 words with commas. In Telugu, try Telugu words.",
495
- max_length=300,
496
- )
497
-
498
- with gr.Row():
499
- language = gr.Dropdown(
500
- ["English", "Español", "తెలుగు", "Deutsch"],
501
- value="English",
502
- label="🌎 Language",
503
- )
504
- mood = gr.Dropdown(
505
- ["Bouncy", "Calm"],
506
- value="Bouncy",
507
- label="🎶 Music mood",
508
- )
509
-
510
- theme = gr.Dropdown(
511
- THEME_CHOICES,
512
- value="Good Habits",
513
- label="🌟 Song theme",
514
- )
515
- goal = gr.Textbox(
516
- label="Theme prompt (optional; required for Custom theme)",
517
- placeholder="Teach washing hands before meals and putting toys away",
518
- info="Use the chosen language for your words and prompt. Leave blank to use the theme's suggested lesson.",
519
- lines=2,
520
- max_length=160,
521
- )
522
-
523
- with gr.Accordion("🤖 Optional: AI writer", open=False):
524
- use_ai = gr.Checkbox(
525
- label="Use AI for more varied lyrics",
526
- info="If enabled, the name, words, theme, and prompt are sent to a hosted model. A Space token must be configured.",
527
- value=False,
528
- )
529
-
530
- rhyme_button = gr.Button(
531
- "✨ Make my rhyme",
532
- variant="primary",
533
- elem_id="make-rhyme",
534
- )
535
-
536
- gr.Examples(
537
- examples=[
538
- ["Maya", "soap, toothbrush, toys", "", "English", "Bouncy", "Good Habits"],
539
- ["Maya", "moon, bunny, stars, rainbow, puddle, pencil, apple, rocket, kitten, garden",
540
- "", "English", "Bouncy", "Animals & Nature"],
541
- ["Sofía", "luna, conejo, estrellas", "", "Español", "Calm", "Bedtime"],
542
- ["అను", "చందమామ, బొమ్మ, నక్షత్రం", "", "తెలుగు", "Calm", "Bedtime"],
543
- ["Emil", "Apfel, Hase, Sterne", "", "Deutsch", "Bouncy", "Counting"],
544
- ["Maya", "bus, school, friends", "Feeling brave on the first day of school", "English", "Bouncy", "Custom theme"],
545
- ],
546
- inputs=[name, words, goal, language, mood, theme],
547
- label="Try an example",
548
- )
549
-
550
- with gr.Column(scale=1, elem_classes=["studio-card"]):
551
- gr.HTML("""
552
- <div class="card-title">🎨 Your rhyme</div>
553
- <div class="card-subtitle">Read it, change any words you like, then turn it into a song.</div>
554
- """)
555
-
556
- lyrics = gr.Textbox(
557
- label="Your rhyme • you can edit it",
558
- lines=13,
559
- max_lines=15,
560
- buttons=["copy"],
561
- elem_id="lyrics",
562
- )
563
- audio_button = gr.Button(
564
- "🎤 Sing my rhyme",
565
- elem_id="make-audio",
566
- )
567
- audio = gr.Audio(
568
- label="🎧 Sung song • listen or download WAV",
569
- interactive=False,
570
- buttons=["download"],
571
- )
572
- status = gr.Markdown(
573
- "Your rhyme will appear here. Song creation uses a GPU and may take a minute.",
574
- elem_id="result-note",
575
- )
576
-
577
- gr.HTML(
578
- """
579
- <div id="safety-note">
580
- Made for playful practice. A parent should review each rhyme. The song model sings the rhyme;
581
- pronunciation and exact words can vary. Use a nickname; this app keeps no account or rhyme database.
582
- </div>
583
- """
584
- )
585
-
586
- rhyme_button.click(
587
- create_rhyme,
588
- [name, words, goal, language, mood, theme, use_ai],
589
- [lyrics, settings, status, audio],
590
- concurrency_limit=2,
591
- )
592
- audio_button.click(
593
- create_audio,
594
- [lyrics, settings, name, words, goal, language, mood, theme],
595
- [audio, status],
596
- concurrency_limit=1,
597
- )
598
-
599
-
600
- if __name__ == "__main__":
601
- demo.queue().launch()