Spaces:

Docfile
/

islam_bot

Running

islam_bot / index.html

a2f4d19 over 1 year ago

6.29 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chatbot Islamique</title>
	<!-- Lien vers la bibliothèque Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
	<!-- Lien vers la bibliothèque Font Awesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
	<style>
	/* ... (autres styles CSS) ... */

	/* Suggestions de questions */
	#suggestions {
	margin-top: 20px;
	}

	.suggestion {
	display: inline-block;
	margin: 5px;
	cursor: pointer;
	color: #007bff;
	}

	/* Icône */
	.icon {
	font-size: 36px;
	margin-right: 10px;
	}

	/* Mode sombre */
	body.dark-mode {
	background-color: #343a40;
	color: white;
	}

	/* Animation de chargement */
	.loader {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: spin 2s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="card mt-5">
	<div class="card-header">
	<span class="icon">☰</span> Chatbot Islamique
	</div>
	<div class="card-body">
	<div class="text-center">
	<strong>Connecté actuellement :</strong>
	<p id="randomNumber" class="mt-2"></p>
	</div>
	<div class="form-group mt-4">
	<label for="question">Posez votre question :</label>
	<div class="input-group">
	<textarea class="form-control" id="question" rows="3" placeholder="Entrez votre question"></textarea>
	<div class="input-group-append">
	<button class="btn btn-outline-secondary" type="button" id="clearBtn"><i class="fas fa-times"></i></button>
	</div>
	</div>
	</div>
	<div class="text-center">
	<button type="button" class="btn btn-primary" id="submitBtn">Obtenir la réponse</button>
	</div>
	<div id="loading" class="text-center mt-4" style="display: none;">
	<div class="spinner-border text-primary" role="status">
	<span class="sr-only">Chargement...</span>
	</div>
	</div>
	<div class="mt-4 text-center">
	<strong>Réponse :</strong>
	<p id="answer" class="mt-2"></p>
	</div>
	</div>
	</div>

	<div id="suggestions">
	<strong>Suggestions de questions :</strong>
	<div class="suggestion">Qu'est-ce que le Ramadan ?</div>
	<div class="suggestion">Quelles sont les cinq prières quotidiennes ?</div>
	<div class="suggestion">Quel est le livre saint de l'islam ?</div>
	<!-- Ajoutez plus de suggestions ici -->
	</div>

	<div id="about" class="mt-5">
	<h2>À Propos</h2>
	<p>Cette application de chatbot islamique a été créée par Youssouf pour répondre à vos questions sur l'islam. Posez simplement votre question dans la zone prévue et appuyez sur le bouton "Obtenir la réponse" pour obtenir une réponse.c'est aussi simple que ça ! </p>
	</div>
	</div>

	<!-- Lien vers la bibliothèque jQuery -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<!-- Lien vers la bibliothèque Bootstrap JavaScript -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

	<script>
	// Fonction pour insérer une suggestion de question dans le champ de saisie
	function insertSuggestion(suggestion) {
	document.getElementById('question').value = suggestion;
	}

	// Gestion du clic sur une suggestion de question
	document.addEventListener('DOMContentLoaded', function() {
	const suggestions = document.querySelectorAll('.suggestion');
	suggestions.forEach(suggestion => {
	suggestion.addEventListener('click', function() {
	const question = suggestion.innerText;
	insertSuggestion(question);
	});
	});
	});

	// Gestion du clic sur le bouton de soumission
	document.getElementById('submitBtn').addEventListener('click', function() {
	const question = document.getElementById('question').value;
	getAnswer(question);
	});

	// Gestion du clic sur le bouton pour effacer le contenu du champ de saisie
	document.getElementById('clearBtn').addEventListener('click', function() {
	document.getElementById('question').value = '';
	});

	// ... (autre code JavaScript)
	// Fonction pour obtenir la réponse à partir de la question en utilisant l'API
	function getAnswer(question) {
	// Afficher l'indicateur de chargement
	document.getElementById('loading').style.display = 'block';
	// Masquer la réponse précédente
	document.getElementById('answer').innerHTML = '';
	fetch('https://docfile-my.hf.space/run/predict', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	data: [question]
	})
	})
	.then(response => response.json())
	.then(data => {
	var answer = data.data[0];
	document.getElementById('answer').innerHTML = answer;
	})
	.catch(error => {
	console.error('Une erreur s\'est produite :', error);
	})
	.finally(() => {
	// Masquer l'indicateur de chargement après avoir reçu la réponse
	document.getElementById('loading').style.display = 'none';
	});
	}
	// Générer et afficher le nombre aléatoire au chargement du site
	document.addEventListener('DOMContentLoaded', function() {
	var randomNumber = Math.floor(Math.random() * 19) + 2;
	document.getElementById('randomNumber').innerHTML = randomNumber;
	});
	// Fonction pour gérer le clic sur le bouton de soumission
	document.getElementById('submitBtn').addEventListener('click', function() {
	var question = document.getElementById('question').value;
	getAnswer(question);
	});
	</script>
	</body>
	</html>