UI Overhaul

gradio_app.py

@@ -28,14 +28,14 @@ custom_css = """
 }
 
 .gradio-container {
-    background: #0a0a0f !important;
+    background: #0a0a0a !important;
     color: #fff !important;
     min-height: 100vh;
     position: relative;
     overflow: hidden;
 }
 
-/* Animated Background */
+/* Subtle Animated Background */
 .gradio-container::before {
     content: '';
     position: fixed;
@@ -45,17 +45,17 @@ custom_css = """
     bottom: 0;
     background: 
         linear-gradient(125deg, 
-            #0a0a0f 0%, 
-            rgba(99, 102, 241, 0.05) 30%,
-            rgba(99, 102, 241, 0.1) 50%,
-            rgba(99, 102, 241, 0.05) 70%,
-            #0a0a0f 100%);
-    animation: gradientMove 15s ease infinite;
+            #0a0a0a 0%, 
+            rgba(218, 165, 32, 0.03) 30%,
+            rgba(218, 165, 32, 0.05) 50%,
+            rgba(218, 165, 32, 0.03) 70%,
+            #0a0a0a 100%);
+    animation: subtleGradient 20s ease infinite;
     background-size: 400% 400%;
     z-index: 0;
 }
 
-/* Floating Particles */
+/* Premium Particles Effect */
 .gradio-container::after {
     content: '';
     position: fixed;
@@ -63,14 +63,14 @@ custom_css = """
     left: 0;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle at center, transparent 0%, #0a0a0f 70%),
-                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='1' fill='rgba(99, 102, 241, 0.15)'/%3E%3C/svg%3E");
-    opacity: 0.5;
-    animation: floatingParticles 20s linear infinite;
+    background: radial-gradient(circle at center, transparent 0%, #0a0a0a 70%),
+                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='1' fill='rgba(218, 165, 32, 0.08)'/%3E%3C/svg%3E");
+    opacity: 0.3;
+    animation: floatingParticles 30s linear infinite;
     z-index: 1;
 }
 
-/* Futuristic Header */
+/* Luxurious Header */
 .treat-title {
     text-align: center;
     padding: 3rem 1rem;
@@ -78,7 +78,7 @@ custom_css = """
     overflow: hidden;
     z-index: 2;
     background: linear-gradient(180deg, 
-        rgba(99, 102, 241, 0.1),
+        rgba(218, 165, 32, 0.05),
         transparent 70%);
 }
 
@@ -87,29 +87,31 @@ custom_css = """
     position: absolute;
     top: 0;
     left: 50%;
-    width: 80%;
+    width: 60%;
     height: 1px;
     background: linear-gradient(90deg, 
         transparent,
-        rgba(99, 102, 241, 0.5),
+        rgba(218, 165, 32, 0.3),
         transparent);
     transform: translateX(-50%);
-    animation: scanline 3s ease-in-out infinite;
+    animation: luxuryScan 5s ease-in-out infinite;
 }
 
 .treat-title h1 {
     font-size: 4.5rem;
     font-weight: 800;
     background: linear-gradient(135deg, 
-        #2a2b55 0%,
-        #6366f1 50%,
-        #2a2b55 100%);
+        #996515 0%,
+        #DAA520 25%,
+        #FFD700 50%,
+        #DAA520 75%,
+        #996515 100%);
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 0.5rem;
     letter-spacing: -0.05em;
-    animation: gradientFlow 8s ease infinite;
+    animation: goldenFlow 8s ease infinite;
     position: relative;
 }
 
@@ -122,36 +124,26 @@ custom_css = """
     height: 100%;
     background: linear-gradient(135deg, 
         transparent 0%,
-        rgba(99, 102, 241, 0.4) 50%,
+        rgba(218, 165, 32, 0.4) 50%,
         transparent 100%);
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     opacity: 0.5;
-    animation: textGlow 4s ease-in-out infinite;
-}
-
-.treat-title p {
-    font-size: 1.1rem;
-    color: rgba(255, 255, 255, 0.7);
-    max-width: 600px;
-    margin: 0 auto;
-    position: relative;
-    animation: fadeInUp 1s ease-out;
+    animation: premiumGlow 4s ease-in-out infinite;
 }
 
