Update app.py

app.py

@@ -14,6 +14,10 @@ st.set_page_config(layout="wide", page_title="K-Space to MRI")
 
 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;
     }
@@ -95,30 +99,34 @@ def get_image_from_plot(fig):
     buf.seek(0)
     return Image.open(buf)
 
-# แก้ไขสร้างภาพองค์ประกอบแผนผังแกนตามตัวอย่าง (ไม่มีลายคลื่น มีกรอบนอกและรายละเอียดแกนครบ)
 def draw_kspace_diagram():
     fig, ax = plt.subplots(figsize=(6, 6))
     
-    # วาดกรอบสี่เหลี่ยมด้านนอกพิกัดหลัก
-    rect = plt.Rectangle((-1, -1), 2, 2, fill=False, edgecolor='black', lw=2.5)
+    # วาดกรอบนอก
+    rect = plt.Rectangle((-1, -1), 2, 2, fill=False, edgecolor='black', lw=3)
     ax.add_patch(rect)
     
-    # วาดลูกศรตัดกันตรงกลางพิกัดกล่อง (จุดศูนย์กลางร่วม)
-    ax.annotate('', xy=(0.8, 0), xytext=(-0.8, 0), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=2.5))
-    ax.annotate('', xy=(0, 0.8), xytext=(0, -0.8), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=2.5))
+    # วาดแกนลูกศรตัดกันตรงกลาง
+    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))
     
-    # ข้อความกำกับหัวลูกศรแต่ละทิศทางตามรูปต้นฉบับ
-    ax.text(0.85, 0, '+kx', ha='left', va='center', fontsize=20, fontweight='bold')
-    ax.text(-0.85, 0, '-kx', ha='right', va='center', fontsize=20, fontweight='bold')
-    ax.text(0, 0.85, '+ky', ha='center', va='bottom', fontsize=20, fontweight='bold')
-    ax.text(0, -0.85, '-ky', ha='center', va='top', fontsize=20, fontweight='bold')
+    # ตัวอักษรบอกทิศทาง +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')
+    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')
     
-    # ข้อความคำอธิบายแกนแนวดิ่งและแนวนอน
-    ax.text(0, 0.73, '  Phase (vertical axis)', ha='left', va='center', fontsize=12)
-    ax.text(0.3, -0.12, 'Frequency (horizontal axis)', ha='center', va='top', fontsize=12)
+    # 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')
     
-    ax.set_xlim(-1.3, 1.3)
-    ax.set_ylim(-1.3, 1.3)
+    # 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')
+    
+    ax.set_xlim(-1.8, 1.4)
+    ax.set_ylim(-1.8, 1.4)
     ax.axis('off')
     
     plt.tight_layout()
@@ -317,6 +325,8 @@ 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])
@@ -324,6 +334,7 @@ with col_main:
             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.markdown("""
     ---
@@ -347,7 +358,7 @@ with col_main:
        - **มุมของจุด (ทิศทาง):** ตำแหน่งของจุดเมื่อเทียบกับจุดศูนย์กลาง จะเป็นตัวบอกว่าแผ่นลวดลายคลื่นนี้จะ **"เอี���ง"** ไปในทิศทางไหน
        - **จุดศูนย์กลางเป๊ะ (Origin):** จะเป็นคลื่นที่ไม่มีความถี่ ค่าความถี่ของคลื่นเป็นศูนย์ ดังนั้นตรงกลางจะไม่เห็นลักษณะรูปคลื่น
     2. **ความสว่างของจุด (Amplitude / Magnitude) บอก "ปริมาณ/น้ำหนัก (Weight)"**
-       - ความสว่าง of จุดไม่ได้แปลว่าภาพ MRI ตรงนั้นจะสว่าง แต่มันบอกถึง **"ปริมาณ/น้ำหนัก (Weight)"**
+       - ความสว่างของจุดไม่ได้แปลว่าภาพ MRI ตรงนั้นจะสว่าง แต่มันบอกถึง **"ปริมาณ/น้ำหนัก (Weight)"**
        - **จุดสว่างมาก:** ภาพ MRI มีแผ่นลวดลายชนิดนี้เป็นส่วนประกอบอยู่ **เยอะมาก (มีความสำคัญต่อภาพสูง)**
        - **จุดมืดหรือจาง:** ภาพ MRI แทบจะไม่มีลวดลายชนิดนี้ประกอบอยู่เลย
     """)