Hugging Face's logo

Spaces:
Soltane777
/
textgeneration
Sleeping

App Files Community
Soltane777 commited on
Commit
200c447
·
verified ·
1 Parent(s): c3956b9

Update frontend/index.html

Browse files
Files changed (1) hide show
  1. frontend/index.html +186 -25
frontend/index.html CHANGED
@@ -1,41 +1,202 @@
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 Web App</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  </head>
9
- <body class="bg-gray-100 font-sans">
10
- <div class="max-w-4xl mx-auto mt-10 p-6 bg-white rounded-xl shadow-lg">
11
- <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">AI Web App</h1>
12
-
13
- <div class="space-y-6">
14
- <div>
15
- <h3 class="text-xl font-semibold text-gray-700">Upload Document</h3>
16
- <input type="file" id="fileInput" class="mt-2 p-2 w-full border rounded-md">
17
- <div class="flex space-x-2 mt-3">
18
- <button onclick="uploadFile('extract_text')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Extract Text</button>
19
- <button onclick="uploadFile('image_caption')" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">Analyze Image</button>
20
- </div>
21
  </div>
22
 
23
- <div>
24
- <h3 class="text-xl font-semibold text-gray-700">Enter Text</h3>
25
- <textarea id="textInput" class="w-full p-2 border rounded-md" rows="4"></textarea>
26
- <div class="flex space-x-2 mt-3">
27
- <button onclick="processText('summarize')" class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600">Summarize</button>
28
- <button onclick="processText('translate')" class="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600">Translate</button>
29
- </div>
 
 
 
 
 
 
 
30
  </div>
31
 
32
- <div class="bg-gray-200 p-4 rounded-md">
33
- <h3 class="text-lg font-semibold text-gray-700">Output</h3>
34
- <pre id="output" class="mt-2 p-3 bg-white border rounded-md h-40 overflow-auto"></pre>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  </div>
36
  </div>
 
 
 
 
37
  </div>
38
 
39
- <script src="/static/script.js"></script>
40
  </body>
41
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en" dir="ltr">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Web Application</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="style.css">
9
  </head>
10
+ <body class="bg-gradient-to-br from-gray-100 to-gray-200 font-sans min-h-screen">
11
+ <div class="max-w-6xl mx-auto mt-6 p-6">
12
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
13
+ <div class="bg-gradient-to-r from-purple-600 to-indigo-600 p-6">
14
+ <h1 class="text-3xl font-bold text-center text-white">AI Web Application</h1>
15
+ <p class="text-center text-purple-100 mt-2">Integrated interface for AI services</p>
 
 
 
 
 
 
16
  </div>
17
 
18
+ <!-- Tabs Navigation -->
19
+ <div class="flex border-b">
20
+ <button id="tab-upload" class="tab-button active px-6 py-4 font-medium text-purple-600 border-b-2 border-purple-600">
21
+ Document Analysis
22
+ </button>
23
+ <button id="tab-text" class="tab-button px-6 py-4 font-medium text-gray-500 hover:text-purple-600">
24
+ Text Processing
25
+ </button>
26
+ <button id="tab-qa" class="tab-button px-6 py-4 font-medium text-gray-500 hover:text-purple-600">
27
+ Q&A
28
+ </button>
29
+ <button id="tab-code" class="tab-button px-6 py-4 font-medium text-gray-500 hover:text-purple-600">
30
+ Code Generation
31
+ </button>
32
  </div>
33
 
