Hugging Face's logo

Spaces:
cfalk43
/
anycoder-feea4562
Running

App Files Community
cfalk43 commited on
Commit
863c5e0
·
verified ·
1 Parent(s): 1ddfd0a

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +423 -50
style.css CHANGED
@@ -1,76 +1,449 @@
1
  * {
2
- box-sizing: border-box;
3
- padding: 0;
4
- margin: 0;
5
- font-family: sans-serif;
6
  }
7
 
8
- html,
9
  body {
10
- height: 100%;
 
 
 
11
  }
12
 
13
- body {
14
- padding: 32px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
 
17
- body,
18
- #container {
19
- display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
- align-items: center;
 
 
 
 
 
 
 
 
 
23
  }
24
 
25
- #container {
26
- position: relative;
27
- gap: 0.4rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
 
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
 
 
 
 
 
 
 
 
 
 
 
33
 
34
- border: 2px dashed #D1D5DB;
35
- border-radius: 0.75rem;
36
- overflow: hidden;
37
- cursor: pointer;
38
- margin: 1rem;
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
 
 
44
  }
45
 
46
- #upload {
47
- display: none;
 
48
  }
49
 
50
- svg {
51
- pointer-events: none;
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
57
- cursor: pointer;
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
 
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
68
  }
69
 
70
- .bounding-box-label {
71
- color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
 
 
76
  }
 
1
  * {
2
+ box-sizing: border-box;
3
+ margin: 0;
4
+ padding: 0;
 
5
  }
6
 
 
7
  body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
9
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
10
+ min-height: 100vh;
11
+ color: #e4e4e7;
12
  }
13
 
