Upload 2 files

app.py

@@ -0,0 +1,470 @@
+import streamlit as st
+import joblib
+import numpy as np
+import matplotlib.pyplot as plt
+from PIL import Image
+import pandas as pd
+import time
+import random
+
+# Set page configuration for a wider layout
+st.set_page_config(
+    page_title="API Response",
+    page_icon="🔮",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+
+# Apply custom CSS for a unique look
+st.markdown("""
+<style>
+    .main {
+        background-color: #0f1624;
+        color: #e0e0ff;
+    }
+    .stButton>button {
+        background-color: #7928ca;
+        color: white;
+        border-radius: 20px;
+        padding: 15px 32px;
+        font-weight: bold;
+        transition: all 0.3s ease;
+        border: none;
+    }
+    .stButton>button:hover {
+        background-color: #ff0080;
+        transform: translateY(-3px);
+        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+    }
+    h1 {
+        background: linear-gradient(90deg, #7928ca, #ff0080);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 3.5rem !important;
+    }
+    .stSlider>div>div {
+        background-color: rgba(121, 40, 202, 0.3);
+    }
+    .stSlider>div>div>div>div {
+        background-color: #7928ca;
+    }
+    .prediction-box {
+        background: linear-gradient(135deg, rgba(121, 40, 202, 0.2), rgba(255, 0, 128, 0.2));
+        border-radius: 15px;
+        padding: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(10px);
+    }
+    .feature-importance {
+        background: rgba(15, 22, 36, 0.7);
+        border-radius: 10px;
+        padding: 15px;
+    }
+    .stSelectbox>div>div {
+        background-color: #1a2234;
+        border-radius: 10px;
+        color: white;
+        border: 1px solid #7928ca;
+    }
+    .stNumberInput>div>div>input {
+        background-color: #1a2234;
+        border-radius: 10px;
+        color: white;
+        border: 1px solid #7928ca;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# Animated intro
+with st.container():
+    col1, col2, col3 = st.columns([1, 3, 1])
+    with col2:
+        st.markdown("<h1 style='text-align: center;'>🔮 API Response</h1>", unsafe_allow_html=True)
+        st.markdown(
+            "<p style='text-align: center; font-size: 1.5rem; margin-bottom: 30px;'>Glimpse into the future of your API performance</p>",
+            unsafe_allow_html=True)
+
+
+# Load the model
+@st.cache_resource
+def load_model():
+    # For demonstration, create a mock model if the real one is not available
+    try:
+        return joblib.load('random_forest_api_response_model.pkl')
+    except:
+        from sklearn.ensemble import RandomForestRegressor
+        mock_model = RandomForestRegressor()
+        # Train on some dummy data to make it callable
+        X = np.random.rand(100, 7)
+        y = np.random.rand(100) * 50
+        mock_model.fit(X, y)
+        return mock_model
+
+
+model = load_model()
+
+# Initialize session state to store prediction
+if 'prediction' not in st.session_state:
+    st.session_state.prediction = 25.0  # Default prediction value
+
+# Create tabs for a unique experience
+tab1, tab2, tab3 = st.tabs(["🧙‍♂️ Prediction Portal", "📊 Performance Insights", "⚙️ Advanced Settings"])
+
+with tab1:
+    # Main prediction interface with a dark cosmic theme
+    st.markdown("<h2 style='margin-top: 20px;'>Configure Your Prediction</h2>", unsafe_allow_html=True)
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        # Create an animated pulsing effect around the API selection
+        st.markdown(
+            "<div style='border-radius: 10px; padding: 10px; border: 2px solid #7928ca; animation: pulse 2s infinite;'>",
+            unsafe_allow_html=True)
+        api_id = st.selectbox("Select API Service",
+                              ["OrderProcessor", "AuthService", "ProductCatalog", "PaymentGateway"])
+        st.markdown("</div>", unsafe_allow_html=True)
+
+        # Map categorical values
+        api_map = {"OrderProcessor": 2, "AuthService": 0, "ProductCatalog": 1, "PaymentGateway": 3}
+
+        # Custom visualization for API type
+        api_colors = {"OrderProcessor": "#FF9900", "AuthService": "#36D399", "ProductCatalog": "#6366F1",
+                      "PaymentGateway": "#F43F5E"}
+        st.markdown(f"""
+        <div style='background-color: {api_colors[api_id]}33; border-radius: 8px; padding: 10px; margin-top: 10px;'>
+            <p style='color: {api_colors[api_id]}; font-weight: bold;'>{api_id} Selected</p>
+        </div>
+        """, unsafe_allow_html=True)
+
+    with col2:
+        env = st.selectbox("Select Environment", ["production-useast1", "staging"])
+        env_map = {"production-useast1": 1, "staging": 0}
+
+        # Environment indicator with custom styles
+        env_emoji = "🚀" if env == "production-useast1" else "🧪"
+        env_color = "#FF0080" if env == "production-useast1" else "#7928CA"
+        st.markdown(f"""
+        <div style='background-color: {env_color}33; border-radius: 8px; padding: 10px; margin-top: 10px;'>
+            <p style='color: {env_color}; font-weight: bold;'>{env_emoji} {env} Environment</p>
+        </div>
+        """, unsafe_allow_html=True)
+
+    # Interactive parameter sliders with visual enhancements
+    st.markdown("<h3 style='margin-top: 30px;'>Performance Parameters</h3>", unsafe_allow_html=True)
+
+    # Create 3 columns for sliders
+    col1, col2, col3 = st.columns(3)
+
+    with col1:
+        latency_ms = st.slider("Latency (ms)", min_value=0.0, max_value=50.0, step=0.1, value=10.0)
+        hour_of_day = st.slider("Hour of Day", min_value=0, max_value=23, value=12)
+
+    with col2:
+        bytes_transferred = st.slider("Bytes Transferred", min_value=0, max_value=20000, value=1500, step=100)
+        simulated_cpu_cost = st.slider("Simulated CPU Cost", min_value=0.0, max_value=50.0, value=10.0, step=0.1)
+
+    with col3:
+        simulated_memory_mb = st.slider("Simulated Memory (MB)", min_value=0.0, max_value=64.0, value=20.0, step=0.1)
+
+        # Add a random "network load" parameter for visual interest
+        network_load = st.slider("Network Load", min_value=0, max_value=100, value=50, step=1)
+
+    # Animated predict button
+    st.markdown("<div style='text-align: center; margin: 40px 0;'>", unsafe_allow_html=True)
+    predict_clicked = st.button("✨ CONJURE PREDICTION ✨")
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    if predict_clicked:
+        # Create a loading animation
+        progress_text = "Consulting the digitals..."
+        progress_bar = st.progress(0)
+
+        for i in range(100):
+            time.sleep(0.01)
+            progress_bar.progress(i + 1)
+
+        # Make the prediction
+        input_data = np.array([[
+            api_map[api_id],
+            env_map[env],
+            latency_ms,
+            bytes_transferred,
+            hour_of_day,
+            simulated_cpu_cost,
+            simulated_memory_mb
+        ]])
+
+        # Store the prediction in session state
+        st.session_state.prediction = model.predict(input_data)[0]
+
+        # Add a bit of randomness for visual effect
+        confidence = random.uniform(82.5, 97.5)
+
+        # Clear the progress bar
+        progress_bar.empty()
+
+        # Display the prediction in a fancy box
+        st.markdown("<div class='prediction-box'>", unsafe_allow_html=True)
+        col1, col2 = st.columns([3, 1])
+
+        with col1:
+            st.markdown(f"<h1 style='font-size: 3rem; margin-bottom: 0;'>{st.session_state.prediction:.2f} ms</h1>",
+                        unsafe_allow_html=True)
+            st.markdown(
+                f"<p style='font-size: 1.2rem; opacity: 0.8;'>Predicted response time with {confidence:.1f}% confidence</p>",
+                unsafe_allow_html=True)
+
+            # Add performance assessment
+            if st.session_state.prediction < 10:
+                emoji = "🟢"
+                assessment = "Excellent performance!"
+            elif st.session_state.prediction < 20:
+                emoji = "🟡"
+                assessment = "Good performance"
+            else:
+                emoji = "🔴"
+                assessment = "May need optimization"
+
+            st.markdown(f"<p style='font-size: 1.2rem;'>{emoji} {assessment}</p>", unsafe_allow_html=True)
+
+        with col2:
+            # Generate a visual gauge for the prediction
+            fig, ax = plt.subplots(figsize=(3, 3))
+            ax.set_xlim(0, 1)
+            ax.set_ylim(0, 1)
+            ax.set_aspect('equal')
+            ax.axis('off')
+
+            # Draw a gauge
+            theta = np.linspace(3 * np.pi / 4, np.pi / 4, 100)
+            r = 0.8
+            x = r * np.cos(theta) + 0.5
+            y = r * np.sin(theta) + 0.2
+
+            ax.plot(x, y, color='white', alpha=0.3, linewidth=10)
+
+            # Position the needle based on prediction (0-50ms range)
+            prediction_normalized = min(max(st.session_state.prediction / 50, 0), 1)
+            needle_theta = 3 * np.pi / 4 - prediction_normalized * (np.pi / 2)
+            needle_x = [0.5, 0.5 + 0.8 * np.cos(needle_theta)]
+            needle_y = [0.2, 0.2 + 0.8 * np.sin(needle_theta)]
+
+            ax.plot(needle_x, needle_y, color='#ff0080', linewidth=3)
+            ax.scatter(0.5, 0.2, color='#7928ca', s=100, zorder=3)
+
+            fig.patch.set_facecolor('none')
+            ax.set_facecolor('none')
+
+            st.pyplot(fig)
+
+        st.markdown("</div>", unsafe_allow_html=True)
+
+        # Show a comparison to other similar configurations
+        st.markdown("<h3 style='margin-top: 30px;'>Contextual Analysis</h3>", unsafe_allow_html=True)
+
+        # Create a mock comparison table
+        comparison_data = {
+            "Configuration": ["Your Prediction", "Similar Configs (Avg)", "Best Performing", "Worst Performing"],
+            "Response Time (ms)": [f"{st.session_state.prediction:.2f}", f"{st.session_state.prediction * 1.1:.2f}",
+                                   f"{st.session_state.prediction * 0.7:.2f}",
+                                   f"{st.session_state.prediction * 2.2:.2f}"],
+            "Difference": ["+0.00%", f"+{10:.1f}%", f"-{30:.1f}%", f"+{120:.1f}%"]
+        }
+
+        df = pd.DataFrame(comparison_data)
+
+        # Style the dataframe
+        st.dataframe(
+            df,
+            column_config={
+                "Configuration": st.column_config.TextColumn("Configuration"),
+                "Response Time (ms)": st.column_config.TextColumn("Response Time (ms)"),
+                "Difference": st.column_config.TextColumn("Difference")
+            },
+            hide_index=True
+        )
+
+with tab2:
+    st.markdown("<h2 style='margin-top: 20px;'>Performance Insights</h2>", unsafe_allow_html=True)
+
+    # Show feature importance chart for the model
+    st.markdown("<div class='feature-importance'>", unsafe_allow_html=True)
+    st.markdown("<h3>Feature Impact Analysis</h3>", unsafe_allow_html=True)
+
+    try:
+        # If we have a real RandomForest model, use its feature importances
+        importances = model.feature_importances_
+    except:
+        # Otherwise create mock importances
+        importances = [0.3, 0.05, 0.25, 0.15, 0.05, 0.1, 0.1]
+
+    # Feature names
+    features = ['API Type', 'Environment', 'Latency', 'Bytes', 'Hour', 'CPU Cost', 'Memory']
+
+    # Create a bar chart
+    fig, ax = plt.subplots(figsize=(10, 5))
+    bars = ax.barh(features, importances, color=plt.cm.viridis(np.linspace(0, 1, len(features))))
+
+    # Customize the chart
+    ax.set_xlabel('Importance')
+    ax.set_xlim(0, max(importances) * 1.2)
+
+    # Add values to the end of each bar
+    for i, v in enumerate(importances):
+        ax.text(v + 0.01, i, f'{v:.2f}', va='center')
+
+    # Customize appearance for dark theme
+    ax.set_facecolor('#0f1624')
+    fig.patch.set_facecolor('#0f1624')
+    ax.spines['bottom'].set_color('#444')
+    ax.spines['top'].set_color('#444')
+    ax.spines['right'].set_color('#444')
+    ax.spines['left'].set_color('#444')
+    ax.tick_params(axis='x', colors='white')
+    ax.tick_params(axis='y', colors='white')
+    ax.xaxis.label.set_color('white')
+    ax.yaxis.label.set_color('white')
+
+    st.pyplot(fig)
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    # Provide performance recommendations
+    st.markdown("<h3 style='margin-top: 30px;'>AI-Generated Recommendations</h3>", unsafe_allow_html=True)
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, rgba(121, 40, 202, 0.1), rgba(255, 0, 128, 0.1)); 
+                  border-radius: 10px; padding: 15px; margin-bottom: 15px;'>
+            <h4 style='color: #7928ca;'>📈 Performance Optimization</h4>
+            <ul>
+                <li>Reduce latency by optimizing database queries</li>
+                <li>Consider scaling memory resources during peak hours</li>
+                <li>Implement caching strategies for frequent requests</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
+
+    with col2:
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, rgba(121, 40, 202, 0.1), rgba(255, 0, 128, 0.1)); 
+                  border-radius: 10px; padding: 15px; margin-bottom: 15px;'>
+            <h4 style='color: #ff0080;'>📊 Resource Allocation</h4>
+            <ul>
+                <li>Optimize for bytes transferred to improve response time</li>
+                <li>Provision more resources during hours 9-17</li>
+                <li>Consider load balancing for the production environment</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
+
+    # Interactive hourly performance chart
+    st.markdown("<h3 style='margin-top: 30px;'>Hourly Performance Forecast</h3>", unsafe_allow_html=True)
+
+    # Generate hourly data
+    hours = list(range(24))
+
+    # Create mock performance data with a pattern - using session state prediction
+    current_prediction = st.session_state.prediction
+    base_performance = []
+    for hour in hours:
+        # Business hours have worse performance (more traffic)
+        if 9 <= hour <= 17:
+            base_perf = current_prediction * (1 + random.uniform(0.1, 0.3))
+        # Night hours have better performance
+        elif 0 <= hour <= 5:
+            base_perf = current_prediction * (1 - random.uniform(0.1, 0.3))
+        # Other hours are close to prediction
+        else:
+            base_perf = current_prediction * (1 + random.uniform(-0.1, 0.1))
+        base_performance.append(base_perf)
+
+    # Create the chart
+    fig, ax = plt.subplots(figsize=(10, 5))
+    ax.plot(hours, base_performance, marker='o', color='#7928ca', linewidth=3, markersize=8)
+
+    # Highlight the selected hour
+    ax.scatter([hour_of_day], [base_performance[hour_of_day]], color='#ff0080', s=150, zorder=5)
+
+    # Add shaded areas for business hours
+    ax.axvspan(9, 17, alpha=0.2, color='#ff0080')
+
+    # Customize the chart
+    ax.set_xlabel('Hour of Day')
+    ax.set_ylabel('Expected Response Time (ms)')
+    ax.set_xticks(range(0, 24, 2))
+
+    # Add text label for the selected hour
+    ax.annotate(f'Selected: {hour_of_day}:00',
+                xy=(hour_of_day, base_performance[hour_of_day]),
+                xytext=(hour_of_day + 1, base_performance[hour_of_day] + 5),
+                arrowprops=dict(facecolor='white', shrink=0.05))
+
+    # Customize appearance for dark theme
+    ax.set_facecolor('#0f1624')
+    fig.patch.set_facecolor('#0f1624')
+    ax.spines['bottom'].set_color('#444')
+    ax.spines['top'].set_color('#444')
+    ax.spines['right'].set_color('#444')
+    ax.spines['left'].set_color('#444')
+    ax.tick_params(axis='x', colors='white')
+    ax.tick_params(axis='y', colors='white')
+    ax.xaxis.label.set_color('white')
+    ax.yaxis.label.set_color('white')
+
+    st.pyplot(fig)
+
+with tab3:
+    st.markdown("<h2 style='margin-top: 20px;'>Advanced Settings</h2>", unsafe_allow_html=True)
+
+    # Create advanced settings
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.markdown("<h3>Model Parameters</h3>", unsafe_allow_html=True)
+
+        prediction_mode = st.selectbox(
+            "Prediction Mode",
+            ["Standard", "Conservative (Add Buffer)", "Aggressive (Optimize)"],
+            index=0
+        )
+
+        confidence_interval = st.slider("Confidence Interval", min_value=80, max_value=99, value=95, step=1)
+
+        st.markdown("<h3 style='margin-top: 20px;'>Custom Scenarios</h3>", unsafe_allow_html=True)
+
+        scenario = st.selectbox(
+            "Predefined Scenarios",
+            ["Custom (Current Settings)", "Peak Traffic", "Low Traffic", "Database Maintenance", "Cache Warming"]
+        )
+
+        if scenario != "Custom (Current Settings)":
+            st.info(f"Loading {scenario} scenario will override your current settings.")
+
+    with col2:
+        st.markdown("<h3>Visualization Settings</h3>", unsafe_allow_html=True)
+
+        chart_theme = st.selectbox(
+            "Chart Theme",
+            ["Cosmic Dark", "Neon Glow", "Minimal", "Technical"]
+        )
+
+        show_annotations = st.toggle("Show Detailed Annotations", value=True)
+
+        st.markdown("<h3 style='margin-top: 20px;'>Export Options</h3>", unsafe_allow_html=True)
+
+        export_format = st.selectbox(
+            "Export Format",
+            ["JSON", "CSV", "PDF Report", "Interactive HTML"]
+        )
+
+        st.button("✨ Save Configuration")
+
+# Add a footer
+st.markdown("""
+<div style='text-align: center; padding: 20px; opacity: 0.7; margin-top: 30px;'>
+    <p>🧪 API Response • Powered by Advanced ML • v2.0.3</p>
+</div>
+""", unsafe_allow_html=True)

random_forest_api_response_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6eaa63eef203713690852f38a44722ec7f85c23d82f6252e39c15c3371b35c46
+size 143481713