Hugging Face's logo

Spaces:
ikraamkb
/
qtAnswering
Running

App Files Community
ikraamkb commited on
Commit
c7979e3
·
verified ·
1 Parent(s): de8a037

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +39 -59
templates/index.html CHANGED
@@ -5,79 +5,59 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>AI Question Answering</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
12
  </head>
13
  <body>
14
- <div class="container">
15
- <div class="text-center mb-5">
16
- <h1 class="fw-bold mb-3"><i class="fas fa-brain text-primary me-2"></i> AI Question Answering</h1>
17
- <p class="text-muted fs-5">Posez une question sur un document ou une image</p>
18
  </div>
19
 
20
- <div class="row">
21
- <div class="col-lg-6">
22
- <div class="card">
23
- <div class="card-header">
24
- <i class="fas fa-upload"></i> Charger un document ou une image
25
- </div>
26
- <div class="card-body">
27
- <form id="qaForm">
28
- <div class="mb-4">
29
- <label for="fileInput" class="form-label fw-medium">Sélectionnez un fichier</label>
30
- <input type="file" id="fileInput" name="file" class="form-control" required>
31
- <small class="text-muted mt-1 d-block">Formats supportés: PDF, DOCX, PPTX, JPG, PNG (max 25MB)</small>
32
- </div>
33
- <div class="mb-4">
34
- <label for="question" class="form-label fw-medium">Votre question</label>
35
- <input type="text" id="question" name="question" class="form-control" placeholder="Entrez votre question ici" required>
36
- </div>
37
- <button type="submit" class="btn btn-primary w-100 py-3 fw-medium">
38
- <i class="fas fa-search me-2"></i> Obtenir la réponse
39
- </button>
40
- </form>
41
- </div>
42
  </div>
 
43
  </div>
44
 
45
- <div class="col-lg-6">
46
- <div class="card">
47
- <div class="card-header">
48
- <i class="fas fa-comment-dots"></i> Réponse AI
49
- </div>
50
- <div class="card-body">
51
- <div id="answerContainer" class="p-3 border rounded bg-light text-muted text-center">
52
- La réponse apparaîtra ici
53
- </div>
54
- </div>
55
- </div>
56
  </div>
57
- </div>
 
 
 
 
58
  </div>
59
-
60
  <script>
61
- $(document).ready(function() {
62
- $("#qaForm").submit(function(event) {
63
- event.preventDefault();
64
- let formData = new FormData(this);
 
 
 
 
65
 
66
- $.ajax({
67
- url: '/question-answering',
68
- type: 'POST',
69
- data: formData,
70
- contentType: false,
71
- processData: false,
72
- success: function(response) {
73
- $("#answerContainer").text(response.answer);
74
- },
75
- error: function() {
76
- Swal.fire('Erreur', 'Impossible de traiter la requête', 'error');
77
- }
78
- });
79
  });
80
  });
81
  </script>
 
82
  </body>
83
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>AI Question Answering</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 
8
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 
9
  </head>
10
  <body>
11
+ <div class="container py-5">
12
+ <div class="text-center mb-4">
13
+ <h1 class="fw-bold">AI Question Answering</h1>
14
+ <p class="text-muted">Posez des questions sur des documents et des images</p>
15
  </div>
16
 
17
+ <form id="qaForm">
18
+ <div class="mb-3">
19
+ <label for="fileInput" class="form-label">Sélectionnez un fichier</label>
20
+ <div class="input-group">
21
+ <input type="file" id="fileInput" name="file" class="form-control" required>
22
+ <span class="input-group-text" id="fileIcon"></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </div>
24
+ <small class="text-muted">Formats supportés: PDF, DOCX, PPTX, JPG, PNG</small>
25
  </div>
26
 
27
+ <div class="mb-3">
28
+ <label for="question" class="form-label">Votre question</label>
29
+ <input type="text" id="question" name="question" class="form-control" placeholder="Posez votre question ici" required>
 
 
 
 
 
 
 
 
30
  </div>
31
+
32
+ <button type="submit" class="btn btn-primary w-100">Envoyer</button>
33
+ </form>
34
+
35
+ <div id="response" class="mt-4"></div>
36
  </div>
37
+
38
  <script>
39
+ $(document).ready(function () {
40
+ $("#fileInput").change(function () {
41
+ var file = this.files[0];
42
+ if (!file) return;
43
+
44
+ var ext = file.name.split('.').pop().toLowerCase();
45
+ var isImage = ['jpg', 'jpeg', 'png'].includes(ext);
46
+ var isDoc = ['pdf', 'docx', 'pptx'].includes(ext);
47
 
48
+ if (isImage) {
49
+ $("#fileIcon").html("<i class='fas fa-image'></i>");
50
+ $("#qaForm").attr("action", "https://huggingface.co/spaces/ikraamkb/qtAnswering/question-answering-image");
51
+ } else if (isDoc) {
52
+ $("#fileIcon").html("<i class='fas fa-file-alt'></i>");
53
+ $("#qaForm").attr("action", "https://huggingface.co/spaces/ikraamkb/qtAnswering/question-answering-doc");
54
+ } else {
55
+ alert("Format non supporté");
56
+ $("#fileInput").val("");
57
+ }
 
 
 
58
  });
59
  });
60
  </script>
61
+
62
  </body>
63
  </html>