Update app.py

app.py

@@ -4,7 +4,6 @@ import plotly.graph_objects as go
 
 # Safe function evaluation
 def safe_eval(func_str, x_val):
-    """ Safely evaluates the function at a given x value. """
     allowed_names = {"x": x_val, "np": np}
     try:
         return eval(func_str, {"__builtins__": None}, allowed_names)
@@ -13,24 +12,22 @@ def safe_eval(func_str, x_val):
 
 # Function derivative using finite difference method
 def derivative(func_str, x_val, h=1e-5):
-    """ Numerically compute the derivative of the function at x using finite differences. """
     return (safe_eval(func_str, x_val + h) - safe_eval(func_str, x_val - h)) / (2 * h)
 
 # Tangent line equation
 def tangent_line(func_str, x_val, x_range):
-    """ Compute the tangent line at a given x value. """
     y_val = safe_eval(func_str, x_val)
     slope = derivative(func_str, x_val)
     return slope * (x_range - x_val) + y_val
 
-# Callback to reset session state
+# Reset session state
 def reset_state():
     st.session_state.x = st.session_state.starting_point
     st.session_state.iteration = 0
     st.session_state.x_vals = [st.session_state.starting_point]
     st.session_state.y_vals = [safe_eval(st.session_state.func_input, st.session_state.starting_point)]
 
-# Initialize session state variables
+# Initialize session state
 if "func_input" not in st.session_state:
     st.session_state.func_input = "x**2 + x"
 if "x" not in st.session_state:
@@ -39,134 +36,72 @@ if "x" not in st.session_state:
     st.session_state.x_vals = [4.0]
     st.session_state.y_vals = [safe_eval(st.session_state.func_input, 4.0)]
 
-# Full-width layout
 st.set_page_config(layout="wide")
 
-# CSS Styles for Borders, Font, Reduced Padding, and Custom Border Color
+# CSS for borders and font
 st.markdown(
     """
     <style>
     * {
         font-family: Cambria, Arial, sans-serif !important;
     }
-    h1, h2, h3, h4, h5 {
-        text-align: center;
-        margin-top: 0;
-    }
-    input, .stButton button, .stDownloadButton button {
-        border: 2px solid #ea445a;
-        border-radius: 5px;
-        padding: 10px;
-    }
-    .stInfo, .stSuccess {
-        border: 2px solid #ea445a;
-        border-radius: 5px;
-        padding: 10px;
-    }
-    .stButton {
-        margin-top: 10px;
-    }
-    /* Reduced Padding at the top */
-    .css-1d391kg {
-        padding-top: 0.5rem;
-    }
-    /* Centering the legend in the plot */
     .stPlotlyChart {
-        display: block;
-        margin: 0 auto;
-        border: 5px solid #001A6E; /* Border color for the plot */
-        border-radius: 10px; /* Rounded corners for the border */
+        border: 5px solid #001A6E; /* Plot border */
+        border-radius: 10px;
         padding: 5px;
     }
-    /* Adjusting for full width without scrolling */
-    .css-1lcbvhc {
-        padding-left: 0;
-        padding-right: 0;
-    }
-    /* Custom borders for input fields */
-    .stTextInput input, .stNumberInput input {
-        border: 2px solid #001A6E;
-        border-radius: 5px;
-        padding: 10px;
-    }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# Page Layout
 st.title("🌟 Gradient Descent Interactive Tool 🌟")
 
 col1, col2 = st.columns([1, 2])
 
-# Left Section: User Input
+# Left Section
 with col1:
     st.subheader("🔧 Define Your Function")
-
-    st.markdown(
-        """
-        <div class="tooltip">
-            <label for="func_input">Enter a function of 'x':</label>
-            <span class="tooltiptext">
-                **How to input your function:**
-                - x^n as x**n,
-                - sin(x) as np.sin(x),
-                - log(x) as np.log(x),
-                - e^x or exp(x) as np.exp(x).
-            </span>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
-
     func_input = st.text_input(
-        "👇", 
-        key="func_input", 
+        "Enter a function of x (e.g., x**2 + x):",
+        key="func_input",
         on_change=reset_state
     )
-
-    st.subheader("⚙️ Gradient Descent Parameters")
     starting_point = st.number_input(
-        "Starting Point (X₀)", 
-        value=4.0, 
-        step=0.1, 
-        format="%.2f", 
-        key="starting_point", 
+        "Starting Point (X₀):",
+        value=4.0,
+        step=0.1,
+        key="starting_point",
         on_change=reset_state
     )
     learning_rate = st.number_input(
-        "Learning Rate (ŋ)", 
-        value=0.25, 
-        step=0.01, 
-        format="%.2f", 
+        "Learning Rate (ŋ):",
+        value=0.25,
+        step=0.01,
         key="learning_rate"
     )
-
-    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
+    if st.button("Reset"):
+        reset_state()
+    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")
+    st.subheader("📊 Visualization")
     try:
         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
+        # Function plot
         fig.add_trace(go.Scatter(
             x=x_plot,
             y=y_plot,
@@ -184,7 +119,7 @@ with col2:
             name="Gradient Descent Points"
         ))
 
-        # Tangent line at the current point
+        # Tangent line
         current_x = st.session_state.x
         tangent_x = np.linspace(-10, 10, 200)
         tangent_y = tangent_line(st.session_state.func_input, current_x, tangent_x)
@@ -196,7 +131,7 @@ with col2:
             name="Tangent Line"
         ))
 
-        # Update layout to include full quadrants and reposition the legend
+        # Plot layout
         fig.update_layout(
             xaxis=dict(
                 title="x-axis",
@@ -205,7 +140,6 @@ with col2:
                 zerolinewidth=2,
                 showgrid=True,
                 gridcolor="lightgray",
-                range=[-10, 10],  # Adjust x-axis range to show all quadrants
                 color="white"
             ),
             yaxis=dict(
@@ -215,34 +149,32 @@ with col2:
                 zerolinewidth=2,
                 showgrid=True,
                 gridcolor="lightgray",
-                range=[-100, 100],  # Adjust y-axis range to show all quadrants
+                range=[0, max(y_plot) + 10],  # Show non-negative y-axis only
                 color="white"
             ),
             plot_bgcolor="black",
             paper_bgcolor="black",
             font=dict(color="white"),
             legend=dict(
-                x=0.5,  # Center the legend horizontally
-                y=1.15,  # Position the legend above the plot
-                xanchor="center",  # Align legend horizontally by its center
-                yanchor="bottom",  # Align legend vertically by its bottom
+                x=0.6,  # Legend slightly left for border visibility
+                y=1.0,
                 bgcolor="black",
                 bordercolor="#001A6E",
                 borderwidth=2
             ),
-            margin=dict(l=10, r=10, t=40, b=10),  # Adjust margins to accommodate legend at the top
+            margin=dict(l=10, r=80, t=10, b=10),  # Expand right border
             width=800,
             height=400,
             showlegend=True
         )
 
-
         st.plotly_chart(fig, use_container_width=True)
 
     except Exception as e:
         st.error(f"⚠️ Error in visualization: {str(e)}")
 
-    col5, col6 = st.columns(2)
-col5.info(f"🧑‍💻 Iteration {st.session_state.iteration}")
+# Display iteration and current point info
+col5, col6, col7 = st.columns(3)
+col5.info(f"🧑‍💻 Iteration: {st.session_state.iteration}")
 col6.success(f"✅ Current x: {st.session_state.x:.4f}")
 col7.warning(f"📍 Current Point: ({st.session_state.x:.4f}, {st.session_state.y_vals[-1]:.4f})")