Update app.py

app.py

@@ -2,7 +2,7 @@ import streamlit as st
 import numpy as np
 import plotly.graph_objects as go
 
-# Title of the app
+# Configure the page
 st.set_page_config(page_title="Interactive Gradient Descent Visualizer", layout="wide")
 st.title("🌟 Gradient Descent Visualizer")
 st.markdown("---")  # Horizontal separator for cleaner layout
@@ -47,7 +47,7 @@ if "current_index" not in st.session_state:
 if "learning_rate" not in st.session_state:
     st.session_state.learning_rate = 0.1
 
-# Create two-column grid layout for the left side (more space for the right graph)
+# Layout configuration
 left_col, right_col = st.columns([1, 2])  # 1 for left, 2 for right grid proportion
 
 # Left side content (Function Input and Gradient Descent Parameters)
@@ -65,17 +65,14 @@ with left_col:
     st.number_input(
         "Learning Rate", value=st.session_state.learning_rate, step=0.01, format="%.2f", 
         key="learning_rate"
-    )  # Updates session state directly without reset
+    )
     st.markdown("---")
     
-    # Reset Button
+    # Buttons for controlling steps
     if st.button("🔄 Reset"):
         reset_session_state()
-
-# Right side content (Gradient Descent Updates and Progress)
-with right_col:
-    st.header("Gradient Descent Updates")
-    if st.button("🔄 Run Descent Step", type="primary"):
+    
+    if st.button("▶️ Run Descent Step"):
         try:
             gradient = compute_derivative(function_input, st.session_state.x_current)
             st.session_state.x_current -= st.session_state.learning_rate * gradient
@@ -86,8 +83,8 @@ with right_col:
             st.session_state.current_index = st.session_state.iter_count
         except Exception as e:
             st.error(f"Error: {str(e)}")
-
-    # Navigation Buttons
+    
+    # Navigation buttons
     col1, col2 = st.columns(2)
     with col1:
         if st.button("⬅️ Previous") and st.session_state.current_index > 0:
@@ -96,7 +93,11 @@ with right_col:
         if st.button("➡️ Next") and st.session_state.current_index < st.session_state.iter_count:
             st.session_state.current_index += 1
 
-    # Display selected iteration details
+# Right side content (Interactive Gradient Descent Visualization)
+with right_col:
+    st.header("Gradient Descent Visualization")
+    
+    # Display iteration details at the top of the graph
     try:
         selected_x, selected_y = st.session_state.history[st.session_state.current_index]
         st.subheader("Iteration Details")
@@ -106,53 +107,30 @@ with right_col:
         st.markdown("---")
     except IndexError:
         st.warning("No iteration data available. Please run a descent step first.")
-
-    # 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()
+    # Prepare data for visualization
+    x_range = np.linspace(-10, 10, 500)  # Define range for x
+    y_range = [evaluate_function(function_input, x) for x in x_range]
     
-    # 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")
-    )
+    # Plot function and gradient descent steps
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(x=x_range, y=y_range, mode='lines', name='Function'))
     
-    # Add gradient descent points up to the current index
-    x_points, y_points = zip(*st.session_state.history[:st.session_state.current_index + 1])
-    plot.add_trace(
-        go.Scatter(
-            x=x_points,
-            y=y_points,
-            mode="markers",
-            marker=dict(color="red", size=10, symbol="diamond"),
-            name="Descent Steps",
-        )
-    )
+    # Add current point
+    x_current, y_current = st.session_state.history[st.session_state.current_index]
+    fig.add_trace(go.Scatter(x=[x_current], y=[y_current], mode='markers', name='Current Point', marker=dict(size=10, color='red')))
     
-    # Add tangent line at the selected point
-    tangent_x = np.linspace(selected_x - 2, selected_x + 2, 100)
-    tangent_y = calculate_tangent(function_input, selected_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",
-        )
-    )
+    # Add tangent line
+    tangent_y = calculate_tangent(function_input, x_current, x_range)
+    fig.add_trace(go.Scatter(x=x_range, y=tangent_y, mode='lines', name='Tangent Line', line=dict(dash='dash')))
     
-    # Update plot layout
-    plot.update_layout(
-        title="Interactive Gradient Descent with Tangent Visualization",
+    # Layout adjustments
+    fig.update_layout(
+        title="Gradient Descent Progress",
         xaxis_title="x",
         yaxis_title="f(x)",
-        template="plotly_dark",
-        legend=dict(bgcolor="rgba(255,255,255,0.5)", bordercolor="gray", borderwidth=1),
-        height=500,  # Reduce the graph height for better fitting
+        template="plotly_white",
+        height=600
     )
     
-    # Display the plot in the right side
-    st.plotly_chart(plot, use_container_width=True)
+    st.plotly_chart(fig, use_container_width=True)