Fix latex formatting

app.py

@@ -13,6 +13,7 @@ glob_c = 7.5
 
 n_x, n_t = 10, 10
 
+
 def clear_npz():
     current_directory = os.getcwd()  # Get the current working directory
     for filename in os.listdir(current_directory):
@@ -93,7 +94,6 @@ def plot_heat_equation(m, approx_type):
 
     # Layout for the Plotly plot without controls
     layout = go.Layout(
-        title=f"Heat Equation Approximation | Kernel = {approx_type} | m = {m}",
         scene=dict(
             camera=dict(
                 eye=dict(x=0, y=-2, z=0),  # Front view
@@ -105,28 +105,6 @@ def plot_heat_equation(m, approx_type):
         margin=dict(l=0, r=0, t=0, b=0),  # Reduce margins
     )
 
-    # Config to remove modebar buttons except the save image button
-    config = {
-        "modeBarButtonsToRemove": [
-            "pan",
-            "resetCameraLastSave",
-            "hoverClosest3d",
-            "hoverCompareCartesian",
-            "zoomIn",
-            "zoomOut",
-            "select2d",
-            "lasso2d",
-            "zoomIn2d",
-            "zoomOut2d",
-            "sendDataToCloud",
-            "zoom3d",
-            "orbitRotation",
-            "tableRotation",
-        ],
-        "displayModeBar": True,  # Keep the modebar visible
-        "displaylogo": False,  # Hide the Plotly logo
-    }
-
     # Create the figure
     fig = go.Figure(data=traces, layout=layout)
 
@@ -148,7 +126,8 @@ def plot_heat_equation(m, approx_type):
             "tableRotation",
             "toImage",
             "resetCameraDefault3d",
-        ]
+        ],
+        legend=dict(yanchor="bottom", y=0.01, xanchor="left", x=0.01),
     )
 
     return fig
@@ -198,7 +177,6 @@ def plot_errors(m, approx_type):
 
     # Layout for the Plotly plot without controls
     layout = go.Layout(
-        title=f"Heat Equation Approximation Error | Kernel = {approx_type} | m = {m}",
         scene=dict(
             camera=dict(
                 eye=dict(x=0, y=-2, z=0),  # Front view
@@ -210,28 +188,6 @@ def plot_errors(m, approx_type):
         margin=dict(l=0, r=0, t=0, b=0),  # Reduce margins
     )
 
-    # Config to remove modebar buttons except the save image button
-    config = {
-        "modeBarButtonsToRemove": [
-            "pan",
-            "resetCameraLastSave",
-            "hoverClosest3d",
-            "hoverCompareCartesian",
-            "zoomIn",
-            "zoomOut",
-            "select2d",
-            "lasso2d",
-            "zoomIn2d",
-            "zoomOut2d",
-            "sendDataToCloud",
-            "zoom3d",
-            "orbitRotation",
-            "tableRotation",
-        ],
-        "displayModeBar": True,  # Keep the modebar visible
-        "displaylogo": False,  # Hide the Plotly logo
-    }
-
     # Create the figure
     fig = go.Figure(data=traces, layout=layout)
 
@@ -253,7 +209,8 @@ def plot_errors(m, approx_type):
             "tableRotation",
             "toImage",
             "resetCameraDefault3d",
-        ]
+        ],
+        legend=dict(yanchor="bottom", y=0.01, xanchor="left", x=0.01),
     )
 
     return fig
@@ -340,7 +297,9 @@ def train_coefficients(m, kernel):
     Phi = design_matrix(a_train, theta, kernel)
     alpha = learn_coefficients(Phi, u_train)
     # Validate and animate results
-    u_real = np.array([complex_heat_eq_solution(x, t_i, glob_k, glob_a, glob_b, glob_c) for t_i in t])
+    u_real = np.array(
+        [complex_heat_eq_solution(x, t_i, glob_k, glob_a, glob_b, glob_c) for t_i in t]
+    )
     a_test = np.c_[np.meshgrid(x, t)[0].ravel(), np.meshgrid(x, t)[1].ravel()]
     u_approx = approximate_solution(a_test, alpha, theta, kernel).reshape(n_t, n_x)
 
@@ -415,7 +374,8 @@ def plot_function(k, a, b, c):
             "tableRotation",
             "toImage",
             "resetCameraDefault3d",
