Update app.py

app.py

@@ -33,7 +33,7 @@ def calculate_weight(earth_weight, planet):
 def main():
     with gr.Blocks(css="""
         .gradio-container {
-            background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrpx_alD_MY29yHYIZryYkBbT-LB-Kb1PpdhDmhb4MPfAIX2WCfOIhYW_6WaxAmR6LW5U&usqp=CAU') no-repeat center center fixed;
+            background: url('https://img.freepik.com/free-photo/purple-black-futuristic-aztec-abstract-background-with-squares-neon-lights_181624-27830.jpg') no-repeat center center fixed;
             background-size: cover;
             min-height: 100vh;
         }
@@ -90,31 +90,38 @@ def main():
             earth_weight_input = gr.Number(label="Enter your weight on Earth (kg)", interactive=True)
             planet_input = gr.Dropdown(choices=list(gravity_factors.keys()), label="Choose a planet", interactive=True)
         
+        # Output section for the equivalent weight
         output = gr.Textbox(label="Equivalent Weight on Planet", interactive=False)
 
-        # Submit button and interaction
-        button = gr.Button("Calculate Weight")
-        
-        # Function to trigger balloon effect using JavaScript
-        def trigger_balloon_effect():
-            return """
-                const balloonCount = 5;  // Number of balloons to show
-                for (let i = 0; i < balloonCount; i++) {
-                    let balloon = document.createElement('div');
-                    balloon.classList.add('balloon');
-                    balloon.style.left = Math.random() * 100 + 'vw';  // Random horizontal position
-                    let balloonText = document.createElement('div');
-                    balloonText.classList.add('balloon-text');
-                    balloonText.textContent = '🎈';  // Emoji or custom text for the balloon
-                    balloon.appendChild(balloonText);
-                    document.body.appendChild(balloon);
-                    setTimeout(() => balloon.remove(), 6000);  // Remove balloon after animation
+        # HTML component for balloon effect trigger
+        balloon_script = gr.HTML("""
+            <script>
+                function triggerBalloonEffect() {
+                    const balloonCount = 5;  // Number of balloons to show
+                    for (let i = 0; i < balloonCount; i++) {
+                        let balloon = document.createElement('div');
+                        balloon.classList.add('balloon');
+                        balloon.style.left = Math.random() * 100 + 'vw';  // Random horizontal position
+                        let balloonText = document.createElement('div');
+                        balloonText.classList.add('balloon-text');
+                        balloonText.textContent = '🎈';  // Emoji or custom text for the balloon
+                        balloon.appendChild(balloonText);
+                        document.body.appendChild(balloon);
+                        setTimeout(() => balloon.remove(), 6000);  // Remove balloon after animation
+                    }
                 }
-            """
+            </script>
+        """)
+
+        # Function to trigger balloon effect and then calculate weight
+        def trigger_balloon_and_weight(earth_weight, planet):
+            result = calculate_weight(earth_weight, planet)
+            balloon_script.trigger()  # Trigger the balloon effect
+            return result
         
-        # Connect button click to calculate weight and trigger the balloon effect
-        button.click(calculate_weight, inputs=[earth_weight_input, planet_input], outputs=output)
-        button.click(trigger_balloon_effect)
+        # Submit button and interaction
+        button = gr.Button("Calculate Weight")
+        button.click(trigger_balloon_and_weight, inputs=[earth_weight_input, planet_input], outputs=output)
 
     demo.launch()