Update app.py

app.py

@@ -20,6 +20,8 @@ import jwt
 from functools import wraps
 import hashlib
 import secrets
+import plotly.graph_objects as go
+from plotly.subplots import make_subplots
 
 # ----------------- Configuration & Models -----------------
 load_dotenv()
@@ -34,6 +36,7 @@ class Config:
     RATE_LIMIT_PER_HOUR: int = int(os.getenv("RATE_LIMIT_PER_HOUR", "100"))
     MAX_TOKENS: int = int(os.getenv("MAX_TOKENS", "500"))
     LOG_LEVEL: str = os.getenv("LOG_LEVEL", "INFO")
+    ADMIN_EMAIL: str = os.getenv("ADMIN_EMAIL", "")
 
 class GenerationRequest(BaseModel):
     prompt: str
@@ -41,6 +44,7 @@ class GenerationRequest(BaseModel):
     temperature: float = 0.7
     top_k: int = 50
     top_p: float = 0.95
+    repetition_penalty: float = 1.0
 
 class UserCreate(BaseModel):
     name: str
@@ -80,19 +84,32 @@ class DatabaseManager:
     async def create_user(self, user_data: UserCreate, hf_user_id: str = None) -> Tuple[bool, str, str]:
         """Create user with enhanced validation and security"""
         try:
+            # Check if user already exists
+            async with aiohttp.ClientSession() as session:
+                async with session.get(
+                    f"{self.config.SUPABASE_URL}/rest/v1/users?email=eq.{user_data.email}",
+                    headers=self.headers
+                ) as response:
+                    if response.status == 200:
+                        existing_users = await response.json()
+                        if existing_users:
+                            return False, "❌ User with this email already exists", ""
+            
             # Generate secure API key
             api_key = self._generate_api_key()
             
             data = {
                 "name": user_data.name.strip(),
                 "email": user_data.email.strip(),
-                "api_key": api_key,  # Store plain API key (consider hashing in production)
+                "api_key": api_key,
                 "hf_user_id": hf_user_id,
                 "requests": 0,
                 "plan": user_data.plan,
                 "created_at": datetime.now().isoformat(),
                 "last_request": None,
-                "rate_limit_reset": (datetime.now() + timedelta(hours=1)).isoformat()
+                "requests_this_hour": 0,
+                "rate_limit_reset": (datetime.now() + timedelta(hours=1)).isoformat(),
+                "tokens_used": 0
             }
             
             async with aiohttp.ClientSession() as session:
@@ -133,7 +150,7 @@ class DatabaseManager:
             logger.error(f"Error validating API key: {e}")
             return None
     
-    async def check_rate_limit(self, user_id: int) -> bool:
+    async def check_rate_limit(self, user_id: int) -> Tuple[bool, int]:
         """Check if user has exceeded rate limit"""
         try:
             async with aiohttp.ClientSession() as session:
@@ -145,18 +162,19 @@ class DatabaseManager:
                         data = await response.json()
                         if data:
                             user = data[0]
-                            reset_time = datetime.fromisoformat(user.get('rate_limit_reset', ''))
+                            reset_time = datetime.fromisoformat(user.get('rate_limit_reset', datetime.now().isoformat()))
                             
                             if datetime.now() > reset_time:
                                 # Reset rate limit
                                 await self._reset_rate_limit(user_id)
-                                return True
+                                return True, 0
                             
-                            return user.get('requests_this_hour', 0) < Config().RATE_LIMIT_PER_HOUR
-                    return False
+                            requests_this_hour = user.get('requests_this_hour', 0)
+                            return requests_this_hour < self.config.RATE_LIMIT_PER_HOUR, requests_this_hour
+                    return False, 0
         except Exception as e:
             logger.error(f"Error checking rate limit: {e}")
-            return False
+            return False, 0
     
     async def _reset_rate_limit(self, user_id: int):
         """Reset hourly rate limit"""
@@ -204,6 +222,21 @@ class DatabaseManager:
                             )
         except Exception as e:
             logger.error(f"Error incrementing usage: {e}")
+    
+    async def get_all_users_stats(self):
+        """Get statistics for all users (admin only)"""
+        try:
+            async with aiohttp.ClientSession() as session:
+                async with session.get(
+                    f"{self.config.SUPABASE_URL}/rest/v1/users?select=*",
+                    headers=self.headers
+                ) as response:
+                    if response.status == 200:
+                        return await response.json()
+                    return []
+        except Exception as e:
+            logger.error(f"Error getting all users stats: {e}")
+            return []
 
 # ----------------- Model Manager -----------------
 class ModelManager:
@@ -225,7 +258,8 @@ class ModelManager:
                 None, 
                 lambda: AutoTokenizer.from_pretrained(
                     self.config.MODEL_NAME, 
-                    use_auth_token=self.config.HF_TOKEN
+                    token=self.config.HF_TOKEN,
+                    trust_remote_code=True
                 )
             )
             