-        ]
+        ],
+        legend=dict(yanchor="bottom", y=0.01, xanchor="left", x=0.01),
     )
 
     return fig
@@ -434,36 +394,46 @@ def plot_all(m, kernel):
         gr.update(visible=True, value=error_fig),
     )
 
+
 def change_quality(quality):
     global n_x, n_t
-    
+
     if quality == "Low":
         n_x, n_t = 10, 10
     elif quality == "Mid":
         n_x, n_t = 20, 20
     elif quality == "High":
         n_x, n_t = 40, 40
-        
+
 
 # Gradio interface
 def create_gradio_ui():
     global glob_k, glob_a, glob_b, glob_c
 
+    markdown_content = r"""
+    ## Function:
+    $$
+    \begin{alignat*}{5}
+    u(x, t)
+    \coloneqq &\exp(-\textcolor{magenta}{k}(&\textcolor{cyan}{a}&\pi)^2t)\sin(&\textcolor{cyan}{a}&\pi x) \\
+            + &\exp(-\textcolor{magenta}{k}(&\textcolor{lime}{b}&\pi)^2t)\sin(&\textcolor{lime}{b}&\pi x) \\
+            + &\exp(-\textcolor{magenta}{k}(&\textcolor{orange}{c}&\pi)^2t)\sin(&\textcolor{orange}{c}&\pi x)
+    \end{alignat*}
+    $$
+
+    Adjust the values for <span style='color: magenta;'>k</span>, <span style='color: cyan;'>a</span>, <span style='color: lime;'>b</span> and <span style='color: orange;'>c</span> with the sliders below.
+    """
+
     # Get the initial available files
     with gr.Blocks() as demo:
         gr.Markdown("# Learn the Coefficients for the Heat Equation using the RFM")
 
         # Function parameter inputs
-        gr.Markdown(
-            """
-        ## Function: $$u(x, t)\\coloneqq\\exp(-\\textcolor{magenta}{k}(\\textcolor{cyan}{a}\\pi)^2t)\\sin(\\textcolor{cyan}{a}\\pi x)+0.5\\exp(-\\textcolor{magenta}{k}(\\textcolor{lime}{b}\\pi)^2t)\\sin(\\textcolor{lime}{b}\\pi x)+0.25\\exp(-\\textcolor{magenta}{k}(\\textcolor{orange}{c}\\pi)^2t)\\sin(\\textcolor{orange}{c}\\pi x)$$
-        
-        Adjust the values for <span style='color: magenta;'>k</span>, <span style='color: cyan;'>a</span>, <span style='color: lime;'>b</span> and <span style='color: orange;'>c</span> with the sliders below.
-        """
-        )
+        gr.Markdown(markdown_content)
+
 
         with gr.Row():
-            with gr.Column():
+            with gr.Column(min_width=500):
                 k_slider = gr.Slider(
                     minimum=0.0001, maximum=0.1, step=0.0001, value=glob_k, label="k"
                 )
@@ -476,8 +446,8 @@ def create_gradio_ui():
                 c_slider = gr.Slider(
                     minimum=-10, maximum=10, step=0.1, value=glob_c, label="c"
                 )
-
-            plot_output = gr.Plot()
+            with gr.Column(min_width=500):
+                plot_output = gr.Plot()
 
         k_slider.change(
             fn=plot_function,
@@ -506,7 +476,9 @@ def create_gradio_ui():
                 quality_dropdown = gr.Dropdown(
                     label="Choose Quality", choices=["Low", "Mid", "High"], value="Low"
                 )
-                quality_dropdown.change(fn=change_quality, inputs=quality_dropdown, outputs=None)
+                quality_dropdown.change(
+                    fn=change_quality, inputs=quality_dropdown, outputs=None
+                )
                 kernel_dropdown = gr.Dropdown(
                     label="Choose Kernel", choices=["SINE", "GFF"], value="SINE"
                 )
@@ -530,9 +502,9 @@ def create_gradio_ui():
                 approx_button = gr.Button("Plot Approximation")
 
         with gr.Row():
-            with gr.Column(scale=1):
+            with gr.Column(min_width=500):
                 approx_plot = gr.Plot(visible=False)
-            with gr.Column(scale=1):
+            with gr.Column(min_width=500):
                 error_plot = gr.Plot(visible=False)
 
         approx_button.click(