Update app.py

app.py

@@ -214,7 +214,7 @@ def generate_audio_from_story(story_text: str, output_path: str = "output.wav")
 st.set_page_config(
     page_title="Magic Story Generator",
     page_icon="🧚",
-    layout="wide",
+    layout="centered",
     initial_sidebar_state="collapsed"
 )
 
@@ -224,7 +224,7 @@ st.markdown("""
     /* Primary title styling */
     .main-title {
         color: #E91E63;
-        font-size: 2.8rem;
+        font-size: 6rem;
         text-align: center;
         padding: 20px;
         text-shadow: 2px 2px #FFC107;
@@ -264,7 +264,13 @@ st.markdown('<p class="main-title">🧚 Welcome to Magic Story Maker!</p>', unsa
 # File upload section
 with st.container():
     st.subheader("Step 1: Upload Your Picture")
-    uploaded_image = st.file_uploader("Choose an image...", type=["png", "jpg", "jpeg"],label_visibility="collapsed")
+    uploaded_image = st.file_uploader("Choose an image...", 
+                                    type=["png", "jpg", "jpeg"],
+                                    label_visibility="collapsed")
+
+# Initialize session state for confirmation status
+if 'confirmed' not in st.session_state:
+    st.session_state.confirmed = False
 
 # Main processing flow
 if uploaded_image is not None:
@@ -284,55 +290,74 @@ if uploaded_image is not None:
                         help="Generate educational story with life lessons",
                         key="edu_btn"):
                 st.session_state.selected_prompt = "educational"
+                st.session_state.confirmed = False  # Reset confirmation
         with col2:
             if st.button("🌠 Fantasy Adventure", 
                         help="Create magical adventure story",
                         key="fantasy_btn"):
                 st.session_state.selected_prompt = "adventure"
+                st.session_state.confirmed = False
         with col3:
             if st.button("🐻 Animal Friends", 
                         help="Make story about friendly animals",
                         key="animal_btn"):
                 st.session_state.selected_prompt = "animal"
+                st.session_state.confirmed = False
+
+    # Add confirmation button
+    with st.container():
+        st.subheader("Step 3: Confirm Selection")
+        if st.button("🔮 Start Magic Creation!", 
+                   help="Click to generate story after choosing style",
+                   type="primary"):
+            st.session_state.confirmed = True
 
-    # Define prompt templates
-    PROMPT_TEMPLATES = {
-        "educational": {
-            "system": "You are a children's educator. Create a simple 150-word story that teaches basic life skills or moral lessons.",
-            "icon": "📚"
-        },
-        "adventure": {
-            "system": "You are a fantasy writer. Create a 150-word magical adventure story suitable for children.",
-            "icon": "🌠"
-        },
-        "animal": {
-            "system": "You are an animal expert. Create a 150-word story about friendly animals learning together.",
-            "icon": "🐻"
+    # Only show generation when confirmed
+    if st.session_state.get('confirmed', False):
+        # Define prompt templates
+        PROMPT_TEMPLATES = {
+            "educational": {
+                "system": "You are a children's educator. Create a simple 150-word story that teaches basic life skills or moral lessons.",
+                "icon": "📚"
+            },
+            "adventure": {
+                "system": "You are a fantasy writer. Create a 150-word magical adventure story suitable for children.",
+                "icon": "🌠"
+            },
+            "animal": {
+                "system": "You are an animal expert. Create a 150-word story about friendly animals learning together.",
+                "icon": "🐻"
+            }
         }
-    }
 
-    # Story generation section
-    with st.spinner(f"{PROMPT_TEMPLATES[st.session_state.selected_prompt]['icon']} Creating your story..."):
-        # Generate image caption
-        image_caption = generate_image_caption(image)
-        
-        # Generate story content
-        selected_template = PROMPT_TEMPLATES[st.session_state.selected_prompt]
-        story_text = generate_story_content(
-            system_prompt=selected_template["system"],
-            user_prompt=image_caption
-        )
+        # Safe access with default fallback
+        selected_prompt = st.session_state.get("selected_prompt", "educational")
         
-        # Display formatted story
-        st.subheader("Step 3: Your Magical Story")
-        st.markdown(f'<div class="story-container">{story_text}</div>', 
-                   unsafe_allow_html=True)
+        # Story generation section
+        with st.spinner(f"{PROMPT_TEMPLATES[selected_prompt]['icon']} Creating your story..."):
+            # Generate image caption
+            image_caption = generate_image_caption(image)
+            
+            # Generate story content
+            selected_template = PROMPT_TEMPLATES[selected_prompt]
+            story_text = generate_story_content(
+                system_prompt=selected_template["system"],
+                user_prompt=image_caption
+            )
+            
+            # Display formatted story
+            st.subheader("✨ Your Magical Story")
+            st.markdown(f'<div class="story-container">{story_text}</div>', 
+                      unsafe_allow_html=True)
 
-    # Audio generation section
-    with st.spinner("🔮 Preparing story narration..."):
-        audio_file = generate_audio_from_story(story_text, "story_audio.wav")
-        st.subheader("🎧 Listen to Your Story")
-        st.audio(audio_file)
+        # Audio generation section
+        with st.spinner("🔮 Preparing story narration..."):
+            audio_file = generate_audio_from_story(story_text, "story_audio.wav")
+            st.subheader("🎧 Listen to Your Story")
+            st.audio(audio_file)
+    else:
+        # Show waiting message
+        st.info("ℹ️ Please select a story style and click the confirmation button to continue")
 
 # Help section
 st.markdown("---")
@@ -340,6 +365,7 @@ st.subheader("🌟 How to Use:")
 st.info("""
 1. Upload any picture (animals, nature, or people work best!)
 2. Choose your favorite story style
-3. Wait for magic to happen!
-4. Listen to your personalized story
+3. Click the confirmation button
+4. Wait for magic to happen!
+5. Listen to your personalized story
 """)