Upload 2 files

app.py

@@ -0,0 +1,332 @@
+import streamlit as st
+import pandas as pd
+import joblib
+import matplotlib.pyplot as plt
+import numpy as np
+
+# Page configuration
+st.set_page_config(
+    page_title="API Error Predictor",
+    page_icon="⚠️",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Custom CSS for better styling
+st.markdown("""
+<style>
+    .main-header {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 1rem;
+    }
+    .sub-header {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-top: 1rem;
+    }
+    .info-box {
+        background-color: #f8f9fa;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1rem;
+    }
+    .prediction-box-success {
+        background-color: #d4edda;
+        color: #155724;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+    .prediction-box-error {
+        background-color: #f8d7da;
+        color: #721c24;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+    .sidebar-header {
+        font-size: 1.2rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+    }
+    .metric-container {
+        background-color: #e9ecef;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1rem;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+
+# Load trained model
+@st.cache_resource
+def load_model():
+    return joblib.load("error_classifier.pkl")
+
+
+model = load_model()
+
+# Header section
+col1, col2 = st.columns([5, 1])
+with col1:
+    st.markdown('<div class="main-header">⚠️ API Error Prediction System</div>', unsafe_allow_html=True)
+    st.markdown("""
+    <div class="info-box">
+    This tool predicts whether an API call will result in an error based on request metrics and parameters.
+    Use the sidebar to adjust input parameters and see real-time predictions.
+    </div>
+    """, unsafe_allow_html=True)
+
+with col2:
+    st.image("https://via.placeholder.com/150", width=100)  # Replace with your logo if available
+
+# Sidebar for input parameters
+st.sidebar.markdown('<div class="sidebar-header">🔧 Input Parameters</div>', unsafe_allow_html=True)
+
+# Group related parameters
+with st.sidebar.expander("API Configuration", expanded=True):
+    # API ID dropdown with colored icons
+    api_options = {
+        "OrderProcessor": "🛒",
+        "AuthService": "🔐",
+        "ProductCatalog": "📚",
+        "PaymentGateway": "💳"
+    }
+    api_id = st.selectbox(
+        "API Service",
+        options=list(api_options.keys()),
+        format_func=lambda x: f"{api_options[x]} {x}"
+    )
+    api_id_mapping = {"OrderProcessor": 2, "AuthService": 0, "ProductCatalog": 1, "PaymentGateway": 3}
+    api_id_encoded = api_id_mapping[api_id]
+
+    # Environment dropdown with descriptions
+    env_options = {
+        "production-useast1": "Production (US East)",
+        "staging": "Staging Environment"
+    }
+    env = st.selectbox(
+        "Environment",
+        options=list(env_options.keys()),
+        format_func=lambda x: env_options[x]
+    )
+    env_mapping = {"production-useast1": 1, "staging": 0}
+    env_encoded = env_mapping[env]
+
+# Performance metrics with tooltips and better ranges
+with st.sidebar.expander("Performance Metrics", expanded=True):
+    latency_ms = st.slider(
+        "Latency (ms)",
+        min_value=0.0,
+        max_value=100.0,
+        value=10.0,
+        step=0.1,
+        help="Response time in milliseconds"
+    )
+
+    bytes_transferred = st.slider(
+        "Bytes Transferred",
+        min_value=0,
+        max_value=15000,
+        value=300,
+        help="Amount of data transferred in the request/response"
+    )
+
+    hour_slider = st.slider(
+        "Hour of Day",
+        min_value=0,
+        max_value=23,
+        value=14,
+        help="The hour when the request is made (0-23)"
+    )
+    # Convert hour to more readable format
+    hour_of_day = hour_slider
+    hour_display = f"{hour_slider}:00" + (" AM" if hour_slider < 12 else " PM")
+    st.caption(f"Selected time: {hour_display}")
+
+# Resource usage
+with st.sidebar.expander("Resource Usage", expanded=True):
+    simulated_cpu_cost = st.slider(
+        "CPU Cost",
+        min_value=0.0,
+        max_value=50.0,
+        value=10.0,
+        step=0.1,
+        help="Simulated CPU utilization cost"
+    )
+
+    simulated_memory_mb = st.slider(
+        "Memory Usage (MB)",
+        min_value=0.0,
+        max_value=100.0,
+        value=25.0,
+        step=0.1,
+        help="Simulated memory usage in megabytes"
+    )
+
+# Add a reset button
+if st.sidebar.button("Reset Parameters"):
+    st.experimental_rerun()
+
+# Prepare input DataFrame
+input_df = pd.DataFrame([[
+    api_id_encoded, env_encoded, latency_ms, bytes_transferred, hour_of_day,
+    simulated_cpu_cost, simulated_memory_mb
+]], columns=[
+    'api_id', 'env', 'latency_ms', 'bytes_transferred',
+    'hour_of_day', 'simulated_cpu_cost', 'simulated_memory_mb'
+])
+
+# Get prediction
+prediction = model.predict(input_df)[0]
+probability = model.predict_proba(input_df)[0][1]
+
+# Main content area
+st.markdown('<div class="sub-header">🧠 Prediction Results</div>', unsafe_allow_html=True)
+
+# Display prediction in two columns
+col1, col2 = st.columns(2)
+
+with col1:
+    # Show prediction with better styling
+    if prediction == 0:
+        st.markdown(f"""
+        <div class="prediction-box-success">
+            <h2>✅ No Error Predicted</h2>
+            <p>The API call is likely to succeed</p>
+            <h3>Confidence: {(1 - probability) * 100:.1f}%</h3>
+        </div>
+        """, unsafe_allow_html=True)
+    else:
+        st.markdown(f"""
+        <div class="prediction-box-error">
+            <h2>🚫 Error Predicted</h2>
+            <p>The API call is likely to fail</p>
+            <h3>Confidence: {probability * 100:.1f}%</h3>
+        </div>
+        """, unsafe_allow_html=True)
+
+with col2:
+    # Create a gauge chart for probability visualization
+    fig, ax = plt.subplots(figsize=(4, 3))
+
+    # Create gauge
+    gauge_colors = [(0.2, 0.8, 0.2), (0.8, 0.8, 0.2), (0.8, 0.2, 0.2)]
+    cmap = plt.cm.RdYlGn_r
+    norm = plt.Normalize(0, 1)
+
+    theta = np.linspace(0.75 * np.pi, 0.25 * np.pi, 100)
+    r = 0.5
+    x = r * np.cos(theta)
+    y = r * np.sin(theta)
+
+    ax.plot(x, y, 'k', linewidth=3)
+
+    # Needle
+    needle_theta = 0.75 * np.pi - probability * 0.5 * np.pi
+    needle_x = [0, r * 0.8 * np.cos(needle_theta)]
+    needle_y = [0, r * 0.8 * np.sin(needle_theta)]
+    ax.plot(needle_x, needle_y, 'r', linewidth=2)
+    ax.add_patch(plt.Circle((0, 0), radius=0.05, color='darkred'))
+
+    # Add labels
+    ax.text(-0.5, -0.1, "Low", fontsize=9)
+    ax.text(0, 0.35, "Medium", fontsize=9)
+    ax.text(0.5, -0.1, "High", fontsize=9)
+    ax.text(0, -0.3, f"Error Probability: {probability:.2f}", fontsize=10, ha='center', fontweight='bold')
+
+    # Format plot
+    ax.set_aspect('equal')
+    ax.axis('off')
+    st.pyplot(fig)
+
+# Display feature importance
+st.markdown('<div class="sub-header">📊 Feature Analysis</div>', unsafe_allow_html=True)
+
+# Create three columns for metrics
+col1, col2, col3 = st.columns(3)
+
+with col1:
+    st.markdown("""
+    <div class="metric-container">
+        <h4>API Service</h4>
+        <p>{} {}</p>
+    </div>
+    """.format(api_options[api_id], api_id), unsafe_allow_html=True)
+
+with col2:
+    st.markdown("""
+    <div class="metric-container">
+        <h4>Environment</h4>
+        <p>{}</p>
+    </div>
+    """.format(env_options[env]), unsafe_allow_html=True)
+
+with col3:
+    st.markdown("""
+    <div class="metric-container">
+        <h4>Time of Day</h4>
+        <p>{}</p>
+    </div>
+    """.format(hour_display), unsafe_allow_html=True)
+
+# Performance metrics
+col1, col2, col3 = st.columns(3)
+
+with col1:
+    st.markdown("""
+    <div class="metric-container">
+        <h4>Latency</h4>
+        <p>{} ms</p>
+    </div>
+    """.format(latency_ms), unsafe_allow_html=True)
+
+with col2:
+    st.markdown("""
+    <div class="metric-container">
+        <h4>CPU Cost</h4>
+        <p>{}</p>
+    </div>
+    """.format(simulated_cpu_cost), unsafe_allow_html=True)
+
+with col3:
+    st.markdown("""
+    <div class="metric-container">
+        <h4>Memory Usage</h4>
+        <p>{} MB</p>
+    </div>
+    """.format(simulated_memory_mb), unsafe_allow_html=True)
+
+# Input data inspector
+with st.expander("🔍 View Raw Input Data"):
+    # Create a more readable table
+    display_df = pd.DataFrame({
+        'Feature': ['API Service', 'Environment', 'Latency (ms)', 'Bytes Transferred',
+                    'Hour of Day', 'CPU Cost', 'Memory (MB)'],
+        'Value': [api_id, env, latency_ms, bytes_transferred,
+                  hour_of_day, simulated_cpu_cost, simulated_memory_mb],
+        'Encoded Value': [api_id_encoded, env_encoded, latency_ms, bytes_transferred,
+                          hour_of_day, simulated_cpu_cost, simulated_memory_mb]
+    })
+
+    st.dataframe(display_df, use_container_width=True)
+
+# Help section
+with st.expander("❓ How to Use This Tool"):
+    st.markdown("""
+    ### Instructions
+    1. **Adjust Parameters**: Use the sidebar sliders and dropdowns to set your API parameters
+    2. **View Prediction**: The prediction updates automatically when you change any parameter
+    3. **Analyze Results**: Look at the gauge chart and feature metrics to understand factors affecting the prediction
+
+    ### About the Model
+    This tool uses a machine learning model trained on historical API call data to predict whether a call with the given parameters will result in an error.
+    """)
+
+# Footer
+st.markdown("---")
+st.markdown("API Error Prediction Tool | Developed for DevOps Team", unsafe_allow_html=True)

error_classifier.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2a8481236d45ef6cde666c1d1e314c3aab6f6a282252639193b81e9ab078e0db
+size 808921