templates/message.html

{% extends 'base.html' %}
{% 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">
    <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');
            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';
            }
        });
    </script>
    <script src="/static/js/krishna-animation.js"></script>
{% endblock %}