Update app.py

app.py

@@ -165,4 +165,116 @@ with col1:
         value=0.25, 
         step=0.01, 
         format="%.2f", 
-   
+        key="learning_rate", 
+        on_change=reset_state
+    )
+
+    col3, col4 = st.columns(2)
+    with col3:
+        if st.button("🔄 Set Up Function"):
+            reset_state()
+    with col4:
+        if st.button("▶️ Next Iteration"):
+            try:
+                grad = derivative(st.session_state.func_input, st.session_state.x)
+                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(st.session_state.func_input, st.session_state.x))
+            except Exception as e:
+                st.error(f"⚠️ Error: {str(e)}")
+
+# Right Section: Visualization
+with col2:
+    st.subheader("📊 Gradient Descent Visualization")
+    try:
+        # Plot the function and all current and previous gradient descent points
+        x_plot = np.linspace(-10, 10, 400)
+        y_plot = [safe_eval(st.session_state.func_input, x) for x in x_plot]
+
+        fig = go.Figure()
+
+        # Function curve
+        fig.add_trace(go.Scatter(
+            x=x_plot, 
+            y=y_plot, 
+            mode="lines+markers", 
+            line=dict(color="blue", width=2), 
+            marker=dict(size=4, color="blue", symbol="circle"),
+            name="Function"
+        ))
+
+        # All gradient descent points (red points without coordinates)
+        fig.add_trace(go.Scatter(
+            x=st.session_state.x_vals,
+            y=st.session_state.y_vals,
+            mode="markers",
+            marker=dict(color="red", size=10),
+            name="Gradient Descent Points"
+        ))
+
+        # Tangent line at the current gradient descent point
+        current_x = st.session_state.x
+        tangent_x = np.linspace(current_x - 5, current_x + 5, 200)  # Extended range for tangent line
+        tangent_y = tangent_line(st.session_state.func_input, current_x, tangent_x)
+        fig.add_trace(go.Scatter(
+            x=tangent_x,
+            y=tangent_y,
+            mode="lines",
+            line=dict(color="orange", width=3),
+            name="Tangent Line"
+        ))
+
+        # Dynamic zoom for better visibility
+        fig.update_layout(
+            xaxis=dict(
+                title="x-axis",
+                range=[-10, 10],
+                showline=True,
+                linecolor="white",
+                tickcolor="white",
+                tickfont=dict(color="white"),
+                ticks="outside",
+            ),
+            yaxis=dict(
+                title="y-axis",
+                range=[min(y_plot) - 5, max(y_plot) + 5],
+                showline=True,
+                linecolor="white",
+                tickcolor="white",
+                tickfont=dict(color="white"),
+                ticks="outside",
+            ),
+            plot_bgcolor="black",
+            paper_bgcolor="black",
+            title="",
+            margin=dict(l=10, r=10, t=10, b=10),
+            width=800,
+            height=400,
+            showlegend=True,
+            legend=dict(
+                x=1.1,
+                y=0.5,
+                xanchor="left",
+                yanchor="middle",
+                orientation="v",
+                font=dict(size=12, color="white"),
+                bgcolor="black",
+                bordercolor="white",
+                borderwidth=2,
+            )
+        )
+
+        # Axis lines for quadrants
+        fig.add_shape(type="line", x0=-10, x1=10, y0=0, y1=0, line=dict(color="white", width=2))  # x-axis
+        fig.add_shape(type="line", x0=0, x1=0, y0=-100, y1=100, line=dict(color="white", width=2))  # y-axis
+
+        st.plotly_chart(fig, use_container_width=True)
+
+    except Exception as e:
+        st.error(f"⚠️ Error in visualization: {str(e)}")
+
+    # Iteration stats and download
+    col5, col6 = st.columns(2)
+    col5.info(f"🧑‍💻 Iteration: {st.session_state.iteration}")
+    col6.success(f"✅ Current x: {st.session_state.x:.4f}, Current f(x): {st.session_state.y_vals[-1]:.4f}")