Update app.py

app.py

@@ -1,187 +1,269 @@
 import streamlit as st
 import numpy as np
 import scipy.io
-from PIL import Image, ImageDraw, ImageFont
-from streamlit_image_coordinates import streamlit_image_coordinates
+import matplotlib.pyplot as plt
+import zipfile
+import os
 
-# 1. ตั้งค่าเลย์เอาต์หน้าเว็บและการออกแบบ (CSS)
-st.set_page_config(layout="centered", page_title="MRI K-Space Learning Tool")
+# --- ตั้งค่าหน้าเว็บ Streamlit ---
+st.set_page_config(layout="wide", page_title="K-Space to MRI")
 
-st.markdown("""
-    <style>
-    /* ปรับขนาดฟอนต์เนื้อหา */
-    .main .block-container { max-width: 900px; }
-    p, li { font-size: 19px !important; line-height: 1.7 !important; color: #333; }
-    
-    /* ปรับหัวข้อ */
-    h1 { color: #0047AB; font-size: 45px !important; font-weight: 800 !important; border-bottom: 3px solid #0047AB; padding-bottom: 10px; margin-bottom: 30px !important; }
-    h2 { color: #0056b3; font-size: 32px !important; font-weight: 700 !important; margin-top: 40px !important; border-left: 8px solid #0056b3; padding-left: 15px; }
-    h3 { color: #007bff; font-size: 26px !important; font-weight: 600 !important; margin-top: 30px !important; }
+# --- ฟังก์ชันช่วยเหลือ (Helper Functions) ---
+@st.cache_data
+def load_kspace_data():
+    try:
+        # ตรวจสอบว่ามีไฟล์ mat หรือ zip ใน directory หรือไม่
+        if os.path.exists('kspace.mat'):
+            mat_data = scipy.io.loadmat('kspace.mat')
+        else:
+            with zipfile.ZipFile("kspace.zip", 'r') as zip_ref:
+                zip_ref.extractall("temp_kspace")
+            mat_data = scipy.io.loadmat("temp_kspace/kspace.mat")
+        kspace = mat_data['kspace']
+        return kspace
+    except Exception as e:
+        st.error("ไม่พบไฟล์ข้อมูล kspace.mat หรือ kspace.zip กรุณาอัปโหลดไฟล์เข้าระบบ")
+        # สร้างข้อมูลจำลองกรณีไม่เจอไฟล์ เพื่อให้แอปทำงานต่อได้
+        x = np.linspace(-5, 5, 224)
+        y = np.linspace(-5, 5, 224)
+        X, Y = np.meshgrid(x, y)
+        dummy_image = np.sin(X**2 + Y**2) * np.exp(-(X**2 + Y**2)/10)
+        return np.fft.fftshift(np.fft.fft2(dummy_image))
+
+kspace_data = load_kspace_data()
+
+def kspace_to_image(kspace_freq):
+    # แปลง K-space กลับเป็นภาพ MRI ขนาด 224x224
+    img = np.fft.ifft2(np.fft.ifftshift(kspace_freq))
+    img_mag = np.abs(img)
+    # Normalize ให้ค่าอยู่ระหว่าง 0-1
+    img_norm = (img_mag - img_mag.min()) / (img_mag.max() - img_mag.min())
+    return img_norm
+
+def generate_kspace_axis_image():
+    # จำลองรูปแกน K-Space ตามที่แนบมา
+    fig, ax = plt.subplots(figsize=(5, 5))
+    ax.axhline(0, color='black', linewidth=2)
+    ax.axvline(0, color='black', linewidth=2)
     
-    /* ปรับปุ่มและ Slider */
-    .stButton>button { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; font-weight: bold; }
-    .stSlider { padding-top: 20px; }
-    </style>
-    """, unsafe_allow_html=True)
-
-# 2. ฟังก์ชันสร้างรูปองค์ประกอบ K-Space ขึ้นมาใหม่ (แทนรูปเดิม)
-def create_kspace_diagram():
-    img = Image.new('RGB', (600, 400), color=(255, 255, 255))
-    draw = ImageDraw.Draw(img)
-    center = (300, 200)
+    ax.text(0.95, 0.05, 'kx\n(Frequency)', transform=ax.transAxes, ha='right', va='bottom', fontsize=12, fontweight='bold', color='red')
+    ax.text(0.05, 0.95, 'ky\n(Phase)', transform=ax.transAxes, ha='left', va='top', fontsize=12, fontweight='bold', color='red')
     
