Update app.py

app.py

@@ -53,210 +53,266 @@ def text2audio(text):
         return None
 
 
-# Apply custom CSS for kid-friendly UI
-st.set_page_config(page_title="Magic Picture Storyteller", page_icon="🧙‍♂️")
+# Apply custom CSS for modern, stylish kid-friendly UI
+st.set_page_config(page_title="StoryMagic", page_icon="✨", layout="wide")
 
 st.markdown("""
 <style>
-  /* Colorful, rounded child-friendly design */
-  @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+  /* Modern, stylish kid-friendly design */
+  @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');
+
+  :root {
+    --primary-color: #6C63FF;
+    --secondary-color: #41B883;
+    --accent-color: #FF6B6B;
+    --background-light: #F7F9FC;
+    --text-dark: #2E3A59;
+    --shadow: 0 10px 20px rgba(0,0,0,0.08);
+    --border-radius: 16px;
+  }
 
   .stApp {
-    background: linear-gradient(135deg, #ffcce6, #b3ecff);
-    font-family: 'Comic Neue', cursive;
+    background: linear-gradient(135deg, #F4F9FF, #EEFAFF);
+    font-family: 'Quicksand', sans-serif;
+    color: var(--text-dark);
+  }
+
+  .main .block-container {
+    max-width: 1000px;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  /* Modern headers */
+  h1, h2, h3 {
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 700;
+    color: var(--primary-color);
   }
 
   h1 {
-    color: #6a3e8c;
     font-size: 2.5rem;
     text-align: center;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-    background: rgba(255,255,255,0.7);
-    padding: 15px;
-    border-radius: 20px;
-    margin-bottom: 20px;
-    border: 3px dashed #ff9933;
+    margin-bottom: 0;
   }
 
-  .uploadfile {
-    background: rgba(255,255,255,0.7);
-    padding: 20px;
-    border-radius: 20px;
-    border: 3px solid #ff6b6b;
-    margin-bottom: 20px;
+  h2 {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
   }
 
-  /* Align play button to the right */
-  .play-button-container {
-    display: flex;
-    justify-content: flex-end;
-    margin: 15px 0;
+  h3 {
+    font-size: 1.4rem;
+    margin-bottom: 0.8rem;
   }
 
-  .stButton > button {
-    background-color: #6adb9d;
-    color: white;
-    font-size: 1.5rem;
-    border-radius: 30px;
-    padding: 10px 25px;
-    font-family: 'Comic Neue', cursive;
-    font-weight: bold;
-    border: none;
-    box-shadow: 0 4px 0 #489d73;
-    transition: all 0.2s;
+  /* Subtitle */
+  .subtitle {
+    text-align: center;
+    color: #6B7897;
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
   }
 
-  .stButton > button:hover {
-    background-color: #5bc28d;
-    transform: translateY(2px);
-    box-shadow: 0 2px 0 #489d73;
+  /* Card containers */
+  .stCard {
+    background: white;
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    box-shadow: var(--shadow);
+    margin-bottom: 1.5rem;
   }
 
-  .stButton > button:active {
-    transform: translateY(4px);
-    box-shadow: none;
+  /* Accent borders for stages */
+  .css-nahz7x, .css-ocqkz7, .css-4z1n4l {
+    border-left: 5px solid var(--primary-color) !important;
   }
 
-  .output-box {
-    background: rgba(255, 255, 255, 0.8);
-    padding: 15px;
-    border-radius: 20px;
-    margin: 15px 0;
-    border: 3px solid #7678ed;
+  .css-1r6slb0, .css-1ubpcwi {
+    border-left: 5px solid var(--secondary-color) !important;
   }
 
-  .step-title {
-    background-color: #ff9e7d;
-    color: white;
-    padding: 8px 15px;
-    border-radius: 15px;
-    font-size: 1.2rem;
-    margin-bottom: 10px;
-    display: inline-block;
+  .css-pkbazv, .css-5rimss {
+    border-left: 5px solid var(--accent-color) !important;
   }
 
-  /* Green response box aligned to the right */
-  .response-box {
-    background: rgba(106, 219, 157, 0.9);
-    padding: 15px;
-    border-radius: 20px;
-    margin: 15px 0;
-    border: 3px solid #489d73;
-    max-width: 85%;
-    margin-left: auto; /* This pushes the box to the right */
-    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
+  /* Custom file uploader */
+  .stFileUploader > div > div {
+    background: var(--background-light);
+    border: 2px dashed #D0D8E6;
+    border-radius: 12px;
+    padding: 20px;
+    transition: all 0.3s ease;
   }
 
-  .story-text {
-    font-size: 1.3rem;
-    line-height: 1.6;
-    color: #333;
+  .stFileUploader > div > div:hover {
+    border-color: var(--primary-color);
   }
 
-  /* Custom file uploader */
-  .stFileUploader > div > div {
-    background: #ffea8c;
-    border: 2px dashed #ffaa44;
-    border-radius: 20px;
-    padding: 10px;
+  /* Uploaded image styling */
+  .stImage img {
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+  }
+
+  /* Stage icons */
+  .stage-icon {
+    font-size: 1.6rem;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+
+  /* Response styling */
+  .stText {
+    font-size: 1.1rem;
+    line-height: 1.7;
+    background: var(--background-light);
+    padding: 1rem;
+    border-radius: 12px;
+    border-left: 4px solid var(--secondary-color);
+    margin: 1rem 0;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+  }
+
+  /* Button styling */
+  .stButton > button {
+    background: var(--secondary-color) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 50px !important;
+    padding: 0.6rem 1.5rem !important;
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    font-family: 'Quicksand', sans-serif !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 5px 15px rgba(65, 184, 131, 0.3) !important;
+  }
+
+  .stButton > button:hover {
+    background: #37A574 !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 20px rgba(65, 184, 131, 0.4) !important;
+  }
+
+  .stButton > button:active {
+    transform: translateY(0) !important;
+  }
+
+  /* Column styling for button positioning */
+  [data-testid="column"]:last-child .stButton {
+    display: flex;
+    justify-content: flex-end;
   }
 
   /* Audio player styling */
   audio {
     width: 100%;
-    border-radius: 30px;
-    background: #ffcc66;
+    border-radius: 50px;
+    height: 40px;
+  }
+
+  /* Emoji animation */
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-15px); }
   }
 
-  /* Fun floating animation for welcome screen */
-  @keyframes float {
-    0% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-    100% { transform: translateY(0); }
+  .emoji {
+    font-size: 1.8rem;
+    display: inline-block;
+    animation: bounce 2s infinite;
+    margin: 0 8px;
   }
 
-  .float-animation {
-    animation: float 3s infinite ease-in-out;
+  .emoji:nth-child(2) {
+    animation-delay: 0.2s;
   }
 
-  /* Fun emoji decorations */
-  .emoji-decoration {
-    font-size: 2rem;
-    margin: 0 5px;
-    display: inline-block;
-    animation: wiggle 2s infinite;
+  .emoji:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  .emoji:nth-child(4) {
+    animation-delay: 0.6s;
+  }
+
+  /* Welcome message */
+  .welcome-message {
+    text-align: center;
+    padding: 3rem 1.5rem;
   }
 
-  @keyframes wiggle {
-    0%, 100% { transform: rotate(-5deg); }
-    50% { transform: rotate(5deg); }
+  .welcome-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
   }
 </style>
 """, unsafe_allow_html=True)
 
