Update app.py

app.py

@@ -3,18 +3,19 @@ import numpy as np
 import plotly.graph_objects as go
 
 # Title of the app
-st.set_page_config(page_title="Interactive Gradient Descent Visualizer", layout="wide")
-st.markdown("<h1 style='text-align: center; color: #00FA9A;'>✨ Gradient Descent Visualizer ✨</h1>", unsafe_allow_html=True)
+st.set_page_config(page_title="Gradient Descent Visualizer", layout="wide")
+st.markdown("<h1 style='text-align: center; color: #4CAF50;'>🌟 Gradient Descent Visualizer 🌟</h1>", unsafe_allow_html=True)
 
 # Custom CSS for enhanced UI
-st.markdown("""
+st.markdown(
+    """
     <style>
         body {
-            background: linear-gradient(to right, #141E30, #243B55);
-            color: #E0FFFF;
+            background: linear-gradient(to right, #2C3E50, #4CA1AF);
+            color: #FFFFFF;
         }
         .stButton>button {
-            background: linear-gradient(to right, #00C6FF, #0072FF);
+            background: linear-gradient(to right, #1D2671, #C33764);
             color: white;
             border: none;
             border-radius: 10px;
@@ -23,14 +24,16 @@ st.markdown("""
             font-weight: bold;
         }
         .stButton>button:hover {
-            background: linear-gradient(to right, #0072FF, #00C6FF);
+            background: linear-gradient(to right, #C33764, #1D2671);
         }
         .iteration-controls button {
             width: 100%;
             margin: 5px 0;
         }
     </style>
-""", unsafe_allow_html=True)
+    """,
+    unsafe_allow_html=True
+)
 
 # Safe function evaluation
 def evaluate_function(expression, x_value):
@@ -149,8 +152,8 @@ with right_col:
         x=x_range, 
         y=y_range, 
         mode='lines', 
-        name='Function', 
-        line=dict(color='#FFD700')  # Golden color for curve
+        name='Function Curve', 
+        line=dict(color='#1E90FF', width=3)  # Blue color for curve
     ))
 
     # Add current point
@@ -159,8 +162,8 @@ with right_col:
         x=[x_current], 
         y=[y_current], 
         mode='markers', 
-        name='Current Point', 
-        marker=dict(size=12, color='#FF4500')  # Red-orange for current point
+        name='Gradient Descent Point', 
+        marker=dict(size=12, color='#FF0000')  # Red for gradient descent points
     ))
 
     # Add tangent line
@@ -170,16 +173,29 @@ with right_col:
         y=tangent_y, 
         mode='lines', 
         name='Tangent Line', 
-        line=dict(dash='dash', color='#1E90FF')  # Dodger blue for tangent line
+        line=dict(dash='dash', color='#FFD700', width=2)  # Yellow for tangent line
     ))
 
     # Layout adjustments
     fig.update_layout(
         title="Gradient Descent Progress 🌟",
-        xaxis_title="x",
-        yaxis_title="f(x)",
+        xaxis_title="x-axis",
+        yaxis_title="y-axis",
         template="plotly_dark",
-        height=600
+        height=600,
+        annotations=[
+            dict(
+                x=x_current, 
+                y=y_current, 
+                xref="x", 
+                yref="y",
+                text=f"x: {x_current:.2f}, y: {y_current:.2f}",
+                showarrow=True,
+                arrowhead=3,
+                ax=20,
+                ay=-30
+            )
+        ]
     )
 
     st.plotly_chart(fig, use_container_width=True)