Update app.py

app.py

@@ -2,10 +2,9 @@ import streamlit as st
 import numpy as np
 import plotly.graph_objects as go
 
-# Configure the page
+# Title of the app
 st.set_page_config(page_title="Interactive Gradient Descent Visualizer", layout="wide")
-st.title("🌟 Gradient Descent Visualizer")
-st.markdown("---")  # Horizontal separator for cleaner layout
+st.markdown("## 🌟 Gradient Descent Visualizer")
 
 # Safe function evaluation
 def evaluate_function(expression, x_value):
@@ -47,32 +46,41 @@ if "current_index" not in st.session_state:
 if "learning_rate" not in st.session_state:
     st.session_state.learning_rate = 0.1
 
-# Layout configuration
+# Create two-column grid layout for the left side (more space for the right graph)
 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)
 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.markdown("### Input Your Function")
+    function_input = st.text_input(
+        "Enter Function:", 
+        "x**2 + x", 
+        key="math_function", 
+        on_change=reset_session_state
+    )
     
-    st.header("Set Parameters for Gradient Descent")
-    st.markdown("Configure the starting point and learning rate:")
+    st.markdown("### Set Parameters")
     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
+        "Initial Value of x", 
+        value=4.0, 
+        step=0.1, 
+        format="%.2f", 
+        key="initial_point", 
+        on_change=reset_session_state
     )
     st.number_input(
-        "Learning Rate", value=st.session_state.learning_rate, step=0.01, format="%.2f", 
+        "Learning Rate", 
+        value=st.session_state.learning_rate, 
+        step=0.01, 
+        format="%.2f", 
         key="learning_rate"
-    )
-    st.markdown("---")
+    )  # Updates session state directly without reset
     
-    # Buttons for controlling steps
+    st.markdown("### Controls")
     if st.button("🔄 Reset"):
         reset_session_state()
-    
-    if st.button("▶️ Run Descent Step"):
+
+    if st.button("🔄 Run Descent Step", type="primary"):
         try:
             gradient = compute_derivative(function_input, st.session_state.x_current)
             st.session_state.x_current -= st.session_state.learning_rate * gradient
@@ -83,28 +91,26 @@ with left_col:
             st.session_state.current_index = st.session_state.iter_count
         except Exception as e:
             st.error(f"Error: {str(e)}")
+
+# Right side content (Visualization and Iteration Details)
+with right_col:
+    st.markdown("### Gradient Descent Visualization")
     
-    # Navigation buttons
-    col1, col2 = st.columns(2)
+    # Display iteration details using buttons
+    col1, col2, col3 = st.columns(3)
     with col1:
-        if st.button("⬅️ Previous") and st.session_state.current_index > 0:
+        if st.button("⬅️ Previous Iteration") and st.session_state.current_index > 0:
             st.session_state.current_index -= 1
     with col2:
-        if st.button("➡️ Next") and st.session_state.current_index < st.session_state.iter_count:
+        st.markdown(f"**Iteration:** {st.session_state.current_index}", unsafe_allow_html=True)
+    with col3:
+        if st.button("➡️ Next Iteration") and st.session_state.current_index < st.session_state.iter_count:
             st.session_state.current_index += 1
-
-# 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")
-        st.markdown(f"**Iteration:** {st.session_state.current_index}")
-        st.markdown(f"**x Value:** {selected_x:.4f}")
-        st.markdown(f"**f(x):** {selected_y:.4f}")
-        st.markdown("---")
+        st.markdown(f"x Value: `{selected_x:.4f}`")
+        st.markdown(f"f(x): `{selected_y:.4f}`")
     except IndexError:
         st.warning("No iteration data available. Please run a descent step first.")
     
@@ -112,17 +118,35 @@ with right_col:
     x_range = np.linspace(-10, 10, 500)  # Define range for x
     y_range = [evaluate_function(function_input, x) for x in x_range]
     
-    # Plot function and gradient descent steps
+    # Plot function curve with orange color
     fig = go.Figure()
-    fig.add_trace(go.Scatter(x=x_range, y=y_range, mode='lines', name='Function',line=dict(color='orange')))
+    fig.add_trace(go.Scatter(
+        x=x_range, 
+        y=y_range, 
+        mode='lines', 
+        name='Function', 
+        line=dict(color='orange')  # Curve color set to orange
+    ))
     
     # 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')))
+    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
     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',color='green')))
+    fig.add_trace(go.Scatter(
+        x=x_range, 
+        y=tangent_y, 
+        mode='lines', 
+        name='Tangent Line', 
+        line=dict(dash='dash', color='blue')  # Tangent line in blue
+    ))
     
     # Layout adjustments
     fig.update_layout(