Update app.py

app.py

@@ -4,24 +4,30 @@ 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;'> ✨ Gradient Descent Visualizer ✨</h1>", unsafe_allow_html=True)
+st.markdown("<h1 style='text-align: center; color: #00FA9A;'>✨ Gradient Descent Visualizer ✨</h1>", unsafe_allow_html=True)
 
-# Custom CSS for background and button color
+# Custom CSS for enhanced UI
 st.markdown("""
     <style>
         body {
-            background-color: black;  /* Set background color to black */
-            color: white;  /* Set text color to white for visibility */
+            background: linear-gradient(to right, #141E30, #243B55);
+            color: #E0FFFF;
         }
         .stButton>button {
-            background-color: #00FFFF;  /* Light Cyan color */
-            color: black;
-            border-radius: 5px;
-            padding: 10px 20px;
+            background: linear-gradient(to right, #00C6FF, #0072FF);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            padding: 10px 15px;
             font-size: 16px;
+            font-weight: bold;
         }
         .stButton>button:hover {
-            background-color: #00CED1;  /* Darker cyan on hover */
+            background: linear-gradient(to right, #0072FF, #00C6FF);
+        }
+        .iteration-controls button {
+            width: 100%;
+            margin: 5px 0;
         }
     </style>
 """, unsafe_allow_html=True)
@@ -66,10 +72,10 @@ 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 for the left side (more space for the right graph)
-left_col, right_col = st.columns([1, 2])  # 1 for left, 2 for right grid proportion
+# Create two-column grid layout
+left_col, right_col = st.columns([1, 2])
 
-# Left side content (Function Input and Gradient Descent Parameters)
+# Left side content
 with left_col:
     st.markdown("### 🧮 Input Your Function")
     function_input = st.text_input(
@@ -97,7 +103,7 @@ with left_col:
     
     st.markdown("### 🎛️ Controls")
     
-    if st.button("🚀 Run Descent Step", type="primary"):
+    if st.button("🚀 Run Descent Step"):
         try:
             gradient = compute_derivative(function_input, st.session_state.x_current)
             st.session_state.x_current -= st.session_state.learning_rate * gradient
@@ -111,42 +117,42 @@ with left_col:
     if st.button("🔄 Reset"):
         reset_session_state()
 
-# Right side content (Visualization and Iteration Details)
+# Right side content
 with right_col:
     st.markdown("### 📉 Gradient Descent Visualization")
-    
-    # Display iteration details using buttons
-    col1, col2, col3 = st.columns(3)
+
+    # Iteration control buttons
+    col1, col2, col3 = st.columns([1, 1, 1])
     with col1:
-        if st.button("⬅️ Previous Iteration") and st.session_state.current_index > 0:
+        if st.button("⏮️ Previous") and st.session_state.current_index > 0:
             st.session_state.current_index -= 1
     with col2:
-        st.markdown(f"**🔄 Iteration:** {st.session_state.current_index}", unsafe_allow_html=True)
+        st.markdown(f"<p style='text-align: center;'>Iteration: <strong>{st.session_state.current_index}</strong></p>", unsafe_allow_html=True)
     with col3:
-        if st.button("➡️ Next Iteration") and st.session_state.current_index < st.session_state.iter_count:
+        if st.button("⏭️ Next") and st.session_state.current_index < st.session_state.iter_count:
             st.session_state.current_index += 1
-    
+
     try:
         selected_x, selected_y = st.session_state.history[st.session_state.current_index]
         st.markdown(f"🧾 **x Value:** `{selected_x:.4f}`")
         st.markdown(f"📊 **f(x):** `{selected_y:.4f}`")
     except IndexError:
         st.warning("No iteration data available. Please run a descent step first.")
-    
+
     # Prepare data for visualization
-    x_range = np.linspace(-10, 10, 500)  # Define range for x
+    x_range = np.linspace(-10, 10, 500)
     y_range = [evaluate_function(function_input, x) for x in x_range]
-    
-    # Plot function curve with orange color
+
+    # Plot function curve
     fig = go.Figure()
     fig.add_trace(go.Scatter(
         x=x_range, 
         y=y_range, 
         mode='lines', 
         name='Function', 
-        line=dict(color='orange')  # Curve color set to orange
+        line=dict(color='#FFD700')  # Golden color for curve
     ))
-    
+
     # Add current point
     x_current, y_current = st.session_state.history[st.session_state.current_index]
     fig.add_trace(go.Scatter(
@@ -154,9 +160,9 @@ with right_col:
         y=[y_current], 
         mode='markers', 
         name='Current Point', 
-        marker=dict(size=10, color='red')
+        marker=dict(size=12, color='#FF4500')  # Red-orange for current point
     ))
-    
+
     # Add tangent line
     tangent_y = calculate_tangent(function_input, x_current, x_range)
     fig.add_trace(go.Scatter(
@@ -164,16 +170,16 @@ with right_col:
         y=tangent_y, 
         mode='lines', 
         name='Tangent Line', 
-        line=dict(dash='dash', color='blue')  # Tangent line in blue
+        line=dict(dash='dash', color='#1E90FF')  # Dodger blue for tangent line
     ))
-    
+
     # Layout adjustments
     fig.update_layout(
         title="Gradient Descent Progress 🌟",
         xaxis_title="x",
         yaxis_title="f(x)",
-        template="plotly_white",
+        template="plotly_dark",
         height=600
     )
-    
+
     st.plotly_chart(fig, use_container_width=True)