Hugging Face's logo

Spaces:
ikraamkb
/
qtAnswering
Running

App Files Community
ikraamkb commited on
Commit
a30f0d6
·
verified ·
1 Parent(s): 03b1758

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +44 -56
templates/index.html CHANGED
@@ -4,63 +4,51 @@
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 rel="stylesheet" href="{{ url_for('static', path='/app.css') }}">
8
- <script>
9
- async function askQuestion(formId, resultId, endpoint) {
10
- const form = document.getElementById(formId);
11
- const formData = new FormData(form);
12
- const resultDiv = document.getElementById(resultId);
13
-
14
- resultDiv.innerHTML = "Processing...";
15
-
16
- try {
17
- const response = await fetch(endpoint, {
18
- method: "POST",
19
- body: formData
20
- });
21
-
22
- const data = await response.json();
23
- if (data.error) {
24
- resultDiv.innerHTML = "<b>Error:</b> " + data.error;
25
- } else {
26
- resultDiv.innerHTML = `<b>Answer:</b> ${data.answer}`;
27
- if (data.image_text) {
28
- resultDiv.innerHTML += `<br><b>Extracted Text:</b> ${data.image_text}`;
29
- }
30
- }
31
- } catch (error) {
32
- resultDiv.innerHTML = "<b>Error:</b> Failed to process.";
33
- }
34
  }
35
- </script>
 
 
 
36
  </head>
37
  <body>
38
- <h1>AI-Powered Question Answering</h1>
39
-
40
- <h2>Ask a Question on a Document</h2>
41
- <form id="docForm" onsubmit="event.preventDefault(); askQuestion('docForm', 'docResult', '/question-answering-doc');">
42
- <label for="docQuestion">Enter your question:</label>
43
- <input type="text" id="docQuestion" name="question" required>
44
- <br><br>
45
- <label for="docFile">Upload a document (PDF, DOCX, PPTX):</label>
46
- <input type="file" id="docFile" name="file" accept=".pdf,.docx,.pptx" required>
47
- <br><br>
48
- <button type="submit">Ask</button>
49
- </form>
50
- <p id="docResult"></p>
51
-
52
- <hr>
53
-
54
- <h2>Ask a Question on an Image</h2>
55
- <form id="imageForm" onsubmit="event.preventDefault(); askQuestion('imageForm', 'imageResult', '/question-answering-image');">
56
- <label for="imageQuestion">Enter your question:</label>
57
- <input type="text" id="imageQuestion" name="question" required>
58
- <br><br>
59
- <label for="imageFile">Upload an image:</label>
60
- <input type="file" id="imageFile" name="image_file" accept="image/*" required>
61
- <br><br>
62
- <button type="submit">Ask</button>
63
- </form>
64
- <p id="imageResult"></p>
65
  </body>
66
- </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>AI Question Answering</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ background-color: #f4f4f4;
15
+ }
16
+ .container {
17
+ background: white;
18
+ padding: 20px;
19
+ border-radius: 10px;
20
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
21
+ width: 400px;
22
+ }
23
+ input, button {
24
+ width: 100%;
25
+ margin-top: 10px;
26
+ padding: 10px;
27
+ border: 1px solid #ccc;
28
+ border-radius: 5px;
29
+ }
30
+ button {
31
+ background-color: #007BFF;
32
+ color: white;
33
+ cursor: pointer;
34
  }
35
+ button:hover {
36
+ background-color: #0056b3;
37
+ }
38
+ </style>
39
  </head>
40
  <body>
41
+ <div class="container">
42
+ <h2>AI-Powered Q&A</h2>
43
+ <form action="/process" method="post" enctype="multipart/form-data">
44
+ <label for="file">Upload Document or Image:</label>
45
+ <input type="file" name="file" id="file" accept=".pdf,.docx,.pptx,.png,.jpg,.jpeg">
46
+
47
+ <label for="question">Enter Your Question:</label>
48
+ <input type="text" name="question" id="question" placeholder="Type your question here...">
49
+
50
+ <button type="submit">Ask AI</button>
51
+ </form>
52
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  </body>
54
+ </html>