Hugging Face's logo

Spaces:
zsytony
/
modellab
Running

App Files Community
zsytony commited on
Commit
55da147
·
verified ·
1 Parent(s): 22299c9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +530 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Modellab
3
- emoji: 🐨
4
  colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: modellab
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,530 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>ModelLab - AI Experiment Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom styles */
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
13
+ }
14
+ .sidebar {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .card-hover:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .tab-content {
22
+ display: none;
23
+ }
24
+ .tab-content.active {
25
+ display: block;
26
+ }
27
+ .progress-bar {
28
+ transition: width 0.5s ease;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50 font-sans">
33
+ <!-- Main Container -->
34
+ <div class="flex h-screen overflow-hidden">
35
+ <!-- Sidebar -->
36
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
37
+ <div class="p-4 border-b border-gray-200">
38
+ <h1 class="text-2xl font-bold text-indigo-600 flex items-center">
39
+ <i class="fas fa-robot mr-2"></i> ModelLab
40
+ </h1>
41
+ </div>
42
+ <div class="flex-1 overflow-y-auto">
43
+ <nav class="p-4">
44
+ <div class="mb-6">
45
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</h3>
46
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-indigo-50 text-indigo-700">
47
+ <i class="fas fa-tachometer-alt mr-3 text-indigo-500"></i> Dashboard
48
+ </a>
49
+ </div>
50
+ <div class="mb-6">
51
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Experiments</h3>
52
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
53
+ <i class="fas fa-flask mr-3 text-gray-500"></i> My Experiments
54
+ </a>
55
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
56
+ <i class="fas fa-plus-circle mr-3 text-gray-500"></i> New Experiment
57
+ </a>
58
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
59
+ <i class="fas fa-tasks mr-3 text-gray-500"></i> Templates
60
+ </a>
61
+ </div>
62
+ <div class="mb-6">
63
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Models</h3>
64
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
65
+ <i class="fas fa-cog mr-3 text-gray-500"></i> SFT Configuration
66
+ </a>
67
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
68
+ <i class="fas fa-chart-line mr-3 text-gray-500"></i> Evaluation
69
+ </a>
70
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
71
+ <i class="fas fa-database mr-3 text-gray-500"></i> Datasets
72
+ </a>
73
+ </div>
74
+ <div>
75
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Settings</h3>
76
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
77
+ <i class="fas fa-user mr-3 text-gray-500"></i> Profile
78
+ </a>
79
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
80
+ <i class="fas fa-cog mr-3 text-gray-500"></i> Settings
81
+ </a>
82
+ </div>
83
+ </nav>
84
+ </div>
85
+ <div class="p-4 border-t border-gray-200">
86
+ <div class="flex items-center">
87
+ <img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User avatar">
88
+ <div class="ml-3">
89
+ <p class="text-sm font-medium text-gray-700">John Doe</p>
90
+ <p class="text-xs text-gray-500">john@example.com</p>
91
+ </div>
92
+ <button class="ml-auto text-gray-500 hover:text-gray-700">
93
+ <i class="fas fa-sign-out-alt"></i>
94
+ </button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Main Content -->
100
+ <div class="flex-1 overflow-auto">
101
+ <!-- Header -->
102
+ <header class="bg-white shadow-sm">
103
+ <div class="px-6 py-4 flex items-center justify-between">
104
+ <div class="flex items-center">
105
+ <button class="mr-4 text-gray-500 hover:text-gray-700">
106
+ <i class="fas fa-bars"></i>
107
+ </button>
108
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
109
+ </div>
110
+ <div class="flex items-center">
111
+ <div class="relative">
112
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
113
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
114
+ </div>
115
+ <button class="ml-4 p-2 text-gray-500 hover:text-gray-700 relative">
116
+ <i class="fas fa-bell"></i>
117
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </header>
122
+
123
+ <!-- Content -->
124
+ <main class="p-6">
125
+ <!-- Stats Cards -->
126
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
127
+ <div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300">
128
+ <div class="flex items-center">
129
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
130
+ <i class="fas fa-flask text-xl"></i>
131
+ </div>
132
+ <div class="ml-4">
133
+ <p class="text-sm font-medium text-gray-500">Active Experiments</p>
134
+ <p class="text-2xl font-semibold text-gray-800">12</p>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300">
139
+ <div class="flex items-center">
140
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
141
+ <i class="fas fa-check-circle text-xl"></i>
142
+ </div>
143
+ <div class="ml-4">
144
+ <p class="text-sm font-medium text-gray-500">Completed</p>
145
+ <p class="text-2xl font-semibold text-gray-800">24</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ <div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300">
150
+ <div class="flex items-center">
151
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
152
+ <i class="fas fa-cog text-xl"></i>
153
+ </div>
154
+ <div class="ml-4">
155
+ <p class="text-sm font-medium text-gray-500">SFT Models</p>
156
+ <p class="text-2xl font-semibold text-gray-800">8</p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ <div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300">
161
+ <div class="flex items-center">
162
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
163
+ <i class="fas fa-chart-bar text-xl"></i>
164
+ </div>
165
+ <div class="ml-4">
166
+ <p class="text-sm font-medium text-gray-500">Evaluations</p>
167
+ <p class="text-2xl font-semibold text-gray-800">36</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Recent Experiments -->
174
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
175
+ <div class="px-6 py-4 border-b border-gray-200">
176
+ <div class="flex items-center justify-between">
177
+ <h3 class="text-lg font-medium text-gray-900">Recent Experiments</h3>
178
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
179
+ <i class="fas fa-plus mr-2"></i> New Experiment
180
+ </button>
181
+ </div>
182
+ </div>
183
+ <div class="overflow-x-auto">
184
+ <table class="min-w-full divide-y divide-gray-200">
185
+ <thead class="bg-gray-50">
186
+ <tr>
187
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
188
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
189
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
190
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
191
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
192
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
193
+ </tr>
194
+ </thead>
195
+ <tbody class="bg-white divide-y divide-gray-200">
196
+ <tr>
197
+ <td class="px-6 py-4 whitespace-nowrap">
198
+ <div class="flex items-center">
199
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
200
+ <i class="fas fa-dna text-indigo-600"></i>
201
+ </div>
202
+ <div class="ml-4">
203
+ <div class="text-sm font-medium text-gray-900">Sentiment Analysis v2</div>
204
+ <div class="text-sm text-gray-500">SFT</div>
205
+ </div>
206
+ </div>
207
+ </td>
208
+ <td class="px-6 py-4 whitespace-nowrap">
209
+ <div class="text-sm text-gray-900">GPT-3.5</div>
210
+ <div class="text-sm text-gray-500">Base model</div>
211
+ </td>
212
+ <td class="px-6 py-4 whitespace-nowrap">
213
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Running</span>
214
+ </td>
215
+ <td class="px-6 py-4 whitespace-nowrap">
216
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
217
+ <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 65%"></div>
218
+ </div>
219
+ <div class="text-xs text-gray-500 mt-1">65% complete</div>
220
+ </td>
221
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td>
222
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
223
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
224
+ <button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-chart-line"></i></button>
225
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-stop-circle"></i></button>
226
+ </td>
227
+ </tr>
228
+ <tr>
229
+ <td class="px-6 py-4 whitespace-nowrap">
230
+ <div class="flex items-center">
231
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
232
+ <i class="fas fa-language text-purple-600"></i>
233
+ </div>
234
+ <div class="ml-4">
235
+ <div class="text-sm font-medium text-gray-900">Translation EN-FR</div>
236
+ <div class="text-sm text-gray-500">Evaluation</div>
237
+ </div>
238
+ </div>
239
+ </td>
240
+ <td class="px-6 py-4 whitespace-nowrap">
241
+ <div class="text-sm text-gray-900">LLaMA-2</div>
242
+ <div class="text-sm text-gray-500">7B params</div>
243
+ </td>
244
+ <td class="px-6 py-4 whitespace-nowrap">
245
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
246
+ </td>
247
+ <td class="px-6 py-4 whitespace-nowrap">
248
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
249
+ <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
250
+ </div>
251
+ <div class="text-xs text-gray-500 mt-1">Waiting for resources</div>
252
+ </td>
253
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 hours ago</td>
254
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
255
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
256
+ <button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-chart-line"></i></button>
257
+ <button class="text-green-600 hover:text-green-900"><i class="fas fa-play-circle"></i></button>
258
+ </td>
259
+ </tr>
260
+ <tr>
261
+ <td class="px-6 py-4 whitespace-nowrap">
262
+ <div class="flex items-center">
263
+ <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
264
+ <i class="fas fa-robot text-green-600"></i>
265
+ </div>
266
+ <div class="ml-4">
267
+ <div class="text-sm font-medium text-gray-900">Chatbot Fine-tuning</div>
268
+ <div class="text-sm text-gray-500">SFT</div>
269
+ </div>
270
+ </div>
271
+ </td>
272
+ <td class="px-6 py-4 whitespace-nowrap">
273
+ <div class="text-sm text-gray-900">GPT-4</div>
274
+ <div class="text-sm text-gray-500">Base model</div>
275
+ </td>
276
+ <td class="px-6 py-4 whitespace-nowrap">
277
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Completed</span>
278
+ </td>
279
+ <td class="px-6 py-4 whitespace-nowrap">
280
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
281
+ <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 100%"></div>
282
+ </div>
283
+ <div class="text-xs text-gray-500 mt-1">Completed 1 day ago</div>
284
+ </td>
285
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
286
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
287
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
288
+ <button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-chart-line"></i></button>
289
+ <button class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-redo"></i></button>
290
+ </td>
291
+ </tr>
292
+ </tbody>
293
+ </table>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- SFT and Evaluation Section -->
298
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
299
+ <!-- SFT Configuration -->
300
+ <div class="bg-white rounded-lg shadow overflow-hidden">
301
+ <div class="px-6 py-4 border-b border-gray-200">
302
+ <h3 class="text-lg font-medium text-gray-900">Supervised Fine-Tuning</h3>
303
+ </div>
304
+ <div class="p-6">
305
+ <div class="mb-4">
306
+ <label class="block text-sm font-medium text-gray-700 mb-1">Base Model</label>
307
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
308
+ <option>GPT-3.5</option>
309
+ <option>GPT-4</option>
310
+ <option>LLaMA-2 (7B)</option>
311
+ <option>LLaMA-2 (13B)</option>
312
+ <option>BLOOM (7.1B)</option>
313
+ </select>
314
+ </div>
315
+ <div class="mb-4">
316
+ <label class="block text-sm font-medium text-gray-700 mb-1">Training Dataset</label>
317
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
318
+ <option>Sentiment Analysis (10k samples)</option>
319
+ <option>Translation EN-FR (50k pairs)</option>
320
+ <option>Customer Support (8k dialogs)</option>
321
+ <option>Custom Dataset...</option>
322
+ </select>
323
+ </div>
324
+ <div class="mb-4">
325
+ <label class="block text-sm font-medium text-gray-700 mb-1">Hyperparameters</label>
326
+ <div class="grid grid-cols-2 gap-4">
327
+ <div>
328
+ <label class="block text-xs text-gray-500 mb-1">Learning Rate</label>
329
+ <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="1e-5">
330
+ </div>
331
+ <div>
332
+ <label class="block text-xs text-gray-500 mb-1">Batch Size</label>
333
+ <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="16">
334
+ </div>
335
+ <div>
336
+ <label class="block text-xs text-gray-500 mb-1">Epochs</label>
337
+ <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="3">
338
+ </div>
339
+ <div>
340
+ <label class="block text-xs text-gray-500 mb-1">Warmup Steps</label>
341
+ <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="500">
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <div class="flex justify-end">
346
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
347
+ <i class="fas fa-play mr-2"></i> Start Training
348
+ </button>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Evaluation -->
354
+ <div class="bg-white rounded-lg shadow overflow-hidden">
355
+ <div class="px-6 py-4 border-b border-gray-200">
356
+ <h3 class="text-lg font-medium text-gray-900">Model Evaluation</h3>
357
+ </div>
358
+ <div class="p-6">
359
+ <div class="mb-4">
360
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model to Evaluate</label>
361
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
362
+ <option>Sentiment Analysis v2</option>
363
+ <option>Translation EN-FR</option>
364
+ <option>Chatbot Fine-tuning</option>
365
+ <option>Custom Model...</option>
366
+ </select>
367
+ </div>
368
+ <div class="mb-4">
369
+ <label class="block text-sm font-medium text-gray-700 mb-1">Evaluation Dataset</label>
370
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
371
+ <option>Sentiment Test Set (1k samples)</option>
372
+ <option>Translation Test Set (5k pairs)</option>
373
+ <option>Customer Support Test (500 dialogs)</option>
374
+ <option>Custom Dataset...</option>
375
+ </select>
376
+ </div>
377
+ <div class="mb-4">
378
+ <label class="block text-sm font-medium text-gray-700 mb-1">Metrics</label>
379
+ <div class="grid grid-cols-2 gap-2">
380
+ <div class="flex items-center">
381
+ <input id="accuracy" name="metrics" type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
382
+ <label for="accuracy" class="ml-2 block text-sm text-gray-700">Accuracy</label>
383
+ </div>
384
+ <div class="flex items-center">
385
+ <input id="bleu" name="metrics" type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
386
+ <label for="bleu" class="ml-2 block text-sm text-gray-700">BLEU Score</label>
387
+ </div>
388
+ <div class="flex items-center">
389
+ <input id="rouge" name="metrics" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
390
+ <label for="rouge" class="ml-2 block text-sm text-gray-700">ROUGE</label>
391
+ </div>
392
+ <div class="flex items-center">
393
+ <input id="perplexity" name="metrics" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
394
+ <label for="perplexity" class="ml-2 block text-sm text-gray-700">Perplexity</label>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ <div class="flex justify-end">
399
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
400
+ <i class="fas fa-chart-bar mr-2"></i> Run Evaluation
401
+ </button>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Login Modal (hidden by default) -->
408
+ <div id="loginModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
409
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
410
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
411
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
412
+ </div>
413
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
414
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
415
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
416
+ <div class="sm:flex sm:items-start">
417
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
418
+ <i class="fas fa-user text-indigo-600"></i>
419
+ </div>
420
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
421
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Sign in to ModelLab</h3>
422
+ <div class="mt-2">
423
+ <p class="text-sm text-gray-500">Enter your credentials to access your experiments and models.</p>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ <div class="mt-5">
428
+ <form>
429
+ <div class="mb-4">
430
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
431
+ <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
432
+ </div>
433
+ <div class="mb-4">
434
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
435
+ <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
436
+ </div>
437
+ <div class="flex items-center mb-4">
438
+ <input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
439
+ <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
440
+ </div>
441
+ </form>
442
+ </div>
443
+ </div>
444
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
445
+ <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
446
+ Sign in
447
+ </button>
448
+ <button type="button" id="closeLoginModal" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
449
+ Cancel
450
+ </button>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </main>
456
+ </div>
457
+ </div>
458
+
459
+ <script>
460
+ // Toggle sidebar on mobile
461
+ document.querySelector('.fa-bars').addEventListener('click', function() {
462
+ document.querySelector('.sidebar').classList.toggle('-translate-x-full');
463
+ });
464
+
465
+ // Login modal functionality
466
+ const loginModal = document.getElementById('loginModal');
467
+ const closeLoginModal = document.getElementById('closeLoginModal');
468
+
469
+ // Show login modal (you can trigger this when needed)
470
+ function showLoginModal() {
471
+ loginModal.classList.remove('hidden');
472
+ }
473
+
474
+ // Hide login modal
475
+ closeLoginModal.addEventListener('click', function() {
476
+ loginModal.classList.add('hidden');
477
+ });
478
+
479
+ // Close modal when clicking outside
480
+ window.addEventListener('click', function(event) {
481
+ if (event.target === loginModal) {
482
+ loginModal.classList.add('hidden');
483
+ }
484
+ });
485
+
486
+ // Tab functionality
487
+ const tabs = document.querySelectorAll('[data-tab]');
488
+ tabs.forEach(tab => {
489
+ tab.addEventListener('click', function() {
490
+ const tabId = this.getAttribute('data-tab');
491
+ document.querySelectorAll('.tab-content').forEach(content => {
492
+ content.classList.remove('active');
493
+ });
494
+ document.getElementById(tabId).classList.add('active');
495
+
496
+ // Update active tab styling
497
+ document.querySelectorAll('[data-tab]').forEach(t => {
498
+ t.classList.remove('bg-indigo-100', 'text-indigo-700');
499
+ t.classList.add('text-gray-700', 'hover:bg-gray-100');
500
+ });
501
+ this.classList.remove('text-gray-700', 'hover:bg-gray-100');
502
+ this.classList.add('bg-indigo-100', 'text-indigo-700');
503
+ });
504
+ });
505
+
506
+ // Simulate progress bar animation
507
+ function animateProgressBars() {
508
+ const progressBars = document.querySelectorAll('.progress-bar');
509
+ progressBars.forEach(bar => {
510
+ const targetWidth = bar.style.width;
511
+ bar.style.width = '0%';
512
+ setTimeout(() => {
513
+ bar.style.width = targetWidth;
514
+ }, 100);
515
+ });
516
+ }
517
+
518
+ // Initialize animations when page loads
519
+ window.addEventListener('load', function() {
520
+ animateProgressBars();
521
+
522
+ // Check if user is logged in (you would replace this with actual auth check)
523
+ const isLoggedIn = false; // Change to true to bypass login
524
+ if (!isLoggedIn) {
525
+ setTimeout(showLoginModal, 500);
526
+ }
527
+ });
528
+ </script>
529
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zsytony/modellab" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
530
+ </html>