Update app.py

app.py

@@ -6,7 +6,7 @@ import os
 import io
 from PIL import Image
 
-# สำคัญมาก! บังคับให้ Matplotlib ทำงานแบบ Background เพื่อแก้ปัญหาภาพและตัวอักษรสั่น
+# บังคับให้ Matplotlib ทำงานแบบ Background เพื่อแก้ปัญหาภาพสั่น
 import matplotlib
 matplotlib.use('Agg') 
 import matplotlib.pyplot as plt
@@ -36,6 +36,18 @@ st.markdown("""
         color: #1565C0;
         margin-top: 20px;
     }
+    /* ปรับแต่งปุ่มให้ดูสวยงาม */
+    div.stButton > button:first-child {
+        background-color: #f0f2f6;
+        color: #0D47A1;
+        border-radius: 8px;
+        border: 1px solid #1E88E5;
+        font-weight: bold;
+    }
+    div.stButton > button:first-child:hover {
+        background-color: #1E88E5;
+        color: white;
+    }
     </style>
     """, unsafe_allow_html=True)
 
@@ -70,10 +82,10 @@ def format_kspace_display(k_data):
 
 kspace_bg_image = format_kspace_display(kspace_raw)
 
-# --- ฟังก์ชันแปลงรูปภาพ (คืนค่าเป็น PIL Image แก้ปัญหาภาพสั่น) ---
+# --- ฟังก์ชันแปลงรูปภาพ (ลดการสั่น) ---
 def get_image_from_plot(fig):
     buf = io.BytesIO()
-    plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0, dpi=100)
+    plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0.1, dpi=100)
     plt.close(fig)
     buf.seek(0)
     return Image.open(buf)
@@ -127,11 +139,74 @@ 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))
+    
+    # วาดแกน
+    ax.axhline(0, color='black', lw=1.5)
+    ax.axvline(0, color='black', lw=1.5)
+    
+    y_vals = np.linspace(1, -1, total_steps)
+    
+    for i, y in enumerate(y_vals):
+        # ไฮไลต์บรรทัดที่กำลังทำงานให้เป็นสีแดงและหนาขึ้น
+        if i == current_step:
+            ax.plot([0.1, 0.9], [y, y], color='red', lw=4)
+        elif i < current_step:
+            ax.plot([0.1, 0.9], [y, y], color='gray', lw=2, 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.axis('off')
+    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))
+    
+    # สร้างภาพเปล่าสีดำ
+    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.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 คอลัมน์ โดยให้คอลัม��์กลางใหญ่สุด (สัดส่วน 1 : 6 : 1) เพื่อเว้นขอบเนื้อหาหลัก
 _, col_main, _ = st.columns([1, 6, 1])
 
 with col_main:
