Update app.py

app.py

@@ -82,12 +82,11 @@ class DatabaseManager:
         try:
             # Generate secure API key
             api_key = self._generate_api_key()
-            api_key_hash = hashlib.sha256(api_key.encode()).hexdigest()
             
             data = {
                 "name": user_data.name.strip(),
                 "email": user_data.email.strip(),
-                "api_key_hash": api_key_hash,
+                "api_key": api_key,  # Store plain API key (consider hashing in production)
                 "hf_user_id": hf_user_id,
                 "requests": 0,
                 "plan": user_data.plan,
@@ -121,11 +120,9 @@ class DatabaseManager:
     async def validate_api_key(self, api_key: str) -> Optional[Dict]:
         """Validate API key and return user data"""
         try:
-            api_key_hash = hashlib.sha256(api_key.encode()).hexdigest()
-            
             async with aiohttp.ClientSession() as session:
                 async with session.get(
-                    f"{self.config.SUPABASE_URL}/rest/v1/users?api_key_hash=eq.{api_key_hash}",
+                    f"{self.config.SUPABASE_URL}/rest/v1/users?api_key=eq.{api_key}",
                     headers=self.headers
                 ) as response:
                     if response.status == 200:
@@ -406,18 +403,42 @@ class GradioInterface:
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         
         :root {
-            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-            --card-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            --hover-shadow: 0 15px 40px rgba(0,0,0,0.15);
+            --primary-gradient: linear-gradient(135deg, #566981 0%, #3A415A 100%);
+            --secondary-gradient: linear-gradient(135deg, #3A415A 0%, #34344E 100%);
+            --success-gradient: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
+            --error-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            --card-shadow: 0 10px 30px rgba(0,0,0,0.3);
+            --hover-shadow: 0 15px 40px rgba(0,0,0,0.4);
+            --bg-color: #566981;
+            --text-color: #ffffff;
+            --card-bg: #3A415A;
+            --accent-color: #34344E;
+        }
+        
+        * {
+            scrollbar-width: thin;
+            scrollbar-color: var(--card-bg) var(--bg-color);
+        }
+        
+        *::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        *::-webkit-scrollbar-track {
+            background: var(--bg-color);
         }
         
-        body {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            font-family: 'Inter', sans-serif;
-            margin: 0;
-            padding: 0;
+        *::-webkit-scrollbar-thumb {
+            background-color: var(--card-bg);
+            border-radius: 4px;
+        }
+        
+        body, .gradio-container {
+            background: var(--bg-color) !important;
+            color: var(--text-color) !important;
+            font-family: 'Inter', sans-serif !important;
+            margin: 0 !important;
+            padding: 0 !important;
         }
         
         .gradio-container {
@@ -430,15 +451,16 @@ class GradioInterface:
             text-align: center;
             margin-bottom: 3rem;
             padding: 2rem;
-            background: white;
+            background: var(--card-bg) !important;
             border-radius: 20px;
             box-shadow: var(--card-shadow);
+            border: 1px solid rgba(255,255,255,0.1);
         }
         
         .main-title {
             font-size: 3.5rem;
             font-weight: 700;
-            background: var(--primary-gradient);
+            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             margin-bottom: 1rem;
@@ -446,17 +468,18 @@ class GradioInterface:
         
         .main-subtitle {
             font-size: 1.3rem;
-            color: #64748b;
+            color: #cbd5e1;
             font-weight: 400;
         }
         
-        .feature-card {
-            background: white;
-            border-radius: 15px;
-            padding: 2rem;
-            box-shadow: var(--card-shadow);
-            transition: all 0.3s ease;
-            border: 1px solid rgba(255,255,255,0.2);
+        .feature-card, .gr-form, .gr-box {
+            background: var(--card-bg) !important;
+            border-radius: 15px !important;
+            padding: 2rem !important;
+            box-shadow: var(--card-shadow) !important;
+            transition: all 0.3s ease !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+            color: var(--text-color) !important;
         }
         
         .feature-card:hover {
@@ -470,6 +493,9 @@ class GradioInterface:
             padding: 0.8rem 2rem !important;
             transition: all 0.3s ease !important;
             border: none !important;
+            text-transform: uppercase !important;
+            letter-spacing: 1px !important;
+            font-size: 0.9rem !important;
         }
         
         .gr-button-primary {
@@ -484,15 +510,16 @@ class GradioInterface:
         
         .gr-button:hover {
             transform: translateY(-2px) !important;
-            box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
+            box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
         }
         
         .stats-card {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--primary-gradient) !important;
             color: white;
             border-radius: 15px;
             padding: 2rem;
             margin: 1rem 0;
+            box-shadow: var(--card-shadow);
         }
         
         .metric {
@@ -503,6 +530,7 @@ class GradioInterface:
         .metric-value {
             font-size: 2.5rem;
             font-weight: 700;
+            color: #ffffff;
         }
         
         .metric-label {
@@ -513,19 +541,97 @@ class GradioInterface:
         }
         
         .alert-success {
-            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            background: var(--success-gradient) !important;
             color: white;
             padding: 1rem;
             border-radius: 10px;
             margin: 1rem 0;
+            box-shadow: var(--card-shadow);
         }
         
         .alert-error {
-            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+            background: var(--error-gradient) !important;
             color: white;
             padding: 1rem;
             border-radius: 10px;
             margin: 1rem 0;
+            box-shadow: var(--card-shadow);
+        }
+        
+        .gr-textbox, .gr-dropdown, .gr-slider {
+            background: var(--accent-color) !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+            border-radius: 8px !important;
+            color: var(--text-color) !important;
+        }
+        
+        .gr-textbox:focus, .gr-dropdown:focus {
+            border-color: rgba(255,255,255,0.3) !important;
+            box-shadow: 0 0 0 3px rgba(255,255,255,0.1) !important;
+        }
+        
+        .gr-tab-nav {
+            background: var(--card-bg) !important;
+            border-radius: 12px !important;
+            padding: 0.5rem !important;
+        }
+        
+        .gr-tab-nav button {
+            background: transparent !important;
+            color: var(--text-color) !important;
+            border: none !important;
+            border-radius: 8px !important;
+            padding: 0.8rem 1.5rem !important;
+            margin: 0 0.25rem !important;
+            transition: all 0.3s ease !important;
+        }
+        
+        .gr-tab-nav button.selected, .gr-tab-nav button:hover {
+            background: var(--accent-color) !important;
+            color: white !important;
+        }
+        
+        .gr-accordion {
+            background: var(--accent-color) !important;
+            border-radius: 10px !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+        }
+        
+        .gr-accordion summary {
+            color: var(--text-color) !important;
+            font-weight: 600 !important;
+        }
+        
+        label {
+            color: var(--text-color) !important;
+            font-weight: 600 !important;
+        }
+        
+        .gr-markdown {
+            color: var(--text-color) !important;
+        }
+        
+        .gr-markdown h1, .gr-markdown h2, .gr-markdown h3 {
+            color: #ffffff !important;
+        }
+        
+        .dark-coming-soon {
+            background: var(--card-bg) !important;
+            border-radius: 20px !important;
+            padding: 4rem 2rem !important;
+            text-align: center !important;
+            border: 2px dashed rgba(255,255,255,0.2) !important;
+        }
+        
+        .dark-coming-soon h3 {
+            color: #ffffff !important;
+            font-size: 2rem !important;
+            margin-bottom: 1rem !important;
+        }
+        
+        .dark-coming-soon p {
+            color: #cbd5e1 !important;
+            font-size: 1.1rem !important;
         }
         """
     
@@ -651,11 +757,25 @@ class GradioInterface:
                 with gr.Tab("📈 Analytics", elem_classes=["feature-card"]):
                     gr.Markdown("### 📊 Platform Analytics")
                     
-                    # Placeholder for future analytics
+                    # Enhanced dark theme analytics placeholder
                     gr.HTML("""
-                    <div style="text-align: center; padding: 3rem;">
+                    <div class="dark-coming-soon">
                         <h3>📈 Advanced Analytics Coming Soon</h3>
                         <p>Real-time usage metrics, performance insights, and detailed reporting.</p>
+                        <div style="margin-top: 2rem; display: flex; justify-content: center; gap: 2rem;">
+                            <div style="text-align: center;">
+                                <div style="font-size: 3rem;">⚡</div>
+                                <div>Real-time Metrics</div>
+                            </div>
+                            <div style="text-align: center;">
+                                <div style="font-size: 3rem;">📊</div>
+                                <div>Usage Analytics</div>
+                            </div>
+                            <div style="text-align: center;">
+                                <div style="font-size: 3rem;">🎯</div>
+                                <div>Performance Insights</div>
+                            </div>
+                        </div>
                     </div>
                     """)