File size: 6,286 Bytes
967ec2e b34f4ff c155fff b34f4ff c155fff b34f4ff 3af3994 b34f4ff 3af3994 b34f4ff 3af3994 b34f4ff 56d50b0 b34f4ff 56d50b0 b34f4ff 3af3994 b34f4ff 3af3994 56d50b0 b34f4ff 1a3e788 b34f4ff c155fff b34f4ff 32f7fd8 b34f4ff f92563c b34f4ff 32f7fd8 b34f4ff 32f7fd8 b34f4ff c155fff b34f4ff |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
<!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-gemi.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> |