Update interface.py

interface.py

@@ -96,7 +96,7 @@ def process_homepage_only(url, prompt):
     except Exception as e:
         return f"❌ Error: {str(e)}", "", ""
 
-# Custom CSS with animations and modern design
+# Dark theme custom CSS with animations
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
 
@@ -104,9 +104,9 @@ custom_css = """
     font-family: 'Inter', sans-serif !important;
 }
 
-/* Animated gradient background */
+/* Dark animated gradient background */
 .gradio-container {
-    background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
+    background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #1a1a2e);
     background-size: 400% 400%;
     animation: gradientShift 15s ease infinite;
 }
@@ -117,14 +117,14 @@ custom_css = """
     100% { background-position: 0% 50%; }
 }
 
-/* Main container with glassmorphism */
+/* Main container with dark glassmorphism */
 .main-container {
     backdrop-filter: blur(20px);
-    background: rgba(255, 255, 255, 0.85);
+    background: rgba(20, 20, 30, 0.85);
     border-radius: 24px;
     padding: 2rem;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     animation: fadeInUp 0.8s ease;
 }
 
@@ -139,9 +139,9 @@ custom_css = """
     }
 }
 
-/* Animated title */
+/* Animated title with neon glow */
 .animated-title {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #00c6ff 100%);
     background-size: 200% 200%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -151,6 +151,7 @@ custom_css = """
     font-size: 3.5rem;
     text-align: center;
     margin-bottom: 0.5rem;
