Spaces:

Docfile
/

Re

Running

App Files Files Community

Docfile commited on Jan 28, 2024

Commit

b34f4ff

verified ·

1 Parent(s): 32f7fd8

Update index.html

Browse files

Files changed (1) hide show

index.html +162 -36

index.html CHANGED Viewed

@@ -1,50 +1,176 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>Intégration API Gradio avec Bootstrap</title>
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script>
 </head>
 <body>
-    <div class="container mt-5">
-        <div class="row">
-            <div class="col-12">
-                <input type="text" id="question" class="form-control" placeholder="Entrez votre question ici">
-            </div>
-            <div class="col-12 mt-3">
-                <button onclick="getResponse()" class="btn btn-primary">Soumettre</button>
-                <div id="spinner" class="spinner-border text-primary" role="status" style="display: none;">
-                    <span class="sr-only">Chargement...</span>
-                </div>
-            </div>
-            <div class="col-12 mt-3">
-                <div id="response" class="border p-3"></div>
             </div>
         </div>
     </div>
-    <script type="module">
-        import { client } from "@gradio/client";
-        async function getResponse() {
-            const spinner = document.getElementById('spinner');
-            const responseDiv = document.getElementById('response');
-            // Afficher le spinner et effacer la réponse précédente
-            spinner.style.display = 'inline-block';
-            responseDiv.innerHTML = '';
-            const question = document.getElementById('question').value;
-            const app = await client("https://docfile-gemi.hf.space/--replicas/p1sej/");
-            const result = await app.predict("/predict", [question]);
-            const converter = new showdown.Converter();
-            const html = converter.makeHtml(result.data);
-            // Mettre à jour la réponse et masquer le spinner
-            responseDiv.innerHTML = html;
-            spinner.style.display = 'none';
-        }
-    </script>
 </body>
-</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> YouTube Text Extractor
+      </div>
+      <div class="card-body">
+        <div class="text-center">
+          <strong>V :</strong>
+          <p id="randomNumber" class="mt-2"></p>
+        </div>
+        <div class="form-group mt-4">
+          <label for="question">Link :</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  :</strong>
+      <div class="suggestion">https://youtu.be/i0E3Vsz-Y7Q?si=y22asNjKrvN8UYAj?</div>
+      <div class="suggestion">https://youtu.be/82KLS2C_gNQ?si=fubHTocMBQeP_P5D</div>
+      <!-- Ajoutez plus de suggestions ici -->
+    </div>
+    <div id="about" class="mt-5">
+      <h2>À Propos </h2> <p> Cette app a été créée par Youssouf pour bref le titre est simple. Bon maintenant si tu ne comprends pas pends toi .  </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>