Hugging Face's logo

Spaces:
ikraamkb
/
qtAnswering
Running

App Files Community
ikraamkb commited on
Commit
81bb8d5
·
verified ·
1 Parent(s): 70781e0

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +85 -45
templates/index.html CHANGED
@@ -1,63 +1,103 @@
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>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>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Translator Pro | Document Translation</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://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pptxgen.min.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
15
+ <style>
16
+ .result-container {
17
+ display: none;
18
+ }
19
+ </style>
20
  </head>
21
  <body>
22
+ <div class="container">
23
+ <div class="text-center mb-5">
24
+ <h1 class="fw-bold mb-3"><i class="fas fa-language text-primary me-2"></i> AI Translator Pro</h1>
25
+ <p class="text-muted fs-5">AI-powered document translation with format preservation</p>
26
  </div>
27
+
28
+ <div class="row">
29
+ <div class="col-lg-6">
30
+ <div class="card">
31
+ <div class="card-header">
32
+ <i class="fas fa-upload"></i> Source Document
33
+ </div>
34
+ <div class="card-body">
35
+ <form id="uploadForm" method="POST" enctype="multipart/form-data">
36
+ <div class="mb-4">
37
+ <label for="fileInput" class="form-label fw-medium mb-2">Select a File</label>
38
+ <input type="file" id="fileInput" name="file" class="form-control form-control-lg" required>
39
+ <div class="progress-container mt-3">
40
+ <div class="progress-bar" id="uploadProgress"></div>
41
+ </div>
42
+ <small class="text-muted mt-1 d-block">Supported formats: PDF, DOCX, PPTX, XLSX, TXT (max 25MB)</small>
43
+ </div>
44
+
45
+ <div class="mb-4">
46
+ <label for="question" class="form-label">Ask a Question</label>
47
+ <input type="text" id="question" name="question" class="form-control" placeholder="What is AI?" required>
48
+ </div>
49
+
50
+ <button type="submit" class="btn btn-primary w-100 py-3 fw-medium">
51
+ <i class="fas fa-robot me-2"></i> Ask Question
52
+ </button>
53
+ </form>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="card mt-4 result-container" id="resultCard">
58
+ <div class="card-header">
59
+ <i class="fas fa-info-circle"></i> Answer
60
+ </div>
61
+ <div class="card-body">
62
+ <div id="resultText">
63
+ <div class="empty-state">
64
+ <h5 class="mb-1">Translated Answer</h5>
65
+ <p class="small" id="answer"></p>
66
+ </div>
67
+ </div>
68
+ </div>
69
  </div>
 
 
 
 
 
 
70
  </div>
71
+ </div>
 
 
 
 
72
  </div>
73
+
74
  <script>
75
+ $(document).ready(function() {
76
+ $('#uploadForm').on('submit', function(e) {
77
+ e.preventDefault();
78
+
79
+ let formData = new FormData(this);
80
+ let question = $('#question').val();
81
+
82
+ // Handle the form submission for document-based question answering
83
+ $.ajax({
84
+ url: "/qa-docs",
85
+ type: "POST",
86
+ data: formData,
87
+ contentType: false,
88
+ processData: false,
89
+ success: function(response) {
90
+ if (response.answer) {
91
+ $('#answer').text(response.answer);
92
+ $('#resultCard').removeClass('result-container').show();
93
+ }
94
+ },
95
+ error: function(error) {
96
+ alert("Error occurred: " + error);
97
+ }
98
+ });
99
  });
100
  });
101
  </script>
 
102
  </body>
103
  </html>