Spaces:

Docfile
/

Chatm

Running

App Files Files Community

Chatm / templates /index.html

Docfile

Update templates/index.html

0d2d16d verified 2 months ago

raw

history blame

5.82 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mariam AI</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<style>
	.chat-container {
	max-width: 800px;
	margin: 50px auto;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 20px;
	}

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

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

	.assistant {
	background-color: #e0f7fa;
	text-align: left;
	}
	.settings-container {
	margin-bottom: 20px;
	}
	.hidden {
	display: none;
	}

	</style>
	</head>
	<body>
	<div class="container">
	<h1 class="text-center">Mariam AI</h1>

	<div class="settings-container">
	<div class="form-check">
	<input class="form-check-input" type="checkbox" id="webSearchToggle" {% if web_search %}checked{% endif %}>
	<label class="form-check-label" for="webSearchToggle">
	Activer la recherche web
	</label>
	</div>

	<button id="clearChatBtn" class="btn btn-danger mt-2">Clear Chat</button>

	</div>
	<div class="chat-container">
	<div id="chatMessages">
	{% for message in chat %}
	<div class="message {{ message.role }}">
	{{ message.text }}
	</div>
	{% endfor %}
	</div>

	<div class="form-group">
	<label for="fileInput">Télécharger un fichier (image/document)</label>
	<input type="file" class="form-control-file" id="fileInput">
	</div>

	<div class="input-group">
	<input type="text" id="promptInput" class="form-control" placeholder="Hey?">
	<div class="input-group-append">
	<button id="sendButton" class="btn btn-primary">Send</button>
	</div>
	</div>
	<div id="loadingIndicator" class="spinner-border text-primary mt-2 hidden" role="status">
	<span class="sr-only">Loading...</span>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
	$(document).ready(function() {
	function addMessage(role, text) {
	const messageClass = role === 'user' ? 'user' : 'assistant';
	$('#chatMessages').append(`<div class="message ${messageClass}">${text}</div>`);
	//Scroll to the bottom
	$('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
	}


	$('#sendButton').click(function() {
	const prompt = $('#promptInput').val();
	const webSearchEnabled = $('#webSearchToggle').is(':checked');
	const file = $('#fileInput')[0].files[0]; // Get the file
	if (!prompt && !file) {
	return; // Prevent sending empty messages without a file.
	}


	addMessage('user', prompt);
	$('#promptInput').val(''); // Clear input after sending
	$("#loadingIndicator").removeClass("hidden"); // Show the spinner


	const formData = new FormData();
	formData.append('prompt', prompt);
	formData.append('web_search', webSearchEnabled);

	if (file) {
	formData.append('file', file);
	}

	$.ajax({
	url: '/send_message',
	type: 'POST',
	data: formData,
	processData: false, // Important for FormData
	contentType: false, // Important for FormData
	success: function(response) {
	addMessage('assistant', response.text);
	},
	error: function(xhr, status, error) {
	addMessage('assistant', "Error: " + xhr.responseJSON.text); // Display error
	},
	complete: function(){
	$("#loadingIndicator").addClass("hidden"); // Hide spinner
	}
	});
	});

	$('#webSearchToggle').change(function() {
	$.ajax({
	url: '/toggle_web_search',
	type: 'POST',
	success: function(response) {
	console.log("Web search toggled:", response.web_search);
	}
	});
	});

	$("#clearChatBtn").click(function() {
	$.ajax({
	url: "/clear_chat",
	type: "POST",
	success: function(response) {
	$("#chatMessages").empty(); // Clear the chat display
	},
	error: function(xhr) {
	console.error("Error clearing chat:", xhr.statusText);
	}
	});
	});

	// Allow sending messages with Enter key
	$('#promptInput').keypress(function (e) {
	if (e.which == 13) { // Enter key pressed
	$('#sendButton').click();
	return false; // Prevent default behavior
	}
	});

	});
	</script>
	</body>
	</html>