Update app.py

app.py

@@ -115,20 +115,22 @@ def draw_kspace_diagram():
     
     # ตัวอักษรบอกทิศทาง +kx, -kx, +ky, -ky
     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')
+    # ขยับ -kx ให้อยู่ตรงกลางระหว่างกรอบและเส้นลูกศร Phase axis
+    ax.text(-1.15, 0, '-kx', fontsize=20, fontweight='bold', va='center', ha='center') 
     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')
     
     # Label บอกชื่อแกน (เอาไว้ข้างนอกกรอบแบบในรูป)
-    # Frequency axis ด้านล่าง
-    ax.annotate('', xy=(1, -1.3), xytext=(-1, -1.3), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=4))
-    ax.text(0, -1.4, 'kx (Frequency)', ha='center', va='top', fontsize=16, fontweight='bold')
+    # Frequency axis ด้านล่าง (ขยับเส้นให้ต่ำลง)
+    ax.annotate('', xy=(1, -1.4), xytext=(-1, -1.4), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=4))
+    ax.text(0, -1.5, 'kx (Frequency)', ha='center', va='top', fontsize=16, fontweight='bold')
     
-    # Phase axis ด้านซ้าย
-    ax.annotate('', xy=(-1.3, 1), xytext=(-1.3, -1), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=4))
-    ax.text(-1.4, 0, 'ky (Phase)', ha='right', va='center', rotation=90, fontsize=16, fontweight='bold')
+    # Phase axis ด้านซ้าย (ขยับเส้นหนีออกไปทางซ้ายมากขึ้น เพื่อไม่ให้ทับ -kx)
+    ax.annotate('', xy=(-1.5, 1), xytext=(-1.5, -1), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=4))
+    ax.text(-1.6, 0, 'ky (Phase)', ha='right', va='center', rotation=90, fontsize=16, fontweight='bold')
     
-    ax.set_xlim(-1.8, 1.4)
+    # ขยายขอบเขตการแสดงผลให้ครอบคลุม Label ที่ขยับออกไป
+    ax.set_xlim(-2.0, 1.4)
     ax.set_ylim(-1.8, 1.4)
     ax.axis('off')
     
@@ -334,12 +336,15 @@ with col_main:
         
     st.progress((st.session_state.fill_step + 1) / total_anim_steps)
 
-    # นำ st.empty() ออก และแสดงภาพโดยตรงเพื่อลดการเคลียร์หน้าจอที่จะทำให้เว็บกระตุก
     col_anim1, col_anim2 = st.columns([1, 1])
     with col_anim1:
-        st.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps))
+        img1_ph = st.empty()
+        # นำ use_container_width=True ออกเพื่อล็อกขนาดภาพไม่ให้สั่น
+        img1_ph.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps))
     with col_anim2:
-        st.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps))
+        img2_ph = st.empty()
+        # นำ use_container_width=True ออกเพื่อล็อกขนาดภาพไม่ให้สั่น
+        img2_ph.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps))
 
     st.markdown("""
     ---