app.py

"""Kids Rhyme Studio: simple, four-language Gradio app."""

# UI_BUILD: dark-v3

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


THEME = gr.themes.Base().set(
    body_background_fill="#07152f",
    body_background_fill_dark="#07152f",
    body_text_color="#f7fbff",
    body_text_color_dark="#f7fbff",
    background_fill_primary="#07152f",
    background_fill_primary_dark="#07152f",
    background_fill_secondary="#10264a",
    background_fill_secondary_dark="#10264a",
    block_background_fill="#10264a",
    block_background_fill_dark="#10264a",
    block_border_color="#294b78",
    block_border_color_dark="#294b78",
    block_label_background_fill="#ff4f9a",
    block_label_background_fill_dark="#ff4f9a",
    block_label_text_color="#ffffff",
    block_label_text_color_dark="#ffffff",
    block_title_text_color="#ffffff",
    block_title_text_color_dark="#ffffff",
    input_background_fill="#f8fbff",
    input_background_fill_dark="#f8fbff",
    input_text_weight="500",
    input_placeholder_color="#7d8da3",
    input_placeholder_color_dark="#7d8da3",
    panel_background_fill="#10264a",
    panel_background_fill_dark="#10264a",
    accordion_text_color="#f7fbff",
    accordion_text_color_dark="#f7fbff",
    button_primary_background_fill="#ff4f9a",
    button_primary_background_fill_dark="#ff4f9a",
    button_primary_text_color="#ffffff",
    button_primary_text_color_dark="#ffffff",
    button_secondary_background_fill="#65c7ff",
    button_secondary_background_fill_dark="#65c7ff",
    button_secondary_text_color="#08213e",
    button_secondary_text_color_dark="#08213e",
)