-# App header with kid-friendly design
-st.markdown(
-    "<h1><span class='emoji-decoration'>🧙‍♂️</span> Magic Picture Storyteller <span class='emoji-decoration'>🎨</span></h1>",
-    unsafe_allow_html=True)
+# App header
+st.title("✨ StoryMagic")
+st.markdown("<p class='subtitle'>Upload a picture and watch it transform into a magical story!</p>",
+            unsafe_allow_html=True)
 
-# File uploader with kid-friendly styling
-st.markdown("<h3>📷 Let's pick a picture!</h3>", unsafe_allow_html=True)
-uploaded_file = st.file_uploader("Choose a fun picture...", key="upload")
+# File uploader
+with st.container():
+    st.subheader("Choose a picture")
+    uploaded_file = st.file_uploader("", key="upload")
 
 if uploaded_file is not None:
     bytes_data = uploaded_file.getvalue()
     with open(uploaded_file.name, "wb") as file:
         file.write(bytes_data)
 
-    st.image(uploaded_file, caption="Your magical picture!", use_column_width=True)
+    # Display image
+    st.image(uploaded_file, use_column_width=True)
 
     # Stage 1: Image to Text
-    st.markdown("<div class='step-title'>🔍 Finding the magic in your picture...</div>", unsafe_allow_html=True)
-    scenario = img2text(uploaded_file.name)
-    # Display result in green box aligned to the right
-    st.markdown(f"<div class='response-box'><p class='story-text'>{scenario}</p></div>", unsafe_allow_html=True)
+    with st.container():
+        st.markdown("<h3><span class='stage-icon'>🔍</span> Image Analysis</h3>", unsafe_allow_html=True)
+        scenario = img2text(uploaded_file.name)
+        st.text(scenario)
 
     # Stage 2: Text to Story
