Update app.py

app.py

@@ -1,550 +1,187 @@
 import streamlit as st
 import numpy as np
+import scipy.io
 import matplotlib.pyplot as plt
-import matplotlib.patches as patches
-from mpl_toolkits.mplot3d import Axes3D
 
-# ==========================================
-# ⚙️ ตั้งค่าหน้าเว็บ (ต้องเป็นคำสั่งแรกเสมอ)
-# ==========================================
-st.set_page_config(page_title="MRI Physics Simulator", layout="wide", initial_sidebar_state="expanded")
+# ตั้งค่าหน้าเว็บให้กว้าง
+st.set_page_config(layout="wide", page_title="K-Space to MRI Image")
+
+# โหลดข้อมูล K-space จากไฟล์ mat
+@st.cache_data
+def load_kspace_data():
+    try:
+        # สมมติว่าไฟล์ชื่อ kspace.mat และมีตัวแปรชื่อ kspace ด้านใน
+        mat = scipy.io.loadmat('kspace.mat')
+        # หากชื่อตัวแปรใน mat ไม่ใช่ 'kspace' สามารถเปลี่ยนให้ตรงกับที่มีได้
+        key = [k for k in mat.keys() if not k.startswith('__')][0]
+        return mat[key]
+    except Exception as e:
+        st.error(f"ไม่พบไฟล์ kspace.mat หรือไฟล์มีปัญหา: {e}")
+        # ข้อมูลจำลองกรณีไม่เจอไฟล์
+        img = np.zeros((256, 256))
+        img[100:156, 100:156] = 1
+        return np.fft.fftshift(np.fft.fft2(img))
+
+kspace = load_kspace_data()
+ny, nx = kspace.shape
+
+# ฟังก์ชันแสดงความสว่างของ K-space
+def get_magnitude(k):
+    return np.log(1 + np.abs(k))
+
+# ฟังก์ชันแปลงกลับเป็นภาพ MRI (Inverse Fourier Transform)
+def reconstruct_mri(k):
+    return np.abs(np.fft.ifft2(np.fft.ifftshift(k)))
 
 # ==========================================
-# 🎨 ฟังก์ชันวาดกราฟ 3D & 2D แบบ Interactive
+# ส่วนเนื้อหาของเว็บ
 # ==========================================
