Update app.py

app.py

@@ -2,124 +2,139 @@ import streamlit as st
 import numpy as np
 import plotly.graph_objects as go
 
-# Set up the page title and layout
-st.set_page_config(page_title="Gradient Descent Visualizer", layout="wide")
+# Title of the app
+st.set_page_config(page_title="Interactive Gradient Descent Visualizer", layout="wide")
 st.title("🌟 Gradient Descent Visualizer")
-st.markdown("## Understand Gradient Descent with Visualizations")
-st.markdown("---")
+st.markdown("---")  # Horizontal separator for cleaner layout
 
 # Safe function evaluation
-def safe_eval(func_str, x_val):
-    """ 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. """
-    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
-st.sidebar.header("🔧 Function and Parameters")
-st.sidebar.markdown("Enter a mathematical function for gradient descent:")
-
-# 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
-)
+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)]
+
+# Create two-column grid layout for the left side
+left_col, right_col = st.columns([2, 1])  # 2 for left, 1 for right grid proportion
+
+# Left side content (Function Input and Gradient Descent Parameters)
+with left_col:
+    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("---")
+    
+    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
+    )
+    learning_rate = st.number_input(
+        "Learning Rate", value=0.1, step=0.01, format="%.2f", key="learning_rate", on_change=reset_session_state
+    )
+    st.markdown("---")
+
+# Right side content (Gradient Descent Updates and Progress)
+with right_col:
+    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)]
+
+    if st.button("🔄 Run Descent Step", type="primary"):
+        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))
+        except Exception as e:
+            st.error(f"Error: {str(e)}")
+
+    # Gradient Descent Progress Section with Different Style
+    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("---")
+    
+    # Styling the updates section
+    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
+    )
+
+# Generate plot data
+x_vals = np.linspace(-10, 10, 400)
+y_vals = [evaluate_function(function_input, x) for x in x_vals]
+
+# Create the plot
+plot = go.Figure()
 
-# Gradient Descent parameters
-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
+# 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")
 )
-learning_rate = st.sidebar.number_input(
-    "Learning Rate", value=0.1, step=0.01, format="%.2f", key="learning_rate", on_change=reset_state
+
+# 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",
+    )
 )
 
-# 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)]
-
-# Function to handle iteration movement
-def update_iteration(step):
-    """Moves to next or previous iteration when the buttons are clicked."""
-    if 0 <= 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)]
-
-
-
-# Buttons to run descent step and reset
-col1, col2 = st.columns([1, 1])
-with col1:
-    if st.button("🔄 Run Descent Step"):
-        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))
-
-with col2:
-    if st.button("🔄 Reset", on_click=reset_state):
-        pass
-
-# 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]
+# 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",
+    )
+)
 
-# Create the plot
-fig = go.Figure()
-
-# 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
-fig.add_trace(go.Scatter(
-    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
-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="dash"), name="Tangent Line"
-))
-
-# Customize the layout for clear visibility
-fig.update_layout(
-    title="📉 Gradient Descent Visualization",
-    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
+# 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),
 )
 
-# Display the plot
-st.plotly_chart(fig, use_container_width=True)
+# Display the plot in the left side
+st.plotly_chart(plot, use_container_width=True)