@@ -234,9 +268,10 @@ class ModelManager:
                 None,
                 lambda: AutoModelForCausalLM.from_pretrained(
                     self.config.MODEL_NAME,
-                    use_auth_token=self.config.HF_TOKEN,
+                    token=self.config.HF_TOKEN,
                     device_map="auto",
-                    torch_dtype="auto"
+                    torch_dtype="auto",
+                    trust_remote_code=True
                 )
             )
             
@@ -268,8 +303,8 @@ class ModelManager:
             if len(request.prompt.strip()) == 0:
                 return False, "⚠️ Prompt cannot be empty", 0
             
-            if len(request.prompt) > 2000:
-                return False, "⚠️ Prompt too long (max 2000 characters)", 0
+            if len(request.prompt) > 4000:
+                return False, "⚠️ Prompt too long (max 4000 characters)", 0
             
             # Generate text
             loop = asyncio.get_event_loop()
@@ -282,6 +317,7 @@ class ModelManager:
                     temperature=request.temperature,
                     top_k=request.top_k,
                     top_p=request.top_p,
+                    repetition_penalty=request.repetition_penalty,
                     pad_token_id=self.tokenizer.eos_token_id,
                     return_full_text=False
                 )
@@ -296,12 +332,54 @@ class ModelManager:
             logger.error(f"Generation error: {e}")
             return False, f"❌ Generation failed: {str(e)}", 0
 
+# ----------------- Analytics Manager -----------------
+class AnalyticsManager:
+    def __init__(self, db: DatabaseManager):
+        self.db = db
+    
+    async def generate_usage_plot(self, user_data: Dict) -> go.Figure:
+        """Generate a usage plot for the user"""
+        fig = make_subplots(
+            rows=1, cols=2,
+            subplot_titles=('Requests Over Time', 'Token Usage Distribution'),
+            specs=[[{"type": "scatter"}, {"type": "pie"}]]
+        )
+        
+        # Mock data for the chart (in a real app, you'd get this from the database)
+        dates = [datetime.now() - timedelta(days=i) for i in range(7, 0, -1)]
+        requests = [user_data.get('requests', 0) // 7] * 7
+        
+        fig.add_trace(
+            go.Scatter(x=dates, y=requests, mode='lines+markers', name='Requests'),
+            row=1, col=1
+        )
+        
+        # Token usage pie chart
+        token_categories = ['Generated', 'Prompt', 'Other']
+        token_values = [user_data.get('tokens_used', 0), user_data.get('tokens_used', 0) // 3, user_data.get('tokens_used', 0) // 5]
+        
+        fig.add_trace(
+            go.Pie(labels=token_categories, values=token_values, name="Token Usage"),
+            row=1, col=2
+        )
+        
+        fig.update_layout(
+            height=400,
+            showlegend=True,
+            paper_bgcolor='rgba(0,0,0,0)',
+            plot_bgcolor='rgba(0,0,0,0)',
+            font=dict(color='white')
+        )
+        
+        return fig
+
 # ----------------- Service Layer -----------------
 class GemmaSaaSService:
     def __init__(self):
         self.config = Config()
         self.db = DatabaseManager(self.config)
         self.model_manager = ModelManager(self.config)
+        self.analytics_manager = AnalyticsManager(self.db)
         self._validate_config()
     
     def _validate_config(self):
@@ -351,10 +429,15 @@ class GemmaSaaSService:
                 )
             
             # Check rate limit
-            if not await self.db.check_rate_limit(user['id']):
+            can_make_request, requests_used = await self.db.check_rate_limit(user['id'])
+            if not can_make_request:
+                reset_time = datetime.fromisoformat(user.get('rate_limit_reset', ''))
+                time_remaining = reset_time - datetime.now()
+                mins_remaining = max(0, int(time_remaining.total_seconds() / 60))
+                
                 return APIResponse(
                     success=False, 
-                    error="⚠️ Rate limit exceeded. Try again later."
+                    error=f"⚠️ Rate limit exceeded ({requests_used}/{self.config.RATE_LIMIT_PER_HOUR}). Try again in {mins_remaining} minutes."
                 )
             
             # Generate text
@@ -370,7 +453,8 @@ class GemmaSaaSService:
                     data={
                         "generated_text": text,
                         "tokens_used": tokens_used,
-                        "user_plan": user.get('plan', 'free')
+                        "user_plan": user.get('plan', 'free'),
+                        "requests_remaining": self.config.RATE_LIMIT_PER_HOUR - requests_used - 1
                     }
                 )
             else:
@@ -396,6 +480,9 @@ class GemmaSaaSService:
                     error="Invalid API key"
                 )
             
