Update app.py

app.py

@@ -2,51 +2,51 @@ import streamlit as st
 import numpy as np
 import plotly.graph_objects as go
 
-# Title and App Configuration
-st.set_page_config(page_title="Gradient Descent Visualizer", layout="wide")
-st.markdown(
-    """
+# Title of the app
+st.set_page_config(page_title="Interactive Gradient Descent Visualizer", layout="wide")
+st.markdown("<h1 style='text-align: center;'> ✨ Gradient Descent Visualizer ✨</h1>", unsafe_allow_html=True)
+
+# Custom CSS for background and button color
+st.markdown("""
     <style>
         body {
-            background-color: #F9F9F9;  /* Light background */
+            background-color: black;  /* Set background color to black */
+            color: white;  /* Set text color to white for visibility */
         }
         .stButton>button {
-            background: linear-gradient(90deg, #00C6FF, #0072FF);  /* Blue gradient */
-            color: white;
-            font-size: 16px;
-            padding: 10px;
+            background-color: #00FFFF;  /* Light Cyan color */
+            color: black;
             border-radius: 5px;
+            padding: 10px 20px;
+            font-size: 16px;
         }
         .stButton>button:hover {
-            background: linear-gradient(90deg, #0072FF, #00C6FF); /* Reversed gradient on hover */
-        }
-        .st-tabs [data-baseweb="tab"] {
-            font-size: 18px;
-            padding: 10px 20px;
+            background-color: #00CED1;  /* Darker cyan on hover */
         }
     </style>
-    """, 
-    unsafe_allow_html=True
-)
-st.markdown("<h1 style='text-align: center;'>🌟 Gradient Descent Visualizer</h1>", unsafe_allow_html=True)
+""", unsafe_allow_html=True)
 
 # Safe function evaluation
 def evaluate_function(expression, x_value):
+    """Safely evaluates the mathematical function."""
     allowed_names = {"x": x_value, "np": np}  # Allow only x and numpy
     return eval(expression, {"_builtins_": None}, allowed_names)
 
 # Compute derivative using finite difference
 def compute_derivative(expression, x_value, h=1e-5):
+    """Numerically calculates the derivative at a given point."""
     return (evaluate_function(expression, x_value + h) - evaluate_function(expression, x_value - h)) / (2 * h)
 
 # Tangent line calculation
 def calculate_tangent(expression, x_value, x_range):
+    """Generates the tangent line for a given point."""
     y_value = evaluate_function(expression, x_value)
     slope = compute_derivative(expression, x_value)
     return slope * (x_range - x_value) + y_value
 
-# Reset session state
+# Reset state
 def reset_session_state():
+    """Resets the session state for a fresh start."""
     st.session_state.x_current = st.session_state.initial_point
     st.session_state.iter_count = 0
     st.session_state.history = [
@@ -56,30 +56,31 @@ def reset_session_state():
 
 # Initialize session state variables
 if "x_current" not in st.session_state:
-    st.session_state.x_current = 0.0
+    st.session_state.x_current = 0.0  # Default starting point
 if "iter_count" not in st.session_state:
     st.session_state.iter_count = 0
 if "history" not in st.session_state:
-    st.session_state.history = [(0.0, evaluate_function("x**2 + x", 0.0))]
+    st.session_state.history = [(0.0, evaluate_function("x**2 + x", 0.0))]  # Default function example
 if "current_index" not in st.session_state:
     st.session_state.current_index = 0
 if "learning_rate" not in st.session_state:
     st.session_state.learning_rate = 0.1
 
-# Layout Configuration
-left_col, right_col = st.columns([1, 2])
+# Create two-column grid layout for the left side (more space for the right graph)
+left_col, right_col = st.columns([1, 2])  # 1 for left, 2 for right grid proportion
 
-# Left Column: Inputs
+# Left side content (Function Input and Gradient Descent Parameters)
 with left_col:
-    st.markdown("### Input Function and Parameters")
+    st.markdown("### 🧮 Input Your Function")
     function_input = st.text_input(
-        "Function (e.g., 'x**2 + x'):", 
+        "Enter Function: Example: `x**2`, `np.sin(x)`", 
         "x**2 + x", 
         key="math_function", 
         on_change=reset_session_state
     )
-    st.number_input(
-        "Initial Value of x:", 
+    st.markdown("### ⚙️ Set Parameters")
+    initial_point = st.number_input(
+        "🔢 Initial Value of x", 
         value=4.0, 
         step=0.1, 
         format="%.2f", 
@@ -87,14 +88,16 @@ with left_col:
         on_change=reset_session_state
     )
     st.number_input(
-        "Learning Rate:", 
+        "📏 Learning Rate", 
         value=st.session_state.learning_rate, 
         step=0.01, 
         format="%.2f", 
         key="learning_rate"
-    )
-    st.markdown("### Controls")
-    if st.button("🔄 Run Descent Step"):
+    )  # Updates session state directly without reset
+    
+    st.markdown("### 🎛️ Controls")
+    
+    if st.button("🚀 Run Descent Step", type="primary"):
         try:
             gradient = compute_derivative(function_input, st.session_state.x_current)
             st.session_state.x_current -= st.session_state.learning_rate * gradient
@@ -108,72 +111,69 @@ with left_col:
     if st.button("🔄 Reset"):
         reset_session_state()
 
-# Right Column: Visualization and Details
+# Right side content (Visualization and Iteration Details)
 with right_col:
-    tabs = st.tabs(["📈 Visualization", "📋 Iteration Details"])
+    st.markdown("### 📉 Gradient Descent Visualization")
     
-    # Tab 1: Visualization
-    with tabs[0]:
-        st.markdown("### Iteration Details")
-        
-        # Check if there are enough iterations for a slider
-        max_iter = len(st.session_state.history) - 1
-        
-        if max_iter > 0:
-            # Slider for dynamic iteration selection
-            selected_iteration = st.slider(
-                "Select Iteration", 
-                min_value=0, 
-                max_value=max_iter, 
-                value=st.session_state.current_index, 
-                step=1
-            )
-            st.session_state.current_index = selected_iteration  # Update the current index based on slider selection
-            
-            # Display selected iteration details dynamically
-            x_current, y_current = st.session_state.history[selected_iteration]
-            st.markdown(f"**Iteration:** {selected_iteration}")
-            st.markdown(f"**x Value:** {x_current:.4f}")
-            st.markdown(f"**f(x):** {y_current:.4f}")
-            
-            st.markdown("### Gradient Descent Visualization")
-            
-            # Prepare data for visualization
-            x_range = np.linspace(-10, 10, 500)
-            y_range = [evaluate_function(function_input, x) for x in x_range]
-            
-            # Plot function curve
-            fig = go.Figure()
-            fig.add_trace(go.Scatter(x=x_range, y=y_range, mode='lines', name='Function', line=dict(color='orange')))
-            
-            # Add current point
-            fig.add_trace(go.Scatter(
-                x=[x_current], 
-                y=[y_current], 
-                mode='markers', 
-                name='Current Point', 
-                marker=dict(size=10, color='red')
-            ))
-            
-            # Add tangent line
-            tangent_y = calculate_tangent(function_input, x_current, x_range)
-            fig.add_trace(go.Scatter(
-                x=x_range, 
-                y=tangent_y, 
-                mode='lines', 
-                name='Tangent Line', 
-                line=dict(dash='dash', color='blue')
-            ))
-            
-            # Update layout
-            fig.update_layout(
-                title=f"Gradient Descent Progress: Iteration {selected_iteration}",
-                xaxis_title="x",
-                yaxis_title="f(x)",
-                height=500,
-                template="plotly_white"
-            )
-            
-            st.plotly_chart(fig, use_container_width=True)
-        else:
-            st.warning("Not enough iterations to display. Run more steps to visualize gradient descent.")
+    # Display iteration details using buttons
+    col1, col2, col3 = st.columns(3)
+    with col1:
+        if st.button("⬅️ Previous Iteration") and st.session_state.current_index > 0:
+            st.session_state.current_index -= 1
+    with col2:
+        st.markdown(f"**🔄 Iteration:** {st.session_state.current_index}", unsafe_allow_html=True)
+    with col3:
+        if st.button("➡️ Next Iteration") and st.session_state.current_index < st.session_state.iter_count:
+            st.session_state.current_index += 1
+    
+    try:
+        selected_x, selected_y = st.session_state.history[st.session_state.current_index]
+        st.markdown(f"🧾 **x Value:** `{selected_x:.4f}`")
+        st.markdown(f"📊 **f(x):** `{selected_y:.4f}`")
+    except IndexError:
+        st.warning("No iteration data available. Please run a descent step first.")
+    
+    # Prepare data for visualization
+    x_range = np.linspace(-10, 10, 500)  # Define range for x
+    y_range = [evaluate_function(function_input, x) for x in x_range]
+    
+    # Plot function curve with orange color
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(
+        x=x_range, 
+        y=y_range, 
+        mode='lines', 
+        name='Function', 
+        line=dict(color='orange')  # Curve color set to orange
+    ))
+    
+    # Add current point
+    x_current, y_current = st.session_state.history[st.session_state.current_index]
+    fig.add_trace(go.Scatter(
+        x=[x_current], 
+        y=[y_current], 
+        mode='markers', 
+        name='Current Point', 
+        marker=dict(size=10, color='red')
+    ))
+    
+    # Add tangent line
+    tangent_y = calculate_tangent(function_input, x_current, x_range)
+    fig.add_trace(go.Scatter(
+        x=x_range, 
+        y=tangent_y, 
+        mode='lines', 
+        name='Tangent Line', 
+        line=dict(dash='dash', color='blue')  # Tangent line in blue
+    ))
+    
+    # Layout adjustments
+    fig.update_layout(
+        title="Gradient Descent Progress 🌟",
+        xaxis_title="x",
+        yaxis_title="f(x)",
+        template="plotly_white",
+        height=600
+    )
+    
+    st.plotly_chart(fig, use_container_width=True)