CSS = r"""
/* ==========================================================
   Kids Rhyme Studio — midnight playground theme
   High contrast, kid-friendly, and readable in light/dark OS modes.
   ========================================================== */

:root {
    --kids-bg: #07152f;
    --kids-bg-2: #0a1d3d;
    --kids-card: #10264a;
    --kids-card-2: #142d56;
    --kids-ink: #f7fbff;
    --kids-muted: #b9c8df;
    --kids-pink: #ff4f9a;
    --kids-pink-2: #ff77b3;
    --kids-yellow: #ffd75e;
    --kids-blue: #65c7ff;
    --kids-mint: #7ce6c1;
    --kids-border: rgba(165, 194, 235, .22);
    --kids-input-ink: #15233b;
}

html, body {
    min-height: 100vh !important;
    margin: 0 !important;
    background: radial-gradient(ellipse at 50% 0%, #0d2350 0%, #07152f 45%, #030812 100%) fixed !important;
    color: var(--kids-ink) !important;
}

body,
gradio-app,
#root,
#root > div,
main,
.app,
.gradio-container,
.gradio-container .main,
.gradio-container .contain {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--kids-ink) !important;
}


.gradio-container {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 28px 20px 40px !important;
    font-family: Inter, ui-rounded, "Nunito", system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif !important;
}

/* Hero banner */
#hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 79, 154, .24), transparent 28%),
        radial-gradient(circle at 100% 100%, rgba(101, 199, 255, .22), transparent 27%),
        linear-gradient(135deg, #17366a 0%, #214a82 54%, #1c3e70 100%);
    border: 1px solid rgba(174, 208, 255, .28);
    border-radius: 30px;
    padding: 60px 34px 36px;
    margin: 4px 0 18px;
    text-align: center;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
}

#hero:before,
#hero:after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

#hero:before {
    width: 155px;
    height: 155px;
    background: rgba(255, 97, 169, .16);
    left: -52px;
    top: -54px;
}

#hero:after {
    width: 135px;
    height: 135px;
    background: rgba(89, 198, 255, .16);
    right: -45px;
    bottom: -50px;
}

#hero-copyright {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 24px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .04em;
}

#hero-badge {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 215, 94, .14);
    border: 1px solid rgba(255, 224, 127, .55);
    color: #ffe792 !important;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

#hero h1 {
    position: relative;
    z-index: 2;
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height: 1.04;
    margin: 0 0 12px;
    color: #ffffff !important;
    letter-spacing: -.04em;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .20);
}

#hero p {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    color: #e5efff !important;
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.6;
}

/* Three easy steps */
#steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 10px 0 24px;
}

.step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 999px;
    background: #102b52;
    border: 1px solid rgba(167, 201, 250, .20);
    color: #eef6ff !important;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}

.step-arrow {
    color: #7ebce8 !important;
    font-weight: 900;
}

/* Main cards */
.studio-card {
    background: linear-gradient(180deg, #10264a 0%, #0f2344 100%) !important;
    border: 1px solid var(--kids-border) !important;
    border-radius: 25px !important;
    padding: 19px !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22) !important;
}

.card-title {
    margin: 0 0 5px;
    color: #ffffff !important;
    font-size: 19px;
    font-weight: 900;
}

.card-subtitle {
    margin: 0 0 14px;
    color: var(--kids-muted) !important;
    font-size: 13px;
    line-height: 1.5;
}

/* Gradio text and blocks */
.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 label,
.gradio-container .label-wrap,
.gradio-container .label-wrap span {
    color: #f7fbff !important;
    font-weight: 750 !important;
}

.gradio-container .info {
    color: #aebfd8 !important;
}

/* Inputs stay light for maximum readability */
.gradio-container input,
.gradio-container textarea,
.gradio-container select {
    background: #f8fbff !important;
    color: var(--kids-input-ink) !important;
    border: 1px solid #bcd1ec !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.gradio-container input::placeholder,
.gradio-container textarea::placeholder {
    color: #7d8da3 !important;
    opacity: 1 !important;
}

/* Dropdown controls */
.gradio-container [role="listbox"],
.gradio-container [role="combobox"] {
    color: var(--kids-input-ink) !important;
}

/* Rhyme editor */
#lyrics textarea {
    min-height: 330px !important;
    line-height: 1.8 !important;
    font-size: 1.04rem !important;
    background: #fbfdff !important;
    color: #17243a !important;
}

/* Buttons */
#make-rhyme,
#make-audio {
    min-height: 54px !important;
    border-radius: 16px !important;
    font-weight: 900 !important;
    font-size: 1.04rem !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

#make-rhyme {
    background: linear-gradient(135deg, #ff3e91, #ff6dad) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(255, 62, 145, .26) !important;
}

#make-audio {
    background: linear-gradient(135deg, #55c1ff, #78d0ff) !important;
    border: 0 !important;
    color: #08213e !important;
    box-shadow: 0 10px 22px rgba(85, 193, 255, .22) !important;
}

#make-rhyme:hover,
#make-audio:hover {
    transform: translateY(-1px);
}

/* Accordion */
.gradio-container .accordion {
    background: #132b50 !important;
    color: #f6fbff !important;
    border-color: rgba(170, 201, 242, .18) !important;
    border-radius: 16px !important;
}

.gradio-container .accordion button,
.gradio-container .accordion span {
    color: #f6fbff !important;
}

/* Examples */
.gradio-container table {
    background: #10264a !important;
    color: #f5f9ff !important;
    border-color: rgba(170, 201, 242, .18) !important;
}

.gradio-container table th {
    background: #17335f !important;
    color: #ffffff !important;
    border-color: rgba(170, 201, 242, .18) !important;
}

.gradio-container table td {
    background: #122b51 !important;
    color: #edf5ff !important;
    border-color: rgba(170, 201, 242, .13) !important;
}

/* Audio/result area */
#result-note {
    background: #0c1f3d !important;
    border: 1px solid rgba(118, 188, 246, .24) !important;
    border-radius: 16px;
    padding: 12px 14px;
    color: #d7e7fb !important;
    margin-top: 5px;
}

#result-note p,
#result-note span {
    color: #d7e7fb !important;
}

.gradio-container audio {
    filter: none !important;
}

#safety-note {
    margin: 20px auto 0;
    max-width: 960px;
    text-align: center;
    color: #9eb1cb !important;
    font-size: 12.5px;
    line-height: 1.55;
}

/* Mobile */
/* Twinkling stars: two fixed layers behind the app */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, transparent),
        radial-gradient(1px 1px at 90px 120px, #cfe8ff, transparent),
        radial-gradient(2px 2px at 160px 70px, #ffffff, transparent),
        radial-gradient(1px 1px at 230px 180px, #ffe9a8, transparent),
        radial-gradient(1.5px 1.5px at 60px 210px, #ffffff, transparent),
        radial-gradient(1px 1px at 300px 40px, #ffd0e6, transparent);
    background-size: 340px 260px;
    animation: twinkle 4s ease-in-out infinite;
}

body::after {
    background-image:
        radial-gradient(2px 2px at 50px 60px, #ffe9a8, transparent),
        radial-gradient(1.5px 1.5px at 210px 150px, #ffffff, transparent),
        radial-gradient(2.5px 2.5px at 330px 90px, #ffd0e6, transparent),
        radial-gradient(1px 1px at 120px 300px, #cfe8ff, transparent),
        radial-gradient(2px 2px at 400px 260px, #ffffff, transparent);
    background-size: 470px 390px;
    animation: twinkle 6s ease-in-out infinite 2s;
}

@keyframes twinkle {
    0%, 100% { opacity: .30; }
    50%      { opacity: 1; }
}

.gradio-container {
    position: relative !important;
    z-index: 1;
}

#hero h1 {
    text-shadow: 0 0 22px rgba(255, 215, 94, .45), 0 3px 18px rgba(0, 0, 0, .25);
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
}

@media (max-width: 700px) {
    .gradio-container {
        padding: 18px 12px 28px !important;
    }

    #hero {
        padding: 68px 18px 28px;
        border-radius: 22px;
    }

    #hero h1 {
        font-size: 2.25rem;
    }

    #hero-copyright {
        top: 16px;
        left: 17px;
        font-size: 12px;
    }

    #hero-badge {
        top: 12px;
        right: 14px;
        font-size: 11px;
        padding: 6px 9px;
    }

    #steps {
        margin-bottom: 17px;
    }

    .step-arrow {
        display: none;
    }

    .studio-card {
        padding: 13px !important;
        border-radius: 19px !important;
    }

    #lyrics textarea {
        min-height: 250px !important;
    }
}
/* ===== FIX GRADIO 6 DROPDOWN MENUS ===== */

/* Dropdown field itself */
.gradio-container [role="combobox"] {
    background: #f8fbff !important;
    color: #15233b !important;
}

/* Open dropdown popover / list */
.gradio-container [role="listbox"],
body [role="listbox"] {
    background: #ffffff !important;
    color: #15233b !important;
    border: 1px solid #bcd1ec !important;
    border-radius: 12px !important;
}

/* Dropdown options */
.gradio-container [role="option"],
body [role="option"] {
    background: #ffffff !important;
    color: #15233b !important;
}

/* Text/elements nested inside options */
.gradio-container [role="option"] *,
body [role="option"] * {
    color: #15233b !important;
}

/* Hovered / keyboard-highlighted option */
.gradio-container [role="option"]:hover,
body [role="option"]:hover,
.gradio-container [role="option"]:focus,
body [role="option"]:focus {
    background: #dff3ff !important;
    color: #08213e !important;
}

/* Selected option */
.gradio-container [role="option"][aria-selected="true"],
body [role="option"][aria-selected="true"] {
    background: #cbeeff !important;
    color: #08213e !important;
    font-weight: 700 !important;
}

/* Keep nested selected/hovered option text dark */
.gradio-container [role="option"]:hover *,
body [role="option"]:hover *,
.gradio-container [role="option"][aria-selected="true"] *,
body [role="option"][aria-selected="true"] * {
    color: #08213e !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("""
      <section id="hero">
        <div id="hero-copyright">© JDM</div>
        <div id="hero-badge">🌈 Made for little learners</div>
        <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=THEME,
        css=CSS,
    )