Update app.py

app.py

@@ -5,30 +5,23 @@ import plotly.graph_objects as go
 # Set up the page title and layout
 st.set_page_config(page_title="Gradient Descent Visualizer", layout="wide")
 st.title("🌟 Gradient Descent Visualizer")
-st.markdown("## Visualizing Gradient Descent with Tangent Lines")
+st.markdown("## Understand Gradient Descent with Visualizations")
 st.markdown("---")
 
 # Safe function evaluation
 def safe_eval(func_str, x_val):
-    """
-    Safely evaluates the function at a given x value.
-    Only allows numpy operations and 'x' as the variable.
-    """
+    """ Safely evaluates the function at a given x value. """
     allowed_names = {"x": x_val, "np": np}
     return eval(func_str, {"_builtins_": None}, allowed_names)
 
 # Derivative using finite difference method
 def derivative(func_str, x_val, h=1e-5):
-    """
-    Calculates the derivative of the function at a point x using numerical methods.
-    """
+    """ Calculates the derivative of the function at a point x using numerical methods. """
     return (safe_eval(func_str, x_val + h) - safe_eval(func_str, x_val - h)) / (2 * h)
 
 # Compute tangent line
 def tangent_line(func_str, x_val, x_range):
-    """
-    Computes the tangent line at a given x value over a specified x range.
-    """
+    """ Computes the tangent line at a given x value over a specified x range. """
     y_val = safe_eval(func_str, x_val)
     slope = derivative(func_str, x_val)
     return slope * (x_range - x_val) + y_val
@@ -40,9 +33,9 @@ def reset_state():
     st.session_state.x_vals = [st.session_state.starting_point]
     st.session_state.y_vals = [safe_eval(st.session_state.func_input, st.session_state.starting_point)]
 
-# Sidebar for user input with customized background and font color
+# Sidebar for user input
 st.sidebar.header("🔧 Function and Parameters")
-st.sidebar.markdown("<p style='color:#FF5733; font-size:16px;'>Enter a mathematical function for gradient descent:</p>", unsafe_allow_html=True)
+st.sidebar.markdown("Enter a mathematical function for gradient descent:")
 
 # Function input
 func_input = st.sidebar.text_input(
@@ -50,7 +43,7 @@ func_input = st.sidebar.text_input(
 )
 
 # Gradient Descent parameters
-st.sidebar.markdown("<p style='color:#FF5733; font-size:16px;'>Set the starting point and learning rate:</p>", unsafe_allow_html=True)
+st.sidebar.markdown("Set the starting point and learning rate:")
 starting_point = st.sidebar.number_input(
     "Starting Point", value=4.0, step=0.1, format="%.2f", key="starting_point", on_change=reset_state
 )
@@ -65,26 +58,28 @@ if "x" not in st.session_state:
     st.session_state.x_vals = [starting_point]
     st.session_state.y_vals = [safe_eval(func_input, starting_point)]
 
-# Perform one iteration when the button is pressed
-if st.sidebar.button("🔄 Run Descent Step"):
-    try:
-        grad = derivative(func_input, st.session_state.x)
-        st.session_state.x -= learning_rate * grad
-        st.session_state.iteration += 1
-        st.session_state.x_vals.append(st.session_state.x)
-        st.session_state.y_vals.append(safe_eval(func_input, st.session_state.x))
-    except Exception as e:
-        st.sidebar.error(f"Error: {str(e)}")
-
-# Reset button
-if st.sidebar.button("🔄 Reset"):
-    reset_state()
-
-# Display gradient descent progress
-st.subheader("🧮 Gradient Descent Progress")
-st.write(f"*Iteration:* {st.session_state.iteration}")
-st.write(f"*Current x:* {st.session_state.x:.4f}")
-st.write(f"*Current f(x):* {st.session_state.y_vals[-1]:.4f}")
+# Function to handle iteration movement
+def update_iteration(step):
+    if st.session_state.iteration + step >= 0 and st.session_state.iteration + step < len(st.session_state.x_vals):
+        st.session_state.iteration += step
+        st.session_state.x = st.session_state.x_vals[st.session_state.iteration]
+        st.session_state.y_vals = [safe_eval(func_input, st.session_state.x)]
+
+# Button handlers for iteration
+col1, col2, col3 = st.columns([1, 3, 1])
+with col1:
+    if st.button("⏪ Previous", key="prev", on_click=update_iteration, args=(-1,)):
+        pass
+
+with col2:
+    if st.button("🔄 Current Iteration", key="current"):
+        st.write(f"Iteration: {st.session_state.iteration}")
+        st.write(f"Current x: {st.session_state.x:.4f}")
+        st.write(f"f(x): {st.session_state.y_vals[-1]:.4f}")
+
+with col3:
+    if st.button("⏩ Next", key="next", on_click=update_iteration, args=(1,)):
+        pass
 
 # Plotting
 x_range = np.linspace(-2, 6, 400)  # Zoomed-in x-axis range for better visualization
@@ -93,16 +88,16 @@ y_range = [safe_eval(func_input, x) for x in x_range]
 # Create the plot
 fig = go.Figure()
 
-# Plot the function with a cool gradient color
-fig.add_trace(go.Scatter(x=x_range, y=y_range, mode="lines", line=dict(color="mediumslateblue", width=3), name="Function"))
+# Plot the function
+fig.add_trace(go.Scatter(x=x_range, y=y_range, mode="lines", line=dict(color="royalblue"), name="Function"))
 
-# Plot gradient descent points with purple color
+# Plot gradient descent points
 fig.add_trace(go.Scatter(
-    x=st.session_state.x_vals, y=st.session_state.y_vals,
-    mode="markers", marker=dict(color="crimson", size=10, symbol="circle"), name="Gradient Descent Points"
+    x=st.session_state.x_vals[:st.session_state.iteration+1], y=st.session_state.y_vals[:st.session_state.iteration+1],
+    mode="markers", marker=dict(color="red", size=8), name="Gradient Descent Points"
 ))
 
-# Plot tangent line at current point with dotted line
+# Plot tangent line at current point
 current_x = st.session_state.x
 current_y = safe_eval(func_input, current_x)
 slope = derivative(func_input, current_x)
@@ -112,19 +107,17 @@ tangent_y = tangent_line(func_input, current_x, tangent_x)
 
 fig.add_trace(go.Scatter(
     x=tangent_x, y=tangent_y, mode="lines",
-    line=dict(color="gold", dash="dot", width=2), name="Tangent Line"
+    line=dict(color="orange", dash="dash"), name="Tangent Line"
 ))
 
-# Customize the layout with a soft gradient background
+# Customize the layout for clear visibility
 fig.update_layout(
     title="📉 Gradient Descent Visualization",
-    xaxis=dict(title="x", range=[-2, 6], showgrid=False),
-    yaxis=dict(title="f(x)", showgrid=False),
-    template="plotly",
-    plot_bgcolor="rgb(250, 250, 250)",  # Light background for a soft look
-    paper_bgcolor="rgb(250, 250, 250)",  # Consistent soft background color
-    font=dict(family="Arial, sans-serif", size=14, color="black"),
+    xaxis=dict(title="x", range=[-2, 6]),  # Zoomed-in range for better visualization
+    yaxis=dict(title="f(x)"),
+    template="plotly_white",  # Light background for better contrast
     legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
+    margin=dict(l=50, r=50, t=50, b=50)  # Adjust margins for better padding
 )
 
 # Display the plot