Hugging Face's logo

Spaces:
ikraamkb
/
qtAnswering
Running

App Files Community
ikraamkb commited on
Commit
2e63e48
·
verified ·
1 Parent(s): 7a6dca4

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +36 -88
templates/index.html CHANGED
@@ -3,101 +3,49 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Question Answering | Ask Questions on Documents and Images</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 
 
 
 
 
 
8
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 
 
 
 
 
9
  </head>
10
  <body>
11
  <div class="container">
12
+ <h1 class="text-center my-5">AI Question Answering</h1>
13
+
14
+ <form action="/question-answering-doc" method="POST" enctype="multipart/form-data">
15
+ <div class="mb-3">
16
+ <label for="file" class="form-label">Choose Document (PDF, DOCX, PPTX)</label>
17
+ <input type="file" class="form-control" name="file" required>
18
+ </div>
19
+ <div class="mb-3">
20
+ <label for="question" class="form-label">Enter Your Question</label>
21
+ <input type="text" class="form-control" name="question" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  </div>
23
+ <button type="submit" class="btn btn-primary">Submit Question</button>
24
+ </form>
25
+
26
+ <form action="/question-answering-image" method="POST" enctype="multipart/form-data" class="mt-5">
27
+ <div class="mb-3">
28
+ <label for="image" class="form-label">Choose Image (JPG, PNG)</label>
29
+ <input type="file" class="form-control" name="image_file" required>
30
+ </div>
31
+ <div class="mb-3">
32
+ <label for="image-question" class="form-label">Enter Your Question</label>
33
+ <input type="text" class="form-control" name="question" required>
34
+ </div>
35
+ <button type="submit" class="btn btn-primary">Submit Question</button>
36
+ </form>
37
+
38
+ <div class="mt-4">
39
+ {% if answer %}
40
+ <h3>Answer:</h3>
41
+ <p>{{ answer }}</p>
42
+ {% endif %}
43
+
44
+ {% if image_text %}
45
+ <h3>Image Text (OCR Result):</h3>
46
+ <p>{{ image_text }}</p>
47
+ {% endif %}
48
  </div>
49
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  </body>
51
  </html>