Hugging Face's logo

Spaces:
ASDAD34
/
anycoder-7002a0a5
Running

App Files Community
ASDAD34 commited on
Commit
2498666
·
verified ·
1 Parent(s): a52dfbb

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1135 -19
index.html CHANGED
@@ -1,19 +1,1135 @@
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="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ILO Akademi - LLaVA Automation Debugger</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --bg-primary: #0f172a;
11
+ --bg-secondary: #1e293b;
12
+ --bg-tertiary: #334155;
13
+ --accent-primary: #3b82f6;
14
+ --accent-secondary: #8b5cf6;
15
+ --accent-success: #10b981;
16
+ --accent-warning: #f59e0b;
17
+ --accent-error: #ef4444;
18
+ --text-primary: #f8fafc;
19
+ --text-secondary: #94a3b8;
20
+ --text-muted: #64748b;
21
+ --border-color: #475569;
22
+ --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
23
+ --radius-sm: 6px;
24
+ --radius-md: 12px;
25
+ --radius-lg: 16px;
26
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
27
+ }
28
+
29
+ * {
30
+ margin: 0;
31
+ padding: 0;
32
+ box-sizing: border-box;
33
+ }
34
+
35
+ body {
36
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
37
+ background: var(--bg-primary);
38
+ color: var(--text-primary);
39
+ line-height: 1.6;
40
+ overflow-x: hidden;
41
+ }
42
+
43
+ /* Custom Scrollbar */
44
+ ::-webkit-scrollbar {
45
+ width: 8px;
46
+ height: 8px;
47
+ }
48
+
49
+ ::-webkit-scrollbar-track {
50
+ background: var(--bg-secondary);
51
+ }
52
+
53
+ ::-webkit-scrollbar-thumb {
54
+ background: var(--bg-tertiary);
55
+ border-radius: 4px;
56
+ }
57
+
58
+ ::-webkit-scrollbar-thumb:hover {
59
+ background: var(--accent-primary);
60
+ }
61
+
62
+ /* Layout */
63
+ .app-container {
64
+ display: grid;
65
+ grid-template-columns: 280px 1fr;
66
+ grid-template-rows: auto 1fr;
67
+ min-height: 100vh;
68
+ gap: 1px;
69
+ background: var(--bg-secondary);
70
+ }
71
+
72
+ /* Header */
73
+ .header {
74
+ grid-column: 1 / -1;
75
+ background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
76
+ padding: 1rem 2rem;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: space-between;
80
+ border-bottom: 1px solid var(--border-color);
81
+ position: relative;
82
+ overflow: hidden;
83
+ }
84
+
85
+ .header::before {
86
+ content: '';
87
+ position: absolute;
88
+ top: 0;
89
+ left: 0;
90
+ right: 0;
91
+ height: 2px;
92
+ background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-success));
93
+ animation: gradient-shift 3s ease infinite;
94
+ }
95
+
96
+ @keyframes gradient-shift {
97
+ 0%, 100% { background-position: 0% 50%; }
98
+ 50% { background-position: 100% 50%; }
99
+ }
100
+
101
+ .brand {
102
+ display: flex;
103
+ align-items: center;
104
+ gap: 1rem;
105
+ z-index: 1;
106
+ }
107
+
108
+ .brand-icon {
109
+ width: 48px;
110
+ height: 48px;
111
+ background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
112
+ border-radius: var(--radius-md);
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ font-size: 1.5rem;
117
+ box-shadow: var(--shadow-glow);
118
+ }
119
+
120
+ .brand-text h1 {
121
+ font-size: 1.25rem;
122
+ font-weight: 700;
123
+ background: linear-gradient(to right, var(--text-primary), var(--accent-primary));
124
+ -webkit-background-clip: text;
125
+ -webkit-text-fill-color: transparent;
126
+ margin-bottom: 0.25rem;
127
+ }
128
+
129
+ .brand-text p {
130
+ font-size: 0.875rem;
131
+ color: var(--text-secondary);
132
+ }
133
+
134
+ .header-actions {
135
+ display: flex;
136
+ align-items: center;
137
+ gap: 1rem;
138
+ z-index: 1;
139
+ }
140
+
141
+ .anycoder-badge {
142
+ background: rgba(59, 130, 246, 0.1);
143
+ border: 1px solid var(--accent-primary);
144
+ color: var(--accent-primary);
145
+ padding: 0.5rem 1rem;
146
+ border-radius: 20px;
147
+ font-size: 0.875rem;
148
+ font-weight: 600;
149
+ text-decoration: none;
150
+ transition: var(--transition);
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 0.5rem;
154
+ }
155
+
156
+ .anycoder-badge:hover {
157
+ background: var(--accent-primary);
158
+ color: white;
159
+ transform: translateY(-2px);
160
+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
161
+ }
162
+
163
+ .status-indicator {
164
+ display: flex;
165
+ align-items: center;
166
+ gap: 0.5rem;
167
+ padding: 0.5rem 1rem;
168
+ background: var(--bg-tertiary);
169
+ border-radius: 20px;
170
+ font-size: 0.875rem;
171
+ }
172
+
173
+ .status-dot {
174
+ width: 8px;
175
+ height: 8px;
176
+ border-radius: 50%;
177
+ background: var(--accent-success);
178
+ animation: pulse 2s infinite;
179
+ }
180
+
181
+ @keyframes pulse {
182
+ 0%, 100% { opacity: 1; }
183
+ 50% { opacity: 0.5; }
184
+ }
185
+
186
+ /* Sidebar */
187
+ .sidebar {
188
+ background: var(--bg-secondary);
189
+ padding: 1.5rem;
190
+ display: flex;
191
+ flex-direction: column;
192
+ gap: 1.5rem;
193
+ border-right: 1px solid var(--border-color);
194
+ }
195
+
196
+ .nav-section {
197
+ display: flex;
198
+ flex-direction: column;
199
+ gap: 0.5rem;
200
+ }
201
+
202
+ .nav-title {
203
+ font-size: 0.75rem;
204
+ text-transform: uppercase;
205
+ letter-spacing: 0.05em;
206
+ color: var(--text-muted);
207
+ font-weight: 600;
208
+ padding: 0 0.75rem;
209
+ margin-bottom: 0.5rem;
210
+ }
211
+
212
+ .nav-item {
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 0.75rem;
216
+ padding: 0.75rem;
217
+ border-radius: var(--radius-sm);
218
+ color: var(--text-secondary);
219
+ text-decoration: none;
220
+ transition: var(--transition);
221
+ cursor: pointer;
222
+ border: none;
223
+ background: transparent;
224
+ font-size: 0.9375rem;
225
+ width: 100%;
226
+ text-align: left;
227
+ }
228
+
229
+ .nav-item:hover {
230
+ background: var(--bg-tertiary);
231
+ color: var(--text-primary);
232
+ }
233
+
234
+ .nav-item.active {
235
+ background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
236
+ color: var(--accent-primary);
237
+ border-left: 3px solid var(--accent-primary);
238
+ }
239
+
240
+ .nav-item i {
241
+ width: 20px;
242
+ text-align: center;
243
+ }
244
+
245
+ /* Main Content */
246
+ .main-content {
247
+ background: var(--bg-primary);
248
+ padding: 2rem;
249
+ overflow-y: auto;
250
+ display: flex;
251
+ flex-direction: column;
252
+ gap: 1.5rem;
253
+ }
254
+
255
+ .page-header {
256
+ display: flex;
257
+ justify-content: space-between;
258
+ align-items: center;
259
+ margin-bottom: 1rem;
260
+ }
261
+
262
+ .page-title {
263
+ font-size: 1.875rem;
264
+ font-weight: 700;
265
+ color: var(--text-primary);
266
+ }
267
+
268
+ .page-subtitle {
269
+ color: var(--text-secondary);
270
+ margin-top: 0.25rem;
271
+ }
272
+
273
+ /* Cards */
274
+ .card {
275
+ background: var(--bg-secondary);
276
+ border: 1px solid var(--border-color);
277
+ border-radius: var(--radius-lg);
278
+ overflow: hidden;
279
+ transition: var(--transition);
280
+ }
281
+
282
+ .card:hover {
283
+ border-color: var(--accent-primary);
284
+ box-shadow: var(--shadow-glow);
285
+ }
286
+
287
+ .card-header {
288
+ padding: 1.25rem 1.5rem;
289
+ border-bottom: 1px solid var(--border-color);
290
+ display: flex;
291
+ justify-content: space-between;
292
+ align-items: center;
293
+ background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), transparent);
294
+ }
295
+
296
+ .card-title {
297
+ font-size: 1.125rem;
298
+ font-weight: 600;
299
+ display: flex;
300
+ align-items: center;
301
+ gap: 0.5rem;
302
+ }
303
+
304
+ .card-body {
305
+ padding: 1.5rem;
306
+ }
307
+
308
+ /* Code Editor */
309
+ .code-editor {
310
+ background: #0d1117;
311
+ border-radius: var(--radius-md);
312
+ font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
313
+ overflow: hidden;
314
+ border: 1px solid var(--border-color);
315
+ }
316
+
317
+ .code-header {
318
+ background: #161b22;
319
+ padding: 0.75rem 1rem;
320
+ display: flex;
321
+ justify-content: space-between;
322
+ align-items: center;
323
+ border-bottom: 1px solid var(--border-color);
324
+ }
325
+
326
+ .code-tabs {
327
+ display: flex;
328
+ gap: 0.5rem;
329
+ }
330
+
331
+ .code-tab {
332
+ padding: 0.375rem 0.875rem;
333
+ background: transparent;
334
+ border: none;
335
+ color: var(--text-secondary);
336
+ font-size: 0.875rem;
337
+ cursor: pointer;
338
+ border-radius: var(--radius-sm);
339
+ transition: var(--transition);
340
+ }
341
+
342
+ .code-tab.active {
343
+ background: var(--accent-primary);
344
+ color: white;
345
+ }
346
+
347
+ .code-actions {
348
+ display: flex;
349
+ gap: 0.5rem;
350
+ }
351
+
352
+ .btn-icon {
353
+ width: 32px;
354
+ height: 32px;
355
+ border-radius: var(--radius-sm);
356
+ border: 1px solid var(--border-color);
357
+ background: var(--bg-secondary);
358
+ color: var(--text-secondary);
359
+ cursor: pointer;
360
+ transition: var(--transition);
361
+ display: flex;
362
+ align-items: center;
363
+ justify-content: center;
364
+ }
365
+
366
+ .btn-icon:hover {
367
+ background: var(--accent-primary);
368
+ color: white;
369
+ border-color: var(--accent-primary);
370
+ }
371
+
372
+ .code-content {
373
+ padding: 1.5rem;
374
+ overflow-x: auto;
375
+ font-size: 0.875rem;
376
+ line-height: 1.7;
377
+ }
378
+
379
+ .line-numbers {
380
+ color: var(--text-muted);
381
+ user-select: none;
382
+ text-align: right;
383
+ padding-right: 1.5rem;
384
+ border-right: 1px solid var(--border-color);
385
+ margin-right: 1.5rem;
386
+ float: left;
387
+ }
388
+
389
+ .code-text {
390
+ color: #e6edf3;
391
+ white-space: pre;
392
+ }
393
+
394
+ .keyword { color: #ff7b72; }
395
+ .string { color: #a5d6ff; }
396
+ .function { color: #d2a8ff; }
397
+ .comment { color: #8b949e; font-style: italic; }
398
+ .number { color: #79c0ff; }
399
+
400
+ /* Grid Layout */
401
+ .grid-2 {
402
+ display: grid;
403
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
404
+ gap: 1.5rem;
405
+ }
406
+
407
+ .grid-3 {
408
+ display: grid;
409
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
410
+ gap: 1.5rem;
411
+ }
412
+
413
+ /* Form Elements */
414
+ .form-group {
415
+ margin-bottom: 1.25rem;
416
+ }
417
+
418
+ .form-label {
419
+ display: block;
420
+ margin-bottom: 0.5rem;
421
+ font-size: 0.875rem;
422
+ font-weight: 500;
423
+ color: var(--text-secondary);
424
+ }
425
+
426
+ .form-input {
427
+ width: 100%;
428
+ padding: 0.75rem 1rem;
429
+ background: var(--bg-primary);
430
+ border: 1px solid var(--border-color);
431
+ border-radius: var(--radius-sm);
432
+ color: var(--text-primary);
433
+ font-size: 0.9375rem;
434
+ transition: var(--transition);
435
+ }
436
+
437
+ .form-input:focus {
438
+ outline: none;
439
+ border-color: var(--accent-primary);
440
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
441
+ }
442
+
443
+ .form-select {
444
+ appearance: none;
445
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
446
+ background-repeat: no-repeat;
447
+ background-position: right 1rem center;
448
+ padding-right: 2.5rem;
449
+ }
450
+
451
+ .toggle-switch {
452
+ position: relative;
453
+ display: inline-flex;
454
+ align-items: center;
455
+ cursor: pointer;
456
+ }
457
+
458
+ .toggle-input {
459
+ display: none;
460
+ }
461
+
462
+ .toggle-slider {
463
+ width: 48px;
464
+ height: 24px;
465
+ background: var(--bg-tertiary);
466
+ border-radius: 12px;
467
+ position: relative;
468
+ transition: var(--transition);
469
+ margin-right: 0.75rem;
470
+ }
471
+
472
+ .toggle-slider::after {
473
+ content: '';
474
+ position: absolute;
475
+ width: 20px;
476
+ height: 20px;
477
+ background: white;
478
+ border-radius: 50%;
479
+ top: 2px;
480
+ left: 2px;
481
+ transition: var(--transition);
482
+ }
483
+
484
+ .toggle-input:checked + .toggle-slider {
485
+ background: var(--accent-primary);
486
+ }
487
+
488
+ .toggle-input:checked + .toggle-slider::after {
489
+ transform: translateX(24px);
490
+ }
491
+
492
+ /* Console/Logs */
493
+ .console {
494
+ background: #0d1117;
495
+ border-radius: var(--radius-md);
496
+ border: 1px solid var(--border-color);
497
+ font-family: 'Consolas', monospace;
498
+ font-size: 0.875rem;
499
+ max-height: 400px;
500
+ overflow-y: auto;
501
+ }
502
+
503
+ .console-line {
504
+ padding: 0.5rem 1rem;
505
+ border-bottom: 1px solid rgba(255,255,255,0.05);
506
+ display: flex;
507
+ gap: 0.75rem;
508
+ }
509
+
510
+ .console-line:hover {
511
+ background: rgba(255,255,255,0.02);
512
+ }
513
+
514
+ .console-time {
515
+ color: var(--text-muted);
516
+ user-select: none;
517
+ }
518
+
519
+ .console-info { color: var(--accent-primary); }
520
+ .console-success { color: var(--accent-success); }
521
+ .console-warning { color: var(--accent-warning); }
522
+ .console-error { color: var(--accent-error); }
523
+
524
+ /* Buttons */
525
+ .btn {
526
+ display: inline-flex;
527
+ align-items: center;
528
+ justify-content: center;
529
+ gap: 0.5rem;
530
+ padding: 0.75rem 1.5rem;
531
+ border-radius: var(--radius-sm);
532
+ font-size: 0.9375rem;
533
+ font-weight: 500;
534
+ cursor: pointer;
535
+ transition: var(--transition);
536
+ border: none;
537
+ text-decoration: none;
538
+ }
539
+
540
+ .btn-primary {
541
+ background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
542
+ color: white;
543
+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
544
+ }
545
+
546
+ .btn-primary:hover {
547
+ transform: translateY(-2px);
548
+ box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
549
+ }
550
+
551
+ .btn-secondary {
552
+ background: var(--bg-tertiary);
553
+ color: var(--text-primary);
554
+ border: 1px solid var(--border-color);
555
+ }
556
+
557
+ .btn-secondary:hover {
558
+ background: var(--border-color);
559
+ }
560
+
561
+ .btn-success {
562
+ background: var(--accent-success);
563
+ color: white;
564
+ }
565
+
566
+ .btn-danger {
567
+ background: var(--accent-error);
568
+ color: white;
569
+ }
570
+
571
+ /* Screenshot Gallery */
572
+ .screenshot-grid {
573
+ display: grid;
574
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
575
+ gap: 1rem;
576
+ }
577
+
578
+ .screenshot-item {
579
+ aspect-ratio: 16/10;
580
+ background: var(--bg-tertiary);
581
+ border-radius: var(--radius-md);
582
+ overflow: hidden;
583
+ position: relative;
584
+ cursor: pointer;
585
+ transition: var(--transition);
586
+ border: 2px solid transparent;
587
+ }
588
+
589
+ .screenshot-item:hover {
590
+ transform: scale(1.05);
591
+ border-color: var(--accent-primary);
592
+ z-index: 10;
593
+ }
594
+
595
+ .screenshot-item img {
596
+ width: 100%;
597
+ height: 100%;
598
+ object-fit: cover;
599
+ }
600
+
601
+ .screenshot-overlay {
602
+ position: absolute;
603
+ bottom: 0;
604
+ left: 0;
605
+ right: 0;
606
+ background: linear-gradient(transparent, rgba(0,0,0,0.8));
607
+ padding: 1rem 0.75rem 0.75rem;
608
+ font-size: 0.75rem;
609
+ opacity: 0;
610
+ transition: var(--transition);
611
+ }
612
+
613
+ .screenshot-item:hover .screenshot-overlay {
614
+ opacity: 1;
615
+ }
616
+
617
+ /* Stats */
618
+ .stats-grid {
619
+ display: grid;
620
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
621
+ gap: 1rem;
622
+ margin-bottom: 1.5rem;
623
+ }
624
+
625
+ .stat-card {
626
+ background: var(--bg-secondary);
627
+ border: 1px solid var(--border-color);
628
+ border-radius: var(--radius-md);
629
+ padding: 1.25rem;
630
+ display: flex;
631
+ align-items: center;
632
+ gap: 1rem;
633
+ transition: var(--transition);
634
+ }
635
+
636
+ .stat-card:hover {
637
+ transform: translateY(-2px);
638
+ border-color: var(--accent-primary);
639
+ }
640
+
641
+ .stat-icon {
642
+ width: 48px;
643
+ height: 48px;
644
+ border-radius: var(--radius-sm);
645
+ display: flex;
646
+ align-items: center;
647
+ justify-content: center;
648
+ font-size: 1.25rem;
649
+ }
650
+
651
+ .stat-icon.blue { background: rgba(59, 130, 246, 0.1); color: var(--accent-primary); }
652
+ .stat-icon.purple { background: rgba(139, 92, 246, 0.1); color: var(--accent-secondary); }
653
+ .stat-icon.green { background: rgba(16, 185, 129, 0.1); color: var(--accent-success); }
654
+ .stat-icon.orange { background: rgba(245, 158, 11, 0.1); color: var(--accent-warning); }
655
+
656
+ .stat-info h3 {
657
+ font-size: 1.5rem;
658
+ font-weight: 700;
659
+ color: var(--text-primary);
660
+ }
661
+
662
+ .stat-info p {
663
+ font-size: 0.875rem;
664
+ color: var(--text-secondary);
665
+ }
666
+
667
+ /* Responsive */
668
+ @media (max-width: 1024px) {
669
+ .app-container {
670
+ grid-template-columns: 1fr;
671
+ }
672
+
673
+ .sidebar {
674
+ display: none;
675
+ position: fixed;
676
+ left: 0;
677
+ top: 0;
678
+ bottom: 0;
679
+ z-index: 100;
680
+ width: 280px;
681
+ box-shadow: 4px 0 24px rgba(0,0,0,0.5);
682
+ }
683
+
684
+ .sidebar.active {
685
+ display: flex;
686
+ }
687
+
688
+ .mobile-menu-btn {
689
+ display: flex !important;
690
+ }
691
+ }
692
+
693
+ @media (max-width: 640px) {
694
+ .header {
695
+ padding: 1rem;
696
+ }
697
+
698
+ .main-content {
699
+ padding: 1rem;
700
+ }
701
+
702
+ .grid-2, .grid-3 {
703
+ grid-template-columns: 1fr;
704
+ }
705
+
706
+ .page-header {
707
+ flex-direction: column;
708
+ align-items: flex-start;
709
+ gap: 1rem;
710
+ }
711
+ }
712
+
713
+ .mobile-menu-btn {
714
+ display: none;
715
+ width: 40px;
716
+ height: 40px;
717
+ align-items: center;
718
+ justify-content: center;
719
+ background: var(--bg-tertiary);
720
+ border: 1px solid var(--border-color);
721
+ color: var(--text-primary);
722
+ border-radius: var(--radius-sm);
723
+ cursor: pointer;
724
+ }
725
+
726
+ /* Animations */
727
+ .fade-in {
728
+ animation: fadeIn 0.5s ease-in;
729
+ }
730
+
731
+ @keyframes fadeIn {
732
+ from { opacity: 0; transform: translateY(10px); }
733
+ to { opacity: 1; transform: translateY(0); }
734
+ }
735
+
736
+ .loading-spinner {
737
+ display: inline-block;
738
+ width: 20px;
739
+ height: 20px;
740
+ border: 3px solid rgba(255,255,255,0.1);
741
+ border-radius: 50%;
742
+ border-top-color: var(--accent-primary);
743
+ animation: spin 1s ease-in-out infinite;
744
+ }
745
+
746
+ @keyframes spin {
747
+ to { transform: rotate(360deg); }
748
+ }
749
+
750
+ /* Tooltip */
751
+ [data-tooltip] {
752
+ position: relative;
753
+ }
754
+
755
+ [data-tooltip]::after {
756
+ content: attr(data-tooltip);
757
+ position: absolute;
758
+ bottom: 100%;
759
+ left: 50%;
760
+ transform: translateX(-50%);
761
+ padding: 0.5rem 0.75rem;
762
+ background: var(--bg-tertiary);
763
+ color: var(--text-primary);
764
+ font-size: 0.75rem;
765
+ border-radius: var(--radius-sm);
766
+ white-space: nowrap;
767
+ opacity: 0;
768
+ pointer-events: none;
769
+ transition: var(--transition);
770
+ margin-bottom: 0.5rem;
771
+ border: 1px solid var(--border-color);
772
+ }
773
+
774
+ [data-tooltip]:hover::after {
775
+ opacity: 1;
776
+ }
777
+ </style>
778
+ </head>
779
+ <body>
780
+ <div class="app-container">
781
+ <!-- Header -->
782
+ <header class="header">
783
+ <div class="brand">
784
+ <button class="mobile-menu-btn" onclick="toggleSidebar()">
785
+ <i class="fas fa-bars"></i>
786
+ </button>
787
+ <div class="brand-icon">
788
+ <i class="fas fa-robot"></i>
789
+ </div>
790
+ <div class="brand-text">
791
+ <h1>ILO Akademi Automation</h1>
792
+ <p>LLaVA Vision Debugger v5.0</p>
793
+ </div>
794
+ </div>
795
+
796
+ <div class="header-actions">
797
+ <div class="status-indicator">
798
+ <span class="status-dot"></span>
799
+ <span>Ollama Connected</span>
800
+ </div>
801
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge">
802
+ <i class="fas fa-code"></i>
803
+ Built with anycoder
804
+ </a>
805
+ </div>
806
+ </header>
807
+
808
+ <!-- Sidebar -->
809
+ <aside class="sidebar" id="sidebar">
810
+ <div class="nav-section">
811
+ <div class="nav-title">Ana Menü</div>
812
+ <button class="nav-item active" onclick="switchTab('dashboard')">
813
+ <i class="fas fa-home"></i>
814
+ <span>Dashboard</span>
815
+ </button>
816
+ <button class="nav-item" onclick="switchTab('code')">
817
+ <i class="fas fa-code"></i>
818
+ <span>Kod Düzenleyici</span>
819
+ </button>
820
+ <button class="nav-item" onclick="switchTab('config')">
821
+ <i class="fas fa-cog"></i>
822
+ <span>Yapılandırma</span>
823
+ </button>
824
+ </div>
825
+
826
+ <div class="nav-section">
827
+ <div class="nav-title">İzleme</div>
828
+ <button class="nav-item" onclick="switchTab('logs')">
829
+ <i class="fas fa-terminal"></i>
830
+ <span>Konsol Logları</span>
831
+ </button>
832
+ <button class="nav-item" onclick="switchTab('screenshots')">
833
+ <i class="fas fa-images"></i>
834
+ <span>Ekran Görüntüleri</span>
835
+ </button>
836
+ <button class="nav-item" onclick="switchTab('network')">
837
+ <i class="fas fa-network-wired"></i>
838
+ <span>Ağ İstekleri</span>
839
+ </button>
840
+ </div>
841
+
842
+ <div class="nav-section">
843
+ <div class="nav-title">Aksiyonlar</div>
844
+ <button class="nav-item" onclick="runDiagnostics()">
845
+ <i class="fas fa-stethoscope"></i>
846
+ <span>Diyagnostik Çalıştır</span>
847
+ </button>
848
+ <button class="nav-item" onclick="fixScript()" style="color: var(--accent-success);">
849
+ <i class="fas fa-magic"></i>
850
+ <span>Script'i Düzelt</span>
851
+ </button>
852
+ </div>
853
+
854
+ <div style="margin-top: auto; padding: 1rem; background: var(--bg-tertiary); border-radius: var(--radius-md);">
855
+ <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
856
+ <i class="fas fa-microchip" style="color: var(--accent-primary);"></i>
857
+ <span style="font-weight: 600; font-size: 0.875rem;">Sistem Durumu</span>
858
+ </div>
859
+ <div style="font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5;">
860
+ <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
861
+ <span>LLaVA Model:</span>
862
+ <span style="color: var(--accent-success);">Aktif</span>
863
+ </div>
864
+ <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
865
+ <span>Playwright:</span>
866
+ <span style="color: var(--accent-success);">Bağlı</span>
867
+ </div>
868
+ <div style="display: flex; justify-content: space-between;">
869
+ <span>Otomasyon:</span>
870
+ <span style="color: var(--accent-warning);">Bekliyor</span>
871
+ </div>
872
+ </div>
873
+ </div>
874
+ </aside>
875
+
876
+ <!-- Main Content -->
877
+ <main class="main-content">
878
+ <!-- Dashboard Tab -->
879
+ <div id="tab-dashboard" class="tab-content fade-in">
880
+ <div class="page-header">
881
+ <div>
882
+ <h2 class="page-title">Kontrol Paneli</h2>
883
+ <p class="page-subtitle">ILO Akademi otomasyon scriptinin durumu ve analizi</p>
884
+ </div>
885
+ <div style="display: flex; gap: 0.75rem;">
886
+ <button class="btn btn-secondary" onclick="clearLogs()">
887
+ <i class="fas fa-trash"></i> Temizle
888
+ </button>
889
+ <button class="btn btn-primary" onclick="startAutomation()">
890
+ <i class="fas fa-play"></i> Başlat
891
+ </button>
892
+ </div>
893
+ </div>
894
+
895
+ <div class="stats-grid">
896
+ <div class="stat-card">
897
+ <div class="stat-icon blue">
898
+ <i class="fas fa-bug"></i>
899
+ </div>
900
+ <div class="stat-info">
901
+ <h3>12</h3>
902
+ <p>Tespit Edilen Hata</p>
903
+ </div>
904
+ </div>
905
+ <div class="stat-card">
906
+ <div class="stat-icon purple">
907
+ <i class="fas fa-eye"></i>
908
+ </div>
909
+ <div class="stat-info">
910
+ <h3>LLaVA</h3>
911
+ <p>Vision Model</p>
912
+ </div>
913
+ </div>
914
+ <div class="stat-card">
915
+ <div class="stat-icon green">
916
+ <i class="fas fa-check-circle"></i>
917
+ </div>
918
+ <div class="stat-info">
919
+ <h3>85%</h3>
920
+ <p>Başarı Oranı</p>
921
+ </div>
922
+ </div>
923
+ <div class="stat-card">
924
+ <div class="stat-icon orange">
925
+ <i class="fas fa-clock"></i>
926
+ </div>
927
+ <div class="stat-info">
928
+ <h3>2.3s</h3>
929
+ <p>Ort. Yanıt Süresi</p>
930
+ </div>
931
+ </div>
932
+ </div>
933
+
934
+ <div class="grid-2">
935
+ <div class="card">
936
+ <div class="card-header">
937
+ <div class="card-title">
938
+ <i class="fas fa-exclamation-triangle" style="color: var(--accent-warning);"></i>
939
+ Tespit Edilen Sorunlar
940
+ </div>
941
+ <button class="btn-icon" onclick="refreshIssues()" title="Yenile">
942
+ <i class="fas fa-sync-alt"></i>
943
+ </button>
944
+ </div>
945
+ <div class="card-body">
946
+ <div id="issues-list" style="display: flex; flex-direction: column; gap: 0.75rem;">
947
+ <div style="padding: 1rem; background: rgba(239, 68, 68, 0.1); border-left: 3px solid var(--accent-error); border-radius: var(--radius-sm);">
948
+ <div style="font-weight: 600; margin-bottom: 0.25rem; color: var(--accent-error);">
949
+ <i class="fas fa-times-circle"></i> API Endpoint Hatası
950
+ </div>
951
+ <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">
952
+ LLaVA API çağrısında yanlış endpoint kullanımı (/api/generate yerine /api/chat kullanılmalı)
953
+ </div>
954
+ <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.75rem;" onclick="fixIssue('endpoint')">
955
+ <i class="fas fa-wrench"></i> Düzelt
956
+ </button>
957
+ </div>
958
+
959
+ <div style="padding: 1rem; background: rgba(245, 158, 11, 0.1); border-left: 3px solid var(--accent-warning); border-radius: var(--radius-sm);">
960
+ <div style="font-weight: 600; margin-bottom: 0.25rem; color: var(--accent-warning);">
961
+ <i class="fas fa-exclamation-circle"></i> JSON Parse Hatası
962
+ </div>
963
+ <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">
964
+ Trailing comma temizleme regex'i hatalı çalışıyor
965
+ </div>
966
+ <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.75rem;" onclick="fixIssue('json')">
967
+ <i class="fas fa-wrench"></i> Düzelt
968
+ </button>
969
+ </div>
970
+
971
+ <div style="padding: 1rem; background: rgba(59, 130, 246, 0.1); border-left: 3px solid var(--accent-primary); border-radius: var(--radius-sm);">
972
+ <div style="font-weight: 600; margin-bottom: 0.25rem; color: var(--accent-primary);">
973
+ <i class="fas fa-info-circle"></i> Fallback Mantığı
974
+ </div>
975
+ <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">
976
+ USE_LOCAL_LLM ve USE_VISION flag'leri arasında mantıksal çakışma var
977
+ </div>
978
+ <button class="btn btn-secondary" style="padding: 0.375rem 0.75rem; font-size: 0.75rem;" onclick="fixIssue('fallback')">
979
+ <i class="fas fa-wrench"></i> Düzelt
980
+ </button>
981
+ </div>
982
+ </div>
983
+ </div>
984
+ </div>
985
+
986
+ <div class="card">
987
+ <div class="card-header">
988
+ <div class="card-title">
989
+ <i class="fas fa-terminal" style="color: var(--accent-success);"></i>
990
+ Canlı Log
991
+ </div>
992
+ <div style="display: flex; gap: 0.5rem;">
993
+ <span style="font-size: 0.75rem; color: var(--text-muted); padding: 0.25rem 0.5rem; background: var(--bg-primary); border-radius: 4px;">
994
+ <i class="fas fa-circle" style="color: var(--accent-error); font-size: 0.5rem; animation: pulse 2s infinite;"></i> LIVE
995
+ </span>
996
+ </div>
997
+ </div>
998
+ <div class="card-body" style="padding: 0;">
999
+ <div class="console" id="live-console">
1000
+ <div class="console-line">
1001
+ <span class="console-time">10:42:15</span>
1002
+ <span class="console-info">[INFO]</span>
1003
+ <span>Sistem başlatılıyor...</span>
1004
+ </div>
1005
+ <div class="console-line">
1006
+ <span class="console-time">10:42:16</span>
1007
+ <span class="console-success">[OK]</span>
1008
+ <span>Ollama bağlantısı başarılı (localhost:11434)</span>
1009
+ </div>
1010
+ <div class="console-line">
1011
+ <span class="console-time">10:42:17</span>
1012
+ <span class="console-warning">[WARN]</span>
1013
+ <span>LLaVA modeli kontrol ediliyor...</span>
1014
+ </div>
1015
+ <div class="console-line">
1016
+ <span class="console-time">10:42:18</span>
1017
+ <span class="console-success">[OK]</span>
1018
+ <span>LLaVA:13b modeli aktif</span>
1019
+ </div>
1020
+ <div class="console-line">
1021
+ <span class="console-time">10:42:20</span>
1022
+ <span class="console-error">[ERROR]</span>
1023
+ <span>API Endpoint hatası: 404 Not Found (/api/generate)</span>
1024
+ </div>
1025
+ <div class="console-line">
1026
+ <span class="console-time">10:42:20</span>
1027
+ <span class="console-warning">[WARN]</span>
1028
+ <span>Fallback: /api/chat endpoint'ine geçiliyor...</span>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+
1036
+ <!-- Code Editor Tab -->
1037
+ <div id="tab-code" class="tab-content" style="display: none;">
1038
+ <div class="page-header">
1039
+ <div>
1040
+ <h2 class="page-title">Kod Düzenleyici</h2>
1041
+ <p class="page-subtitle">Python scriptini düzenleyin ve hataları giderin</p>
1042
+ </div>
1043
+ <div style="display: flex; gap: 0.75rem;">
1044
+ <button class="btn btn-secondary" onclick="copyCode()">
1045
+ <i class="fas fa-copy"></i> Kopyala
1046
+ </button>
1047
+ <button class="btn btn-primary" onclick="saveCode()">
1048
+ <i class="fas fa-save"></i> Kaydet
1049
+ </button>
1050
+ </div>
1051
+ </div>
1052
+
1053
+ <div class="code-editor">
1054
+ <div class="code-header">
1055
+ <div class="code-tabs">
1056
+ <button class="code-tab active">main.py</button>
1057
+ <button class="code-tab">vision_agent.py</button>
1058
+ <button class="code-tab">config.py</button>
1059
+ </div>
1060
+ <div class="code-actions">
1061
+ <button class="btn-icon" data-tooltip="Format Code">
1062
+ <i class="fas fa-align-left"></i>
1063
+ </button>
1064
+ <button class="btn-icon" data-tooltip="Search">
1065
+ <i class="fas fa-search"></i>
1066
+ </button>
1067
+ <button class="btn-icon" data-tooltip="Settings">
1068
+ <i class="fas fa-ellipsis-v"></i>
1069
+ </button>
1070
+ </div>
1071
+ </div>
1072
+ <div class="code-content" id="code-editor-content">
1073
+ <div class="line-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20</div>
1074
+ <div class="code-text"><span class="keyword">async def</span> <span class="function">analyze_screenshot_with_llava</span>(<span class="text">screenshot_b64</span>, <span class="text">task_context</span>=<span class="string">""</span>):
1075
+ <span class="comment">"""
1076
+ LLaVA ile ekran görüntüsünü analiz et.
1077
+ DÜZELTME: /api/chat endpoint'i kullanılmalı
1078
+ """</span>
1079
+ <span class="keyword">try</span>:
1080
+ <span class="keyword">async with</span> httpx.AsyncClient(<span class="text">timeout</span>=<span class="number">180.0</span>) <span class="keyword">as</span> client:
1081
+ response = <span class="keyword">await</span> client.post(
1082
+ <span class="string">f"{OLLAMA_BASE_URL}/api/chat"</span>, <span class="comment"># DOĞRU ENDPOINT</span>
1083
+ <span class="text">json</span>={
1084
+ <span class="string">"model"</span>: VISION_MODEL,
1085
+ <span class="string">"messages"</span>: [
1086
+ {
1087
+ <span class="string">"role"</span>: <span class="string">"user"</span>,
1088
+ <span class="string">"content"</span>: prompt,
1089
+ <span class="string">"images"</span>: [screenshot_b64] <span class="keyword">if</span> screenshot_b64 <span class="keyword">else</span> []
1090
+ }
1091
+ ],
1092
+ <span class="string">"stream"</span>: <span class="keyword">False</span>,
1093
+ <span class="string">"options"</span>: {
1094
+ <span class="string">"temperature"</span>: <span class="number">0.1</span>,
1095
+ <span class="string">"num_predict"</span>: <span class="number">4000</span>
1096
+ }
1097
+ }
1098
+ )
1099
+
1100
+ <span class="keyword">if</span> response.status_code == <span class="number">200</span>:
1101
+ result = response.json()
1102
+ content = result.get(<span class="string">"message"</span>, {}).get(<span class="string">"content"</span>, <span class="string">""</span>)
1103
+ <span class="keyword">return</span> safe_json_parse(content)
1104
+
1105
+ <span class="keyword">except</span> Exception <span class="keyword">as</span> e:
1106
+ <span class="keyword">return</span> {<span class="string">"error"</span>: <span class="function">str</span>(e)}</div>
1107
+ </div>
1108
+ </div>
1109
+
1110
+ <div class="grid-2" style="margin-top: 1.5rem;">
1111
+ <div class="card">
1112
+ <div class="card-header">
1113
+ <div class="card-title">
1114
+ <i class="fas fa-lightbulb" style="color: var(--accent-warning);"></i>
1115
+ Düzeltme Önerileri
1116
+ </div>
1117
+ </div>
1118
+ <div class="card-body">
1119
+ <ul style="list-style: none; display: flex; flex-direction: column; gap: 0.75rem;">
1120
+ <li style="display: flex; gap: 0.75rem; align-items: flex-start;">
1121
+ <i class="fas fa-check-circle" style="color: var(--accent-success); margin-top: 0.25rem;"></i>
1122
+ <div>
1123
+ <div style="font-weight: 500; margin-bottom: 0.25rem;">Endpoint Değişikliği</div>
1124
+ <div style="font-size: 0.875rem; color: var(--text-secondary);">/api/generate yerine /api/chat kullanın (LLaVA multimodal desteği için)</div>
1125
+ </div>
1126
+ </li>
1127
+ <li style="display: flex; gap: 0.75rem; align-items: flex-start;">
1128
+ <i class="fas fa-check-circle" style="color: var(--accent-success); margin-top: 0.25rem;"></i>
1129
+ <div>
1130
+ <div style="font-weight: 500; margin-bottom: 0.25rem;">Message Formatı</div>
1131
+ <div style="font-size: 0.875rem; color: var(--text-secondary);">images array'ini message içinde gönderin, ayrı parametre olarak değil</div>
1132
+ </div>
1133
+ </li>
1134
+ <li style="display: flex; gap: 0.75rem; align-items: flex-start;">
1135
+ <i class="fas fa-check-circle" style="color: