Update app.py

app.py

@@ -1,66 +1,129 @@
-import numpy as np
-import seaborn as sns
-import matplotlib.pyplot as plt
 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
+
+# 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)]
+
+# Input section for function
+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("---")
+
+# Gradient descent parameters
+st.header("Set Parameters for Gradient Descent")
+st.markdown("Configure the starting point and learning rate:")
+col1, col2 = st.columns(2)
+with col1:
+    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
+    )
+with col2:
+    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("---")
+
+# Initialize session state
+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)]
+
+# Gradient Descent Step
+if st.button("Perform Gradient 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)}")
+
+# Display the progress
+st.subheader("Gradient Descent Updates")
+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("---")
+
+# 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()
+
+# 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),
+)
 
-# Function definition
-def loss_function(x):
-    return x**2
-
-# Gradient of the loss function
-def gradient(x):
-    return 2 * x
-
-# Gradient descent algorithm
-def gradient_descent(starting_point, learning_rate, iterations):
-    x_values = [starting_point]
-    for _ in range(iterations):
-        gradient_value = gradient(x_values[-1])
-        new_x = x_values[-1] - learning_rate * gradient_value
-        x_values.append(new_x)
-    return x_values
-
-# Streamlit layout
-st.title("Gradient Descent Visualization using Seaborn")
-
-# Sidebar inputs
-st.sidebar.header("Parameters")
-starting_point = st.sidebar.slider("Starting Point", -10.0, 10.0, 5.0, 0.1)
-learning_rate = st.sidebar.slider("Learning Rate", 0.01, 1.0, 0.1, 0.01)
-iterations = st.sidebar.slider("Number of Iterations", 1, 50, 10, 1)
-
-# Perform gradient descent
-x_values = gradient_descent(starting_point, learning_rate, iterations)
-y_values = [loss_function(x) for x in x_values]
-
-# Generate plot using Seaborn
-sns.set(style="whitegrid")
-fig, ax = plt.subplots(figsize=(8, 5))
-x_range = np.linspace(-10, 10, 500)
-y_range = loss_function(x_range)
-
-# Plot the loss function
-sns.lineplot(x=x_range, y=y_range, ax=ax, label="Loss Function", color="blue")
-# Plot gradient descent steps
-sns.scatterplot(x=x_values, y=y_values, ax=ax, color="red", label="Gradient Steps", zorder=5)
-sns.lineplot(x=x_values, y=y_values, ax=ax, color="orange", linestyle="--", label="Path")
-
-# Annotate points
-for i, (x, y) in enumerate(zip(x_values, y_values)):
-    ax.text(x, y, f"{i}", fontsize=8, ha="right")
-
-ax.set_title("Gradient Descent")
-ax.set_xlabel("x")
-ax.set_ylabel("Loss")
-ax.legend()
-
-# Display in Streamlit
-st.pyplot(fig)
-
-# Display final results
-st.write("### Gradient Descent Results")
-st.write(f"**Starting Point:** {starting_point}")
-st.write(f"**Learning Rate:** {learning_rate}")
-st.write(f"**Number of Iterations:** {iterations}")
-st.write(f"**Final x Value:** {x_values[-1]:.4f}")
-st.write(f"**Final Loss Value:** {loss_function(x_values[-1]):.4f}")
+# Display the plot
+st.plotly_chart(plot)