Spaces:

Docfile
/

islam_bot

Running

App Files Files Community

Docfile commited on Aug 10, 2023

Commit

2fcf8d9

1 Parent(s): c6f2952

Update index.html

Browse files

Files changed (1) hide show

index.html +98 -13

index.html CHANGED Viewed

@@ -3,26 +3,73 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Application juridique</title>
-  <!-- Lien vers le fichier CSS personnalisé -->
-  <link rel="stylesheet" href="styles.css">
   <!-- Lien vers la bibliothèque Bootstrap -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
 </head>
 <body>
   <div class="container">
     <div class="card mt-5">
-      <div class="card-header bg-primary text-white">
-        <h1 class="text-center">Chatbot Islamique</h1>
       </div>
       <div class="card-body">
-        <div class="mt-4 text-center">
-          <strong> connectée actuellement :</strong>
           <p id="randomNumber" class="mt-2"></p>
         </div>
-        <div class="form-group">
           <label for="question">Posez votre question :</label>
-          <textarea class="form-control" id="question" rows="3" placeholder="Entrez votre question"></textarea>
         </div>
         <div class="text-center">
           <button type="button" class="btn btn-primary" id="submitBtn">Obtenir la réponse</button>
@@ -38,6 +85,19 @@
         </div>
       </div>
     </div>
   </div>
   <!-- Lien vers la bibliothèque jQuery -->
@@ -46,14 +106,41 @@
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
   <script>
     // 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-islam.hf.space/run/predict', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -75,13 +162,11 @@
         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;

 <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">&#9776;</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>
     </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 chatbot islamique a été créée 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.</p>
+    </div>
   </div>
   <!-- Lien vers la bibliothèque jQuery -->
   <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'
         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;