Update app.py

app.py

@@ -218,8 +218,8 @@ def draw_mri(mri_result):
 
 @st.cache_data
 def draw_pulse_sequence(current_step, total_steps):
-    # ปรับเพิ่มเป็น 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]})
+    # ปรับให้เหลือ 4 กราฟ (RF, Gy, Gx, Signal) ตามที่ขอ
+    fig, axes = plt.subplots(4, 1, figsize=(6, 6), sharex=True, gridspec_kw={'height_ratios': [1.5, 1.2, 1.2, 1.2]})
     t = np.linspace(0, 11, 1000)
     
     t_90 = 1.5
@@ -233,7 +233,7 @@ def draw_pulse_sequence(current_step, total_steps):
     ax.plot(t, rf90 + rf180, color='black', lw=2)
     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.text(-0.05, 0.2, 'RF', fontsize=16, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
     ax.axis('off')
     
     # เพิ่มเส้นประบอกเวลา (Dashed Lines)
@@ -248,64 +248,53 @@ def draw_pulse_sequence(current_step, total_steps):
     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]
-    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]
+    # 2. Gy (Phase Encoding - เส้นแอคทีฟสีเขียว เส้นอื่นและกรอบสีดำ)
+    ax = axes[1]
     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 > t_pe_start) & (t < t_pe_end)] = gy_amp
         if i == current_step:
-            ax.plot(t, gy, color='#2c7bb6', lw=3, zorder=10)
+            ax.plot(t, gy, color='green', lw=3, zorder=10) # สีเขียวเส้นที่กำลังทำงาน
         else:
-            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.plot(t, gy, color='black', 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='black', lw=1.5)
+    ax.text(-0.05, 0, 'Gy', fontsize=16, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
     ax.set_ylim(-1.2, 1.2)
     ax.axis('off')
 
-    # 4. G_FE (Frequency Encoding - สีแดง)
-    ax = axes[3]
+    # 3. Gx (Frequency Encoding - สีแดง)
+    ax = axes[2]
     gx = np.zeros_like(t)
-    # ตามที่คุณบอกเป๊ะ: อันแรกติดลบเพื่อกวาดไปด้านซ้าย
+    # อันแรกติดลบเพื่อกวาดไปด้านซ้าย
     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.text(-0.05, 0, 'Gx', fontsize=16, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
     ax.set_ylim(-1.2, 1.2)
     ax.axis('off')
     
-    # 5. Echo Signal
-    ax = axes[4]
+    # 4. Echo Signal
+    ax = axes[3]
     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, 'Echo signal', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
+    ax.text(-0.05, 0.5, 'Signal\n(Echo)', fontsize=16, fontweight='bold', va='center', ha='right', transform=ax.transAxes)
     ax.axis('off')
     
-    # ถ่างระยะขอบซ้ายให้กว้างพอเพื่อไม่ให้ตัวหนังสือตกจอ
-    fig.subplots_adjust(left=0.20, right=0.95, top=0.95, bottom=0.05, hspace=0.1)
+    # ถ่างระยะขอบซ้าย (left=0.25) ให้กว้างพอเพื่อไม่ให้ตัวหนังสือตกจอ
+    fig.subplots_adjust(left=0.25, 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.5)) # ปรับความสูงให้สัมพันธ์กัน
+    fig, ax = plt.subplots(figsize=(5, 6)) # ปรับความสูงให้สัมพันธ์กัน
     
     ax.set_facecolor('black')
     ax.axhline(0, color='gray', lw=1, ls='--')
@@ -502,4 +491,6 @@ 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)