-/* Tabs Styling */
+/* Premium Content Areas */
 .tabs {
-    background: rgba(17, 17, 27, 0.7);
-    border: 1px solid rgba(99, 102, 241, 0.2);
+    background: rgba(10, 10, 10, 0.95);
+    border: 1px solid rgba(218, 165, 32, 0.15);
     border-radius: 16px;
     padding: 1rem;
     margin: 0 1rem 2rem 1rem;
     position: relative;
     z-index: 2;
     backdrop-filter: blur(10px);
-    box-shadow: 0 0 30px rgba(99, 102, 241, 0.1);
-    animation: floatIn 1s ease-out;
+    box-shadow: 0 0 30px rgba(218, 165, 32, 0.05);
 }
 
 .tabs::before {
@@ -162,70 +154,52 @@ custom_css = """
     right: -1px;
     bottom: -1px;
     background: linear-gradient(45deg,
-        rgba(99, 102, 241, 0.1),
+        rgba(218, 165, 32, 0.1),
         transparent,
-        rgba(99, 102, 241, 0.1));
+        rgba(218, 165, 32, 0.1));
     border-radius: 16px;
     z-index: -1;
-    animation: borderGlow 4s ease-in-out infinite;
+    animation: luxuryBorder 6s ease-in-out infinite;
 }
 
-/* Content Area */
 .content-area {
-    background: rgba(17, 17, 27, 0.7) !important;
-    border: 1px solid rgba(99, 102, 241, 0.2) !important;
+    background: rgba(10, 10, 10, 0.95) !important;
+    border: 1px solid rgba(218, 165, 32, 0.15) !important;
     border-radius: 12px !important;
     padding: 1.5rem !important;
     backdrop-filter: blur(10px);
     position: relative;
-    overflow: hidden;
-    animation: fadeScale 0.5s ease-out;
-}
-
-.content-area::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle at center,
-        rgba(99, 102, 241, 0.1) 0%,
-        transparent 70%);
-    animation: rotateGradient 10s linear infinite;
 }
 
-/* Input Fields */
+/* Premium Input Fields */
 .gradio-textbox textarea {
-    background: rgba(17, 17, 27, 0.6) !important;
-    border: 1px solid rgba(99, 102, 241, 0.3) !important;
+    background: rgba(10, 10, 10, 0.9) !important;
+    border: 1px solid rgba(218, 165, 32, 0.2) !important;
     border-radius: 8px !important;
     color: rgba(255, 255, 255, 0.9) !important;
     font-size: 0.95rem !important;
     line-height: 1.6 !important;
     padding: 1rem !important;
-    transition: all 0.3s ease;
-    position: relative;
-    z-index: 2;
 }
 
 .gradio-textbox textarea:focus {
-    border-color: #6366f1 !important;
-    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2) !important;
-    background: rgba(17, 17, 27, 0.8) !important;
+    border-color: #DAA520 !important;
+    box-shadow: 0 0 20px rgba(218, 165, 32, 0.1) !important;
+    background: rgba(10, 10, 10, 0.95) !important;
     transform: translateY(-2px);
 }
 
-/* Buttons */
+/* Luxury Buttons */
 .gradio-button {
     background: linear-gradient(45deg, 
-        #6366f1,
-        #818cf8,
-        #6366f1) !important;
+        #996515,
+        #DAA520,
+        #FFD700,
+        #DAA520) !important;
     background-size: 200% auto !important;
     border: none !important;
     border-radius: 8px !important;
-    color: white !important;
+    color: #0a0a0a !important;
     font-weight: 600 !important;
     font-size: 0.95rem !important;
     padding: 0.75rem 1.5rem !important;
@@ -233,44 +207,15 @@ custom_css = """
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease !important;
-    animation: gradientFlow 3s ease infinite;
-}
-
-.gradio-button::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle at center,
-        rgba(255, 255, 255, 0.2) 0%,
-        transparent 70%);
-    transform: scale(0);
-    transition: transform 0.5s ease;
+    animation: goldenFlow 4s ease infinite;
 }
 
 .gradio-button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4) !important;
-}
-
-.gradio-button:hover::before {
-    transform: scale(1);
-}
-
-/* Results Area */
-.results-area {
-    background: rgba(17, 17, 27, 0.7) !important;
-    border: 1px solid rgba(99, 102, 241, 0.2) !important;
-    border-radius: 12px !important;
-    margin-top: 2rem !important;
-    backdrop-filter: blur(10px);
-    animation: slideUp 0.5s ease-out;
-    position: relative;
-    overflow: hidden;
+    box-shadow: 0 5px 20px rgba(218, 165, 32, 0.2) !important;
 }
 
