Update app.py

app.py

@@ -57,7 +57,6 @@ st.markdown("""
         background-color: #1E88E5;
         color: white;
     }
-    /* Info box — force dark text in both light and dark mode */
     .kspace-info-box {
         text-align: center;
         background-color: #dbeafe !important;
@@ -115,12 +114,9 @@ def get_image_from_plot(fig):
     buf = io.BytesIO()
     plt.savefig(buf, format='png', dpi=100)
     plt.close(fig)
-    return buf.getvalue()  # Return bytes — reliably cacheable by st.cache_data
+    return buf.getvalue()
 
 def st_image(img_bytes, caption=None):
-    """Display image as inline base64 data URI.
-    Prevents layout jiggle: browser renders it instantly with no HTTP round-trip,
-    so no 0-height placeholder → image-pop-in → scrollbar-flicker cycle."""
     b64 = base64.b64encode(img_bytes).decode('utf-8')
     cap_html = (f'<p style="text-align:center;font-size:14px;color:gray;margin-top:4px">' 
                 + caption + '</p>') if caption else ''
@@ -135,27 +131,19 @@ def st_image(img_bytes, caption=None):
 def draw_kspace_diagram():
     fig, ax = plt.subplots(figsize=(6, 6))
     
-    # วาดกรอบนอก
     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 ออกไปทางซ้ายให้มีช่องว่าง (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 บอกชื่อแกน (เอาไว้ข้างนอกกรอบ)
     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')
-    
     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')
     
@@ -163,7 +151,6 @@ def draw_kspace_diagram():
     ax.set_ylim(-1.8, 1.5)
     ax.axis('off')
     
-    # ล็อกระยะขอบให้ตายตัวป้องกันการกระตุก
     fig.subplots_adjust(left=0.1, right=0.9, top=0.9, bottom=0.1)
     return get_image_from_plot(fig)
 
@@ -231,59 +218,94 @@ def draw_mri(mri_result):
 
 @st.cache_data
 def draw_pulse_sequence(current_step, total_steps):
-    fig, axes = plt.subplots(4, 1, figsize=(5, 6), sharex=True, gridspec_kw={'height_ratios': [1, 1.5, 1, 1]})
-    t = np.linspace(0, 10, 1000)
+    # ปรับเพิ่มเป็น 5 กราฟเพื่อแทรก G_SS เข้าไปให้เหมือนรูปอ้างอิง
+    fig, axes = plt.subplots(5, 1, figsize=(6, 6.5), sharex=True, gridspec_kw={'height_ratios': [1.5, 1, 1, 1, 1]})
+    t = np.linspace(0, 11, 1000)
     
-    # 1. RF (แก้ให้คลื่นแคบลงและเว้นช่องไฟตามทฤษฎี)
+    t_90 = 1.5
+    t_180 = 5.0
+    t_echo = 8.5
+    
+    # 1. Apply RF
     ax = axes[0]
-    rf90 = np.sinc((t - 1.5)*4) * (t > 1.0) * (t < 2.0)
-    rf180 = np.sinc((t - 5.0)*4) * (t > 4.5) * (t < 5.5) * 1.5
+    rf90 = np.sinc((t - t_90)*4) * (t > t_90 - 0.5) * (t < t_90 + 0.5)
+    rf180 = np.sinc((t - t_180)*4) * (t > t_180 - 0.5) * (t < t_180 + 0.5) * 1.5
     ax.plot(t, rf90 + rf180, color='black', lw=2)
-    ax.text(1.5, 1.2, '90°', ha='center', fontsize=12, fontweight='bold')
-    ax.text(5.0, 1.7, '180°', ha='center', fontsize=12, fontweight='bold')
-    # ใช้ transAxes เลื่อนพิกัดตัวหนังสือ ป้องกันการโดนตัดขอบซ้าย
-    ax.text(-0.05, 0.2, 'RF', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
+    ax.text(t_90, 1.2, '90°', ha='right', fontsize=12, fontweight='bold')
+    ax.text(t_180, 1.7, '180°', ha='left', fontsize=12, fontweight='bold')
+    ax.text(-0.05, 0.2, 'Apply RF', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
     ax.axis('off')
     
-    # 2. Gy 
+    # เพิ่มเส้นประบอกเวลา (Dashed Lines)
+    for ax_i in axes:
+        ax_i.axvline(t_90, color='black', linestyle='--', alpha=0.5)
+        ax_i.axvline(t_180, color='black', linestyle='--', alpha=0.5)
+        ax_i.axvline(t_echo, color='black', linestyle='--', alpha=0.5)
+        
+    # เพิ่มตัวอักษรบอกช่วงเวลา TE และ TE/2
+    ax.annotate('', xy=(t_90, 2.2), xytext=(t_180, 2.2), arrowprops=dict(arrowstyle='<->', color='black'))
+    ax.text((t_90+t_180)/2, 2.3, 'TE/2', ha='center', va='bottom', fontsize=12, fontweight='bold')
+    ax.annotate('', xy=(t_90, 2.8), xytext=(t_echo, 2.8), arrowprops=dict(arrowstyle='<->', color='black'))
+    ax.text((t_90+t_echo)/2, 2.9, 'TE', ha='center', va='bottom', fontsize=12, fontweight='bold')
+    ax.set_ylim(-0.5, 3.5)
+    
+    # 2. G_SS (Slice Selection - สีเขียวแบบในรูป)
     ax = axes[1]
-    gy_vals = np.linspace(1, -1, total_steps)
+    gss = np.zeros_like(t)
+    gss[(t > t_90 - 0.5) & (t < t_90 + 0.5)] = 0.8
+    gss[(t > t_90 + 0.5) & (t < t_90 + 1.0)] = -0.4
+    gss[(t > t_180 - 0.5) & (t < t_180 + 0.5)] = 0.8
+    ax.plot(t, gss, color='#7cb342', lw=2)
+    ax.fill_between(t, gss, 0, alpha=0.2, color='#7cb342')
+    ax.text(-0.05, 0, '$G_{SS}$', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
+    ax.set_ylim(-1.2, 1.2)
+    ax.axis('off')
+
+    # 3. G_PE (Phase Encoding - สีฟ้าแบบในรูป ทำเป็นกล่องเรียงเส้น)
+    ax = axes[2]
+    gy_vals = np.linspace(0.8, -0.8, total_steps)
+    t_pe_start, t_pe_end = 2.8, 3.8
     for i, gy_amp in enumerate(gy_vals):
         gy = np.zeros_like(t)
-        gy[(t > 2.5) & (t < 3.5)] = gy_amp
+        gy[(t > t_pe_start) & (t < t_pe_end)] = gy_amp
         if i == current_step:
-            ax.plot(t, gy, color='red', lw=3, zorder=10)
+            ax.plot(t, gy, color='#2c7bb6', lw=3, zorder=10)
         else:
-            ax.plot(t, gy, color='black', lw=1, alpha=0.3)
-    ax.text(-0.05, 0, 'Gy', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
+            ax.plot(t, gy, color='#2c7bb6', lw=1, alpha=0.3)
+    ax.plot([t_pe_start, t_pe_end, t_pe_end, t_pe_start, t_pe_start], [0.8, 0.8, -0.8, -0.8, 0.8], color='#2c7bb6', lw=1.5)
+    ax.text(-0.05, 0, '$G_{PE}$', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
+    ax.set_ylim(-1.2, 1.2)
     ax.axis('off')
 
-    # 3. Gx (แก้เป็นขาขึ้น เครื่องหมายบวก + ตามหลัก Spin Echo)
-    ax = axes[2]
+    # 4. G_FE (Frequency Encoding - สีแดง)
+    ax = axes[3]
     gx = np.zeros_like(t)
-    gx[(t > 2.5) & (t < 3.5)] = 0.5  # แก้จาก -0.5 เป็น 0.5
-    gx[(t > 7.5) & (t < 9.5)] = 0.5      
-    ax.plot(t, gx, color='black', lw=2)
-    ax.fill_between(t, gx, 0, alpha=0.3, color='gray')
-    ax.text(-0.05, 0, 'Gx', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
+    # ตามที่คุณบอกเป๊ะ: อันแรกติดลบเพื่อกวาดไปด้านซ้าย
+    gx[(t > 2.8) & (t < 3.8)] = -0.6  
+    gx[(t > t_echo - 1.0) & (t < t_echo + 1.0)] = 0.6      
+    ax.plot(t, gx, color='#d32f2f', lw=2)
+    ax.fill_between(t, gx, 0, alpha=0.2, color='#d32f2f')
+    ax.text(3.3, -0.4, '-', color='#d32f2f', fontsize=16, fontweight='bold', ha='center', va='center')
+    ax.text(t_echo, 0.4, '+', color='#d32f2f', fontsize=16, fontweight='bold', ha='center', va='center')
+    ax.text(-0.05, 0, '$G_{FE}$', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
+    ax.set_ylim(-1.2, 1.2)
     ax.axis('off')
     
-    # 4. Echo
-    ax = axes[3]
-    # ปรับเวลา Echo ให้ตรงกับ TE พอดี (8.5)
-    echo_env = np.exp(-((t - 8.5)**2) / 0.3) * (t > 7.5) * (t < 9.5)
+    # 5. Echo Signal
+    ax = axes[4]
+    echo_env = np.exp(-((t - t_echo)**2) / 0.15) * (t > t_echo - 1.0) * (t < t_echo + 1.0)
     ax.plot(t, echo_env, color='black', lw=2)
     ax.fill_between(t, echo_env, 0, alpha=0.3, color='gray')
-    ax.text(-0.05, 0.5, 'Signal\n(Echo)', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
+    ax.text(-0.05, 0.5, 'Echo signal', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
     ax.axis('off')
     
-    # ถ่างระยะขอบซ้าย (left=0.25) ให้กว้างขึ้น คืนพื้นที่ให้ตัวหนังสือ
-    fig.subplots_adjust(left=0.25, right=0.95, top=0.95, bottom=0.05, hspace=0.2)
+    # ถ่างระยะขอบซ้ายให้กว้างพอเพื่อไม่ให้ตัวหนังสือตกจอ
+    fig.subplots_adjust(left=0.20, right=0.95, top=0.95, bottom=0.05, hspace=0.1)
     return get_image_from_plot(fig)
 
 @st.cache_data
 def draw_kspace_filling(current_step, total_steps):
-    fig, ax = plt.subplots(figsize=(5, 6))
+    fig, ax = plt.subplots(figsize=(5, 6.5)) # ปรับความสูงให้สัมพันธ์กัน
     
     ax.set_facecolor('black')
     ax.axhline(0, color='gray', lw=1, ls='--')
@@ -308,7 +330,6 @@ 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)
 
@@ -394,7 +415,6 @@ with col_main:
     st.markdown("---")
     st.markdown("## 📍 1 จุดบน k-space")
 
-    # Center Text
     st.markdown("""
     <div class="kspace-info-box">
         <b>k-space 1 จุด = ข้อมูลของภาพทั้งภาพ และ ภาพ 1 พิกเซล = ผลรวมของ k-space ทุกจุด</b><br><br>
@@ -482,6 +502,4 @@ with col_main:
     with col_fimg2:
         st_image(draw_mri(mri_result), caption="ภาพ MRI ผลลัพธ์")
 
-    # Spacer: keeps page taller than viewport at all zoom levels so the
-    # scrollbar never disappears and never causes a layout-shift jiggle.
     st.markdown('<div style="height: 300px;"></div>', unsafe_allow_html=True)