Hugging Face's logo

Spaces:
Hadiil
/
Web-ai-app
Sleeping

App Files Community
Hadiil commited on
Commit
7b718ca
·
verified ·
1 Parent(s): 5b21e80

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +6 -122
static/index.html CHANGED
@@ -3,9 +3,11 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
6
  <title>VION IA Assistant</title>
7
  <link rel="stylesheet" href="/static/styles.css">
8
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 
9
  </head>
10
  <body class="bg-black text-white font-sans">
11
  <!-- Starry Background -->
@@ -71,7 +73,7 @@
71
  </div>
72
  <form id="summarize-form" class="tab-content" data-tab="summarize-text">
73
  <div class="input-bar">
74
- <input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Enter text to summarize..." required>
75
  <button type="submit" class="cosmic-btn ml-2">Send</button>
76
  </div>
77
  </form>
@@ -83,6 +85,7 @@
83
  <button type="submit" class="cosmic-btn mt-4">Send</button>
84
  </form>
85
  <div id="summarize-response" class="response-card hidden"></div>
 
86
  </div>
87
  </div>
88
  <!-- Translate Modal -->
@@ -96,7 +99,7 @@
96
  </div>
97
  <form id="translate-text-form" class="tab-content" data-tab="translate-text">
98
  <div class="input-bar">
99
- <input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Enter text to translate..." required>
100
  <button type="submit" class="cosmic-btn ml-2">Send</button>
101
  </div>
102
  <select class="w-full p-3 mt-3 bg-gray-800 bg-opacity-50 rounded" name="language">
@@ -108,123 +111,4 @@
108
  <option value="russian">Russian</option>
109
  <option value="chinese">Chinese</option>
110
  <option value="japanese">Japanese</option>
