Scribd
Upload
51 views4 pages

Code 2

Uploaded by

Tejas Mhaske
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views4 pages

Code 2

Uploaded by

Tejas Mhaske
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Chatbot.

html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthcare Chatbot</title>
<style>
/* Add your CSS styles here */
body {
font-family: Arial, sans-serif;
}

.chat-container {
max-width: 500px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}

.chat-box {
height: 350px;
overflow-y: scroll;
padding: 10px;
}

.message {
margin-bottom: 10px;
padding: 5px 10px;
border-radius: 5px;
}

.user-message {
background-color: #f2f2f2;
text-align: right;
}

.bot-message {
background-color: #e5e5ff;
}

.chat-form {
display: flex;
align-items: center;
padding: 10px;
background-color: #f2f2f2;
}

.chat-form input[type="text"] {
flex: 1;
margin-right: 5px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}

.chat-form button {
padding: 5px 5px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}

/* Microphone button */
.mic-button {
background-color: #808080;
/* Gray background */
border: none;
padding: 10px;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}

.mic-icon {
width: 24px;
height: auto;
fill: #ffffff;
/* White color for the mic icon */
}

/* Popup */
.mic-popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: none;
}
</style>
</head>

<body>
<div class="chat-container">
<div class="chat-box" id="chat-box"></div>
<button id="microphone-button" class="mic-button">
<img src="mic.png" alt="Mic" class="mic-icon">
</button>
<form class="chat-form" id="chat-form">
<input type="text" id="user-input" placeholder="Type your
message...">
<button type="submit">Send</button>

</form>

</div>

<!-- Microphone popup -->


<div id="mic-popup" class="mic-popup">
<p id="popup-message">Listening...</p>
</div>

<script>
// Function to append a message to the chat box
function appendMessage(message, className) {
var chatBox = document.getElementById('chat-box');
var messageElement = document.createElement('div');
messageElement.className = 'message ' + className;
messageElement.innerHTML = message;
chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom of
chat box
}

// Function to handle voice input


function startVoiceInput() {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;

recognition.onresult = function (event) {


var userInput = event.results[0][0].transcript;
sendMessage(userInput);
};

recognition.onerror = function (event) {


console.error('Speech recognition error:', event.error);
};

recognition.start();

// Show microphone popup


var micPopup = document.getElementById('mic-popup');
micPopup.style.display = 'block';

// Hide microphone popup after 20 seconds


setTimeout(function () {
micPopup.style.display = 'none';
}, 20000); // 20 seconds
}
// Event listener for the microphone button
document.getElementById('microphone-button').addEventListener('click',
function () {
startVoiceInput();
});

// Event listener for the chat form submission


document.getElementById('chat-form').addEventListener('submit', function
(event) {
event.preventDefault();
var userInput = document.getElementById('user-input').value;
sendMessage(userInput);
});

// Function to send message to the server


function sendMessage(message) {
// Hide microphone popup
var micPopup = document.getElementById('mic-popup');
micPopup.style.display = 'none';

// Append user's message to chat history


appendMessage('You: ' + message, 'user-message');

// Send message to the server using fetch


fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: message })
})
.then(response => response.json())
.then(data => {
// Append bot's response to chat history
appendMessage('Bot: ' + data.message, 'bot-message');

// If the response contains a button, disable text input and


submit button
if (data.message.includes("<button")) {
document.getElementById('user-input').disabled = true;
document.querySelector('.chat-form
button[type="submit"]').disabled = true;
}
})
.catch(error => {
console.error('Error:', error);
});

// Clear user input


document.getElementById('user-input').value = '';
}
</script>
</body>
</html>

You might also like