Update app.py

app.py

@@ -18,7 +18,7 @@ html, body {
     overflow-x: hidden;
 }
 .stApp {
-    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%) !important;
+    background: linear-gradient(135deg, #ff9a9e 0%, #c90076 100%) !important;
 }
 .chat-container {
     position: fixed;
@@ -121,209 +121,62 @@ html, body {
 </style>
 """, unsafe_allow_html=True)
 
-# ----------------- Premium Celebration Effects -----------------
+# ----------------- Celebration Effects -----------------
 def show_confetti():
+    # Simple confetti that works in Hugging Face Spaces
     confetti_js = """
-    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
     <script>
     (function() {
-        // Create container if it doesn't exist
-        let container = document.getElementById('confetti-container');
-        if (!container) {
-            container = document.createElement('div');
-            container.id = 'confetti-container';
-            container.className = 'celebration-container';
-            document.body.appendChild(container);
-        }
-        
-        // Make canvas full screen
-        const canvas = document.createElement('canvas');
-        canvas.style.width = '100%';
-        canvas.style.height = '100%';
-        canvas.style.position = 'absolute';
-        canvas.style.top = '0';
-        canvas.style.left = '0';
-        container.appendChild(canvas);
-        
-        const myConfetti = confetti.create(canvas, {
-            resize: true,
-            useWorker: true
-        });
-        
-        // Enhanced confetti with emojis and shapes
-        const emojis = ['✨', '⭐', '🌟', '🎊', '🎉', '💖', '😊', '🌈'];
-        const duration = 3000;
-        const end = Date.now() + duration;
-        const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
-        
-        function frame() {
-            // Standard confetti
-            myConfetti({
-                particleCount: 100,
-                angle: 60,
-                spread: 55,
-                origin: { x: 0 },
-                colors: colors
-            });
-            myConfetti({
-                particleCount: 100,
-                angle: 120,
-                spread: 55,
-                origin: { x: 1 },
-                colors: colors
-            });
-            
-            // Emoji confetti
-            if (Date.now() % 100 < 30) {
-                myConfetti({
-                    particleCount: 5,
-                    spread: 70,
-                    shapes: ['text'],
-                    shapeOptions: {
-                        text: {
-                            value: emojis[Math.floor(Math.random() * emojis.length)],
-                            fontSize: 24
-                        }
-                    },
-                    origin: { y: 0.7 }
-                });
-            }
-            
-            // Stars
-            if (Date.now() % 100 < 20) {
-                myConfetti({
-                    particleCount: 15,
-                    spread: 50,
-                    shapes: ['star'],
-                    shapeOptions: {
-                        star: {
-                            fill: true,
-                            points: 5
-                        }
-                    },
-                    colors: ['#FFD700', '#FFA500', '#FF6347'],
-                    origin: { y: 0.6 }
-                });
-            }
-            
-            if (Date.now() < end) {
-                requestAnimationFrame(frame);
-            } else {
-                canvas.remove();
-            }
-        }
-        
-        frame();
-    })();
-    </script>
-    """
-    html(confetti_js, height=0, width=0)
-
-def show_balloons():
-    balloon_js = """
-    <script>
-    (function() {
-        // Create container if it doesn't exist
-        let container = document.getElementById('balloon-container');
-        if (!container) {
-            container = document.createElement('div');
-            container.id = 'balloon-container';
-            container.className = 'celebration-container';
-            document.body.appendChild(container);
-        }
+        const container = document.createElement('div');
+        container.className = 'celebration-container';
+        document.body.appendChild(container);
         
-        // Balloon styles
-        const styles = document.createElement('style');
-        styles.innerHTML = `
-            @keyframes floatUp {
-                0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 1; }
-                80% { opacity: 0.8; }
-                100% { transform: translateY(-50vh) translateX(var(--random-x)) rotate(360deg); opacity: 0; }
-            }
-            .balloon {
-                position: absolute;
-                bottom: -100px;
-                width: var(--size);
-                height: calc(var(--size) * 1.3);
-                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-                box-shadow: inset -10px -10px 15px rgba(0,0,0,0.2);
-                animation: floatUp var(--duration) ease-in forwards;
-                z-index: 10;
-            }
-            .balloon-string {
-                position: absolute;
-                bottom: -15px;
-                left: 50%;
-                width: 2px;
-                height: 30px;
-                background-color: rgba(0,0,0,0.2);
-                transform: translateX(-50%);
-            }
-            .balloon-emoji {
-                position: absolute;
-                top: 25%;
-                left: 50%;
-                transform: translateX(-50%);
-                font-size: calc(var(--size) * 0.4);
-                z-index: 11;
-            }
-        `;
-        document.head.appendChild(styles);
+        const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
+        const emojis = ['✨', '🌟', '🎉'];
         
-        // Balloon colors and emojis
-        const colors = [
-            'radial-gradient(circle at 30% 30%, #FF6B6B, #FF0000)',
-            'radial-gradient(circle at 30% 30%, #4ECDC4, #00A8A8)',
-            'radial-gradient(circle at 30% 30%, #FFBE0B, #FF8C00)',
-            'radial-gradient(circle at 30% 30%, #9370DB, #663399)',
-            'radial-gradient(circle at 30% 30%, #3A86FF, #0038A8)',
-            'radial-gradient(circle at 30% 30%, #FF69B4, #FF1493)'
-        ];
-        
-        const emojis = ['🎈', '🎉', '🎊', '💖', '😊', '✨', '🎁', '🌟'];
-        
-        // Create 50 premium balloons
-        for (let i = 0; i < 50; i++) {
+        for (let i = 0; i < 100; i++) {
             setTimeout(() => {
-                const balloon = document.createElement('div');
-                balloon.className = 'balloon';
-                
-                // Random properties
-                const size = 60 + Math.random() * 60;
-                const duration = 5 + Math.random() * 3;
-                const xPos = Math.random() * 100;
-                const xMovement = (Math.random() - 0.5) * 200;
-                const color = colors[Math.floor(Math.random() * colors.length)];
-                const emoji = emojis[Math.floor(Math.random() * emojis.length)];
-                
-                // Apply properties
-                balloon.style.setProperty('--size', `${size}px`);
-                balloon.style.setProperty('--duration', `${duration}s`);
-                balloon.style.setProperty('--random-x', `${xMovement}px`);
-                balloon.style.background = color;
-                balloon.style.left = `${xPos}%`;
+                const confetti = document.createElement('div');
+                confetti.style.position = 'absolute';
+                confetti.style.width = '15px';
+                confetti.style.height = '15px';
+                confetti.style.left = Math.random() * 100 + 'vw';
+                confetti.style.top = '-20px';
                 
-                // Add string
-                const string = document.createElement('div');
-                string.className = 'balloon-string';
-                balloon.appendChild(string);
+                if (Math.random() > 0.7) {
+                    // Emoji confetti
+                    confetti.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+                    confetti.style.fontSize = '20px';
+                } else {
+                    // Color confetti
+                    confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                    confetti.style.borderRadius = '50%';
+                }
                 
-                // Add emoji
-                const emojiEl = document.createElement('div');
-                emojiEl.className = 'balloon-emoji';
-                emojiEl.textContent = emoji;
-                balloon.appendChild(emojiEl);
+                const duration = 3000 + Math.random() * 2000;
+                confetti.animate([
+                    { top: '-20px', opacity: 1 },
+                    { top: '100vh', opacity: 0 }
+                ], { duration: duration, easing: 'cubic-bezier(0.1,0.8,0.3,1)' });
                 
-                container.appendChild(balloon);
-                
-                // Remove after animation
-                setTimeout(() => balloon.remove(), duration * 1000);
-            }, i * 150);
+                container.appendChild(confetti);
+                setTimeout(() => confetti.remove(), duration);
+            }, i * 30);
         }
+        
+        setTimeout(() => container.remove(), 5000);
     })();
     </script>
     """
-    html(balloon_js, height=0, width=0)
+    html(confetti_js, height=0, width=0)
+
+def show_balloons():
+    # Use Streamlit's built-in balloons which work everywhere
+    st.balloons()
+
+def show_snow():
+    # Use Streamlit's built-in snow which work everywhere
+    st.snow()
 
 # ----------------- Content Collections -----------------
 JOKES = [
@@ -360,20 +213,6 @@ GAMES = {
         "Movies or TV shows?",
         "Books or video games?",
         "City life or country life?"
-    ],
-    "20 Questions": [
-        "Think of an animal and I'll try to guess it!",
-        "Think of a famous person and I'll ask questions",
-        "Choose a movie and I'll figure it out",
-        "Pick a country and I'll guess it",
-        "Imagine a food and I'll discover what it is"
-    ],
-    "Story Building": [
-        "Let's create a story together - you start!",
-        "I'll begin a story and you continue it",
-        "We'll alternate sentences to build a tale",
-        "Create a story where the main character is a talking pizza",
-        "Make up a story about a magical pair of shoes"
     ]
 }
 
@@ -404,6 +243,7 @@ if "chat_memory" not in st.session_state:
 def add_to_chat(bot_message: str):
     st.session_state.history.append({"user": "", "bot": bot_message})
     st.session_state.show_chat = True
+#    show_balloons()  # Show balloons on any interaction
 
 def load_models():
     if not st.session_state.models_loaded:
@@ -454,15 +294,19 @@ if col3.button("💡 Get advice", key="main_advice"):
 
 # Enhanced Celebration buttons
 st.markdown("### Need some cheer?")
-celeb_col1, celeb_col2 = st.columns(2)
+celeb_col1, celeb_col2, celeb_col3 = st.columns(3)
 
-if celeb_col1.button("🎉 Premium Confetti", key="confetti"):
+if celeb_col1.button("🎉 Confetti", key="confetti"):
     show_confetti()
-    add_to_chat("Enjoy this premium confetti shower! ✨🌟")
+    add_to_chat("Enjoy the confetti! ✨")
 
-if celeb_col2.button("🎈 Premium Balloons", key="balloons"):
+if celeb_col2.button("🎈 Balloons", key="balloons"):
     show_balloons()
-    add_to_chat("Here come the premium balloons! �🎉")
+    add_to_chat("Here come the balloons! 🎈")
+
+if celeb_col3.button("❄️ Snow", key="snow"):
+    show_snow()
+    add_to_chat("Snow is falling! ❄️")
 
 # Chat input
 user_input = st.text_input("💬 Say something to SentiPal...", key="chat_input")
@@ -478,6 +322,7 @@ if st.button("Send", key="send_button") and user_input.strip():
             "bot": reply + f"\n\n_(detected emotion: **{emotion}**, {confidence*100:.1f}%)_"
         })
         st.session_state.show_chat = True
+        show_balloons()  # Show balloons on message send
 
 # ----------------- Chat Display -----------------
 if st.session_state.history:
@@ -493,6 +338,10 @@ if st.session_state.history:
         st.markdown(f'<div class="bot-message">SentiPal: {item["bot"]}</div>', unsafe_allow_html=True)
 
     if st.button("Close Chat", key="close_chat", type="primary"):
-        st.session_state.show_chat = False
-
-    st.markdown("</div>", unsafe_allow_html=True)
+        #st.session_state.show_chat = False
+        for key in list(st.session_state.keys()):
+            del st.session_state[key]
+        st.rerun()
+        
+    st.markdown("</div>", unsafe_allow_html=True)
+