Update app.py

app.py

@@ -14,11 +14,14 @@ st.set_page_config(layout="wide", page_title="K-Space to MRI")
 
 st.markdown("""
     <style>
-    /* CSS แก้ปัญหาการสั่นของหน้าจอ (บังคับให้มี Scrollbar ตลอดเวลา หน้าเว็บจะได้ไม่หดขยาย) */
-    html, body {
-        overflow-y: scroll !important;
+    /* CSS แก้ปัญหาการสั่นของหน้าจอแบบเด็ดขาด */
+    .stApp { 
+        overflow-y: scroll !important; 
+        transition: none !important; 
+    }
+    .main .block-container {
+        min-height: 101vh !important;
     }
-    .stApp { transition: none !important; }
     
     html, body, [class*="st-"] {
         font-size: 18px;
@@ -87,7 +90,6 @@ def format_kspace_display(k_data):
     c = 255.0 / np.log(1 + max_val)
     log_img = c * np.log(1 + k_mag)
     
-    # เสริม Gamma correction ดึงความสว่างให้เห็นมิติรอยตัดชัดเจน
     log_norm = (log_img - np.min(log_img)) / (np.max(log_img) - np.min(log_img) + 1e-8)
     log_boosted = np.power(log_norm, 0.3)
     return log_boosted
@@ -96,7 +98,7 @@ kspace_bg_image = format_kspace_display(kspace_raw)
 
 def get_image_from_plot(fig):
     buf = io.BytesIO()
-    # ลบ bbox_inches='tight' ออกเพื่อไม่ให้รูปภาพเปลี่ยนขนาดพิกเซลไปมา (แก้อาการสั่น)
+    # เซฟภาพด้วยขนาดพิกเซลตายตัว ห้ามใช้ bbox_inches='tight' เด็ดขาดเพื่อป้องกันเว็บสั่น
     plt.savefig(buf, format='png', dpi=100)
     plt.close(fig)
     buf.seek(0)
@@ -109,32 +111,32 @@ 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))
     
     # ตัวอักษรบอกทิศทาง +kx, -kx, +ky, -ky
     ax.text(1.1, 0, '+kx', fontsize=20, fontweight='bold', va='center')
-    # ขยับ -kx ให้อยู่ตรงกลางระหว่างกรอบและเส้นลูกศร Phase axis
-    ax.text(-1.15, 0, '-kx', fontsize=20, fontweight='bold', va='center', ha='center') 
+    
+    # ขยับ -kx ออกไปทางซ้ายให้มีช่องว่าง (ha='right' ทำให้ขอบขวาของตัวหนังสืออยู่ที่พิกัด -1.1 ซึ่งไม่ทับกรอบ)
+    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 บอกชื่อแกน (เอาไว้ข้างนอกกรอบแบบในรูป)
-    # Frequency axis ด้านล่าง (ขยับเส้นให้ต่ำลง)
+    # Label บอกชื่อแกน (เอาไว้ข้างนอกกรอบ)
     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 ด้านซ้าย (ขยับเส้นหนีออกไปทางซ้ายมากขึ้น เพื่อไม่ให้ทับ -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')
     
-    # ขยายขอบเขตการแสดงผลให้ครอบคลุม Label ที่ขยับออกไป
-    ax.set_xlim(-2.0, 1.4)
-    ax.set_ylim(-1.8, 1.4)
+    ax.set_xlim(-2.0, 1.5)
+    ax.set_ylim(-1.8, 1.5)
     ax.axis('off')
     
-    plt.tight_layout()
+    # ล็อกระยะขอบให้ตายตัวป้องกันการกระตุก
+    fig.subplots_adjust(left=0.1, right=0.9, top=0.9, bottom=0.1)
     return get_image_from_plot(fig)
 
 def draw_kspace_point(kx, ky, bg_image):
@@ -147,6 +149,7 @@ def draw_kspace_point(kx, ky, bg_image):
     ax.set_xlim(-112, 112)
     ax.set_ylim(-112, 112)
     ax.axis('off')
+    fig.subplots_adjust(left=0, right=1, top=1, bottom=0)
     return get_image_from_plot(fig)
 
 def draw_wave(kx, ky):
@@ -159,6 +162,7 @@ def draw_wave(kx, ky):
     wave = np.cos(2 * np.pi * (freq_x * X + freq_y * Y))
     ax.imshow(wave, cmap='gray', extent=[-112, 112, -112, 112])
     ax.axis('off')
+    fig.subplots_adjust(left=0, right=1, top=1, bottom=0)
     return get_image_from_plot(fig)
 
 def apply_filter(k_data, mode, radius):
@@ -177,19 +181,19 @@ def draw_filtered_kspace(filtered_k):
     fig, ax = plt.subplots(figsize=(4, 4))
     ax.imshow(format_kspace_display(filtered_k), cmap='gray', vmin=0, vmax=1)
     ax.axis('off')
+    fig.subplots_adjust(left=0, right=1, top=1, bottom=0)
     return get_image_from_plot(fig)
 
-# ฟังก์ชัน MRI แก้ให้ภาพสว่างใส โดยตัด Noise พิกเซลทิ้ง
 def draw_mri(mri_result):
     fig, ax = plt.subplots(figsize=(4, 4))
     if np.max(mri_result) > 0:
-        # ตัดพิกเซลที่สว่างหรือมืดเกินไป (Noise) ออกไป 1% เพื่อให้เนื้อสมองสว่างชัดเจน
-        vmin, vmax = np.percentile(mri_result, (1, 99))
+        vmin, vmax = np.percentile(mri_result, (1, 99.5))
     else:
         vmin, vmax = 0, 1
     
     ax.imshow(np.flipud(mri_result), cmap='gray', vmin=vmin, vmax=vmax)
     ax.axis('off')
+    fig.subplots_adjust(left=0, right=1, top=1, bottom=0)
     return get_image_from_plot(fig)
 
 def draw_pulse_sequence(current_step, total_steps):
@@ -237,7 +241,8 @@ def draw_pulse_sequence(current_step, total_steps):
     ax.text(0, 0.5, 'Signal\n(Echo)', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.get_yaxis_transform())
     ax.axis('off')
     
-    plt.tight_layout()
+    # ล็อกระยะกรอบตายตัวเพื่อหยุดอาการสั่น
+    fig.subplots_adjust(left=0.2, right=0.95, top=0.95, bottom=0.05, hspace=0.2)
     return get_image_from_plot(fig)
 
 def draw_kspace_filling(current_step, total_steps):
@@ -266,6 +271,8 @@ def draw_kspace_filling(current_step, total_steps):
     fig.patch.set_facecolor('black')
     
     ax.axis('off')
+    # ล็อกระยะกรอบตายตัวเพื่อหยุดอาการสั่น
+    fig.subplots_adjust(left=0.05, right=0.95, top=0.9, bottom=0.05)
     return get_image_from_plot(fig)
 
 # ==========================================================
@@ -336,15 +343,12 @@ with col_main:
         
     st.progress((st.session_state.fill_step + 1) / total_anim_steps)
 
+    # วางภาพแสดงผลโดยตรง ใช้ use_container_width เพื่อให้รูปขยายเต็มคอลัมน์โดยไม่กระตุก
     col_anim1, col_anim2 = st.columns([1, 1])
     with col_anim1:
-        img1_ph = st.empty()
-        # นำ use_container_width=True ออกเพื่อล็อกขนาดภาพไม่ให้สั่น
-        img1_ph.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps))
+        st.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps), use_container_width=True)
     with col_anim2:
-        img2_ph = st.empty()
-        # นำ use_container_width=True ออกเพื่อล็อกขนาดภาพไม่ให้สั่น
-        img2_ph.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps))
+        st.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps), use_container_width=True)
 
     st.markdown("""
     ---