dom.py

generate_title = """
function createGradioAnimation() {
    var container = document.createElement('div');
    container.id = 'gradio-animation';
    container.style.fontSize = '2em';
    container.style.fontWeight = 'bold';
    container.style.textAlign = 'center';
    container.style.marginBottom = '20px';
    var text = 'Generate Pigeon Avatar';
    for (var i = 0; i < text.length; i++) {
        (function(i){
            setTimeout(function(){
                var letter = document.createElement('span');
                letter.style.opacity = '0';
                letter.style.transition = 'opacity 0.5s';
                letter.innerText = text[i];
                container.appendChild(letter);
                setTimeout(function() {
                    letter.style.opacity = '1';
                }, 50);
            }, i * 250);
        })(i);
    }
    var gradioContainer = document.querySelector('.gradio-container');
    gradioContainer.insertBefore(container, gradioContainer.firstChild);
    return 'Animation created';
}
"""

generate_markdown = """
            ## About this Demo

            This demo generates a pigeon avatar based on an image of a pigeon.
                    
            ## How this works?
            You can upload an image of a pigeon and select an avatar style. The model will generate two pigeons avatars based on the image description.
            Estimated time: 178s

            **Models used:**

            - [Moondream2](https://huggingface.co/vikhyatk/moondream2) for image description.  
            - [FLUX.1-dev](https://huggingface.co/black-forest-labs/FLUX.1-dev) for image generation (API).
        """