Update app.py

app.py

@@ -224,10 +224,11 @@ st.markdown("""
     /* Primary title styling */
     .main-title {
         color: #E91E63;
-        font-size: 6rem;
+        font-size: 7rem;  /* Increased title size */
         text-align: center;
-        padding: 20px;
+        padding: 30px;
         text-shadow: 2px 2px #FFC107;
+        margin-bottom: 2rem;
     }
     
     /* Prompt buttons styling */
@@ -247,6 +248,15 @@ st.markdown("""
         margin: 20px 0;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
+
+    /* Image caption styling */
+    .image-caption {
+        border-left: 4px solid #4CAF50;
+        padding-left: 1rem;
+        font-size: 1.1rem;
+        color: #2c3e50;
+        margin: 1.5rem 0;
+    }
     
     /* Progress spinner styling */
     .stSpinner > div {
@@ -290,7 +300,7 @@ 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
+                st.session_state.confirmed = False
         with col2:
             if st.button("🌠 Fantasy Adventure", 
                         help="Create magical adventure story",
@@ -314,6 +324,16 @@ if uploaded_image is not None:
 
     # Only show generation when confirmed
     if st.session_state.get('confirmed', False):
+        # Generate image caption with loading state
+        with st.spinner("🔍 Analyzing image and generating description..."):
+            image_caption = generate_image_caption(image)
+            
+            # Display caption results using CSS class
+            st.subheader("📝 Image Understanding")
+            st.markdown(f'<div class="story-container image-caption">{image_caption}</div>', 
+                      unsafe_allow_html=True)
+            st.write("")  # Add spacing
+
         # Define prompt templates
         PROMPT_TEMPLATES = {
             "educational": {
@@ -335,10 +355,7 @@ if uploaded_image is not None:
         
         # 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
+            # Generate story content using the caption
             selected_template = PROMPT_TEMPLATES[selected_prompt]
             story_text = generate_story_content(
                 system_prompt=selected_template["system"],
@@ -366,6 +383,6 @@ st.info("""
 1. Upload any picture (animals, nature, or people work best!)
 2. Choose your favorite story style
 3. Click the confirmation button
-4. Wait for magic to happen!
-5. Listen to your personalized story
+4. Wait for image analysis to complete
+5. Enjoy your personalized story and audio!
 """)