Add Bedtime Voice tab: Kannada narration, voice cloning, richer story engine

- ui/layout.py: full two-tab layout (Storybook + Bedtime Voice) with
night-sky dark palette, kid-friendly sparkle/star animations, and
moon-gold CSS for the bedtime panel
- app.py: BEDTIME_TEMPLATES expanded to 3 random arc variants per genre
(6 themes x 3 arcs), richer few-shot exemplars that enforce character
consistency, temperature sampling (0.85/0.92) for story variety,
generate_bedtime_story_gpu / generate_tts_cloned_gpu / generate_kannada_gpu,
create_bedtime generator wired to UI
- config.py: TRANSLATION_MODEL, KANNADA_TTS_MODEL, KANNADA_FINETUNE,
BEDTIME_GENRES, BEDTIME_MOODS added
- requirements.txt: librosa, IndicTransToolkit added
- audio_postprocess.py, audio_utils.py: voice reference prep helpers
- indic_text.py: English→Kannada via IndicTrans2
- indic_tts.py: Kannada narration via IndicF5 + fine-tuned bedtime checkpoint
- README.md: ai4bharat/IndicF5 and indictrans2-en-indic-1B added to models

Co-authored-by: Codex <noreply@codex.ai>

README.md

@@ -21,6 +21,8 @@ models:
   - black-forest-labs/FLUX.2-klein-4B
   - openbmb/MiniCPM5-1B
   - openbmb/VoxCPM2
+  - ai4bharat/IndicF5
+  - ai4bharat/indictrans2-en-indic-1B
 ---
 
 # DoodleBook 📚🖍️

app.py

