Update app.py

app.py

@@ -2,32 +2,51 @@ import streamlit as st
 import numpy as np
 import plotly.graph_objects as go
 
-# App Configuration
+# Title of the app
 st.set_page_config(page_title="Interactive Gradient Descent Visualizer", layout="wide")
-
-# Initialize session state variables
-if "x_current" not in st.session_state:
-    st.session_state.x_current = 0.0
-if "iter_count" not in st.session_state:
-    st.session_state.iter_count = 0
-if "history" not in st.session_state:
-    st.session_state.history = []
-if "current_index" not in st.session_state:
-    st.session_state.current_index = 0
-if "learning_rate" not in st.session_state:
-    st.session_state.learning_rate = 0.1
-
-# Function evaluation
+st.markdown("<h1 style='text-align: center;'> 🌟 Gradient Descent Visualizer</h1>", unsafe_allow_html=True)
+
+# Custom CSS for background and button color
+st.markdown("""
+    <style>
+        body {
+            background-color: black;  /* Set background color to black */
+            color: white;  /* Set text color to white for visibility */
+        }
+        .stButton>button {
+            background-color: #00FFFF;  /* Light Cyan color */
+            color: black;
+            border-radius: 5px;
+            padding: 10px 20px;
+            font-size: 16px;
+        }
+        .stButton>button:hover {
+            background-color: #00CED1;  /* Darker cyan on hover */
+        }
+    </style>
+""", unsafe_allow_html=True)
+
+# Safe function evaluation
 def evaluate_function(expression, 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
+# Compute derivative using finite difference
 def compute_derivative(expression, x_value, h=1e-5):
+    """Numerically calculates the derivative at a given point."""
     return (evaluate_function(expression, x_value + h) - evaluate_function(expression, x_value - h)) / (2 * h)
 
-# Reset session state
+# Tangent line calculation
+def calculate_tangent(expression, x_value, x_range):
+    """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
+
+# Reset state
 def reset_session_state():
+    """Resets the session state for a fresh start."""
     st.session_state.x_current = st.session_state.initial_point
     st.session_state.iter_count = 0
     st.session_state.history = [
@@ -35,79 +54,120 @@ def reset_session_state():
     ]
     st.session_state.current_index = 0
 
-# Tangent line calculation
-def calculate_tangent(expression, x_value, x_range):
-    y_value = evaluate_function(expression, x_value)
-    slope = compute_derivative(expression, x_value)
-    return slope * (x_range - x_value) + y_value
-
-# App Title
-st.markdown("<h1 style='text-align: center;'>🌟 Gradient Descent Visualizer</h1>", unsafe_allow_html=True)
-
-# Input section
-st.markdown("### Input Parameters")
-col1, col2, col3, col4 = st.columns([2, 2, 2, 1])
+# Initialize session state variables
+if "x_current" not in st.session_state:
+    st.session_state.x_current = 0.0  # Default starting point
+if "iter_count" not in st.session_state:
+    st.session_state.iter_count = 0
+if "history" not in st.session_state:
+    st.session_state.history = [(0.0, evaluate_function("x**2 + x", 0.0))]  # Default function example
+if "current_index" not in st.session_state:
+    st.session_state.current_index = 0
+if "learning_rate" not in st.session_state:
+    st.session_state.learning_rate = 0.1
 
-with col1:
-    function_input = st.text_input("Function (`x**2`, `np.sin(x)`) :", "x**2 + x", key="math_function")
-with col2:
-    st.session_state.initial_point = st.number_input("Initial x Value:", value=4.0, step=0.1, format="%.2f")
-with col3:
-    st.session_state.learning_rate = st.number_input("Learning Rate:", value=0.1, step=0.01, format="%.2f")
-with col4:
-    if st.button("Reset"):
+# 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.markdown("### Input Your Function")
+    function_input = st.text_input(
+        "Enter Function:`Ex:'x**2`,`np.sin(x)`,", 
+        "x**2 + x", 
+        key="math_function", 
+        on_change=reset_session_state
+    )
+    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
+    )
+    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("### Controls")
+    
+    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
+            st.session_state.iter_count += 1
+            st.session_state.history.append(
+                (st.session_state.x_current, evaluate_function(function_input, st.session_state.x_current))
+            )
+            st.session_state.current_index = st.session_state.iter_count
+        except Exception as e:
+            st.error(f"Error: {str(e)}")
+    if st.button("🔄 Reset"):
         reset_session_state()
 
-# Run Gradient Descent Step
-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
-        st.session_state.iter_count += 1
-        st.session_state.history.append(
-            (st.session_state.x_current, evaluate_function(function_input, st.session_state.x_current))
-        )
-        st.session_state.current_index = st.session_state.iter_count
-    except Exception as e:
-        st.error(f"Error: {str(e)}")
-
-# Tabs for content
-tab1, tab2 = st.tabs(["📈 Graph", "ℹ️ Iteration Details"])
-
-# Tab 1: Visualization
-with tab1:
+# Right side content (Visualization and Iteration Details)
+with right_col:
     st.markdown("### Gradient Descent Visualization")
-    x_range = np.linspace(-10, 10, 500)
+    
+    # Display iteration details using buttons
+    col1, col2, col3 = st.columns(3)
+    with col1:
+        if st.button("⬅️ Previous Iteration") and st.session_state.current_index > 0:
+            st.session_state.current_index -= 1
+    with col2:
+        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
+    
+    try:
+        selected_x, selected_y = st.session_state.history[st.session_state.current_index]
+        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.")
+    
+    # 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]
-
+    
+    # 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")
+        x=x_range, 
+        y=y_range, 
+        mode='lines', 
+        name='Function', 
+        line=dict(color='orange')  # Curve color set to orange
     ))
-
-    if st.session_state.history:
-        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")
-        ))
-
-        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="blue")
-        ))
-
+    
+    # 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
+    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='blue')  # Tangent line in blue
+    ))
+    
+    # Layout adjustments
     fig.update_layout(
         title="Gradient Descent Progress",
         xaxis_title="x",
@@ -115,16 +175,5 @@ with tab1:
         template="plotly_white",
         height=600
     )
-    st.plotly_chart(fig, use_container_width=True)
-
-# Tab 2: Iteration Details
-with tab2:
-    st.markdown("### Iteration Details")
-    if st.session_state.history:
-        st.progress(st.session_state.current_index / max(1, st.session_state.iter_count))
-        x_value, y_value = st.session_state.history[st.session_state.current_index]
-        st.markdown(f"- **Iteration:** {st.session_state.current_index}")
-        st.markdown(f"- **x Value:** `{x_value:.4f}`")
-        st.markdown(f"- **f(x):** `{y_value:.4f}`")
-    else:
-        st.warning("No iteration data available. Please run a descent step first.")
+    
+    st.plotly_chart(fig, use_container_width=True)