+            # Generate analytics plot
+            plot = await self.analytics_manager.generate_usage_plot(user)
+            
             stats = {
                 "name": user.get('name'),
                 "email": user.get('email'),
@@ -405,7 +492,8 @@ class GemmaSaaSService:
                 "requests_this_hour": user.get('requests_this_hour', 0),
                 "rate_limit": self.config.RATE_LIMIT_PER_HOUR,
                 "created_at": user.get('created_at'),
-                "last_request": user.get('last_request')
+                "last_request": user.get('last_request'),
+                "plot": plot
             }
             
             return APIResponse(success=True, data=stats)
@@ -416,318 +504,431 @@ class GemmaSaaSService:
                 success=False, 
                 error="Error retrieving stats"
             )
+    
+    async def get_admin_stats(self, api_key: str) -> APIResponse:
+        """Get admin statistics (only for admin users)"""
+        try:
+            user = await self.db.validate_api_key(api_key)
+            if not user or user.get('email') != self.config.ADMIN_EMAIL:
+                return APIResponse(
+                    success=False, 
+                    error="Unauthorized: Admin access required"
+                )
+            
+            all_users = await self.db.get_all_users_stats()
+            
+            total_requests = sum(user.get('requests', 0) for user in all_users)
+            total_tokens = sum(user.get('tokens_used', 0) for user in all_users)
+            active_users = len([user for user in all_users if user.get('last_request')])
+            
+            # Generate admin dashboard plot
+            fig = go.Figure()
+            
+            user_names = [user.get('name', 'Unknown') for user in all_users]
+            user_requests = [user.get('requests', 0) for user in all_users]
+            
+            fig.add_trace(go.Bar(
+                x=user_names,
+                y=user_requests,
+                name="User Requests",
+                marker_color='indianred'
+            ))
+            
+            fig.update_layout(
+                title='User Activity',
+                xaxis_title='Users',
+                yaxis_title='Number of Requests',
+                paper_bgcolor='rgba(0,0,0,0)',
+                plot_bgcolor='rgba(0,0,0,0)',
+                font=dict(color='white')
+            )
+            
+            stats = {
+                "total_users": len(all_users),
+                "active_users": active_users,
+                "total_requests": total_requests,
+                "total_tokens": total_tokens,
+                "users": all_users,
+                "plot": fig
+            }
+            
+            return APIResponse(success=True, data=stats)
+            
+        except Exception as e:
+            logger.error(f"Error getting admin stats: {e}")
+            return APIResponse(
+                success=False, 
+                error="Error retrieving admin stats"
+            )
 
 # ----------------- Enhanced UI -----------------
 class GradioInterface:
     def __init__(self, service: GemmaSaaSService):
         self.service = service
