Update app.py

app.py

@@ -86,6 +86,13 @@ st.markdown("""
     margin-bottom: 20px;
   }
 
+  /* Align play button to the right */
+  .play-button-container {
+    display: flex;
+    justify-content: flex-end;
+    margin: 15px 0;
+  }
+
   .stButton > button {
     background-color: #6adb9d;
     color: white;
@@ -128,6 +135,18 @@ st.markdown("""
     display: inline-block;
   }
 
+  /* 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);
+  }
+
   .story-text {
     font-size: 1.3rem;
     line-height: 1.6;
@@ -149,37 +168,6 @@ st.markdown("""
     background: #ffcc66;
   }
 
-  /* Loading animation */
-  .loading {
-    display: flex;
-    justify-content: center;
-    margin: 15px 0;
-  }
-
-  .loading div {
-    width: 20px;
-    height: 20px;
-    background-color: #ff6b6b;
-    border-radius: 50%;
-    margin: 0 5px;
-    animation: bounce 0.8s infinite alternate;
-  }
-
-  .loading div:nth-child(2) {
-    animation-delay: 0.2s;
-    background-color: #ffcc66;
-  }
-
-  .loading div:nth-child(3) {
-    animation-delay: 0.4s;
-    background-color: #7678ed;
-  }
-
-  @keyframes bounce {
-    from { transform: translateY(0); }
-    to { transform: translateY(-15px); }
-  }
-
   /* Fun floating animation for welcome screen */
   @keyframes float {
     0% { transform: translateY(0); }
@@ -191,42 +179,6 @@ st.markdown("""
     animation: float 3s infinite ease-in-out;
   }
 
-  /* Title styling with icons */
-  .app-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-  }
-
-  .app-title img {
-    height: 40px;
-  }
-
-  /* Speech bubble styling */
-  .speech-bubble {
-    position: relative;
-    background: #ffffff;
-    border-radius: 20px;
-    padding: 15px;
-    margin: 20px 0;
-    border: 3px solid #ff9e7d;
-  }
-
-  .speech-bubble:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 30px;
-    width: 0;
-    height: 0;
-    border: 15px solid transparent;
-    border-top-color: #ffffff;
-    border-bottom: 0;
-    margin-left: -15px;
-    margin-bottom: -15px;
-  }
-
   /* Fun emoji decorations */
   .emoji-decoration {
     font-size: 2rem;
@@ -260,58 +212,35 @@ if uploaded_file is not None:
 
     # Stage 1: Image to Text
     st.markdown("<div class='step-title'>🔍 Finding the magic in your picture...</div>", unsafe_allow_html=True)
-
-    # Add loading animation
-    st.markdown("""
-    <div class="loading">
-        <div></div>
-        <div></div>
-        <div></div>
-    </div>
-    """, unsafe_allow_html=True)
-
     scenario = img2text(uploaded_file.name)
-    st.markdown(f"<p class='story-text'>{scenario}</p>", unsafe_allow_html=True)
+    # 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)
 
     # Stage 2: Text to Story
     st.markdown("<div class='step-title'>📝 Creating a magical story...</div>", unsafe_allow_html=True)
-
-    # Add loading animation
-    st.markdown("""
-    <div class="loading">
-        <div></div>
-        <div></div>
-        <div></div>
-    </div>
-    """, unsafe_allow_html=True)
-
     story = text2story(scenario)
-    st.markdown(f"<p class='story-text'>{story}</p>", unsafe_allow_html=True)
+    # 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)
 
     # Stage 3: Story to Audio data
     st.markdown("<div class='step-title'>🔊 Let's hear the story!</div>", unsafe_allow_html=True)
-
-    # Add loading animation
-    st.markdown("""
-    <div class="loading">
-        <div></div>
-        <div></div>
-        <div></div>
-    </div>
-    """, unsafe_allow_html=True)
-
     audio_data = text2audio(story)
 
-    # 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!")
-
+    # 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)
 
     # Cleanup: Remove the temporary file
     if os.path.exists(uploaded_file.name):