+    filter: drop-shadow(0 0 20px rgba(0, 242, 254, 0.5));
 }
 
 @keyframes gradientText {
@@ -170,59 +171,63 @@ custom_css = """
     50% { transform: translateY(-10px); }
 }
 
-/* Input fields with modern styling */
+/* Dark input fields with neon borders */
 textarea, input[type="text"] {
     font-size: 1.1rem !important;
     border-radius: 12px !important;
-    border: 2px solid rgba(102, 126, 234, 0.3) !important;
+    border: 2px solid rgba(0, 242, 254, 0.3) !important;
     transition: all 0.3s ease !important;
-    background: rgba(255, 255, 255, 0.9) !important;
+    background: rgba(30, 30, 45, 0.9) !important;
+    color: #e0e0e0 !important;
 }
 
 textarea:focus, input[type="text"]:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3) !important;
+    border-color: #00f2fe !important;
+    box-shadow: 0 0 20px rgba(0, 242, 254, 0.4) !important;
     transform: translateY(-2px);
+    background: rgba(35, 35, 50, 0.95) !important;
 }
 
-/* Labels with animation */
+/* Dark labels */
 label {
     font-weight: 600 !important;
-    color: #333 !important;
+    color: #b0b0b0 !important;
     font-size: 1.1rem !important;
     transition: all 0.3s ease;
 }
 
-/* Buttons with hover effects */
+/* Neon buttons with hover effects */
 .gr-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    color: white !important;
+    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
+    color: #0a0a0f !important;
     border: none !important;
     border-radius: 12px !important;
     padding: 0.75rem 2rem !important;
     font-size: 1.1rem !important;
     font-weight: 600 !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4) !important;
 }
 
 .gr-button:hover {
     transform: translateY(-3px) !important;
-    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6) !important;
+    box-shadow: 0 6px 25px rgba(0, 242, 254, 0.6) !important;
+    filter: brightness(1.1);
 }
 
 .gr-button:active {
     transform: translateY(-1px) !important;
 }
 
-/* Output boxes with glassmorphism */
+/* Dark output boxes with glassmorphism */
 .output-box {
-    background: rgba(255, 255, 255, 0.95) !important;
+    background: rgba(30, 30, 45, 0.95) !important;
     border-radius: 16px !important;
-    border: 1px solid rgba(102, 126, 234, 0.2) !important;
+    border: 1px solid rgba(0, 242, 254, 0.2) !important;
     backdrop-filter: blur(10px);
     animation: slideIn 0.5s ease;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
+    color: #e0e0e0 !important;
 }
 
 @keyframes slideIn {
@@ -236,18 +241,27 @@ label {
     }
 }
 
-/* Tab styling */
+/* Dark tab styling */
 .tab-nav button {
     border-radius: 12px !important;
     font-weight: 600 !important;
     transition: all 0.3s ease !important;
     font-size: 1.05rem !important;
+    background: rgba(30, 30, 45, 0.6) !important;
+    color: #b0b0b0 !important;
+    border: 1px solid rgba(0, 242, 254, 0.2) !important;
+}
+
+.tab-nav button:hover {
+    background: rgba(40, 40, 55, 0.8) !important;
+    border-color: rgba(0, 242, 254, 0.4) !important;
 }
 
 .tab-nav button[aria-selected="true"] {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    color: white !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
+    color: #0a0a0f !important;
+    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4) !important;
+    border: none !important;
 }
 
 /* Info cards with pulse animation */
@@ -260,12 +274,12 @@ label {
     50% { transform: scale(1.02); }
 }
 
-/* Example box styling */
+/* Dark example box styling */
 .example-box {
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1) 0%, rgba(79, 172, 254, 0.1) 100%);
     border-radius: 16px;
     padding: 1.5rem;
-    border-left: 4px solid #667eea;
+    border-left: 4px solid #00f2fe;
     margin-top: 2rem;
     transition: all 0.3s ease;
     animation: fadeIn 1s ease;
@@ -273,7 +287,11 @@ label {
 
 .example-box:hover {
     transform: translateX(5px);
-    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.2);
+    box-shadow: 0 5px 20px rgba(0, 242, 254, 0.2);
+}
+
+.example-box h3, .example-box p {
+    color: #e0e0e0 !important;
 }
 
 @keyframes fadeIn {
@@ -281,12 +299,12 @@ label {
     to { opacity: 1; }
 }
 
-/* Note box with shimmer effect */
+/* Dark note box with shimmer effect */
 .note-box {
-    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(3, 169, 244, 0.1) 100%);
+    background: linear-gradient(135deg, rgba(0, 242, 254, 0.08) 0%, rgba(79, 172, 254, 0.08) 100%);
     border-radius: 12px;
     padding: 1rem;
-    border-left: 4px solid #2196f3;
+    border-left: 4px solid #00f2fe;
     margin-top: 1rem;
     position: relative;
     overflow: hidden;
@@ -299,18 +317,24 @@ label {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.2), transparent);
     animation: shimmer 3s infinite;
 }
 
+.note-box p {
+    color: #00c6ff !important;
+    position: relative;
+    z-index: 1;
+}
+
 @keyframes shimmer {
     0% { left: -100%; }
     100% { left: 100%; }
 }
 
-/* Subtitle animation */
+/* Dark subtitle animation */
 .subtitle {
-    color: #666;
+    color: #b0b0b0;
     font-size: 1.3rem;
     text-align: center;
     margin-bottom: 2rem;
@@ -333,15 +357,36 @@ label {
     display: inline-block;
     width: 20px;
     height: 20px;
-    border: 3px solid rgba(102, 126, 234, 0.3);
+    border: 3px solid rgba(0, 242, 254, 0.3);
     border-radius: 50%;
-    border-top-color: #667eea;
+    border-top-color: #00f2fe;
     animation: spin 1s ease-in-out infinite;
 }
 
 @keyframes spin {
     to { transform: rotate(360deg); }
 }
+
+/* Neon glow effect on containers */
+.main-container::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, #00f2fe, #4facfe, #00f2fe);
+    border-radius: 24px;
+    z-index: -1;
+    opacity: 0.3;
+    filter: blur(10px);
+    animation: neonPulse 3s ease-in-out infinite;
+}
+
+@keyframes neonPulse {
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 0.5; }
+}
 """
 
 # Main interface with tabs
@@ -416,7 +461,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as interface:
     
     gr.HTML("""
         <div class="example-box">
-            <h3 style="margin-top: 0; color: #333; font-size: 1.4rem;">
+            <h3 style="margin-top: 0; font-size: 1.4rem;">
                 <span class="floating-icon">💡</span> Example Usage
             </h3>
             <p style="font-size: 1.1rem;"><strong>URL:</strong> https://openai.com</p>
@@ -424,7 +469,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as interface:
         </div>
         
         <div class="note-box">
-            <p style="margin: 0; color: #0d47a1; font-size: 1.05rem;">
+            <p style="margin: 0; font-size: 1.05rem;">
                 ℹ️ <strong>Note:</strong> If you encounter connection errors, please wait a moment for the system to initialize and try again.
             </p>
         </div>