|
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <title>Medical Assistant Chatbot</title>
|
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
|
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
| </head>
|
| <body>
|
|
|
| <div class="chat-container">
|
| <div class="header">
|
| <img src="https://cdn-icons-png.flaticon.com/512/921/921347.png" alt="Medical Icon" class="logo" />
|
| <h2>AI Medical Assistant</h2>
|
| <p>Your smart healthcare companion</p>
|
| </div>
|
|
|
| <div class="chat-box" id="chatBox">
|
|
|
| </div>
|
|
|
| <div class="input-area">
|
| <textarea id="userInput" class="form-control" placeholder="Describe your symptoms or ask a medical question..." rows="3"></textarea>
|
| <button id="sendBtn" class="btn btn-primary mt-2 w-100">Send</button>
|
| </div>
|
|
|
|
|
| <div class="bottom-bar">
|
| <img src="https://cdn-icons-png.flaticon.com/512/387/387561.png" class="doctor-avatar" />
|
| <button id="themeToggle" class="btn btn-outline-secondary btn-sm">🌙 Dark Mode</button>
|
| </div>
|
|
|
| </div>
|
|
|
| <script>
|
| const chatBox = document.getElementById('chatBox');
|
| const sendBtn = document.getElementById('sendBtn');
|
| const userInput = document.getElementById('userInput');
|
|
|
| function appendMessage(sender, message) {
|
| const msg = document.createElement('div');
|
| msg.classList.add('message', sender);
|
| msg.innerHTML = `<p>${message}</p>`;
|
| chatBox.appendChild(msg);
|
| chatBox.scrollTop = chatBox.scrollHeight;
|
| }
|
|
|
| function showLoading() {
|
| const loading = document.createElement('div');
|
| loading.classList.add('loading');
|
| loading.innerHTML = `<div class="spinner"></div>`;
|
| chatBox.appendChild(loading);
|
| chatBox.scrollTop = chatBox.scrollHeight;
|
| }
|
|
|
| function hideLoading() {
|
| const loading = document.querySelector('.loading');
|
| if (loading) loading.remove();
|
| }
|
|
|
| sendBtn.addEventListener('click', sendMessage);
|
| userInput.addEventListener('keypress', (e) => {
|
| if (e.key === 'Enter' && !e.shiftKey) {
|
| e.preventDefault();
|
| sendMessage();
|
| }
|
| });
|
|
|
| function sendMessage() {
|
| const text = userInput.value.trim();
|
| if (!text) return;
|
|
|
| appendMessage('user', text);
|
| userInput.value = '';
|
|
|
| showLoading();
|
|
|
| fetch("/get", {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/x-www-form-urlencoded",
|
| },
|
| body: `msg=${encodeURIComponent(text)}`
|
| })
|
| .then(res => res.text())
|
| .then(data => {
|
| hideLoading();
|
| appendMessage("bot", data);
|
| })
|
| .catch(err => {
|
| hideLoading();
|
| appendMessage("bot", "Error connecting to server.");
|
| console.error(err);
|
| });
|
| }
|
|
|
|
|
| const themeToggle = document.getElementById('themeToggle');
|
| themeToggle.addEventListener('click', () => {
|
| document.body.classList.toggle('dark');
|
| themeToggle.textContent = document.body.classList.contains('dark')
|
| ? "☀ Light Mode"
|
| : "🌙 Dark Mode";
|
| });
|
| </script>
|
|
|
| </body>
|
| </html>
|
|
|
|
|
