Update app.py

app.py

@@ -13,29 +13,29 @@ import tempfile
 # Configure logging to match the log format
 logging.basicConfig(level=logging.INFO, format='%(asctime)s,%(msecs)03d - %(levelname)s - %(message)s')
 
-# CSS styling for the Gradio interface
+# CSS styling for the Gradio interface with a dark theme and high-contrast text
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
 
 body {
     font-family: 'Roboto', sans-serif;
-    background-color: #F9FAFB;
-    color: #1E40AF;
+    background-color: #1F2937;
+    color: #D1D5DB;
     margin: 0;
     padding: 20px;
 }
 
 h1 {
-    color: #1E40AF;
+    color: #FFFFFF;
     text-align: center;
     font-size: 2rem;
     margin-bottom: 30px;
 }
 
 .gr-button {
-    background-color: #1E40AF;
-    color: white;
+    background-color: #2DD4BF;
+    color: #1F2937;
     border: none;
     border-radius: 8px;
     padding: 12px 24px;
@@ -44,7 +44,7 @@ h1 {
 }
 
 .gr-button:hover {
-    background-color: #3B82F6;
+    background-color: #26A69A;
 }
 
 .dashboard-container {
@@ -56,9 +56,10 @@ h1 {
 }
 
 .card {
-    background-color: white;
+    background-color: #374151;
+    border: 1px solid #4B5563;
     border-radius: 10px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     padding: 20px;
     transition: transform 0.2s;
 }
@@ -68,7 +69,7 @@ h1 {
 }
 
 .card h2 {
-    color: #1E40AF;
+    color: #FFFFFF;
     font-size: 1.2rem;
     margin-top: 0;
     margin-bottom: 15px;
@@ -78,12 +79,11 @@ h1 {
 }
 
 .device-card {
-    background-color: #EFF6FF;
-    border-left: 5px solid #1E40AF;
+    border-left: 5px solid #2DD4BF;
 }
 
 .alert-card {
-    border-left: 5px solid #EF4444;
+    border-left: 5px solid #F87171;
 }
 
 .chart-container {
@@ -107,8 +107,8 @@ h1 {
 }
 
 .flowchart-step {
-    background-color: #EFF6FF;
-    border-left: 5px solid #1E40AF;
+    background-color: #4B5563;
+    border-left: 5px solid #2DD4BF;
     padding: 15px;
     border-radius: 5px;
     position: relative;
@@ -121,22 +121,22 @@ h1 {
     left: 50%;
     transform: translateX(-50%);
     font-size: 20px;
-    color: #1E40AF;
+    color: #2DD4BF;
 }
 
 .alert-urgent {
-    color: #EF4444;
+    color: #F87171;
     font-weight: bold;
 }
 
 .alert-upcoming {
-    color: #F59E0B;
+    color: #FBBF24;
     font-weight: bold;
 }
 
 .recommendation {
     font-style: italic;
-    color: #4B5563;
+    color: #9CA3AF;
     margin-top: 10px;
 }
 
@@ -150,7 +150,7 @@ h1 {
 
 .anomaly-unusual {
     background-color: #FEE2E2;
-    color: #EF4444;
+    color: #F87171;
 }
 
 .anomaly-normal {
@@ -162,8 +162,8 @@ h1 {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    background-color: #1E40AF;
-    color: white;
+    background-color: #2DD4BF;
+    color: #1F2937;
     padding: 10px 20px;
     border-radius: 8px;
     text-decoration: none;
@@ -172,7 +172,27 @@ h1 {
 }
 
 .download-button:hover {
-    background-color: #3B82F6;
+    background-color: #26A69A;
+}
+
+/* Ensure text in dataframe is readable */
+.dataframe-container table {
+    color: #D1D5DB;
+    background-color: #374151;
+}
+
+.dataframe-container thead th {
+    background-color: #4B5563;
+    color: #FFFFFF;
+    font-weight: 500;
+}
+
+.dataframe-container tbody tr:nth-child(even) {
+    background-color: #4B5563;
+}
+
+.dataframe-container tbody tr:hover {
+    background-color: #6B7280;
 }
 
 /* Responsive Design */
@@ -416,8 +436,8 @@ def generate_usage_plot(df):
     """
     try:
         plt.figure(figsize=(12, 6))
-        # Define colors for statuses
-        status_colors = {'Active': '#3B82F6', 'Inactive': '#EF4444', 'Down': '#F59E0B', 'Online': '#10B981'}
+        # Define colors for statuses (adjusted for dark theme visibility)
+        status_colors = {'Active': '#2DD4BF', 'Inactive': '#F87171', 'Down': '#FBBF24', 'Online': '#10B981'}
         for status in df['status'].unique():
             subset = df[df['status'] == status]
             plt.bar(
@@ -426,11 +446,14 @@ def generate_usage_plot(df):
                 label=status,
                 color=status_colors.get(status, '#6B7280')
             )
-        plt.xlabel("Equipment (Status)", fontsize=12)
-        plt.ylabel("Usage Count", fontsize=12)
-        plt.title("Device Usage Overview", fontsize=14, color='#1E40AF')
+        plt.xlabel("Equipment (Status)", fontsize=12, color='#D1D5DB')
+        plt.ylabel("Usage Count", fontsize=12, color='#D1D5DB')
+        plt.title("Device Usage Overview", fontsize=14, color='#FFFFFF')
         plt.legend(title="Status")
-        plt.xticks(rotation=45, ha='right')
+        plt.xticks(rotation=45, ha='right', color='#D1D5DB')
+        plt.yticks(color='#D1D5DB')
+        plt.gca().set_facecolor('#374151')
+        plt.gcf().set_facecolor('#1F2937')
         plt.tight_layout()
 
         # Save plot to temporary file