Replace Kids Rhyme Studio with clean updated build

app.py

@@ -0,0 +1,507 @@
+"""Kids Rhyme Studio: simple, four-language Gradio app."""
+
+from audio_engine import make_sung_song
+from dataclasses import asdict
+import gradio as gr
+from rhyme_engine import parse_request, validate_lyric_for_audio, write_rhyme
+from themes import THEME_CHOICES
+
+
+CSS = r"""
+/* ==========================================================
+   Kids Rhyme Studio — bright, simple, parent-friendly UI
+   The explicit light colors keep the Space white even when
+   the visitor's browser/OS is using dark mode.
+   ========================================================== */
+
+:root {
+    --kids-ink: #233047;
+    --kids-muted: #68758a;
+    --kids-pink: #ff4f91;
+    --kids-pink-dark: #e93479;
+    --kids-yellow: #ffd65a;
+    --kids-blue: #60c6ff;
+    --kids-mint: #82e3bd;
+    --kids-border: #e6edf7;
+    --kids-soft: #f7faff;
+}
+
+html, body,
+.gradio-container,
+.gradio-container .main,
+.gradio-container .contain {
+    background: #ffffff !important;
+    color: var(--kids-ink) !important;
+}
+
+.gradio-container {
+    max-width: 1160px !important;
+    margin: 0 auto !important;
+    padding: 0 20px 36px !important;
+    font-family: Inter, ui-rounded, "Nunito", system-ui, -apple-system, BlinkMacSystemFont,
+                 "Segoe UI", sans-serif !important;
+}
+
+/* Top bar */
+#top-bar {
+    min-height: 54px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 12px 2px 8px;
+    color: var(--kids-ink);
+}
+
+#copyright {
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: .03em;
+    white-space: nowrap;
+}
+
+#top-badge {
+    background: #fff7cf;
+    border: 1px solid #ffe58a;
+    color: #6e5511;
+    border-radius: 999px;
+    padding: 7px 12px;
+    font-size: 13px;
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+/* Hero */
+#hero {
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(135deg, #fff4f8 0%, #fffbed 54%, #eef9ff 100%);
+    border: 1px solid #f3dfe9;
+    border-radius: 28px;
+    padding: 34px 32px 30px;
+    margin: 6px 0 16px;
+    text-align: center;
+    box-shadow: 0 12px 36px rgba(44, 62, 95, .07);
+}
+
+#hero:before,
+#hero:after {
+    content: "";
+    position: absolute;
+    border-radius: 999px;
+    opacity: .45;
+    pointer-events: none;
+}
+
+#hero:before {
+    width: 120px;
+    height: 120px;
+    background: #ffd9e8;
+    left: -42px;
+    top: -46px;
+}
+
+#hero:after {
+    width: 105px;
+    height: 105px;
+    background: #cceeff;
+    right: -35px;
+    bottom: -44px;
+}
+
+#hero h1 {
+    position: relative;
+    z-index: 1;
+    font-size: clamp(2.15rem, 5vw, 3.7rem);
+    line-height: 1.05;
+    margin: 0 0 10px;
+    color: #31233c !important;
+    letter-spacing: -.035em;
+}
+
+#hero p {
+    position: relative;
+    z-index: 1;
+    max-width: 720px;
+    margin: 0 auto;
+    color: #62566d !important;
+    font-size: clamp(1rem, 2vw, 1.16rem);
+    line-height: 1.6;
+}
+
+/* Three easy steps */
+#steps {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin: 8px 0 22px;
+}
+
+.step-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: #ffffff;
+    border: 1px solid var(--kids-border);
+    color: #506077;
+    font-size: 13px;
+    font-weight: 750;
+    box-shadow: 0 3px 12px rgba(44, 62, 95, .04);
+}
+
+.step-arrow {
+    color: #a6b1c1;
+    font-weight: 900;
+}
+
+/* Main cards */
+.studio-card {
+    background: #ffffff !important;
+    border: 1px solid var(--kids-border) !important;
+    border-radius: 24px !important;
+    padding: 18px !important;
+    box-shadow: 0 10px 30px rgba(44, 62, 95, .065) !important;
+}
+
+.card-title {
+    margin: 0 0 4px;
+    color: var(--kids-ink);
+    font-size: 18px;
+    font-weight: 850;
+}
+
+.card-subtitle {
+    margin: 0 0 12px;
+    color: var(--kids-muted);
+    font-size: 13px;
+    line-height: 1.45;
+}
+
+/* Force Gradio blocks/inputs to remain light */
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .wrap,
+.gradio-container .secondary-wrap,
+.gradio-container .panel,
+.gradio-container .container {
+    color: var(--kids-ink) !important;
+}
+
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+    background: #fbfdff !important;
+    color: var(--kids-ink) !important;
+    border-color: #dfe7f1 !important;
+    border-radius: 14px !important;
+}
+
+.gradio-container input::placeholder,
+.gradio-container textarea::placeholder {
+    color: #9ba7b7 !important;
+    opacity: 1 !important;
+}
+
+.gradio-container label,
+.gradio-container .label-wrap,
+.gradio-container .label-wrap span,
+.gradio-container .info {
+    color: var(--kids-ink) !important;
+}
+
+.gradio-container .info {
+    color: var(--kids-muted) !important;
+}
+
+/* Rhyme editor */
+#lyrics textarea {
+    min-height: 330px !important;
+    line-height: 1.8 !important;
+    font-size: 1.04rem !important;
+    background: #fcfdff !important;
+}
+
+/* Buttons */
+#make-rhyme,
+#make-audio {
+    min-height: 52px !important;
+    border-radius: 16px !important;
+    font-weight: 850 !important;
+    font-size: 1.03rem !important;
+    transition: transform .15s ease, box-shadow .15s ease !important;
+}
+
+#make-rhyme {
+    background: linear-gradient(135deg, var(--kids-pink), #ff6ca7) !important;
+    border: 0 !important;
+    color: #ffffff !important;
+    box-shadow: 0 8px 18px rgba(255, 79, 145, .22) !important;
+}
+
+#make-audio {
+    background: linear-gradient(135deg, #52bdf8, #6fcbff) !important;
+    border: 0 !important;
+    color: #ffffff !important;
+    box-shadow: 0 8px 18px rgba(74, 184, 244, .20) !important;
+}
+
+#make-rhyme:hover,
+#make-audio:hover {
+    transform: translateY(-1px);
+}
+
+/* Accordion and examples */
+.gradio-container .accordion,
+.gradio-container table {
+    background: #ffffff !important;
+    color: var(--kids-ink) !important;
+    border-color: var(--kids-border) !important;
+}
+
+.gradio-container table th,
+.gradio-container table td {
+    background: #ffffff !important;
+    color: var(--kids-ink) !important;
+    border-color: #edf1f7 !important;
+}
+
+/* Audio/result area */
+#result-note {
+    background: #f7fbff;
+    border: 1px solid #e2eef9;
+    border-radius: 16px;
+    padding: 11px 13px;
+    color: #506077;
+    margin-top: 4px;
+}
+
+#safety-note {
+    margin: 18px auto 0;
+    max-width: 960px;
+    text-align: center;
+    color: #7c8798 !important;
+    font-size: 12.5px;
+    line-height: 1.55;
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+    .gradio-container {
+        padding: 0 12px 24px !important;
+    }
+
+    #top-bar {
+        min-height: 48px;
+        padding-top: 8px;
+    }
+
+    #top-badge {
+        font-size: 11px;
+        padding: 6px 9px;
+    }
+
+    #hero {
+        padding: 26px 18px 23px;
+        border-radius: 22px;
+    }
+
+    #hero h1 {
+        font-size: 2.25rem;
+    }
+
+    #steps {
+        margin-bottom: 16px;
+    }
+
+    .step-arrow {
+        display: none;
+    }
+
+    .studio-card {
+        padding: 13px !important;
+        border-radius: 19px !important;
+    }
+
+    #lyrics textarea {
+        min-height: 250px !important;
+    }
+}
+"""
+
+
+def create_rhyme(name, words, goal, language, mood, theme, use_ai):
+    try:
+        req = parse_request(name, words, goal, language, mood, theme)
+    except ValueError as exc:
+        raise gr.Error(str(exc)) from exc
+    rhyme, writer = write_rhyme(req, use_ai)
+    return rhyme, asdict(req), f"✨ {language} rhyme ready · {theme} ({writer}). You can edit it, then sing it.", None
+
+
+def create_audio(lyrics, settings, name, words, goal, language, mood, theme):
+    try:
+        if not settings:
+            raise ValueError("Write a rhyme first, then make its song.")
+        req = parse_request(name, words, goal, language, mood, theme)
+        if asdict(req) != settings:
+            raise ValueError("Your options changed. Click Make my rhyme again so the lyrics match your language and theme.")
+        safe_lyrics = validate_lyric_for_audio(lyrics)
+        result, status = make_sung_song(safe_lyrics, req.language, req.mood, req.theme, req.goal)
+        return result, f"🎤 {language} · {theme} — {status}"
+    except (ValueError, RuntimeError) as exc:
+        raise gr.Error(str(exc)) from exc
+
+
+with gr.Blocks(title="Kids Rhyme Studio") as demo:
+    gr.HTML("""
+      <header id="top-bar">
+        <div id="copyright">© JDM</div>
+        <div id="top-badge">🌈 Made for little learners</div>
+      </header>
+
+      <section id="hero">
+        <h1>🎵 Kids Rhyme Studio</h1>
+        <p>Turn a child's favorite words and learning goal into a fun little rhyme — then make it sing.</p>
+      </section>
+
+      <div id="steps" aria-label="How it works">
+        <span class="step-pill">✏️ 1. Add words</span>
+        <span class="step-arrow">›</span>
+        <span class="step-pill">✨ 2. Make a rhyme</span>
+        <span class="step-arrow">›</span>
+        <span class="step-pill">🎤 3. Sing & download</span>
+      </div>
+    """)
+
+    settings = gr.State(value=None)
+
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=1, elem_classes=["studio-card"]):
+            gr.HTML("""
+                <div class="card-title">🧸 Build the rhyme</div>
+                <div class="card-subtitle">Keep it simple: add a name, a few favorite words, then choose a lesson.</div>
+            """)
+
+            name = gr.Textbox(
+                label="Child's first name (optional)",
+                placeholder="Maya",
+                max_length=32,
+            )
+            words = gr.Textbox(
+                label="Words to use (1–10)",
+                placeholder="moon, bunny, stars, rainbow…",
+                info="Separate up to 10 words with commas. In Telugu, try Telugu words.",
+                max_length=300,
+            )
+
+            with gr.Row():
+                language = gr.Dropdown(
+                    ["English", "Español", "తెలుగు", "Deutsch"],
+                    value="English",
+                    label="🌎 Language",
+                )
+                mood = gr.Dropdown(
+                    ["Bouncy", "Calm"],
+                    value="Bouncy",
+                    label="🎶 Music mood",
+                )
+
+            theme = gr.Dropdown(
+                THEME_CHOICES,
+                value="Good Habits",
+                label="🌟 Song theme",
+            )
+            goal = gr.Textbox(
+                label="Theme prompt (optional; required for Custom theme)",
+                placeholder="Teach washing hands before meals and putting toys away",
+                info="Use the chosen language for your words and prompt. Leave blank to use the theme's suggested lesson.",
+                lines=2,
+                max_length=160,
+            )
+
+            with gr.Accordion("🤖 Optional: AI writer", open=False):
+                use_ai = gr.Checkbox(
+                    label="Use AI for more varied lyrics",
+                    info="If enabled, the name, words, theme, and prompt are sent to a hosted model. A Space token must be configured.",
+                    value=False,
+                )
+
+            rhyme_button = gr.Button(
+                "✨ Make my rhyme",
+                variant="primary",
+                elem_id="make-rhyme",
+            )
+
+            gr.Examples(
+                examples=[
+                    ["Maya", "soap, toothbrush, toys", "", "English", "Bouncy", "Good Habits"],
+                    ["Maya", "moon, bunny, stars, rainbow, puddle, pencil, apple, rocket, kitten, garden",
+                     "", "English", "Bouncy", "Animals & Nature"],
+                    ["Sofía", "luna, conejo, estrellas", "", "Español", "Calm", "Bedtime"],
+                    ["అను", "చందమామ, బొమ్మ, నక్షత్రం", "", "తెలుగు", "Calm", "Bedtime"],
+                    ["Emil", "Apfel, Hase, Sterne", "", "Deutsch", "Bouncy", "Counting"],
+                    ["Maya", "bus, school, friends", "Feeling brave on the first day of school", "English", "Bouncy", "Custom theme"],
+                ],
+                inputs=[name, words, goal, language, mood, theme],
+                label="Try an example",
+            )
+
+        with gr.Column(scale=1, elem_classes=["studio-card"]):
+            gr.HTML("""
+                <div class="card-title">🎨 Your rhyme</div>
+                <div class="card-subtitle">Read it, change any words you like, then turn it into a song.</div>
+            """)
+
+            lyrics = gr.Textbox(
+                label="Your rhyme • you can edit it",
+                lines=13,
+                max_lines=15,
+                buttons=["copy"],
+                elem_id="lyrics",
+            )
+            audio_button = gr.Button(
+                "🎤 Sing my rhyme",
+                elem_id="make-audio",
+            )
+            audio = gr.Audio(
+                label="🎧 Sung song • listen or download WAV",
+                interactive=False,
+                buttons=["download"],
+            )
+            status = gr.Markdown(
+                "Your rhyme will appear here. Song creation uses a GPU and may take a minute.",
+                elem_id="result-note",
+            )
+
+    gr.HTML(
+        """
+        <div id="safety-note">
+          Made for playful practice. A parent should review each rhyme. The song model sings the rhyme;
+          pronunciation and exact words can vary. Use a nickname; this app keeps no account or rhyme database.
+        </div>
+        """
+    )
+
+    rhyme_button.click(
+        create_rhyme,
+        [name, words, goal, language, mood, theme, use_ai],
+        [lyrics, settings, status, audio],
+        concurrency_limit=2,
+    )
+    audio_button.click(
+        create_audio,
+        [lyrics, settings, name, words, goal, language, mood, theme],
+        [audio, status],
+        concurrency_limit=1,
+    )
+
+
+if __name__ == "__main__":
+    demo.queue().launch(
+        theme=gr.themes.Soft(primary_hue="pink", secondary_hue="sky", neutral_hue="slate"),
+        css=CSS,
+    )