ERMA / index.html

Upload 27 files

5cf374f verified over 1 year ago

10.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Educational Research Methods Chatbot</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #f8f9fa;
	margin: 0;
	padding: 0;
	}
	.chat-container {
	max-width: 800px;
	margin: 2rem auto;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	overflow: hidden;
	}
	.chat-header {
	background-color: #4a6fdc;
	color: white;
	padding: 1.5rem;
	text-align: center;
	}
	.chat-messages {
	height: 400px;
	overflow-y: auto;
	padding: 1rem;
	background-color: #f8f9fa;
	}
	.message {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	max-width: 80%;
	}
	.user-message {
	background-color: #e9ecef;
	margin-left: auto;
	border-bottom-right-radius: 0;
	}
	.bot-message {
	background-color: #4a6fdc;
	color: white;
	margin-right: auto;
	border-bottom-left-radius: 0;
	}
	.chat-input {
	display: flex;
	padding: 1rem;
	background-color: #fff;
	border-top: 1px solid #e9ecef;
	}
	.chat-input input {
	flex-grow: 1;
	border: 1px solid #ced4da;
	border-radius: 20px;
	padding: 0.5rem 1rem;
	margin-right: 0.5rem;
	}
	.chat-input button {
	background-color: #4a6fdc;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
	}
	.chat-input button:hover {
	background-color: #3a5bbf;
	}
	.citation {
	font-size: 0.8rem;
	margin-top: 0.5rem;
	color: #6c757d;
	}
	.citation-list {
	margin-top: 1rem;
	padding: 1rem;
	background-color: #f8f9fa;
	border-radius: 5px;
	font-size: 0.9rem;
	}
	.typing-indicator {
	display: none;
	padding: 0.75rem 1rem;
	background-color: #e9ecef;
	border-radius: 10px;
	margin-bottom: 1rem;
	width: fit-content;
	}
	.typing-indicator span {
	height: 10px;
	width: 10px;
	float: left;
	margin: 0 1px;
	background-color: #9E9EA1;
	display: block;
	border-radius: 50%;
	opacity: 0.4;
	}
	.typing-indicator span:nth-of-type(1) {
	animation: 1s blink infinite 0.3333s;
	}
	.typing-indicator span:nth-of-type(2) {
	animation: 1s blink infinite 0.6666s;
	}
	.typing-indicator span:nth-of-type(3) {
	animation: 1s blink infinite 0.9999s;
	}
	@keyframes blink {
	50% {
	opacity: 1;
	}
	}
	.model-info {
	font-size: 0.8rem;
	text-align: center;
	margin-top: 1rem;
	color: #6c757d;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="chat-container">
	<div class="chat-header">
	<h1>Educational Research Methods Chatbot</h1>
	<p>Ask questions about research methods for educational research</p>
	</div>
	<div class="chat-messages" id="chat-messages">
	<div class="message bot-message">
	Hello! I'm your educational research methods assistant. I can help you choose appropriate research methods for your educational research projects. What would you like to know?
	</div>
	<div class="typing-indicator" id="typing-indicator">
	<span></span>
	<span></span>
	<span></span>
	</div>
	</div>
	<div class="chat-input">
	<input type="text" id="user-input" placeholder="Type your question here...">
	<button id="send-button">Send</button>
	</div>
	<div class="model-info">
	Powered by Mistral-7B-v0.1 - Open Source LLM
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const chatMessages = document.getElementById('chat-messages');
	const userInput = document.getElementById('user-input');
	const sendButton = document.getElementById('send-button');
	const typingIndicator = document.getElementById('typing-indicator');

	// Use Netlify function endpoint for Mistral
	const API_ENDPOINT = '/.netlify/functions/chat-mistral';

	let conversationHistory = [];

	// Function to add a message to the chat
	function addMessage(message, isUser = false) {
	const messageDiv = document.createElement('div');
	messageDiv.classList.add('message');
	messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');

	// Process message text and citations if it's a bot message
	if (!isUser && typeof message === 'object') {
	const messageText = document.createElement('div');
	messageText.textContent = message.response;
	messageDiv.appendChild(messageText);

	// Add citations if available
	if (message.citations && message.citations.length > 0) {
	const citationList = document.createElement('div');
	citationList.classList.add('citation-list');
	citationList.innerHTML = '<strong>References:</strong>';

	const citationUl = document.createElement('ul');
	message.citations.forEach(citation => {
	const citationLi = document.createElement('li');
	citationLi.textContent = citation.text;
	citationUl.appendChild(citationLi);
	});

	citationList.appendChild(citationUl);
	messageDiv.appendChild(citationList);
	}
	} else {
	messageDiv.textContent = message;
	}

	chatMessages.appendChild(messageDiv);
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}

	// Function to show typing indicator
	function showTypingIndicator() {
	typingIndicator.style.display = 'block';
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}

	// Function to hide typing indicator
	function hideTypingIndicator() {
	typingIndicator.style.display = 'none';
	}

	// Function to send message to API
	async function sendMessage(message) {
	try {
	showTypingIndicator();

	const response = await fetch(API_ENDPOINT, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	message: message,
	conversation_history: conversationHistory
	})
	});

	if (!response.ok) {
	throw new Error('API request failed');
	}

	const data = await response.json();
	hideTypingIndicator();

	// Add bot response to chat
	addMessage(data, false);

	// Update conversation history
	conversationHistory.push({
	message: message,
	response: data.response
	});

	// Limit history to last 10 messages
	if (conversationHistory.length > 10) {
	conversationHistory = conversationHistory.slice(-10);
	}
	} catch (error) {
	hideTypingIndicator();
	console.error('Error:', error);
	addMessage('Sorry, I encountered an error. The Hugging Face Inference API may be temporarily unavailable. Please try again later.', false);
	}
	}

	// Event listener for send button
	sendButton.addEventListener('click', function() {
	const message = userInput.value.trim();
	if (message) {
	addMessage(message, true);
	userInput.value = '';
	sendMessage(message);
	}
	});

	// Event listener for Enter key
	userInput.addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	const message = userInput.value.trim();
	if (message) {
	addMessage(message, true);
	userInput.value = '';
	sendMessage(message);
	}
	}
	});

	// Focus input field on page load
	userInput.focus();
	});
	</script>
	</body>
	</html>