app.py

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)