Update app.py

app.py

@@ -1,4 +1,3 @@
-# app.py
 import io
 import wave
 import streamlit as st
@@ -88,41 +87,103 @@ def part3_text_to_speech_bytes(text: str, tts_pipe) -> bytes:
     return buffer.read()
 
 # ——— 3) STREAMLIT UI ————————————————————————————
+# Custom CSS for kid-friendly styling
+st.markdown("""
+    <style>
+    .main {
+        background-color: #e6f3ff;
+        padding: 20px;
+        border-radius: 15px;
+    }
+    .stButton>button {
+        background-color: #ffcccb;
+        color: #333;
+        border-radius: 10px;
+        border: 2px solid #ff9999;
+        font-size: 18px;
+        font-weight: bold;
+        padding: 10px 20px;
+        transition: all 0.3s;
+    }
+    .stButton>button:hover {
+        background-color: #ff9999;
+        color: white;
+        transform: scale(1.05);
+    }
+    .stFileUploader {
+        background-color: #fff3cd;
+        border: 2px dashed #ffca28;
+        border-radius: 10px;
+        padding: 10px;
+    }
+    .stImage {
+        border: 3px solid #81c784;
+        border-radius: 10px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+    .section-header {
+        background-color: #b3e5fc;
+        padding: 10px;
+        border-radius: 10px;
+        text-align: center;
+        font-size: 24px;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 10px;
+    }
+    .caption-box, .story-box {
+        background-color: #f0f4c3;
+        padding: 15px;
+        border-radius: 10px;
+        border: 2px solid #d4e157;
+        margin-bottom: 20px;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
 st.set_page_config(
-    page_title="Image→Story→Speech",
-    page_icon="🖼️🎤",
+    page_title="Picture to Story Magic",
+    page_icon="✨",
     layout="centered"
 )
-st.title("🖼️ ➡️ 📖 ➡️ 🎙️ Image → Story → Speech")
 
-uploaded = st.file_uploader("1️⃣ Upload an image", type=["jpg","jpeg","png"])
-if not uploaded:
-    st.info("Please upload an image to begin.")
-    st.stop()
+# Main title
+st.markdown("<div class='section-header'>Picture to Story Magic! ✨</div>", unsafe_allow_html=True)
+
+# Image upload section
+with st.container():
+    st.markdown("<div class='section-header'>1️⃣ Pick a Fun Picture! 🖼️</div>", unsafe_allow_html=True)
+    uploaded = st.file_uploader("Choose a picture to start the magic! 😊", type=["jpg","jpeg","png"])
+    if not uploaded:
+        st.info("Upload a picture, and let's make a story! 🎉")
+        st.stop()
 
-# Show image
-with st.spinner("Rendering image..."):
-    pil_img = Image.open(uploaded)
-    st.image(pil_img, use_container_width=True)
+    # Show image
+    with st.spinner("Looking at your picture..."):
+        pil_img = Image.open(uploaded)
+        st.image(pil_img, use_container_width=True)
 
-# Generate caption
-captioner = get_image_captioner()
-with st.spinner("Generating caption..."):
-    caption = part1_image_to_text(pil_img, captioner)
-st.markdown(f"**Caption:** {caption}")
+# Caption section
+with st.container():
+    captioner = get_image_captioner()
+    with st.spinner("Figuring out what's in your picture..."):
+        caption = part1_image_to_text(pil_img, captioner)
+    st.markdown(f"<div class='caption-box'><b>What's in the Picture? 🧐</b><br>{caption}</div>", unsafe_allow_html=True)
 
-# Generate story & play audio
-if st.button("📝 Generate Story & Play Audio"):
-    # Story
-    story_pipe = get_story_pipe()
-    with st.spinner("Generating story..."):
-        story = part2_text_to_story(caption, story_pipe)
-    st.markdown("**Story:**")
-    st.write(story)
+# Story and audio section
+with st.container():
+    st.markdown("<div class='section-header'>2️⃣ Make a Story and Hear It! 🎵</div>", unsafe_allow_html=True)
+    if st.button("Create My Story! 🎉"):
+        # Story
+        story_pipe = get_story_pipe()
+        with st.spinner("Writing a super cool story..."):
+            story = part2_text_to_story(caption, story_pipe)
+        st.markdown(f"<div class='story-box'><b>Your Cool Story! 📚</b><br>{story}</div>", unsafe_allow_html=True)
 
-    # TTS
-    tts_pipe = get_tts_pipe()
-    with st.spinner("Synthesizing speech..."):
-        audio_bytes = part3_text_to_speech_bytes(story, tts_pipe)
-    st.audio(audio_bytes, format="audio/wav")
-    st.success("All done!")
+        # TTS
+        tts_pipe = get_tts_pipe()
+        with st.spinner("Turning your story into sound..."):
+            audio_bytes = part3_text_to_speech_bytes(story, tts_pipe)
+        st.audio(audio_bytes, format="audio/wav")
+        st.success("Yay! Your story is ready! 🎈")
+        st.balloons()  # Fun animation