Hugging Face's logo

Spaces:
Hadiil
/
google-fastapi
Runtime error

App Files Community
Hadiil commited on
Commit
e98915a
·
verified ·
1 Parent(s): 2342c67

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +115 -102
static/index.html CHANGED
@@ -1,103 +1,116 @@
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-Powered Web Application</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- margin: 20px;
11
- }
12
- .container {
13
- max-width: 600px;
14
- margin: 0 auto;
15
- }
16
- h1 {
17
- text-align: center;
18
- }
19
- form {
20
- margin-bottom: 20px;
21
- }
22
- input[type="file"], input[type="text"], button {
23
- display: block;
24
- margin: 10px 0;
25
- padding: 10px;
26
- width: 100%;
27
- }
28
- .result {
29
- margin-top: 20px;
30
- padding: 10px;
31
- background-color: #f4f4f4;
32
- border: 1px solid #ddd;
33
- }
34
- </style>
35
- </head>
36
- <body>
37
- <div class="container">
38
- <h1>AI-Powered Web Application</h1>
39
-
40
- <!-- Document Summarization -->
41
- <h2>Document Summarization</h2>
42
- <form id="summarizeForm">
43
- <input type="file" id="document" name="document" accept=".pdf,.docx">
44
- <button type="submit">Summarize</button>
45
- </form>
46
- <div class="result" id="summaryResult"></div>
47
-
48
- <!-- Image Captioning -->
49
- <h2>Image Captioning</h2>
50
- <form id="captionForm">
51
- <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png">
52
- <button type="submit">Generate Caption</button>
53
- </form>
54
- <div class="result" id="captionResult"></div>
55
-
56
- <!-- Text-Based Question Answering -->
57
- <h2>Text-Based Question Answering</h2>
58
- <form id="qaForm">
59
- <input type="file" id="qaDocument" name="document" accept=".pdf,.docx">
60
- <input type="text" id="question" name="question" placeholder="Enter your question">
61
- <button type="submit">Ask</button>
62
- </form>
63
- <div class="result" id="qaResult"></div>
64
-
65
- <!-- Visual Question Answering -->
66
- <h2>Visual Question Answering</h2>
67
- <form id="vqaForm">
68
- <input type="file" id="vqaImage" name="image" accept=".jpg,.jpeg,.png">
69
- <input type="text" id="vqaQuestion" name="question" placeholder="Enter your question">
70
- <button type="submit">Ask</button>
71
- </form>
72
- <div class="result" id="vqaResult"></div>
73
- </div>
74
-
75
- <script>
76
- // Function to handle form submissions
77
- async function handleFormSubmit(event, endpoint, resultId) {
78
- event.preventDefault();
79
- const formData = new FormData();
80
- const fileInput = event.target.querySelector('input[type="file"]');
81
- const textInput = event.target.querySelector('input[type="text"]');
82
-
83
- formData.append("file", fileInput.files[0]);
84
- if (textInput) {
85
- formData.append("question", textInput.value);
86
- }
87
-
88
- const response = await fetch(endpoint, {
89
- method: "POST",
90
- body: formData
91
- });
92
- const result = await response.json();
93
- document.getElementById(resultId).innerText = JSON.stringify(result, null, 2);
94
- }
95
-
96
- // Attach event listeners to forms
97
- document.getElementById("summarizeForm").onsubmit = (e) => handleFormSubmit(e, "/summarize", "summaryResult");
98
- document.getElementById("captionForm").onsubmit = (e) => handleFormSubmit(e, "/caption", "captionResult");
99
- document.getElementById("qaForm").onsubmit = (e) => handleFormSubmit(e, "/answer", "qaResult");
100
- document.getElementById("vqaForm").onsubmit = (e) => handleFormSubmit(e, "/vqa", "vqaResult");
101
- </script>
102
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </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-Powered Web Application</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 20px;
11
+ }
12
+ .container {
13
+ max-width: 600px;
14
+ margin: 0 auto;
15
+ }
16
+ h1 {
17
+ text-align: center;
18
+ }
19
+ form {
20
+ margin-bottom: 20px;
21
+ }
22
+ input[type="file"], input[type="text"], textarea, button {
23
+ display: block;
24
+ margin: 10px 0;
25
+ padding: 10px;
26
+ width: 100%;
27
+ }
28
+ .result {
29
+ margin-top: 20px;
30
+ padding: 10px;
31
+ background-color: #f4f4f4;
32
+ border: 1px solid #ddd;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <div class="container">
38
+ <h1>AI-Powered Web Application</h1>
39
+
40
+ <!-- Document Summarization -->
41
+ <h2>Document Summarization</h2>
42
+ <form id="summarizeForm">
43
+ <input type="file" id="document" name="document" accept=".pdf,.docx">
44
+ <p>Or</p>
45
+ <textarea id="manualText" name="text" placeholder="Enter text manually"></textarea>
46
+ <button type="submit">Summarize</button>
47
+ </form>
48
+ <div class="result" id="summaryResult"></div>
49
+
50
+ <!-- Text-Based Question Answering -->
51
+ <h2>Text-Based Question Answering</h2>
52
+ <form id="qaForm">
53
+ <input type="file" id="qaDocument" name="document" accept=".pdf,.docx">
54
+ <p>Or</p>
55
+ <textarea id="qaText" name="text" placeholder="Enter text manually"></textarea>
56
+ <input type="text" id="question" name="question" placeholder="Enter your question">
57
+ <button type="submit">Ask</button>
58
+ </form>
59
+ <div class="result" id="qaResult"></div>
60
+
61
+ <!-- Image Captioning -->
62
+ <h2>Image Captioning</h2>
63
+ <form id="captionForm">
64
+ <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png">
65
+ <button type="submit">Generate Caption</button>
66
+ </form>
67
+ <div class="result" id="captionResult"></div>
68
+
69
+ <!-- Visual Question Answering -->
70
+ <h2>Visual Question Answering</h2>
71
+ <form id="vqaForm">
72
+ <input type="file" id="vqaImage" name="image" accept=".jpg,.jpeg,.png">
73
+ <input type="text" id="vqaQuestion" name="question" placeholder="Enter your question">
74
+ <button type="submit">Ask</button>
75
+ </form>
76
+ <div class="result" id="vqaResult"></div>
77
+ </div>
78
+
79
+ <script>
80
+ // Function to handle form submissions
81
+ async function handleFormSubmit(event, endpoint, resultId) {
82
+ event.preventDefault();
83
+ const formData = new FormData();
84
+ const fileInput = event.target.querySelector('input[type="file"]');
85
+ const textInput = event.target.querySelector('textarea');
86
+ const questionInput = event.target.querySelector('input[type="text"]');
87
+
88
+ if (fileInput.files[0]) {
89
+ formData.append("file", fileInput.files[0]);
90
+ } else if (textInput && textInput.value) {
91
+ formData.append("text", textInput.value);
92
+ } else {
93
+ alert("Please upload a file or enter text manually.");
94
+ return;
95
+ }
96
+
97
+ if (questionInput) {
98
+ formData.append("question", questionInput.value);
99
+ }
100
+
101
+ const response = await fetch(endpoint, {
102
+ method: "POST",
103
+ body: formData
104
+ });
105
+ const result = await response.json();
106
+ document.getElementById(resultId).innerText = JSON.stringify(result, null, 2);
107
+ }
108
+
109
+ // Attach event listeners to forms
110
+ document.getElementById("summarizeForm").onsubmit = (e) => handleFormSubmit(e, "/summarize", "summaryResult");
111
+ document.getElementById("qaForm").onsubmit = (e) => handleFormSubmit(e, "/answer", "qaResult");
112
+ document.getElementById("captionForm").onsubmit = (e) => handleFormSubmit(e, "/caption", "captionResult");
113
+ document.getElementById("vqaForm").onsubmit = (e) => handleFormSubmit(e, "/vqa", "vqaResult");
114
+ </script>
115
+ </body>
116
  </html>