Upload app.py

app.py

@@ -244,7 +244,7 @@ def initial_html(P):
     )
     colorbar_html = generate_colorbar(colormap, normalize) 
     combined_html = f"""
-        <div style="display: flex; align-items: center; justify-content: center; gap: 50px;">
+        <div class="output_flexbox">
             <div>{state_diagram_html}</div>
             <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
                 <div>{transition_matrix_html}</div>
@@ -293,7 +293,7 @@ def process_sequence(current_P, P_true_str, sequence_length, lambda_, tau, state
         
         # Combine matrix and colorbar HTML side-by-side in a flex container
         combined_html = f"""
-            <div style="display: flex; align-items: center; justify-content: center; gap: 50px;">
+            <div class="output_flexbox">
                 <div>{state_diagram_html}</div>
                 <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
                     <div>{transition_matrix_html}</div>
@@ -307,7 +307,22 @@ def process_sequence(current_P, P_true_str, sequence_length, lambda_, tau, state
 
         time.sleep(0.005)  # Pause before the next state
 
-with gr.Blocks() as demo:
+css = """
+    .output_flexbox{
+        display: flex;
+        align-items: center;
+        justify-content:center;
+        gap: 50px;
+        flex-direction: row;
+    }
+    @media screen and (max-width: 800px){
+        .output_flexbox{
+            flex-direction: column;
+        }
+    }
+"""
+
+with gr.Blocks(css=css) as demo:
 
     # initial probability distribution is a uniform distribution, saved in a State object
     P0 = 1/num_states * np.ones(shape=np.repeat(num_states, 2))