+/* Premium Footer */
 .footer {
     text-align: center;
     padding: 2rem 0;
@@ -281,61 +226,31 @@ custom_css = """
 }
 
 .footer p {
-    color: rgba(255, 255, 255, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
+    color: rgba(218, 165, 32, 0.8);
 }
 
 .footer .heart {
-    color: #6366f1;
-    display: inline-block;
-    position: relative;
-    font-size: 1.0rem;
-    transform-origin: center;
-    animation: heartbeat 1.5s ease infinite;
-}
-
-.footer .heart::before,
-.footer .heart::after {
-    content: '✦';
-    position: absolute;
-    opacity: 0;
-    font-size: 0.6rem;
-    animation: sparkle 1.5s ease infinite;
-}
-
-.footer .heart::before {
-    top: -8px;
-    left: -8px;
-    animation-delay: 0.2s;
-}
-
-.footer .heart::after {
-    top: -8px;
-    right: -8px;
-    animation-delay: 0.4s;
+    color: #DAA520;
+    animation: luxuryPulse 2s ease infinite;
 }
 
 .footer .name {
-    color: #6366f1;
+    color: #DAA520;
     text-decoration: none;
-    position: relative;
     transition: all 0.3s ease;
     padding: 0 4px;
 }
 
 .footer .name:hover {
-    color: #818cf8;
+    color: #FFD700;
 }
 
 footer {
     visibility: hidden;
 }
 
-/* Animations */
-@keyframes gradientMove {
+/* Premium Animations */
+@keyframes subtleGradient {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
@@ -346,70 +261,35 @@ footer {
     100% { transform: translateY(-100%); }
 }
 
-@keyframes scanline {
-    0% { transform: translateX(-150%) scaleX(0.5); opacity: 0; }
-    50% { transform: translateX(-50%) scaleX(1); opacity: 1; }
-    100% { transform: translateX(50%) scaleX(0.5); opacity: 0; }
+@keyframes luxuryScan {
+    0% { transform: translateX(-150%) scaleX(0.3); opacity: 0; }
+    50% { transform: translateX(-50%) scaleX(1); opacity: 0.5; }
+    100% { transform: translateX(50%) scaleX(0.3); opacity: 0; }
 }
 
-@keyframes gradientFlow {
+@keyframes goldenFlow {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
 
-@keyframes textGlow {
-    0% { opacity: 0.3; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(1.02); }
-    100% { opacity: 0.3; transform: scale(1); }
+@keyframes premiumGlow {
+    0% { opacity: 0.2; transform: scale(1); }
+    50% { opacity: 0.4; transform: scale(1.01); }
+    100% { opacity: 0.2; transform: scale(1); }
 }
 
-@keyframes borderGlow {
-    0% { opacity: 0.5; }
-    50% { opacity: 1; }
-    100% { opacity: 0.5; }
+@keyframes luxuryBorder {
+    0% { opacity: 0.3; }
+    50% { opacity: 0.7; }
+    100% { opacity: 0.3; }
 }
 
-@keyframes rotateGradient {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+@keyframes luxuryPulse {
+    0% { transform: scale(1); opacity: 0.8; }
+    50% { transform: scale(1.1); opacity: 1; }
+    100% { transform: scale(1); opacity: 0.8; }
 }
-
-@keyframes fadeScale {
-    0% { opacity: 0; transform: scale(0.95); }
-    100% { opacity: 1; transform: scale(1); }
-}
-
-@keyframes slideUp {
-    0% { opacity: 0; transform: translateY(20px); }
-    100% { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes floatIn {
-    0% { opacity: 0; transform: translateY(20px); }
-    100% { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes fadeInUp {
-    0% { opacity: 0; transform: translateY(10px); }
-    100% { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes heartbeat {
-    0% { transform: scale(1); }
-    10% { transform: scale(1.2); }
-    20% { transform: scale(0.9); }
-    30% { transform: scale(1.1); }
-    40% { transform: scale(0.95); }
-    50% { transform: scale(1); }
-    100% { transform: scale(1); }
-}
-
-@keyframes sparkle {
-    0% { transform: scale(0); opacity: 0; }
-    50% { transform: scale(1.2); opacity: 1; }
-    100% { transform: scale(0); opacity: 0; }
-    }
 """
 # Start the API server
 def start_api_server():
@@ -521,11 +401,11 @@ import atexit
 # [Previous code until the interface definition remains the same]
 
 # Update the Gradio interface with fixed button handling
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
+with gr.Blocks(css=custom_css, theme=gr.themes.Monochrome()) as iface:
     # Title section
     gr.HTML("""
         <div class="treat-title">
-            <h1 data-text="TREAT">TREAT</h1>
+            <h1 data-text="TREAT R1">TREAT R1</h1>
             <p>Trigger Recognition for Enjoyable and Appropriate Television</p>
         </div>
     """)