-    # วาด Grid พื้นหลัง
-    for i in range(0, 601, 40): draw.line([(i, 0), (i, 400)], fill=(240, 240, 240))
-    for i in range(0, 401, 40): draw.line([(0, i), (600, i)], fill=(240, 240, 240))
+    ax.grid(True, linestyle='--', alpha=0.5)
+    ax.set_xlim(-1, 1)
+    ax.set_ylim(-1, 1)
+    ax.set_xticks([])
+    ax.set_yticks([])
+    ax.set_title("K-Space", fontweight='bold')
     
-    # วาดแกน
-    draw.line([(50, 200), (550, 200)], fill=(0, 0, 0), width=3) # แกน kx
-    draw.line([(300, 50), (300, 350)], fill=(0, 0, 0), width=3) # แกน ky
+    # วาดคลื่นจำลองในกราฟให้คล้ายกับรูปที่ร่างไว้
+    x = np.linspace(-1, 1, 100)
+    y = 0.2 * np.sin(10 * x)
+    ax.plot(x, y, color='red', alpha=0.5)
+    ax.plot(y, x, color='blue', alpha=0.5)
     
-    # วาดพื้นที่ Low Frequency (กลาง) และ High Frequency (ขอบ)
-    draw.ellipse([240, 140, 360, 260], outline=(0, 100, 255), width=2) # วงใน
-    draw.text((310, 160), "Low Frequency\n(Contrast)", fill=(0, 80, 200))
+    return fig
+
+def generate_2d_wave(kx, ky, size=224):
+    x = np.arange(size)
+    y = np.arange(size)
+    X, Y = np.meshgrid(x, y)
     
-    draw.text((450, 210), "kx (Frequency)", fill=(0, 0, 0))
-    draw.text((310, 60), "ky (Phase)", fill=(0, 0, 0))
-    draw.text((420, 100), "High Frequency\n(Edges/Details)", fill=(150, 0, 0))
+    X = X - size // 2
+    Y = Y - size // 2
     
-    return img
+    # สร้างคลื่น 2D Sinusoidal
+    wave = np.cos(2 * np.pi * (kx * X + ky * Y) / size)
+    return wave
 
