Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Nov 28, 2024

Commit

c20175b

verified ·

1 Parent(s): 1536520

Update main.py

Browse files

Files changed (1) hide show

main.py +139 -46

main.py CHANGED Viewed

@@ -341,7 +341,6 @@ async def usage_page():
     """Serve an HTML page showing usage statistics"""
     # Retrieve usage data
     usage_data = usage_tracker.get_usage_summary()
     # Model Usage Table Rows
     model_usage_rows = "\n".join([
         f"""
@@ -353,7 +352,6 @@ async def usage_page():
         </tr>
         """ for model, model_data in usage_data['models'].items()
     ])
     # API Endpoint Usage Table Rows
     api_usage_rows = "\n".join([
         f"""
@@ -365,7 +363,6 @@ async def usage_page():
         </tr>
         """ for endpoint, endpoint_data in usage_data['api_endpoints'].items()
     ])
     # Daily Usage Table Rows
     daily_usage_rows = "\n".join([
         "\n".join([
@@ -378,58 +375,154 @@ async def usage_page():
             """ for entity, requests in date_data.items()
         ]) for date, date_data in usage_data['recent_daily_usage'].items()
     ])
-    # Combine the full HTML content
     html_content = f"""
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <title>API Usage Statistics</title>
         <style>
-            body {{ font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; }}
-            h1 {{ color: #333; }}
-            table {{ width: 100%; border-collapse: collapse; margin-bottom: 20px; }}
-            th, td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
-            th {{ background-color: #f2f2f2; }}
         </style>
     </head>
     <body>
-        <h1>API Usage Statistics</h1>
-        <h2>Total Requests: {usage_data['total_requests']}</h2>
-        <h3>Model Usage</h3>
-        <table>
-            <tr>
-                <th>Model</th>
-                <th>Total Requests</th>
-                <th>First Used</th>
-                <th>Last Used</th>
-            </tr>
-            {model_usage_rows}
-        </table>
-        <h3>API Endpoint Usage</h3>
-        <table>
-            <tr>
-                <th>Endpoint</th>
-                <th>Total Requests</th>
-                <th>First Used</th>
-                <th>Last Used</th>
-            </tr>
-            {api_usage_rows}
-        </table>
-        <h3>Daily Usage (Last 7 Days)</h3>
-        <table>
-            <tr>
-                <th>Date</th>
-                <th>Entity</th>
-                <th>Requests</th>
-            </tr>
-            {daily_usage_rows}
-        </table>
     </body>
     </html>
     """

     """Serve an HTML page showing usage statistics"""
     # Retrieve usage data
     usage_data = usage_tracker.get_usage_summary()
     # Model Usage Table Rows
     model_usage_rows = "\n".join([
         f"""
         </tr>
         """ for model, model_data in usage_data['models'].items()
     ])
     # API Endpoint Usage Table Rows
     api_usage_rows = "\n".join([
         f"""
         </tr>
         """ for endpoint, endpoint_data in usage_data['api_endpoints'].items()
     ])
     # Daily Usage Table Rows
     daily_usage_rows = "\n".join([
         "\n".join([
             """ for entity, requests in date_data.items()
         ]) for date, date_data in usage_data['recent_daily_usage'].items()
     ])
     html_content = f"""
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
+        <title>Lokai AI - Usage Statistics</title>
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
+            :root {{
+                --bg-dark: #0f1011;
+                --bg-darker: #070708;
+                --text-primary: #e6e6e6;
+                --text-secondary: #8c8c8c;
+                --border-color: #2c2c2c;
+                --accent-color: #3a6ee0;
+                --accent-hover: #4a7ef0;
+            }}
+            body {{
+                font-family: 'Inter', sans-serif;
+                background-color: var(--bg-dark);
+                color: var(--text-primary);
+                max-width: 1200px;
+                margin: 0 auto;
+                padding: 40px 20px;
+                line-height: 1.6;
+            }}
+            .logo {{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 30px;
+            }}
+            .logo h1 {{
+                font-weight: 600;
+                font-size: 2.5em;
+                color: var(--text-primary);
+                margin-left: 15px;
+            }}
+            .logo img {{
+                width: 60px;
+                height: 60px;
+                border-radius: 10px;
+            }}
+            .container {{
+                background-color: var(--bg-darker);
+                border-radius: 12px;
+                padding: 30px;
+                box-shadow: 0 15px 40px rgba(0,0,0,0.3);
+                border: 1px solid var(--border-color);
+            }}
+            h2, h3 {{
+                color: var(--text-primary);
+                border-bottom: 2px solid var(--border-color);
+                padding-bottom: 10px;
+                font-weight: 500;
+            }}
+            .total-requests {{
+                background-color: var(--accent-color);
+                color: white;
+                text-align: center;
+                padding: 15px;
+                border-radius: 8px;
+                margin-bottom: 30px;
+                font-weight: 600;
+                letter-spacing: -0.5px;
+            }}
+            table {{
+                width: 100%;
+                border-collapse: separate;
+                border-spacing: 0;
+                margin-bottom: 30px;
+                background-color: var(--bg-dark);
+                border-radius: 8px;
+                overflow: hidden;
+            }}
+            th, td {{
+                border: 1px solid var(--border-color);
+                padding: 12px;
+                text-align: left;
+                transition: background-color 0.3s ease;
+            }}
+            th {{
+                background-color: #1e1e1e;
+                color: var(--text-primary);
+                font-weight: 600;
+                text-transform: uppercase;
+                font-size: 0.9em;
+            }}
+            tr:nth-child(even) {{
+                background-color: rgba(255,255,255,0.05);
+            }}
+            tr:hover {{
+                background-color: rgba(62,100,255,0.1);
+            }}
+            @media (max-width: 768px) {{
+                .container {{
+                    padding: 15px;
+                }}
+                table {{
+                    font-size: 0.9em;
+                }}
+            }}
         </style>
     </head>
     <body>
+        <div class="container">
+            <div class="logo">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDM1TDUwIDkwaDEwMHoiIGZpbGw9IiMzYTZlZTAiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxNDAiIHI9IjMwIiBmaWxsPSIjM2E2ZWUwIi8+PC9zdmc+" alt="Lokai AI Logo">
+                <h1>Lokai AI</h1>
+            </div>
+            <div class="total-requests">
+                Total API Requests: {usage_data['total_requests']}
+            </div>
+            <h2>Model Usage</h2>
+            <table>
+                <tr>
+                    <th>Model</th>
+                    <th>Total Requests</th>
+                    <th>First Used</th>
+                    <th>Last Used</th>
+                </tr>
+                {model_usage_rows}
+            </table>
+            <h2>API Endpoint Usage</h2>
+            <table>
+                <tr>
+                    <th>Endpoint</th>
+                    <th>Total Requests</th>
+                    <th>First Used</th>
+                    <th>Last Used</th>
+                </tr>
+                {api_usage_rows}
+            </table>
+            <h2>Daily Usage (Last 7 Days)</h2>
+            <table>
+                <tr>
+                    <th>Date</th>
+                    <th>Entity</th>
+                    <th>Requests</th>
+                </tr>
+                {daily_usage_rows}
+            </table>
+        </div>
     </body>
     </html>
     """