@@ -149,7 +224,6 @@ with col_main:
     ข้อมูลใน k-space มักจะถูกนำมาแสดงผลในรูปแบบตารางสี่เหลี่ยม (Grid) โดยมีแกนหลักคือ **kx (แนวนอน - Frequency)** และ **ky (แนวตั้ง - Phase)** จุดสำคัญคือ **แกน kx และ ky เหล่านี้ ไม่ได้บอกตำแหน่งพิกัดในภาพอวัยวะ** แต่มันคือแกนที่บอกถึงลักษณะของ **"ความถี่เชิงพื้นที่"** ที่เป็นคลื่น (Sinusoidal wave) ด้วยเหตุนี้ **จุดแต่ละจุดบน K-space จึงไม่ได้จับคู่แบบ 1 ต่อ 1 กับพิกเซลบนภาพ MRI** (เช่น จุดมุมซ้ายบนของ K-space ไม่ได้สร้างภาพมุมซ้ายบนของอวัยวะ)
     """)
 
-    # จัดให้รูปเดี่ยวองค์ประกอบ K-Space อยู่กึ่งกลางหน้าจอพอดี
     _, col_img_center, _ = st.columns([1.5, 3, 1.5])
     with col_img_center:
         if os.path.exists("Screenshot 2026-05-07 205051.png"):
@@ -159,6 +233,54 @@ with col_main:
         else:
             st.info("กรุณาอัปโหลดรูปภาพ Screenshot 2026-05-07 205051 (เป็น .png หรือ .jpg ก็ได้)")
 
+    # ---------------------------------------------------------
+    # NEW INTERACTIVE: การเติม K-Space ทีละบรรทัด (Line-by-Line Filling)
+    # ---------------------------------------------------------
+    st.markdown("### 🎛️ จำลองการเติมข้อมูล K-Space ตามรอบของ Phase Encoding (Gy)")
+    st.markdown("สังเกตการทำงานของเกรเดียนท์ Gy ด้านซ้าย ว่าในแต่ละรอบการกระตุ้น (TR) จะดึงข้อมูลมาเติมใน K-Space ทีละบรรทัดอย่างไร")
+    
+    # State Management สำหรับการควบคุมแอนิเมชัน
+    total_anim_steps = 15
+    if 'fill_step' not in st.session_state:
+        st.session_state.fill_step = 0
+
+    def step_forward():
+        if st.session_state.fill_step < total_anim_steps - 1:
+            st.session_state.fill_step += 1
+            
+    def step_backward():
+        if st.session_state.fill_step > 0:
+            st.session_state.fill_step -= 1
+            
+    def run_all():
+        st.session_state.fill_step = total_anim_steps - 1
+        
+    def reset_anim():
+        st.session_state.fill_step = 0
+
+    # แถบควบคุมบน
+    _, col_ctrl1, col_ctrl2, _ = st.columns([1, 2, 2, 1])
+    with col_ctrl1:
+        data_mode = st.radio("เลือกรูปแบบข้อมูลแสดงผล:", ["ข้อมูลจำลอง (Simulated)", "ข้อมูลจริง (kspace.mat)"])
+    with col_ctrl2:
+        st.write("ควบคุมการเติมบรรทัด:")
+        c1, c2, c3, c4 = st.columns(4)
+        c1.button("⏮ Reset", on_click=reset_anim)
+        c2.button("◀ ก่อนหน้า", on_click=step_backward)
+        c3.button("ถัดไป ▶", on_click=step_forward)
+        c4.button("⏭ รันจนจบ", on_click=run_all)
+        
+    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)
+
+
+    st.markdown("---")
     st.markdown("## 📍 1 จุดบน k-space")
 
     st.markdown("""
@@ -175,10 +297,8 @@ with col_main:
        - **จุดมืดหรือจาง:** ภาพ MRI แทบจะไม่มีลวดลายชนิดนี้ประกอบอยู่เลย
     """)
 
-    # --- ส่วน Interactive 1 ---
     st.markdown("### 🎛️ ลองปรับตำแหน่งของจุด K-Space เพื่อดูคลื่นความถี่")
     
-    # บีบให้แถบสไลเดอร์และคู่รูปภาพขยับมาอยู่ตรงกลางพร้อมกัน
     _, col_slide1, col_slide2, _ = st.columns([0.5, 2.5, 2.5, 0.5])
     with col_slide1:
         kx_val = st.slider("พิกัด kx (แนวนอน)", -112, 111, 15)
@@ -224,7 +344,6 @@ with col_main:
       อนุญาตให้เฉพาะข้อมูล **ขอบนอก (ความถี่สูง)** ผ่านไปได้ ข้อมูลตรงกลางทิ้งไป ผลลัพธ์ที่ได้คือภาพจะสูญเสียคอนทราสต์จนเกือบมืดสนิท แต่จะปรากฏ **"เส้นขอบร่าง" (Outline)** ขึ้นมาอย่างคมชัด
     """)
 
-    # --- ส่วน Interactive 2 ---
     st.markdown("### 🎛️ ลองปรับตัวกรอง (Interactive Filter)")
     
     _, col_radio_center, _ = st.columns([2, 3, 2])
@@ -240,7 +359,6 @@ with col_main:
 
     filtered_k, mri_result = apply_filter(kspace_raw, mode, radius)
 
-    # จัดรูปภาพคู่ของพาร์ทฟิลเตอร์ให้อยู่กึ่งกลางจออย่างสมดุล
     _, col_fimg1, col_fimg2, _ = st.columns([0.5, 2.5, 2.5, 0.5])
     with col_fimg1:
         st.image(draw_filtered_kspace(filtered_k), caption="ภาพ K-Space ที่ถูกตัวกรอง", use_container_width=True)