-# 3. จัดการข้อมูล K-Space
-@st.cache_data
-def load_data():
-    try:
-        mat = scipy.io.loadmat('kspace.mat')
-        key = 'kspace' if 'kspace' in mat else ([k for k in mat.keys() if not k.startswith('__')][0])
-        data = mat[key]
-        if data.shape != (224, 224):
-            h, w = data.shape[:2]
-            data = data[(h-224)//2:(h+224)//2, (w-224)//2:(w+224)//2]
-        return data
-    except:
-        # สร้างข้อมูลสมองจำลอง (Synthetic MRI)
-        y, x = np.ogrid[-112:112, -112:112]
-        img = np.zeros((224, 224))
-        img[(x/80)**2 + (y/100)**2 <= 1] = 0.5
-        img[(x/50)**2 + (y/70)**2 <= 1] = 0.8
-        img[x**2 + (y-30)**2 <= 15**2] = 1.0
-        return np.fft.fftshift(np.fft.fft2(img))
-
-k_data = load_data()
-
-def process_image(arr, is_kspace=True):
-    if is_kspace:
-        res = np.log(1 + np.abs(arr))
-    else:
-        # ป้องกันภาพซ้อน 4: ใช้ ifftshift ก่อน ifft2
-        res = np.abs(np.fft.ifft2(np.fft.ifftshift(arr)))
-    norm = (res - res.min()) / (res.max() - res.min() + 1e-8) * 255
-    return Image.fromarray(norm.astype(np.uint8)).convert("RGB")
+def draw_kspace_point(kx, ky, size=224):
+    fig, ax = plt.subplots(figsize=(5, 5))
+    ax.imshow(np.zeros((size, size)), cmap='gray', extent=[-size//2, size//2, -size//2, size//2])
+    
+    ax.plot(kx, ky, 'ro', markersize=8)
+    # วาดเส้นแสดงทิศทาง
+    ax.annotate('', xy=(kx, ky), xytext=(0, 0),
+                arrowprops=dict(arrowstyle='->', color='yellow', lw=2))
+    
+    ax.axhline(0, color='white', linewidth=0.5, linestyle='--')
+    ax.axvline(0, color='white', linewidth=0.5, linestyle='--')
+    
+    ax.set_xlim(-size//2, size//2)
+    ax.set_ylim(-size//2, size//2)
+    ax.set_title(f"พิกัด K-Space (kx={kx}, ky={ky})")
+    ax.axis('off')
+    return fig
 
-# ==========================================
-# เริ่มต้นหน้าเว็บ (Main Content)
-# ==========================================
+# --- ส่วนเนื้อหาและ UI ของหน้าเว็บ ---
 
-st.title("K-space to MRI image")
+st.title("K-Space to MRI image")
 
-st.header("K-space คือ")
-st.write("""เมื่อเรานำผู้ป่วยเข้าเครื่อง MRI และส่งคลื่น RF เข้าไปกระตุ้น เกิดเป็นสัญญาณ MR Signal ที่ได้มานั้นจะยังไม่ได้ออกมาเป็นภาพอวัยวะ แต่จะถูกนำไปเก็บรวบรวมไว้ในพื้นที่ที่เรียกว่า "K-space" ซึ่งเป็นพื้นที่ที่จะเก็บข้อมูลดิบแบบสองมิติ ก่อนจะนำไปผ่านกระบวนการทางคฺณิตศาสตร์ที่เรียกว่า Fourier Transform ให้ได้มาซึ่งภาพ MRI ซึ่งข้อมูลใน K-Sapce ถูกเก็บในรูปแบบ ความถี่เชิงพื้นที่ (Spatial Frequency) พิกัดในตารางของ K-space ถูกสร้างขึ้นจากการทำงานของสนามแม่เหล็กเกรเดียนท์ 2 แกน ได้แก่ Gx (ทำหน้าที่เข้ารหัสในแนวความถี่ Frequency encoding) และ Gy (ทำหน้าที่เข้ารหัสในแนวเฟส Phase encoding) ซึ่งเกรเดียนท์ทั้งสองตัวนี้กำหนดว่า สัญญาณจากโปรตอนที่มีความถี่และเฟสจำเพาะเจาะจงที่ต่างกันนั้น จะต้องถูกนำไปจัดเก็บไว้ตรงจุดไหนในพิกัดของ K-space""")
+st.markdown("""
+**K-space คือ**
+เมื่อเรานำผู้ป่วยเข้าเครื่อง MRI และส่งคลื่น RF เข้าไปกระตุ้น เกิดเป็นสัญญาณ MR Signal ที่ได้มาน��้นจะยังไม่ได้ออกมาเป็นภาพอวัยวะ แต่จะถูกนำไปเก็บรวบรวมไว้ในพื้นที่ที่เรียกว่า "K-space" ซึ่งเป็นพื้นที่ที่จะเก็บข้อมูลดิบแบบสองมิติ ก่อนจะนำไปผ่านกระบวนการทางคณิตศาสตร์ที่เรียกว่า Fourier Transform ให้ได้มาซึ่งภาพ MRI ซึ่งข้อมูลใน K-Sapce ถูกเก็บในรูปแบบ ความถี่เชิงพื้นที่ (Spatial Frequency) พิกัดในตารางของ K-space ถูกสร้างขึ้นจากการทำงานของสนามแม่เหล็กเกรเดียนท์ 2 แกน ได้แก่ Gx (ทำหน้าที่เข้ารหัสในแนวความถี่ Frequency encoding) และ Gy (ทำหน้าที่เข้ารหัสในแนวเฟส Phase encoding) ซึ่งเกรเดียนท์ทั้งสองตัวนี้กำหนดว่า สัญญาณจากโปรตอนที่มีความถี่และเฟสจำเพาะเจาะจงที่ต่างกันนั้น จะต้องถูกนำไปจัดเก็บไว้ตรงจุดไหนในพิกัดของ K-space
+""")
 
 st.header("องค์ประกอบของ K-Space")
-st.image(create_kspace_diagram(), caption="แผนผังแสดงองค์ประกอบของ K-Space (แกนความถี่และเฟส)", width=600)
 
-st.write("""ข้อมูลใน k-space มักจะถูกนำมาแสดงผลในรูปแบบตารางสี่เหลี่ยม (Grid) โดยมีแกนหลักคือ kx (แนวนอน - Frequency) และ ky (แนวตั้ง - Phase) แต่จุดสำคัญคือ แกน kx และ ky เหล่านี้ ไม่ได้บอกตำแหน่งพิกัด ในภาพ แต่มันคือแกนที่บอกถึงลักษณะของ "ความถี่เชิงพื้นที่ (Spatial Frequencies)" ซึ่งเป็นคลื่นความถี่ Sinusoidal wave ด้วยเหตุนี้ จุดแต่ละจุดบนพิกัด (kx, ky) ใน k-space จึง ไม่ได้จับคู่แบบ 1 ต่อ 1 กับพิกเซล (x, y) บนภาพ MRI (ไม่ได้แปลว่าจุดมุมซ้ายบนใน k-space จะสร้างภาพมุมซ้ายบนของภาพอวัยวะ)""")
+col1, col2 = st.columns([1, 1.5])
+with col1:
+    fig_axis = generate_kspace_axis_image()
+    st.pyplot(fig_axis)
+with col2:
+    st.markdown("""
+ข้อมูลใน k-space มักจะถูกนำมาแสดงผลในรูปแบบตารางสี่เหลี่ยม (Grid) โดยมีแกนหลักคือ kx (แนวนอน - Frequency) และ ky (แนวตั้ง - Phase) แต่จุดสำคัญคือ แกน kx และ ky เหล่านี้ ไม่ได้บอกตำแหน่งพิกัด ในภาพ แต่มันคือแกนที่บอกถึง ลักษณะของ "ความถี่เชิงพื้นที่ (Spatial Frequencies)" ซึ่งเป็นคลื่นความถี่ Sinusoidal wave ด้วยเหตุนี้ จุดแต่ละจุดบนพิกัด (kx, ky) ใน k-space จึง ไม่ได้จับคู่แบบ 1 ต่อ 1 กับพิกเซล (x, y) บนภาพ MRI (ไม่ได้แปลว่าจุดมุมซ้ายบนใน k-space จะสร้างภาพมุมซ้ายบนของ ภาพอวัยวะ)
+    """)
 
-# --- Interactive 1 ---
-st.subheader("1 จุดบน k-space")
+st.divider()
 
-# ปุ่ม Reset
-if st.button("🔄 Reset พิกัด"):
-    st.session_state.kx = 112
-    st.session_state.ky = 112
-    st.rerun()
+st.header("1 จุดบน k-space")
 
-col_pick, col_wave = st.columns([1, 1])
+# --- Interactive Part 1: การเลือกจุดบน K-Space ---
+st.markdown("**(Interactive: ลองเลื่อน Slider เพื่อเลือกตำแหน่งจุด แล้วดูทิศทางและลักษณะของแผ่นลวดลายคลื่น)**")
+
+if 'kx_val' not in st.session_state:
+    st.session_state.kx_val = 15
+if 'ky_val' not in st.session_state:
+    st.session_state.ky_val = 20
+
+def reset_point():
+    st.session_state.kx_val = 0
+    st.session_state.ky_val = 0
+
+col_w1, col_w2, col_w3 = st.columns([1, 1, 1])
+with col_w1:
+    st.slider("ตำแหน่งแกน kx (แนวนอน)", -112, 111, key='kx_val')
+    st.slider("ตำแหน่งแกน ky (แนวตั้ง)", -112, 111, key='ky_val')
+    st.button("Reset จุด", on_click=reset_point)
+
+with col_w2:
+    fig_pt = draw_kspace_point(st.session_state.kx_val, st.session_state.ky_val)
+    st.pyplot(fig_pt)
+
+with col_w3:
+    wave_img = generate_2d_wave(st.session_state.kx_val, st.session_state.ky_val)
+    fig_wave, ax_wave = plt.subplots(figsize=(5, 5))
+    ax_wave.imshow(wave_img, cmap='gray')
+    ax_wave.set_title("แผ่นลวดลายคลื่น (2D Sinusoidal Wave)")
+    ax_wave.axis('off')
+    st.pyplot(fig_wave)
 
-with col_pick:
-    st.markdown("**คลิกเลือกจุดบน K-Space:**")
-    k_img = process_image(k_data)
-    
-    # ดักจับการคลิก
-    pos = streamlit_image_coordinates(k_img, key="coords")
-    
-    if pos:
-        px, py = pos['x'], pos['y']
-        kx, ky = px - 112, py - 112
-        # วาดเส้นทิศทางและจุดแดง
-        draw = ImageDraw.Draw(k_img)
-        draw.line((112, 112, px, py), fill="red", width=2)
-        draw.ellipse((px-4, py-4, px+4, py+4), fill="red", outline="white")
-        st.image(k_img, width=300)
-    else:
-        kx, ky = 0, 0
-        st.image(k_img, width=300)
-
-with col_wave:
-    st.markdown(f"**Sinusoidal Wave (kx: {kx}, ky: {ky})**")
-    Y, X = np.mgrid[-112:112, -112:112]
-    # คำนวณคลื่น
-    wave = np.cos(2 * np.pi * (kx * X / 224 + ky * Y / 224))
-    wave_norm = ((wave + 1) * 127.5).astype(np.uint8)
-    st.image(Image.fromarray(wave_norm), width=300)
-
-st.write("""**k-space 1 จุด = ข้อมูลของภาพทั้งภาพ และ ภาพ 1 พิกเซล = ผลรวมของ k-space ทุกจุด** 1 จุดใน k-space = แผ่นลวดลายคลื่น 1 แผ่น (2D Sinusoidal Wave)  
-1. **ตำแหน่งของจุด (พิกัด kx, ky) บอก "ความถี่" และ "ทิศทาง"** - ระยะห่างจากศูนย์กลาง (ความถี่): ยิ่งจุดนี้อยู่ไกลจากจุดศูนย์กลาง k-space มากเท่าไหร่ แผ่นลวดลายคลื่นก็จะยิ่ง "ถี่" หรือมีเส้นที่แคบมากขึ้นเท่านั้น (High frequency)  
-- มุมของจุด (ทิศทาง): ตำแหน่งของจุดเมื่อเทียบกับจุดศูนย์กลาง จะเป็นตัวบอกว่าแผ่นลวดลายคลื่นนี้จะ "เอียง" ไปในทิศทางไหน (ตั้ง นอน หรือเฉียงกี่องศา)  
-2. **ความสว่างของจุด (Amplitude / Magnitude) บอก "น้ำหนัก"** ความสว่างของจุดใน k-space ไม่ได้แปลว่าภาพ MRI ตรงนั้นจะสว่าง แต่มันคือการบอก "ปริมาณ (Weight)"  
-- จุดสว่างมาก: แปลว่าภาพ MRI ภาพนี้ มีแผ่นลวดลายชนิดนี้เป็นส่วนประกอบอยู่ เยอะมาก (มีความสำคัญต่อภาพสูง)  
-- จุดมืดหรือจาง: แปลว่าภาพ MRI ภาพนี้ แทบจะไม่มีลวดลายชนิดนี้ประกอบอยู่เลย""")
+
+st.markdown("""
+**k-space 1 จุด = ข้อมูลของภาพทั้งภาพ และ ภาพ 1 พิกเซล = ผลรวมของ k-space ทุกจุด**
+**1 จุดใน k-space = แผ่นลวดลายคลื่น 1 แผ่น (2D Sinusoidal Wave)**
+
+1. **ตำแหน่งของจุด (พิกัด kx, ky) บอก "ความถี่" และ "ทิศทาง"**
+   - **ระยะห่างจากศูนย์กลาง (ความถี่):** ยิ่งจุดนี้อยู่ไกลจากจุดศูนย์กลาง k-space มากเท่าไหร่ แผ่นลวดลายคลื่นก็จะยิ่ง "ถี่" หรือมีเส้นที่แคบมากขึ้นเท่านั้น (High frequency)
+   - **มุมของจุด (ทิศทาง):** ตำแหน่งของจุดเมื่อเทียบกับจุดศูนย์กลาง จะเป็นตัวบอกว่าแผ่นลวดลา��คลื่นนี้จะ "เอียง" ไปในทิศทางไหน (ตั้ง นอน หรือเฉียงกี่องศา)
+2. **ความสว่างของจุด (Amplitude / Magnitude) บอก "น้ำหนัก"**
+   - ความสว่างของจุดใน k-space ไม่ได้แปลว่าภาพ MRI ตรงนั้นจะสว่าง แต่มันคือการบอก "ปริมาณ (Weight)"
+   - **จุดสว่างมาก:** แปลว่าภาพ MRI ภาพนี้ มีแผ่นลวดลายชนิดนี้เป็นส่วนประกอบอยู่ เยอะมาก (มีความสำคัญต่อภาพสูง)
+   - **จุดมืดหรือจาง:** แปลว่าภาพ MRI ภาพนี้ แทบจะไม่มีลวดลายชนิดนี้ประกอบอยู่เลย
+""")
+
+st.divider()
 
 st.header("Inverse Fourier Transform")
-st.write("""เมื่อเก็บข้อมูลจนเต็มพื้นที่ k-space เราจะใช้กระบวนการทางคณิตศาสตร์ 2D Inverse Fourier Transform (2D-iFT) ในการเปลี่ยนข้อมูลความถี่กลับไปเป็นข้อมูลในเชิงพื้นที่ (Spatial Domain) ภาพ MRI เกิดจากการนำ "คลื่นความถี่ (Sinusoidal spatial waves)" จากทุกจุดใน k-space มาซ้อนทับกัน คลื่นที่มีเฟสตรงกันจะรวมตัวกันแบบเสริมฤทธิ์ (Constructive interference) สร้างเป็นพิกัดที่สว่าง และคลื่นที่มีเฟสตรงข้ามจะหักล้างกัน (Destructive interference) กลายเป็นพื้นที่สีดำ โดยต้องอาศัยข้อมูลจากหลายจุดมาซ้อนทับกัน และเกิดการแทรกสอดตามคุณสมบัติของคลื่น บริเวณไหนที่เป็นเนื้อเยื่อจริง คลื่นจะเสริมกันทำให้เกิด จุดสว่าง บริเวณไหนที่เป็นช่องว่าง คลื่นจะหักล้างกันทำให้เกิด จุดมืด""")
+st.markdown("""
+เมื่อเก็บข้อมูลจนเต็มพื้นที่ k-space เราจะใช้กระบวนการทางคณิตศาสตร์ 2D Inverse Fourier Transform (2D-iFT) ในการเปลี่ยนข้อมูลความถี่กลับไปเป็นข้อมูลในเชิงพื้นที่ (Spatial Domain) ภาพ MRI เกิดจากการนำ "คลื่นความถี่ (Sinusoidal spatial waves)" จากทุกจุดใน k-space มาซ้อนทับกัน คลื่นที่มีเฟสตรงกันจะรวมตัวกันแบบเสริมฤทธิ์ (Constructive interference) สร้างเป็นพิกัดที่สว่าง และคลื่นที่มีเฟสตรงข้ามจะหักล้างกัน (Destructive interference) กลายเป็นพื้นที่สีดำ
+โดยต้องอาศัยข้อมูลจากหลายจุดมาซ้อนทับกัน และเกิดการแทรกสอดตามคุณสมบัติของคลื่น
+o บริเวณไหนที่เป็นเนื้อเยื่อจริง คลื่นจะเสริมกันทำให้เกิด จุดสว่าง
+o บริเวณไหนที่เป็นช่องว่าง คลื่นจะหักล้างกันทำให้เกิด จุดมืด
+""")
 
 st.header("ความถี่เชิงพื้นที่ (Spatial Frequency) คือ")
-st.write("""ในทางสัญญาณภาพ (Spatial Frequency) ความถี่ไม่ได้หมายถึงความเร็วของเวลา แต่หมายถึง "อัตราการเปลี่ยนแปลงความเข้มของแสงในพื้นที่หนึ่งๆ"  
-1. **ความถี่เชิงพื้นที่ต่ำ (Low Spatial Frequency)** คืออะไร: พื้นที่ที่สีหรือความสว่าง "ค่อยๆ เปลี่ยน" หรือ "เหมือนเดิมเป็นบริเวณกว���าง" (เหมือนคลื่นลูกใหญ่ๆ ที่ขยับช้าๆ)  
-ตัวอย่างในภาพ MRI: บริเวณเนื้อเยื่อก้อนใหญ่ๆ เช่น เนื้อตับ หรือเนื้อสมอง ที่มีสีเทาโทนเดียวกันกินพื้นที่กว้าง  
-ตำแหน่งใน k-space: ข้อมูลเหล่านี้จะรวมตัวกันอยู่บริเวณ "ตรงกลาง"  
-หน้าที่หลัก: สร้าง "รูปร่างรวมๆ และคอนทราสต์ (Contrast)" ให้เรารู้ว่านี่คือก้อนอวัยวะอะไร  
-
-2. **ความถี่เชิงพื้นที่สูง (High Spatial Frequency)** คืออะไร: พื้นที่ที่ความสว่างเปลี่ยนแบบฉับพลันและรวดเร็วภายในระยะทางสั้นๆ เช่น จากขาวตัดเป็นดำสนิททันที (เหมือนลายทางแคบๆ ที่สลับสีถี่ๆ)  
-ตัวอย่างในภาพ MRI: ขอบของอวัยวะ (Edges), รอยต่อระหว่างกระดูกกับไขสันหลัง, หรือรายละเอียดเส้นเลือดเส้นเล็กๆ  
-ตำแหน่งใน k-space: ข้อมูลเหล่านี้จะกระจายตัวอยู่บริเวณ "ขอบนอก"  
-หน้าที่หลัก: สร้าง "ความคมชัด (Resolution) และรายละเอียดเล็กๆ" ทำให้ภาพไม่เบลอ""")
-
-# --- Interactive 2 ---
+st.markdown("""
+ในทางสัญญาณภาพ (Spatial Frequency) ความถี่ไม่ได้หมายถึงความเร็วของเวลา แต่หมายถึง "อัตราการเปลี่ยนแปลงความเข้มของแสงในพื้นที่หนึ่งๆ"
+
+1. **ความถี่เชิงพื้นที่ต่ำ (Low Spatial Frequency)**
+   - **คืออะไร:** พื้นที่ที่สีหรือความสว่าง "ค่อยๆ เปลี่ยน" หรือ "เหมือนเดิมเป็นบริเวณกว้าง" (เหมือนคลื่นลูกใหญ่ๆ ที่ขยับช้าๆ)
+   - **ตัวอย่างในภาพ MRI:** บริเวณเนื้อเยื่อก้อนใหญ่ๆ เช่น เนื้อตับ หรือเนื้อสมอง ที่มีสีเทาโทนเดียวกันกินพื้นที่กว้าง
+   - **ตำแหน่งใน k-space:** ข้อมูลเหล่านี้จะรวมตัวกันอยู่บริเวณ "ตรงกลาง"
+   - **หน้าที่หลัก:** สร้าง "รูปร่างรวมๆ และคอนทราสต์ (Contrast)" ให้เรารู้ว่านี่คือก้อนอวัยวะอะไร
+
+2. **ความถี่เชิงพื้นที่สูง (High Spatial Frequency)**
+   - **คืออะไร:** พื้นที่ที่ความสว่าง เปลี่ยนแบบฉับพลันและรวดเร็ว ภายในระยะทางสั้นๆ เช่น จากขาว ตัดเป็นดำสนิททันที (เหมือนลายทางแคบๆ ที่สลับสีถี่ๆ)
+   - **ตัวอย่างในภาพ MRI:** ขอบของอวัยวะ (Edges), รอยต่อระหว่างกระดูกกับไขสันหลัง, หรือรายละเอียดเส้นเลือดเส้นเล็กๆ
+   - **ตำแหน่งใน k-space:** ข้อมูลเหล่านี้จะกระจายตัวอยู่บริเวณ "ขอบนอก"
+   - **หน้าที่หลัก:** สร้าง "ความคมชัด (Resolution) และรายละเอียดเล็กๆ" ทำให้ภาพไม่เบลอ
+
+ซึ่งจะให้ผู้เรียนได้ลองปรับหน้าตาของภาพ K-Space แล้วเปรียบเทียบความแตกต่างด้วยการปรับ High-pass filter และ Low-pass filter เพื่อดูลักษณะและความสำคัญของข้อมูลบริเวณกลางและขอบนอกของ K-space
+เมื่อเราจำแนกข้อมูลใน k-space ออกเป็นความถี่ต่ำ (ตรงกลาง) และความถี่สูง (ขอบนอก) ได้แล้ว เราสามารถเลือก "หยิบ" หรือ "ทิ้ง" ข้อมูลบางส่วนเพื่อดูผลลัพธ์ได้ เรียกว่าการใช้ตัวกรอง (Filter)
+""")
+
 st.divider()
-st.write("""ซึ่งจะให้ผู้เรียนได้ลองปรับหน้าตาของภาพ K-Space แล้วเปรียบเทียบความแตกต่างด้วยการปรับ High-pass filter และ Low-pass filter เพื่อดูลักษณะและความสำคัญของข้อมูลบริเวณกลางและขอบนอกของ K-space เมื่อเราจำแนกข้อมูลใน k-space ออกเป็นความถี่ต่ำ (ตรงกลาง) และความถี่สูง (ขอบนอก) ได้แล้ว เราสามารถเลือก "หยิบ" หรือ "ทิ้ง" ข้อมูลบางส่วนเพื่อดูผลลัพธ์ได้ เรียกว่าการใช้ตัวกรอง (Filter)""")
-
-f_type = st.radio("เลือกชนิดตัวกรอง:", ["Low-pass Filter", "High-pass Filter"], horizontal=True)
-
-Y_dist, X_dist = np.ogrid[-112:112, -112:112]
-d = np.sqrt(X_dist**2 + Y_dist**2)
-
-if f_type == "Low-pass Filter":
-    st.markdown("**Low-pass Filter (ตัวกรองปล่อยความถี่ต่ำผ่าน):**")
-    st.write('ทำงานอย่างไร: "อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้ ส่วนข้อมูลขอบนอก (ความถี่สูง) ให้ทิ้งไป"')
-    rad = st.slider("รัศมีวงกลม (Radius):", 0, 112, 112)
-    mask = d <= rad
-    msg = 'เราจะได้ภาพที่มี "คอนทราสต์" ดูออกว่าเป็นอวัยวะอะไร แต่ภาพจะ "เบลอ" (Blurry) เพราะข้อมูลเส้นขอบถูกทิ้งไปแล้ว'
-else:
-    st.markdown("**High-pass Filter (ตัวกรองปล่อยความถี่สูงผ่าน):**")
-    st.write("ทำงานอย่างไร: อนุญาตให้เฉพาะข้อมูลขอบนอก (ความถี่สูง) ผ่านไปได้ ส่วนข้อมูลตรงกลางทิ้ง")
-    rad = st.slider("รัศมีวงกลม (Radius):", 0, 112, 0)
-    mask = d >= rad
-    msg = 'ภาพจะสูญเสียคอนทราสต์ไปจนเกือบมืดสนิท แต่จะปรากฏ "เส้นขอบร่าง" (Outline) ของอวัยวะขึ้นมาอย่างคมชัด'
-
-# คำนวณภาพผลลัพธ์
-filtered_k = k_data * mask
-col_f1, col_f2 = st.columns(2)
 
+# --- Interactive Part 2: Slide bar แบบ High/Low Pass ---
+st.subheader("ตัวกรอง K-Space (Interactive Filters)")
+
+if 'filter_type' not in st.session_state:
+    st.session_state.filter_type = 'Low-pass Filter'
+if 'filter_radius' not in st.session_state:
+    st.session_state.filter_radius = 112
+
+def reset_filter():
+    st.session_state.filter_type = 'Low-pass Filter'
+    st.session_state.filter_radius = 112
+
+col_f1, col_f2 = st.columns([1, 1.5])
 with col_f1:
-    st.image(process_image(filtered_k), caption="K-Space Filtered", width=300)
+    filter_choice = st.radio("เลือกรูปแบบ Filter", ['Low-pass Filter', 'High-pass Filter'], key='filter_type')
+    
+    if filter_choice == 'Low-pass Filter':
+        st.slider("ปรับระดับการให้ข้อมูลผ่าน (จากเต็มไปหาแคบลง)", 0, 112, value=112, key='filter_radius', help="ยิ่งลดค่า ข้อมูลขอบนอกยิ่งหาย เหลือแต่ตรงกลาง")
+    else:
+        st.slider("ปรับระดับการตัดข้อมูลตรงกลาง (จาก 0 ไปหาสูงสุด)", 0, 112, value=0, key='filter_radius', help="ยิ่งเพิ่มค่า ข้อมูลตรงกลางยิ่งหาย เหลือแต่เส้นขอบ")
+        
+    st.button("Reset ค่า Filter", on_click=reset_filter)
+
 with col_f2:
-    st.image(process_image(filtered_k, is_kspace=False), caption="MRI Result (Single Slice)", width=300)
+    if filter_choice == 'Low-pass Filter':
+        with st.expander("รายละเอียด Low-pass Filter", expanded=True):
+            st.markdown("""
+            **Low-pass Filter (ตัวกรองปล่อยความถี่ต่ำผ่าน):**
+            - **ทำงานอย่างไร:** "อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้ ส่วนข้อมูลขอบนอก (ความถี่สูง) ให้ทิ้งไป"
+            - **ผลลัพธ์ที่ได้:** เราจะได้ภาพที่มี "คอนทราสต์" ดูออกว่าเป็นอวัยวะอะไร แต่ภาพจะ "เบลอ" (Blurry) เพราะข้อมูลเส้นขอบถูกทิ้งไปแล้ว
+            """)
+    else:
+        with st.expander("รายละเอียด High-pass Filter", expanded=True):
+            st.markdown("""
+            **High-pass Filter (ตัวกรองปล่อยความถี่สูงผ่าน):**
+            - **ทำงานอย่างไร:** อนุญาตให้เฉพาะข้อมูลขอบนอก (ความถี่สูง) ผ่านไปได้ ส่วนข้อมูลตรงกลางทิ้ง
+            - **ผลลัพธ์ที่ได้:** ภาพจะสูญเสียคอนทราสต์ไปจนเกือบมืดสนิท แต่จะปรากฏ "เส้นขอบร่าง" (Outline) ของอวัยวะขึ้นมาอย่างคมชัด
+            """)
+
+# คำนวณผลลัพธ์ Filter
+size = 224
+center = size // 2
+Y, X = np.ogrid[:size, :size]
+dist_from_center = np.sqrt((X - center)**2 + (Y - center)**2)
+
+mask = np.ones((size, size))
+radius = st.session_state.filter_radius
+
+if filter_choice == 'Low-pass Filter':
+    mask[dist_from_center > radius] = 0
+elif filter_choice == 'High-pass Filter':
+    mask[dist_from_center < radius] = 0
+
+filtered_kspace = kspace_data * mask
+
+# แสดงผลภาพซ้ายและขวา
+col_img1, col_img2 = st.columns(2)
+
+with col_img1:
+    fig_k, ax_k = plt.subplots(figsize=(5, 5))
+    filt_k_mag = np.log(np.abs(filtered_kspace) + 1)
+    ax_k.imshow(filt_k_mag, cmap='gray')
+    ax_k.set_title(f"ภาพ K-Space ที่ถูกกรอง", fontweight='bold')
+    ax_k.axis('off')
+    st.pyplot(fig_k)
 
-st.success(f"**ผลลัพธ์ที่ได้:** {msg}")
+with col_img2:
+    mri_img = kspace_to_image(filtered_kspace)
+    fig_m, ax_m = plt.subplots(figsize=(5, 5))
+    ax_m.imshow(mri_img, cmap='gray')
+    ax_m.set_title("ภาพ MRI ผลลัพธ์ (ขนาด 224x224)", fontweight='bold')
+    ax_m.axis('off')
+    st.pyplot(fig_m)