111
- <option value="arabic">Arabic</option>
112
- <option value="hindi">Hindi</option>
113
- <option value="portuguese">Portuguese</option>
114
- <option value="korean">Korean</option>
115
- </select>
116
- </form>
117
- <form id="translate-file-form" class="tab-content hidden" data-tab="translate-file">
118
- <div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
119
- <p>Drop File Here or Click to Choose</p>
120
- <input type="file" accept=".pdf,.docx,.txt,.rtf" class="hidden">
121
- </div>
122
- <select class="w-full p-3 mt-3 bg-gray-800 bg-opacity-50 rounded" name="language">
123
- <option value="english">English</option>
124
- <option value="french">French</option>
125
- <option value="spanish">Spanish</option>
126
- <option value="german">German</option>
127
- <option value="italian">Italian</option>
128
- <option value="russian">Russian</option>
129
- <option value="chinese">Chinese</option>
130
- <option value="japanese">Japanese</option>
131
- <option value="arabic">Arabic</option>
132
- <option value="hindi">Hindi</option>
133
- <option value="portuguese">Portuguese</option>
134
- <option value="korean">Korean</option>
135
- </select>
136
- <button type="submit" class="cosmic-btn mt-4">Send</button>
137
- </form>
138
- <div id="translate-response" class="response-card hidden"></div>
139
- </div>
140
- </div>
141
- <!-- File QA Modal -->
142
- <div id="file-qa-modal" class="modal hidden">
143
- <div class="modal-content">
144
- <span class="close-modal">×</span>
145
- <h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Ask About File</h2>
146
- <form id="file-qa-form">
147
- <div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
148
- <p>Drop File Here or Click to Choose</p>
149
- <input type="file" accept=".pdf,.docx,.txt,.rtf" class="hidden">
150
- </div>
151
- <div class="input-bar mt-3">
152
- <input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Ask a question about the file..." required>
153
- <button type="submit" class="cosmic-btn ml-2">Send</button>
154
- </div>
155
- </form>
156
- <div id="file-qa-response" class="response-card hidden"></div>
157
- </div>
158
- </div>
159
- <!-- Image Caption Modal -->
160
- <div id="image-caption-modal" class="modal hidden">
161
- <div class="modal-content">
162
- <span class="close-modal">×</span>
163
- <h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Image Caption</h2>
164
- <form id="image-caption-form">
165
- <div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
166
- <p>Drop Image Here or Click to Choose</p>
167
- <input type="file" accept="image/*" class="hidden">
168
- </div>
169
- <button type="submit" class="cosmic-btn mt-4">Send</button>
170
- </form>
171
- <div id="image-caption-response" class="response-card hidden"></div>
172
- </div>
173
- </div>
174
- <!-- Visual QA Modal -->
175
- <div id="visual-qa-modal" class="modal hidden">
176
- <div class="modal-content">
177
- <span class="close-modal">×</span>
178
- <h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Image Questions</h2>
179
- <form id="visual-qa-form">
180
- <div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
181
- <p>Drop Image Here or Click to Choose</p>
182
- <input type="file" accept="image/*" class="hidden">
183
- </div>
184
- <div class="input-bar mt-3">
185
- <input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Ask a question about the image..." required>
186
- <button type="submit" class="cosmic-btn ml-2">Send</button>
187
- </div>
188
- </form>
189
- <div id="visual-qa-response" class="response-card hidden"></div>
190
- </div>
191
- </div>
192
- <!-- Visualize Modal -->
193
- <div id="visualize-modal" class="modal hidden">
194
- <div class="modal-content">
195
- <span class="close-modal">×</span>
196
- <h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Visualize Data</h2>
197
- <form id="visualize-form">
198
- <div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
199
- <p>Drop File Here or Click to Choose</p>
200
- <input type="file" accept=".csv,.xlsx,.xls" class="hidden">
201
- </div>
202
- <select class="w-full p-3 mt-3 bg-gray-800 bg-opacity-50 rounded" name="visualization-type">
203
- <option value="scatter">Scatter Plot</option>
204
- <option value="bar">Bar Chart</option>
205
- <option value="histogram">Histogram</option>
206
- <option value="dashboard">Dashboard</option>
207
- </select>
208
- <button type="submit" class="cosmic-btn mt-4">Send</button>
209
- </form>
210
- <div id="visualize-response" class="response-card hidden"></div>
211
- </div>
212
- </div>
213
- <!-- Chatbot Modal -->
214
- <div id="chatbot-modal" class="modal hidden">
215
- <div class="modal-content chatbot-modal">
216
- <span class="close-modal">×</span>
217
- <h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Gemini Chatbot</h2>
218
- <div id="chatbot-conversation" class="chatbot-conversation"></div>
219
- <form id="chatbot-form">
220
- <div class="input-bar">
221
- <input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Type your message..." required>
222
- <button type="submit" class="cosmic-btn ml-2">Send</button>
223
- </div>
224
- </form>
225
- </div>
226
- </div>
227
-
228
- <script src="/static/scripts.js"></script>
229
- </body>
230
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="VION IA Assistant: AI-powered summarization, translation, file Q&A, image captioning, and data visualization.">
7
  <title>VION IA Assistant</title>
8
  <link rel="stylesheet" href="/static/styles.css">
9
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
10
+ <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
11
  </head>
12
  <body class="bg-black text-white font-sans">
13
  <!-- Starry Background -->
 
73
  </div>
74
  <form id="summarize-form" class="tab-content" data-tab="summarize-text">
75
  <div class="input-bar">
76
+ <textarea class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Enter text to summarize..." rows="5" required></textarea>
77
  <button type="submit" class="cosmic-btn ml-2">Send</button>
78
  </div>
79
  </form>
 
85
  <button type="submit" class="cosmic-btn mt-4">Send</button>
86
  </form>
87
  <div id="summarize-response" class="response-card hidden"></div>
88
+ <div class="loading-spinner hidden"></div>
89
  </div>
90
  </div>
91
  <!-- Translate Modal -->
 
99
  </div>
100
  <form id="translate-text-form" class="tab-content" data-tab="translate-text">
101
  <div class="input-bar">
102
+ <textarea class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Enter text to translate..." rows="5" required></textarea>
103
  <button type="submit" class="cosmic-btn ml-2">Send</button>
104
  </div>
105
  <select class="w-full p-3 mt-3 bg-gray-800 bg-opacity-50 rounded" name="language">
 
111
  <option value="russian">Russian</option>
112
  <option value="chinese">Chinese</option>
113
  <option value="japanese">Japanese</option>
114
+ <option value