14
+ .container {
15
+ max-width: 900px;
16
+ margin: 0 auto;
17
+ padding: 20px;
18
+ min-height: 100vh;
19
+ display: flex;
20
+ flex-direction: column;
21
+ }
22
+
23
+ header {
24
+ text-align: center;
25
+ margin-bottom: 24px;
26
+ }
27
+
28
+ header h1 {
29
+ font-size: 2.5rem;
30
+ background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
31
+ -webkit-background-clip: text;
32
+ -webkit-text-fill-color: transparent;
33
+ background-clip: text;
34
+ margin-bottom: 8px;
35
+ }
36
+
37
+ .subtitle {
38
+ color: #a1a1aa;
39
+ font-size: 1.1rem;
40
+ }
41
+
42
+ .attribution {
43
+ display: inline-block;
44
+ margin-top: 12px;
45
+ padding: 6px 16px;
46
+ background: rgba(96, 165, 250, 0.2);
47
+ border: 1px solid rgba(96, 165, 250, 0.3);
48
+ border-radius: 20px;
49
+ color: #60a5fa;
50
+ text-decoration: none;
51
+ font-size: 0.9rem;
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .attribution:hover {
56
+ background: rgba(96, 165, 250, 0.3);
57
+ transform: translateY(-2px);
58
+ }
59
+
60
+ .model-selector {
61
+ display: flex;
62
+ gap: 12px;
63
+ align-items: center;
64
+ justify-content: center;
65
+ flex-wrap: wrap;
66
+ margin-bottom: 24px;
67
+ padding: 20px;
68
+ background: rgba(255, 255, 255, 0.05);
69
+ border-radius: 16px;
70
+ border: 1px solid rgba(255, 255, 255, 0.1);
71
+ }
72
+
73
+ .model-selector label {
74
+ font-weight: 600;
75
+ color: #d4d4d8;
76
+ }
77
+
78
+ .model-selector select {
79
+ padding: 12px 16px;
80
+ border-radius: 8px;
81
+ border: 1px solid rgba(255, 255, 255, 0.2);
82
+ background: rgba(255, 255, 255, 0.1);
83
+ color: #e4e4e7;
84
+ font-size: 1rem;
85
+ min-width: 280px;
86
+ cursor: pointer;
87
+ }
88
+
89
+ .model-selector select:focus {
90
+ outline: none;
91
+ border-color: #60a5fa;
92
+ }
93
+
94
+ .model-selector select option {
95
+ background: #1a1a2e;
96
+ color: #e4e4e7;
97
+ }
98
+
99
+ .btn {
100
+ padding: 12px 24px;
101
+ border: none;
102
+ border-radius: 8px;
103
+ font-size: 1rem;
104
+ font-weight: 600;
105
+ cursor: pointer;
106
+ transition: all 0.3s ease;
107
+ }
108
+
109
+ .btn:disabled {
110
+ opacity: 0.5;
111
+ cursor: not-allowed;
112
+ }
113
+
114
+ .btn-primary {
115
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
116
+ color: white;
117
+ }
118
+
119
+ .btn-primary:hover:not(:disabled) {
120
+ transform: translateY(-2px);
121
+ box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
122
+ }
123
+
124
+ .btn-secondary {
125
+ background: rgba(255, 255, 255, 0.1);
126
+ color: #e4e4e7;
127
+ border: 1px solid rgba(255, 255, 255, 0.2);
128
+ }
129
+
130
+ .btn-secondary:hover:not(:disabled) {
131
+ background: rgba(255, 255, 255, 0.2);
132
+ }
133
+
134
+ .btn-icon {
135
+ padding: 12px;
136
+ font-size: 1.2rem;
137
+ background: rgba(255, 255, 255, 0.1);
138
+ border: 1px solid rgba(255, 255, 255, 0.2);
139
+ border-radius: 8px;
140
+ }
141
+
142
+ .btn-icon:hover:not(:disabled) {
143
+ background: rgba(255, 255, 255, 0.2);
144
+ }
145
+
146
+ .loading-container {
147
+ text-align: center;
148
+ padding: 40px;
149
+ background: rgba(255, 255, 255, 0.05);
150
+ border-radius: 16px;
151
+ border: 1px solid rgba(255, 255, 255, 0.1);
152
+ }
153
+
154
+ .loading-spinner {
155
+ width: 60px;
156
+ height: 60px;
157
+ border: 4px solid rgba(255, 255, 255, 0.1);
158
+ border-top-color: #60a5fa;
159
+ border-radius: 50%;
160
+ animation: spin 1s linear infinite;
161
+ margin: 0 auto 20px;
162
+ }
163
+
164
+ @keyframes spin {
165
+ to { transform: rotate(360deg); }
166
+ }
167
+
168
+ .progress-bar-container {
169
+ width: 100%;
170
+ max-width: 400px;
171
+ height: 8px;
172
+ background: rgba(255, 255, 255, 0.1);
173
+ border-radius: 4px;
174
+ margin: 16px auto;
175
+ overflow: hidden;
176
+ }
177
+
178
+ .progress-bar {
179
+ height: 100%;
180
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
181
+ border-radius: 4px;
182
+ width: 0%;
183
+ transition: width 0.3s ease;
184
+ }
185
+
186
+ #progress-text {
187
+ color: #a1a1aa;
188
+ font-size: 0.9rem;
189
+ }
190
+
191
+ .chat-container {
192
+ flex: 1;
193
+ display: flex;
194
+ flex-direction: column;
195
+ background: rgba(255, 255, 255, 0.05);
196
+ border-radius: 16px;
197
+ border: 1px solid rgba(255, 255, 255, 0.1);
198
+ overflow: hidden;
199
+ }
200
+
201
+ .chat-messages {
202
+ flex: 1;
203
+ overflow-y: auto;
204
+ padding: 20px;
205
+ min-height: 300px;
206
+ max-height: 500px;
207
+ }
208
+
209
+ .welcome-message {
210
+ text-align: center;
211
+ padding: 40px;
212
+ color: #a1a1aa;
213
+ }
214
+
215
+ .welcome-message .hint {
216
+ font-size: 0.9rem;
217
+ margin-top: 8px;
218
+ opacity: 0.7;
219
+ }
220
+
221
+ .message {
222
+ margin-bottom: 16px;
223
+ display: flex;
224
+ flex-direction: column;
225
+ }
226
+
227
+ .message.user {
228
+ align-items: flex-end;
229
+ }
230
+
231
+ .message.assistant {
232
+ align-items: flex-start;
233
+ }
234
+
235
+ .message-content {
236
+ max-width: 80%;
237
+ padding: 12px 16px;
238
+ border-radius: 16px;
239
+ line-height: 1.5;
240
+ }
241
+
242
+ .message.user .message-content {
243
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
244
+ color: white;
245
+ border-bottom-right-radius: 4px;
246
+ }
247
+
248
+ .message.assistant .message-content {
249
+ background: rgba(255, 255, 255, 0.1);
250
+ color: #e4e4e7;
251
+ border-bottom-left-radius: 4px;
252
+ }
253
+
254
+ .message-image {
255
+ max-width: 200px;
256
+ max-height: 200px;
257
+ border-radius: 12px;
258
+ margin-bottom: 8px;
259
+ }
260
+
261
+ .message-label {
262
+ font-size: 0.75rem;
263
+ color: #71717a;
264
+ margin-bottom: 4px;
265
+ padding: 0 8px;
266
+ }
267
+
268
+ .typing-indicator {
269
+ display: flex;
270
+ gap: 4px;
271
+ padding: 8px;
272
+ }
273
+
274
+ .typing-indicator span {
275
+ width: 8px;
276
+ height: 8px;
277
+ background: #60a5fa;
278
+ border-radius: 50%;
279
+ animation: bounce 1.4s infinite ease-in-out;
280
+ }
281
+
282
+ .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
283
+ .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
284
+
285
+ @keyframes bounce {
286
+ 0%, 80%, 100% { transform: scale(0); }
287
+ 40% { transform: scale(1); }
288
+ }
289
+
290
+ .image-preview-container {
291
+ position: relative;
292
+ padding: 12px 20px;
293
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
294
+ }
295
+
296
+ .image-preview-container img {
297
+ max-width: 150px;
298
+ max-height: 150px;
299
+ border-radius: 8px;
300
  }
