Upload app.py

app.py

@@ -52,7 +52,7 @@ def generate_colorbar(colormap, normalize):
     buf.seek(0)
     base64_colorbar = base64.b64encode(buf.read()).decode("utf-8")
     plt.close(fig)  # Close the figure to free up memory
-    return f"<img src='data:image/png;base64,{base64_colorbar}' style='height:250px;'>"
+    return f"<img src='data:image/png;base64,{base64_colorbar}' style='height:250px; margin-top:30px'>"
 
 
 # Helper function to generate HTML for state diagram with directed edges
@@ -166,6 +166,7 @@ def generate_state_diagram_html(P):
     
     # Create the state diagram (2x2 grid)
     html_content = f"""
+        <div style="text-align:center;">State Diagram</div>
         <svg width="250" height="250">
             {arrowhead_marker}
             {edges}
@@ -189,7 +190,8 @@ def generate_state_diagram_html(P):
 def generate_transition_matrix_html(P, prob_threshold=0.5, normalize=None, colormap=None, ticks=None):
     header_size = "30px"  # Set a fixed size for headers
     cell_size = "60px"  # Set a fixed size for cells
-    html_content = f"<table style='border: none; margin-bottom: {header_size} !important;'>"
+    html_content = f"<div style='text-align: center; margin-left: {header_size}; margin-bottom: 10px;'>Transition Matrix</div>"
+    html_content += f"<table style='border: none; margin-bottom: {header_size} !important;'>"
     
     # Add xticks (column labels)
     if ticks:
@@ -244,8 +246,10 @@ def initial_html(P):
     combined_html = f"""
         <div style="display: flex; align-items: center; justify-content: center; gap: 50px;">
             <div>{state_diagram_html}</div>
-            <div>{transition_matrix_html}</div>
-            <div>{colorbar_html}</div
+            <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
+                <div>{transition_matrix_html}</div>
+                <div>{colorbar_html}</div>
+            </div>
         </div>
     """
     return combined_html
@@ -291,8 +295,10 @@ def process_sequence(current_P, P_true_str, sequence_length, lambda_, tau, state
         combined_html = f"""
             <div style="display: flex; align-items: center; justify-content: center; gap: 50px;">
                 <div>{state_diagram_html}</div>
-                <div>{transition_matrix_html}</div>
-                <div>{colorbar_html}</div>
+                <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
+                    <div>{transition_matrix_html}</div>
+                    <div>{colorbar_html}</div>
+                </div>
             </div>
         """
         
@@ -333,7 +339,7 @@ with gr.Blocks() as demo:
         with gr.Column():
             target_p = gr.Textbox(
                 value=matrix_to_string(modes[0]),
-                label="Enter Transition Matrix (Rows separated by newlines, Values by spaces)",
+                label="Enter transition matrix or select a mode.",
                 lines=4,
                 placeholder="Enter the 4x4 matrix here...",
             )