Update app.py

app.py

@@ -4,7 +4,7 @@ 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: gold;'> 🌟 Gradient Descent Visualizer</h1>", unsafe_allow_html=True)
 
 # Custom CSS for background and button color
 st.markdown("""
@@ -14,14 +14,16 @@ st.markdown("""
             color: white;  /* Set text color to white for visibility */
         }
         .stButton>button {
-            background-color: #00FFFF;  /* Light Cyan color */
-            color: black;
+            background-color: gold;  /* Gold color for buttons */
+            color: black;  /* Button text color */
             border-radius: 5px;
             padding: 10px 20px;
             font-size: 16px;
+            font-weight: bold;
         }
         .stButton>button:hover {
-            background-color: #00CED1;  /* Darker cyan on hover */
+            background-color: darkgoldenrod;  /* Darker gold on hover */
+            color: white;  /* White text color on hover */
         }
     </style>
 """, unsafe_allow_html=True)
@@ -71,14 +73,14 @@ left_col, right_col = st.columns([1, 2])  # 1 for left, 2 for right grid proport
 
 # Left side content (Function Input and Gradient Descent Parameters)
 with left_col:
-    st.markdown("### Input Your Function")
+    st.markdown("<h3 style='color: lightblue;'>Input Your Function</h3>", unsafe_allow_html=True)
     function_input = st.text_input(
-        "Enter Function:`Ex:'x**2`,`np.sin(x)`,", 
+        "Enter Function:`Ex:'x**2`,`np.sin(x)`", 
         "x**2 + x", 
         key="math_function", 
         on_change=reset_session_state
     )
-    st.markdown("### Set Parameters")
+    st.markdown("<h3 style='color: lightgreen;'>Set Parameters</h3>", unsafe_allow_html=True)
     initial_point = st.number_input(
         "Initial Value of x", 
         value=4.0, 
@@ -95,7 +97,7 @@ with left_col:
         key="learning_rate"
     )  # Updates session state directly without reset
     
-    st.markdown("### Controls")
+    st.markdown("<h3 style='color: lightcoral;'>Controls</h3>", unsafe_allow_html=True)
     
     if st.button("🔄 Run Descent Step", type="primary"):
         try:
@@ -113,7 +115,7 @@ with left_col:
 
 # Right side content (Visualization and Iteration Details)
 with right_col:
-    st.markdown("### Gradient Descent Visualization")
+    st.markdown("<h3 style='color: lightpink;'>Gradient Descent Visualization</h3>", unsafe_allow_html=True)
     
     # Display iteration details using buttons
     col1, col2, col3 = st.columns(3)
@@ -128,8 +130,8 @@ with right_col:
     
     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}`")
+        st.markdown(f"x Value: `<span style='color: gold;'>{selected_x:.4f}</span>`", unsafe_allow_html=True)
+        st.markdown(f"f(x): `<span style='color: gold;'>{selected_y:.4f}</span>`", unsafe_allow_html=True)
     except IndexError:
         st.warning("No iteration data available. Please run a descent step first.")