Spaces:
Running
Running
Update ui/config.py
Browse files- ui/config.py +87 -0
ui/config.py
CHANGED
|
@@ -1,5 +1,92 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
# Custom CSS for enhanced UI
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 3 |
custom_css = """
|
| 4 |
/* Global App Styling */
|
| 5 |
.gradio-container {
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
# Custom CSS for enhanced UI
|
| 3 |
+
|
| 4 |
+
custom_title_css = """
|
| 5 |
+
.main-title {
|
| 6 |
+
font-size: 3.5rem !important;
|
| 7 |
+
font-weight: 800 !important;
|
| 8 |
+
background: linear-gradient(135deg, #0077B5, #00A0DC, #0066CC) !important;
|
| 9 |
+
-webkit-background-clip: text !important;
|
| 10 |
+
-webkit-text-fill-color: transparent !important;
|
| 11 |
+
background-clip: text !important;
|
| 12 |
+
text-align: center !important;
|
| 13 |
+
margin: 1.5rem 0 0.5rem 0 !important;
|
| 14 |
+
letter-spacing: -0.02em !important;
|
| 15 |
+
line-height: 1.1 !important;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
.main-subtitle {
|
| 19 |
+
font-size: 1.3rem !important;
|
| 20 |
+
color: #64748B !important;
|
| 21 |
+
text-align: center !important;
|
| 22 |
+
margin: 0 0 2rem 0 !important;
|
| 23 |
+
font-weight: 400 !important;
|
| 24 |
+
line-height: 1.4 !important;
|
| 25 |
+
max-width: 800px !important;
|
| 26 |
+
margin-left: auto !important;
|
| 27 |
+
margin-right: auto !important;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.title-container {
|
| 31 |
+
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
| 32 |
+
border-radius: 20px !important;
|
| 33 |
+
padding: 3rem 2rem !important;
|
| 34 |
+
margin: 2rem 0 !important;
|
| 35 |
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
|
| 36 |
+
border: 1px solid rgba(148, 163, 184, 0.2) !important;
|
| 37 |
+
position: relative !important;
|
| 38 |
+
overflow: hidden !important;
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
.title-container::before {
|
| 42 |
+
content: '' !important;
|
| 43 |
+
position: absolute !important;
|
| 44 |
+
top: 0 !important;
|
| 45 |
+
left: 0 !important;
|
| 46 |
+
right: 0 !important;
|
| 47 |
+
height: 4px !important;
|
| 48 |
+
background: linear-gradient(90deg, #0077B5, #00A0DC, #0066CC) !important;
|
| 49 |
+
}
|
| 50 |
+
|
| 51 |
+
.emoji-icon {
|
| 52 |
+
font-size: 2.5rem !important;
|
| 53 |
+
display: inline-block !important;
|
| 54 |
+
margin-right: 0.5rem !important;
|
| 55 |
+
animation: bounce 2s infinite !important;
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
@keyframes bounce {
|
| 59 |
+
0%, 20%, 50%, 80%, 100% {
|
| 60 |
+
transform: translateY(0);
|
| 61 |
+
}
|
| 62 |
+
40% {
|
| 63 |
+
transform: translateY(-10px);
|
| 64 |
+
}
|
| 65 |
+
60% {
|
| 66 |
+
transform: translateY(-5px);
|
| 67 |
+
}
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
/* Responsive design */
|
| 71 |
+
@media (max-width: 768px) {
|
| 72 |
+
.main-title {
|
| 73 |
+
font-size: 2.5rem !important;
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
.main-subtitle {
|
| 77 |
+
font-size: 1.1rem !important;
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
.title-container {
|
| 81 |
+
padding: 2rem 1rem !important;
|
| 82 |
+
margin: 1rem 0 !important;
|
| 83 |
+
}
|
| 84 |
+
}
|
| 85 |
+
"""
|
| 86 |
+
|
| 87 |
+
# Create the interface
|
| 88 |
+
|
| 89 |
+
|
| 90 |
custom_css = """
|
| 91 |
/* Global App Styling */
|
| 92 |
.gradio-container {
|