-    st.markdown("<div class='step-title'>📝 Creating a magical story...</div>", unsafe_allow_html=True)
-    story = text2story(scenario)
-    # Display result in green box aligned to the right
-    st.markdown(f"<div class='response-box'><p class='story-text'>{story}</p></div>", unsafe_allow_html=True)
+    with st.container():
+        st.markdown("<h3><span class='stage-icon'>📝</span> Story Creation</h3>", unsafe_allow_html=True)
+        story = text2story(scenario)
+        st.text(story)
 
     # Stage 3: Story to Audio data
-    st.markdown("<div class='step-title'>🔊 Let's hear the story!</div>", unsafe_allow_html=True)
-    audio_data = text2audio(story)
-
-    # Play button container for right alignment
-    st.markdown("<div class='play-button-container'>", unsafe_allow_html=True)
-    # Using columns to align button to the right
-    col1, col2 = st.columns([3, 1])
-    with col2:
-        # Play button with kid-friendly design
-        if st.button("🔊 Play My Story!"):
-            if audio_data:
-                st.audio(audio_data['audio'],
-                         format="audio/wav",
-                         start_time=0,
-                         sample_rate=audio_data['sampling_rate'])
-            else:
-                st.error("Oops! The magical voice got lost!")
-    st.markdown("</div>", unsafe_allow_html=True)
+    with st.container():
+        st.markdown("<h3><span class='stage-icon'>🔊</span> Audio Narration</h3>", unsafe_allow_html=True)
+        audio_data = text2audio(story)
+
+        # Button right-aligned
+        col1, col2 = st.columns([3, 1])
+        with col2:
+            if st.button("🔊 Play Story"):
+                if audio_data:
+                    st.audio(audio_data['audio'],
+                             format="audio/wav",
+                             start_time=0,
+                             sample_rate=audio_data['sampling_rate'])
+                else:
+                    st.error("Could not generate audio")
 
     # Cleanup: Remove the temporary file
     if os.path.exists(uploaded_file.name):
         os.remove(uploaded_file.name)
 else:
-    # Fun welcome screen for kids
+    # Welcome message
     st.markdown("""
-    <div style="text-align: center; padding: 30px;" class="float-animation">
-        <div style="font-size: 80px; margin-bottom: 20px;">🧙‍♂️</div>
-        <h2 style="color: #6a3e8c;">Pick a picture to start the magic!</h2>
-        <p style="font-size: 1.2rem;">The wizard is waiting to tell you a story!</p>
-        <div style="margin-top: 30px;">
-            <span class="emoji-decoration">🌈</span>
-            <span class="emoji-decoration">⭐</span>
-            <span class="emoji-decoration">🦄</span>
-            <span class="emoji-decoration">🎭</span>
+    <div class="welcome-message">
+        <div class="welcome-icon">✨</div>
+        <h2>Welcome to StoryMagic!</h2>
+        <p style="font-size: 1.2rem; color: #6B7897; max-width: 500px; margin: 0 auto 30px;">
+            Upload any picture, and our magic wizard will turn it into an exciting story just for you!
+        </p>
+        <div>
+            <span class="emoji">🚀</span>
+            <span class="emoji">🦄</span>
+            <span class="emoji">🔮</span>
+            <span class="emoji">🌈</span>
         </div>
     </div>
     """, unsafe_allow_html=True)