Spaces:
Sleeping
Sleeping
<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> |