Update app.py

app.py

@@ -16,8 +16,6 @@ st.markdown("""
     <style>
     /* CSS แก้ปัญหาการสั่นของหน้าจอ */
     .stApp { transition: none !important; }
-    /* กำหนดความสูงตายตัวให้กับ container กราฟ */
-    .fixed-height-chart { min-height: 500px; display: flex; align-items: center; justify-content: center; }
     html, body, [class*="st-"] {
         font-size: 18px;
     }
@@ -110,9 +108,9 @@ def draw_kspace_diagram():
     ax.annotate('', xy=(0.95, 0), xytext=(-0.95, 0), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=2))
     ax.annotate('', xy=(0, 0.95), xytext=(0, -0.95), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=2))
     
-    # ตัวอักษรบอกทิศทาง +kx, -kx, +ky, -ky
+    # ตัวอักษรบอกทิศทาง +kx, -kx, +ky, -ky (ปรับระยะ -kx ให้ห่างเส้นมากขึ้น)
     ax.text(1.1, 0, '+kx', fontsize=20, fontweight='bold', va='center')
-    ax.text(-1.1, 0, '-kx', fontsize=20, fontweight='bold', va='center', ha='right')
+    ax.text(-1.2, 0, '-kx', fontsize=20, fontweight='bold', va='center', ha='right')
     ax.text(0, 1.1, '+ky', fontsize=20, fontweight='bold', ha='center')
     ax.text(0, -1.1, '-ky', fontsize=20, fontweight='bold', ha='center', va='top')
     
@@ -325,16 +323,14 @@ with col_main:
         
     st.progress((st.session_state.fill_step + 1) / total_anim_steps)
 
-    # ใช้ตีกรอบ Container เพื่อกันการกระโดดสั่นของ Layout
-    st.markdown('<div class="fixed-height-chart">', unsafe_allow_html=True)
-    anim_placeholder = st.empty()
-    with anim_placeholder.container():
-        col_anim1, col_anim2 = st.columns([1, 1])
-        with col_anim1:
-            st.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps), use_container_width=True)
-        with col_anim2:
-            st.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps), use_container_width=True)
-    st.markdown('</div>', unsafe_allow_html=True)
+    # แก้ปัญหาหน้าจอโหลดกระตุก โดยใช้ st.empty() คุมทีละภาพแทนที่จะคุมทั้ง Container
+    col_anim1, col_anim2 = st.columns([1, 1])
+    with col_anim1:
+        img1_ph = st.empty()
+        img1_ph.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps), use_container_width=True)
+    with col_anim2:
+        img2_ph = st.empty()
+        img2_ph.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps), use_container_width=True)
 
     st.markdown("""
     ---