@@ -36,6 +36,7 @@ from config import (
     FLUX_MODEL, STORY_MODEL, TTS_MODEL,
     GENERATION_PARAMS, SAMPLE_BOOK_PATH, BASE_SEED, page_seed,
     DEFAULT_VOICE, voice_design,
+    BEDTIME_GENRES, BEDTIME_MOODS,
 )
 from book_builder import (
     build_book_html, export_pdf, magic_loader_html,
@@ -93,12 +94,28 @@ def load_tts():
     if _TTS_MODEL is None:
         from voxcpm import VoxCPM
         logger.info(f"Loading TTS model: {TTS_MODEL.hub_id}")
-        _TTS_MODEL = VoxCPM.from_pretrained(TTS_MODEL.hub_id, load_denoiser=False)
+        # load_denoiser=True enables voice cloning for the Bedtime Voice tab
+        _TTS_MODEL = VoxCPM.from_pretrained(TTS_MODEL.hub_id, load_denoiser=True)
     return _TTS_MODEL
 
 
+def load_translation():
+    """Load IndicTrans2 translation model (used by Bedtime Voice tab)."""
+    from indic_text import _get_model
+    _get_model()
+
+
+def load_kannada_tts():
+    """Load IndicF5 Kannada TTS model (used by Bedtime Voice tab)."""
+    from indic_tts import _get_model as _kn_get
+    _kn_get()
+
+
 if ON_ZEROGPU:
-    for _name, _loader in (("flux", load_flux), ("story", load_story), ("tts", load_tts)):
+    for _name, _loader in (
+        ("flux", load_flux), ("story", load_story), ("tts", load_tts),
+        ("translation", load_translation), ("kannada_tts", load_kannada_tts),
+    ):
         try:
             _loader()
         except Exception as _e:                       # keep the Space booting
@@ -121,39 +138,189 @@ LINE_ART_SUFFIX = (
     "no filled black areas, no extra sketch marks."
 )
 
+import random as _random
+
+# Multiple story arcs per theme (3 variants each). build_story_locally picks one at random.
 THEME_TEMPLATES = {
     "brave adventure": [
-        ("{hero} loved exploring new places.", "{hero} standing at the start of a bright adventure trail"),
-        ("One morning, {hero} discovered something glowing nearby.", "{hero} spotting a magical glow in the distance"),
-        ("Taking a deep breath, {hero} bravely went closer.", "{hero} walking forward with courage"),
-        ("There, a new friend needed help.", "{hero} finding a small friend in trouble"),
-        ("{hero} helped with kindness and a clever idea.", "{hero} helping the friend together"),
-        ("Everyone cheered, and {hero} felt proud and brave.", "{hero} celebrating at sunset with the new friend"),
+        [   # arc A: overcoming fear of the dark
+            ("{hero} was afraid of the dark, but wanted to be brave.", "{hero} looking nervously at the dark forest path"),
+            ("One night, a baby bird cried from inside the dark trees.", "{hero} hearing a bird cry from the shadowy forest"),
+            ("{hero} took one small step forward, then another.", "{hero} stepping carefully into the dark with a tiny lantern"),
+            ("Inside the forest, moonlight made everything look magical.", "{hero} looking around in wonder at the moonlit trees"),
+            ("{hero} found the bird and gently carried it home.", "{hero} cradling a small bird carefully in both hands"),
+            ("Back safe, {hero} smiled — brave hearts face their fears.", "{hero} smiling proudly outside the forest, holding the bird"),
+        ],
+        [   # arc B: the broken bridge
+            ("{hero} set off to bring bread to grandmother across the river.", "{hero} walking cheerfully with a basket of bread"),
+            ("But the bridge had a big crack — too dangerous to cross!", "{hero} staring at a broken bridge over a rushing river"),
+            ("{hero} looked around and thought very hard.", "{hero} standing still, eyes closed, thinking carefully"),
+            ("Nearby, fallen logs could make a safe path!", "{hero} spotting logs and having a bright idea"),
+            ("{hero} rolled the logs into place, one by one.", "{hero} working hard rolling logs to build a crossing"),
+            ("Grandmother hugged {hero} tight — cleverness gets you there!", "{hero} and grandmother hugging warmly on the other side"),
+        ],
+        [   # arc C: the lost kite
+            ("{hero}'s favourite kite flew away in a big gust of wind.", "{hero} watching the kite soar away into the sky"),
+            ("It landed at the very top of the tallest oak tree.", "{hero} staring up at the kite caught high in a tree"),
+            ("{hero} asked the squirrels if they could help reach it.", "{hero} talking to two friendly squirrels on a branch"),
+            ("The squirrels agreed — if {hero} would share some acorns.", "{hero} nodding happily and handing over a bag of acorns"),
+            ("Together they climbed and tugged the kite free.", "{hero} and the squirrels cheering as the kite comes loose"),
+            ("{hero} learned that sharing always brings something back.", "{hero} flying the kite high with the squirrels watching"),
+        ],
     ],
     "making a new friend": [
-        ("{hero} was playing alone in a sunny place.", "{hero} playing under a bright sky"),
-        ("Then {hero} noticed someone shy nearby.", "{hero} seeing a shy new friend nearby"),
-        ("{hero} smiled and said hello.", "{hero} waving with a friendly smile"),
-        ("Soon they were sharing stories and laughs.", "{hero} and the new friend laughing together"),
-        ("They played games all afternoon.", "{hero} and the new friend playing together"),
-        ("By sunset, {hero} had made a wonderful new friend.", "{hero} and the new friend smiling together at sunset"),
+        [   # arc A: the new kid
+            ("{hero} was nervous — today was the first day at a new place.", "{hero} standing at a doorway looking shy and unsure"),
+            ("Everyone already seemed to know each other.", "{hero} watching other children play together"),
+            ("Then {hero} saw someone else sitting alone by the fence.", "{hero} noticing another child sitting quietly alone"),
+            ("{hero} walked over and said, 'Hi, I'm {hero}. Want to play?'", "{hero} walking towards the lonely child with a warm smile"),
+            ("The child's face lit up like sunshine.", "{hero} and the new friend laughing and playing together"),
+            ("{hero} learned — one small hello can change everything.", "{hero} and the new friend waving goodbye, happy and tired"),
+        ],
+        [   # arc B: the robot who didn't know how
+            ("{hero} met a little robot who had never played before.", "{hero} meeting a small friendly robot in a sunny park"),
+            ("The robot could count to a million but didn't know how to laugh.", "{hero} looking curiously at the robot"),
+            ("{hero} taught the robot how to blow bubbles.", "{hero} showing the robot how to blow a big soapy bubble"),
+            ("The first bubble the robot made was huge — they both gasped!", "{hero} and the robot staring at a giant rainbow bubble"),
+            ("Then {hero} taught the robot the best knock-knock joke.", "{hero} whispering a joke to the robot, who looks confused"),
+            ("The robot laughed for the very first time, and they both felt warm.", "{hero} and the robot laughing together in golden light"),
+        ],
+        [   # arc C: opposite neighbours
+            ("{hero} loved loud music; the neighbour's cat loved total silence.", "{hero} dancing loudly while a cat glares from the fence"),
+            ("They looked at each other across the fence every day.", "{hero} and the cat eyeing each other from opposite sides"),
+            ("One rainy afternoon, the cat got stuck in a puddle.", "{hero} seeing the cat splashing helplessly in the rain"),
+            ("{hero} rushed over with an umbrella and warm towel.", "{hero} wrapping the soggy cat in a big fluffy towel"),
+            ("The cat purred loudly — which sounded like music to {hero}.", "{hero} grinning as the cat purrs on their lap"),
+            ("{hero} learned that kindness finds harmony in differences.", "{hero} and the cat sharing headphones by the window"),
+        ],
+    ],
+    "overcoming a fear": [
+        [   # arc A: scared of thunder
+            ("{hero} hid under the blankets every time it thundered.", "{hero} buried under a pile of blankets during a storm"),
+            ("Grandpa sat beside {hero} and told a secret.", "{hero} peeking out from the blankets while grandpa smiles"),
+            ("'Thunder is just clouds bumping into each other,' grandpa said.", "{hero} listening with wide eyes to grandpa's story"),
+            ("{hero} imagined grumpy clouds saying sorry to each other.", "{hero} imagining funny fluffy clouds arguing in the sky"),
+            ("The next crash came — and {hero} laughed instead of hiding!", "{hero} laughing boldly at the window during the storm"),
+            ("{hero} learned that knowing why things happen makes them less scary.", "{hero} and grandpa watching lightning together, smiling"),
+        ],
+        [   # arc B: the deep swimming pool
+            ("{hero} loved watching others swim but wouldn't go past the steps.", "{hero} sitting on the pool steps, looking at the water"),
+            ("'What if I sink?' {hero} thought every single time.", "{hero} staring nervously at the deep end"),
+            ("A kind teacher floated a pool noodle close to {hero}.", "{hero} eyeing a colourful foam noodle in the water"),
+            ("{hero} grabbed it tightly and floated for the first time.", "{hero} floating on the noodle, surprised and delighted"),
+            ("Slowly {hero} kicked — and actually moved through the water!", "{hero} kicking their legs, moving through the pool"),
+            ("{hero} found that courage grows one tiny step at a time.", "{hero} smiling proudly in the water, arms wide open"),
+        ],
+        [   # arc C: the big dog next door
+            ("{hero} ran past the gate whenever the big dog barked.", "{hero} sprinting past a big dog behind a garden gate"),
+            ("One day the gate was open — and the dog sat very still.", "{hero} stopping in surprise to see the gate open"),
+            ("The dog had a thorn in its paw and looked at {hero} sadly.", "{hero} noticing the dog holding up a hurt paw"),
+            ("{hero} knelt down slowly and carefully pulled out the thorn.", "{hero} gently helping the dog with a very careful hand"),
+            ("The dog licked {hero}'s hand with a big warm tongue.", "{hero} giggling as the dog licks their face"),
+            ("{hero} learned that courage and kindness are the same thing.", "{hero} and the big dog walking happily side by side"),
+        ],
+    ],
+    "helping someone": [
+        [   # arc A: the broken toy shop
+            ("{hero} passed the old toy shop and saw the owner crying.", "{hero} stopping to look at a sad old toy-maker"),
+            ("A shelf had fallen and smashed twenty toys on the floor.", "{hero} seeing broken toys scattered across the floor"),
+            ("{hero} rolled up their sleeves without being asked.", "{hero} picking up toy pieces with determined eyes"),
+            ("Piece by piece, {hero} and the owner fixed each one.", "{hero} and the toy-maker gluing pieces together carefully"),
+            ("The last toy fixed was a little wooden bird that sang.", "{hero} and the owner listening to the bird sing again"),
+            ("{hero} learned that helping turns someone's worst day around.", "{hero} and the toy-maker shaking hands and smiling"),
+        ],
+        [   # arc B: the garden in winter
+            ("{hero} noticed old Mrs. Patel's garden was bare and sad.", "{hero} looking over a fence at a grey winter garden"),
+            ("Mrs. Patel was too sick to plant her spring seeds.", "{hero} seeing Mrs. Patel watching sadly from her window"),
+            ("{hero} made a plan and came back with a trowel.", "{hero} arriving at the garden gate with a basket of seeds"),
+            ("Row by row, {hero} pressed seeds into the cold soil.", "{hero} carefully planting seeds in the dark garden earth"),
+            ("Weeks later, the garden burst into pink and yellow flowers.", "{hero} and Mrs. Patel gasping at the blooming garden"),
+            ("{hero} learned that small acts of kindness bloom in their own time.", "{hero} and Mrs. Patel sitting together among the flowers"),
+        ],
+        [   # arc C: lost dog returns home
+            ("{hero} found a shaggy dog trembling alone in the rain.", "{hero} spotting a scared wet dog in the rain"),
+            ("The dog had a tag — but the address was smudged.", "{hero} squinting at a blurry metal tag on the dog's collar"),
+            ("{hero} drew the dog's face on a poster and put it everywhere.", "{hero} sticking handmade posters on poles and windows"),
+            ("A little girl called — she'd been crying for two days!", "{hero} on the phone, looking relieved and happy"),
+            ("{hero} walked the dog right to the girl's front door.", "{hero} arriving at a door with the shaggy dog on a lead"),
+            ("{hero} learned that caring for others feels better than anything.", "{hero} watching the girl and dog reunite with happy tears"),
+        ],
+    ],
+    "lost and found": [
+        [   # arc A: the missing story book
+            ("{hero}'s favourite storybook had vanished — gone without a trace!", "{hero} searching through a pile of scattered books"),
+            ("It wasn't under the bed, in the kitchen, or the garden shed.", "{hero} checking more places, hands on hips"),
+            ("{hero} retraced every step from the whole day.", "{hero} thinking hard with a finger on chin, eyes closed"),
+            ("At the library — someone had borrowed it by mistake!", "{hero} spotting the book on a shelf at the library"),
+            ("{hero} found the reader and they shared it together instead.", "{hero} and a new friend reading the book side by side"),
+            ("{hero} learned that some things are even better when shared.", "{hero} and the new friend high-fiving over the open book"),
+        ],
+        [   # arc B: the lost recipe
+            ("Granny had lost her secret recipe for the best cookies ever.", "{hero} watching granny search through messy recipe cards"),
+            ("{hero} promised to help find it before the big bake.", "{hero} putting on an apron and looking determined"),
+            ("They searched the kitchen, the attic, and every drawer.", "{hero} and granny checking every corner together"),
+            ("Inside an old hat box — a folded, faded piece of paper!", "{hero} gasping and holding up a crumpled piece of paper"),
+            ("The recipe was there: flour, love, and a pinch of laughter.", "{hero} and granny reading the recipe together with big smiles"),
+            ("{hero} learned that the best things are worth looking for.", "{hero} and granny pulling cookies from the oven together"),
+        ],
+        [   # arc C: lost in the market
+            ("{hero} looked up and all the grown-ups had disappeared.", "{hero} standing alone in a busy colourful market"),
+            ("The market seemed bigger and louder than ever before.", "{hero} turning around looking worried among tall market stalls"),
+            ("{hero} remembered: stay calm, find someone who helps.", "{hero} taking a deep breath with eyes closed"),
+            ("{hero} found a stall keeper with a kind face and asked for help.", "{hero} tapping a friendly shop-keeper on the shoulder"),
+            ("The family came running — laughing with relief.", "{hero} being scooped up in a big family hug"),
+            ("{hero} learned that staying calm helps you find the way home.", "{hero} and family walking home hand in hand"),
+        ],
+    ],
+    "learning something new": [
+        [   # arc A: first time on a bicycle
+            ("{hero} wanted to ride a bicycle but kept falling off.", "{hero} lying on the grass next to a toppled bicycle"),
+            ("Every try ended with a scraped knee and wobbly legs.", "{hero} wobbling badly on the bike, face determined"),
+            ("Papa said, 'Look where you want to go, not at the ground.'", "{hero} listening carefully to papa who points ahead"),
+            ("{hero} fixed their eyes on the garden gate and pedalled.", "{hero} cycling straight and steady for the first time"),
+            ("Zoom! The bicycle went all the way to the gate!", "{hero} shooting past the gate with arms raised in joy"),
+            ("{hero} learned that looking forward helps you move forward.", "{hero} cycling confidently down a sunny lane"),
+        ],
+        [   # arc B: cooking for the first time
+            ("{hero} decided to make soup all by themselves.", "{hero} standing on a step stool by the big kitchen pot"),
+            ("The first batch was way too salty — even the cat sneezed.", "{hero} and a sneezing cat looking at a steaming pot"),
+            ("{hero} didn't give up — just added less salt next time.", "{hero} carefully adding a tiny pinch of salt to the pot"),
+            ("The second batch smelled amazing — warm and rich.", "{hero} inhaling deeply with a big happy smile"),
+            ("The whole family asked for a second bowl.", "{hero} ladling soup into happy family bowls"),
+            ("{hero} learned that mistakes are just steps on the way to great.", "{hero} sitting proudly at the head of the dinner table"),
+        ],
+        [   # arc C: learning to read music
+            ("{hero} wanted to play piano but the notes looked like dots and sticks.", "{hero} staring at a sheet of music with a puzzled frown"),
+            ("Teacher showed that each line on the page had its own note.", "{hero} and a teacher pointing at a music book together"),
+            ("{hero} practised one tiny tune — just five notes — every day.", "{hero} pressing piano keys slowly and carefully"),
+            ("After a week, those five notes sounded like a real song!", "{hero} playing piano with eyes closed, smiling"),
+            ("At the recital, {hero} played for everyone — hands barely shaking.", "{hero} performing on stage in front of a small happy crowd"),
+            ("{hero} learned that big skills start with five tiny notes.", "{hero} taking a bow as the crowd claps"),
+        ],
     ],
 }
 
 FEW_SHOT_EXEMPLAR = """
-Write a 6-page children's storybook for age 5 about Luna the cat with theme: brave adventure.
+Write a 6-page children's storybook for age 5 about Finn the red fox with theme: overcoming a fear.
+
+Rules:
+- Finn must appear by name in EVERY page text.
+- No new characters introduced after page 3.
+- Each page is 1–2 sentences, simple and vivid.
+- Page 6 ends with a clear lesson Finn has learned.
+- The scene describes only what can be drawn in one illustration.
+- Return ONLY valid JSON (no extra text).
 
-Return ONLY valid JSON:
 {
-  "title": "Luna's Brave Adventure",
-  "character_description": "A small orange tabby cat named Luna with big green eyes, whiskers, and a tiny red scarf",
+  "title": "Finn and the Thunderstorm",
+  "character_description": "A small red fox named Finn with big amber eyes, white-tipped ears, and a fluffy striped tail",
   "pages": [
-    {"page": 1, "text": "Luna was a small orange cat who loved to explore.", "scene": "Luna sitting by the window looking outside"},
-    {"page": 2, "text": "One sunny morning, Luna saw something sparkling in the forest.", "scene": "Luna spotting a glow in the trees"},
-    {"page": 3, "text": "Bravely, Luna crept into the forest to investigate.", "scene": "Luna walking cautiously through trees"},
-    {"page": 4, "text": "It was a tiny fairy stuck in a spider web!", "scene": "Luna discovering a fairy in trouble"},
-    {"page": 5, "text": "Luna gently freed the fairy with her paw.", "scene": "Luna carefully helping the fairy"},
-    {"page": 6, "text": "The fairy thanked Luna and they became friends forever.", "scene": "Luna and fairy playing together at sunset"}
+    {"page": 1, "text": "Finn the red fox loved sunny days, but hid under the sofa whenever thunder rumbled.", "scene": "Finn the red fox curled up under a blue sofa, looking scared"},
+    {"page": 2, "text": "One afternoon, a storm rolled in and Finn could hear thunder booming outside.", "scene": "Finn the red fox peering nervously through a rain-streaked window"},
+    {"page": 3, "text": "Grandma Fox sat beside Finn and whispered a secret.", "scene": "Grandma Fox sitting calmly next to Finn the red fox on a warm rug"},
+    {"page": 4, "text": "'Thunder is just clouds bumping together and saying sorry,' she told Finn.", "scene": "Finn the red fox imagining two fluffy cartoon clouds bumping and giggling"},
+    {"page": 5, "text": "The next rumble came — and Finn laughed instead of hiding!", "scene": "Finn the red fox laughing at the window while rain pours outside"},
+    {"page": 6, "text": "Finn learned that understanding why things happen makes them far less scary.", "scene": "Finn the red fox and Grandma Fox watching the storm together from a cozy armchair"}
   ]
 }
 """
@@ -164,7 +331,13 @@ def build_story_prompt(hero_name: str, theme: str, age: int) -> str:
 
 Write a 6-page children's storybook for age {age} about {hero_name} with theme: {theme}.
 
-Return ONLY valid JSON:
+Rules:
+- {hero_name} must appear by name in EVERY page text.
+- Keep all characters consistent — do NOT introduce random new characters mid-story.
+- Each page is 1–2 short, vivid sentences a {age}-year-old can understand.
+- Page 6 ends with a gentle lesson {hero_name} has learned.
+- Scene describes exactly what would appear in ONE illustration.
+- Return ONLY valid JSON (no explanation, no markdown fences):
 """
 
 
@@ -221,17 +394,29 @@ def _normalize_story(story: dict) -> dict:
 
 
 def build_story_locally(hero_name: str, theme: str) -> dict:
-    """Fast, deterministic fallback story that avoids any Modal dependency."""
+    """Fast fallback — picks a random arc variant so kids get a different story each run."""
     hero = (hero_name or "Little Hero").strip() or "Little Hero"
-    beats = THEME_TEMPLATES.get(theme, THEME_TEMPLATES["brave adventure"])
+    arcs = THEME_TEMPLATES.get(theme, THEME_TEMPLATES["brave adventure"])
+    beats = _random.choice(arcs)   # one of 3 arc variants, chosen at random
     pages = [
         {"page": i + 1, "text": text.format(hero=hero), "scene": scene.format(hero=hero)}
         for i, (text, scene) in enumerate(beats)
     ]
+    arc_titles = {
+        "brave adventure": [f"{hero}'s Big Brave Day", f"{hero} and the Broken Bridge", f"{hero}'s Flying Kite"],
+        "making a new friend": [f"{hero}'s First Hello", f"{hero} and the Laughing Robot", f"{hero} and the Quiet Cat"],
+        "overcoming a fear": [f"{hero} and the Thunder Secret", f"{hero} Takes the Plunge", f"{hero} and the Big Dog"],
+        "helping someone": [f"{hero} and the Broken Toys", f"{hero}'s Secret Garden", f"{hero} Finds the Way Home"],
+        "lost and found": [f"{hero}'s Missing Book", f"{hero} Finds Granny's Recipe", f"{hero} and the Big Market"],
+        "learning something new": [f"{hero} Rides!", f"{hero}'s Salty Soup", f"{hero}'s Five Notes"],
+    }
+    arc_index = THEME_TEMPLATES.get(theme, THEME_TEMPLATES["brave adventure"]).index(beats)
+    titles = arc_titles.get(theme, [f"{hero}'s Storybook Adventure"])
+    title = titles[arc_index] if arc_index < len(titles) else f"{hero}'s Storybook Adventure"
     return {
-        "title": f"{hero}'s Storybook Adventure",
+        "title": title,
         "character_description": (
-            f"{hero}, a friendly children's storybook hero with bright colors, "
+            f"{hero}, a friendly children's storybook hero with bright colours, "
             "bold outlines, and a cheerful expressive face"
         ),
         "pages": pages,
@@ -316,7 +501,10 @@ def generate_story_gpu(hero_name: str, theme: str, age: int = 5) -> dict:
             out = model.generate(
                 **inputs,
                 max_new_tokens=GENERATION_PARAMS.max_story_tokens,
-                do_sample=False,
+                do_sample=True,
+                temperature=0.85,
+                top_p=0.92,
+                repetition_penalty=1.1,
             )
         response = tok.decode(
             out[0][inputs["input_ids"].shape[1]:],
@@ -325,7 +513,7 @@ def generate_story_gpu(hero_name: str, theme: str, age: int = 5) -> dict:
         parsed = parse_story_json(response)
         if parsed:
             return _normalize_story(parsed)
-        logger.warning("Story parser failed; using deterministic local fallback")
+        logger.warning("Story parser failed; using random-arc local fallback")
     except Exception as e:
         logger.warning(f"ZeroGPU story generation failed: {e}")
     return _normalize_story(build_story_locally(hero_name, theme))
@@ -683,6 +871,376 @@ def create_book(doodle_image, character_name, theme, hero_name, voice=DEFAULT_VO
     )
 
 
+# ============================================================================
+# BEDTIME VOICE TAB
+# ============================================================================
+
+BEDTIME_TEMPLATES = {
+    "Animals": [
+        [   # arc A: the lost firefly
+            ("{hero} loved sitting in the garden when the moon came out.", "{hero} sitting quietly in a moonlit garden"),
+            ("One night, {hero} heard a tiny buzzing near the lavender.", "{hero} tilting head to listen near purple flowers"),
+            ("A little firefly was lost and couldn't find its family.", "{hero} meeting a tiny glowing firefly in the dark"),
+            ("{hero} walked gently through the dark, and the firefly lit the way.", "{hero} walking softly with the firefly glowing beside"),
+            ("They found the firefly's home, glowing warm and bright.", "{hero} smiling as the firefly reunites with glowing family"),
+            ("{hero} yawned and curled up under the stars, at peace.", "{hero} sleeping peacefully in the moonlit garden"),
+        ],
+        [   # arc B: the sleepy hedgehog
+            ("{hero} found a little hedgehog shivering under a leaf.", "{hero} gently lifting a leaf to find a tiny hedgehog"),
+            ("The hedgehog had lost the path to its cosy winter burrow.", "{hero} and the hedgehog looking at the dark forest together"),
+            ("{hero} made a tiny lantern from a jar and a candle stub.", "{hero} carefully lighting a small lantern in the dark"),
+            ("Together {hero} and the hedgehog followed the lantern glow.", "{hero} leading the hedgehog along a moonlit path"),
+            ("They found the burrow, soft with dry leaves and moss.", "{hero} watching the hedgehog snuggle into its warm home"),
+            ("{hero} blew out the lantern and tiptoed home to bed.", "{hero} tiptoeing home under a glowing moon"),
+        ],
+        [   # arc C: the lonely cloud sheep
+            ("High above, a small cloud shaped like a sheep drifted away.", "{hero} watching a fluffy cloud drift across the night sky"),
+            ("{hero} watched it wander further from the other clouds.", "{hero} looking up concerned at the lone cloud-sheep"),
+            ("{hero} called out softly — 'Come back, little cloud!'", "{hero} cupping hands around mouth and calling up at the sky"),
+            ("A gentle breeze carried {hero}'s voice right up to the cloud.", "{hero} smiling as the cloud slowly turns around"),
+            ("The little cloud floated back to its soft, woolly family.", "{hero} watching all the clouds nuzzle together"),
+            ("{hero} closed their eyes and drifted to sleep like a cloud.", "{hero} sleeping peacefully, face soft and calm"),
+        ],
+    ],
+    "Dragons": [
+        [   # arc A: the dragon with no flame
+            ("{hero} lived near a mountain where a gentle dragon slept each night.", "{hero} looking up at a misty mountain in moonlight"),
+            ("One evening, the dragon sneezed and lost its tiny flame.", "{hero} watching the dragon sneeze sadly"),
+            ("{hero} brought the dragon warm soup and a thick blanket.", "{hero} carrying a steaming bowl to a sad-looking dragon"),
+            ("The dragon sipped the soup and felt a warm glow return.", "{hero} and the dragon sharing a cosy quiet moment"),
+            ("Together they lit the lanterns along the sleepy village path.", "{hero} and the dragon lighting lanterns in the still village"),
+            ("The dragon curled up small and {hero} tucked it in gently.", "{hero} tucking a sleepy dragon in with a smile"),
+        ],
+        [   # arc B: the dragon's lullaby
+            ("{hero} heard a sad humming sound coming from the cave on the hill.", "{hero} listening to a distant humming sound at night"),
+            ("Inside was a young dragon who couldn't fall asleep.", "{hero} finding a wide-awake baby dragon in a cosy cave"),
+            ("{hero} sat beside the dragon and hummed a soft tune.", "{hero} humming quietly with eyes half-closed"),
+            ("The dragon's eyes grew heavy and its tail curled up.", "{hero} watching the dragon's eyes slowly droop"),
+            ("{hero} sang the last line very, very softly.", "{hero} singing barely above a whisper to the drowsy dragon"),
+            ("They both fell asleep together in the warm cave.", "{hero} and the dragon sleeping side by side in the cave"),
+        ],
+        [   # arc C: the dragon who was afraid of the dark
+            ("A tiny dragon named Ember sat shaking outside its cave.", "{hero} finding a tiny trembling dragon at a cave entrance"),
+            ("{hero} saw that Ember was scared of the dark inside.", "{hero} kneeling beside the little dragon with a kind look"),
+            ("{hero} reached in and found a pile of smooth glowing stones.", "{hero} pulling out a handful of faintly glowing stones"),
+            ("Placed around the cave, they made it warm and beautiful.", "{hero} and Ember arranging glowing stones around the cave"),
+            ("Ember stepped inside, eyes wide with wonder.", "Ember the dragon stepping in slowly, amazed by the glow"),
+            ("{hero} waved goodnight as Ember curled up happy.", "{hero} waving at a cosy, sleepy Ember in the glowing cave"),
+        ],
+    ],
+    "Ocean": [
+        [   # arc A: the shell home
+            ("{hero} sat by the moonlit shore listening to the waves.", "{hero} sitting on the sand under a big silver moon"),
+            ("A little fish splashed up, its eyes wide and worried.", "{hero} seeing a small worried fish near the surface"),
+            ("A big wave had carried the fish's shell-home away.", "{hero} listening to the little fish with a gentle face"),
+            ("{hero} waded in gently and searched along the sandy floor.", "{hero} swimming softly along the moonlit ocean floor"),
+            ("There — half-buried — was the shell, pearly and perfect.", "{hero} finding a beautiful shell in the soft sand"),
+            ("{hero} set the shell back, and the sea turned calm.", "{hero} watching the fish swim happily into its shell home"),
+        ],
+        [   # arc B: the singing whale
+            ("{hero} heard a low, slow song drifting in from the sea.", "{hero} pressing ear to the cold night water listening"),
+            ("A whale was singing far away, all alone.", "{hero} imagining a large gentle whale singing in dark water"),
+            ("{hero} hummed back — a gentle, rising reply.", "{hero} sitting on a rock humming toward the ocean"),
+            ("The whale's song grew louder, warmer, closer.", "{hero} listening with eyes closed as the whale answers"),
+            ("Soon the whale found its pod, their songs weaving together.", "{hero} smiling at the sight of whales swimming together"),
+            ("{hero} fell asleep to the sound of the ocean choir.", "{hero} curled up on the soft sand, sleeping peacefully"),
+        ],
+        [   # arc C: the moonbeam path
+            ("{hero} wished the sea would show a safe path for the little boats.", "{hero} looking out at tiny boats bobbing in dark water"),
+            ("The moon heard and sent a silver path across the waves.", "{hero} watching a bright path of moonlight appear on the sea"),
+            ("Each little boat followed it safely into the harbour.", "{hero} smiling as boats glide along the moonbeam path"),
+            ("{hero} stood on the dock waving each boat home.", "{hero} waving warmly as boats arrive one by one"),
+            ("The last captain tossed {hero} a tiny glowing pearl.", "{hero} catching a small glowing pearl with cupped hands"),
+            ("{hero} held the pearl close and drifted off to sleep.", "{hero} lying in bed, pearl glowing softly on the pillow"),
+        ],
+    ],
+    "Forest": [
+        [   # arc A: the silent owl
+            ("{hero} walked into the whispering forest as the moon rose.", "{hero} stepping onto a silver moonlit forest path"),
+            ("The trees were worried — a wise old owl had lost its song.", "{hero} hearing the trees murmur about the silent owl"),
+            ("{hero} climbed a mossy rock and hummed a gentle tune.", "{hero} humming softly on a mossy rock under the moon"),
+            ("The owl tilted its head and slowly remembered the melody.", "{hero} watching the owl's eyes glow as memory returns"),
+            ("The whole forest filled with soft nighttime music.", "{hero} smiling as the forest glows with peaceful sound"),
+            ("{hero} yawned and drifted off to sleep among the roots.", "{hero} sleeping peacefully at the base of a great tree"),
+        ],
+        [   # arc B: the sleeping seeds
+            ("{hero} found that the forest was very quiet — too quiet.", "{hero} walking slowly through an unusually still forest"),
+            ("The seeds underground had forgotten when to sprout.", "{hero} pressing an ear to the ground and listening"),
+            ("{hero} sang a slow, low song about rain and warm sun.", "{hero} kneeling by the earth singing very quietly"),
+            ("Tiny green shoots appeared one by one between the roots.", "{hero} watching small green shoots push up through the soil"),
+            ("The whole floor sparkled with new leaves catching the moonlight.", "{hero} smiling at a carpet of tiny silver-green leaves"),
+            ("{hero} curled up between the roots, lullabied by the trees.", "{hero} sleeping among the roots as leaves drift down"),
+        ],
+        [   # arc C: the fox's lost path
+            ("{hero} met a small fox who had wandered very far from home.", "{hero} meeting a tired little fox sitting on a log"),
+            ("The fox didn't know which stars pointed north.", "{hero} and the fox both looking up at the starry sky"),
+            ("{hero} remembered — the Great Bear always faces north.", "{hero} pointing at a constellation with a sure hand"),
+            ("Together they followed the stars through the quiet trees.", "{hero} and the fox walking side by side in moonlight"),
+            ("At last the fox saw its familiar hill and bounded up.", "{hero} watching the fox race joyfully up the hill"),
+            ("{hero} turned home too, heart warm and full.", "{hero} walking home alone under the bright stars, smiling"),
+        ],
+    ],
+    "Space": [
+        [   # arc A: the falling star
+            ("{hero} loved counting stars from the garden every night.", "{hero} lying in the grass gazing at the starry sky"),
+            ("One night, one star blinked — and tumbled down!", "{hero} gasping as a little star falls from the sky"),
+            ("{hero} caught the star gently in a jar of moonlight.", "{hero} holding up a glowing jar with wide, careful hands"),
+            ("The little star whispered it was lost and didn't know home.", "{hero} listening closely to a tiny voice from the jar"),
+            ("{hero} climbed the tallest hill and opened the jar wide.", "{hero} on a hilltop, jar open, star ready to fly"),
+            ("The star zoomed home, and {hero} fell fast asleep smiling.", "{hero} smiling and drifting to sleep under the stars"),
+        ],
+        [   # arc B: the moon's blanket
+            ("The moon shivered — it had lost its soft cloud blanket.", "{hero} looking up at a pale, shivering moon"),
+            ("{hero} gathered the fluffiest clouds and knitted them together.", "{hero} floating and knitting clouds with silver thread"),
+            ("It took all night but the blanket grew soft and wide.", "{hero} holding up a huge fluffy white cloud blanket"),
+            ("{hero} floated up and draped it gently over the moon.", "{hero} tucking the cloud blanket around a grateful moon"),
+            ("The moon glowed warmer, and stars winked their thanks.", "{hero} floating back down as stars twinkle brightly"),
+            ("{hero} landed home just in time for bed.", "{hero} tiptoeing inside under a calm, warm, bright moon"),
+        ],
+        [   # arc C: the astronaut bear
+            ("{hero} met a small bear in a silver space suit near the rocket.", "{hero} waving at a small bear in a tiny astronaut suit"),
+            ("The bear had come from a planet made entirely of honey.", "{hero} listening with eyes wide to the bear's story"),
+            ("{hero} and the bear sat under the stars sharing honey cakes.", "{hero} and the bear sharing food under a huge starry sky"),
+            ("The bear grew sleepy and asked how Earth children go to sleep.", "{hero} showing the bear how to close eyes slowly"),
+            ("{hero} tucked the bear in inside the rocket pod.", "{hero} draping a blanket over the sleepy bear in the rocket"),
+            ("{hero} waved as the rocket floated off towards the honey planet.", "{hero} waving at the rocket rising into the starry sky"),
+        ],
+    ],
+    "Kingdom": [
+        [   # arc A: the mouse and the crown
+            ("In a cosy kingdom, {hero} was the kindest helper of all.", "{hero} standing cheerfully in a tiny fairy-tale village"),
+            ("One sleepy evening, the king's golden crown had gone missing.", "{hero} seeing the king looking worried and bare-headed"),
+            ("{hero} searched the royal garden softly by moonlight.", "{hero} tiptoeing through a moonlit garden"),
+            ("A sleepy mouse had borrowed it for a bed!", "{hero} discovering a tiny mouse snoozing inside the crown"),
+            ("{hero} found the mouse a proper bed of rose petals.", "{hero} carefully tucking the mouse into a petal bed"),
+            ("The king smiled, and the whole kingdom slept in peace.", "{hero} and the king smiling under the quiet night sky"),
+        ],
+        [   # arc B: the baker's lost song
+            ("The royal baker had forgotten the lullaby that made magic bread.", "{hero} finding the baker staring sadly at empty dough"),
+            ("Without the song the bread wouldn't rise — and no breakfast!", "{hero} and the baker looking at flat, sad dough together"),
+            ("{hero} sat quietly and hummed a slow, warm melody.", "{hero} sitting on a stool humming softly to the dough"),
+            ("The dough trembled, puffed up, and filled the kitchen with warmth.", "{hero} watching the dough rise with wide delighted eyes"),
+            ("By midnight, golden loaves lined every shelf in the kitchen.", "{hero} and the baker admiring rows of perfect golden loaves"),
+            ("{hero} and the baker shared a tiny warm crust before sleep.", "{hero} and the baker smiling over a piece of warm bread"),
+        ],
+        [   # arc C: the princess who couldn't sleep
+            ("The little princess had tried everything — she could not sleep.", "{hero} finding a princess sitting up wide-eyed in a big bed"),
+            ("{hero} asked, 'Have you looked at the stars tonight, princess?'", "{hero} pointing to a window filled with stars"),
+            ("They counted stars together, one by one.", "{hero} and the princess counting stars from the window"),
+            ("After twelve stars the princess's eyes began to droop.", "{hero} smiling as the princess's head starts to nod"),
+            ("{hero} pulled the curtain half-closed, leaving just a sliver of moonlight.", "{hero} quietly closing a curtain leaving a thin beam of moon"),
+            ("The princess was asleep before {hero} could tiptoe away.", "{hero} tiptoeing out with a warm smile"),
+        ],
+    ],
+}
+
+BEDTIME_FEW_SHOT = """
+Write a 6-page children's bedtime story for age 5 about Mia the bunny. Genre: Forest. Mood: Dreamy.
+
+Rules:
+- Mia must appear by name in EVERY page text.
+- Use calm, soft language — words slow down and the child feels sleepy.
+- Each page is 1–2 short, gentle sentences.
+- Page 6 ends with Mia (or the child) falling peacefully asleep.
+- Scene describes exactly what appears in one illustration.
+- Return ONLY valid JSON (no markdown fences, no extra text).
+
+{
+  "title": "Mia and the Owl's Lullaby",
+  "character_description": "A tiny white bunny named Mia with long soft ears, a pink nose, and a star-shaped patch on her back",
+  "pages": [
+    {"page": 1, "text": "Mia the bunny hopped into the forest as the moon rose above the trees.", "scene": "Mia the white bunny stepping onto a silver moonlit forest path"},
+    {"page": 2, "text": "Everything was very quiet — the whole forest seemed to be waiting.", "scene": "Mia the white bunny standing still, ears up, listening"},
+    {"page": 3, "text": "Then Mia heard a soft sound from high in the oak — an old owl humming.", "scene": "Mia the white bunny looking up at a sleepy owl on a branch"},
+    {"page": 4, "text": "The owl's song was low and slow, like warm honey flowing.", "scene": "The owl humming softly, eyes half-closed, as Mia listens below"},
+    {"page": 5, "text": "Mia's eyelids grew heavy, and she lay down on a bed of moss.", "scene": "Mia the white bunny curling up on soft green moss"},
+    {"page": 6, "text": "The owl sang on, and Mia drifted into the sweetest dream.", "scene": "Mia the white bunny fast asleep in the moonlit forest, peaceful"}
+  ]
+}
+"""
+
+
+def _build_bedtime_locally(hero_name: str, genre: str) -> dict:
+    hero = (hero_name or "Little One").strip() or "Little One"
+    arcs = BEDTIME_TEMPLATES.get(genre, BEDTIME_TEMPLATES["Animals"])
+    beats = _random.choice(arcs)  # pick a random arc variant for variety
+    pages = [
+        {"page": i + 1, "text": t.format(hero=hero), "scene": s.format(hero=hero)}
+        for i, (t, s) in enumerate(beats)
+    ]
+    return {
+        "title": f"{hero}'s Bedtime Dream",
+        "character_description": f"{hero}, a gentle, friendly storybook character with soft colours",
+        "pages": pages,
+    }
+
+
+def build_bedtime_html(title: str, pages: list) -> str:
+    pages_html = "".join(
+        f'<p class="bedtime-page">{p.get("text", "")}</p>'
+        for p in pages
+    )
+    return (
+        '<div class="bedtime-story">'
+        f'<h2 class="bedtime-title">🌙 {title}</h2>'
+        f'{pages_html}'
+        '</div>'
+    )
+
+
+@spaces.GPU(duration=60)
+def generate_bedtime_story_gpu(hero_name: str, genre: str, mood: str) -> dict:
+    """Generate a gentle bedtime story with MiniCPM5-1B."""
+    try:
+        model, tok = load_story()
+        prompt = (
+            f"{BEDTIME_FEW_SHOT}\n\n"
+            f"Write a 6-page children's bedtime story for age 5 about {hero_name}. "
+            f"Genre: {genre}. Mood: {mood}.\n\n"
+            f"Rules:\n"
+            f"- {hero_name} must appear by name in EVERY page text.\n"
+            f"- Use calm, slow, sleepy language throughout.\n"
+            f"- Each page: 1–2 gentle sentences only.\n"
+            f"- Page 6 must end with {hero_name} or the child falling peacefully asleep.\n"
+            f"- Do NOT introduce random unrelated characters.\n"
+            f"- Return ONLY valid JSON:\n"
+        )
+        inputs = tok.apply_chat_template(
+            [{"role": "user", "content": prompt}],
+            add_generation_prompt=True,
+            enable_thinking=False,
+            return_dict=True,
+            return_tensors="pt",
+        ).to("cuda")
+        with torch.no_grad():
+            out = model.generate(
+                **inputs, max_new_tokens=800,
+                do_sample=True, temperature=0.85, top_p=0.92, repetition_penalty=1.1,
+            )
+        response = tok.decode(out[0][inputs["input_ids"].shape[1]:], skip_special_tokens=True)
+        parsed = parse_story_json(response)
+        if parsed:
+            return _normalize_story(parsed)
+        logger.warning("Bedtime story parser failed; using local fallback")
+    except Exception as e:
+        logger.warning(f"Bedtime story GPU failed: {e}")
+    return _normalize_story(_build_bedtime_locally(hero_name, genre))
+
+
+@spaces.GPU(duration=120)
+def generate_tts_cloned_gpu(text: str, ref_wav: str | None, mood: str = "calming") -> str:
+    """VoxCPM2 bedtime narration — clones user's voice if ref_wav provided,
+    otherwise uses Storyteller voice preset. Returns a temp WAV file path."""
+    import re as _re
+    import numpy as np
+    import soundfile as sf
+
+    model = load_tts()
+    sr    = int(model.tts_model.sample_rate)
+
+    mood_styles = {
+        "calming": "very slow, deep warm whisper, gentle bedtime voice, barely above a breath",
+        "dreamy":  "slow, soft, breathy whisper, lullaby-like rhythm, words dissolving into silence",
+        "magical": "gentle, warm, wonder-filled, soft rising intonation on wonder words",
+        "cozy":    "warm, comfortable storytelling voice, like reading to a child tucked in bed",
+    }
+    style = mood_styles.get(mood.lower(), "gentle, warm, sleepy bedtime voice, slightly slow")
+
+    sentences = [s.strip() for s in _re.split(r"(?<=[.!?])\s+", text) if s.strip()]
+    if not sentences:
+        sentences = [text.strip() or "Sweet dreams."]
+
+    silence = np.zeros(int(0.65 * sr), dtype=np.float32)
+    pieces  = []
+
+    for sentence in sentences:
+        kw = dict(text=f"({style}) {sentence}", cfg_value=2.0, inference_timesteps=10, normalize=True)
+        if ref_wav and os.path.exists(str(ref_wav)):
+            kw["reference_wav_path"] = ref_wav
+            kw["denoise"] = True
+            kw["retry_badcase"] = True
+            kw["retry_badcase_max_times"] = 3
+        wav = model.generate(**kw)
+        wav = np.asarray(wav, dtype=np.float32)
+        if wav.size:
+            pieces.append(wav)
+            pieces.append(silence)
+
+    if not pieces:
+        raise RuntimeError("VoxCPM2 produced no audio.")
+
+    full = np.concatenate(pieces)
+    peak = float(np.max(np.abs(full)))
+    if peak > 0:
+        full = full / peak * 0.92
+
+    fd, path = tempfile.mkstemp(prefix="bedtime_en_", suffix=".wav")
+    os.close(fd)
+    sf.write(path, full, sr)
+    return path
+
+
+@spaces.GPU(duration=120)
+def generate_kannada_gpu(text: str, ref_wav: str, mood: str = "calming") -> str:
+    """Translate English story to Kannada and narrate via IndicF5. Returns WAV path."""
+    if not ref_wav or not os.path.exists(str(ref_wav)):
+        raise ValueError("Voice clip required for Kannada narration.")
+    from indic_text import translate_to_kannada
+    from indic_tts import narrate_kannada
+    kn_text = translate_to_kannada(text)
+    return narrate_kannada(ref_wav, "ಇದು ನನ್ನ ಧ್ವನಿ", kn_text, mood, 0.45)
+
+
+def create_bedtime(ref_audio, hero_name, bedtime_genre, bedtime_mood):
+    """Bedtime Voice flow: story → English cloned narration → Kannada narration."""
+    t0        = time.perf_counter()
+    hero_name = (hero_name or "").strip() or "Little One"
+    mood      = (bedtime_mood or "calming").lower()
+
+    yield (
+        '<div class="bedtime-empty">'
+        '<span class="moon-icon">🌙</span>'
+        '<p class="big">Writing your bedtime story…</p>'
+        '</div>',
+        "Writing your bedtime story…",
+        None, None,
+    )
+
+    story      = generate_bedtime_story_gpu(hero_name, bedtime_genre, bedtime_mood)
+    pages      = story.get("pages", [])
+    title      = story.get("title", "A Bedtime Story")
+    page_texts = [p.get("text", "") for p in pages]
+    full_text  = f"{title}. {' '.join(page_texts)}"
+    story_html = build_bedtime_html(title, pages)
+
+    yield (story_html, f"{title} — recording English narration…", None, None)
+
+    en_audio_path = None
+    try:
+        en_audio_path = generate_tts_cloned_gpu(full_text, ref_audio, mood)
+    except Exception as e:
+        logger.warning(f"English TTS failed: {e}")
+
+    kn_note = "translating to Kannada…" if ref_audio else "record your voice for Kannada narration"
+    yield (story_html, f"{title} — {kn_note}", en_audio_path, None)
+
+    kn_audio_path = None
+    if ref_audio:
+        try:
+            kn_audio_path = generate_kannada_gpu(full_text, ref_audio, mood)
+        except Exception as e:
+            logger.warning(f"Kannada TTS failed: {e}")
+
+    total    = round(time.perf_counter() - t0, 2)
+    done_msg = f"Done: {title} · {total}s"
+    if ref_audio and not kn_audio_path:
+        done_msg += "  · Kannada narration failed"
+    elif not ref_audio:
+        done_msg += "  · record your voice to get Kannada narration"
+
+    yield (story_html, done_msg, en_audio_path, kn_audio_path)
+
+
 # ============================================================================
 # MAIN
 # ============================================================================
@@ -691,6 +1249,7 @@ if __name__ == "__main__":
     demo = create_layout(
         load_sample_fn=load_sample_book,
         create_book_fn=create_book,
+        create_bedtime_fn=create_bedtime,
     )
     demo.queue(default_concurrency_limit=2, max_size=8)
     # design_kwargs (theme/css/js/head) is non-empty on gradio 6 (moved to launch)

audio_postprocess.py

@@ -0,0 +1,11 @@
+"""Minimal audio post-processing for bedtime narration."""
+import numpy as np
+
+
+def postprocess(audio: np.ndarray, sr: int) -> np.ndarray:
+    """Normalize bedtime narration to a comfortable listening level."""
+    audio = np.asarray(audio, dtype=np.float32)
+    peak = float(np.max(np.abs(audio)))
+    if peak > 0:
+        audio = audio / peak * 0.92
+    return audio

audio_utils.py

@@ -0,0 +1,50 @@
+"""Audio preparation helpers for voice reference clips."""
+from __future__ import annotations
+import os
+import tempfile
+import librosa
+import numpy as np
+import soundfile as sf
+
+REFERENCE_SAMPLE_RATE = 16_000
+MIN_REFERENCE_SECONDS = 5.0
+MAX_REFERENCE_SECONDS = 60.0
+MIN_RMS = 0.005
+
+
+def prepare_reference(path: str) -> str:
+    """Clean and validate a voice reference clip for VoxCPM2.
+    Returns a temporary mono 16 kHz WAV path owned by the caller.
+    """
+    if not path or not os.path.exists(path):
+        raise ValueError("Please record or upload a voice clip first.")
+    try:
+        audio, _ = librosa.load(path, sr=REFERENCE_SAMPLE_RATE, mono=True)
+    except Exception as exc:
+        raise ValueError("Could not read that audio clip. Please try a WAV or MP3.") from exc
+
+    if audio.size == 0 or not np.isfinite(audio).all():
+        raise ValueError("Voice clip looks empty. Please record 5–60 seconds of clear speech.")
+
+    audio = np.asarray(audio, dtype=np.float32)
+    audio, _ = librosa.effects.trim(audio, top_db=35)
+
+    if audio.size == 0:
+        raise ValueError("Voice clip is too quiet. Please record closer to the microphone.")
+
+    peak = float(np.max(np.abs(audio)))
+    rms  = float(np.sqrt(np.mean(np.square(audio))))
+    if peak <= 0.0 or rms < MIN_RMS:
+        raise ValueError("Voice clip is too quiet. Please record in a quiet room.")
+
+    duration = audio.size / REFERENCE_SAMPLE_RATE
+    if duration < MIN_REFERENCE_SECONDS:
+        raise ValueError("Please record at least 5 seconds of clear speech.")
+    if duration > MAX_REFERENCE_SECONDS:
+        audio = audio[:int(MAX_REFERENCE_SECONDS * REFERENCE_SAMPLE_RATE)]
+
+    audio = np.clip(audio, -1.0, 1.0)
+    fd, out_path = tempfile.mkstemp(prefix="bedvoice_ref_", suffix=".wav")
+    os.close(fd)
+    sf.write(out_path, audio, REFERENCE_SAMPLE_RATE, subtype="PCM_16")
+    return out_path

config.py

@@ -117,6 +117,31 @@ TTS_MODEL = ModelConfig(
     modal_memory=8192,
 )
 
+# ── Bedtime Voice tab models ────────────────────────────────────────────────
+
+TRANSLATION_MODEL = ModelConfig(
+    hub_id="ai4bharat/indictrans2-en-indic-1B",
+    params_b=1.0,
+    license=LicenseType.APACHE_2_0,
+    vram_gb=3.0,
+    modal_gpu="T4",
+    modal_memory=8192,
+)
+
+KANNADA_TTS_MODEL = ModelConfig(
+    hub_id="ai4bharat/IndicF5",
+    params_b=0.5,
+    license=LicenseType.APACHE_2_0,
+    vram_gb=2.0,
+    modal_gpu="T4",
+    modal_memory=8192,
+)
+
+KANNADA_FINETUNE: str = "mitvho09/IndicF5-Kannada-Bedtime-v2"
+
+BEDTIME_GENRES: list = ["Animals", "Dragons", "Ocean", "Forest", "Space", "Kingdom"]
+BEDTIME_MOODS:  list = ["Calming", "Dreamy", "Magical", "Cozy"]
+
 
 # ============================================================================
 # VOICE PRESETS (VoxCPM2 "voice design")

indic_text.py

@@ -0,0 +1,71 @@
+"""English → Kannada translation via AI4Bharat IndicTrans2."""
+from __future__ import annotations
+import os
+import re
+import torch
+from config import TRANSLATION_MODEL
+
+_HUB_ID = TRANSLATION_MODEL.hub_id
+_tok   = None
+_model = None
+
+
+def _get_model():
+    global _tok, _model
+    if _tok is None or _model is None:
+        from transformers import AutoModelForSeq2SeqLM, AutoTokenizer
+        token = os.environ.get("HF_TOKEN") or None
+        _tok   = AutoTokenizer.from_pretrained(_HUB_ID, trust_remote_code=True, token=token)
+        _model = AutoModelForSeq2SeqLM.from_pretrained(_HUB_ID, trust_remote_code=True, token=token)
+        _model = _model.to("cuda").eval()
+    return _tok, _model
+
+
+try:
+    _get_model()
+except Exception:
+    pass
+
+
+def _split_sentences(text: str, max_chars: int = 180):
+    parts = re.split(r"(?<=[.!?।])\s+|\n+", text.strip())
+    out = []
+    for p in parts:
+        p = p.strip()
+        if not p:
+            continue
+        while len(p) > max_chars:
+            cut = p.rfind(" ", 0, max_chars)
+            cut = cut if cut > 0 else max_chars
+            out.append(p[:cut].strip())
+            p = p[cut:].strip()
+        out.append(p)
+    return out or [text.strip()]
+
+
+def translate_to_kannada(en_text: str) -> str:
+    """Translate English story text to Kannada script."""
+    text = (en_text or "").strip()
+    if not text:
+        raise ValueError("Nothing to translate.")
+
+    from IndicTransToolkit.processor import IndicProcessor
+    tok, model = _get_model()
+    ip = IndicProcessor(inference=True)
+
+    sents = _split_sentences(text, max_chars=180)
+    batch = ip.preprocess_batch(sents, src_lang="eng_Latn", tgt_lang="kan_Knda")
+    inputs = tok(batch, truncation=True, padding="longest", return_tensors="pt").to(model.device)
+
+    with torch.inference_mode():
+        generated = model.generate(
+            **inputs, max_length=512, num_beams=5,
+            num_return_sequences=1, length_penalty=1.0,
+        )
+    decoded = tok.batch_decode(generated, skip_special_tokens=True)
+    translations = ip.postprocess_batch(decoded, lang="kan_Knda")
+
+    kn = " ".join(t.strip() for t in translations if t.strip())
+    if not kn:
+        raise RuntimeError("Translation returned empty Kannada text.")
+    return kn

indic_tts.py

@@ -0,0 +1,96 @@
+"""Kannada narration via AI4Bharat IndicF5 with fine-tuned bedtime checkpoint."""
+from __future__ import annotations
+import os
+import re
+import tempfile
+import numpy as np
+import torch
+from config import KANNADA_TTS_MODEL, KANNADA_FINETUNE
+
+_BASE_HUB_ID = KANNADA_TTS_MODEL.hub_id
+_CHECKPOINT  = KANNADA_FINETUNE
+INDICF5_SR   = 24_000
+_model       = None
+
+
+def _get_model():
+    global _model
+    if _model is None:
+        from transformers import AutoModel
+        token = os.environ.get("HF_TOKEN") or None
+        _model = AutoModel.from_pretrained(_BASE_HUB_ID, trust_remote_code=True, token=token)
+        try:
+            from huggingface_hub import hf_hub_download
+            cfm_path = hf_hub_download(repo_id=_CHECKPOINT, filename="cfm.pt", token=token)
+            cfm_state = torch.load(cfm_path, map_location="cpu", weights_only=True)
+            _model.ema_model.load_state_dict(cfm_state)
+        except Exception as e:
+            pass  # fall back to base checkpoint silently
+        _model = _model.to("cuda").eval()
+    return _model
+
+
+try:
+    _get_model()
+except Exception:
+    pass
+
+
+def _split_sentences(text: str, max_chars: int = 200):
+    parts = re.split(r"(?<=[.!?।])\s+|\n+", text.strip())
+    out = []
+    for p in parts:
+        p = p.strip()
+        if not p:
+            continue
+        while len(p) > max_chars:
+            cut = p.rfind(" ", 0, max_chars)
+            cut = cut if cut > 0 else max_chars
+            out.append(p[:cut].strip())
+            p = p[cut:].strip()
+        out.append(p)
+    return out or [text.strip()]
+
+
+def _pause_for(mood: str, energy: float = 0.45) -> float:
+    energy = max(0.0, min(1.0, float(energy)))
+    base = 0.45 if mood in ("funny", "magical") else 0.65
+    return round(base + (0.85 - base) * (1.0 - energy), 3)
+
+
+def narrate_kannada(ref_wav: str, ref_text: str, kannada_text: str,
+                    mood: str = "", energy: float = 0.45) -> str:
+    """Clone the user's voice and narrate Kannada text. Returns a temp WAV path."""
+    if not ref_wav or not os.path.exists(ref_wav):
+        raise ValueError("Please provide a voice reference WAV.")
+    if not (ref_text or "").strip():
+        raise ValueError("Kannada reference transcript is required.")
+    if not (kannada_text or "").strip():
+        raise ValueError("Please provide Kannada text to narrate.")
+
+    model = _get_model()
+    pause   = _pause_for(mood, energy) * 1.3
+    silence = np.zeros(int(pause * INDICF5_SR), dtype=np.float32)
+
+    chunks = []
+    for sentence in _split_sentences(kannada_text, max_chars=200):
+        audio = model(sentence, ref_audio_path=ref_wav, ref_text=ref_text.strip())
+        audio = np.asarray(audio, dtype=np.float32)
+        if audio.size and float(np.max(np.abs(audio))) > 1.0:
+            audio = audio / 32768.0
+        if audio.size:
+            chunks.append(audio)
+            chunks.append(silence)
+
+    if not chunks:
+        raise RuntimeError("IndicF5 produced no audio.")
+
+    full = np.concatenate(chunks)
+    from audio_postprocess import postprocess
+    full = postprocess(full, INDICF5_SR)
+
+    import soundfile as sf
+    fd, out_path = tempfile.mkstemp(prefix="bedtime_kn_", suffix=".wav")
+    os.close(fd)
+    sf.write(out_path, full, INDICF5_SR)
+    return out_path

requirements.txt

@@ -26,3 +26,7 @@ fpdf2
 requests
 huggingface_hub
 soundfile
+librosa>=0.10.0
+
+# Bedtime Voice tab (Kannada support)
+IndicTransToolkit @ git+https://github.com/VarunGumma/IndicTransToolkit.git

ui/layout.py

@@ -1,21 +1,13 @@
 """
-UI layout — CUSTOM Gradio Blocks layout for DoodleBook.
-
-Aesthetic: "Construction-paper scrapbook" — a handmade keepsake, not a dashboard.
-Signature details:
-  - Warm construction-paper grain background (inline SVG fractal noise)
-  - Wobbly hand-drawn borders via an SVG displacement filter (#wobble)
-  - Washi-tape strips, slightly rotated cards, polaroid-pinned doodle
-  - Crayon-textured hand-lettered headings (Gaegu / Caveat) + legible body (Nunito)
-
-Off-Brand Badge: zero Gradio defaults. Every styled element uses elem_classes so the
-CSS actually targets Gradio 5's DOM (the previous build targeted Gradio 3/4 `.gr-*`
-classes that no longer exist, so almost nothing applied).
+UI layout — DoodleBook with two tabs: Storybook + Bedtime Voice.
+
+Storybook tab: construction-paper scrapbook (unchanged aesthetic).
+Bedtime Voice tab: moonlit night-sky palette, voice cloning, English + Kannada audio.
+Both tabs share the same fonts, header, and footer.
 """
 
 import gradio as gr
-
-from config import VOICE_CHOICES, DEFAULT_VOICE
+from config import VOICE_CHOICES, DEFAULT_VOICE, BEDTIME_GENRES, BEDTIME_MOODS
 
 THEMES = [
     "brave adventure",
@@ -26,9 +18,6 @@ THEMES = [
     "learning something new",
 ]
 
-# ---------------------------------------------------------------------------
-# Fonts: injected via <head> (reliable) instead of CSS @import (often stripped).
-# ---------------------------------------------------------------------------
 HEAD = """
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -36,10 +25,6 @@ HEAD = """
 <link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Caveat:wght@500;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
 """
 
-# ---------------------------------------------------------------------------
-# Hidden SVG defs: the hand-drawn "wobble" filter + a crayon underline squiggle.
-# Applied to pseudo-element borders so text stays crisp while frames go wavy.
-# ---------------------------------------------------------------------------
 SVG_DEFS = """
 <svg width="0" height="0" aria-hidden="true" style="position:absolute">
   <filter id="wobble">
@@ -58,13 +43,13 @@ SVG_DEFS = """
 
 CSS = r"""
 /* ============================================================================
-   DOODLEBOOK — CONSTRUCTION-PAPER SCRAPBOOK
+   DOODLEBOOK — CONSTRUCTION-PAPER SCRAPBOOK + BEDTIME VOICE
    ============================================================================ */
 
 :root {
-  --paper:      #f6ecd4;   /* warm construction-paper base */
+  --paper:      #f6ecd4;
   --paper-2:    #efe0c2;
-  --ink:        #2e2a26;   /* soft black, like a felt pen */
+  --ink:        #2e2a26;
   --ink-soft:   #6b5d4f;
   --crayon-orange: #ef6a3a;
   --crayon-teal:   #2ba39a;
@@ -73,9 +58,17 @@ CSS = r"""
   --crayon-sky:    #4a9fd6;
   --crayon-leaf:   #74b85a;
   --tape:       rgba(244, 198, 74, 0.55);
+  /* Bedtime palette */
+  --night:      #0e0e2e;
+  --night-card: #14143a;
+  --night-2:    #1a1a4a;
+  --moon:       #c8a83c;
+  --moon-glow:  #e8c84a;
+  --starlight:  #ddd8ff;
+  --star-soft:  #9090c0;
+  --night-border: #4040a0;
 }
 
-/* --- Neutralize the Gradio theme so OUR styles win (was: Soft theme bleed) --- */
 .gradio-container,
 .gradio-container *:not(svg):not(path) {
   --block-background-fill: transparent;
@@ -94,7 +87,6 @@ CSS = r"""
   color: var(--ink);
 }
 
-/* Paper-grain backdrop: layered fractal noise + soft color blooms */
 body, gradio-app {
   background-color: var(--paper) !important;
   background-image:
@@ -105,29 +97,51 @@ body, gradio-app {
   background-attachment: fixed !important;
 }
 
-/* Reusable hand-drawn frame: a wobbly inked border that doesn't disturb content */
-.framed { position: relative; }
-.framed::after {
-  content: "";
-  position: absolute; inset: 7px;
-  border: 2.5px solid var(--ink);
-  border-radius: 16px;
-  filter: url(#wobble);
-  pointer-events: none;
-  opacity: 0.85;
-}
-
-/* Washi-tape strip helper */
-.taped::before {
-  content: "";
-  position: absolute; top: -12px; left: 50%;
-  width: 110px; height: 26px;
-  transform: translateX(-50%) rotate(-3deg);
-  background:
-    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px),
-    var(--tape);
-  box-shadow: 0 2px 5px rgba(0,0,0,.12);
-  z-index: 3;
+/* ============================== KID ANIMATIONS ============================== */
+.db-spark {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+  animation: db-sparkle-float linear infinite;
+}
+@keyframes db-sparkle-float {
+  0%   { transform: translateY(0) scale(0.6) rotate(0deg);   opacity: 0; }
+  15%  { opacity: 0.55; }
+  85%  { opacity: 0.3; }
+  100% { transform: translateY(-110px) scale(1.1) rotate(200deg); opacity: 0; }
+}
+
+.db-star {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  animation: db-twinkle ease-in-out infinite;
+}
+@keyframes db-twinkle {
+  0%,100% { opacity: 0.04; transform: scale(0.7); }
+  50%      { opacity: 0.95; transform: scale(1.35); }
+}
+
+/* ============================== TABS ============================== */
+.gradio-container [role="tab"] {
+  font-family: 'Gaegu', cursive !important;
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  border-radius: 14px 14px 0 0 !important;
+  border: 2.5px solid var(--ink) !important;
+  border-bottom: none !important;
+  background: #ede0c8 !important;
+  color: var(--ink-soft) !important;
+  padding: 10px 24px !important;
+  margin-right: 4px !important;
+  transition: background .15s !important;
+}
+.gradio-container [role="tab"][aria-selected="true"] {
+  background: #fffdf6 !important;
+  color: var(--ink) !important;
+}
+.gradio-container [role="tab"]:hover:not([aria-selected="true"]) {
+  background: #f5e8cf !important;
 }
 
 /* ============================== HEADER ============================== */
@@ -143,10 +157,7 @@ body, gradio-app {
   line-height: 0.95 !important;
   color: var(--ink) !important;
   margin: 0 !important;
-  letter-spacing: 1px;
-  text-shadow:
-     2px 2px 0 var(--crayon-sun),
-     4px 4px 0 rgba(239,106,58,.35);
+  text-shadow: 2px 2px 0 var(--crayon-sun), 4px 4px 0 rgba(239,106,58,.35);
 }
 .app-title .doodle-o { color: var(--crayon-orange); display: inline-block; transform: rotate(-6deg); }
 .app-subtitle {
@@ -155,14 +166,13 @@ body, gradio-app {
   color: var(--ink-soft) !important;
   margin-top: 6px !important;
 }
-/* hand-drawn crayon underline under the title */
 .title-squiggle { display:block; margin: 6px auto 0; width: min(360px, 70%); height: 16px; }
 .title-squiggle path {
   stroke: var(--crayon-teal); stroke-width: 5; fill: none;
   stroke-linecap: round; filter: url(#wobble-strong);
 }
 
-/* ============================== CARDS ============================== */
+/* ============================== STORYBOOK CARDS ============================== */
 .input-card, .output-card {
   position: relative;
   background: #fffdf6 !important;
@@ -175,269 +185,360 @@ body, gradio-app {
 .output-card { transform: rotate(0.5deg); }
 .input-card:hover, .output-card:hover { transform: rotate(0deg); transition: transform .35s ease; }
 
-/* section labels above fields */
+.input-card .form, .input-card .block, .input-card .panel,
+.input-card .wrap, .input-card .gap, .input-card .styler,
+.output-card .form, .output-card .block, .output-card .panel,
+.output-card .gap, .output-card .styler {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.input-card .dataset, .input-card [data-testid="dataset"],
+.input-card table, .input-card thead, .input-card tbody,
+.input-card tr, .input-card th, .input-card td {
+  background: #fffdf6 !important;
+  color: var(--ink) !important;
+  border-color: var(--ink-soft) !important;
+}
+.input-card .dataset * { color: var(--ink) !important; }
+
 .card-eyebrow {
   font-family: 'Gaegu', cursive; font-weight: 700;
   font-size: 22px; color: var(--crayon-orange);
-  margin: 0 0 10px; transform: rotate(-1.5deg);
+  margin: 0 0 10px; transform: rotate(-1.5deg); display: block;
 }
 
-/* ============================== FIELDS ============================== */
-.field label span, .doodle-input label span, .tiny-toggle label span {
-  font-family: 'Gaegu', cursive !important;
-  font-weight: 700 !important;
-  font-size: 19px !important;
-  color: var(--ink) !important;
+/* ============================== BEDTIME VOICE CARDS ============================== */
+.bedtime-input-card {
+  position: relative;
+  background: linear-gradient(160deg, var(--night-card) 0%, var(--night) 100%) !important;
+  border-radius: 18px !important;
+  padding: 30px 26px 26px !important;
+  margin: 8px !important;
+  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 50px rgba(80,80,180,.1) !important;
+  transform: rotate(-0.5deg);
+  color: var(--starlight) !important;
+}
+.bedtime-input-card:hover { transform: rotate(0deg); transition: transform .35s ease; }
+.bedtime-output-card {
+  position: relative;
+  background: linear-gradient(160deg, var(--night-2) 0%, var(--night) 100%) !important;
+  border-radius: 18px !important;
+  padding: 30px 26px 26px !important;
+  margin: 8px !important;
+  box-shadow: 0 10px 26px rgba(0,0,0,.5) !important;
+  transform: rotate(0.4deg);
+}
+.bedtime-output-card:hover { transform: rotate(0deg); transition: transform .35s ease; }
+
+.bedtime-input-card .form, .bedtime-input-card .block,
+.bedtime-input-card .panel, .bedtime-input-card .wrap,
+.bedtime-input-card .gap, .bedtime-input-card .styler {
+  background: transparent !important;
+  border-color: rgba(64,64,160,.4) !important;
+  box-shadow: none !important;
 }
-.field textarea,
-.field input[type="text"],
-.field input:not([type]),
-.field .wrap .secondary-wrap input,
-.field [data-testid="textbox"],
-.field input[role="listbox"],
-.field .secondary-wrap,
-.field [class*="dropdown"] input {
-  font-family: 'Nunito', sans-serif !important;
-  font-size: 17px !important;
-  color: var(--ink) !important;
-  background: #fffdf6 !important;
-  border: 2.5px solid var(--ink) !important;
+.bedtime-output-card .form, .bedtime-output-card .block,
+.bedtime-output-card .panel, .bedtime-output-card .wrap,
+.bedtime-output-card .gap, .bedtime-output-card .styler {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.card-eyebrow-moon {
+  font-family: 'Gaegu', cursive; font-weight: 700;
+  font-size: 22px; color: var(--moon);
+  margin: 0 0 10px; transform: rotate(-1.5deg); display: block;
+}
+
+.moon-orb {
+  width: 64px; height: 64px;
+  background: radial-gradient(circle at 38% 38%, #f5e87a, #c8a83c 60%, #8a6a10);
+  border-radius: 50%;
+  box-shadow: 0 0 30px rgba(200,168,60,.5), 0 0 60px rgba(200,168,60,.2);
+  margin: 0 auto 16px;
+  animation: moon-glow 4s ease-in-out infinite;
+}
+@keyframes moon-glow {
+  0%,100% { box-shadow: 0 0 30px rgba(200,168,60,.4), 0 0 60px rgba(200,168,60,.2); }
+  50%      { box-shadow: 0 0 50px rgba(200,168,60,.8), 0 0 90px rgba(200,168,60,.35); }
+}
+
+/* Night radio chips */
+.theme-pick-night .wrap,
+.theme-pick-night [role="radiogroup"] {
+  display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
+}
+.theme-pick-night label {
+  background: rgba(80,80,180,.18) !important;
+  border: 2px solid var(--night-border) !important;
+  border-radius: 14px !important;
+  padding: 8px 14px !important; margin: 0 !important; cursor: pointer !important;
+  font-family: 'Gaegu', cursive !important; font-size: 16px !important;
+  color: var(--starlight) !important;
+  transition: transform .1s ease, background .1s ease !important;
+}
+.theme-pick-night label:hover { transform: translateY(-1px); background: rgba(100,100,220,.3) !important; }
+.theme-pick-night label:has(input:checked) {
+  background: var(--moon) !important;
+  color: var(--night) !important;
+  border-color: var(--moon-glow) !important;
+  box-shadow: 0 0 8px rgba(200,168,60,.4) !important;
+}
+.theme-pick-night input[type="radio"] { accent-color: var(--moon); margin-right: 6px; }
+
+/* Night text fields */
+.field-night label span {
+  font-family: 'Gaegu', cursive !important; font-weight: 700 !important;
+  font-size: 19px !important; color: var(--moon) !important;
+}
+.field-night textarea,
+.field-night input[type="text"],
+.field-night input:not([type]) {
+  font-family: 'Nunito', sans-serif !important; font-size: 17px !important;
+  color: var(--starlight) !important;
+  background: rgba(100,100,200,.15) !important;
+  border: 2px solid var(--night-border) !important;
   border-radius: 12px !important;
   padding: 11px 14px !important;
-  box-shadow: 2px 3px 0 rgba(46,42,38,.10) !important;
 }
-.field textarea:focus,
-.field input:focus {
-  border-color: var(--crayon-orange) !important;
-  box-shadow: 2px 3px 0 rgba(239,106,58,.30) !important;
+.field-night textarea:focus, .field-night input:focus {
+  border-color: var(--moon) !important;
+  box-shadow: 0 0 8px rgba(200,168,60,.3) !important;
   outline: none !important;
 }
 
-/* doodle image as a pinned polaroid */
+/* Night audio recording input */
+.bedtime-audio label span {
+  font-family: 'Gaegu', cursive !important; font-weight: 700 !important;
+  font-size: 19px !important; color: var(--moon) !important;
+}
+.bedtime-audio [data-testid="audio"],
+.bedtime-audio .audio {
+  background: rgba(60,60,160,.2) !important;
+  border: 2px solid var(--night-border) !important;
+  border-radius: 12px !important;
+}
+.bedtime-audio .upload-container,
+.bedtime-audio .wrap { background: transparent !important; }
+
+/* Bedtime button */
+.btn-bedtime, .btn-bedtime button {
+  font-family: 'Gaegu', cursive !important; font-weight: 700 !important;
+  font-size: 24px !important; color: var(--night) !important;
+  background: var(--moon) !important;
+  border: 2.5px solid #8a6a10 !important; border-radius: 16px !important;
+  padding: 13px 24px !important; width: 100% !important;
+  transform: rotate(-0.8deg);
+  box-shadow: 4px 5px 0 rgba(0,0,0,.5) !important;
+  transition: transform .12s ease, box-shadow .12s ease !important;
+}
+.btn-bedtime:hover, .btn-bedtime button:hover {
+  transform: rotate(-0.8deg) translate(-2px,-2px);
+  box-shadow: 6px 7px 0 rgba(0,0,0,.5) !important;
+  background: var(--moon-glow) !important;
+}
+
+/* Bedtime status */
+.bedtime-status textarea {
+  font-family: 'Caveat', cursive !important; font-size: 20px !important;
+  color: var(--moon) !important;
+  background: rgba(80,80,180,.12) !important;
+  border: 2px dashed var(--night-border) !important;
+  border-radius: 12px !important; text-align: center !important;
+}
+.bedtime-status, .bedtime-status .block, .bedtime-status .form,
+.bedtime-status label span { background: transparent !important; color: var(--moon) !important; }
+
+/* Night audio players */
+.audio-player-night {
+  background: rgba(60,60,160,.18) !important;
+  border: 2px solid var(--night-border) !important;
+  border-radius: 14px !important;
+  padding: 10px 12px !important;
+}
+.audio-player-night label span {
+  font-family: 'Gaegu', cursive !important; color: var(--moon) !important; font-size: 18px !important;
+}
+
+/* Bedtime story text display */
+.bedtime-title {
+  font-family: 'Gaegu', cursive; font-weight: 700;
+  font-size: clamp(22px, 3.5vw, 36px); color: var(--moon);
+  text-align: center; margin-bottom: 18px;
+  text-shadow: 0 0 20px rgba(200,168,60,.3);
+}
+.bedtime-page {
+  font-family: 'Caveat', cursive; font-size: clamp(18px, 2.5vw, 26px);
+  line-height: 1.6; color: var(--starlight);
+  text-align: center; padding: 14px 18px; margin: 10px 0;
+  background: rgba(255,255,255,.05); border-radius: 12px;
+  border-left: 3px solid rgba(200,168,60,.3);
+}
+.bedtime-empty {
+  text-align: center; padding: 60px 24px;
+  font-family: 'Gaegu', cursive; color: var(--star-soft);
+}
+.bedtime-empty .moon-icon { font-size: 48px; display: block; margin-bottom: 12px; animation: bob 2.2s ease-in-out infinite; }
+.bedtime-empty .big { font-size: 26px; color: var(--starlight); margin-bottom: 6px; }
+
+/* ============================== STORYBOOK FIELDS ============================== */
+.field label span, .doodle-input label span, .tiny-toggle label span {
+  font-family: 'Gaegu', cursive !important; font-weight: 700 !important;
+  font-size: 19px !important; color: var(--ink) !important;
+}
+.field textarea, .field input[type="text"], .field input:not([type]),
+.field .wrap .secondary-wrap input, .field [data-testid="textbox"],
+.field input[role="listbox"], .field .secondary-wrap, .field [class*="dropdown"] input {
+  font-family: 'Nunito', sans-serif !important; font-size: 17px !important;
+  color: var(--ink) !important; background: #fffdf6 !important;
+  border: 2.5px solid var(--ink) !important; border-radius: 12px !important;
+  padding: 11px 14px !important; box-shadow: 2px 3px 0 rgba(46,42,38,.10) !important;
+}
+.field textarea:focus, .field input:focus {
+  border-color: var(--crayon-orange) !important;
+  box-shadow: 2px 3px 0 rgba(239,106,58,.30) !important; outline: none !important;
+}
+
 .doodle-input { position: relative; }
-.doodle-input .image-container,
-.doodle-input [data-testid="image"] {
-  background: #ffffff !important;
-  border: none !important;
-  border-radius: 4px !important;
-  padding: 12px 12px 34px !important;          /* polaroid bottom lip */
-  box-shadow: 0 8px 18px rgba(46,42,38,.18) !important;
-  transform: rotate(-2deg);
+.doodle-input .image-container, .doodle-input [data-testid="image"] {
+  background: #ffffff !important; border: none !important; border-radius: 4px !important;
+  padding: 12px 12px 34px !important;
+  box-shadow: 0 8px 18px rgba(46,42,38,.18) !important; transform: rotate(-2deg);
 }
 .doodle-input img { border-radius: 2px !important; }
-.doodle-input .upload-container,
-.doodle-input [data-testid="image"] .wrap {
-  border: 3px dashed var(--crayon-sky) !important;
-  border-radius: 8px !important;
-  background: #f3f9ff !important;
-  color: var(--ink-soft) !important;
+.doodle-input .upload-container, .doodle-input [data-testid="image"] .wrap {
+  border: 3px dashed var(--crayon-sky) !important; border-radius: 8px !important;
+  background: #f3f9ff !important; color: var(--ink-soft) !important;
 }
 
 /* ============================== BUTTONS ============================== */
-/* elem_classes land on the <button> itself in Gradio 5, so target both the
-   button directly AND a possible inner <button> wrapper to be safe. */
 .btn-make, .btn-make button {
-  font-family: 'Gaegu', cursive !important;
-  font-weight: 700 !important;
-  font-size: 26px !important;
-  letter-spacing: .5px !important;
-  color: #fff !important;
-  background: var(--crayon-orange) !important;
-  border: 2.5px solid var(--ink) !important;
-  border-radius: 16px !important;
-  padding: 14px 26px !important;
-  width: 100% !important;
-  transform: rotate(-1deg);
-  box-shadow: 4px 5px 0 var(--ink) !important;
+  font-family: 'Gaegu', cursive !important; font-weight: 700 !important;
+  font-size: 26px !important; letter-spacing: .5px !important;
+  color: #fff !important; background: var(--crayon-orange) !important;
+  border: 2.5px solid var(--ink) !important; border-radius: 16px !important;
+  padding: 14px 26px !important; width: 100% !important;
+  transform: rotate(-1deg); box-shadow: 4px 5px 0 var(--ink) !important;
   transition: transform .12s ease, box-shadow .12s ease !important;
 }
 .btn-make:hover, .btn-make button:hover {
   transform: rotate(-1deg) translate(-2px,-2px);
-  box-shadow: 6px 7px 0 var(--ink) !important;
-  background: #f5764a !important;
-}
-.btn-make:active, .btn-make button:active {
-  transform: rotate(-1deg) translate(2px,2px);
-  box-shadow: 1px 2px 0 var(--ink) !important;
+  box-shadow: 6px 7px 0 var(--ink) !important; background: #f5764a !important;
 }
 
 .btn-pdf, .btn-pdf button {
-  font-family: 'Gaegu', cursive !important;
-  font-weight: 700 !important;
-  font-size: 19px !important;
-  color: var(--ink) !important;
-  background: var(--crayon-sun) !important;
-  border: 2.5px solid var(--ink) !important;
-  border-radius: 14px !important;
-  box-shadow: 3px 4px 0 var(--ink) !important;
+  font-family: 'Gaegu', cursive !important; font-weight: 700 !important;
+  font-size: 19px !important; color: var(--ink) !important;
+  background: var(--crayon-sun) !important; border: 2.5px solid var(--ink) !important;
+  border-radius: 14px !important; box-shadow: 3px 4px 0 var(--ink) !important;
   transform: rotate(0.8deg);
 }
 .btn-pdf:hover, .btn-pdf button:hover { background: #f8d066 !important; }
 
-.download-row {
-  margin-top: 8px !important;
-  gap: 10px !important;
-}
-.download-row > div {
-  flex: 1 1 0 !important;
-}
-
-/* tiny-mode toggle */
+.download-row { margin-top: 8px !important; gap: 10px !important; }
+.download-row > div { flex: 1 1 0 !important; }
 .tiny-toggle { transform: rotate(-0.6deg); }
 
-/* === STORY THEME picker: visible crayon chips (was a dark, easy-to-miss dropdown) === */
-.theme-pick .wrap,
-.theme-pick [role="radiogroup"] {
-  display: flex !important;
-  flex-wrap: wrap !important;
-  gap: 8px !important;
+/* ============================== THEME/VOICE CHIPS ============================== */
+.theme-pick .wrap, .theme-pick [role="radiogroup"] {
+  display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
 }
 .theme-pick label {
-  background: #fffdf6 !important;
-  border: 2.5px solid var(--ink) !important;
-  border-radius: 14px !important;
-  padding: 8px 14px !important;
-  margin: 0 !important;
-  cursor: pointer !important;
-  font-family: 'Gaegu', cursive !important;
-  font-size: 16px !important;
-  color: var(--ink) !important;
+  background: #fffdf6 !important; border: 2.5px solid var(--ink) !important;
+  border-radius: 14px !important; padding: 8px 14px !important; margin: 0 !important;
+  cursor: pointer !important; font-family: 'Gaegu', cursive !important;
+  font-size: 16px !important; color: var(--ink) !important;
   box-shadow: 2px 3px 0 rgba(46,42,38,.12) !important;
   transition: transform .1s ease, background .1s ease !important;
 }
 .theme-pick label:hover { transform: translateY(-1px); background: #fff3e0 !important; }
-/* selected chip = crayon orange */
 .theme-pick label:has(input:checked) {
-  background: var(--crayon-orange) !important;
-  color: #fff !important;
+  background: var(--crayon-orange) !important; color: #fff !important;
   box-shadow: 2px 3px 0 var(--ink) !important;
 }
 .theme-pick input[type="radio"] { accent-color: var(--crayon-orange); margin-right: 6px; }
 
 /* ============================== STATUS ============================== */
 .status-display textarea {
-  font-family: 'Caveat', cursive !important;
-  font-size: 20px !important;
-  color: var(--crayon-teal) !important;
-  background: #f0faf8 !important;
-  border: 2.5px dashed var(--crayon-teal) !important;
-  border-radius: 12px !important;
+  font-family: 'Caveat', cursive !important; font-size: 20px !important;
+  color: var(--crayon-teal) !important; background: #f0faf8 !important;
+  border: 2.5px dashed var(--crayon-teal) !important; border-radius: 12px !important;
   text-align: center !important;
 }
+.status-display, .status-display .block, .status-display .form,
+.status-display .container, .status-display label span {
+  background: transparent !important; color: var(--crayon-teal) !important;
+}
 
 /* ============================== AUDIO ============================== */
 .audio-player {
-  position: relative;
-  background: #f0faf8 !important;
-  border: 2.5px solid var(--ink) !important;
-  border-radius: 14px !important;
-  padding: 10px 12px !important;
+  background: #f0faf8 !important; border: 2.5px solid var(--ink) !important;
+  border-radius: 14px !important; padding: 10px 12px !important;
   box-shadow: 3px 4px 0 rgba(46,42,38,.12) !important;
 }
 .audio-player label span { font-family: 'Gaegu', cursive !important; font-size: 18px !important; }
 
 /* ============================== THE BOOK ============================== */
 .book-stage { min-height: 220px; }
-
 .book-container { max-width: 100%; padding: 4px; }
-
 .book-title {
-  font-family: 'Gaegu', cursive !important;
-  font-weight: 700 !important;
-  font-size: clamp(30px, 4.5vw, 46px) !important;
-  text-align: center !important;
-  color: var(--ink) !important;
-  margin: 6px 0 22px !important;
+  font-family: 'Gaegu', cursive !important; font-weight: 700 !important;
+  font-size: clamp(30px, 4.5vw, 46px) !important; text-align: center !important;
+  color: var(--ink) !important; margin: 6px 0 22px !important;
   text-shadow: 2px 2px 0 var(--crayon-sun);
 }
-
-/* the front cover */
 .book-cover {
-  position: relative;
-  text-align: center;
-  padding: 34px 22px 30px;
-  margin: 10px auto 26px;
-  background:
-    radial-gradient(circle at 30% 20%, rgba(244,198,74,.25), transparent 55%),
-    #fff8e6;
-  border-radius: 18px;
-  box-shadow: 0 12px 28px rgba(46,42,38,.16);
-  transform: rotate(-1deg);
-}
-.book-cover .cover-kicker {
-  font-family: 'Caveat', cursive; font-size: 22px; color: var(--crayon-berry);
+  text-align: center; padding: 34px 22px 30px; margin: 10px auto 26px;
+  background: radial-gradient(circle at 30% 20%, rgba(244,198,74,.25), transparent 55%), #fff8e6;
+  border-radius: 18px; box-shadow: 0 12px 28px rgba(46,42,38,.16); transform: rotate(-1deg);
 }
+.book-cover .cover-kicker { font-family: 'Caveat', cursive; font-size: 22px; color: var(--crayon-berry); }
 .book-cover .cover-title {
   font-family: 'Gaegu', cursive; font-weight: 700;
   font-size: clamp(34px, 5vw, 52px); color: var(--ink); margin: 4px 0 2px;
   text-shadow: 2px 2px 0 var(--crayon-sun);
 }
-
-/* each page = a taped-down scrapbook entry, alternating tilt */
 .book-page {
-  position: relative;
-  background: #fffdf6;
-  border-radius: 14px;
-  padding: 22px 22px 26px;
-  margin: 30px auto;
-  max-width: 640px;
+  position: relative; background: #fffdf6; border-radius: 14px;
+  padding: 22px 22px 26px; margin: 30px auto; max-width: 640px;
   box-shadow: 0 8px 20px rgba(46,42,38,.13);
 }
 .book-page:nth-child(even) { transform: rotate(0.9deg); }
 .book-page:nth-child(odd)  { transform: rotate(-0.9deg); }
 .book-page:hover { transform: rotate(0deg) translateY(-3px); transition: transform .3s ease; }
-/* washi tape on every page */
 .book-page::before {
-  content: "";
-  position: absolute; top: -11px; left: 50%;
-  width: 96px; height: 24px;
-  transform: translateX(-50%) rotate(-2.5deg);
+  content: ""; position: absolute; top: -11px; left: 50%;
+  width: 96px; height: 24px; transform: translateX(-50%) rotate(-2.5deg);
   background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 5px, transparent 5px 10px), var(--tape);
   box-shadow: 0 2px 5px rgba(0,0,0,.12);
 }
-
-/* hand-drawn frame around the illustration */
 .book-page .page-art { position: relative; }
 .book-page .page-art::after {
   content: ""; position: absolute; inset: 4px;
   border: 3px solid var(--ink); border-radius: 12px;
   filter: url(#wobble); pointer-events: none;
 }
-.book-page img {
-  display: block; width: 100%;
-  border-radius: 10px;
-}
-
+.book-page img { display: block; width: 100%; border-radius: 10px; }
 .page-text {
-  font-family: 'Caveat', cursive !important;
-  font-size: clamp(22px, 3vw, 30px) !important;
-  line-height: 1.45 !important;
-  color: var(--ink) !important;
-  text-align: center !important;
-  margin: 18px 6px 4px !important;
+  font-family: 'Caveat', cursive !important; font-size: clamp(22px, 3vw, 30px) !important;
+  line-height: 1.45 !important; color: var(--ink) !important;
+  text-align: center !important; margin: 18px 6px 4px !important;
 }
 .page-num {
   display: block; text-align: center; margin-top: 8px;
-  font-family: 'Gaegu', cursive; font-weight: 700;
-  font-size: 16px; color: var(--ink-soft);
+  font-family: 'Gaegu', cursive; font-weight: 700; font-size: 16px; color: var(--ink-soft);
 }
-
-/* loading / empty states */
 .page-loading {
   text-align: center; padding: 40px 20px;
-  font-family: 'Gaegu', cursive; font-weight: 700;
-  font-size: 22px; color: var(--ink-soft);
+  font-family: 'Gaegu', cursive; font-weight: 700; font-size: 22px; color: var(--ink-soft);
   animation: bob 1.6s ease-in-out infinite;
 }
-.book-empty {
-  text-align: center; padding: 54px 24px;
-  font-family: 'Gaegu', cursive; color: var(--ink-soft);
-}
+.book-empty { text-align: center; padding: 54px 24px; font-family: 'Gaegu', cursive; color: var(--ink-soft); }
 .book-empty .big { font-size: 30px; color: var(--ink); }
 .book-empty .arrow { font-size: 42px; display:block; margin-bottom: 8px; animation: bob 1.6s ease-in-out infinite; }
 @keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
-
-/* engine badge so you ALWAYS know FLUX vs placeholder */
 .engine-badge {
   display:inline-block; margin: 0 auto 4px; padding: 3px 12px;
   font-family:'Gaegu',cursive; font-weight:700; font-size:14px;
@@ -448,18 +549,13 @@ body, gradio-app {
 
 /* ============================== ACCORDION ============================== */
 .behind-magic {
-  position: relative;
-  margin: 36px 8px 0 !important;
-  background: #fff8ef !important;
-  border: 2.5px dashed var(--crayon-berry) !important;
-  border-radius: 16px !important;
-  padding: 6px 14px !important;
-  transform: rotate(-0.4deg);
+  position: relative; margin: 16px 8px 0 !important;
+  background: #fff8ef !important; border: 2.5px dashed var(--crayon-berry) !important;
+  border-radius: 16px !important; padding: 6px 14px !important; transform: rotate(-0.4deg);
 }
 .behind-magic span, .behind-magic button {
-  font-family: 'Gaegu', cursive !important;
-  font-weight: 700 !important; color: var(--crayon-berry) !important;
-  font-size: 20px !important;
+  font-family: 'Gaegu', cursive !important; font-weight: 700 !important;
+  color: var(--crayon-berry) !important; font-size: 20px !important;
 }
 
 /* ============================== FOOTER ============================== */
@@ -469,81 +565,7 @@ body, gradio-app {
 }
 .app-footer .badges { font-family:'Gaegu',cursive; font-weight:700; color: var(--ink); }
 
-/* ============================== RESPONSIVE ============================== */
-@media (max-width: 820px) {
-  /* Fixed backgrounds kill touch-scroll on iOS Safari */
-  body, gradio-app {
-    background-attachment: scroll !important;
-  }
-
-  /* Allow the page to scroll vertically, not overflow horizontally */
-  html, body {
-    height: auto !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-    -webkit-overflow-scrolling: touch !important;
-  }
-
-  gradio-app {
-    height: auto !important;
-    min-height: 100vh !important;
-    overflow-y: visible !important;
-    overflow-x: hidden !important;
-  }
-
-  /* Keep container within viewport width */
-  .gradio-container {
-    max-width: 100vw !important;
-    overflow-x: hidden !important;
-    padding: 0 !important;
-  }
-
-  /* Stack the two main columns: allow flex-wrap, then make each card full-width */
-  .gradio-container .gap {
-    flex-wrap: wrap !important;
-  }
-
-  .input-card, .output-card {
-    transform: none !important;
-    flex: 1 1 100% !important;
-    width: 100% !important;
-    max-width: 100% !important;
-    min-width: 0 !important;
-    margin: 8px 0 !important;
-    box-sizing: border-box !important;
-  }
-
-  /* Slightly smaller title on phones */
-  .app-title {
-    font-size: clamp(32px, 10vw, 52px) !important;
-  }
-
-  /* Story-book pages: full width, smaller margin */
-  .book-page {
-    max-width: 100%;
-    margin: 20px auto;
-  }
-
-  /* Theme / voice chips: tighter on small screens */
-  .theme-pick label {
-    font-size: 14px !important;
-    padding: 6px 10px !important;
-  }
-}
-
-/* ============================== ACCESSIBILITY ============================== */
-@media (prefers-reduced-motion: reduce) {
-  * { animation: none !important; transition: none !important; }
-  .input-card, .output-card, .book-page, .book-cover, .btn-make, .btn-make button { transform: none !important; }
-}
-
-/* ============================================================================
-   LIGHT-MODE LOCK — the scrapbook design is light-only. Gradio's dark theme
-   ('.dark .block', etc.) has higher specificity than our single-class rules and
-   was painting the cards/examples/status dark with invisible (dark-on-dark)
-   text. We also force light mode via JS (see create_layout), but lock the colors
-   here too so it looks right even before/if that doesn't run.
-   ============================================================================ */
+/* ============================== LIGHT-MODE LOCK ============================== */
 .gradio-container, .gradio-container *:not(svg):not(path) {
   --background-fill-primary: transparent;
   --background-fill-secondary: transparent;
@@ -555,224 +577,296 @@ body, gradio-app {
   color-scheme: light;
 }
 
-/* The cards are cream; EVERY Gradio wrapper div inside them must be see-through
-   so the cream shows. Gradio groups the stacked fields into a .form/.block
-   wrapper that stayed dark — this is what made Section 2 a dark rectangle. Leaf
-   controls (input/textarea/label/button) keep their own backgrounds because they
-   are not divs and are styled separately above. */
-.input-card .form, .input-card .block, .input-card .panel,
-.input-card .wrap, .input-card .gap, .input-card .styler,
-.output-card .form, .output-card .block, .output-card .panel,
-.output-card .gap, .output-card .styler {
-  background: transparent !important;
-  border-color: transparent !important;
-  box-shadow: none !important;
-}
-
-/* Examples / Dataset: render as a light scrapbook strip, never the dark default */
-.input-card .dataset,
-.input-card [data-testid="dataset"],
-.input-card .gr-samples-table,
-.input-card table,
-.input-card thead,
-.input-card tbody,
-.input-card tr,
-.input-card th,
-.input-card td {
-  background: #fffdf6 !important;
-  color: var(--ink) !important;
-  border-color: var(--ink-soft) !important;
-}
-.input-card .dataset *, .input-card [data-testid="dataset"] * {
-  color: var(--ink) !important;
+/* ============================== RESPONSIVE ============================== */
+@media (max-width: 820px) {
+  body, gradio-app { background-attachment: scroll !important; }
+  html, body { height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; }
+  gradio-app { height: auto !important; min-height: 100vh !important; overflow-y: visible !important; overflow-x: hidden !important; }
+  .gradio-container { max-width: 100vw !important; overflow-x: hidden !important; padding: 0 !important; }
+  .gradio-container .gap { flex-wrap: wrap !important; }
+  .input-card, .output-card,
+  .bedtime-input-card, .bedtime-output-card {
+    transform: none !important; flex: 1 1 100% !important; width: 100% !important;
+    max-width: 100% !important; min-width: 0 !important; margin: 8px 0 !important;
+    box-sizing: border-box !important;
+  }
+  .app-title { font-size: clamp(32px, 10vw, 52px) !important; }
+  .book-page { max-width: 100%; margin: 20px auto; }
+  .theme-pick label, .theme-pick-night label { font-size: 14px !important; padding: 6px 10px !important; }
 }
 
-/* Status: the styled teal textarea stays; its wrappers go transparent over cream */
-.status-display, .status-display .block, .status-display .form,
-.status-display .container, .status-display label span {
-  background: transparent !important;
-  color: var(--crayon-teal) !important;
+@media (prefers-reduced-motion: reduce) {
+  * { animation: none !important; transition: none !important; }
+  .input-card, .output-card, .bedtime-input-card, .bedtime-output-card,
+  .book-page, .book-cover, .btn-make, .btn-make button, .btn-bedtime, .btn-bedtime button,
+  .moon-orb { transform: none !important; }
 }
 """
 
-
-# Force the app into LIGHT mode (the scrapbook design is light-only). Without
-# this, an OS/browser in dark mode makes Gradio paint cards dark with invisible
-# text. Adds ?__theme=light and reloads once if it isn't already set.
-FORCE_LIGHT_JS = """
+# Combined JS: light-mode lock + kid-friendly floating animations
+COMBINED_JS = """
 () => {
+  // Lock to light mode first
   const u = new URL(window.location.href);
   if (u.searchParams.get('__theme') !== 'light') {
     u.searchParams.set('__theme', 'light');
     window.location.replace(u.toString());
+    return;
+  }
+
+  // Floating coloured sparkles (kids love these)
+  const sparkColors = ['#ef6a3a','#f4c64a','#2ba39a','#4a9fd6','#d6517a','#74b85a'];
+  const spWrap = document.createElement('div');
+  spWrap.id = 'db-sparkles';
+  spWrap.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden;';
+  for (let i = 0; i < 18; i++) {
+    const s = document.createElement('span');
+    s.className = 'db-spark';
+    s.style.cssText = `left:${Math.random()*100}%;top:${10+Math.random()*80}%;`
+      + `width:${5+Math.random()*6}px;height:${5+Math.random()*6}px;`
+      + `background:${sparkColors[i % sparkColors.length]};`
+      + `animation-delay:${Math.random()*9}s;animation-duration:${6+Math.random()*5}s;`;
+    spWrap.appendChild(s);
+  }
+  document.body.prepend(spWrap);
+
+  // Twinkling stars (subtle on paper, vivid on night-sky bedtime cards)
+  const stWrap = document.createElement('div');
+  stWrap.id = 'db-stars';
+  stWrap.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden;';
+  for (let i = 0; i < 32; i++) {
+    const s = document.createElement('span');
+    s.className = 'db-star';
+    s.style.cssText = `left:${Math.random()*100}%;top:${Math.random()*100}%;`
+      + `width:${2+Math.random()*3}px;height:${2+Math.random()*3}px;`
+      + `animation-delay:${Math.random()*6}s;animation-duration:${2+Math.random()*3}s;`;
+    stWrap.appendChild(s);
   }
+  document.body.prepend(stWrap);
 }
 """
 
 
-def create_layout(load_sample_fn=None, create_book_fn=None):
-    """Build the scrapbook-styled Gradio Blocks layout."""
+def create_layout(load_sample_fn=None, create_book_fn=None, create_bedtime_fn=None):
+    """Build the DoodleBook Gradio Blocks layout with Storybook + Bedtime Voice tabs."""
 
-    # Gradio 6 moved theme/css/js/head from Blocks() to launch(). Keep the
-    # scrapbook design working on BOTH: pass them to Blocks on gradio 5, and
-    # stash them on the returned demo so the caller hands them to launch() on 6.
     _gr_major = int(gr.__version__.split(".")[0])
     design_kwargs = dict(
         css=CSS,
         head=HEAD,
-        js=FORCE_LIGHT_JS,  # lock to light mode (scrapbook design is light-only)
-        theme=gr.themes.Base(),  # Base, not Soft — we own the styling
+        js=COMBINED_JS,
+        theme=gr.themes.Base(),
     )
     blocks_kwargs = dict(title="DoodleBook")
     if _gr_major < 6:
         blocks_kwargs.update(design_kwargs)
 
     with gr.Blocks(**blocks_kwargs) as demo:
-        # hidden SVG filters used by the hand-drawn frames
         gr.HTML(SVG_DEFS)
 
-        # ---- HEADER ----
-        gr.HTML(
-            """
-            <div class="app-header">
-              <h1 class="app-title">D<span class="doodle-o">oo</span>dleBook</h1>
-              <svg class="title-squiggle" viewBox="0 0 360 16" preserveAspectRatio="none">
-                <path d="M2,11 C40,3 70,15 110,8 S190,2 230,9 320,14 358,5"/>
-              </svg>
-              <p class="app-subtitle">draw a character &middot; get a storybook &middot; hear it read aloud</p>
-            </div>
-            """
-        )
-
-        with gr.Row(equal_height=False):
-            # ---- INPUT CARD (real wrapper via elem_classes, not stray HTML tags) ----
-            with gr.Column(scale=1, elem_classes=["input-card"]):
-                gr.HTML('<p class="card-eyebrow">1 &middot; your character</p>')
-                doodle = gr.Image(
-                    sources=["upload", "webcam"],   # upload first so it's the default
-                    label="Upload or snap the drawing",
-                    type="numpy",
-                    height=240,
-                    elem_classes=["doodle-input"],
-                )
-                gr.HTML('<p class="card-eyebrow">2 &middot; the details</p>')
-                char_name = gr.Textbox(
-                    label="Character name",
-                    placeholder="Ziggy the robot",
-                    elem_classes=["field"],
-                )
-                hero_name = gr.Textbox(
-                    label="Hero's name in the story",
-                    placeholder="Ziggy",
-                    elem_classes=["field"],
-                )
-                theme = gr.Radio(
-                    choices=THEMES,
-                    value=THEMES[0],
-                    label="Story theme (pick one)",
-                    elem_classes=["field", "theme-pick"],
-                )
-                voice = gr.Radio(
-                    choices=VOICE_CHOICES,
-                    value=DEFAULT_VOICE,
-                    label="Narrator voice",
-                    elem_classes=["field", "theme-pick"],
-                )
-                make_coloring = gr.Checkbox(
-                    label="Also make a coloring book",
-                    value=False,
-                    elem_classes=["tiny-toggle"],
-                )
-                make_btn = gr.Button(
-                    "Make my book!",
-                    variant="primary",
-                    elem_classes=["btn-make"],
-                )
-                status = gr.Textbox(
-                    label="Status",
-                    interactive=False,
-                    elem_classes=["status-display"],
-                    value="Ready when you are! ✏️",
-                )
-                # Fixed downloads right under the status — always here, no scrolling
-                # to a button at the bottom. They light up the moment the book is done.
-                with gr.Row(elem_classes=["download-row"]):
-                    pdf_download = gr.DownloadButton(
-                        "⬇ Story PDF",
-                        visible=False,
-                        elem_classes=["btn-pdf"],
-                    )
-                    coloring_pdf_download = gr.DownloadButton(
-                        "⬇ Coloring PDF",
-                        visible=False,
-                        elem_classes=["btn-pdf"],
-                    )
-                gr.Examples(
-                    examples=[["assets/sample_doodle.jpg", "Ziggy", "Ziggy", "brave adventure"]],
-                    inputs=[doodle, char_name, hero_name, theme],
-                    label="Try an example",
-                )
-
-            # ---- OUTPUT CARD ----
-            with gr.Column(scale=2, elem_classes=["output-card"]):
-                audio_narration = gr.Audio(
-                    label="Listen to your story",
-                    autoplay=False,
-                    elem_classes=["audio-player"],
-                )
-                book_display = gr.HTML(
-                    elem_classes=["book-stage"],
-                    value="""
-                    <div class="book-empty">
-                      <span class="arrow">↑</span>
-                      <p class="big">Your storybook appears here</p>
-                      <p>Add a drawing, pick a theme, and tap <b>Make my book!</b></p>
-                    </div>
-                    """,
-                )
-                coloring_display = gr.HTML(
-                    visible=False,
-                    elem_classes=["book-stage"],
-                )
-
-        # ---- BEHIND THE MAGIC ----
-        with gr.Accordion("Behind the magic ✨", open=False, elem_classes=["behind-magic"]):
-            with gr.Tabs():
-                with gr.Tab("Story"):
-                    story_info = gr.JSON(label="Generated story structure")
-                with gr.Tab("Images"):
-                    image_info = gr.Textbox(label="Illustration details", interactive=False, lines=5)
-                with gr.Tab("Models"):
-                    gr.Markdown(
-                        """
+        # ── HEADER (shared) ───────────────────────────────────────────────
+        gr.HTML("""
+        <div class="app-header">
+          <h1 class="app-title">D<span class="doodle-o">oo</span>dleBook</h1>
+          <svg class="title-squiggle" viewBox="0 0 360 16" preserveAspectRatio="none">
+            <path d="M2,11 C40,3 70,15 110,8 S190,2 230,9 320,14 358,5"/>
+          </svg>
+          <p class="app-subtitle">draw a character &middot; get a storybook &middot; hear it read aloud</p>
+        </div>
+        """)
+
+        # ── TABS ─────────────────────────────────────────────────────────
+        with gr.Tabs():
+
+            # ================================================================
+            # TAB 1 — STORYBOOK
+            # ================================================================
+            with gr.Tab("📖 Storybook"):
+                with gr.Row(equal_height=False):
+                    # INPUT CARD
+                    with gr.Column(scale=1, elem_classes=["input-card"]):
+                        gr.HTML('<p class="card-eyebrow">1 &middot; your character</p>')
+                        doodle = gr.Image(
+                            sources=["upload", "webcam"],
+                            label="Upload or snap the drawing",
+                            type="numpy", height=240,
+                            elem_classes=["doodle-input"],
+                        )
+                        gr.HTML('<p class="card-eyebrow">2 &middot; the details</p>')
+                        char_name = gr.Textbox(
+                            label="Character name",
+                            placeholder="Ziggy the robot",
+                            elem_classes=["field"],
+                        )
+                        hero_name = gr.Textbox(
+                            label="Hero's name in the story",
+                            placeholder="Ziggy",
+                            elem_classes=["field"],
+                        )
+                        theme = gr.Radio(
+                            choices=THEMES, value=THEMES[0],
+                            label="Story theme (pick one)",
+                            elem_classes=["field", "theme-pick"],
+                        )
+                        voice = gr.Radio(
+                            choices=VOICE_CHOICES, value=DEFAULT_VOICE,
+                            label="Narrator voice",
+                            elem_classes=["field", "theme-pick"],
+                        )
+                        make_coloring = gr.Checkbox(
+                            label="Also make a coloring book",
+                            value=False, elem_classes=["tiny-toggle"],
+                        )
+                        make_btn = gr.Button(
+                            "Make my book!",
+                            variant="primary",
+                            elem_classes=["btn-make"],
+                        )
+                        status = gr.Textbox(
+                            label="Status", interactive=False,
+                            elem_classes=["status-display"],
+                            value="Ready when you are! ✏️",
+                        )
+                        with gr.Row(elem_classes=["download-row"]):
+                            pdf_download = gr.DownloadButton(
+                                "⬇ Story PDF", visible=False, elem_classes=["btn-pdf"],
+                            )
+                            coloring_pdf_download = gr.DownloadButton(
+                                "⬇ Coloring PDF", visible=False, elem_classes=["btn-pdf"],
+                            )
+                        gr.Examples(
+                            examples=[["assets/sample_doodle.jpg", "Ziggy", "Ziggy", "brave adventure"]],
+                            inputs=[doodle, char_name, hero_name, theme],
+                            label="Try an example",
+                        )
+
+                    # OUTPUT CARD
+                    with gr.Column(scale=2, elem_classes=["output-card"]):
+                        audio_narration = gr.Audio(
+                            label="Listen to your story",
+                            autoplay=False,
+                            elem_classes=["audio-player"],
+                        )
+                        book_display = gr.HTML(
+                            elem_classes=["book-stage"],
+                            value="""
+                            <div class="book-empty">
+                              <span class="arrow">↑</span>
+                              <p class="big">Your storybook appears here</p>
+                              <p>Add a drawing, pick a theme, and tap <b>Make my book!</b></p>
+                            </div>
+                            """,
+                        )
+                        coloring_display = gr.HTML(visible=False, elem_classes=["book-stage"])
+
+                # Behind the magic accordion (inside Storybook tab)
+                with gr.Accordion("Behind the magic ✨", open=False, elem_classes=["behind-magic"]):
+                    with gr.Tabs():
+                        with gr.Tab("Story"):
+                            story_info = gr.JSON(label="Generated story structure")
+                        with gr.Tab("Images"):
+                            image_info = gr.Textbox(label="Illustration details", interactive=False, lines=5)
+                        with gr.Tab("Models"):
+                            gr.Markdown(
+                                """
 | Model | Role | Size |
 |---|---|---|
 | **MiniCPM5-1B** | Story writer | 1B |
 | **VoxCPM2** | Voice narrator | 2B |
 | **FLUX.2-klein** | Illustrator | 4B |
 
-The *brain* of DoodleBook — the story + the voice — is a **3B small-model stack**.
-FLUX is the printer. **Tiny Titan.**
-                        """
-                    )
-                with gr.Tab("Trace"):
-                    # show_copy_button was removed from Textbox in gradio 6
-                    _tb_kwargs = dict(label="Generation trace (Open Trace)",
-                                      interactive=False, lines=8)
-                    if _gr_major < 6:
-                        _tb_kwargs["show_copy_button"] = True
-                    trace_info = gr.Textbox(**_tb_kwargs)
-
-        gr.HTML(
-            """
-            <div class="app-footer">
-              <p>stitched together with crayons &amp; code for the Build Small Hackathon 2026</p>
-              <p class="badges">Well-Tuned &middot; Off-Brand &middot; Field Notes &middot; Open Trace</p>
-            </div>
-            """
-        )
-
-        # ---- WIRING ----
+The *brain* of DoodleBook — the story + the voice — is a **3B small-model stack**. FLUX is the printer. **Tiny Titan.**
+                                """
+                            )
+                        with gr.Tab("Trace"):
+                            _tb_kwargs = dict(label="Generation trace (Open Trace)", interactive=False, lines=8)
+                            if _gr_major < 6:
+                                _tb_kwargs["show_copy_button"] = True
+                            trace_info = gr.Textbox(**_tb_kwargs)
+
+            # ================================================================
+            # TAB 2 — BEDTIME VOICE
+            # ================================================================
+            with gr.Tab("🌙 Bedtime Voice"):
+                gr.HTML("""
+                <div style="text-align:center;padding:20px 0 4px;">
+                  <div class="moon-orb"></div>
+                  <p style="font-family:'Caveat',cursive;font-size:22px;color:#9090c0;margin-top:4px;">
+                    record your voice &middot; get a bedtime story narrated in it &middot; English + Kannada
+                  </p>
+                </div>
+                """)
+
+                with gr.Row(equal_height=False):
+                    # BEDTIME INPUT CARD
+                    with gr.Column(scale=1, elem_classes=["bedtime-input-card"]):
+                        gr.HTML('<p class="card-eyebrow-moon">1 &middot; tonight\'s adventure</p>')
+                        bedtime_genre = gr.Radio(
+                            choices=BEDTIME_GENRES, value=BEDTIME_GENRES[0],
+                            label="Genre",
+                            elem_classes=["field-night", "theme-pick-night"],
+                        )
+                        gr.HTML('<p class="card-eyebrow-moon" style="margin-top:14px">2 &middot; the mood</p>')
+                        bedtime_mood = gr.Radio(
+                            choices=BEDTIME_MOODS, value=BEDTIME_MOODS[0],
+                            label="Mood",
+                            elem_classes=["field-night", "theme-pick-night"],
+                        )
+                        gr.HTML('<p class="card-eyebrow-moon" style="margin-top:14px">3 &middot; the hero</p>')
+                        bedtime_hero = gr.Textbox(
+                            label="Hero's name (optional)",
+                            placeholder="Finn, Lily, little one…",
+                            elem_classes=["field-night"],
+                        )
+                        gr.HTML('<p class="card-eyebrow-moon" style="margin-top:14px">4 &middot; your voice</p>')
+                        bedtime_voice = gr.Audio(
+                            sources=["microphone", "upload"],
+                            type="filepath",
+                            label="Record or upload 5–60 s of clear speech",
+                            elem_classes=["bedtime-audio"],
+                        )
+                        bedtime_btn = gr.Button(
+                            "Tuck in with a story 🌙",
+                            variant="primary",
+                            elem_classes=["btn-bedtime"],
+                        )
+                        bedtime_status = gr.Textbox(
+                            label="Status", interactive=False,
+                            elem_classes=["bedtime-status"],
+                            value="Ready for bedtime… 🌙",
+                        )
+
+                    # BEDTIME OUTPUT CARD
+                    with gr.Column(scale=2, elem_classes=["bedtime-output-card"]):
+                        bedtime_en_audio = gr.Audio(
+                            label="🌙 English narration",
+                            autoplay=False,
+                            elem_classes=["audio-player-night"],
+                        )
+                        bedtime_kn_audio = gr.Audio(
+                            label="🌙 ಕನ್ನಡ ಕಥೆ  (Kannada story)",
+                            autoplay=False,
+                            elem_classes=["audio-player-night"],
+                        )
+                        bedtime_display = gr.HTML(
+                            value="""
+                            <div class="bedtime-empty">
+                              <span class="moon-icon">🌙</span>
+                              <p class="big">Your bedtime story appears here</p>
+                              <p style="color:#9090c0">Record your voice, pick a genre, and tap <b>Tuck in with a story 🌙</b></p>
+                            </div>
+                            """,
+                        )
+
+        # ── FOOTER (shared) ────────────────────���──────────────────────────
+        gr.HTML("""
+        <div class="app-footer">
+          <p>stitched together with crayons &amp; code for the Build Small Hackathon 2026</p>
+          <p class="badges">Well-Tuned &middot; Off-Brand &middot; Field Notes &middot; Open Trace</p>
+        </div>
+        """)
+
+        # ── WIRING ───────────────────────────────────────────────────────
         if create_book_fn:
             make_btn.click(
                 fn=create_book_fn,
@@ -783,7 +877,12 @@ FLUX is the printer. **Tiny Titan.**
             )
         if load_sample_fn:
             demo.load(fn=load_sample_fn, outputs=[book_display])
+        if create_bedtime_fn:
+            bedtime_btn.click(
+                fn=create_bedtime_fn,
+                inputs=[bedtime_voice, bedtime_hero, bedtime_genre, bedtime_mood],
+                outputs=[bedtime_display, bedtime_status, bedtime_en_audio, bedtime_kn_audio],
+            )
 
-    # On gradio 6 the design params go to launch(); expose them for the caller.
     demo.design_kwargs = design_kwargs if _gr_major >= 6 else {}
     return demo