Update app.py

app.py

@@ -86,6 +86,31 @@ st.markdown(
         border-radius: 5px;
         padding: 10px;
     }
+    /* Hoverable tooltip styling */
+    .tooltip:hover .tooltiptext {
+        visibility: visible;
+        opacity: 1;
+    }
+    .tooltip {
+        position: relative;
+        display: inline-block;
+    }
+    .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;
+    }
     </style>
     """,
     unsafe_allow_html=True,
@@ -100,19 +125,24 @@ col1, col2 = st.columns([1, 2])
 with col1:
     st.subheader("🔧 Define Your Function")
     
-    # Show instructions when hovering over the function input
-    if st.session_state.func_input:
-        st.info(
-            """
-            **How to input your function:**
-            - Use `x` for the variable.
-            - Example: For \(x^2\), input `x**2`.
-            - For sine function, input `np.sin(x)`.
-            - For logarithm, input `np.log(x)`.
-            - For other mathematical operations, use `np` (e.g., `np.exp(x)`).
-            """
-        )
-
+    # Tooltip with instructions when hovering over the function input
+    st.markdown(
+        """
+        <div class="tooltip"> 
+            <input type="text" placeholder="Enter function" readonly style="border: none; color: transparent; background-color: transparent;">
+            <span class="tooltiptext">
+                **How to input your function:**
+                - Use `x` for the variable.
+                - Example: For \(x^2\), input `x**2`.
+                - For sine function, input `np.sin(x)`.
+                - For logarithm, input `np.log(x)`.
+                - For other mathematical operations, use `np` (e.g., `np.exp(x)`).
+            </span>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+    
     # Use text input for the user to define a function
     func_input = st.text_input(
         "Enter a function of 'x':", 
@@ -135,116 +165,4 @@ with col1:
         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]
-
-        fig = go.Figure()
-
-        # Function curve
-        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"),
-            name="Function"
-        ))
-
-        # All gradient descent points (red points without coordinates)
-        fig.add_trace(go.Scatter(
-            x=st.session_state.x_vals,
-            y=st.session_state.y_vals,
-            mode="markers",
-            marker=dict(color="red", size=10),
-            name="Gradient Descent Points"
-        ))
-
-        # 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 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,
-            mode="lines",
-            line=dict(color="orange", width=3),
-            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, max(y_plot) + 5],
-                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),
-            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,
-            )
-        )
-
-        # 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}")
+