Update app.py

app.py

@@ -15,77 +15,101 @@ logging.basicConfig(level=logging.INFO, format='%(asctime)s,%(msecs)03d - %(leve
 
 # CSS styling for the Gradio interface
 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: Arial, sans-serif;
-    background-color: #F3F4F6;
-    color: #1E3A8A;
+    font-family: 'Roboto', sans-serif;
+    background-color: #F9FAFB;
+    color: #1E40AF;
+    margin: 0;
+    padding: 20px;
 }
 
 h1 {
-    color: #1E3A8A;
+    color: #1E40AF;
     text-align: center;
-    margin-bottom: 20px;
+    font-size: 2rem;
+    margin-bottom: 30px;
 }
 
 .gr-button {
-    background-color: #1E3A8A;
+    background-color: #1E40AF;
     color: white;
     border: none;
-    border-radius: 5px;
-    padding: 10px 20px;
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-weight: 500;
+    transition: background-color 0.3s;
 }
 
 .gr-button:hover {
-    background-color: #2B4C9B;
+    background-color: #3B82F6;
 }
 
-.summary-card {
+.dashboard-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.card {
     background-color: white;
     border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    margin: 20px 0;
+    transition: transform 0.2s;
+}
+
+.card:hover {
+    transform: translateY(-5px);
 }
 
-.summary-card h2 {
-    color: #1E3A8A;
+.card h2 {
+    color: #1E40AF;
+    font-size: 1.2rem;
     margin-top: 0;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
-.maintenance-alert {
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 15px;
-    margin: 10px 0;
+.device-card {
+    background-color: #EFF6FF;
+    border-left: 5px solid #1E40AF;
 }
 
-.alert-urgent {
-    color: #DC2626;
-    font-weight: bold;
+.alert-card {
+    border-left: 5px solid #EF4444;
 }
 
-.alert-upcoming {
-    color: #F59E0B;
-    font-weight: bold;
+.chart-container {
+    overflow-x: auto;
 }
 
-.recommendation {
-    font-style: italic;
-    color: #4B5563;
+.dataframe-container {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.flowchart-container {
+    max-height: 400px;
+    overflow-y: auto;
 }
 
 .flowchart {
     display: flex;
     flex-direction: column;
     gap: 10px;
-    margin: 20px 0;
 }
 
 .flowchart-step {
-    background-color: #E5E7EB;
-    border-left: 5px solid #1E3A8A;
-    padding: 10px;
+    background-color: #EFF6FF;
+    border-left: 5px solid #1E40AF;
+    padding: 15px;
     border-radius: 5px;
     position: relative;
 }
@@ -97,15 +121,83 @@ h1 {
     left: 50%;
     transform: translateX(-50%);
     font-size: 20px;
-    color: #1E3A8A;
+    color: #1E40AF;
 }
 
-.report-preview {
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 15px;
-    margin: 10px 0;
+.alert-urgent {
+    color: #EF4444;
+    font-weight: bold;
+}
+
+.alert-upcoming {
+    color: #F59E0B;
+    font-weight: bold;
+}
+
+.recommendation {
+    font-style: italic;
+    color: #4B5563;
+    margin-top: 10px;
+}
+
+.anomaly-badge {
+    display: inline-block;
+    padding: 5px 10px;
+    border-radius: 12px;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.anomaly-unusual {
+    background-color: #FEE2E2;
+    color: #EF4444;
+}
+
+.anomaly-normal {
+    background-color: #D1FAE5;
+    color: #10B981;
+}
+
+.download-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background-color: #1E40AF;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background-color 0.3s;
+}
+
+.download-button:hover {
+    background-color: #3B82F6;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .dashboard-container {
+        grid-template-columns: 1fr;
+    }
+
+    h1 {
+        font-size: 1.5rem;
+    }
+
+    .card {
+        padding: 15px;
+    }
+
+    .gr-button {
+        width: 100%;
+        padding: 10px;
+    }
+
+    .download-button {
+        width: 100%;
+        justify-content: center;
+    }
 }
 """
 
@@ -126,6 +218,31 @@ def validate_csv(df):
         return False, f"Invalid data types: {str(e)}"
     return True, ""
 
+def generate_device_cards(df, anomaly_df):
+    """
+    Generate HTML for device cards showing health, usage count, and status.
+    Returns an HTML string.
+    """
+    if anomaly_df is not None:
+        df['anomaly'] = anomaly_df['anomaly'].map({1: "Normal", -1: "Unusual"})
+    else:
+        df['anomaly'] = "Unknown"
+
+    html = []
+    for equipment in df['equipment'].unique():
+        device_data = df[df['equipment'] == equipment].iloc[-1]  # Latest record
+        anomaly_class = "anomaly-unusual" if device_data['anomaly'] == "Unusual" else "anomaly-normal"
+        html.append(f"""
+        <div class="card device-card">
+            <h2><i class="fas fa-microchip"></i> {equipment}</h2>
+            <p><strong>Status:</strong> {device_data['status']}</p>
+            <p><strong>Usage Count:</strong> {device_data['usage_count']}</p>
+            <p><strong>Activity:</strong> <span class="anomaly-badge {anomaly_class}">{device_data['anomaly']}</span></p>
+            <p><strong>AMC Expiry:</strong> {device_data['amc_expiry'].strftime('%Y-%m-%d')}</p>
+        </div>
+        """)
+    return "\n".join(html)
+
 def generate_summary(combined_df, anomaly_df, amc_df, plot_path, pdf_path):
     """
     Generate a detailed and easy-to-understand summary of the processing results.
@@ -138,21 +255,21 @@ def generate_summary(combined_df, anomaly_df, amc_df, plot_path, pdf_path):
     total_records = len(combined_df)
     unique_devices = combined_df['equipment'].unique()
     summary.append(f"We processed **{total_records} log entries** for **{len(unique_devices)} devices** ({', '.join(unique_devices)}).")
-    summary.append("This report helps you understand device usage, identify unusual activity, and plan maintenance.\n")
+    summary.append("This dashboard provides real-time insights into device health, usage patterns, and maintenance needs.\n")
 
-    # Unusual Activity (Anomalies)
-    summary.append("## Unusual Activity")
+    # Downtime Insights (Anomalies)
+    summary.append("## Downtime Insights")
     if anomaly_df is not None:
         num_anomalies = sum(anomaly_df['anomaly'] == -1)
         if num_anomalies > 0:
-            summary.append(f"We found **{num_anomalies} unusual activities** that might need your attention:")
+            summary.append(f"**{num_anomalies} potential downtime risks** detected:")
             anomaly_records = anomaly_df[anomaly_df['anomaly'] == -1][['equipment', 'usage_count', 'status']]
             for _, row in anomaly_records.iterrows():
-                summary.append(f"- **{row['equipment']}** (Usage: {row['usage_count']}, Status: {row['status']}) - High or low usage compared to others might indicate overuse or underuse.")
+                summary.append(f"- **{row['equipment']}** (Usage: {row['usage_count']}, Status: {row['status']}) - Indicates possible overuse or underuse.")
         else:
-            summary.append("No unusual activity detected. All devices are operating within expected usage patterns.")
+            summary.append("No potential downtime risks detected. All devices are operating within expected patterns.")
     else:
-        summary.append("We couldn’t check for unusual activity due to an error.")
+        summary.append("Unable to detect downtime risks due to an error.")
     summary.append("\n")
 
     # Maintenance Alerts (AMC Expiries)
@@ -173,7 +290,7 @@ def generate_summary(combined_df, anomaly_df, amc_df, plot_path, pdf_path):
     # Generated Reports
     summary.append("## Generated Reports")
     summary.append("- **Usage Chart**: Visualizes usage patterns across devices, helping identify overworked or underused equipment. See below for the chart.")
-    summary.append("- **PDF Report**: A comprehensive report including a full data table, unusual activity details, maintenance alerts, and a detailed flowchart of our process. Download it below.")
+    summary.append("- **PDF Report**: A comprehensive report including device logs, downtime insights, maintenance alerts, and a processing flowchart. Download it below.")
 
     return "\n".join(summary)
 
@@ -186,7 +303,7 @@ def generate_flowchart_html():
         ("Upload CSV File(s)", "User uploads log files in CSV format."),
         ("Validate Data", "Checks for required columns (equipment, usage_count, status, amc_expiry) and correct data types."),
         ("Generate Usage Chart", "Creates a bar chart showing usage counts by device and status (e.g., Active, Inactive)."),
-        ("Detect Unusual Activity", "Uses Local Outlier Factor to identify devices with unusual usage patterns (e.g., too high or too low)."),
+        ("Detect Downtime Risks", "Uses Local Outlier Factor to identify devices with unusual usage patterns (e.g., too high or too low)."),
         ("Check Maintenance Dates", "Identifies devices with AMC expiries within 7 days from 2025-06-05."),
         ("Create PDF Report", "Generates a detailed PDF with data tables, insights, and this flowchart.")
     ]
@@ -199,21 +316,21 @@ def generate_flowchart_html():
 def process_files(uploaded_files):
     """
     Process uploaded CSV files, generate usage plots, detect anomalies, and process AMC expiries.
-    Returns a dataframe, plot path, PDF path, AMC expiry message, summary, and flowchart HTML.
+    Returns a dataframe, plot path, PDF path, AMC expiry message, summary, device cards HTML, and flowchart HTML.
     """
     # Log received files
     logging.info(f"Received uploaded files: {uploaded_files}")
 
     if not uploaded_files:
         logging.warning("No files uploaded.")
-        return None, None, None, "Please upload at least one valid CSV file.", "## Summary\nNo files uploaded.", ""
+        return None, None, None, "Please upload at least one valid CSV file.", "## Summary\nNo files uploaded.", "", ""
 
     valid_files = [f for f in uploaded_files if f.name.endswith('.csv')]
     logging.info(f"Processing {len(valid_files)} valid files: {valid_files}")
 
     if not valid_files:
         logging.warning("No valid CSV files uploaded.")
-        return None, None, None, "Please upload at least one valid CSV file.", "## Summary\nNo valid CSV files uploaded.", ""
+        return None, None, None, "Please upload at least one valid CSV file.", "## Summary\nNo valid CSV files uploaded.", "", ""
 
     logging.info("Loading logs from uploaded files...")
     all_data = []
@@ -227,15 +344,15 @@ def process_files(uploaded_files):
             is_valid, error_msg = validate_csv(df)
             if not is_valid:
                 logging.error(f"Failed to load {file.name}: {error_msg}")
-                return None, None, None, f"Error loading {file.name}: {error_msg}", f"## Summary\nError: {error_msg}", ""
+                return None, None, None, f"Error loading {file.name}: {error_msg}", f"## Summary\nError: {error_msg}", "", ""
             all_data.append(df)
         except Exception as e:
             logging.error(f"Failed to load {file.name}: {str(e)}")
-            return None, None, None, f"Error loading {file.name}: {str(e)}", f"## Summary\nError: {str(e)}", ""
+            return None, None, None, f"Error loading {file.name}: {str(e)}", f"## Summary\nError: {str(e)}", "", ""
 
     if not all_data:
         logging.warning("No data loaded from uploaded files.")
-        return None, None, None, "No valid data found in uploaded files.", "## Summary\nNo data loaded.", ""
+        return None, None, None, "No valid data found in uploaded files.", "## Summary\nNo data loaded.", "", ""
 
     combined_df = pd.concat(all_data, ignore_index=True)
     logging.info(f"Combined {len(combined_df)} total records.")
@@ -248,7 +365,7 @@ def process_files(uploaded_files):
         logging.info("Usage plot generated successfully.")
     else:
         logging.error("Failed to generate usage plot.")
-        return combined_df, None, None, "Failed to generate usage plot.", "## Summary\nUsage plot generation failed.", ""
+        return combined_df, None, None, "Failed to generate usage plot.", "## Summary\nUsage plot generation failed.", "", ""
 
     # Detect anomalies using Local Outlier Factor
     logging.info("Detecting anomalies using Local Outlier Factor...")
@@ -275,6 +392,11 @@ def process_files(uploaded_files):
     summary = generate_summary(combined_df, anomaly_df, amc_df, plot_path, pdf_path)
     logging.info("Summary generated successfully.")
 
+    # Generate device cards
+    logging.info("Generating device cards HTML...")
+    device_cards_html = generate_device_cards(combined_df, anomaly_df)
+    logging.info("Device cards HTML generated successfully.")
+
     # Generate flowchart HTML
     logging.info("Generating flowchart HTML...")
     flowchart_html = generate_flowchart_html()
@@ -285,7 +407,7 @@ def process_files(uploaded_files):
     if anomaly_df is not None:
         output_df['anomaly'] = anomaly_df['anomaly'].map({1: "Normal", -1: "Unusual"})
 
-    return output_df, plot_path, pdf_path, amc_message, summary, flowchart_html
+    return output_df, plot_path, pdf_path, amc_message, summary, device_cards_html, flowchart_html
 
 def generate_usage_plot(df):
     """
@@ -295,18 +417,18 @@ def generate_usage_plot(df):
     try:
         plt.figure(figsize=(12, 6))
         # Define colors for statuses
-        status_colors = {'Active': '#36A2EB', 'Inactive': '#FF6384', 'Down': '#FFCE56', 'Online': '#4BC0C0'}
+        status_colors = {'Active': '#3B82F6', 'Inactive': '#EF4444', 'Down': '#F59E0B', 'Online': '#10B981'}
         for status in df['status'].unique():
             subset = df[df['status'] == status]
             plt.bar(
                 subset['equipment'] + f" ({status})",
                 subset['usage_count'],
                 label=status,
-                color=status_colors.get(status, '#999999')
+                color=status_colors.get(status, '#6B7280')
             )
         plt.xlabel("Equipment (Status)", fontsize=12)
         plt.ylabel("Usage Count", fontsize=12)
-        plt.title("Usage Count by Equipment and Status", fontsize=14)
+        plt.title("Device Usage Overview", fontsize=14, color='#1E40AF')
         plt.legend(title="Status")
         plt.xticks(rotation=45, ha='right')
         plt.tight_layout()
@@ -373,7 +495,7 @@ def generate_pdf_report(original_df, anomaly_df, amc_df):
             def draw_header():
                 c.setFont("Helvetica-Bold", 16)
                 c.setFillColor(colors.darkblue)
-                c.drawString(50, height - 50, "Equipment Log Analysis Report")
+                c.drawString(50, height - 50, "Multi-Device LabOps Dashboard Report")
                 c.setFont("Helvetica", 10)
                 c.setFillColor(colors.black)
                 c.drawString(50, height - 70, f"Generated on: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
@@ -398,7 +520,7 @@ def generate_pdf_report(original_df, anomaly_df, amc_df):
             c.drawString(50, y, f"Unique Devices: {', '.join(original_df['equipment'].unique())}")
             y -= 40
 
-            # Data Table
+            # Device Log Details
             y = draw_section_title("Device Log Details", y)
             c.setFont("Helvetica-Bold", 10)
             headers = ["Equipment", "Usage Count", "Status", "AMC Expiry", "Activity"]
@@ -425,12 +547,12 @@ def generate_pdf_report(original_df, anomaly_df, amc_df):
                     draw_header()
                     c.setFont("Helvetica", 10)
 
-            # Anomalies
-            y = draw_section_title("Unusual Activity (Using Local Outlier Factor)", y)
+            # Downtime Insights
+            y = draw_section_title("Downtime Insights (Using Local Outlier Factor)", y)
             c.setFont("Helvetica", 12)
             if anomaly_df is not None:
                 num_anomalies = sum(anomaly_df['anomaly'] == -1)
-                c.drawString(50, y, f"Unusual Activities Detected: {num_anomalies}")
+                c.drawString(50, y, f"Potential Downtime Risks Detected: {num_anomalies}")
                 y -= 20
                 if num_anomalies > 0:
                     anomaly_records = anomaly_df[anomaly_df['anomaly'] == -1][['equipment', 'usage_count', 'status']]
@@ -448,7 +570,7 @@ def generate_pdf_report(original_df, anomaly_df, amc_df):
                             draw_header()
                             c.setFont("Helvetica-Oblique", 10)
             else:
-                c.drawString(50, y, "Unable to detect unusual activity due to an error.")
+                c.drawString(50, y, "Unable to detect downtime risks due to an error.")
                 y -= 20
             y -= 20
 
@@ -499,9 +621,9 @@ def generate_pdf_report(original_df, anomaly_df, amc_df):
                 ("1. Upload CSV File(s)", "User uploads log files in CSV format containing device usage data."),
                 ("2. Validate Data", "Ensures all required columns (equipment, usage_count, status, amc_expiry) are present and data types are correct (e.g., usage_count as numeric, amc_expiry as date)."),
                 ("3. Generate Usage Chart", "Creates a bar chart showing usage counts by device and status (e.g., Active, Inactive) to visualize usage patterns."),
-                ("4. Detect Unusual Activity", "Uses Local Outlier Factor (LOF) algorithm to identify devices with unusual usage patterns by comparing local density of usage counts (contamination=0.1, n_neighbors=5)."),
+                ("4. Detect Downtime Risks", "Uses Local Outlier Factor (LOF) algorithm to identify devices with unusual usage patterns by comparing local density of usage counts (contamination=0.1, n_neighbors=5)."),
                 ("5. Check Maintenance Dates", "Identifies devices with AMC expiries within 7 days from 2025-06-05, calculating days left and urgency (urgent if ≤3 days)."),
-                ("6. Create PDF Report", "Generates this PDF with a data table, unusual activity details, maintenance alerts, and this detailed flowchart.")
+                ("6. Create PDF Report", "Generates this PDF with a data table, downtime insights, maintenance alerts, and this detailed flowchart.")
             ]
             for step, description in flowchart:
                 c.drawString(50, y, step)
@@ -525,29 +647,30 @@ def generate_pdf_report(original_df, anomaly_df, amc_df):
 
 # Gradio interface
 with gr.Blocks(css=css) as demo:
-    gr.Markdown("# Equipment Log Analysis")
-    with gr.Row():
-        file_input = gr.File(file_count="multiple", label="Upload CSV Files")
-        process_button = gr.Button("Process Files")
+    gr.Markdown("# Multi-Device LabOps Dashboard")
     with gr.Row():
-        output_summary = gr.Markdown(label="Summary of Results", elem_classes=["summary-card"])
+        file_input = gr.File(file_count="multiple", label="Upload Device Logs (CSV)")
+        process_button = gr.Button("Process Logs")
     with gr.Row():
-        output_df = gr.Dataframe(label="Processed Data")
-        output_plot = gr.Image(label="Usage Chart")
-    with gr.Row():
-        output_message = gr.Textbox(label="Maintenance Alerts", elem_classes=["maintenance-alert"])
-        output_pdf = gr.File(label="Download Detailed PDF Report")
-    with gr.Row():
-        output_flowchart = gr.HTML(generate_flowchart_html(), label="Processing Flowchart")
-    with gr.Row():
-        gr.Markdown("## Report Previews", elem_classes=["report-preview"])
-        gr.Markdown("- **Usage Chart**: See the bar chart above for a visual of device usage by status.")
-        gr.Markdown("- **PDF Report**: Download the PDF above for a full analysis, including data tables, unusual activity, maintenance alerts, and a detailed flowchart.")
-
+        output_summary = gr.Markdown(label="Dashboard Summary", elem_classes=["card"])
+    with gr.Row(elem_classes=["dashboard-container"]):
+        output_device_cards = gr.HTML(label="Device Overview")
+    with gr.Row(elem_classes=["dashboard-container"]):
+        with gr.Column():
+            output_plot = gr.Image(label="Usage Chart", elem_classes=["card", "chart-container"])
+        with gr.Column():
+            output_message = gr.Textbox(label="Maintenance Alerts", elem_classes=["card", "alert-card"])
+    with gr.Row(elem_classes=["dashboard-container"]):
+        output_df = gr.Dataframe(label="Device Logs", elem_classes=["card", "dataframe-container"])
+    with gr.Row(elem_classes=["dashboard-container"]):
+        output_flowchart = gr.HTML(label="Processing Flowchart", elem_classes=["card", "flowchart-container"])
+    with gr.Row(elem_classes=["dashboard-container"]):
+        with gr.Column():
+            output_pdf = gr.File(label="Download Detailed Report", elem_classes=["card"])
     process_button.click(
         fn=process_files,
         inputs=[file_input],
-        outputs=[output_df, output_plot, output_pdf, output_message, output_summary, output_flowchart]
+        outputs=[output_df, output_plot, output_pdf, output_message, output_summary, output_device_cards, output_flowchart]
     )
 
 if __name__ == "__main__":