+        self.examples = [
+            ["Write a short story about a robot discovering emotions"],
+            ["Explain quantum computing in simple terms"],
+            ["Create a recipe for chocolate chip cookies"],
+            ["Write a poem about the changing seasons"],
+            ["How can I improve my time management skills?"]
+        ]
         
     def create_advanced_css(self):
         return """
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-        
         :root {
-            --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);
-        }
-        
-        *::-webkit-scrollbar-thumb {
-            background-color: var(--card-bg);
-            border-radius: 4px;
+            --primary: #6366f1;
+            --primary-dark: #4338ca;
+            --secondary: #10b981;
+            --accent: #f59e0b;
+            --danger: #ef4444;
+            --dark: #1f2937;
+            --darker: #111827;
+            --light: #f3f4f6;
+            --lighter: #f9fafb;
+            --card-bg: rgba(255, 255, 255, 0.05);
+            --card-border: rgba(255, 255, 255, 0.1);
         }
         
         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;
+            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%) !important;
+            color: var(--lighter) !important;
+            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
         }
         
         .gradio-container {
             max-width: 1400px !important;
             margin: 0 auto !important;
-            padding: 2rem !important;
+            padding: 1rem !important;
         }
         
-        .main-header {
+        .header {
             text-align: center;
-            margin-bottom: 3rem;
-            padding: 2rem;
-            background: var(--card-bg) !important;
-            border-radius: 20px;
-            box-shadow: var(--card-shadow);
-            border: 1px solid rgba(255,255,255,0.1);
+            padding: 2rem 1rem;
+            margin-bottom: 2rem;
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--card-border);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
         }
         
-        .main-title {
+        .header h1 {
             font-size: 3.5rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            margin-bottom: 1rem;
+            margin-bottom: 0.5rem;
         }
         
-        .main-subtitle {
-            font-size: 1.3rem;
-            color: #cbd5e1;
-            font-weight: 400;
+        .header p {
+            font-size: 1.2rem;
+            color: var(--light);
+            opacity: 0.8;
+            max-width: 600px;
+            margin: 0 auto;
         }
         
-        .feature-card, .gr-form, .gr-box {
+        .card {
             background: var(--card-bg) !important;
-            border-radius: 15px !important;
-            padding: 2rem !important;
-            box-shadow: var(--card-shadow) !important;
+            backdrop-filter: blur(10px);
+            border-radius: 16px !important;
+            border: 1px solid var(--card-border) !important;
+            padding: 1.5rem !important;
             transition: all 0.3s ease !important;
-            border: 1px solid rgba(255,255,255,0.1) !important;
-            color: var(--text-color) !important;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
         }
         
-        .feature-card:hover {
+        .card:hover {
             transform: translateY(-5px);
-            box-shadow: var(--hover-shadow);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
         }
         
-        .gr-button {
+        .btn {
             border-radius: 12px !important;
+            padding: 0.75rem 1.5rem !important;
             font-weight: 600 !important;
-            padding: 0.8rem 2rem !important;
-            transition: all 0.3s ease !important;
+            transition: all 0.2s ease !important;
             border: none !important;
-            text-transform: uppercase !important;
-            letter-spacing: 1px !important;
-            font-size: 0.9rem !important;
         }
         
-        .gr-button-primary {
-            background: var(--primary-gradient) !important;
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
             color: white !important;
         }
         
-        .gr-button-secondary {
-            background: var(--secondary-gradient) !important;
-            color: white !important;
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
         }
         
-        .gr-button:hover {
-            transform: translateY(-2px) !important;
-            box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.1) !important;
+            color: white !important;
+            border: 1px solid rgba(255, 255, 255, 0.2) !important;
         }
         
-        .stats-card {
-            background: var(--primary-gradient) !important;
-            color: white;
-            border-radius: 15px;
-            padding: 2rem;
-            margin: 1rem 0;
-            box-shadow: var(--card-shadow);
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.2) !important;
+            transform: translateY(-2px);
         }
         
-        .metric {
+        .stat-card {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+            color: white;
+            border-radius: 12px;
+            padding: 1.5rem;
             text-align: center;
-            padding: 1rem;
         }
         
-        .metric-value {
+        .stat-value {
             font-size: 2.5rem;
             font-weight: 700;
-            color: #ffffff;
+            margin-bottom: 0.5rem;
         }
         
-        .metric-label {
+        .stat-label {
             font-size: 0.9rem;
             opacity: 0.8;
             text-transform: uppercase;
             letter-spacing: 1px;
         }
         
-        .alert-success {
-            background: var(--success-gradient) !important;
-            color: white;
-            padding: 1rem;
-            border-radius: 10px;
+        .alert {
+            padding: 1rem 1.5rem;
+            border-radius: 12px;
             margin: 1rem 0;
-            box-shadow: var(--card-shadow);
         }
         
-        .alert-error {
-            background: var(--error-gradient) !important;
+        .alert-success {
+            background: linear-gradient(135deg, var(--secondary) 0%, #059669 100%);
             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;
+        .alert-error {
+            background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
+            color: white;
         }
         
-        .gr-tab-nav {
+        .tab-nav {
             background: var(--card-bg) !important;
             border-radius: 12px !important;
             padding: 0.5rem !important;
+            margin-bottom: 1.5rem !important;
         }
         
-        .gr-tab-nav button {
-            background: transparent !important;
-            color: var(--text-color) !important;
-            border: none !important;
+        .tab-nav button {
             border-radius: 8px !important;
-            padding: 0.8rem 1.5rem !important;
-            margin: 0 0.25rem !important;
-            transition: all 0.3s ease !important;
+            padding: 0.75rem 1.5rem !important;
+            font-weight: 600 !important;
         }
         
-        .gr-tab-nav button.selected, .gr-tab-nav button:hover {
-            background: var(--accent-color) !important;
+        .tab-nav button.selected {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !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;
+        input, textarea, select {
+            background: rgba(255, 255, 255, 0.05) !important;
+            border: 1px solid rgba(255, 255, 255, 0.1) !important;
+            border-radius: 12px !important;
+            color: white !important;
+            padding: 0.75rem 1rem !important;
         }
         
-        .gr-accordion summary {
-            color: var(--text-color) !important;
-            font-weight: 600 !important;
+        input:focus, textarea:focus, select:focus {
+            border-color: var(--primary) !important;
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
         }
         
         label {
-            color: var(--text-color) !important;
+            color: var(--light) !important;
             font-weight: 600 !important;
+            margin-bottom: 0.5rem !important;
         }
         
-        .gr-markdown {
-            color: var(--text-color) !important;
+        .footer {
+            text-align: center;
+            padding: 2rem 1rem;
+            margin-top: 3rem;
+            color: var(--light);
+            opacity: 0.7;
+            font-size: 0.9rem;
         }
         
-        .gr-markdown h1, .gr-markdown h2, .gr-markdown h3 {
-            color: #ffffff !important;
+        .badge {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            font-weight: 700;
         }
         
-        .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;
+        .badge-free {
+            background: var(--secondary);
+            color: white;
         }
         
-        .dark-coming-soon h3 {
-            color: #ffffff !important;
-            font-size: 2rem !important;
-            margin-bottom: 1rem !important;
+        .badge-pro {
+            background: var(--primary);
+            color: white;
+        }
+        
+        .badge-enterprise {
+            background: var(--accent);
+            color: white;
+        }
+        
+        .example-card {
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        
+        .example-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
+        }
+        
+        .copy-btn {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            border-radius: 8px;
+            padding: 0.5rem;
+            cursor: pointer;
+            opacity: 0.7;
+            transition: all 0.2s ease;
+        }
+        
+        .copy-btn:hover {
+            opacity: 1;
+            background: rgba(255, 255, 255, 0.2);
         }
         
-        .dark-coming-soon p {
-            color: #cbd5e1 !important;
-            font-size: 1.1rem !important;
+        .dark-mode-plot {
+            background: transparent !important;
         }
         """
     
