Update app.py

app.py

@@ -14,8 +14,12 @@ st.set_page_config(layout="wide", page_title="K-Space to MRI")
 
 st.markdown("""
     <style>
-    /* CSS แก้ปัญหาการสั่นของหน้าจอ */
+    /* CSS แก้ปัญหาการสั่นของหน้าจอ (บังคับให้มี Scrollbar ตลอดเวลา หน้าเว็บจะได้ไม่หดขยาย) */
+    html, body {
+        overflow-y: scroll !important;
+    }
     .stApp { transition: none !important; }
+    
     html, body, [class*="st-"] {
         font-size: 18px;
     }
@@ -92,7 +96,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)
@@ -105,27 +109,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.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))
+    # วาดแกนลูกศรตัดกันตรงกลาง
+    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
     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=(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')
+    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')
     
     # Phase axis ด้านซ้าย
-    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.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(-2.0, 1.5)
-    ax.set_ylim(-2.0, 1.5)
+    ax.set_xlim(-1.8, 1.4)
+    ax.set_ylim(-1.8, 1.4)
     ax.axis('off')
     
     plt.tight_layout()
@@ -173,13 +177,16 @@ def draw_filtered_kspace(filtered_k):
     ax.axis('off')
     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:
-        vmax = np.percentile(mri_result, 99.5) # ตัด noise สว่างจ้าออก เพื่อให้เนื้อสมองสว่างขึ้น
+        # ตัดพิกเซลที่สว่างหรือมืดเกินไป (Noise) ออกไป 1% เพื่อให้เนื้อสมองสว่างชัดเจน
+        vmin, vmax = np.percentile(mri_result, (1, 99))
     else:
-        vmax = 1
-    ax.imshow(np.flipud(mri_result), cmap='gray', vmin=0, vmax=vmax)
+        vmin, vmax = 0, 1
+    
+    ax.imshow(np.flipud(mri_result), cmap='gray', vmin=vmin, vmax=vmax)
     ax.axis('off')
     return get_image_from_plot(fig)
 
@@ -327,15 +334,12 @@ 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:
-        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))
     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))
 
     st.markdown("""
     ---