Hugging Face's logo

Spaces:
FourLabs-UN2
/
modelsizetabsai
Running

App Files Community
FourLabs-UN2 commited on
Commit
bfc92d4
·
verified ·
1 Parent(s): b66ce77

Separe os modelos por tamanho em abas, com aba leve, médio e pesado

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +577 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Modelsizetabsai
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: yellow
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: ModelSizeTabsAI 🚀
3
+ colorFrom: yellow
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,578 @@
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
+
2
+
3
+
4
+
5
+
6
+ <!DOCTYPE html>
7
+ <html lang="en">
8
+ <head>
9
+ <meta charset="UTF-8">
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <title>Mr. Mxyzptlk - | Fourlabs</title>
12
+ <script src="https://cdn.tailwindcss.com"></script>
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
+ <link rel="icon" type="image/x-icon" href="/static/imgs/icon.svg">
15
+ <link rel="stylesheet" href="/static/style/dashboard.css">
16
+ <link rel="stylesheet" type="text/css" href="/static/style/alert.css">
17
+ <script src="https://unpkg.com/feather-icons"></script>
18
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
19
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
20
+ <script>
21
+ tailwind.config = {
22
+ theme: {
23
+ extend: {
24
+ colors: {
25
+ primary: '#21223a',
26
+ secondary: '#ff580f',
27
+ }
28
+ }
29
+ }
30
+ }
31
+ </script>
32
+ </head>
33
+ <body class="bg-gray-100">
34
+ <div id="alert-container" style="position: fixed; top: 80px; right: 20px; z-index: 1000; width: 100%; max-width: 500px;"></div>
35
+ <div class="flex h-screen overflow-hidden">
36
+ <!-- Sidebar -->
37
+ <div class="sidebar bg-primary text-white w-64 md:w-20 lg:w-64 fixed h-full overflow-y-auto">
38
+ <div class="p-4 border-b border-gray-700">
39
+ <div class="w-full flex flex-col items-center justify-center">
40
+ <img
41
+ alt="logo"
42
+ loading="lazy"
43
+ width="100"
44
+ height="100"
45
+ decoding="async"
46
+ data-nimg="1"
47
+ class="w-36"
48
+ src="/static/imgs/logo-branco-labs.svg"
49
+ style="color: transparent;margin-top: 8px;"
50
+ >
51
+ <p
52
+ class="text-[10px] text-white mt-2 text-center"
53
+ style="margin-top: -1px; margin-left: 12px;font-size: 9px;">
54
+ Inovação e experimentação
55
+ </p>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="p-4">
60
+ <div class="flex items-center space-x-3 mb-6">
61
+ <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center">
62
+ <span class="font-bold">MS</span>
63
+ </div>
64
+ <div class="lg:block hidden">
65
+ <h3 class="font-semibold">Marlon Sousa</h3>
66
+ <p class="text-xs text-gray-400">Admin</p>
67
+ </div>
68
+ </div>
69
+
70
+ <nav>
71
+ <ul class="space-y-2">
72
+ <li>
73
+ <a href="/"
74
+ class="sidebar-item flex items-center p-3 rounded-lg
75
+ ">
76
+ <i class="fa-solid fa-server text-secondary w-6 text-center"></i>
77
+ <span class="ml-3 lg:block hidden">Instances</span>
78
+ </a>
79
+ </li>
80
+ <li>
81
+ <a href="/chat/"
82
+ class="sidebar-item flex items-center p-3 rounded-lg
83
+ ">
84
+ <i class="fa-solid fa-comment text-secondary w-6 text-center"></i>
85
+ <span class="ml-3 lg:block hidden">Chat Model</span>
86
+ </a>
87
+ </li>
88
+ <li>
89
+ <a href="/"
90
+ class="sidebar-item flex items-center p-3 rounded-lg
91
+ ">
92
+ <i data-feather="activity" class="text-secondary w-5 h-5 mr-3"></i>
93
+ <span class="ml-3 lg:block hidden">Monitoring</span>
94
+ </a>
95
+ </li>
96
+ <li>
97
+ <a href="/settings/"
98
+ class="sidebar-item flex items-center p-3 rounded-lg
99
+ ">
100
+ <i class="fa-solid fa-screwdriver-wrench text-secondary w-6 text-center"></i>
101
+ <span class="ml-3 lg:block hidden">Configurações</span>
102
+ </a>
103
+ </li>
104
+ </ul>
105
+ </nav>
106
+ </div>
107
+
108
+ <div class="absolute bottom-0 w-full p-4 border-t border-gray-700">
109
+ <form id="logout-form" method="POST" action="/account/logout/" class="hidden">
110
+ <input type="hidden" name="csrfmiddlewaretoken" value="z7pEvywKWWqYiTLM5Bk3w7XoNX0Jyhomj466YTwdN7wBa8OVfQS2Yq5QaKH8UAur">
111
+ </form>
112
+
113
+ <a href="#" onclick="document.getElementById('logout-form').submit(); return false;" class="sidebar-item flex items-center p-3 rounded-lg">
114
+ <i class="fas fa-sign-out-alt text-secondary w-6 text-center"></i>
115
+ <span class="ml-3 lg:block hidden">Logout</span>
116
+ </a>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Main Content -->
121
+ <div class="flex-1 ml-0 md:ml-20 lg:ml-64 overflow-y-auto">
122
+ <!-- Top Navigation -->
123
+ <header class="bg-white shadow-sm">
124
+ <div class="flex items-center justify-between p-4">
125
+ <div class="flex items-center space-x-4">
126
+ <button id="mobileToggleSidebar" class="text-gray-600 lg:hidden block">
127
+ <i class="fas fa-bars text-xl"></i>
128
+ </button>
129
+ <h1 class="text-xl font-bold text-primary"></h1>
130
+ </div>
131
+ <div class="flex items-center space-x-4">
132
+ <a href="/launch/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
133
+ <i data-feather="plus" class="mr-2 w-4 h-4"></i>
134
+ Launch New Instance
135
+ </a>
136
+ <div class="relative">
137
+ <button id="notificationsBtn" class="relative">
138
+ <i class="fas fa-bell text-xl text-gray-600"></i>
139
+ <span class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">0</span>
140
+ </button>
141
+ <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-50">
142
+ <div class="py-1">
143
+ <div class="px-4 py-2 border-b border-gray-200">
144
+ <h3 class="text-sm font-medium text-gray-700">Notifications</h3>
145
+ </div>
146
+
147
+ </div>
148
+ <div class="px-4 py-2 bg-gray-50 text-center">
149
+ <a href="#" class="text-sm font-medium text-secondary hover:text-primary">View all notifications</a>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </header>
156
+
157
+ <!-- Dashboard Content -->
158
+
159
+
160
+ <main class="p-6">
161
+ <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 mb-8 animate-fade-in">
162
+ <div class="flex items-center justify-between mb-8">
163
+ <h3 class="text-2xl font-semibold text-dark">Configurações da Instância</h3>
164
+ <div class="flex items-center space-x-2 text-sm text-gray-500">
165
+ <i data-feather="info" class="w-4 h-4"></i>
166
+ <span>Todos os campos são obrigatórios</span>
167
+ </div>
168
+ </div>
169
+
170
+ <form id="deployForm" method="post">
171
+ <input type="hidden" name="csrfmiddlewaretoken" value="z7pEvywKWWqYiTLM5Bk3w7XoNX0Jyhomj466YTwdN7wBa8OVfQS2Yq5QaKH8UAur">
172
+ <div class="grid grid-cols-1 lg:grid-cols-1 gap-8">
173
+ <!-- Availability Zone -->
174
+ <div>
175
+ <label class="block text-sm font-semibold text-dark mb-3 flex items-center">
176
+ <i data-feather="globe" class="w-4 h-4 mr-2 text-secondary"></i>
177
+ Zona de Disponibilidade
178
+ </label>
179
+ <select name="availability_zone" class="w-full px-4 py-3 border border-gray-200 rounded-xl" required id="id_availability_zone">
180
+ <option value="" selected>---------</option>
181
+
182
+ <option value="a0d1cf94-272f-48e4-826c-d7f5f9a3ceb5">southamerica-east1</option>
183
+
184
+ </select>
185
+ <p class="text-xs text-gray-500 mt-2">Recomendado: Mais próxima da sua localização</p>
186
+ </div>
187
+ </div>
188
+ <!-- LLM Model -->
189
+ <div class="mb-8 mt-8">
190
+ <label class="block text-sm font-semibold text-dark mb-4 flex items-center">
191
+ <i data-feather="cpu" class="w-4 h-4 mr-2 text-secondary"></i>
192
+ Modelo LLM do Ollama
193
+ </label>
194
+
195
+ <!-- Tabs Navigation -->
196
+ <div class="border-b border-gray-200 mb-6">
197
+ <div class="flex space-x-8">
198
+ <button type="button" class="tab-button py-3 px-1 border-b-2 font-medium text-sm transition-all duration-300 text-secondary border-secondary" data-tab="light">
199
+ <i class="fa-solid fa-feather mr-2"></i>
200
+ Leve
201
+ </button>
202
+ <button type="button" class="tab-button py-3 px-1 border-b-2 font-medium text-sm transition-all duration-300 text-gray-500 border-transparent hover:text-gray-700" data-tab="medium">
203
+ <i class="fa-solid fa-microchip mr-2"></i>
204
+ Médio
205
+ </button>
206
+ <button type="button" class="tab-button py-3 px-1 border-b-2 font-medium text-sm transition-all duration-300 text-gray-500 border-transparent hover:text-gray-700" data-tab="heavy">
207
+ <i class="fa-solid fa-server mr-2"></i>
208
+ Pesado
209
+ </button>
210
+ </div>
211
+
212
+ <!-- Light Models Tab -->
213
+ <div id="light-tab" class="tab-content active">
214
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
215
+
216
+ <label class="cursor-pointer">
217
+ <!-- o input vem primeiro e é peer -->
218
+ <input type="radio" name="llm_model" value="95d05e19-6063-4fa2-804a-c551e37358b5" class="hidden peer" required>
219
+
220
+ <!-- este div é estilizado conforme o estado do radio -->
221
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
222
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
223
+
224
+ <div class="flex items-center mb-3">
225
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
226
+ peer-checked:ring-2 peer-checked:ring-secondary">
227
+ <i class="fa-solid fa-feather text-gray-700"></i>
228
+ </div>
229
+ <h4 class="font-semibold text-dark">deepseek-r1:1.5b</h4>
230
+ </div>
231
+
232
+ <p class="text-sm text-gray-600">
233
+ Leve – 2 GB
234
+ </p>
235
+ </div>
236
+ </label>
237
+
238
+ <label class="cursor-pointer">
239
+ <!-- o input vem primeiro e é peer -->
240
+ <input type="radio" name="llm_model" value="5fef64b9-ac1d-4461-a9e9-148582e780f0" class="hidden peer" required>
241
+
242
+ <!-- este div é estilizado conforme o estado do radio -->
243
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
244
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
245
+
246
+ <div class="flex items-center mb-3">
247
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
248
+ peer-checked:ring-2 peer-checked:ring-secondary">
249
+ <i class="fa-solid fa-feather text-gray-700"></i>
250
+ </div>
251
+ <h4 class="font-semibold text-dark">deepseek-r1:7b</h4>
252
+ </div>
253
+
254
+ <p class="text-sm text-gray-600">
255
+ Leve – 5 GB
256
+ </p>
257
+ </div>
258
+ </label>
259
+
260
+ <label class="cursor-pointer">
261
+ <!-- o input vem primeiro e é peer -->
262
+ <input type="radio" name="llm_model" value="65674ada-0236-49ce-881e-c626ac44da07" class="hidden peer" required>
263
+
264
+ <!-- este div é estilizado conforme o estado do radio -->
265
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
266
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
267
+
268
+ <div class="flex items-center mb-3">
269
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
270
+ peer-checked:ring-2 peer-checked:ring-secondary">
271
+ <i class="fa-solid fa-feather text-gray-700"></i>
272
+ </div>
273
+ <h4 class="font-semibold text-dark">deepseek-r1:8b</h4>
274
+ </div>
275
+
276
+ <p class="text-sm text-gray-600">
277
+ Leve – 5 GB
278
+ </p>
279
+ </div>
280
+ </label>
281
+
282
+ <label class="cursor-pointer">
283
+ <!-- o input vem primeiro e é peer -->
284
+ <input type="radio" name="llm_model" value="a74754f0-abe0-4691-a719-2b9ef0d2e0e8" class="hidden peer" required>
285
+
286
+ <!-- este div é estilizado conforme o estado do radio -->
287
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
288
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
289
+
290
+ <div class="flex items-center mb-3">
291
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
292
+ peer-checked:ring-2 peer-checked:ring-secondary">
293
+ <i class="fa-solid fa-feather text-gray-700"></i>
294
+ </div>
295
+ <h4 class="font-semibold text-dark">gemma3:12b</h4>
296
+ </div>
297
+
298
+ <p class="text-sm text-gray-600">
299
+ Leve – 8 GB
300
+ </p>
301
+ </div>
302
+ </label>
303
+
304
+ <label class="cursor-pointer">
305
+ <!-- o input vem primeiro e é peer -->
306
+ <input type="radio" name="llm_model" value="6eae46ac-f250-4ade-8f1a-b27a2ffee743" class="hidden peer" required>
307
+
308
+ <!-- este div é estilizado conforme o estado do radio -->
309
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
310
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
311
+
312
+ <div class="flex items-center mb-3">
313
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
314
+ peer-checked:ring-2 peer-checked:ring-secondary">
315
+ <i class="fa-solid fa-feather text-gray-700"></i>
316
+ </div>
317
+ <h4 class="font-semibold text-dark">gemma3:1b</h4>
318
+ </div>
319
+
320
+ <p class="text-sm text-gray-600">
321
+ Leve – 1 GB
322
+ </p>
323
+ </div>
324
+ </label>
325
+
326
+ <label class="cursor-pointer">
327
+ <!-- o input vem primeiro e é peer -->
328
+ <input type="radio" name="llm_model" value="e7cd232e-e411-48d0-96d1-d29fe615889b" class="hidden peer" required>
329
+
330
+ <!-- este div é estilizado conforme o estado do radio -->
331
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
332
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
333
+
334
+ <div class="flex items-center mb-3">
335
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
336
+ peer-checked:ring-2 peer-checked:ring-secondary">
337
+ <i class="fa-solid fa-feather text-gray-700"></i>
338
+ </div>
339
+ <h4 class="font-semibold text-dark">gemma3:4b</h4>
340
+ </div>
341
+
342
+ <p class="text-sm text-gray-600">
343
+ Leve – 4 GB
344
+ </p>
345
+ </div>
346
+ </label>
347
+
348
+ <label class="cursor-pointer">
349
+ <!-- o input vem primeiro e é peer -->
350
+ <input type="radio" name="llm_model" value="5944bd6f-bca5-4315-92e6-e587bf57d5c8" class="hidden peer" required>
351
+
352
+ <!-- este div é estilizado conforme o estado do radio -->
353
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
354
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
355
+
356
+ <div class="flex items-center mb-3">
357
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
358
+ peer-checked:ring-2 peer-checked:ring-secondary">
359
+ <i class="fa-solid fa-feather text-gray-700"></i>
360
+ </div>
361
+ <h4 class="font-semibold text-dark">llama3:8b</h4>
362
+ </div>
363
+
364
+ <p class="text-sm text-gray-600">
365
+ Leve – 5 GB
366
+ </p>
367
+ </div>
368
+ </label>
369
+
370
+ <label class="cursor-pointer">
371
+ <!-- o input vem primeiro e é peer -->
372
+ <input type="radio" name="llm_model" value="bf35414d-d84b-4ed6-8320-5b27b48b3821" class="hidden peer" required>
373
+
374
+ <!-- este div é estilizado conforme o estado do radio -->
375
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
376
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
377
+
378
+ <div class="flex items-center mb-3">
379
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
380
+ peer-checked:ring-2 peer-checked:ring-secondary">
381
+ <i class="fa-solid fa-feather text-gray-700"></i>
382
+ </div>
383
+ <h4 class="font-semibold text-dark">llama3.1:8b</h4>
384
+ </div>
385
+
386
+ <p class="text-sm text-gray-600">
387
+ Leve – 5 GB
388
+ </p>
389
+ </div>
390
+ </label>
391
+
392
+ <label class="cursor-pointer">
393
+ <!-- o input vem primeiro e é peer -->
394
+ <input type="radio" name="llm_model" value="0b685e78-a520-4d3a-8adc-f3f3305d4162" class="hidden peer" required>
395
+
396
+ <!-- este div é estilizado conforme o estado do radio -->
397
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
398
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
399
+
400
+ <div class="flex items-center mb-3">
401
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
402
+ peer-checked:ring-2 peer-checked:ring-secondary">
403
+ <i class="fa-solid fa-feather text-gray-700"></i>
404
+ </div>
405
+ <h4 class="font-semibold text-dark">llama3.2:3b</h4>
406
+ </div>
407
+
408
+ <p class="text-sm text-gray-600">
409
+ Leve – 2 GB
410
+ </p>
411
+ </div>
412
+ </label>
413
+
414
+ <label class="cursor-pointer">
415
+ <!-- o input vem primeiro e é peer -->
416
+ <input type="radio" name="llm_model" value="acada2a7-eaa8-4284-866b-704cc5f6f208" class="hidden peer" required>
417
+
418
+ <!-- este div é estilizado conforme o estado do radio -->
419
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
420
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
421
+
422
+ <div class="flex items-center mb-3">
423
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
424
+ peer-checked:ring-2 peer-checked:ring-secondary">
425
+ <i class="fa-solid fa-feather text-gray-700"></i>
426
+ </div>
427
+ <h4 class="font-semibold text-dark">phi3:14b</h4>
428
+ </div>
429
+
430
+ <p class="text-sm text-gray-600">
431
+ Leve – 8 GB
432
+ </p>
433
+ </div>
434
+ </label>
435
+
436
+ <label class="cursor-pointer">
437
+ <!-- o input vem primeiro e é peer -->
438
+ <input type="radio" name="llm_model" value="4480debb-4323-45fe-8449-5aeff0b6a6f6" class="hidden peer" required>
439
+
440
+ <!-- este div é estilizado conforme o estado do radio -->
441
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
442
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
443
+
444
+ <div class="flex items-center mb-3">
445
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3
446
+ peer-checked:ring-2 peer-checked:ring-secondary">
447
+ <i class="fa-solid fa-feather text-gray-700"></i>
448
+ </div>
449
+ <h4 class="font-semibold text-dark">phi3:3.8b</h4>
450
+ </div>
451
+
452
+ <p class="text-sm text-gray-600">
453
+ Leve – 2 GB
454
+ </p>
455
+ </div>
456
+ </label>
457
+
458
+ </div>
459
+ </div>
460
+
461
+ <!-- Medium Models Tab -->
462
+ <div id="medium-tab" class="tab-content hidden">
463
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
464
+
465
+ <label class="cursor-pointer">
466
+ <!-- o input vem primeiro e é peer -->
467
+ <input type="radio" name="llm_model" value="dda12d53-04d9-4099-8773-bf41d5e5933e" class="hidden peer" required>
468
+
469
+ <!-- este div é estilizado conforme o estado do radio -->
470
+ <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300
471
+ peer-checked:border-secondary hover:border-secondary hover:shadow-lg">
472
+
473
+ <div class="flex items-center mb-3">
474
+ <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3
475
+ peer-checked:ring-2 peer-checked:ring-secondary">
476
+ <i class="fa-solid fa-microchip text-gray-700"></i>
477
+ </div>
478
+ <h4 class="font-semibold text-dark">phi4:14b</h4>
479
+ </div>
480
+
481
+ <p class="text-sm text-gray-600">
482
+ Médio – 9 GB
483
+ </p>
484
+ </div>
485
+ </label>
486
+
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Heavy Models Tab -->
491
+ <div id="heavy-tab" class="tab-content hidden">
492
+ <div class="text-center py-12">
493
+ <i class="fa-solid fa-server text-4xl text-gray-300 mb-4"></i>
494
+ <h4 class="font-semibold text-dark mb-2">Modelos Pesados</h4>
495
+ <p class="text-sm text-gray-600">
496
+ Em breve disponíveis
497
+ </p>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ <!-- Submit Button -->
502
+ <button type="submit" class="w-full bg-gradient-to-r from-secondary to-accent hover:from-secondary/90 hover:to-accent/90 text-white font-semibold py-4 px-8 rounded-xl transition-all duration-300 hover:shadow-xl flex items-center justify-center group">
503
+ <i data-feather="cloud" class="w-5 h-5 mr-2 group-hover:animate-bounce"></i>
504
+ Iniciar Deploy da Instância
505
+ <i data-feather="arrow-right" class="w-5 h-5 ml-2 opacity-0 group-hover:opacity-100 transition-opacity"></i>
506
+ </button>
507
+ </form>
508
+ </div>
509
+ </main>
510
+
511
+
512
+ </div>
513
+ </div>
514
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
515
+ <script>
516
+ // Initialize Vanta.js background
517
+ VANTA.NET({
518
+ el: "#vanta-bg",
519
+ mouseControls: true,
520
+ touchControls: true,
521
+ gyroControls: false,
522
+ minHeight: 200.00,
523
+ minWidth: 200.00,
524
+ scale: 1.00,
525
+ scaleMobile: 1.00,
526
+ color: 0x3b82f6,
527
+ backgroundColor: 0xf8fafc,
528
+ points: 12.00,
529
+ maxDistance: 22.00,
530
+ spacing: 18.00
531
+ });
532
+ // Initialize feather icons
533
+ feather.replace();
534
+
535
+ // Tab functionality
536
+ document.querySelectorAll('.tab-button').forEach(button => {
537
+ button.addEventListener('click', function() {
538
+ const tabId = this.getAttribute('data-tab');
539
+
540
+ // Update tab buttons
541
+ document.querySelectorAll('.tab-button').forEach(btn => {
542
+ btn.classList.remove('text-secondary', 'border-secondary');
543
+ btn.classList.add('text-gray-500', 'border-transparent', 'hover:text-gray-700');
544
+ });
545
+
546
+ this.classList.remove('text-gray-500', 'border-transparent', 'hover:text-gray-700');
547
+ this.classList.add('text-secondary', 'border-secondary');
548
+
549
+ // Show selected tab content
550
+ document.querySelectorAll('.tab-content').forEach(content => {
551
+ content.classList.add('hidden');
552
+ content.classList.remove('active');
553
+ });
554
+
555
+ const selectedTab = document.getElementById(tabId + '-tab');
556
+ selectedTab.classList.remove('hidden');
557
+ selectedTab.classList.add('active');
558
+ });
559
+ });
560
+
561
+ // Pagination functionality
562
+ document.querySelectorAll('.pagination a').forEach(link => {
563
+ link.addEventListener('click', function(e) {
564
+ e.preventDefault();
565
+ // Here you would typically fetch the next page of results
566
+ // For demo purposes we'll just show an alert
567
+ if(this.textContent.trim() === '2' || this.textContent.trim() === '3') {
568
+ alert('Loading page ' + this.textContent.trim());
569
+ }
570
+ });
571
+ });
572
+ </script>
573
+ <script src="/static/script/alert.js"></script>
574
+
575
+
576
+ </body>
577
  </html>
578
+