+    def create_header(self):
+        return gr.HTML("""
+        <div class="header">
+            <h1>🚀 Gemma AI Platform</h1>
+            <p>Advanced text generation powered by state-of-the-art AI models. Create content, analyze text, and unlock new possibilities.</p>
+        </div>
+        """)
+    
+    def create_footer(self):
+        return gr.HTML("""
+        <div class="footer">
+            <p>Gemma AI Platform © 2023 | Built with ❤️ using Hugging Face, Gradio, and Supabase</p>
+            <p>Version 2.0 | <a href="#" style="color: #ccc; text-decoration: none;">Terms of Service</a> | <a href="#" style="color: #ccc; text-decoration: none;">Privacy Policy</a></p>
+        </div>
+        """)
+    
+    def create_examples_component(self):
+        with gr.Column(elem_classes=["card"]):
+            gr.Markdown("### 💡 Example Prompts")
+            
+            examples_html = """
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
+            """
+            
+            for i, example in enumerate(self.examples):
+                examples_html += f"""
+                <div class="card example-card" onclick="document.getElementById('prompt-input').value = `{example[0]}`">
+                    <div style="font-size: 0.9rem; opacity: 0.9;">{example[0]}</div>
+                </div>
+                """
+            
+            examples_html += "</div>"
+            
+            return gr.HTML(examples_html)
+    
     async def create_interface(self):
         """Create the enhanced Gradio interface"""
-        with gr.Blocks(css=self.create_advanced_css(), title="Gemma SaaS Platform") as app:
+        with gr.Blocks(
+            css=self.create_advanced_css(), 
+            title="Gemma AI Platform",
+            theme=gr.themes.Default(primary_hue="indigo", secondary_hue="emerald")
+        ) as app:
             
             # Header
-            with gr.Row():
-                gr.HTML("""
-                <div class="main-header">
-                    <h1 class="main-title">🚀 Gemma SaaS Platform</h1>
-                    <p class="main-subtitle">Professional AI Text Generation with Advanced Analytics</p>
-                </div>
-                """)
+            self.create_header()
             
             # Main Content
-            with gr.Tabs():
+            with gr.Tabs(elem_classes=["tab-nav"]):
                 
                 # Playground Tab
-                with gr.Tab("🎮 Playground", elem_classes=["feature-card"]):
+                with gr.Tab("🎮 Playground", elem_classes=["card"]):
                     with gr.Row():
                         with gr.Column(scale=1):
-                            gr.Markdown("### 📋 Generation Parameters")
+                            gr.Markdown("### ⚙️ Configuration")
                             api_key_playground = gr.Textbox(
                                 label="🔑 API Key",
                                 type="password",
-                                placeholder="Enter your API key..."
+                                placeholder="Enter your API key...",
+                                elem_classes=["input"]
                             )
                             
-                            with gr.Accordion("⚙️ Advanced Settings", open=False):
+                            with gr.Accordion("Advanced Settings", open=False):
                                 max_tokens_input = gr.Slider(
-                                    minimum=50, maximum=500, value=200,
-                                    label="Max Tokens"
+                                    minimum=50, maximum=1000, value=200,
+                                    label="Max Tokens",
+                                    info="Maximum number of tokens to generate"
                                 )
                                 temperature_input = gr.Slider(
                                     minimum=0.1, maximum=2.0, value=0.7,
-                                    label="Temperature"
+                                    label="Temperature",
+                                    info="Higher values = more creative, lower values = more focused"
                                 )
                                 top_k_input = gr.Slider(
                                     minimum=1, maximum=100, value=50,
-                                    label="Top K"
+                                    label="Top K",
+                                    info="Consider only the top K tokens"
                                 )
                                 top_p_input = gr.Slider(
                                     minimum=0.1, maximum=1.0, value=0.95,
-                                    label="Top P"
+                                    label="Top P",
+                                    info="Nucleus sampling: consider only tokens with cumulative probability"
+                                )
+                                repetition_penalty_input = gr.Slider(
+                                    minimum=0.1, maximum=2.0, value=1.0,
+                                    label="Repetition Penalty",
+                                    info="Penalize repeated tokens (1.0 = no penalty)"
                                 )
                         
                         with gr.Column(scale=2):
