Update templates/message.html

templates/message.html

@@ -2,21 +2,26 @@
 {% block content %}
     <h1>Happy Birthday, Manavi!</h1>
     <p>Little Krishna has a special message for you!</p>
-    <img id="birthday-image" src="" alt="Krishna Birthday Wish" style="max-width: 300px;">
-    <lottie-player src="/static/assets/krishna-lottie.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
+    <img id="birthday-image" src="" alt="Krishna Birthday Wish">
+    <lottie-player src="/static/assets/krishna-lottie.json" background="transparent" speed="1" style="width: 300px; height: 300px; margin: 0 auto;" loop autoplay></lottie-player>
     <p id="birthday-message">Hare Manavi! On April 19, 2025, I’ve come from Vrindavan to wish you a joyous birthday! Ayush says: ‘You’re my sweetest friend, more precious than butter!’</p>
     <script>
         document.addEventListener('DOMContentLoaded', async () => {
             const birthdayImage = document.getElementById('birthday-image');
-            const response = await fetch('/image', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ prompt: 'Little Krishna playing flute and wishing happy birthday, cartoon style' })
-            });
-            const data = await response.json();
-            if (data.image_url) {
-                birthdayImage.src = data.image_url;
-            } else {
+            try {
+                const response = await fetch('/image', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ prompt: 'Little Krishna playing flute and wishing happy birthday, cartoon style' })
+                });
+                const data = await response.json();
+                if (data.image_url) {
+                    birthdayImage.src = data.image_url;
+                } else {
+                    birthdayImage.src = 'https://via.placeholder.com/300x300.png?text=Error+Loading+Image';
+                }
+            } catch (error) {
+                console.error('Error fetching birthday image:', error);
                 birthdayImage.src = 'https://via.placeholder.com/300x300.png?text=Error+Loading+Image';
             }
         });