static/template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat Assistant</title>
    <link rel="stylesheet" href="static/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="header">
        <h1>AI Chat Assistant</h1>
    </div>
    <div id="gradio-container">
        {%body%}
    </div>
    <script>
        // Add loading indicator when sending messages
        document.addEventListener('DOMContentLoaded', function() {
            const submitBtn = document.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.addEventListener('click', function() {
                    const loadingSpan = document.createElement('span');
                    loadingSpan.className = 'loading';
                    this.appendChild(loadingSpan);
                    
                    // Remove loading indicator when response is received
                    const observer = new MutationObserver(function(mutations) {
                        mutations.forEach(function(mutation) {
                            if (mutation.addedNodes.length) {
                                loadingSpan.remove();
                                observer.disconnect();
                            }
                        });
                    });
                    
                    observer.observe(document.querySelector('.chat-container'), {
                        childList: true,
                        subtree: true
                    });
                });
            }
        });
    </script>
</body>
</html>