Update app.py

app.py

@@ -16,6 +16,8 @@ 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;
     }
@@ -92,7 +94,8 @@ kspace_bg_image = format_kspace_display(kspace_raw)
 
 def get_image_from_plot(fig):
     buf = io.BytesIO()
-    plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0.1, dpi=100)
+    # ลบ bbox_inches='tight' ออกเพื่อไม่ให้รูปภาพเปลี่ยนขนาดไปมา (แก้อาการสั่น)
+    plt.savefig(buf, format='png', dpi=100)
     plt.close(fig)
     buf.seek(0)
     return Image.open(buf)
@@ -104,27 +107,27 @@ def draw_kspace_diagram():
     rect = plt.Rectangle((-1, -1), 2, 2, fill=False, edgecolor='black', lw=3)
     ax.add_patch(rect)
     
-    # วาดแกนลูกศรตัดกันตรงกลาง
-    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.annotate('', xy=(0.9, 0), xytext=(-0.9, 0), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=2))
+    ax.annotate('', xy=(0, 0.9), xytext=(0, -0.9), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=2))
     
-    # ตัวอักษรบอกทิศทาง +kx, -kx, +ky, -ky (ปรับระยะ -kx ให้ห่างเส้นมากขึ้น)
+    # ตัวอักษรบอกทิศทาง +kx, -kx, +ky, -ky (อยู่นอกกรอบ)
     ax.text(1.1, 0, '+kx', fontsize=20, fontweight='bold', va='center')
-    ax.text(-1.2, 0, '-kx', fontsize=20, fontweight='bold', va='center', ha='right')
+    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')
     
-    # Label บอกชื่อแกน (เอาไว้ข้างนอกกรอบแบบในรูป)
+    # 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.annotate('', xy=(0.9, -1.4), xytext=(-0.9, -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')
+    ax.annotate('', xy=(-1.5, 0.9), xytext=(-1.5, -0.9), 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)
-    ax.set_ylim(-1.8, 1.4)
+    ax.set_xlim(-2.0, 1.5)
+    ax.set_ylim(-2.0, 1.5)
     ax.axis('off')
     
     plt.tight_layout()
@@ -323,7 +326,6 @@ with col_main:
         
     st.progress((st.session_state.fill_step + 1) / total_anim_steps)
 
-    # แก้ปัญหาหน้าจอโหลดกระตุก โดยใช้ st.empty() คุมทีละภาพแทนที่จะคุมทั้ง Container
     col_anim1, col_anim2 = st.columns([1, 1])
     with col_anim1:
         img1_ph = st.empty()