Docfile commited on
Commit
57821ec
verified
1 Parent(s): 3af3994

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +19 -172
index.html CHANGED
@@ -1,177 +1,24 @@
1
  <!DOCTYPE html>
2
- <html lang="fr">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Chatbot Islamique</title>
7
- <!-- Lien vers la biblioth猫que Bootstrap -->
8
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
9
- <!-- Lien vers la biblioth猫que Font Awesome -->
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
11
- <style>
12
- /* ... (autres styles CSS) ... */
13
-
14
- /* Suggestions de questions */
15
- #suggestions {
16
- margin-top: 20px;
17
- }
18
-
19
- .suggestion {
20
- display: inline-block;
21
- margin: 5px;
22
- cursor: pointer;
23
- color: #007bff;
24
- }
25
-
26
- /* Ic么ne */
27
- .icon {
28
- font-size: 36px;
29
- margin-right: 10px;
30
- }
31
-
32
- /* Mode sombre */
33
- body.dark-mode {
34
- background-color: #343a40;
35
- color: white;
36
- }
37
-
38
- /* Animation de chargement */
39
- .loader {
40
- border: 4px solid #f3f3f3;
41
- border-top: 4px solid #3498db;
42
- border-radius: 50%;
43
- width: 20px;
44
- height: 20px;
45
- animation: spin 2s linear infinite;
46
- }
47
-
48
- @keyframes spin {
49
- 0% { transform: rotate(0deg); }
50
- 100% { transform: rotate(360deg); }
51
- }
52
- </style>
53
  </head>
54
  <body>
55
- <div class="container">
56
- <div class="card mt-5">
57
- <div class="card-header">
58
- <span class="icon">&#9776;</span> Chatbot Islamique
59
- </div>
60
- <div class="card-body">
61
- <div class="text-center">
62
- <strong>Connect茅 actuellement :</strong>
63
- <p id="randomNumber" class="mt-2"></p>
64
- </div>
65
- <div class="form-group mt-4">
66
- <label for="question">Posez votre question :</label>
67
- <div class="input-group">
68
- <textarea class="form-control" id="question" rows="3" placeholder="Entrez votre question"></textarea>
69
- <div class="input-group-append">
70
- <button class="btn btn-outline-secondary" type="button" id="clearBtn"><i class="fas fa-times"></i></button>
71
- </div>
72
- </div>
73
- </div>
74
- <div class="text-center">
75
- <button type="button" class="btn btn-primary" id="submitBtn">Obtenir la r茅ponse</button>
76
- </div>
77
- <div id="loading" class="text-center mt-4" style="display: none;">
78
- <div class="spinner-border text-primary" role="status">
79
- <span class="sr-only">Chargement...</span>
80
- </div>
81
- </div>
82
- <div class="mt-4 text-center">
83
- <strong>R茅ponse :</strong>
84
- <p id="answer" class="mt-2"></p>
85
- </div>
86
- </div>
87
- </div>
88
-
89
- <div id="suggestions">
90
- <strong>Suggestions de questions :</strong>
91
- <div class="suggestion">Qu'est-ce que le Ramadan ?</div>
92
- <div class="suggestion">Quelles sont les cinq pri猫res quotidiennes ?</div>
93
- <div class="suggestion">Quel est le livre saint de l'islam ?</div>
94
- <!-- Ajoutez plus de suggestions ici -->
95
- </div>
96
-
97
- <div id="about" class="mt-5">
98
- <h2>脌 Propos</h2>
99
- <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>
100
- </div>
101
- </div>
102
-
103
- <!-- Lien vers la biblioth猫que jQuery -->
104
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
105
- <!-- Lien vers la biblioth猫que Bootstrap JavaScript -->
106
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
107
-
108
- <script>
109
- // Fonction pour ins茅rer une suggestion de question dans le champ de saisie
110
- function insertSuggestion(suggestion) {
111
- document.getElementById('question').value = suggestion;
112
- }
113
-
114
- // Gestion du clic sur une suggestion de question
115
- document.addEventListener('DOMContentLoaded', function() {
116
- const suggestions = document.querySelectorAll('.suggestion');
117
- suggestions.forEach(suggestion => {
118
- suggestion.addEventListener('click', function() {
119
- const question = suggestion.innerText;
120
- insertSuggestion(question);
121
- });
122
- });
123
- });
124
-
125
- // Gestion du clic sur le bouton de soumission
126
- document.getElementById('submitBtn').addEventListener('click', function() {
127
- const question = document.getElementById('question').value;
128
- getAnswer(question);
129
- });
130
-
131
- // Gestion du clic sur le bouton pour effacer le contenu du champ de saisie
132
- document.getElementById('clearBtn').addEventListener('click', function() {
133
- document.getElementById('question').value = '';
134
- });
135
-
136
- // ... (autre code JavaScript)
137
- // Fonction pour obtenir la r茅ponse 脿 partir de la question en utilisant l'API
138
- function getAnswer(question) {
139
- // Afficher l'indicateur de chargement
140
- document.getElementById('loading').style.display = 'block';
141
- // Masquer la r茅ponse pr茅c茅dente
142
- document.getElementById('answer').innerHTML = '';
143
- fetch('https://docfile-gemi.hf.space/run/predict', {
144
- method: 'POST',
145
- headers: {
146
- 'Content-Type': 'application/json'
147
- },
148
- body: JSON.stringify({
149
- data: [question]
150
- })
151
- })
152
- .then(response => response.json())
153
- .then(data => {
154
- var answer = data.data[0];
155
- document.getElementById('answer').innerHTML = answer;
156
- })
157
- .catch(error => {
158
- console.error('Une erreur s\'est produite :', error);
159
- })
160
- .finally(() => {
161
- // Masquer l'indicateur de chargement apr猫s avoir re莽u la r茅ponse
162
- document.getElementById('loading').style.display = 'none';
163
- });
164
- }
165
- // G茅n茅rer et afficher le nombre al茅atoire au chargement du site
166
- document.addEventListener('DOMContentLoaded', function() {
167
- var randomNumber = Math.floor(Math.random() * 19) + 2;
168
- document.getElementById('randomNumber').innerHTML = randomNumber;
169
- });
170
- // Fonction pour g茅rer le clic sur le bouton de soumission
171
- document.getElementById('submitBtn').addEventListener('click', function() {
172
- var question = document.getElementById('question').value;
173
- getAnswer(question);
174
- });
175
- </script>
176
  </body>
177
- </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
  <head>
4
+ <title>Convertisseur Markdown</title>
5
+ <!-- Inclure la biblioth猫que de conversion Markdown, comme showdown.js -->
6
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
  <body>
9
+ <h2>Convertisseur de texte en Markdown</h2>
10
+ <textarea id="inputText" rows="10" cols="50"></textarea>
11
+ <br>
12
+ <button onclick="convertToMarkdown()">Convertir en Markdown</button>
13
+ <div id="markdownOutput"></div>
14
+
15
+ <script>
16
+ function convertToMarkdown() {
17
+ var text = document.getElementById('inputText').value;
18
+ var converter = new showdown.Converter();
19
+ var markdown = converter.makeHtml(text);
20
+ document.getElementById('markdownOutput').innerHTML = markdown;
21
+ }
22
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </body>
24
+ </html>