Update app.py

app.py

@@ -2,138 +2,126 @@ import streamlit as st
 import numpy as np
 import plotly.graph_objects as go
 
-# Title of the app
-st.title("Interactive Gradient Descent Visualizer")
-st.markdown("---")  # Horizontal separator for cleaner layout
+# 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("---")
 
 # 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 state
-def reset_session_state():
-    st.session_state.x_current = st.session_state.initial_point
-    st.session_state.iter_count = 0
-    st.session_state.x_points = [st.session_state.initial_point]
-    st.session_state.y_points = [evaluate_function(st.session_state.math_function, st.session_state.initial_point)]
-
-# Left Side - Section 1: Input Your Function
-st.container()
-st.header("Input Your Function")
-st.markdown("Define a mathematical function (e.g., `x**2`, `np.sin(x)`, `x**3 - 3*x + 2`):")
-function_input = st.text_input("Enter Function:", "x**2 + x", key="math_function", on_change=reset_session_state)
-st.markdown("---")
+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.
+    """
+    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.
+    """
+    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.
+    """
+    y_val = safe_eval(func_str, x_val)
+    slope = derivative(func_str, x_val)
+    return slope * (x_range - x_val) + y_val
+
+# Reset state on input changes
+def reset_state():
+    st.session_state.x = st.session_state.starting_point
+    st.session_state.iteration = 0
+    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
+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)
+
+# Function input
+func_input = st.sidebar.text_input(
+    "Function of x (e.g., x*2 + x):", "x*2 + x", key="func_input", on_change=reset_state
+)
 
-# Left Side - Section 2: Set Parameters for Gradient Descent
-st.container()
-st.header("Set Parameters for Gradient Descent")
-st.markdown("Configure the starting point and learning rate:")
-initial_point = st.number_input(
-    "Initial Value of x", value=4.0, step=0.1, format="%.2f", key="initial_point", on_change=reset_session_state
+# 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)
+starting_point = st.sidebar.number_input(
+    "Starting Point", value=4.0, step=0.1, format="%.2f", key="starting_point", on_change=reset_state
 )
-learning_rate = st.number_input(
-    "Learning Rate", value=0.1, step=0.01, format="%.2f", key="learning_rate", on_change=reset_session_state
+learning_rate = st.sidebar.number_input(
+    "Learning Rate", value=0.1, step=0.01, format="%.2f", key="learning_rate", on_change=reset_state
 )
-st.markdown("---")
 
-# Right Side - Section 1: Gradient Descent Updates
-st.container()
-st.header("Gradient Descent Updates")
-if "x_current" not in st.session_state:
-    st.session_state.x_current = initial_point
-    st.session_state.iter_count = 0
-    st.session_state.x_points = [initial_point]
-    st.session_state.y_points = [evaluate_function(function_input, initial_point)]
+# Initialize session state variables
+if "x" not in st.session_state:
+    st.session_state.x = starting_point
+    st.session_state.iteration = 0
+    st.session_state.x_vals = [starting_point]
+    st.session_state.y_vals = [safe_eval(func_input, starting_point)]
 
-if st.button("Perform Gradient Descent Step", type="primary"):
+# Perform one iteration when the button is pressed
+if st.sidebar.button("🔄 Perform Iteration"):
     try:
-        gradient = compute_derivative(function_input, st.session_state.x_current)
-        st.session_state.x_current -= learning_rate * gradient
-        st.session_state.iter_count += 1
-        st.session_state.x_points.append(st.session_state.x_current)
-        st.session_state.y_points.append(evaluate_function(function_input, st.session_state.x_current))
+        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.error(f"Error: {str(e)}")
-
-# Right Side - Section 2: Gradient Descent Progress (with custom style)
-st.container()
-st.subheader("Gradient Descent Progress")
-st.markdown(f"**Iteration:** {st.session_state.iter_count}")
-st.markdown(f"**Current x Value:** {st.session_state.x_current:.4f}")
-st.markdown(f"**Current Function Value (f(x)):** {st.session_state.y_points[-1]:.4f}")
-st.markdown("---")
+        st.sidebar.error(f"Error: {str(e)}")
 
-# Styling the updates section with custom HTML
-st.markdown(
-    f'<div style="background-color:#f0f0f0; padding: 10px; border-radius: 5px;">'
-    f'<strong>Iteration: </strong>{st.session_state.iter_count} <br>'
-    f'<strong>Current x Value: </strong>{st.session_state.x_current:.4f} <br>'
-    f'<strong>Current f(x): </strong>{st.session_state.y_points[-1]:.4f}</div>',
-    unsafe_allow_html=True
-)
+# 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}")
 
-# Generate plot data
-x_vals = np.linspace(-10, 10, 400)
-y_vals = [evaluate_function(function_input, x) for x in x_vals]
+# Plotting
+x_range = np.linspace(-2, 6, 400)  # Zoomed-in x-axis range for better visualization
+y_range = [safe_eval(func_input, x) for x in x_range]
 
 # Create the plot
-plot = go.Figure()
-
-# Add function plot
-plot.add_trace(
-    go.Scatter(x=x_vals, y=y_vals, mode="lines", line=dict(color="green", width=3), name="Function Curve")
-)
-
-# Add gradient descent points
-plot.add_trace(
-    go.Scatter(
-        x=st.session_state.x_points,
-        y=st.session_state.y_points,
-        mode="markers",
-        marker=dict(color="red", size=10, symbol="diamond"),
-        name="Descent Steps",
-    )
-)
-
-# Add tangent line
-current_x = st.session_state.x_current
-current_y = evaluate_function(function_input, current_x)
-slope = compute_derivative(function_input, current_x)
-tangent_x = np.linspace(current_x - 2, current_x + 2, 100)
-tangent_y = calculate_tangent(function_input, current_x, tangent_x)
-
-plot.add_trace(
-    go.Scatter(
-        x=tangent_x,
-        y=tangent_y,
-        mode="lines",
-        line=dict(color="blue", width=2, dash="dash"),
-        name="Tangent Line",
-    )
-)
-
-# Update plot layout
-plot.update_layout(
-    title="Interactive Gradient Descent with Tangent Visualization",
-    xaxis_title="x",
-    yaxis_title="f(x)",
-    template="plotly_dark",
-    legend=dict(bgcolor="rgba(255,255,255,0.5)", bordercolor="gray", borderwidth=1),
+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="royalblue", width=3), name="Function"))
+
+# Plot gradient descent points with purple color
+fig.add_trace(go.Scatter(
+    x=st.session_state.x_vals, y=st.session_state.y_vals,
+    mode="markers", marker=dict(color="mediumvioletred", size=10, symbol="circle"), name="Gradient Descent Points"
+))
+
+# Plot tangent line at current point with dotted line
+current_x = st.session_state.x
+current_y = safe_eval(func_input, current_x)
+slope = derivative(func_input, current_x)
+
+tangent_x = np.linspace(current_x - 1, current_x + 1, 100)  # Smaller range for tangent line
+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="orange", dash="dot", width=2), name="Tangent Line"
+))
+
+# Customize the layout with a soft gradient background
+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(243, 243, 243)",  # Soft background color
+    paper_bgcolor="rgb(243, 243, 243)",  # Soft background color
+    font=dict(family="Arial, sans-serif", size=14, color="black"),
+    legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
 )
 
 # Display the plot
-st.plotly_chart(plot)
+st.plotly_chart(fig, use_container_width=True)