Update app.py

app.py

@@ -13,6 +13,8 @@ from PIL import Image
 import io
 import matplotlib.pyplot as plt
 import requests
+from io import BytesIO
+import json
 
 # Configure Streamlit page
 st.set_page_config(
@@ -147,6 +149,12 @@ st.markdown("""
         background: #f0f8ff;
         padding: 15px;
     }
+    
+    .animation-gif {
+        max-width: 100%;
+        border-radius: 10px;
+        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -319,6 +327,13 @@ plt.show()
     }
 }
 
+# Animation examples for different concepts
+ANIMATION_EXAMPLES = {
+    "loop": "https://i.imgur.com/7zQY1eE.gif",
+    "conditional": "https://i.imgur.com/5X8jYAy.gif",
+    "function": "https://i.imgur.com/9zJkQ7P.gif"
+}
+
 def analyze_story(story):
     """Analyze story and identify programming concepts"""
     story_lower = story.lower()
@@ -533,7 +548,8 @@ def create_interactive_animation(story, concepts):
                     method="animate",
                     args=[None, {"frame": {"duration": 100, "redraw": True}}]
                 )]
-        )])
+            )]
+        )
         
         fig.update_traces(
             textfont_size=40,
@@ -646,6 +662,14 @@ def create_story_image(story):
         st.error(f"Image generation error: {str(e)}")
         return None
 
+def generate_animation_preview(concept):
+    """Get a preview GIF for the animation concept"""
+    try:
+        # Return a sample GIF for the concept
+        return ANIMATION_EXAMPLES.get(concept, "https://i.imgur.com/7zQY1eE.gif")
+    except:
+        return "https://i.imgur.com/7zQY1eE.gif"
+
 def main():
     """Main application function"""
     st.title("🧙‍♂️ StoryCoder - Learn Python Through Stories!")
@@ -748,15 +772,15 @@ def main():
             with col1:
                 st.caption("Loop Example")
                 st.code('"A dragon breathes fire 5 times at the castle"', language="text")
-                st.image("https://i.imgur.com/7zQY1eE.png", width=200)
+                st.image(generate_animation_preview("loop"), use_column_width=True, caption="Loop Animation Preview")
             with col2:
                 st.caption("Conditional Example")
                 st.code('"If it rains, the cat stays inside, else it goes out"', language="text")
-                st.image("https://i.imgur.com/5X8jYAy.png", width=200)
+                st.image(generate_animation_preview("conditional"), use_column_width=True, caption="Conditional Animation Preview")
             with col3:
                 st.caption("Function Example")
                 st.code('"A wizard casts a spell to make flowers grow"', language="text")
-                st.image("https://i.imgur.com/9zJkQ7P.png", width=200)
+                st.image(generate_animation_preview("function"), use_column_width=True, caption="Function Animation Preview")
     
     # Animation tab
     elif st.session_state.active_tab == "animation":
@@ -783,7 +807,8 @@ def main():
             st.plotly_chart(st.session_state.interactive_animation, use_container_width=True)
         else:
             st.info("Interactive animation preview. The real animation would run on your computer!")
-            st.image("https://i.imgur.com/8LzQY7a.gif", use_container_width=True)
+            st.image(generate_animation_preview(st.session_state.concepts[0] if st.session_state.concepts else "loop"), 
+                    use_container_width=True)
         
         # Play audio narration
         st.subheader("🔊 Story Narration")
@@ -824,6 +849,11 @@ def main():
                         <pre style="background:#f0f0f0; padding:10px; border-radius:8px;">{details['example']}</pre>
                     </div>
                     """, unsafe_allow_html=True)
+                    
+                    # Show animation preview for the concept
+                    st.image(generate_animation_preview(concept), 
+                             caption=f"{details['name']} Animation Example", 
+                             use_column_width=True)
         
         if st.button("See the Magic Code!", use_container_width=True):
             st.session_state.active_tab = "code"
@@ -857,6 +887,13 @@ def main():
             """)
             
             st.success("🎉 When you run this code, you'll see your story come to life!")
+            
+            # Show what the animation would look like
+            st.subheader("🎬 What Your Animation Would Look Like")
+            concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
+            st.image(generate_animation_preview(concept), 
+                    caption="This is similar to what your animation would look like", 
+                    use_column_width=True)
         else:
             st.warning("No code generated yet!")