assets/design.js

function createGradioAnimation() {
    const container = document.createElement('div');
    container.id = 'gradio-animation';
    container.style.fontSize = '2em';
    container.style.fontWeight = 'bold';
    container.style.textAlign = 'center';
    container.style.marginBottom = '20px';

    const text = 'Welcome to OpenVideo Tagger!';

    for (let i = 0; i < text.length; i++) {
        (function (i) {
            setTimeout(() => {
                const letter = document.createElement('span');
                letter.style.opacity = '0';
                letter.style.transition = 'opacity 0.5s';
                letter.innerText = text[i];
                container.appendChild(letter);

                setTimeout(() => {
                    letter.style.opacity = '1';
                }, 50);
            }, i * 125);
        })(i);
    }

    const gradioContainer = document.querySelector('.gradio-container');

    if (gradioContainer) {
        gradioContainer.insertBefore(container, gradioContainer.firstChild);
    } else {
        console.error("Error: Element with class 'gradio-container' not found.");
    }

    return 'Animation created';
}