chatbot-test / static /template.html
brunner56's picture
improve ui
73f5b3d
<!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>