Spaces:
Running
Running
Upload folder using huggingface_hub
Browse files- gradio_app.py +14 -98
gradio_app.py
CHANGED
@@ -302,10 +302,10 @@ def create_gradio_interface():
|
|
302 |
display: flex !important;
|
303 |
}
|
304 |
|
305 |
-
/* Modal Content -
|
306 |
.modal-content {
|
307 |
-
background:
|
308 |
-
border: 2px solid
|
309 |
border-radius: 16px !important;
|
310 |
max-width: 90vw !important;
|
311 |
max-height: 80vh !important;
|
@@ -314,7 +314,7 @@ def create_gradio_interface():
|
|
314 |
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
|
315 |
overflow: hidden !important;
|
316 |
flex-direction: column !important;
|
317 |
-
color:
|
318 |
}
|
319 |
|
320 |
/* Modal Header */
|
@@ -323,19 +323,19 @@ def create_gradio_interface():
|
|
323 |
align-items: center !important;
|
324 |
margin-bottom: 1rem !important;
|
325 |
padding-bottom: 1rem !important;
|
326 |
-
border-bottom: 1px solid
|
327 |
}
|
328 |
|
329 |
.modal-header h3 {
|
330 |
-
color:
|
331 |
margin: 0 !important;
|
332 |
}
|
333 |
|
334 |
-
/* Modal Close Button
|
335 |
.modal-close-btn {
|
336 |
-
background:
|
337 |
-
border: 1px solid
|
338 |
-
color:
|
339 |
font-weight: 700 !important;
|
340 |
font-size: 1.2rem !important;
|
341 |
padding: 0.4rem 0.6rem !important;
|
@@ -347,103 +347,19 @@ def create_gradio_interface():
|
|
347 |
}
|
348 |
|
349 |
.modal-close-btn:hover {
|
350 |
-
background:
|
351 |
}
|
352 |
|
353 |
-
/* Prompt Container
|
354 |
.prompt-container {
|
355 |
-
background:
|
356 |
-
border: 1px solid
|
357 |
border-radius: 8px !important;
|
358 |
max-height: 400px !important;
|
359 |
overflow-y: auto !important;
|
360 |
flex: 1 !important;
|
361 |
}
|
362 |
|
363 |
-
/* Dark mode specific overrides - both system and Gradio dark mode */
|
364 |
-
@media (prefers-color-scheme: dark),
|
365 |
-
.dark .modal-content,
|
366 |
-
.gradio-container.dark .modal-content,
|
367 |
-
html.dark .modal-content,
|
368 |
-
body.dark .modal-content {
|
369 |
-
.modal-content {
|
370 |
-
background: #1a1a1a !important;
|
371 |
-
border: 2px solid #404040 !important;
|
372 |
-
color: #e5e5e5 !important;
|
373 |
-
}
|
374 |
-
|
375 |
-
.modal-header {
|
376 |
-
border-bottom: 1px solid #404040 !important;
|
377 |
-
}
|
378 |
-
|
379 |
-
.modal-header h3 {
|
380 |
-
color: #e5e5e5 !important;
|
381 |
-
}
|
382 |
-
|
383 |
-
.modal-close-btn {
|
384 |
-
background: #404040 !important;
|
385 |
-
border: 1px solid #666 !important;
|
386 |
-
color: #e5e5e5 !important;
|
387 |
-
}
|
388 |
-
|
389 |
-
.modal-close-btn:hover {
|
390 |
-
background: #555 !important;
|
391 |
-
}
|
392 |
-
|
393 |
-
.prompt-container {
|
394 |
-
background: #2a2a2a !important;
|
395 |
-
border: 1px solid #404040 !important;
|
396 |
-
}
|
397 |
-
}
|
398 |
-
|
399 |
-
/* Gradio dark mode specific targeting */
|
400 |
-
.dark .modal-content,
|
401 |
-
.gradio-container.dark .modal-content,
|
402 |
-
html.dark .modal-content,
|
403 |
-
body.dark .modal-content {
|
404 |
-
background: #1a1a1a !important;
|
405 |
-
border: 2px solid #404040 !important;
|
406 |
-
color: #e5e5e5 !important;
|
407 |
-
}
|
408 |
-
|
409 |
-
.dark .modal-header,
|
410 |
-
.gradio-container.dark .modal-header,
|
411 |
-
html.dark .modal-header,
|
412 |
-
body.dark .modal-header {
|
413 |
-
border-bottom: 1px solid #404040 !important;
|
414 |
-
}
|
415 |
-
|
416 |
-
.dark .modal-header h3,
|
417 |
-
.gradio-container.dark .modal-header h3,
|
418 |
-
html.dark .modal-header h3,
|
419 |
-
body.dark .modal-header h3 {
|
420 |
-
color: #e5e5e5 !important;
|
421 |
-
}
|
422 |
-
|
423 |
-
.dark .modal-close-btn,
|
424 |
-
.gradio-container.dark .modal-close-btn,
|
425 |
-
html.dark .modal-close-btn,
|
426 |
-
body.dark .modal-close-btn {
|
427 |
-
background: #404040 !important;
|
428 |
-
border: 1px solid #666 !important;
|
429 |
-
color: #e5e5e5 !important;
|
430 |
-
}
|
431 |
-
|
432 |
-
.dark .modal-close-btn:hover,
|
433 |
-
.gradio-container.dark .modal-close-btn:hover,
|
434 |
-
html.dark .modal-close-btn:hover,
|
435 |
-
body.dark .modal-close-btn:hover {
|
436 |
-
background: #555 !important;
|
437 |
-
}
|
438 |
-
|
439 |
-
.dark .prompt-container,
|
440 |
-
.gradio-container.dark .prompt-container,
|
441 |
-
html.dark .prompt-container,
|
442 |
-
body.dark .prompt-container {
|
443 |
-
background: #2a2a2a !important;
|
444 |
-
border: 1px solid #404040 !important;
|
445 |
-
}
|
446 |
-
|
447 |
|
448 |
|
449 |
.generate-btn:hover {
|
|
|
302 |
display: flex !important;
|
303 |
}
|
304 |
|
305 |
+
/* Modal Content - consistent light theme */
|
306 |
.modal-content {
|
307 |
+
background: #fefcfa !important;
|
308 |
+
border: 2px solid #f0c5b8 !important;
|
309 |
border-radius: 16px !important;
|
310 |
max-width: 90vw !important;
|
311 |
max-height: 80vh !important;
|
|
|
314 |
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
|
315 |
overflow: hidden !important;
|
316 |
flex-direction: column !important;
|
317 |
+
color: #2d3748 !important;
|
318 |
}
|
319 |
|
320 |
/* Modal Header */
|
|
|
323 |
align-items: center !important;
|
324 |
margin-bottom: 1rem !important;
|
325 |
padding-bottom: 1rem !important;
|
326 |
+
border-bottom: 1px solid #f0c5b8 !important;
|
327 |
}
|
328 |
|
329 |
.modal-header h3 {
|
330 |
+
color: #2d3748 !important;
|
331 |
margin: 0 !important;
|
332 |
}
|
333 |
|
334 |
+
/* Modal Close Button */
|
335 |
.modal-close-btn {
|
336 |
+
background: #f4e6e1 !important;
|
337 |
+
border: 1px solid #e8a491 !important;
|
338 |
+
color: #5a3a2a !important;
|
339 |
font-weight: 700 !important;
|
340 |
font-size: 1.2rem !important;
|
341 |
padding: 0.4rem 0.6rem !important;
|
|
|
347 |
}
|
348 |
|
349 |
.modal-close-btn:hover {
|
350 |
+
background: #f0c5b8 !important;
|
351 |
}
|
352 |
|
353 |
+
/* Prompt Container */
|
354 |
.prompt-container {
|
355 |
+
background: #fcf3f0 !important;
|
356 |
+
border: 1px solid #f0c5b8 !important;
|
357 |
border-radius: 8px !important;
|
358 |
max-height: 400px !important;
|
359 |
overflow-y: auto !important;
|
360 |
flex: 1 !important;
|
361 |
}
|
362 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
363 |
|
364 |
|
365 |
.generate-btn:hover {
|