Update app.py

app.py

@@ -38,85 +38,12 @@ if "x" not in st.session_state:
     st.session_state.iteration = 0
     st.session_state.x_vals = [4.0]
     st.session_state.y_vals = [safe_eval(st.session_state.func_input, 4.0)]
+if "learning_rate" not in st.session_state:
+    st.session_state.learning_rate = 0.25
 
 # Full-width layout
 st.set_page_config(layout="wide")
 
-# CSS Styles for Borders, Font, Reduced Padding, and Custom Border Color
-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;
-    }
-    /* 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;
-    }
-    /* Tooltip styling */
-    .tooltip {
-        position: relative;
-        display: inline-block;
-        cursor: pointer;
-    }
-    .tooltip .tooltiptext {
-        visibility: hidden;
-        opacity: 0;
-        width: 300px;
-        background-color: #001A6E;
-        color: #fff;
-        text-align: center;
-        border-radius: 5px;
-        padding: 5px;
-        position: absolute;
-        z-index: 1;
-        bottom: 125%; /* Position the tooltip above */
-        left: 50%;
-        margin-left: -150px;
-        transition: opacity 0.3s;
-    }
-    .tooltip:hover .tooltiptext {
-        visibility: visible;
-        opacity: 1;
-    }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
-
 # Page Layout
 st.title("🌟 Gradient Descent Interactive Tool 🌟")
 
@@ -126,27 +53,8 @@ col1, col2 = st.columns([1, 2])
 with col1:
     st.subheader("🔧 Define Your Function")
 
-    # Tooltip with instructions when hovering over the function input label
-    st.markdown(
-        """
-        <div class="tooltip">
-            <label for="func_input">Enter a function of 'x':</label>
-            <span class="tooltiptext">
-                **How to input your function:**
-                - Please give the inputs as mentioned below                
-                - 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
-    )
-    
-    # Use text input for the user to define a function, but no `value` argument
     func_input = st.text_input(
-        "👇", 
+        "Enter a function of 'x':", 
         key="func_input", 
         on_change=reset_state
     )
@@ -162,13 +70,16 @@ with col1:
     )
     learning_rate = st.number_input(
         "Learning Rate (ŋ)", 
-        value=0.25, 
+        value=st.session_state.learning_rate, 
         step=0.01, 
         format="%.2f", 
-        key="learning_rate", 
-        on_change=reset_state
+        key="new_learning_rate"
     )
 
+    # Update learning rate without resetting the state
+    if learning_rate != st.session_state.learning_rate:
+        st.session_state.learning_rate = learning_rate
+
     col3, col4 = st.columns(2)
     with col3:
         if st.button("🔄 Set Up Function"):
@@ -177,7 +88,7 @@ with col1:
         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.x = st.session_state.x - st.session_state.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))
@@ -188,7 +99,6 @@ with col1:
 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]
 
@@ -198,13 +108,12 @@ with col2:
         fig.add_trace(go.Scatter(
             x=x_plot, 
             y=y_plot, 
-            mode="lines+markers", 
-            line=dict(color="blue", width=2), 
-            marker=dict(size=4, color="blue", symbol="circle"),
+            mode="lines", 
+            line=dict(color="blue", width=2),
             name="Function"
         ))
 
-        # All gradient descent points (red points without coordinates)
+        # Gradient descent points
         fig.add_trace(go.Scatter(
             x=st.session_state.x_vals,
             y=st.session_state.y_vals,
@@ -213,9 +122,9 @@ with col2:
             name="Gradient Descent Points"
         ))
 
-        # Tangent line at the current gradient descent point
+        # Tangent line at the current point
         current_x = st.session_state.x
-        tangent_x = np.linspace(-10, 10, 200)  # Adjusting range to cover entire plot
+        tangent_x = np.linspace(-10, 10, 200)
         tangent_y = tangent_line(st.session_state.func_input, current_x, tangent_x)
         fig.add_trace(go.Scatter(
             x=tangent_x,
@@ -225,56 +134,20 @@ with col2:
             name="Tangent Line"
         ))
 
-        # Dynamic zoom for better visibility
         fig.update_layout(
-            xaxis=dict(
-                title="x-axis",
-                range=[-10, 10],
-                showline=True,
-                linecolor="white",
-                tickcolor="white",
-                tickfont=dict(color="white"),
-                ticks="outside",
-            ),
-            yaxis=dict(
-                title="y-axis",
-                range=[min(y_plot) - 5, min(max(y_plot) + 5, 1000)],  # Limiting the max y to 1000
-                showline=True,
-                linecolor="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),
+            xaxis=dict(title="x-axis"),
+            yaxis=dict(title="y-axis"),
+            title="Gradient Descent Visualization",
             width=800,
             height=400,
-            showlegend=True,
-            legend=dict(
-                x=1.1,
-                y=0.5,
-                xanchor="left",
-                yanchor="middle",
-                orientation="v",
-                font=dict(size=12, color="white"),
-                bgcolor="black",
-                bordercolor="white",
-                borderwidth=2,
-            )
+            showlegend=True
         )
 
-        # 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)
 
     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}")