Update app.py

app.py

@@ -1,10 +1,31 @@
-# 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
-)
+import streamlit as st
+import numpy as np
+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}
+    return eval(func_str, {"__builtins__": None}, allowed_names)
+
+# 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
+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)]
 
 # Predefined function buttons
 predefined_functions = {
@@ -14,12 +35,207 @@ predefined_functions = {
     "log(x)": "np.log(x)"
 }
 
-# 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.rerun()  # Re-run to ensure everything updates properly
+# Initialize session state variables
+if "func_input" not in st.session_state:
+    st.session_state.func_input = "x**2 + x"
+if "x" not in st.session_state:
+    st.session_state.x = 4.0
+    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)]
+
+# Full-width layout
+st.set_page_config(layout="wide")
+
+# CSS Styles for Premium Design
+st.markdown(
+    """
+    <style>
+    /* Header Styling */
+    h1, h2, h3, h4, h5 {
+        font-family: 'Arial', sans-serif;
+        color: #333333;
+        text-align: center;
+    }
+    /* 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;
+        border-radius: 5px;
+        font-size: 16px;
+        font-family: 'Arial', sans-serif;
+    }
+    /* Tooltip Styling */
+    div[role="tooltip"] {
+        background-color: #0078D7;
+        color: white;
+        border-radius: 8px;
+        padding: 10px;
+    }
+    /* Columns for buttons */
+    .stButton {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
+# Page Layout
+with st.container():
+    st.header("Gradient Descent Interactive Tool")
+    
+    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
+        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", 
+            line=dict(color="blue", width=2), 
+            name="Function"
+        ))
+
+        # Gradient descent point (only show the current point)
+        fig.add_trace(go.Scatter(
+            x=[st.session_state.x],
+            y=[st.session_state.y_vals[-1]],
+            mode="markers",
+            marker=dict(color="red", size=8),
+            name="Current Gradient Descent Point",
+            hovertemplate="x: %{x:.2f}<br>y: %{y:.2f}<extra></extra>"
+        ))
+
+        # Tangent line at current point
+        current_x = st.session_state.x
+        tangent_x = np.linspace(current_x - 5, current_x + 5, 200)  # Extended range
+        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"
+        ))
+
+        # 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
+        fig.update_layout(
+            plot_bgcolor="black",
+            xaxis=dict(
+                title="x",
+                titlefont=dict(color="white"),
+                tickfont=dict(color="white"),
+                ticks="outside",
+                tickcolor="white",
+                range=[-10, 10],
+                showline=True,
+                linecolor="white",
+                mirror=True
+            ),
+            yaxis=dict(
+                title="y",
+                titlefont=dict(color="white"),
+                tickfont=dict(color="white"),
+                ticks="outside",
+                tickcolor="white",
+                range=[-100, 100],
+                showline=True,
+                linecolor="white",
+                mirror=True
+            ),
+            title=dict(
+                text="Gradient Descent Visualization with Tangent Line",
+                font=dict(color="white")
+            ),
+            legend=dict(
+                font=dict(color="white"),
+                bgcolor="black",
+                bordercolor="black",
+                borderwidth=1,
+                orientation="h",
+                xanchor="center", 
+                x=0.5, 
+                yanchor="bottom", 
+                y=1.1
+            )
+        )
+
+        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}")