-def draw_3d_sphere(ax):
-    u = np.linspace(0, 2 * np.pi, 50)
-    v = np.linspace(0, np.pi, 50)
-    x = np.outer(np.cos(u), np.sin(v))
-    y = np.outer(np.sin(u), np.sin(v))
-    z = np.outer(np.ones(np.size(u)), np.cos(v))
-    ax.plot_surface(x, y, z, color='royalblue', alpha=0.1, edgecolor='none')
-    ax.plot([-1.2, 1.2], [0, 0], [0, 0], color='gray', alpha=0.5, ls='--', lw=1)
-    ax.plot([0, 0], [-1.2, 1.2], [0, 0], color='gray', alpha=0.5, ls='--', lw=1)
-    ax.plot([0, 0], [0, 0], [-1.2, 1.2], color='white', alpha=0.5, ls='-', lw=1.5)
-    ax.text(1.3, 0, 0, 'x', color='w', fontsize=10)
-    ax.text(0, 1.3, 0, 'y', color='w', fontsize=10)
-    ax.text(0, 0, 1.3, 'z (B0)', color='w', fontsize=10, fontweight='bold')
-    ax.set_axis_off()
-    ax.set_xlim([-1.2, 1.2]); ax.set_ylim([-1.2, 1.2]); ax.set_zlim([-1.2, 1.2])
-    ax.view_init(elev=20, azim=45)
-
-def draw_2d_circle(ax):
-    circle = patches.Circle((0, 0), 1, fill=False, color='gray', alpha=0.5)
-    ax.add_patch(circle)
-    ax.plot([-1.2, 1.2], [0, 0], 'gray', ls='--', alpha=0.5)
-    ax.plot([0, 0], [-1.2, 1.2], 'gray', ls='--', alpha=0.5)
-    ax.text(1.2, 0, 'x', color='w', fontsize=10)
-    ax.text(0, 1.2, 'y', color='w', fontsize=10)
-    ax.set_xlim([-1.3, 1.3]); ax.set_ylim([-1.3, 1.3])
-    ax.set_axis_off()
-    ax.set_aspect('equal')
-
-def draw_vector(ax, origin, vec, color, lw=2, alpha=1.0, is_3d=True):
-    if is_3d:
-        ax.quiver(origin[0], origin[1], origin[2], vec[0], vec[1], vec[2], color=color, linewidth=lw, alpha=alpha)
-    else:
-        ax.annotate('', xy=(vec[0], vec[1]), xytext=(origin[0], origin[1]),
-                    arrowprops=dict(arrowstyle="->", color=color, lw=lw, alpha=alpha))
-
-def plot_interactive_sequence(seq_type, step):
-    plt.style.use('dark_background')
-    fig = plt.figure(figsize=(10, 5))
-    fig.patch.set_facecolor('#1e1e2f')
-    fig.subplots_adjust(left=0.05, right=0.95, top=0.95, bottom=0.05) 
-
-    ax_3d = fig.add_axes([0.05, 0.55, 0.4, 0.45], projection='3d')
-    ax_2d = fig.add_axes([0.55, 0.55, 0.4, 0.45])
-    ax_t = fig.add_axes([0.05, 0.05, 0.9, 0.4])
-    
-    ax_3d.set_facecolor('#1e1e2f')
-    ax_2d.set_facecolor('#1e1e2f')
-    ax_t.set_facecolor('#1e1e2f')
-
-    draw_3d_sphere(ax_3d)
-    ax_3d.set_title("3D Vector (Mz)", color='w', fontsize=12, pad=-10, loc='left')
-    draw_2d_circle(ax_2d)
-    ax_2d.set_title("Transverse Plane (Mxy)", color='w', fontsize=12, pad=-10, loc='left')
-
-    ax_t.set_title("Detailed Pulse Sequence Timeline", color='w', fontsize=12, pad=10, loc='left')
-    ax_t.axis('off')
-    ax_t.set_xlim(0, 10); ax_t.set_ylim(-0.5, 4.5)
-    
-    ax_t.text(-0.2, 4.0, "RF", color='cyan', va='center', ha='right', fontweight='bold')
-    ax_t.text(-0.2, 3.0, "Gz (Slice)", color='orange', va='center', ha='right', fontweight='bold')
-    ax_t.text(-0.2, 2.0, "Gy (Phase)", color='yellow', va='center', ha='right', fontweight='bold')
-    ax_t.text(-0.2, 1.0, "Gx (Freq)", color='orange', va='center', ha='right', fontweight='bold')
-    ax_t.text(-0.2, 0.0, "Signal", color='w', va='center', ha='right', fontweight='bold')
-    
-    for i in range(5):
-        ax_t.plot([0, 10], [i, i], color='gray', alpha=0.3)
-
-    if seq_type == 'SE':
-        ax_t.plot([4, 4], [-0.5, 4.5], 'gray', ls='--', alpha=0.3)
-        ax_t.plot([7, 7], [-0.5, 4.5], 'gray', ls='--', alpha=0.3)
-        ax_t.text(4, -0.4, "TE/2", color='gray', ha='center', fontsize=9)
-        ax_t.text(7, -0.4, "TE (Echo)", color='gray', ha='center', fontsize=9)
-        
-        ax_t.plot([1.0, 1.0], [4.0, 4.5], color='cyan', lw=3); ax_t.text(1.0, 4.6, "90°", color='cyan', ha='center')
-        ax_t.plot([4.0, 4.0], [4.0, 4.7], color='cyan', lw=4); ax_t.text(4.0, 4.8, "180°", color='cyan', ha='center')
-        
-        ax_t.fill_between([0.8, 1.2], 3.0, 3.4, color='orange', alpha=0.8)
-        ax_t.fill_between([1.2, 1.6], 3.0, 2.7, color='orange', alpha=0.8)
-        ax_t.fill_between([3.7, 4.3], 3.0, 3.4, color='orange', alpha=0.8)
-        
-        for offset in np.linspace(-0.3, 0.3, 5):
-            ax_t.plot([2.0, 2.5], [2+offset, 2+offset], 'yellow', lw=2)
-        ax_t.fill_between([2.0, 2.5], 1.7, 2.3, color='yellow', alpha=0.2)
-        
-        ax_t.fill_between([2.6, 3.1], 1.0, 1.4, color='orange', alpha=0.8)
-        ax_t.fill_between([6.0, 8.0], 1.0, 1.4, color='orange', alpha=0.8)
-        
-        x_sig = np.linspace(6.2, 7.8, 50)
-        y_sig = 0.0 + 0.8 * np.exp(-((x_sig-7)**2)/0.1) * np.sin(30*x_sig)**2
-        ax_t.plot(x_sig, y_sig, color='red', lw=2)
-
-        if step == 1:
-            draw_vector(ax_3d, (0,0,0), (0,0,1), 'royalblue')
-            ax_2d.text(0, -0.3, "No Signal", color='gray', ha='center')
-        elif step == 2:
-            draw_vector(ax_3d, (0,0,0), (1,0,0), 'crimson')
-            draw_vector(ax_2d, (0,0), (1,0), 'crimson', is_3d=False)
-            ax_t.axvline(1.0, color='yellow', ls=':', alpha=0.5)
-        elif step == 3:
-            draw_vector(ax_3d, (0,0,0), (np.cos(0.4),np.sin(0.4),0), 'crimson', alpha=0.6)
-            draw_vector(ax_3d, (0,0,0), (1,0,0), 'crimson', alpha=0.6)
-            draw_vector(ax_3d, (0,0,0), (np.cos(-0.4),np.sin(-0.4),0), 'crimson', alpha=0.6)
-            draw_vector(ax_2d, (0,0), (np.cos(0.4),np.sin(0.4)), 'crimson', alpha=0.6, is_3d=False)
-            draw_vector(ax_2d, (0,0), (1,0), 'crimson', alpha=0.6, is_3d=False)
-            draw_vector(ax_2d, (0,0), (np.cos(-0.4),np.sin(-0.4)), 'crimson', alpha=0.6, is_3d=False)
-            ax_t.axvline(2.5, color='yellow', ls=':', alpha=0.5)
-        elif step == 4:
-            draw_vector(ax_3d, (0,0,0), (-np.cos(0.4),np.sin(0.4),0), 'violet', alpha=0.8)
-            draw_vector(ax_3d, (0,0,0), (-1,0,0), 'violet', alpha=0.8)
-            draw_vector(ax_3d, (0,0,0), (-np.cos(-0.4),np.sin(-0.4),0), 'violet', alpha=0.8)
-            draw_vector(ax_2d, (0,0), (-np.cos(0.4),np.sin(0.4)), 'violet', alpha=0.8, is_3d=False)
-            draw_vector(ax_2d, (0,0), (-1,0), 'violet', alpha=0.8, is_3d=False)
-            draw_vector(ax_2d, (0,0), (-np.cos(-0.4),np.sin(-0.4)), 'violet', alpha=0.8, is_3d=False)
-            ax_t.axvline(4.0, color='yellow', ls=':', alpha=0.5)
-        elif step == 5:
-            draw_vector(ax_3d, (0,0,0), (-np.cos(0.2),np.sin(0.2),0), 'forestgreen', alpha=0.8)
-            draw_vector(ax_3d, (0,0,0), (-1,0,0), 'forestgreen', alpha=0.8)
-            draw_vector(ax_3d, (0,0,0), (-np.cos(-0.2),np.sin(-0.2),0), 'forestgreen', alpha=0.8)
-            draw_vector(ax_2d, (0,0), (-np.cos(0.2),np.sin(0.2)), 'forestgreen', alpha=0.8, is_3d=False)
-            draw_vector(ax_2d, (0,0), (-1,0), 'forestgreen', alpha=0.8, is_3d=False)
-            draw_vector(ax_2d, (0,0), (-np.cos(-0.2),np.sin(-0.2)), 'forestgreen', alpha=0.8, is_3d=False)
-            ax_t.axvline(5.5, color='yellow', ls=':', alpha=0.5)
-        elif step == 6:
-            draw_vector(ax_3d, (0,0,0), (-1,0,0), 'red', lw=3)
-            draw_vector(ax_2d, (0,0), (-1,0), 'red', lw=3, is_3d=False)
-            ax_t.axvline(7.0, color='yellow', ls=':', alpha=0.5)
-
-    elif seq_type == 'GRE':
-        ax_t.plot([5, 5], [-0.5, 4.5], 'gray', ls='--', alpha=0.3)
-        ax_t.text(5, -0.4, "TE (Echo)", color='gray', ha='center', fontsize=9)
-        
-        ax_t.plot([1.0, 1.0], [4.0, 4.4], color='cyan', lw=3); ax_t.text(1.0, 4.5, "α°", color='cyan', ha='center')
-        ax_t.fill_between([0.8, 1.2], 3.0, 3.4, color='orange', alpha=0.8)
-        ax_t.fill_between([1.2, 1.6], 3.0, 2.7, color='orange', alpha=0.8)
-        
-        for offset in np.linspace(-0.3, 0.3, 5):
-            ax_t.plot([2.0, 2.5], [2+offset, 2+offset], 'yellow', lw=2)
-        ax_t.fill_between([2.0, 2.5], 1.7, 2.3, color='yellow', alpha=0.2)
-        
-        ax_t.fill_between([2.6, 3.1], 1.0, 0.6, color='orange', alpha=0.8)
-        ax_t.fill_between([4.0, 6.0], 1.0, 1.4, color='orange', alpha=0.8)
-        
-        x_sig = np.linspace(4.2, 5.8, 50)
-        y_sig = 0.0 + 0.8 * np.exp(-((x_sig-5)**2)/0.1) * np.sin(30*x_sig)**2
-        ax_t.plot(x_sig, y_sig, color='red', lw=2)
-
-        if step == 1:
-            draw_vector(ax_3d, (0,0,0), (0,0,1), 'royalblue')
-            ax_2d.text(0, -0.3, "No Signal", color='gray', ha='center')
-        elif step == 2:
-            draw_vector(ax_3d, (0,0,0), (0.7,0,0.7), 'cyan')
-            draw_vector(ax_2d, (0,0), (0.7,0), 'cyan', is_3d=False)
-            ax_t.axvline(1.0, color='yellow', ls=':', alpha=0.5)
-        elif step == 3:
-            draw_vector(ax_3d, (0,0,0), (0.7*np.cos(0.5),0.7*np.sin(0.5),0.7), 'orange', alpha=0.6)
-            draw_vector(ax_3d, (0,0,0), (0.7,0,0.7), 'orange', alpha=0.6)
-            draw_vector(ax_3d, (0,0,0), (0.7*np.cos(-0.5),0.7*np.sin(-0.5),0.7), 'orange', alpha=0.6)
-            draw_vector(ax_2d, (0,0), (0.7*np.cos(0.5),0.7*np.sin(0.5)), 'orange', alpha=0.6, is_3d=False)
-            draw_vector(ax_2d, (0,0), (0.7,0), 'orange', alpha=0.6, is_3d=False)
-            draw_vector(ax_2d, (0,0), (0.7*np.cos(-0.5),0.7*np.sin(-0.5)), 'orange', alpha=0.6, is_3d=False)
-            ax_t.axvline(2.8, color='yellow', ls=':', alpha=0.5)
-        elif step == 4:
-            draw_vector(ax_3d, (0,0,0), (0.7*np.cos(0.2),0.7*np.sin(0.2),0.7), 'yellowgreen', alpha=0.8)
-            draw_vector(ax_3d, (0,0,0), (0.7,0,0.7), 'yellowgreen', alpha=0.8)
-            draw_vector(ax_3d, (0,0,0), (0.7*np.cos(-0.2),0.7*np.sin(-0.2),0.7), 'yellowgreen', alpha=0.8)
-            draw_vector(ax_2d, (0,0), (0.7*np.cos(0.2),0.7*np.sin(0.2)), 'yellowgreen', alpha=0.8, is_3d=False)
-            draw_vector(ax_2d, (0,0), (0.7,0), 'yellowgreen', alpha=0.8, is_3d=False)
-            draw_vector(ax_2d, (0,0), (0.7*np.cos(-0.2),0.7*np.sin(-0.2)), 'yellowgreen', alpha=0.8, is_3d=False)
-            ax_t.axvline(4.0, color='yellow', ls=':', alpha=0.5)
-        elif step == 5:
-            draw_vector(ax_3d, (0,0,0), (0.7,0,0.7), 'red', lw=3)
-            draw_vector(ax_2d, (0,0), (0.7,0), 'red', lw=3, is_3d=False)
-            ax_t.axvline(5.0, color='yellow', ls=':', alpha=0.5)
-
-    st.pyplot(fig)
-    plt.close(fig)
 
