Update app.py

app.py

@@ -4,60 +4,24 @@ import plotly.graph_objects as go
 
 # Title and Header
 st.title("Interactive Gradient Descent Visualizer")
-st.markdown(
-    "<h1 style='text-align: center; color: #00FA9A;'>✨ Gradient Descent Visualizer ✨</h1>",
-    unsafe_allow_html=True,
-)
-
-# Custom CSS for Enhanced UI
-st.markdown(
-    """
-    <style>
-        body {
-            background: linear-gradient(to right, #141E30, #243B55);
-            color: #E0FFFF;
-        }
-        .stButton>button {
-            background: linear-gradient(to right, #00C6FF, #0072FF);
-            color: white;
-            border: none;
-            border-radius: 10px;
-            padding: 10px 15px;
-            font-size: 16px;
-            font-weight: bold;
-        }
-        .stButton>button:hover {
-            background: linear-gradient(to right, #0072FF, #00C6FF);
-        }
-        .block-container {
-            padding-top: 10px;
-        }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
 
 # Safe Function Evaluation
 def evaluate_function(expression, x_value):
-    """Safely evaluates the mathematical function."""
-    allowed_names = {"x": x_value, "np": np}  # Allow only x and numpy
+    allowed_names = {"x": x_value, "np": np}
     return eval(expression, {"__builtins__": None}, allowed_names)
 
 # Compute Derivative
 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)
 
 # 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 Session 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 = [
@@ -77,38 +41,35 @@ if "current_index" not in st.session_state:
 if "learning_rate" not in st.session_state:
     st.session_state.learning_rate = 0.1
 
-# Layout: Left (Inputs) and Right (Visualization)
-left_col, right_col = st.columns(2)
+# Layout: Inputs and Visualization
+st.markdown("### Input Your Function")
+function_input = st.text_input(
+    "Enter Function (e.g., x**2, np.sin(x))", 
+    "x**2 + x", 
+    key="math_function", 
+    on_change=reset_session_state
+)
+st.markdown("### 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"
+)
 
-# Left Column: Inputs and Controls
-with left_col:
-    st.markdown("### 🧮 Input Your Function")
-    function_input = st.text_input(
-        "Enter Function (e.g., x**2, np.sin(x))", 
-        "x**2 + x", 
-        key="math_function", 
-        on_change=reset_session_state
-    )
-    
-    st.markdown("### ⚙️ 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"
-    )
-    
-    st.markdown("### 🎛️ Controls")
-    if st.button("🚀 Run Descent Step"):
+st.markdown("### Controls")
+col1, col2, col3, col4 = st.columns(4)
+with col1:
+    if st.button("Run Step 🚀"):
         try:
             gradient = compute_derivative(function_input, st.session_state.x_current)
             st.session_state.x_current -= st.session_state.learning_rate * gradient
@@ -119,52 +80,43 @@ with left_col:
             st.session_state.current_index = st.session_state.iter_count
         except Exception as e:
             st.error(f"Error: {str(e)}")
-    if st.button("🔄 Reset"):
+with col2:
+    if st.button("Reset 🔄"):
         reset_session_state()
+with col3:
+    if st.button("⏮️ Previous") and st.session_state.current_index > 0:
+        st.session_state.current_index -= 1
+with col4:
+    if st.button("⏭️ Next") and st.session_state.current_index < st.session_state.iter_count:
+        st.session_state.current_index += 1
 
-# Right Column: Visualization
-with right_col:
-    st.markdown("### 📉 Gradient Descent Visualization")
-    col1, col2, col3 = st.columns([1, 1, 1])
-    
-    with col1:
-        if st.button("⏮️ Previous") and st.session_state.current_index > 0:
-            st.session_state.current_index -= 1
-    with col2:
-        st.markdown(
-            f"<p style='text-align: center;'>Iteration: <strong>{st.session_state.current_index}</strong></p>",
-            unsafe_allow_html=True,
-        )
-    with col3:
-        if st.button("⏭️ Next") and st.session_state.current_index < st.session_state.iter_count:
-            st.session_state.current_index += 1
+# Visualization
+st.markdown("### Visualization")
+try:
+    selected_x, selected_y = st.session_state.history[st.session_state.current_index]
+    st.markdown(f"**x Value:** `{selected_x:.4f}`, **f(x):** `{selected_y:.4f}`")
+except IndexError:
+    st.warning("No iteration data available. Please run a descent step first.")
 
-    # Visualization
-    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.")
-    
-    x_range = np.linspace(-10, 10, 500)
-    y_range = [evaluate_function(function_input, x) for x in x_range]
-    
-    fig = go.Figure()
-    fig.add_trace(go.Scatter(x=x_range, y=y_range, mode='lines', name='Function', line=dict(color='blue')))
-    
-    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=12, 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='yellow')))
-    
-    fig.update_layout(
-        title="Gradient Descent Progress 🌟",
-        xaxis_title="x",
-        yaxis_title="f(x)",
-        template="plotly_dark",
-        height=500,  # Adjusted height for better visibility
-        width=700,  # Adjusted width for better visibility
-    )
-    st.plotly_chart(fig, use_container_width=False)
+x_range = np.linspace(-10, 10, 500)
+y_range = [evaluate_function(function_input, x) for x in x_range]
+
+fig = go.Figure()
+fig.add_trace(go.Scatter(x=x_range, y=y_range, mode='lines', name='Function', line=dict(color='blue')))
+
+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=8, 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='yellow')))
+
+fig.update_layout(
+    title="Gradient Descent Progress",
+    xaxis_title="x",
+    yaxis_title="f(x)",
+    template="plotly_dark",
+    height=400,  # Reduced height
+    width=600,   # Reduced width
+    margin=dict(l=20, r=20, t=40, b=20),  # Compact margins
+)
+st.plotly_chart(fig, use_container_width=False)