Update app.py

app.py

@@ -6,7 +6,10 @@ import plotly.graph_objects as go
 def safe_eval(func_str, x_val):
     """ Safely evaluates the function at a given x value. """
     allowed_names = {"x": x_val, "np": np}
-    return eval(func_str, {"__builtins__": None}, allowed_names)
+    try:
+        return eval(func_str, {"__builtins__": None}, allowed_names)
+    except Exception as e:
+        raise ValueError(f"Error evaluating the function: {e}")
 
 # Function derivative using finite difference method
 def derivative(func_str, x_val, h=1e-5):
@@ -47,59 +50,43 @@ if "x" not in st.session_state:
 # Full-width layout
 st.set_page_config(layout="wide")
 
-# CSS Styles for Premium Design
+# CSS Styles for Borders, Font and Reduced Padding
 st.markdown(
     """
     <style>
-    /* Header Styling */
+    * {
+        font-family: Cambria, Arial, sans-serif !important;
+    }
     h1, h2, h3, h4, h5 {
-        font-family: 'Arial', sans-serif;
-        color: #333333;
         text-align: center;
+        margin-top: 0;
     }
-    /* Button Styling */
-    .stButton button {
-        background-color: #ffffff;
-        color: #FF00FF;  /* Pink text */
-        border-radius: 8px;
-        border: 2px solid #000000;  /* Black border */
-        padding: 10px 20px;
-        font-size: 16px;
-        font-weight: bold;
-        transition: 0.3s;
-        width: 100%;
-        height: 50px;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        white-space: nowrap;  /* Ensures text stays in one line */
-    }
-    .stButton button:hover {
-        background-color: #000000;  /* Black background on hover */
-        color: #FF00FF;  /* Pink text on hover */
-        transform: scale(1.05);
-    }
-    /* Input Box Styling */
-    input, select {
-        border: 2px solid #ccc;
-        padding: 8px;
+    input, .stButton button, .stDownloadButton button {
+        border: 2px solid #ea445a;
         border-radius: 5px;
-        font-size: 16px;
-        font-family: 'Arial', sans-serif;
+        padding: 10px;
     }
-    /* Tooltip Styling */
-    div[role="tooltip"] {
-        background-color: #0078D7;
-        color: white;
-        border-radius: 8px;
+    .stInfo, .stSuccess {
+        border: 2px solid #ea445a;
+        border-radius: 5px;
         padding: 10px;
     }
-    /* Columns for buttons */
     .stButton {
-        display: flex;
-        flex-direction: column;
-        gap: 15px;
+        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;
+    }
+    /* Adjusting for full width without scrolling */
+    .css-1lcbvhc {
+        padding-left: 0;
+        padding-right: 0;
     }
     </style>
     """,
@@ -107,49 +94,70 @@ st.markdown(
 )
 
 # Page Layout
-with st.container():
-    st.header("Gradient Descent Interactive Tool")
+st.title("🌟 Gradient Descent Interactive Tool 🌟")
+
+col1, col2 = st.columns([1, 2])
+
+# Left Section: User Input
+with col1:
+    st.subheader("🔧 Define Your Function")
     
-    col1, col2 = st.columns([1, 2])
-
-    # Left Section: User Input
-    with col1:
-        st.subheader("Define Your Function")
-        func_input = st.text_input("Enter a function of 'x':", st.session_state.func_input, key="func_input", on_change=reset_state)
-
-        st.write("Or choose a predefined function:")
-        cols = st.columns(4)  # Adjusted to 4 columns to increase button width
-        for i, (btn_label, func_value) in enumerate(predefined_functions.items()):
-            with cols[i]:
-                if st.button(btn_label):
-                    st.session_state.func_input = func_value
-                    reset_state()
-                    st.rerun()  # Re-run to ensure everything updates properly
-
-        st.subheader("Gradient Descent Parameters")
-        starting_point = st.number_input("Starting Point (Xₒ)", value=4.0, step=0.1, format="%.2f", key="starting_point", on_change=reset_state)
-        learning_rate = st.number_input("Learning Rate (ŋ)", value=0.25, step=0.01, format="%.2f", key="learning_rate", on_change=reset_state)
-
-        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
-    with col2:
-        st.subheader("Gradient Descent Visualization")
-        
-        # Plot the function, gradient descent points, and tangent line
+    # Display the predefined function buttons
+    st.write("Or choose a predefined function:")
+    cols = st.columns(4)
+    for i, (btn_label, func_value) in enumerate(predefined_functions.items()):
+        with cols[i]:
+            if st.button(btn_label):
+                st.session_state.func_input = func_value
+                reset_state()  # Ensure that the reset function is called to update the state
+                st.experimental_rerun()  # Re-run to ensure everything updates properly
+
+    # Use text input for the user to define a function
+    func_input = st.text_input(
+        "Enter a function of 'x':", 
+        st.session_state.func_input, 
+        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", 
+        on_change=reset_state
+    )
+    learning_rate = st.number_input(
+        "Learning Rate (ŋ)", 
+        value=0.25, 
+        step=0.01, 
+        format="%.2f", 
+        key="learning_rate", 
+        on_change=reset_state
+    )
+
+    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
+with col2:
+    st.subheader("📊 Gradient Descent Visualization")
+    try:
+        # Plot the function and all current and previous gradient descent points
         x_plot = np.linspace(-10, 10, 400)
         y_plot = [safe_eval(st.session_state.func_input, x) for x in x_plot]
 
@@ -159,26 +167,25 @@ with st.container():
         fig.add_trace(go.Scatter(
             x=x_plot, 
             y=y_plot, 
-            mode="lines", 
+            mode="lines+markers", 
             line=dict(color="blue", width=2), 
+            marker=dict(size=4, color="blue", symbol="circle"),
             name="Function"
         ))
 
-        # Gradient descent point (only show the current point)
+        # All gradient descent points (red points without coordinates)
         fig.add_trace(go.Scatter(
-            x=[st.session_state.x],
-            y=[st.session_state.y_vals[-1]],
+            x=st.session_state.x_vals,
+            y=st.session_state.y_vals,
             mode="markers",
-            marker=dict(color="red", size=8),
-            name="Current Gradient Descent Point",
-            hovertemplate="x: %{x:.2f}<br>y: %{y:.2f}<extra></extra>"
+            marker=dict(color="red", size=10),
+            name="Gradient Descent Points"
         ))
 
-        # Tangent line at current point
+        # Tangent line at the current gradient descent point
         current_x = st.session_state.x
-        tangent_x = np.linspace(current_x - 5, current_x + 5, 200)  # Extended range
+        tangent_x = np.linspace(current_x - 5, current_x + 5, 200)  # Extended range for tangent line
         tangent_y = tangent_line(st.session_state.func_input, current_x, tangent_x)
-
         fig.add_trace(go.Scatter(
             x=tangent_x,
             y=tangent_y,
@@ -187,55 +194,56 @@ with st.container():
             name="Tangent Line"
         ))
 
-        # Add axis lines
-        fig.add_shape(type="line", x0=-10, x1=10, y0=0, y1=0, line=dict(color="black", width=2))  # x-axis
-        fig.add_shape(type="line", x0=0, x1=0, y0=-100, y1=100, line=dict(color="black", width=2))  # y-axis
-
-        # Update layout
+        # Dynamic zoom for better visibility
         fig.update_layout(
-            plot_bgcolor="black",
             xaxis=dict(
-                title="x",
-                titlefont=dict(color="white"),
-                tickfont=dict(color="white"),
-                ticks="outside",
-                tickcolor="white",
+                title="x-axis",
                 range=[-10, 10],
                 showline=True,
                 linecolor="white",
-                mirror=True
-            ),
-            yaxis=dict(
-                title="y",
-                titlefont=dict(color="white"),
+                tickcolor="white",
                 tickfont=dict(color="white"),
                 ticks="outside",
-                tickcolor="white",
-                range=[-100, 100],
+            ),
+            yaxis=dict(
+                title="y-axis",
+                range=[min(y_plot) - 5, max(y_plot) + 5],
                 showline=True,
                 linecolor="white",
-                mirror=True
-            ),
-            title=dict(
-                text="Gradient Descent Visualization with Tangent Line",
-                font=dict(color="white")
+                tickcolor="white",
+                tickfont=dict(color="white"),
+                ticks="outside",
             ),
+            plot_bgcolor="black",
+            paper_bgcolor="black",
+            title="",
+            margin=dict(l=10, r=10, t=10, b=10),
+            width=800,
+            height=400,
+            showlegend=True,
             legend=dict(
-                font=dict(color="white"),
+                x=1.1,
+                y=0.5,
+                xanchor="left",
+                yanchor="middle",
+                orientation="v",
+                font=dict(size=12, color="white"),
                 bgcolor="black",
-                bordercolor="black",
-                borderwidth=1,
-                orientation="h",
-                xanchor="center", 
-                x=0.5, 
-                yanchor="bottom", 
-                y=1.1
+                bordercolor="white",
+                borderwidth=2,
             )
         )
 
+        # Axis lines for quadrants
+        fig.add_shape(type="line", x0=-10, x1=10, y0=0, y1=0, line=dict(color="white", width=2))  # x-axis
+        fig.add_shape(type="line", x0=0, x1=0, y0=-100, y1=100, line=dict(color="white", width=2))  # y-axis
+
         st.plotly_chart(fig, use_container_width=True)
 
-        # Iteration stats
-        st.subheader("Iteration Counter")
-        st.info(f"Iteration: {st.session_state.iteration}")
-        st.success(f"Current x: {st.session_state.x:.4f}\nCurrent f(x): {st.session_state.y_vals[-1]:.4f}")
+    except Exception as e:
+        st.error(f"⚠️ Error in visualization: {str(e)}")
+
+    # Iteration stats and download
+    col5, col6 = st.columns(2)
+    col5.info(f"🧑‍💻 Iteration: {st.session_state.iteration}")
+    col6.success(f"✅ Current x: {st.session_state.x:.4f}, Current f(x): {st.session_state.y_vals[-1]:.4f}")