Update app.py

app.py

@@ -2,164 +2,141 @@ import streamlit as st
 import numpy as np
 import plotly.graph_objects as go
 
-# Page configuration
-st.set_page_config(page_title="Gradient Descent Visualizer", layout="wide")
-
-# Add custom CSS styles
-st.markdown(
-    """
-    <style>
-        body {
-            background-color: #f0f8ff;
-            font-family: Arial, sans-serif;
-        }
-        .stButton>button {
-            font-size: 16px;
-            padding: 10px 20px;
-            border-radius: 8px;
-            border: none;
-            width: 100%;
-        }
-        .stButton .blue button {
-            background-color: #1e90ff;
-            color: white;
-        }
-        .stButton .green button {
-            background-color: #4CAF50;
-            color: white;
-        }
-        .stButton .orange button {
-            background-color: #FF9800;
-            color: white;
-        }
-        .stButton button:hover {
-            opacity: 0.9;
-        }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
-
-# Helper functions
+# 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 function at a given x value."""
-    allowed_names = {"x": x_value, "np": np}
+    """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 computes the derivative using finite differences."""
+    """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):
-    """Calculates the tangent line at the current x value."""
+    """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
 
-def reset_session():
-    """Resets the session state."""
-    if "start_point" not in st.session_state:
-        st.session_state.start_point = 4.0  # Default value if not initialized
-
-    if "func_input" in st.session_state:
-        st.session_state.x_current = st.session_state.start_point
-        st.session_state.iter_count = 0
-        st.session_state.iter_data = [{"Iteration": 0, "x": st.session_state.start_point, "f(x)": evaluate_function(st.session_state.func_input, st.session_state.start_point)}]
-    else:
-        st.session_state.x_current = st.session_state.start_point
-        st.session_state.iter_count = 0
-        st.session_state.iter_data = [{"Iteration": 0, "x": st.session_state.start_point, "f(x)": evaluate_function("x**2 + x", st.session_state.start_point)}]
+# 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 = 4.0
+    st.session_state.x_current = initial_point
     st.session_state.iter_count = 0
-    st.session_state.iter_data = [{"Iteration": 0, "x": 4.0, "f(x)": evaluate_function("x**2 + x", 4.0)}]
-    st.session_state.func_input = "x**2 + x"  # Default function
+    st.session_state.x_points = [initial_point]
+    st.session_state.y_points = [evaluate_function(function_input, initial_point)]
 
-# Layout with two columns
-col1, col2 = st.columns([1, 2])
-
-# Left column for function input and settings
-with col1:
-    st.subheader("📋 Select or Define a Function")
-    predefined_func = st.radio(
-        "Choose a predefined function or select 'Custom':",
-        options=["x**2 + x", "np.sin(x)", "x**3 - 3*x + 2", "Custom"],
-    )
-    if predefined_func == "Custom":
-        func_input = st.text_input("Enter your custom function:", value="x**2 + x", key="func_input")
-    else:
-        func_input = predefined_func
+# 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)}")
 
-    st.session_state.func_input = func_input  # Store the selected/custom function in session state
+# 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("---")
 
-    start_point = st.number_input("Starting Point (x):", value=4.0, step=0.1, format="%.2f", key="start_point", on_change=reset_session)
-    learning_rate = st.number_input("Learning Rate:", value=0.1, step=0.01, format="%.2f", key="learning_rate", on_change=reset_session)
+# Create two columns: left for inputs and right for visualization
+col1, col2 = st.columns([1, 2])  # Adjust width of the columns as needed
 
-    # Buttons for actions with styling (change key to make it unique)
-    col1.button("🔄 Next Step", key="next_step", use_container_width=True, help="Perform one step of gradient descent", on_click=None)
-    col1.button("🔁 Reset", key="reset", use_container_width=True, help="Reset the gradient descent", on_click=reset_session)
-    iteration_data_button = col1.button("📊 Iteration Data", key="iteration_data_button", use_container_width=True)
+# Left column with function inputs and progress
+with col1:
+    st.header("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("---")
 
-# Right column for visualization
+# Right column with visualization
 with col2:
-    st.subheader("📈 Visualization")
+    # Generate plot data
     x_vals = np.linspace(-10, 10, 400)
-    y_vals = [evaluate_function(st.session_state.func_input, x) for x in x_vals]
+    y_vals = [evaluate_function(function_input, x) for x in x_vals]
 
+    # Create the plot
     plot = go.Figure()
 
-    # Function curve
-    plot.add_trace(go.Scatter(x=x_vals, y=y_vals, mode="lines", line=dict(color="green", width=3), name="Function Curve"))
+    # 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")
+    )
 
-    # Gradient Descent Points
-    x_points = [entry["x"] for entry in st.session_state.iter_data]
-    y_points = [entry["f(x)"] for entry in st.session_state.iter_data]
+    # Add gradient descent points
     plot.add_trace(
         go.Scatter(
-            x=x_points, y=y_points, mode="markers", marker=dict(color="blue", size=10), name="Descent Points"
+            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",
         )
     )
 
-    # Tangent Line
-    if st.session_state.iter_count > 0:
-        current_x = st.session_state.x_current
-        tangent_x = np.linspace(current_x - 2, current_x + 2, 100)
-        tangent_y = calculate_tangent(st.session_state.func_input, current_x, tangent_x)
-        plot.add_trace(
-            go.Scatter(
-                x=tangent_x, y=tangent_y, mode="lines", line=dict(color="orange", dash="dash"), name="Tangent Line"
-            )
+    # 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="Gradient Descent Visualization",
+        title="Interactive Gradient Descent with Tangent Visualization",
         xaxis_title="x",
         yaxis_title="f(x)",
-        template="plotly_white",
-        legend=dict(bgcolor="rgba(255,255,255,0.8)", bordercolor="gray"),
+        template="plotly_dark",
+        legend=dict(bgcolor="rgba(255,255,255,0.5)", bordercolor="gray", borderwidth=1),
     )
 
+    # Display the plot
     st.plotly_chart(plot)
-
-# Perform gradient descent operation when button is clicked
-if st.button("🔄 Next Step", key="next_step", use_container_width=True):
-    try:
-        grad = compute_derivative(st.session_state.func_input, st.session_state.x_current)
-        st.session_state.x_current = st.session_state.x_current - st.session_state.learning_rate * grad
-        st.session_state.iter_count += 1
-
-        # Add current iteration data
-        st.session_state.iter_data.append({
-            "Iteration": st.session_state.iter_count,
-            "x": st.session_state.x_current,
-            "f(x)": evaluate_function(st.session_state.func_input, st.session_state.x_current),
-        })
-    except Exception as e:
-        st.error(f"Error: {e}")
-
-# Show iteration data in a new section when the button is clicked
-if iteration_data_button:
-    st.subheader("📊 Iteration Data")
-    st.table(st.session_state.iter_data)