Improve Streamlit application dashboard layout

app.py

@@ -1,86 +1,142 @@
+
 import streamlit as st
 import sympy as sp
 
 from equation_parser import parse_equation, EquationValidationError
 
-# Page configuration
+
+# --------------------------------------------------
+# PAGE CONFIGURATION
+# --------------------------------------------------
+
 st.set_page_config(
     page_title="Gradient Explorer",
     page_icon="📈",
     layout="wide"
 )
 
-# Application heading
-st.title("Gradient Explorer")
 
-st.subheader(
-    "Interactive Mathematical Visualisation "
-    "of Gradient and Steepest Ascent"
+# --------------------------------------------------
+# HEADER
+# --------------------------------------------------
+
+st.title("📈 Gradient Explorer")
+
+st.markdown(
+    "### Interactive Mathematical Visualisation of Gradient and Steepest Ascent"
 )
 
 st.write(
-    "Explore mathematical functions, calculate gradients, "
-    "and visualise the direction of steepest ascent."
+    "Explore mathematical functions, evaluate selected points, "
+    "and understand the direction of steepest ascent."
 )
 
 st.divider()
 
-# Equation input
-st.header("1. Enter Mathematical Function")
 
-equation = st.text_input(
-    "Enter your function f(x, y):",
-    value="x**2 + y**2",
-    help="Example: x**2 + y**2"
-)
+# --------------------------------------------------
+# INPUT SECTION
+# --------------------------------------------------
 
-# Coordinate selection
-st.header("2. Select a Point")
+st.header("1. Function and Coordinates")
 
-col1, col2 = st.columns(2)
+with st.container(border=True):
 
-with col1:
-    x_value = st.number_input(
-        "X coordinate",
-        value=1.0,
-        step=0.5
+    equation = st.text_input(
+        "Mathematical function  f(x, y)",
+        value="x**2 + y**2",
+        help="Examples: x**2 + y**2, sin(x) + cos(y), x*y"
     )
 
-with col2:
-    y_value = st.number_input(
-        "Y coordinate",
-        value=2.0,
-        step=0.5
+    col1, col2 = st.columns(2)
+
+    with col1:
+        x_value = st.number_input(
+            "X coordinate",
+            value=1.0,
+            step=0.5
+        )
+
+    with col2:
+        y_value = st.number_input(
+            "Y coordinate",
+            value=2.0,
+            step=0.5
+        )
+
+    calculate = st.button(
+        "Calculate Gradient",
+        type="primary",
+        use_container_width=True
     )
 
-st.divider()
 
-# Calculate button
-if st.button("Calculate Gradient", type="primary"):
+# --------------------------------------------------
+# RESULTS SECTION
+# --------------------------------------------------
+
+if calculate:
+
+    st.divider()
+    st.header("2. Mathematical Results")
 
     try:
-        # Validate and convert the equation into a SymPy expression
         expression = parse_equation(equation)
 
-        # Display successful validation
         st.success("Equation validated successfully!")
 
-        # Display the validated mathematical function
-        st.write("### Validated Function")
-        st.latex(f"f(x,y) = {sp.latex(expression)}")
+        col1, col2 = st.columns(2)
 
-        # Display selected coordinates
-        st.write("### Selected Point")
-        st.write(f"x = {x_value}, y = {y_value}")
+        with col1:
+            st.markdown("#### Validated Function")
+            st.latex(
+                rf"f(x,y) = {sp.latex(expression)}"
+            )
+
+        with col2:
+            st.markdown("#### Evaluation Point")
+            st.latex(
+                rf"P = ({x_value}, {y_value})"
+            )
 
         st.info(
             "Equation validation is complete. "
-            "Gradient calculations will be connected in the next stage."
+            "Gradient calculations will be integrated next."
         )
 
     except EquationValidationError as error:
         st.error(str(error))
 
+
+# --------------------------------------------------
+# VISUALISATION PLACEHOLDER
+# --------------------------------------------------
+
+st.divider()
+st.header("3. Visualisation")
+
+st.caption(
+    "The graphical visualisation engine will be integrated "
+    "in a later development stage."
+)
+
+col1, col2 = st.columns(2)
+
+with col1:
+    with st.container(border=True):
+        st.subheader("Contour Plot")
+        st.caption("Contour lines and gradient directions will appear here.")
+
+with col2:
+    with st.container(border=True):
+        st.subheader("Surface / Heatmap")
+        st.caption("The function surface and heatmap will appear here.")
+
+
+# --------------------------------------------------
+# FOOTER
+# --------------------------------------------------
+
 st.divider()
 
 st.caption(