34
+ <!-- Tab Content -->
35
+ <div class="p-6">
36
+ <!-- Upload Document Section -->
37
+ <div id="content-upload" class="tab-content">
38
+ <div class="bg-purple-50 p-6 rounded-xl">
39
+ <h2 class="text-2xl font-semibold text-purple-800 mb-4">Document & Image Analysis</h2>
40
+ <p class="text-gray-600 mb-4">Upload a text file or image for analysis</p>
41
+
42
+ <div class="flex flex-col items-center justify-center border-2 border-dashed border-purple-300 rounded-lg p-8 mb-4 bg-white">
43
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-purple-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
44
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
45
+ </svg>
46
+ <label for="fileInput" class="cursor-pointer bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">
47
+ Choose File
48
+ </label>
49
+ <input type="file" id="fileInput" class="hidden">
50
+ <p id="fileName" class="mt-2 text-sm text-gray-500">No file chosen</p>
51
+ </div>
52
+
53
+ <div class="flex flex-wrap gap-3 justify-center">
54
+ <button onclick="uploadFile('extract_text')" class="px-5 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center">
55
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
56
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
57
+ </svg>
58
+ Extract Text
59
+ </button>
60
+ <button onclick="uploadFile('image_caption')" class="px-5 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
61
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
62
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
63
+ </svg>
64
+ Analyze Image
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Text Processing Section -->
71
+ <div id="content-text" class="tab-content hidden">
72
+ <div class="bg-blue-50 p-6 rounded-xl">
73
+ <h2 class="text-2xl font-semibold text-blue-800 mb-4">Text Processing</h2>
74
+ <p class="text-gray-600 mb-4">Enter text you want to summarize or translate</p>
75
+
76
+ <div class="mb-4">
77
+ <textarea id="textInput" class="w-full p-4 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" rows="6" placeholder="Enter text here..."></textarea>
78
+ </div>
79
+
80
+ <!-- Language Selection for Translation -->
81
+ <div id="translationOptions" class="mb-4 p-4 bg-white rounded-lg border border-blue-200 hidden">
82
+ <h3 class="text-lg font-medium text-blue-700 mb-3">Translation Options</h3>
83
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
84
+ <div>
85
+ <label for="sourceLanguage" class="block text-sm font-medium text-gray-700 mb-1">From Language:</label>
86
+ <select id="sourceLanguage" class="w-full p-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
87
+ <option value="ar">Arabic</option>
88
+ <option value="en" selected>English</option>
89
+ <option value="fr">French</option>
90
+ <option value="es">Spanish</option>
91
+ <option value="zh">Chinese</option>
92
+ </select>
93
+ </div>
94
+ <div>
95
+ <label for="targetLanguage" class="block text-sm font-medium text-gray-700 mb-1">To Language:</label>
96
+ <select id="targetLanguage" class="w-full p-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
97
+ <option value="ar" selected>Arabic</option>
98
+ <option value="en">English</option>
99
+ <option value="fr">French</option>
100
+ <option value="es">Spanish</option>
101
+ <option value="zh">Chinese</option>
102
+ </select>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="flex flex-wrap gap-3 justify-center">
108
+ <button onclick="processText('summarize')" class="px-5 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
109
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
110
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
111
+ </svg>
112
+ Summarize Text
113
+ </button>
114
+ <button id="translateBtn" class="px-5 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center">
115
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
116
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
117
+ </svg>
118
+ Translate Text
119
+ </button>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Q&A Section -->
125
+ <div id="content-qa" class="tab-content hidden">
126
+ <div class="bg-amber-50 p-6 rounded-xl">
127
+ <h2 class="text-2xl font-semibold text-amber-800 mb-4">Questions & Answers</h2>
128
+ <p class="text-gray-600 mb-4">Enter reference text and your question to get an answer</p>
129
+
130
+ <div class="mb-4">
131
+ <label for="contextInput" class="block text-sm font-medium text-gray-700 mb-1">Reference Text:</label>
132
+ <textarea id="contextInput" class="w-full p-4 border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition" rows="4" placeholder="Enter reference text here..."></textarea>
133
+ </div>
134
+
135
+ <div class="mb-4">
136
+ <label for="questionInput" class="block text-sm font-medium text-gray-700 mb-1">Question:</label>
137
+ <input type="text" id="questionInput" class="w-full p-4 border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition" placeholder="Enter your question here...">
138
+ </div>
139
+
140
+ <div class="flex justify-center">
141
+ <button onclick="askQuestion()" class="px-5 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition flex items-center">
142
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
143
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
144
+ </svg>
145
+ Get Answer
146
+ </button>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Code Generation Section -->
152
+ <div id="content-code" class="tab-content hidden">
153
+ <div class="bg-teal-50 p-6 rounded-xl">
154
+ <h2 class="text-2xl font-semibold text-teal-800 mb-4">Code Generation</h2>
155
+ <p class="text-gray-600 mb-4">Enter a description of the code you want to generate</p>
156
+
157
+ <div class="mb-4">
158
+ <textarea id="codeInput" class="w-full p-4 border border-teal-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition" rows="6" placeholder="Example: Write code to create a chart for sales data..."></textarea>
159
+ </div>
160
+
161
+ <div class="flex justify-center">
162
+ <button onclick="generateCode()" class="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition flex items-center">
163
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
164
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
165
+ </svg>
166
+ Generate Code
167
+ </button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Output Section (Common for all tabs) -->
173
+ <div class="mt-6">
174
+ <div class="bg-gray-100 p-4 rounded-xl">
175
+ <div class="flex justify-between items-center mb-2">
176
+ <h3 class="text-lg font-semibold text-gray-700">Results</h3>
177
+ <button id="copyOutput" class="text-sm text-gray-500 hover:text-gray-700 flex items-center">
178
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
179
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
180
+ </svg>
181
+ Copy
182
+ </button>
183
+ </div>
184
+ <div class="relative">
185
+ <pre id="output" class="p-4 bg-white border rounded-lg h-60 overflow-auto text-gray-800"></pre>
186
+ <div id="loader" class="hidden absolute inset-0 flex items-center justify-center bg-white bg-opacity-80 rounded-lg">
187
+ <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-700"></div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
  </div>
193
  </div>
194
+
195
+ <footer class="mt-6 text-center text-gray-500 text-sm">
196
+ <p>Developed by v0 © 2024</p>
197
+ </footer>
198
  </div>
199
 
200
+ <script src="script.js"></script>
201
  </body>
202
  </html>