Update app.py

app.py

@@ -3,19 +3,18 @@ import numpy as np
 import plotly.graph_objects as go
 
 # Title of the app
-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)
+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)
 
 # Custom CSS for enhanced UI
-st.markdown(
-    """
+st.markdown("""
     <style>
         body {
-            background: linear-gradient(to right, #2C3E50, #4CA1AF);
-            color: #FFFFFF;
+            background: linear-gradient(to right, #141E30, #243B55);
+            color: #E0FFFF;
         }
         .stButton>button {
-            background: linear-gradient(to right, #1D2671, #C33764);
+            background: linear-gradient(to right, #00C6FF, #0072FF);
             color: white;
             border: none;
             border-radius: 10px;
@@ -24,16 +23,17 @@ st.markdown(
             font-weight: bold;
         }
         .stButton>button:hover {
-            background: linear-gradient(to right, #C33764, #1D2671);
+            background: linear-gradient(to right, #0072FF, #00C6FF);
         }
         .iteration-controls button {
             width: 100%;
             margin: 5px 0;
         }
+        .block-container {
+            padding: 0;
+        }
     </style>
-    """,
-    unsafe_allow_html=True
-)
+""", unsafe_allow_html=True)
 
 # Safe function evaluation
 def evaluate_function(expression, x_value):
@@ -75,8 +75,8 @@ if "current_index" not in st.session_state:
 if "learning_rate" not in st.session_state:
     st.session_state.learning_rate = 0.1
 
-# Create two-column grid layout
-left_col, right_col = st.columns([1, 2])
+# Create a two-column layout with equal widths
+left_col, right_col = st.columns(2)
 
 # Left side content
 with left_col:
@@ -152,8 +152,8 @@ with right_col:
         x=x_range, 
         y=y_range, 
         mode='lines', 
-        name='Function Curve', 
-        line=dict(color='#1E90FF', width=3)  # Blue color for curve
+        name='Function', 
+        line=dict(color='blue')  # Blue color for curve
     ))
 
     # Add current point
@@ -162,8 +162,8 @@ with right_col:
         x=[x_current], 
         y=[y_current], 
         mode='markers', 
-        name='Gradient Descent Point', 
-        marker=dict(size=12, color='#FF0000')  # Red for gradient descent points
+        name='Current Point', 
+        marker=dict(size=12, color='red')  # Red for current point
     ))
 
     # Add tangent line
@@ -173,29 +173,16 @@ with right_col:
         y=tangent_y, 
         mode='lines', 
         name='Tangent Line', 
-        line=dict(dash='dash', color='#FFD700', width=2)  # Yellow for tangent line
+        line=dict(dash='dash', color='yellow')  # Yellow dashed line for tangent
     ))
 
     # Layout adjustments
     fig.update_layout(
         title="Gradient Descent Progress 🌟",
-        xaxis_title="x-axis",
-        yaxis_title="y-axis",
+        xaxis_title="x",
+        yaxis_title="f(x)",
         template="plotly_dark",
-        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
-            )
-        ]
+        height=600
     )
 
     st.plotly_chart(fig, use_container_width=True)