index.html

<!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">&#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 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>