-                            gr.Markdown("### 💭 Text Generation")
+                            # Examples
+                            self.create_examples_component()
+                            
+                            gr.Markdown("### 💬 Text Generation")
                             prompt_input = gr.Textbox(
-                                label="✍️ Prompt",
-                                lines=8,
-                                placeholder="Enter your prompt here... (e.g., 'Write a short story about a robot discovering emotions')"
+                                label="✍️ Your Prompt",
+                                lines=6,
+                                placeholder="Enter your prompt here... (e.g., 'Write a short story about a robot discovering emotions')",
+                                elem_id="prompt-input",
+                                elem_classes=["input"]
                             )
                             
                             with gr.Row():
                                 generate_btn = gr.Button(
                                     "🚀 Generate",
-                                    elem_classes=["gr-button-primary"],
+                                    elem_classes=["btn", "btn-primary"],
                                     variant="primary"
                                 )
-                                clear_btn = gr.ClearButton(
-                                    components=[prompt_input],
-                                    value="🗑️ Clear",
-                                    elem_classes=["gr-button-secondary"]
+                                clear_btn = gr.Button(
+                                    "🗑️ Clear",
+                                    elem_classes=["btn", "btn-secondary"]
                                 )
                             
                             output_text = gr.Textbox(
                                 label="📝 Generated Text",
-                                lines=12,
-                                interactive=False
+                                lines=8,
+                                interactive=False,
+                                elem_classes=["input"]
                             )
                             
                             # Stats display
@@ -737,21 +938,28 @@ class GradioInterface:
                             )
                 
                 # Profile Tab
-                with gr.Tab("👤 Profile", elem_classes=["feature-card"]):
+                with gr.Tab("👤 Profile", elem_classes=["card"]):
                     with gr.Row():
-                        with gr.Column():
+                        with gr.Column(scale=1):
                             gr.Markdown("### 🆕 Create Account")
-                            name_input = gr.Textbox(label="👤 Full Name")
-                            email_input = gr.Textbox(label="📧 Email Address")
+                            name_input = gr.Textbox(
+                                label="👤 Full Name",
+                                elem_classes=["input"]
+                            )
+                            email_input = gr.Textbox(
+                                label="📧 Email Address",
+                                elem_classes=["input"]
+                            )
                             plan_input = gr.Dropdown(
                                 choices=["free", "pro", "enterprise"],
                                 value="free",
-                                label="📋 Plan"
+                                label="📋 Plan",
+                                elem_classes=["input"]
                             )
                             
                             create_btn = gr.Button(
                                 "✨ Create API Key",
-                                elem_classes=["gr-button-primary"],
+                                elem_classes=["btn", "btn-primary"],
                                 variant="primary"
                             )
                             
@@ -759,52 +967,70 @@ class GradioInterface:
                             api_key_display = gr.Textbox(
                                 label="🔑 Your API Key",
                                 interactive=False,
-                                visible=False
+                                visible=False,
+                                elem_classes=["input"]
                             )
                         
-                        with gr.Column():
+                        with gr.Column(scale=1):
                             gr.Markdown("### 📊 Account Statistics")
                             stats_api_key = gr.Textbox(
                                 label="🔑 API Key",
                                 type="password",
-                                placeholder="Enter API key to view stats"
+                                placeholder="Enter API key to view stats",
+                                elem_classes=["input"]
                             )
                             
                             refresh_stats_btn = gr.Button(
                                 "🔄 Refresh Stats",
-                                elem_classes=["gr-button-secondary"]
+                                elem_classes=["btn", "btn-secondary"]
                             )
                             
                             user_stats_display = gr.HTML()
                 
                 # Analytics Tab
-                with gr.Tab("📈 Analytics", elem_classes=["feature-card"]):
-                    gr.Markdown("### 📊 Platform Analytics")
+                with gr.Tab("📈 Analytics", elem_classes=["card"]):
+                    gr.Markdown("### 📊 Usage Analytics")
                     
-                    # Enhanced dark theme analytics placeholder
-                    gr.HTML("""
-                    <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>
-                    """)
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            analytics_api_key = gr.Textbox(
+                                label="🔑 API Key",
+                                type="password",
+                                placeholder="Enter API key to view analytics",
+                                elem_classes=["input"]
+                            )
+                            refresh_analytics_btn = gr.Button(
+                                "📈 Generate Analytics",
+                                elem_classes=["btn", "btn-primary"]
+                            )
+                        
+                    analytics_plot = gr.Plot(label="Usage Analytics")
+                
+                # Admin Tab (only visible to admin)
+                with gr.Tab("👑 Admin", elem_classes=["card"], visible=bool(self.service.config.ADMIN_EMAIL)):
+                    gr.Markdown("### 👑 Admin Dashboard")
+                    
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            admin_api_key = gr.Textbox(
+                                label="🔑 Admin API Key",
+                                type="password",
+                                placeholder="Enter admin API key",
+                                elem_classes=["input"]
+                            )
+                            refresh_admin_btn = gr.Button(
+                                "🔄 Refresh Admin Stats",
+                                elem_classes=["btn", "btn-primary"]
+                            )
+                        
+                    admin_plot = gr.Plot(label="Platform Analytics")
+                    admin_stats_display = gr.HTML()
+            
+            # Footer
+            self.create_footer()
             
             # Event Handlers