-# ==========================================
-# 🧭 เมนูด้านซ้าย (Sidebar)
-# ==========================================
-st.sidebar.title("เมนูหลัก (Navigation)")
-page = st.sidebar.radio("เลือกหน้าเนื้อหา:", [
-    "🧠 1. Image Formation (Intro - K-Space)", 
-    "🌊 2. Pulse Sequences & Simulator"
-])
-st.sidebar.markdown("---")
-
-# ==============================================================================
-# หน้าที่ 1: IMAGE FORMATION
-# ==============================================================================
-if page == "🧠 1. Image Formation (Intro - K-Space)":
-    st.title("🧠 บทที่ 3: รูปแบบภาพและลำดับพัลส์พื้นฐานของเอ็มอาร์ไอ")
-    
-    st.header("การกำหนดระบบพิกัด (MRI Coordinate System)")
-    st.write("**แกน Z (Longitudinal):** แนวขนานกับตัวผู้ป่วย (จากหัวไปเท้า)")
-    st.write("**แกน Y (Vertical):** แนวตั้งฉากกับพื้น (จากหน้าไปหลัง/ท้องไปหลัง)")
-    st.write("**แกน X (Horizontal):** แนวนอน (จากซ้ายไปขวา)")
-    st.markdown("---")
-
-    st.header("จากสปินสู่สัญญาณ NMR (Signal Generation)")
-    st.write("1. เมื่อสปินอยู่ในสนามแม่เหล็กหลัก (B0) จะเกิดแรงแม่เหล็กสุทธิ (Net Magnetization)")
-    st.write("2. เมื่อส่งคลื่น RF Pulse ที่ความถี่ Larmor Frequency เข้าไป สปินจะถูกผลักให้เบนออกจากแนวเดิม")
-    st.write("3. เมื่อหยุดส่ง RF สปินจะคายพลังงานกลับคืนสู่สภาวะสมดุล เกิดสัญญาณ NMR Signal (FID)")
-    st.info("สัญญาณ NMR (อนาล็อก) ➡️ ADC (ดิจิทัล) ➡️ บันทึกลงใน K-space ➡️ Fourier Transform ➡️ ภาพ MRI")
-    st.markdown("---")
-
-    st.title("Image Formation")
-    
-    # ---------------------------------------------------------
-    st.subheader("1. การระบุตำแหน่งของสปินโดยใช้สนามแม่เหล็กเกรเดียนท์ (Spin localization)")
-    st.write("- **โหมดไม่เปิด Gradient:** สัญญาณ NMR จะมีเพียงความถี่เดียว")
-    st.write("- **โหมดเปิด Gradient (Gx):** จะทำให้สปินหมุนควงด้วยความถี่ที่ต่า��กัน จึงสามารถระบุตำแหน่งสัญญาณได้")
-    st.write("- **ความถี่ของสปินจะเพิ่มขึ้นเมื่อสนามแม่เหล็กเกรเดียนท์ (Gx) มีความแรงเพิ่มขึ้น**")
-    
-    use_gradient = st.toggle("เปิด/ปิดการทำงานของ Gradient (Gx)", value=True)
-    
-    fig1, ax1 = plt.subplots(figsize=(8, 3))
-    fig1.subplots_adjust(left=0.1, right=0.95, top=0.85, bottom=0.2) 
-    x_pos = np.linspace(-10, 10, 10)
-    
-    if use_gradient:
-        freq = 63.85 + (0.01 * x_pos)
-        title = "Gradient ON: Frequencies vary by position"
-        color = 'r'
-    else:
-        freq = np.full_like(x_pos, 63.85)
-        title = "Gradient OFF: All spins have the same frequency"
-        color = 'blue'
-        
-    ax1.plot(x_pos, freq, marker='o', color=color, lw=2)
-    ax1.vlines(x_pos, 63.7, freq, colors=color, alpha=0.5)
-    ax1.set_xlabel("X Position (cm)")
-    ax1.set_ylabel("Larmor Freq (MHz)")
-    ax1.set_title(title)
-    ax1.grid(True, alpha=0.3)
-    ax1.set_ylim(63.7, 63.98)
+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.header("องค์ประกอบของ K-Space")
+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 จะสร้างภาพมุมซ้ายบนของภาพอวัยวะ)
+""")
+
+st.subheader("1 จุดบน k-space")
+
+# --- Interactive 1 ---
+st.markdown("<p style='color:#ff4b4b; font-weight:bold;'>ไอเดีย Interactive หัวข้อนี้ ให้ผู้เรียนกดแต่ละจุดของ K-space ละให้แสดงภาพคลื่นข้อมูลของจุดนั้นด้านซ้ายมือ และมีเส้นลากทิศทางของตำแหน่งของจุดเมื่อเทียบกับจุดศูนย์กลาง จะได้ให้เข้าใจว่ามันเอียงไปทางเดียวกับคลื่น พอผู้เรียนอยากเปลี่ยนก็กด reset ได้</p>", unsafe_allow_html=True)
+
+if 'kx_point' not in st.session_state:
+    st.session_state['kx_point'] = 0
+if 'ky_point' not in st.session_state:
+    st.session_state['ky_point'] = 0
+
+if st.button("Reset จุด"):
+    st.session_state['kx_point'] = 0
+    st.session_state['ky_point'] = 0
+
+# ใช้ Slider แทนการกดลงบนภาพโดยตรงเพื่อให้ใช้งานได้ใน Streamlit ทันที
+col_slider1, col_slider2 = st.columns(2)
+with col_slider1:
+    kx_val = st.slider("พิกัด kx (แนวนอน)", -nx//2, nx//2-1, st.session_state['kx_point'], key="kx_slider")
+with col_slider2:
+    ky_val = st.slider("พิกัด ky (แนวตั้ง)", -ny//2, ny//2-1, st.session_state['ky_point'], key="ky_slider")
+
+st.session_state['kx_point'] = kx_val
+st.session_state['ky_point'] = ky_val
+
+col_plot1, col_plot2 = st.columns(2)
+with col_plot1:
+    fig1, ax1 = plt.subplots(figsize=(5, 5))
+    ax1.imshow(get_magnitude(kspace), cmap='gray', extent=[-nx//2, nx//2, -ny//2, ny//2])
+    ax1.plot(kx_val, ky_val, 'ro', markersize=8) # จุดที่เลือก
+    ax1.plot([0, kx_val], [0, ky_val], 'r--', linewidth=2) # เส้นลากจากจุดศูนย์กลาง
+    ax1.set_title("K-Space")
     st.pyplot(fig1)
-    st.markdown("---")
-
-    # ---------------------------------------------------------
-    st.subheader("2. การเลือกสไลซ์ (Slice Selection)")
-    st.write("การเลือกตำแหน่งสไลซ์ทำได้โดยการใช้ RF pulse ที่มีความถี่เท่ากับ Larmor Frequency ที่จำเพาะกับระยะทางในแนวแกน Z ที่เราสนใจทำการสแกน โดยใช้สนามแม่เหล็กเกรเดียนท์ Gz")
-    st.latex(r"Slice\ Thickness = \frac{2\pi \cdot BW}{\gamma \cdot G_z}")
-    
-    st.markdown('<div style="background-color:#ffebee; padding:15px; border-radius:10px;">', unsafe_allow_html=True)
-    col_s1, col_s2 = st.columns(2)
-    with col_s1:
-        gz_slope = st.slider("ปรับความชันเกรเดียนท์ Gz (mT/m)", 10, 50, 25, step=1)
-    with col_s2:
-        bandwidth = st.slider("ปรับ Bandwidth คลื่นวิทยุ (Hz)", 500, 2000, 1000, step=50)
-    
-    slice_thickness = (bandwidth / gz_slope) * 0.1 
-    st.markdown(f"**ความหนาของสไลซ์ที่ได้:** <span style='color:red; font-size:18px;'>{slice_thickness:.2f} mm</span>", unsafe_allow_html=True)
-    
-    fig2, ax2 = plt.subplots(figsize=(8, 3))
-    fig2.subplots_adjust(left=0.1, right=0.95, top=0.85, bottom=0.2) 
-    z_axis = np.linspace(-10, 10, 100)
-    freq_line = gz_slope * z_axis
-    ax2.plot(z_axis, freq_line, label=f'Gz = {gz_slope}', color='blue', lw=2)
-    ax2.axhline(y=bandwidth/2, color='red', linestyle='--', label='+ BW/2', lw=2)
-    ax2.axhline(y=-bandwidth/2, color='red', linestyle='--', label='- BW/2', lw=2)
-    ax2.fill_betweenx([-bandwidth/2, bandwidth/2], -slice_thickness/2, slice_thickness/2, color='red', alpha=0.3, label='Slice Thickness')
-    ax2.set_xlabel('Z Position')
-    ax2.set_ylabel('Frequency')
-    ax2.set_title('Slice Selection Simulation')
-    ax2.set_ylim(-600, 600)
-    ax2.legend(fontsize=10, loc='lower right')
+
+with col_plot2:
+    fig2, ax2 = plt.subplots(figsize=(5, 5))
+    Y_grid, X_grid = np.mgrid[-ny//2:ny//2, -nx//2:nx//2]
+    # คลื่นความถี่ 2D
+    wave = np.cos(2 * np.pi * (kx_val * X_grid / nx + ky_val * Y_grid / ny))
+    ax2.imshow(wave, cmap='gray')
+    ax2.set_title("2D Sinusoidal Wave")
+    ax2.axis('off')
     st.pyplot(fig2)
-    st.markdown('</div>', unsafe_allow_html=True)
-    st.markdown("---")
-
-    # ---------------------------------------------------------
-    st.subheader("3. การเข้ารหัสในแนวความถี่และแนวเฟส (Frequency and Phase encoding)")
-    st.write("ในการสร้างภาพ 2 มิติ จำเป็นต้องใช้ Gx และ Gy เพื่อให้ความถี่และเฟสต่างกัน:")
-    st.write("- **ระนาบ X เป็นแนวความถี่ (Frequency Encoding):** ทำให้ความเร็วการหมุนต่างกัน")
-    st.write("- **ระนาบ Y เป็นแนวเฟส (Phase Encoding):** ทำให้มุมเริ่มต้น (เฟส) การหมุนต่างกัน")
-    
-    fig3, (ax_f, ax_p) = plt.subplots(1, 2, figsize=(10, 3.5))
-    fig3.subplots_adjust(left=0.05, right=0.95, top=0.85, bottom=0.1) 
-    
-    t = np.linspace(0, 4*np.pi, 200)
-    ax_f.plot(t, np.sin(3*t) + 2.5, 'yellow', lw=2)
-    ax_f.plot(t, np.sin(t) - 2.5, 'yellow', lw=2)
-    ax_f.text(12, 3.5, "High Freq", color='white')
-    ax_f.text(12, -1.5, "Low Freq", color='white')
-    ax_f.set_title("Different Frequencies", color='white')
-    ax_f.set_facecolor('#000033')
-    ax_f.axis('off')
-    
-    ax_p.plot(t, np.sin(t) + 2.5, 'yellow', lw=2)
-    ax_p.plot(t, -np.cos(t) - 2.5, 'yellow', lw=2)  
-    
-    circ1 = patches.Circle((15, 2.5), 1.8, fill=False, color='w')
-    circ2 = patches.Circle((15, -2.5), 1.8, fill=False, color='w')
-    ax_p.add_patch(circ1); ax_p.add_patch(circ2)
-    ax_p.arrow(15, 2.5, 0, -1.2, head_width=0.4, color='yellow', lw=2) 
-    ax_p.arrow(15, -2.5, 1.2, 0, head_width=0.4, color='pink', lw=2)   
-    ax_p.text(16, 1.5, "270 Deg", color='pink')
-    ax_p.text(16.5, -2.5, "0 Deg", color='pink')
-    ax_p.set_xlim(0, 18)
-    ax_p.set_title("Different Phases", color='white')
-    ax_p.set_facecolor('#000033')
-    ax_p.axis('off')
-    
-    fig3.patch.set_facecolor('#000033')
-    st.pyplot(fig3)
-    st.markdown("---")
-
-    # ---------------------------------------------------------
-    st.subheader("4. พิกัด k-space แบบสองมิติ (2D K-space)")
-    st.write("การใช้ Gx และ Gy เสมือนการสร้างพิกัดเพื่อให้สปินเข้าไปเติมใน K-space โดยปกติการเก็บข้อมูลใน K-space แบบ 2D จะเก็บทีละเส้นในแนวแกน ky จากศูนย์กลางออกไป หรือจากล่างขึ้นบนจนเต็ม")
-    
-    k_step_radio = st.radio("เลือกลำดับเวลา (Timeline Step):", ["A. เริ่มต้น", "B. เริ่มเก็บข้อมูล", "C. กึ่งกลาง", "D. สิ้นสุดเส้น"], horizontal=True, label_visibility="collapsed")
-    k_step = k_step_radio[0] 
-    
-    if k_step == "A":
-        st.info("📍 **ตำแหน่ง A:** Gx และ Gy เพิ่งเริ่มทำงาน (สัมพันธ์กับจุดกึ่งกลางของ kx และ ky)")
-        time_x, k_x_pos = 0.5, 0.5
-    elif k_step == "B":
-        st.success("📍 **ตำแหน่ง B:** เริ่มบันทึกข้อมูลจุดแรก ของเฟสเส้นนั้น")
-        time_x, k_x_pos = 2.0, 0.1
-    elif k_step == "C":
-        st.warning("📍 **ตำแหน่ง C:** บันทึกข้อมูลถึงกึ่งกลาง K-space ของเส้นนั้น")
-        time_x, k_x_pos = 3.5, 0.5
-    else:
-        st.error("📍 **ตำแหน่ง D:** บันทึกข้อมูลเสร็จสิ้นสำหรับเส้นนั้น (เตรียมเปลี่ยนแถว Gy)")
-        time_x, k_x_pos = 5.0, 0.9
-
-    plt.style.use('dark_background')
-    fig_ks, (ax_seq, ax_k) = plt.subplots(1, 2, figsize=(10, 4))
-    fig_ks.subplots_adjust(left=0.05, right=0.95, top=0.85, bottom=0.1) 
-    fig_ks.patch.set_facecolor('#1e1e2f')
-    ax_seq.set_facecolor('#1e1e2f'); ax_k.set_facecolor('#1e1e2f')
-    
-    ax_seq.axis('off')
-    ax_seq.text(-0.5, 3, 'Gy', va='center', fontweight='bold', color='white')
-    ax_seq.text(-0.5, 1.5, 'Gx', va='center', fontweight='bold', color='white')
-    ax_seq.text(-0.5, 0, 'Echo', va='center', fontweight='bold', color='white')
-    ax_seq.axhline(3, color='gray', lw=0.5); ax_seq.axhline(1.5, color='gray', lw=0.5); ax_seq.axhline(0, color='gray', lw=0.5)
-    
-    ax_seq.fill_between([0.5, 2.0], [3, 3], [3.8, 3.8], color='gray', alpha=0.5)
-    ax_seq.fill_between([0.5, 2.0], [3, 3], [2.2, 2.2], facecolor='none', edgecolor='gray', hatch='--')
-    ax_seq.fill_between([0.5, 2.0], [1.5, 1.5], [0.7, 0.7], color='gray', alpha=0.5)
-    ax_seq.fill_between([2.0, 5.0], [1.5, 1.5], [2.3, 2.3], color='gray', alpha=0.5)
-    
-    x_echo = np.linspace(2.0, 5.0, 100)
-    y_echo = 0.8 * np.exp(-((x_echo-3.5)**2)/0.2) * np.sin(30*x_echo)
-    ax_seq.plot(x_echo, y_echo, 'white')
-    
-    ax_seq.axvline(time_x, color='red', linestyle='--', lw=2)
-    ax_seq.text(time_x, -0.5, f" {k_step} ", color='red', ha='center', bbox=dict(facecolor='white', edgecolor='red', boxstyle='circle'))
-    ax_seq.set_title("Sequence Timeline", fontweight='bold', color='white')
-    ax_seq.set_ylim(-1, 4.5)
-    
-    ax_k.axis('off')
-    ax_k.axhline(0.5, color='gray', lw=0.5); ax_k.axvline(0.5, color='gray', lw=0.5)
-    ax_k.text(0.95, 0.52, 'kx', color='white'); ax_k.text(0.52, 0.95, 'ky', color='white')
-    
-    for i in np.linspace(0.1, 0.9, 9):
-        ax_k.plot([0.1, 0.9], [i, i], color='gray', lw=1)
-        
-    ax_k.plot([0.1, 0.9], [0.5, 0.5], color='cyan', lw=3) 
-    ax_k.plot(k_x_pos, 0.5, 'ro', markersize=10, zorder=5) 
-    
-    if k_step == "A":
-        ax_k.plot(0.5, 0.5, 'wo', markersize=8)
-        ax_k.annotate('', xy=(0.1, 0.5), xytext=(0.5, 0.5), arrowprops=dict(arrowstyle='->', ls='--', color='gray'))
-        ax_k.text(0.52, 0.55, 'A', color='white')
-    
-    ax_k.set_title("K-Space Trajectory", fontweight='bold', color='white')
-    ax_k.set_xlim(0, 1.1); ax_k.set_ylim(0, 1.1)
-    st.pyplot(fig_ks)
-    
-    # --- จำลองการเก็บข้อมูล K-space ---
-    st.markdown('<div style="background-color:#e8eaf6; padding:15px; border-radius:10px;">', unsafe_allow_html=True)
-    st.markdown('**Interactive: การเติมข้อมูล K-space ทีละเฟส (Phase Encoding จากจุดกึ่งกลางขยายออก)**')
-    
-    lines_to_fill = st.slider("จำนวนเส้น Phase Encoding (Ky)", 2, 64, 16, step=2)
-    
-    base_img = np.zeros((64, 64))
-    cv, rv = np.meshgrid(np.arange(64), np.arange(64))
-    base_img[((cv-32)**2 / 15**2) + ((rv-32)**2 / 20**2) < 1] = 1 
-    base_img[((cv-25)**2 / 4**2) + ((rv-35)**2 / 6**2) < 1] = 0.5 
-    
-    k_space = np.fft.fftshift(np.fft.fft2(base_img))
-    mask = np.zeros((64, 64))
-    
-    # เก็บจากศูนย์กลางออกไปด้านนอก (Center-out) 
-    center = 32
-    half_lines = lines_to_fill // 2
-    mask[center-half_lines : center+half_lines, :] = 1
-    
-    k_space_masked = k_space * mask
-    recon_img = np.abs(np.fft.ifft2(np.fft.ifftshift(k_space_masked)))
-    
-    plt.style.use('default')
-    fig_recon, (ax_rk, ax_ri) = plt.subplots(1, 2, figsize=(8, 3.5))
-    fig_recon.subplots_adjust(left=0.05, right=0.95, top=0.85, bottom=0.1) 
-    ax_rk.imshow(np.log(1 + np.abs(k_space_masked)), cmap='gray')
-    ax_rk.set_title(f"K-Space (Filled {lines_to_fill} lines center-out)")
-    ax_rk.axis('off')
-    
-    ax_ri.imshow(recon_img, cmap='gray')
-    ax_ri.set_title("Reconstructed Image")
-    ax_ri.axis('off')
-    st.pyplot(fig_recon)
-    st.markdown('</div>', unsafe_allow_html=True)
-
-# ==============================================================================
-# PAGE 2: PULSE SEQUENCES
-# ==============================================================================
+
+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.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.header("ความถี่เชิงพื้นที่ (Spatial Frequency) คือ")
+st.write("""
+ในทางสัญญาณภาพ (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)
+""")
+
+# --- Toggles สำหรับเนื้อหาของ Filter ตามไฟล์ต้นฉบับ ---
+with st.expander("Low-pass Filter (ตัวกรองปล่อยความถี่ต่ำผ่าน):", expanded=False):
+    st.markdown("<p style='color:#ff4b4b;'>อันนี้ซ่อนใน Toggle</p>", unsafe_allow_html=True)
+    st.write('ทำงานอย่างไร: "อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้ ส่วนข้อมูลขอบนอก (ความถี่สู��) ให้ทิ้งไป"')
+    st.write('ผลลัพธ์ที่ได้: เราจะได้ภาพที่มี "คอนทราสต์" ดูออกว่าเป็นอวัยวะอะไร แต่ภาพจะ "เบลอ" (Blurry) เพราะข้อมูลเส้นขอบถูกทิ้งไปแล้ว อันนี้ซ่อนใน Toggle')
+
+with st.expander("High-pass Filter (ตัวกรองปล่อยความถี่สูงผ่าน):", expanded=False):
+    st.markdown("<p style='color:#ff4b4b;'>อันนี้ซ่อนใน Toggle</p>", unsafe_allow_html=True)
+    st.write("ทำงานอย่างไร: อนุญาตให้เฉพาะข้อมูลขอบนอก (ความถี่สูง) ผ่านไปได้ ส่วนข้อมูลตรงกลางทิ้ง")
+    st.write('ผลลัพธ์ที่ได้: ภาพจะสูญเสียคอนทราสต์ไปจนเกือบมืดสนิท แต่จะปรากฏ "เส้นขอบร่าง" (Outline) ของอวัยวะขึ้นมาอย่างคมชัด อันนี้ซ่อนใน Toggle')
+
+# --- Interactive 2 ---
+st.markdown("<p style='color:#ff4b4b; font-weight:bold;'>ไอเดีย Interactive หัวข้อนี้ อยากได้เป็น Slide bar อะ แบบมีให้กด สองตุ่ม low กับ high ละให้เลื่อนได้ เช่น แบบ low pass ถ้า max เต็มหลอดคือผ่านหมด ละค่อยลดลงมาตามลำดับ ทำให้ภาพตรงกลางจะเล็กเมื่อเทียบกับตอนเต็มหลอด แต่ปรับได้เอง ส่วนแบบสูงก็ตรงข้ามกันจาก 0 คือข้อมูลเต็ม แต่พอยิ่งเลื่อนหลอดเพิ่ม ข้อมูลตรงกลางหาย เหลือแต่ขอบ จนเต็ม Max คือไม่มีเลย ทั้งสองอันนี้จะมีภาพ MRi ที่แปลงแล้วแสดงข้าง ๆ ด้วย ละมีปุ่มให้ reset ได้</p>", unsafe_allow_html=True)
+
+if 'lp_radius' not in st.session_state:
+    st.session_state['lp_radius'] = nx // 2
+if 'hp_radius' not in st.session_state:
+    st.session_state['hp_radius'] = 0
+
+if st.button("Reset Filter"):
+    st.session_state['lp_radius'] = nx // 2
+    st.session_state['hp_radius'] = 0
+
+filter_mode = st.radio("เลือกชนิด Filter:", ("Low-pass", "High-pass"))
+
+Y_dist, X_dist = np.ogrid[-ny//2:ny//2, -nx//2:nx//2]
+dist_from_center = np.sqrt(X_dist**2 + Y_dist**2)
+
+if filter_mode == "Low-pass":
+    r = st.slider("Low-pass Radius (Max เต็มหลอดคือผ่านหมด)", 0, nx//2, st.session_state['lp_radius'], key='lp_slider')
+    st.session_state['lp_radius'] = r
+    mask = dist_from_center <= r
 else:
-    st.title("🌊 บทที่ 3: Basic Pulse Sequences")
-
-    t_se, t_fse, t_ir, t_gre = st.tabs([
-        "🔵 Spin Echo (SE)", 
-        "⚡ Fast Spin Echo", 
-        "🔄 Inversion Recovery (IR)", 
-        "🟢 Gradient Echo (GRE)"
-    ])
-    
-    # ---------------------------------------------------------
-    # TAB 1: Spin Echo
-    # ---------------------------------------------------------
-    with t_se:
-        st.header("1. ลำดับพัลส์สปินเอคโค (Spin Echo Sequence)")
-        st.write("ทำการกระตุ้นสปินด้วย 90° RF pulse ณ ตำแหน่งสไลซ์ที่เลือกโดยใช้สนามแม่เหล็กเกรเดียนท์ Gss เมื่อเวลาผ่านไป TE/2 จะทำการกลับเฟสของสปินด้วย 180° RF pulse (Refocusing pulse) จะเกิดการรวมเฟสของสปินที่เวลา TE ซึ่งเป็นเวลาที่สัญญาณมีค่าสูงสุด (echo signal)")
-        
-        step_se_radio = st.radio("เลือกสเต็ป (SE):", ["1", "2", "3", "4", "5", "6"], horizontal=True, label_visibility="collapsed")
-        step_se = int(step_se_radio)
-        
-        plot_interactive_sequence('SE', step_se)
-        
-        se_descriptions = {
-            1: "1. สภาวะสมดุล: เวกเตอร์แม่เหล็กสุทธิ (Net Magnetization) จัดเรียงตัวตามทิศทางของสนามแม่เหล็กหลัก B0 (แกน Z)",
-            2: "2. 90° RF: คลื่นวิทยุทำมุม 90 องศา ผลักเวกเตอร์ให��ลงมาอยู่ในระนาบตัดขวาง (Mxy) และมีการใช้ Gz เพื่อเลือก Slice",
-            3: "3. Dephase: สปินเริ่มหมุนด้วยความถี่ที่ต่างกันจากการใช้ Gx Pre-phase ทำให้กระจายเฟสออกจากกัน",
-            4: "4. 180° RF: ยิงคลื่นวิทยุ 180 องศา เพื่อพลิกกลับทิศทางของสปิน (Refocusing pulse)",
-            5: "5. Rephase: สปินที่กระจายออกไป เริ่มหมุนกลับมารวมเฟสกันอีกครั้งระหว่างที่เปิด Gx Readout",
-            6: "6. Echo: สปินรวมเฟสกันอย่างสมบูรณ์ เกิดสัญญาณสะท้อนกลับ (Echo signal) สูงสุดที่เวลา TE"
-        }
-        st.info(f"**คำอธิบาย:** {se_descriptions[step_se]}")
-            
-    # ---------------------------------------------------------
-    # TAB 2: Fast Spin Echo
-    # ---------------------------------------------------------
-    with t_fse:
-        st.header("2. ลำดับพัลส์สปินเอคโคแบบเร็ว (Fast Spin Echo)")
-        st.write("การสแกนแบบ Spin Echo ปกติอาจใช้เวลานาน Fast Spin Echo จึงถูกพัฒนาขึ้นโดยการเพิ่มคลื่น 180° (Refocusing pulse) หลายๆ ครั้งภายใน 1 TR ทำให้สามารถเก็บข้อมูล Echo ได้หลายเส้นในครั้งเดียว (เรียกว่า Echo Train Length หรือ ETL) ซึ่งช่วยลดเวลาในการสร้างภาพ")
-        
-        fse_step_radio = st.radio("เลือกสเต็ป (FSE):", ["1", "2", "3", "4", "5", "6"], horizontal=True, label_visibility="collapsed")
-        step_fse = int(fse_step_radio)
-        plot_interactive_sequence('SE', step_fse) 
-        
-        fse_descriptions = {
-            1: "1. สภาวะสมดุล: เวกเตอร์แม่เหล็กสุทธิจัดเรียงตัวตามแกน Z",
-            2: "2. 90° RF: พลิกสปินลงมาอยู่ในระนาบตัดขวาง เริ่มกระบวนการ Dephase",
-            3: "3. 180° RF (1): ยิงคลื่น Refocusing ลูกแรก เพื่อให้สปินกลับมารวมกัน",
-            4: "4. Echo 1: เกิดสัญญาณ Echo ลูกแรก (เก็บข้อมูลเส้นแรก)",
-            5: "5. 180° RF (2): ยิงคลื่น Refocusing ลูกที่สอง เพื่อดึงสปินให้กลับมารวมกันอีกครั้ง (ทำซ้ำจนครบ ETL)",
-            6: "6. Echo 2: เกิดสัญญาณ Echo ลูกที่สอง (เก็บข้อมูลเส้นถัดไป ทำให้สแกนได้เร็วขึ้นมาก)"
-        }
-        st.info(f"**คำอธิบาย:** {fse_descriptions[step_fse]}")
-
-        st.markdown('#### ⏱️ Interactive Scan Time Calculator')
-        st.latex(r"Scan\ Time\ = TR \times N_{phase} \times \frac{1}{ETL}")
-        
-        c1, c2, c3 = st.columns(3)
-        tr = c1.number_input("TR (ms)", 100, 5000, 500, step=100)
-        n_phase = c2.number_input("N-phase", 64, 512, 256, step=64)
-        etl = c3.select_slider("ETL (ลดเวลาสแกน)", [1, 2, 4, 8, 16], value=4)
-        
-        base_time = (tr * n_phase) / 1000
-        new_time = base_time / etl
-        st.markdown(f"**เวลาสแกนแบบ SE:** {base_time:.1f} วินาที")
-        st.markdown(f"**เวลาสแกนแบบ FSE ลดลง {etl} เท่า! เหลือเพียง:** <span style='color:red; font-size:20px;'>{new_time:.1f} วินาที</span>", unsafe_allow_html=True)
-
-    # ---------------------------------------------------------
-    # TAB 3: Inversion Recovery
-    # ---------------------------------------------------------
-    with t_ir:
-        st.header("3. ลำดับพัลส์ Inversion Recovery (IR)")
-        st.write("ลำดับพัลส์พิเศษที่เริ่มต้นด้วยการยิงคลื่น 180° เพื่อกลับทิศทางของแกนแม่เหล็กให้ติดลบ จากนั้นรอเวลา TI (Inversion Time) ก่อนที่จะยิงคลื่น 90° ตามปกติ เทคนิคนี้ใช้กดสัญญาณของเนื���อเยื่อที่เราไม่ต้องการเห็นในภาพ")
-        
-        step_ir_radio = st.radio("เลือกสเต็ป (IR):", ["1", "2", "3", "4", "5", "6"], horizontal=True, label_visibility="collapsed")
-        step_ir = int(step_ir_radio)
-        plot_interactive_sequence('SE', step_ir) 
-        
-        ir_descriptions = {
-            1: "1. สภาวะสมดุล: เวกเตอร์แม่เหล็กสุทธิจัดเรียงตัวตามแกน Z",
-            2: "2. 180° Inversion: พลิกเวกเตอร์ 180 องศาลงไปติดลบ (Mz คว่ำหัวลง)",
-            3: "3. TI Delay: รอเวลาให้เนื้อเยื่อค่อยๆ ฟื้นตัวกลับมาทางบวก จุดนี้จะกะให้เนื้อเยื่อบางชนิดอยู่ตรง 0 พอดี (Null point)",
-            4: "4. 90° RF: ยิงคลื่น 90° เพื่อดึงเวกเตอร์ที่เหลือลงมาที่ระนาบ Mxy (เนื้อเยื่อที่อยู่ตรง 0 จะไม่เกิดสัญญาณในภาพ)",
-            5: "5. 180° Refocus: เข้าสู่กระบวนการ Spin echo ปกติ เพื่อดึงสปินกลับมารวมกัน",
-            6: "6. Echo: สปินรวมเฟสกัน เกิดเป็นสัญญาณภาพที่ถูกกด (Suppress) เนื้อเยื่อที่ไม่ต้องการไปแล้ว"
-        }
-        st.info(f"**คำอธิบาย:** {ir_descriptions[step_ir]}")
-
-        st.markdown('### 🎛️ Simulator โหมดจำลองการกดสัญญาณ (Interactive TI)')
-        
-        ti_slider = st.slider("เลื่อนเปลี่ยนค่า Inversion Time (TI) [ms]", 100, 4000, 2500, step=50)
-        
-        if 100 <= ti_slider <= 200:
-            msg = "💡 **โหมด STIR (Short Tau Inversion Recovery):** กดสัญญาณไขมัน (Fat suppression)"
-            color = "#ffcdd2"
-        elif 2000 <= ti_slider <= 2600:
-            msg = "💧 **โหมด FLAIR (Fluid Attenuated Inversion Recovery):** กดสัญญาณน้ำไขสันหลัง (CSF suppression)"
-            color = "#e3f2fd"
-        else:
-            msg = "⏳ **เนื้อเยื่อกำลังฟื้นตัว:** ยังไม่ถึงจุด Null point ของเนื้อเยื่อหลัก"
-            color = "#fff9c4"
-
-        st.markdown(f'<div style="background-color:{color}; padding:10px; border-radius:5px; height:45px;">{msg}</div><br>', unsafe_allow_html=True)
-
-    # ---------------------------------------------------------
-    # TAB 4: Gradient Echo
-    # ---------------------------------------------------------
-    with t_gre:
-        st.header("4. ลำดับพัลส์เกรเดียนท์เอคโค (Gradient Echo)")
-        st.write("ทำการกระตุ้นสปินด้วยมุม α° (มุมพลิกมักน้อยกว่า 90°) เมื่อเวลาผ่านไปจะเร่งให้สปินแตกเฟส โดยใช้สนามแม่เหล็กเกรเดียนท์ Gfe ฝั่งลบ และตามด้วย Gfe ฝั่งบวก เมื่อพื้นที่รวมกันเป็นศูนย์จะเกิดการรวมเฟส ทำให้เกิดสัญญาณสูงสุด (ต่างจาก spin echo ที่ใช้ 180° RF)")
-        
-        gre_step_radio = st.radio("เลือกสเต็ป (GRE):", ["1", "2", "3", "4", "5"], horizontal=True, label_visibility="collapsed")
-        step_gre = int(gre_step_radio)
-        plot_interactive_sequence('GRE', step_gre)
-        
-        gre_descriptions = {
-            1: "1. สภาวะสมดุล: เวกเตอร์แม่เหล็กสุทธิจัดเรียงตัวตามแกน B0 (แกน Z)",
-            2: "2. α° RF (Alpha Pulse): ยิงคลื่น RF ด้วยมุมพลิก (Flip Angle - α°) ที่น้อยกว่า 90 องศา ข้อดีคือทำให้ Mz ฟื้นตัวกลับมาได้เร็วขึ้น จึงใช้ TR ที่สั้นมากๆ ได้",
-            3: "3. Gfe Dephase: เปิด Gradient แนวความถี่ (Gfe) ฝั่งลบ เพื่อบังคับให้สปินแตกเฟส (กระจายตัว) อย่างรวดเร็ว",
-            4: "4. Gfe Rephase: สลับ Gradient (Gfe) มาฝั่งบวก (Gradient Reversal) สปินที่แตกเฟสออกไปจะค่อยๆ วิ่งกลับมารวมกัน",
-            5: "5. Echo: สปินกลับมารวมเฟสกันตรงกลาง K-space พอดี ทำให้เกิดสัญญาณ Gradient Echo สูงสุดอย่างรวดเร็ว โดยไม่ต้องพึ่งคลื่น 180°"
-        }
-        st.info(f"**คำอธิบาย:** {gre_descriptions[step_gre]}")
-
-        st.write("**ปรากฏการณ์ SSFP (Steady-State Free Precession):**")
-        st.write("ถ้ายิงคลื่น RF ถี่มากๆ จน TR สั้นกว่าเวลา T2 ของเนื้อเยื่อ หางของสัญญาณ FID และ Echo จะขยายมาชนและรวมกัน (Merge) กลายเป็นสัญญาณที่ต่อเนื่องกันไม่ขาดสาย (Continuous signal)")
+    r = st.slider("High-pass Radius (ยิ่งเลื่อนหลอดเพิ่ม ข้อมูลตรงกลางหาย)", 0, nx//2, st.session_state['hp_radius'], key='hp_slider')
+    st.session_state['hp_radius'] = r
+    mask = dist_from_center >= r
+
+filtered_kspace = kspace * mask
+reconstructed_img = reconstruct_mri(filtered_kspace)
+
+col_f1, col_f2 = st.columns(2)
+with col_f1:
+    fig_k, ax_k = plt.subplots(figsize=(6, 6))
+    ax_k.imshow(get_magnitude(filtered_kspace), cmap='gray')
+    ax_k.set_title("Filtered K-Space")
+    ax_k.axis('off')
+    st.pyplot(fig_k)
+
+with col_f2:
+    fig_img, ax_img = plt.subplots(figsize=(6, 6))
+    ax_img.imshow(reconstructed_img, cmap='gray')
+    ax_img.set_title("Reconstructed MRI Image")
+    ax_img.axis('off')
+    st.pyplot(fig_img)