Update app.py

app.py

@@ -44,6 +44,76 @@ if "learning_rate" not in st.session_state:
 # Full-width layout
 st.set_page_config(layout="wide")
 
+# CSS Styles for Borders, Font, Reduced Padding, and Custom Border Color
+st.markdown(
+    """
+    <style>
+    * {
+        font-family: Cambria, Arial, sans-serif !important;
+    }
+    h1, h2, h3, h4, h5 {
+        text-align: center;
+        margin-top: 0;
+    }
+    input, .stButton button, .stDownloadButton button {
+        border: 2px solid #ea445a;
+        border-radius: 5px;
+        padding: 10px;
+    }
+    .stInfo, .stSuccess {
+        border: 2px solid #ea445a;
+        border-radius: 5px;
+        padding: 10px;
+    }
+    .stButton {
+        margin-top: 10px;
+    }
+    .css-1d391kg {
+        padding-top: 0.5rem;
+    }
+    .stPlotlyChart {
+        display: block;
+        margin: 0 auto;
+    }
+    .css-1lcbvhc {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .stTextInput input, .stNumberInput input {
+        border: 2px solid #001A6E;
+        border-radius: 5px;
+        padding: 10px;
+    }
+    .tooltip {
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+    }
+    .tooltip .tooltiptext {
+        visibility: hidden;
+        opacity: 0;
+        width: 300px;
+        background-color: #001A6E;
+        color: #fff;
+        text-align: center;
+        border-radius: 5px;
+        padding: 5px;
+        position: absolute;
+        z-index: 1;
+        bottom: 125%;
+        left: 50%;
+        margin-left: -150px;
+        transition: opacity 0.3s;
+    }
+    .tooltip:hover .tooltiptext {
+        visibility: visible;
+        opacity: 1;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
 # Page Layout
 st.title("🌟 Gradient Descent Interactive Tool 🌟")
 
@@ -53,8 +123,22 @@ col1, col2 = st.columns([1, 2])
 with col1:
     st.subheader("🔧 Define Your Function")
 
+    st.markdown(
+        """
+        <div class="tooltip">
+            <label for="func_input">Enter a function of 'x':</label>
+            <span class="tooltiptext">
+                **How to input your function:**
+                - Use `x**n` for powers of x
+                - Use `np.sin(x)`, `np.log(x)`, or `np.exp(x)` for trigonometric, logarithmic, or exponential functions.
+            </span>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+    
     func_input = st.text_input(
-        "Enter a function of 'x':", 
+        "👇", 
         key="func_input", 
         on_change=reset_state
     )