Hugging Face's logo

Spaces:
benkada
/
aiWeb
Running

App Files Community
benkada commited on
Commit
89d20c1
·
verified ·
1 Parent(s): 276fb54

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +162 -171
index.html CHANGED
@@ -1,171 +1,162 @@
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 App</title>
7
- <style>
8
- :root {
9
- --primary-color: #4A90E2;
10
- --secondary-color: #f4f6f8;
11
- --text-color: #333;
12
- --btn-color: #4A90E2;
13
- --btn-hover: #357ABD;
14
- --card-bg: #fff;
15
- --card-shadow: rgba(0, 0, 0, 0.1);
16
- --border-radius: 8px;
17
- --transition: 0.3s;
18
- --max-width: 900px;
19
- }
20
- * {
21
- box-sizing: border-box;
22
- }
23
- body {
24
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
- color: var(--text-color);
26
- background: var(--secondary-color);
27
- margin: 0;
28
- padding: 20px;
29
- display: flex;
30
- justify-content: center;
31
- }
32
- .container {
33
- width: 100%;
34
- max-width: var(--max-width);
35
- }
36
- h1 {
37
- text-align: center;
38
- color: var(--primary-color);
39
- margin-bottom: 40px;
40
- }
41
- .section {
42
- background: var(--card-bg);
43
- padding: 20px;
44
- margin-bottom: 30px;
45
- border-radius: var(--border-radius);
46
- box-shadow: 0 2px 8px var(--card-shadow);
47
- transition: transform var(--transition);
48
- }
49
- .section:hover {
50
- transform: translateY(-3px);
51
- }
52
- h2 {
53
- margin-top: 0;
54
- color: var(--primary-color);
55
- border-bottom: 2px solid var(--secondary-color);
56
- padding-bottom: 5px;
57
- }
58
- label {
59
- display: block;
60
- margin-top: 15px;
61
- font-weight: bold;
62
- }
63
- input[type="file"], input[type="text"], button, textarea {
64
- width: 100%;
65
- padding: 10px;
66
- margin-top: 8px;
67
- border: 1px solid #ccc;
68
- border-radius: var(--border-radius);
69
- font-size: 1rem;
70
- }
71
- button {
72
- background: var(--btn-color);
73
- color: #fff;
74
- border: none;
75
- margin-top: 20px;
76
- padding: 12px;
77
- font-size: 1rem;
78
- border-radius: var(--border-radius);
79
- cursor: pointer;
80
- transition: background var(--transition);
81
- }
82
- button:hover {
83
- background: var(--btn-hover);
84
- }
85
- .results {
86
- margin-top: 20px;
87
- padding: 15px;
88
- background: var(--secondary-color);
89
- border-radius: var(--border-radius);
90
- border: 1px solid #ddd;
91
- min-height: 60px;
92
- }
93
- @media (min-width: 768px) {
94
- .grid {
95
- display: flex;
96
- gap: 20px;
97
- }
98
- .grid > div {
99
- flex: 1;
100
- }
101
- }
102
- </style>
103
- </head>
104
- <body>
105
- <div class="container">
106
- <h1>AI-Powered Web Application</h1>
107
-
108
- <!-- Function 1 & 2 in grid on larger screens -->
109
- <div class="grid">
110
- <!-- Function 1: Document & Image Analysis -->
111
- <div class="section" id="analysis-section">
112
- <h2>1. Document & Image Analysis</h2>
113
- <!-- Text Summarization -->
114
- <label for="doc-input-summarize">Upload Document (PDF, DOCX, PPTX, XLSX):</label>
115
- <input type="file" id="doc-input-summarize" accept=".pdf,.docx,.pptx,.xlsx" />
116
- <button id="summarize-btn">Summarize Document</button>
117
- <div class="results" id="summary-result">Your summary will appear here.</div>
118
-
119
- <!-- Image Captioning -->
120
- <label for="img-input-caption">Upload Image (JPG, PNG):</label>
121
- <input type="file" id="img-input-caption" accept="image/*" />
122
- <button id="caption-btn">Generate Caption</button>
123
- <div class="results" id="caption-result">Image caption will appear here.</div>
124
- </div>
125
-
126
- <!-- Function 2: Intelligent Question Answering -->
127
- <div class="section" id="qa-section">
128
- <h2>2. Intelligent Question Answering</h2>
129
- <label for="file-input-qa">Upload Document or Image:</label>
130
- <input type="file" id="file-input-qa" accept=".pdf,.docx,.pptx,.xlsx,image/*" />
131
- <label for="question-input">Enter Your Question:</label>
132
- <input type="text" id="question-input" placeholder="Type your question here..." />
133
- <button id="qa-btn">Ask Question</button>
134
- <div class="results" id="qa-result">Answer will appear here.</div>
135
- </div>
136
- </div>
137
-
138
- <script>
139
- async function sendData(url, fileInput, extraData, resultContainer) {
140
- const file = fileInput.files[0];
141
- if (!file) {
142
- resultContainer.textContent = 'Please select a file.';
143
- return;
144
- }
145
- const formData = new FormData();
146
- formData.append('file', file);
147
- if (extraData) Object.keys(extraData).forEach(key => formData.append(key, extraData[key]));
148
- resultContainer.textContent = 'Processing...';
149
- try {
150
- const res = await fetch(url, { method: 'POST', body: formData });
151
- const data = await res.json();
152
- resultContainer.textContent = data.result || JSON.stringify(data);
153
- } catch (err) {
154
- resultContainer.textContent = 'Error: ' + err.message;
155
- }
156
- }
157
- document.getElementById('summarize-btn').addEventListener('click', () => {
158
- sendData('/api/summarize', document.getElementById('doc-input-summarize'), null, document.getElementById('summary-result'));
159
- });
160
- document.getElementById('caption-btn').addEventListener('click', () => {
161
- sendData('/api/caption', document.getElementById('img-input-caption'), null, document.getElementById('caption-result'));
162
- });
163
- document.getElementById('qa-btn').addEventListener('click', () => {
164
- const q = document.getElementById('question-input').value.trim();
165
- if (!q) { document.getElementById('qa-result').textContent = 'Please enter a question.'; return; }
166
- sendData('/api/qa', document.getElementById('file-input-qa'), { question: q }, document.getElementById('qa-result'));
167
- });
168
- </script>
169
- </div>
170
- </body>
171
- </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>Smart Analyzer</title>
7
+ <style>
8
+ :root {
9
+ --primary-color: #4A90E2;
10
+ --secondary-color: #f4f6f8;
11
+ --text-color: #333;
12
+ --btn-color: #4A90E2;
13
+ --btn-hover: #357ABD;
14
+ --card-bg: #fff;
15
+ --card-shadow: rgba(0, 0, 0, 0.1);
16
+ --border-radius: 8px;
17
+ --transition: 0.3s;
18
+ --max-width: 900px;
19
+ }
20
+ * { box-sizing: border-box; }
21
+ body {
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ color: var(--text-color);
24
+ background: var(--secondary-color);
25
+ margin: 0;
26
+ padding: 20px;
27
+ display: flex;
28
+ justify-content: center;
29
+ }
30
+ .container {
31
+ width: 100%;
32
+ max-width: var(--max-width);
33
+ }
34
+ h1 {
35
+ text-align: center;
36
+ color: var(--primary-color);
37
+ margin-bottom: 40px;
38
+ }
39
+ .section {
40
+ background: var(--card-bg);
41
+ padding: 20px;
42
+ margin-bottom: 30px;
43
+ border-radius: var(--border-radius);
44
+ box-shadow: 0 2px 8px var(--card-shadow);
45
+ transition: transform var(--transition);
46
+ }
47
+ .section:hover { transform: translateY(-3px); }
48
+ h2 {
49
+ margin-top: 0;
50
+ color: var(--primary-color);
51
+ border-bottom: 2px solid var(--secondary-color);
52
+ padding-bottom: 5px;
53
+ }
54
+ label {
55
+ display: block;
56
+ margin-top: 15px;
57
+ font-weight: bold;
58
+ }
59
+ input[type="file"], input[type="text"], button, textarea {
60
+ width: 100%;
61
+ padding: 10px;
62
+ margin-top: 8px;
63
+ border: 1px solid #ccc;
64
+ border-radius: var(--border-radius);
65
+ font-size: 1rem;
66
+ }
67
+ button {
68
+ background: var(--btn-color);
69
+ color: #fff;
70
+ border: none;
71
+ margin-top: 20px;
72
+ padding: 12px;
73
+ font-size: 1rem;
74
+ border-radius: var(--border-radius);
75
+ cursor: pointer;
76
+ transition: background var(--transition);
77
+ }
78
+ button:hover { background: var(--btn-hover); }
79
+ .results {
80
+ margin-top: 20px;
81
+ padding: 15px;
82
+ background: var(--secondary-color);
83
+ border-radius: var(--border-radius);
84
+ border: 1px solid #ddd;
85
+ min-height: 60px;
86
+ }
87
+ @media (min-width: 768px) {
88
+ .grid { display: flex; gap: 20px; }
89
+ .grid > div { flex: 1; }
90
+ }
91
+ </style>
92
+ </head>
93
+ <body>
94
+ <div class="container">
95
+ <h1>Smart Analyzer</h1>
96
+ <div class="grid">
97
+ <div class="section">
98
+ <h2>Summarize a Document</h2>
99
+ <input type="file" id="summary-file" accept=".pdf,.docx,.txt">
100
+ <button id="summarize-btn">Summarize</button>
101
+ <div id="summary-result" class="results">Your summary will appear here.</div>
102
+ </div>
103
+ <div class="section">
104
+ <h2>Ask a Question</h2>
105
+ <input type="file" id="qa-file" accept=".pdf,.docx,.txt,image/*">
106
+ <input type="text" id="qa-question" placeholder="Type your question here...">
107
+ <button id="qa-btn">Ask</button>
108
+ <div id="qa-result" class="results">Answer will appear here.</div>
109
+ </div>
110
+ <div class="section">
111
+ <h2>Interpret an Image</h2>
112
+ <input type="file" id="image-file" accept="image/*">
113
+ <button id="image-btn">Describe</button>
114
+ <div id="image-result" class="results">Image description will appear here.</div>
115
+ </div>
116
+ </div>
117
+
118
+ <script>
119
+ async function sendData(url, fileInputId, extraData, resultId) {
120
+ const fileInput = document.getElementById(fileInputId);
121
+ const file = fileInput.files[0];
122
+ if (!file) {
123
+ document.getElementById(resultId).textContent = 'Please select a file.';
124
+ return;
125
+ }
126
+ const formData = new FormData();
127
+ formData.append(fileInputId.includes('image') ? 'image' : 'file', file);
128
+ if (extraData) {
129
+ for (const [key, value] of Object.entries(extraData)) {
130
+ formData.append(key, value);
131
+ }
132
+ }
133
+ document.getElementById(resultId).textContent = 'Processing...';
134
+ try {
135
+ const res = await fetch(url, { method: 'POST', body: formData });
136
+ const data = await res.json();
137
+ document.getElementById(resultId).textContent = data.summary || data.answer || data.description || data.error || JSON.stringify(data);
138
+ } catch (err) {
139
+ document.getElementById(resultId).textContent = 'Error: ' + err.message;
140
+ }
141
+ }
142
+
143
+ document.getElementById('summarize-btn').addEventListener('click', () => {
144
+ sendData('/analyze', 'summary-file', null, 'summary-result');
145
+ });
146
+
147
+ document.getElementById('qa-btn').addEventListener('click', () => {
148
+ const question = document.getElementById('qa-question').value.trim();
149
+ if (!question) {
150
+ document.getElementById('qa-result').textContent = 'Please enter a question.';
151
+ return;
152
+ }
153
+ sendData('/ask', 'qa-file', { question }, 'qa-result');
154
+ });
155
+
156
+ document.getElementById('image-btn').addEventListener('click', () => {
157
+ sendData('/interpret_image', 'image-file', null, 'image-result');
158
+ });
159
+ </script>
160
+ </div>
161
+ </body>
162
+ </html>