-            async def handle_generation(prompt, api_key, max_tokens, temperature, top_k, top_p):
+            async def handle_generation(prompt, api_key, max_tokens, temperature, top_k, top_p, repetition_penalty):
                 if not api_key.strip():
                     return "⚠️ Please enter your API key", {}, False
                 
@@ -814,29 +1040,50 @@ class GradioInterface:
                     max_tokens=max_tokens,
                     temperature=temperature,
                     top_k=top_k,
-                    top_p=top_p
+                    top_p=top_p,
+                    repetition_penalty=repetition_penalty
                 )
                 
                 if response.success:
+                    stats_html = f"""
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem;">
+                        <div class="stat-card">
+                            <div class="stat-value">{response.data['tokens_used']}</div>
+                            <div class="stat-label">Tokens Used</div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-value">{response.data['requests_remaining']}</div>
+                            <div class="stat-label">Requests Left</div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-value">{response.data['user_plan'].title()}</div>
+                            <div class="stat-label">Current Plan</div>
+                        </div>
+                    </div>
+                    """
                     return (
                         response.data["generated_text"],
-                        response.data,
+                        stats_html,
                         True
                     )
                 else:
-                    return response.error, {}, False
+                    return (
+                        response.error,
+                        f'<div class="alert alert-error">{response.error}</div>',
+                        False
+                    )
             
             async def handle_user_creation(name, email, plan):
                 if not name or not name.strip():
                     return (
-                        f'<div class="alert-error">❌ Name is required</div>',
+                        f'<div class="alert alert-error">❌ Name is required</div>',
                         "",
                         False
                     )
                 
                 if not email or not email.strip():
                     return (
-                        f'<div class="alert-error">❌ Email is required</div>',
+                        f'<div class="alert alert-error">❌ Email is required</div>',
                         "",
                         False
                     )
@@ -845,13 +1092,13 @@ class GradioInterface:
                 
                 if response.success:
                     return (
-                        f'<div class="alert-success">✅ Account created successfully!</div>',
+                        f'<div class="alert alert-success">✅ Account created successfully! Your API key is below.</div>',
                         response.data["api_key"],
                         True
                     )
                 else:
                     return (
-                        f'<div class="alert-error">❌ {response.error}</div>',
+                        f'<div class="alert alert-error">❌ {response.error}</div>',
                         "",
                         False
                     )
