Update app.py

app.py

@@ -4,26 +4,37 @@ 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: gold;'> 🌟 Gradient Descent Visualizer</h1>", unsafe_allow_html=True)
+st.markdown("<h1 style='text-align: center; color: #FFD700;'> 🌟 Gradient Descent Visualizer</h1>", unsafe_allow_html=True)
 
 # Custom CSS for background and button color
 st.markdown("""
     <style>
         body {
-            background-color: black;  /* Set background color to black */
-            color: white;  /* Set text color to white for visibility */
+            background-color: #121212;  /* Dark gray background for modern look */
+            color: white;  /* White text for contrast */
         }
         .stButton>button {
-            background-color: gold;  /* Gold color for buttons */
-            color: black;  /* Button text color */
-            border-radius: 5px;
+            background: linear-gradient(45deg, #FF7F50, #FF4500);  /* Coral to OrangeRed gradient */
+            color: white;  /* White button text */
+            border: none;
+            border-radius: 8px;
             padding: 10px 20px;
             font-size: 16px;
             font-weight: bold;
+            transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.3s ease; /* Smooth hover effects */
         }
         .stButton>button:hover {
-            background-color: darkgoldenrod;  /* Darker gold on hover */
-            color: white;  /* White text color on hover */
+            transform: scale(1.1);  /* Slight zoom effect on hover */
+            box-shadow: 0 0 20px 10px rgba(255, 69, 0, 0.8);  /* Glowing shadow effect */
+            background: linear-gradient(45deg, #FF4500, #FF7F50); /* Reverse gradient */
+            filter: brightness(1.2);  /* Slightly brightens the button */
+        }
+        h1, h2, h3 {
+            color: #00FFFF;  /* Aqua for headings */
+        }
+        .custom-text {
+            color: #FFD700;  /* Gold for highlighted text */
+            font-weight: bold;
         }
     </style>
 """, unsafe_allow_html=True)
@@ -73,14 +84,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("<h3 style='color: lightblue;'>Input Your Function</h3>", unsafe_allow_html=True)
+    st.markdown("<h3 style='color: #7FFF00;'>Input Your Function</h3>", unsafe_allow_html=True)
     function_input = st.text_input(
         "Enter Function:`Ex:'x**2`,`np.sin(x)`", 
         "x**2 + x", 
         key="math_function", 
         on_change=reset_session_state
     )
-    st.markdown("<h3 style='color: lightgreen;'>Set Parameters</h3>", unsafe_allow_html=True)
+    st.markdown("<h3 style='color: #FF69B4;'>Set Parameters</h3>", unsafe_allow_html=True)
     initial_point = st.number_input(
         "Initial Value of x", 
         value=4.0, 
@@ -97,7 +108,7 @@ with left_col:
         key="learning_rate"
     )  # Updates session state directly without reset
     
-    st.markdown("<h3 style='color: lightcoral;'>Controls</h3>", unsafe_allow_html=True)
+    st.markdown("<h3 style='color: #1E90FF;'>Controls</h3>", unsafe_allow_html=True)
     
     if st.button("🔄 Run Descent Step", type="primary"):
         try:
@@ -115,7 +126,7 @@ with left_col:
 
 # Right side content (Visualization and Iteration Details)
 with right_col:
-    st.markdown("<h3 style='color: lightpink;'>Gradient Descent Visualization</h3>", unsafe_allow_html=True)
+    st.markdown("<h3 style='color: #FF6347;'>Gradient Descent Visualization</h3>", unsafe_allow_html=True)
     
     # Display iteration details using buttons
     col1, col2, col3 = st.columns(3)
@@ -130,8 +141,8 @@ with right_col:
     
     try:
         selected_x, selected_y = st.session_state.history[st.session_state.current_index]
-        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)
+        st.markdown(f"x Value: <span style='color: #FFD700;'>{selected_x:.4f}</span>", unsafe_allow_html=True)
+        st.markdown(f"f(x): <span style='color: #FFD700;'>{selected_y:.4f}</span>", unsafe_allow_html=True)
     except IndexError:
         st.warning("No iteration data available. Please run a descent step first.")