Update app.py

app.py

@@ -31,112 +31,107 @@ def reset_session_state():
     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:")
+# Input section for function and parameters (Left Side)
 col1, col2 = st.columns(2)
 with col1:
+    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.header("Set Parameters for Gradient Descent")
+    st.markdown("Configure the starting point and learning rate:")
     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("---")
+    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("---")
-
-# Create two columns: left for inputs and right for visualization
-col1, col2 = st.columns([1, 2])  # Adjust width of the columns as needed
-
-# Left column with function inputs and progress
-with col1:
-    st.header("Gradient Descent Progress")
+# Gradient Descent Updates (Right Side)
+with col2:
+    st.header("Gradient Descent Updates")
+    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)]
+
+    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)}")
+
+    # Gradient Descent Progress Section with Different Style
+    st.subheader("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 with visualization
-with col2:
-    # 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")
+    
+    # Styling the updates section
+    st.markdown(
+        f'<div style="background-color:#f0f0f0; padding: 10px; border-radius: 5px;">'
+        f'<strong>Iteration: </strong>{st.session_state.iter_count} <br>'
+        f'<strong>Current x Value: </strong>{st.session_state.x_current:.4f} <br>'
+        f'<strong>Current f(x): </strong>{st.session_state.y_points[-1]:.4f}</div>',
+        unsafe_allow_html=True
     )
 
-    # 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",
-        )
+# 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",
-        )
+)
+
+# 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),
-    )
-
-    # Display the plot
-    st.plotly_chart(plot)
+)
+
+# 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),
+)
+
+# Display the plot in the left side
+st.plotly_chart(plot)