@@ -862,43 +1109,136 @@ class GradioInterface:
                 if response.success:
                     stats = response.data
                     return f"""
-                    <div class="stats-card">
-                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
-                            <div class="metric">
-                                <div class="metric-value">{stats['total_requests']}</div>
-                                <div class="metric-label">Total Requests</div>
+                    <div>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
+                            <div class="stat-card">
+                                <div class="stat-value">{stats['total_requests']}</div>
+                                <div class="stat-label">Total Requests</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-value">{stats['tokens_used']:,}</div>
+                                <div class="stat-label">Tokens Used</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-value">{stats['requests_this_hour']}/{stats['rate_limit']}</div>
+                                <div class="stat-label">Hourly Usage</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-value">{stats['plan'].title()}</div>
+                                <div class="stat-label">Current Plan</div>
+                            </div>
+                        </div>
+                        <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--card-border);">
+                            <h3 style="margin-top: 0;">Account Details</h3>
+                            <p><strong>Name:</strong> {stats['name']}</p>
+                            <p><strong>Email:</strong> {stats['email']}</p>
+                            <p><strong>Member since:</strong> {stats['created_at'][:10] if stats['created_at'] else 'N/A'}</p>
+                            <p><strong>Last request:</strong> {stats['last_request'][:19] if stats['last_request'] else 'Never'}</p>
+                        </div>
+                    </div>
+                    """
+                else:
+                    return f'<div class="alert alert-error">❌ {response.error}</div>'
+            
+            async def handle_analytics_refresh(api_key):
+                response = await self.service.get_user_stats(api_key)
+                
+                if response.success:
+                    return response.data["plot"]
+                else:
+                    return go.Figure().update_layout(
+                        title="Error loading analytics",
+                        paper_bgcolor='rgba(0,0,0,0)',
+                        plot_bgcolor='rgba(0,0,0,0)',
+                        font=dict(color='white')
+                    )
+            
+            async def handle_admin_refresh(api_key):
+                response = await self.service.get_admin_stats(api_key)
+                
+                if response.success:
+                    stats = response.data
+                    
+                    stats_html = f"""
+                    <div style="margin-bottom: 2rem;">
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
+                            <div class="stat-card">
+                                <div class="stat-value">{stats['total_users']}</div>
+                                <div class="stat-label">Total Users</div>
                             </div>
-                            <div class="metric">
-                                <div class="metric-value">{stats['tokens_used']:,}</div>
-                                <div class="metric-label">Tokens Used</div>
+                            <div class="stat-card">
+                                <div class="stat-value">{stats['active_users']}</div>
+                                <div class="stat-label">Active Users</div>
                             </div>
-                            <div class="metric">
-                                <div class="metric-value">{stats['requests_this_hour']}/{stats['rate_limit']}</div>
-                                <div class="metric-label">Hourly Usage</div>
+                            <div class="stat-card">
+                                <div class="stat-value">{stats['total_requests']}</div>
+                                <div class="stat-label">Total Requests</div>
                             </div>
-                            <div class="metric">
-                                <div class="metric-value">{stats['plan'].title()}</div>
-                                <div class="metric-label">Current Plan</div>
+                            <div class="stat-card">
+                                <div class="stat-value">{stats['total_tokens']:,}</div>
+                                <div class="stat-label">Tokens Generated</div>
                             </div>
                         </div>
-                        <hr style="margin: 2rem 0; opacity: 0.3;">
-                        <p><strong>Account:</strong> {stats['name']} ({stats['email']})</p>
-                        <p><strong>Member since:</strong> {stats['created_at'][:10] if stats['created_at'] else 'N/A'}</p>
                     </div>
+                    <div>
+                        <h3>User List</h3>
+                        <div style="max-height: 300px; overflow-y: auto;">
+                            <table style="width: 100%; border-collapse: collapse;">
+                                <thead>
+                                    <tr style="border-bottom: 1px solid rgba(255,255,255,0.1);">
+                                        <th style="text-align: left; padding: 0.75rem;">Name</th>
+                                        <th style="text-align: left; padding: 0.75rem;">Email</th>
+                                        <th style="text-align: left; padding: 0.75rem;">Plan</th>
+                                        <th style="text-align: left; padding: 0.75rem;">Requests</th>
+                                        <th style="text-align: left; padding: 0.75rem;">Tokens</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
                     """
+                    
+                    for user in stats['users']:
+                        stats_html += f"""
+                                    <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
+                                        <td style="padding: 0.75rem;">{user.get('name', 'N/A')}</td>
+                                        <td style="padding: 0.75rem;">{user.get('email', 'N/A')}</td>
+                                        <td style="padding: 0.75rem;"><span class="badge badge-{user.get('plan', 'free')}">{user.get('plan', 'free').title()}</span></td>
+                                        <td style="padding: 0.75rem;">{user.get('requests', 0)}</td>
+                                        <td style="padding: 0.75rem;">{user.get('tokens_used', 0):,}</td>
+                                    </tr>
+                        """
+                    
+                    stats_html += """
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    """
+                    
+                    return stats["plot"], stats_html
                 else:
-                    return f'<div class="alert-error">❌ {response.error}</div>'
+                    return go.Figure().update_layout(
+                        title="Error loading admin data",
+                        paper_bgcolor='rgba(0,0,0,0)',
+                        plot_bgcolor='rgba(0,0,0,0)',
+                        font=dict(color='white')
+                    ), f'<div class="alert alert-error">❌ {response.error}</div>'
             
             # Wire up events
             generate_btn.click(
                 fn=handle_generation,
                 inputs=[
                     prompt_input, api_key_playground, max_tokens_input,
-                    temperature_input, top_k_input, top_p_input
+                    temperature_input, top_k_input, top_p_input, repetition_penalty_input
                 ],
                 outputs=[output_text, generation_stats, generation_stats]
             )
             
+            clear_btn.click(
+                fn=lambda: ("", "", False),
+                inputs=[],
+                outputs=[prompt_input, output_text, generation_stats]
+            )
+            
             create_btn.click(
                 fn=handle_user_creation,
                 inputs=[name_input, email_input, plan_input],
@@ -910,6 +1250,18 @@ class GradioInterface:
                 inputs=[stats_api_key],
                 outputs=[user_stats_display]
             )
+            
+            refresh_analytics_btn.click(
+                fn=handle_analytics_refresh,
+                inputs=[analytics_api_key],
+                outputs=[analytics_plot]
+            )
+            
+            refresh_admin_btn.click(
+                fn=handle_admin_refresh,
+                inputs=[admin_api_key],
+                outputs=[admin_plot, admin_stats_display]
+            )
         
         return app
 
@@ -936,7 +1288,7 @@ async def main():
             favicon_path=None,
             ssl_keyfile=None,
             ssl_certfile=None,
-            auth=None,  # Add your auth function here if needed
+            auth=None,
             max_threads=10
         )