Update app.py

app.py

@@ -5,8 +5,6 @@ import zipfile
 import os
 import io
 from PIL import Image
-
-# บังคับให้ Matplotlib ทำงานแบบ Background เพื่อแก้ปัญหาภาพสั่น
 import matplotlib
 matplotlib.use('Agg') 
 import matplotlib.pyplot as plt
@@ -36,7 +34,6 @@ st.markdown("""
         color: #1565C0;
         margin-top: 20px;
     }
-    /* ปรับแต่งปุ่มให้ดูสวยงาม */
     div.stButton > button:first-child {
         background-color: #f0f2f6;
         color: #0D47A1;
@@ -82,7 +79,6 @@ def format_kspace_display(k_data):
 
 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)
@@ -139,72 +135,87 @@ def draw_mri(mri_result):
     ax.axis('off')
     return get_image_from_plot(fig)
 
-# --- ฟังก์ชันวาดระบบเติม K-Space ทีละบรรทัด (Interactive 3) ---
-def draw_gy_sequence(current_step, total_steps):
-    # กราฟแสดง Phase Encoding (Gy) ด้านซ้าย
-    fig, ax = plt.subplots(figsize=(3, 4))
+# --- ฟังก์ชันวาดกราฟ Pulse Sequence (RF, Gx, Gy, Echo) ---
+def draw_pulse_sequence(current_step, total_steps):
+    fig, axes = plt.subplots(4, 1, figsize=(5, 6), gridspec_kw={'height_ratios': [1, 1, 1.5, 1]})
+    t = np.linspace(0, 10, 500)
     
-    # วาดแกน
-    ax.axhline(0, color='black', lw=1.5)
-    ax.axvline(0, color='black', lw=1.5)
+    # 1. RF
+    ax = axes[0]
+    rf = np.sinc(t - 2) * (t > 0) * (t < 4)
+    ax.plot(t, rf, color='black', lw=2)
+    ax.text(0, 0.5, 'RF', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.get_yaxis_transform())
+    ax.axis('off')
     
-    y_vals = np.linspace(1, -1, total_steps)
+    # 2. Gx (Frequency Encoding)
+    ax = axes[1]
+    gx = np.zeros_like(t)
+    gx[(t > 4.5) & (t < 5.5)] = -1 # Dephase
+    gx[(t > 6) & (t < 9)] = 1      # Readout
+    ax.plot(t, gx, color='black', lw=2)
+    ax.fill_between(t, gx, 0, alpha=0.3, color='gray')
+    ax.text(0, 0, 'Gx', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.get_yaxis_transform())
+    ax.axis('off')
     
-    for i, y in enumerate(y_vals):
-        # ไฮไลต์บรรทัดที่กำลังทำงานให้เป็นสีแดงและหนาขึ้น
+    # 3. Gy (Phase Encoding)
+    ax = axes[2]
+    gy_vals = np.linspace(1, -1, total_steps)
+    for i, gy_amp in enumerate(gy_vals):
+        gy = np.zeros_like(t)
+        gy[(t > 4.5) & (t < 5.5)] = gy_amp
         if i == current_step:
-            ax.plot([0.1, 0.9], [y, y], color='red', lw=4)
+            ax.plot(t, gy, color='red', lw=3, zorder=10) # ไฮไลต์เส้นปัจจุบัน
         elif i < current_step:
-            ax.plot([0.1, 0.9], [y, y], color='gray', lw=2, alpha=0.5)
+            ax.plot(t, gy, color='gray', lw=1, alpha=0.5)
         else:
-            ax.plot([0.1, 0.9], [y, y], color='blue', lw=2)
-            
-    ax.set_xlim(-0.1, 1.1)
-    ax.set_ylim(-1.2, 1.2)
-    ax.set_title("Gy (Phase Encoding)", fontweight='bold')
+            ax.plot(t, gy, color='blue', lw=1, alpha=0.3)
+    ax.text(0, 0, 'Gy', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.get_yaxis_transform())
+    ax.axis('off')
+    
+    # 4. Echo
+    ax = axes[3]
+    echo = np.sinc(t - 7.5) * (t > 6) * (t < 9)
+    ax.plot(t, echo, color='black', lw=2)
+    ax.text(0, 0.5, 'Echo', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.get_yaxis_transform())
     ax.axis('off')
+    
+    plt.tight_layout()
     return get_image_from_plot(fig)
 
 def draw_kspace_filling(current_step, total_steps, mode_type, real_bg):
-    # กราฟแสดง K-Space ที่ค่อยๆ ถูกเติม
-    fig, ax = plt.subplots(figsize=(4, 4))
-    
-    # สร้างภาพเปล่าสีดำ
+    fig, ax = plt.subplots(figsize=(5, 6))
     display_img = np.zeros((224, 224))
-    
-    # คำนวณขอบเขตบรรทัดที่จะเติม
     lines_per_step = 224 // total_steps
     current_line_idx = current_step * lines_per_step
     
     if mode_type == "ข้อมูลจำลอง (Simulated)":
-        # สร้างภาพเส้นจำลองสีเหลืองแนวนอน
         Y, X = np.ogrid[:224, :224]
-        # จำลองสัญญาณให้ตรงกลางสว่าง ขอบมืด
         intensity = np.exp(-((Y - 112)**2) / (2 * 50**2)) 
         for i in range(current_line_idx + lines_per_step):
              display_img[i, :] = intensity[i, 0] * 255
-        
         ax.imshow(display_img, cmap='inferno', extent=[-112, 112, -112, 112], vmin=0, vmax=255)
     else:
-        # ใช้ข้อมูล kspace.mat จริง
         if current_step >= total_steps - 1:
             display_img = real_bg
         else:
             display_img[:current_line_idx + lines_per_step, :] = real_bg[:current_line_idx + lines_per_step, :]
-            
         ax.imshow(display_img, cmap='gray', extent=[-112, 112, -112, 112], vmin=0, vmax=1)
         
     ax.set_xlim(-112, 112)
-    ax.set_ylim(112, -112) # Invert Y axis ให้เติมจากบนลงล่างตามกราฟ Gy
+    ax.set_ylim(112, -112) # วาดจากบนลงล่าง
+    
+    # วาดลูกศรชี้ว่ากำลังเติมบรรทัดไหน
+    y_pos = 112 - (current_line_idx + lines_per_step//2)
+    ax.annotate('', xy=(0, y_pos), xytext=(-100, y_pos), arrowprops=dict(arrowstyle='->', color='red', lw=3))
+    
     ax.axhline(0, color='white', linewidth=0.5, linestyle='--')
     ax.axvline(0, color='white', linewidth=0.5, linestyle='--')
     ax.set_title("K-Space Filling", fontweight='bold')
     ax.axis('off')
     return get_image_from_plot(fig)
 
-
 # ==========================================================
-# --- 3. ส่วนแสดงผลเว็บ (ใช้ Container บีบขอบซ้าย-ขวา) ---
+# --- 3. ส่วนแสดงผลเว็บ ---
 # ==========================================================
 
 _, col_main, _ = st.columns([1, 6, 1])
@@ -230,16 +241,21 @@ with col_main:
             st.image("Screenshot 2026-05-07 205051.png", use_container_width=True)
         elif os.path.exists("Screenshot 2026-05-07 205051.jpg"):
             st.image("Screenshot 2026-05-07 205051.jpg", use_container_width=True)
-        else:
-            st.info("กรุณาอัปโหลดรูปภาพ Screenshot 2026-05-07 205051 (เป็น .png หรือ .jpg ก็ได้)")
 
     # ---------------------------------------------------------
-    # NEW INTERACTIVE: การเติม K-Space ทีละบรรทัด (Line-by-Line Filling)
+    # NEW: K-Space Trajectories (การบันทึกข้อมูล)
     # ---------------------------------------------------------
-    st.markdown("### 🎛️ จำลองการเติมข้อมูล K-Space ตามรอบของ Phase Encoding (Gy)")
-    st.markdown("สังเกตการทำงานของเกรเดียนท์ Gy ด้านซ้าย ว่าในแต่ละรอบการกระตุ้น (TR) จะดึงข้อมูลมาเติมใน K-Space ทีละบรรทัดอย่างไร")
-    
-    # State Management สำหรับการควบคุมแอนิเมชัน
+    st.markdown("## 🛤️ K-Space Trajectories")
+    st.markdown("""
+    **การบันทึกข้อมูลลงใน K-space สามารถทำได้หลายรูปแบบ** โดยจะยกตัวอย่างให้การเก็บข้อมูลจะดำเนินไปทีละบรรทัด โดยสัญญาณจะเกิดขึ้นหลังจากกระตุ้นด้วย RF Pulse โดยมีลำดับดังนี้
+
+    1. กระบวนการเริ่มต้นขึ้นเมื่อสนามแม่เหล็กเกรเดียนท์ **Gx** และ **Gy** เริ่มทำงานพร้อมกันเพื่อสร้างพิกัดอ้างอิง
+    2. ระบบจะเริ่มบันทึกข้อมูลจุดแรกของเฟสในแถวที่ 1 โดยจะเริ่มต้นที่ค่าแอมปลิจูดของ **Gy ทางฝั่งบวกก่อน**
+    3. สัญญาณจะถูกบันทึกไล่ไปตามแกน Gx จนได้ข้อมูลครบถ้วนเต็ม 1 แถว
+    4. เมื่อจบแถวแรก ระบบจะเริ่มกระบวนการใหม่เพื่อบันทึกข้อมูลในเฟสแถวที่ 2, 3, 4 ต่อไปเรื่อยๆ
+    5. การวนรอบนี้จะดำเนินต่อไปพร้อมกับการเปลี่ยนค่า **Gy ให้ลดลงจนไปถึงค่าทางฝั่งลบ** เมื่อบันทึกครบทุกแถวตามจำนวนความละเอียดที่ตั้งไว้ จะถือว่าสิ้นสุดกระบวนการเก็บข้อมูล MRI แบบสองมิติลงบน K-space
+    """)
+
     total_anim_steps = 15
     if 'fill_step' not in st.session_state:
         st.session_state.fill_step = 0
@@ -259,11 +275,11 @@ with col_main:
         st.session_state.fill_step = 0
 
     # แถบควบค���มบน
-    _, col_ctrl1, col_ctrl2, _ = st.columns([1, 2, 2, 1])
+    _, col_ctrl1, col_ctrl2, _ = st.columns([0.5, 2.5, 2.5, 0.5])
     with col_ctrl1:
-        data_mode = st.radio("เลือกรูปแบบข้อมูลแสดงผล:", ["ข้อมูลจำลอง (Simulated)", "ข้อมูลจริง (kspace.mat)"])
+        data_mode = st.radio("เลือกรูปแบบ K-Space:", ["ข้อมูลจำลอง (Simulated)", "ข้อมูลจริง (kspace.mat)"])
     with col_ctrl2:
-        st.write("ควบคุมการเติมบรรทัด:")
+        st.write("ควบคุมการเติมบรรทัด (Gy):")
         c1, c2, c3, c4 = st.columns(4)
         c1.button("⏮ Reset", on_click=reset_anim)
         c2.button("◀ ก่อนหน้า", on_click=step_backward)
@@ -272,12 +288,14 @@ with col_main:
         
     st.progress((st.session_state.fill_step + 1) / total_anim_steps)
 
-    # แสดงผลรูปภาพ
-    _, col_anim1, col_anim2, _ = st.columns([1.5, 2, 3, 1.5])
-    with col_anim1:
-        st.image(draw_gy_sequence(st.session_state.fill_step, total_anim_steps), use_container_width=True)
-    with col_anim2:
-        st.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps, data_mode, kspace_bg_image), use_container_width=True)
+    # ใช้ Placeholder เพื่อลดการสั่นกระตุกตอนวาดรูปใหม่
+    anim_placeholder = st.empty()
+    with anim_placeholder.container():
+        col_anim1, col_anim2 = st.columns([1, 1])
+        with col_anim1:
+            st.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps), use_container_width=True)
+        with col_anim2:
+            st.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps, data_mode, kspace_bg_image), use_container_width=True)
 
 
     st.markdown("---")