301
 
302
+ .remove-image-btn {
303
+ position: absolute;
304
+ top: 8px;
305
+ left: 130px;
306
+ width: 24px;
307
+ height: 24px;
308
+ border-radius: 50%;
309
+ border: none;
310
+ background: #ef4444;
311
+ color: white;
312
+ font-size: 16px;
313
+ cursor: pointer;
314
+ display: flex;
315
+ align-items: center;
316
+ justify-content: center;
317
  }
318
 
319
+ .input-container {
320
+ padding: 16px 20px;
321
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
322
+ }
323
+
324
+ .input-row {
325
+ display: flex;
326
+ gap: 8px;
327
+ margin-bottom: 8px;
328
+ }
329
+
330
+ .input-row:last-child {
331
+ margin-bottom: 0;
332
+ }
333
+
334
+ .image-url-input {
335
+ flex: 1;
336
+ padding: 10px 14px;
337
+ border-radius: 8px;
338
+ border: 1px solid rgba(255, 255, 255, 0.2);
339
+ background: rgba(255, 255, 255, 0.1);
340
+ color: #e4e4e7;
341
+ font-size: 0.9rem;
342
+ }
343
+
344
+ .image-url-input:focus {
345
+ outline: none;
346
+ border-color: #60a5fa;
347
+ }
348
+
349
+ #user-input {
350
+ flex: 1;
351
+ padding: 12px 16px;
352
+ border-radius: 8px;
353
+ border: 1px solid rgba(255, 255, 255, 0.2);
354
+ background: rgba(255, 255, 255, 0.1);
355
+ color: #e4e4e7;
356
+ font-size: 1rem;
357
+ resize: none;
358
+ font-family: inherit;
359
+ }
360
+
361
+ #user-input:focus {
362
+ outline: none;
363
+ border-color: #60a5fa;
364
+ }
365
+
366
+ .settings-panel {
367
+ padding: 12px 20px;
368
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
369
+ }
370
+
371
+ .settings-panel summary {
372
+ cursor: pointer;
373
+ color: #a1a1aa;
374
+ font-size: 0.9rem;
375
+ }
376
+
377
+ .settings-grid {
378
+ display: grid;
379
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
380
+ gap: 16px;
381
+ margin-top: 16px;
382
+ }
383
+
384
+ .setting-item label {
385
+ display: block;
386
+ margin-bottom: 8px;
387
+ color: #d4d4d8;
388
+ font-size: 0.9rem;
389
+ }
390
 
391
+ .setting-item input[type="range"] {
392
+ width: 100%;
393
+ accent-color: #60a5fa;
394
+ }
395
+
396
+ .error-container {
397
+ padding: 16px 20px;
398
+ background: rgba(239, 68, 68, 0.2);
399
+ border: 1px solid rgba(239, 68, 68, 0.3);
400
+ border-radius: 12px;
401
+ margin-top: 16px;
402
+ display: flex;
403
+ justify-content: space-between;
404
+ align-items: center;
405
+ }
406
 
407
+ #error-message {
408
+ color: #fca5a5;
409
+ }
 
 
410
 
411
+ footer {
412
+ text-align: center;
413
+ margin-top: 24px;
414
+ padding: 16px;
415
+ color: #71717a;
416
+ font-size: 0.9rem;
417
  }
418
 
419
+ footer a {
420
+ color: #60a5fa;
421
+ text-decoration: none;
422
  }
423
 
424
+ footer a:hover {
425
+ text-decoration: underline;
426
  }
427
 
428
+ .hidden {
429
+ display: none !important;
 
 
430
  }
431
 
432
+ @media (max-width: 600px) {
433
+ header h1 {
434
+ font-size: 1.8rem;
435
  }
436
 
437
+ .model-selector {
438
+ flex-direction: column;
 
 
439
  }
440
 
441
+ .model-selector select {
442
+ width: 100%;
443
+ min-width: unset;
444
+ }
445
+
446
+ .message-content {
447
+ max-width: 90%;
448
+ }
449
  }