Update app.py

app.py

@@ -1,61 +1,86 @@
 import streamlit as st
 import numpy as np
 import scipy.io
-from PIL import Image, ImageDraw
-import matplotlib.pyplot as plt
+from PIL import Image, ImageDraw, ImageFont
 from streamlit_image_coordinates import streamlit_image_coordinates
 
-# 1. ตั้งค่าหน้าเว็บให้ดูเป็นมืออาชีพ
-st.set_page_config(layout="centered", page_title="K-Space Interactive Learning")
+# 1. ตั้งค่าเลย์เอาต์หน้าเว็บและการออกแบบ (CSS)
+st.set_page_config(layout="centered", page_title="MRI K-Space Learning Tool")
 
-# ปรับ CSS เพื่อความสวยงาม (ฟอนต์ใหญ่, หัวข้อชัดเจน)
 st.markdown("""
     <style>
-    .main { font-size: 18px; }
-    h1 { color: #1E88E5; font-size: 42px !important; border-bottom: 2px solid #1E88E5; padding-bottom: 10px; }
-    h2 { color: #1565C0; font-size: 32px !important; margin-top: 30px !important; }
-    h3 { color: #0D47A1; font-size: 26px !important; }
-    .stText, .stMarkdown p { font-size: 18px !important; line-height: 1.6; }
-    .stButton>button { width: 100%; border-radius: 10px; height: 3em; background-color: #f0f2f6; }
+    /* ปรับขนาดฟอนต์เนื้อหา */
+    .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; }
+    
+    /* ปรับปุ่มและ 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. โหลดข้อมูล
+# 2. ฟังก์ชันสร้างรูปองค์ประกอบ K-Space ขึ้นมาใหม่ (แทนรูปเดิม)
+def create_kspace_diagram():
+    img = Image.new('RGB', (600, 400), color=(255, 255, 255))
+    draw = ImageDraw.Draw(img)
+    center = (300, 200)
+    
+    # วาด 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))
+    
+    # วาดแกน
+    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
+    
+    # วาดพื้นที่ 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))
+    
+    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))
+    
+    return img
+
+# 3. จัดการข้อมูล K-Space
 @st.cache_data
-def load_kspace():
+def load_data():
     try:
         mat = scipy.io.loadmat('kspace.mat')
-        # ตรวจสอบชื่อตัวแปร (IM หรือ kspace)
-        key = 'IM' if 'IM' in mat else ([k for k in mat.keys() if not k.startswith('__')][0])
+        key = 'kspace' if 'kspace' in mat else ([k for k in mat.keys() if not k.startswith('__')][0])
         data = mat[key]
-        # บังคับขนาด 224x224
         if data.shape != (224, 224):
-            # ถ้าเป็น 4D หรือใหญ่กว่า ให้เอาแค่ slice แรกและ crop
-            if data.ndim > 2: data = data[..., 0]
-            h, w = data.shape
+            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/70)**2 + (y/90)**2 <= 1] = 0.5
-        img[(x/40)**2 + (y/50)**2 <= 1] = 0.8
+        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_kspace()
+k_data = load_data()
 
-# ฟังก์ชันจัดการรูปภาพ
-def to_pil(arr, is_mag=True):
-    if is_mag:
-        arr = np.log(1 + np.abs(arr))
+def process_image(arr, is_kspace=True):
+    if is_kspace:
+        res = np.log(1 + np.abs(arr))
     else:
-        arr = np.abs(arr)
-    norm = (arr - arr.min()) / (arr.max() - arr.min() + 1e-8) * 255
+        # ป้องกันภาพซ้อน 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")
 
 # ==========================================
-# ส่วนเนื้อหา (Content)
+# เริ่มต้นหน้าเว็บ (Main Content)
 # ==========================================
 
 st.title("K-space to MRI image")
@@ -64,110 +89,99 @@ 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")
-# ส่วนของการแสดงรูปภาพองค์ประกอบ (ดึงจากไฟล์ที่คุณแปะไว้)
-try:
-    # สมมติว่าไฟล์รูปองค์ประกอบคือ Notes_260516_022203_1.jpg
-    st.image("Notes_260516_022203_1.jpg", caption="องค์ประกอบของ K-Space", use_container_width=True)
-except:
-    st.info("💡 [พื้นที่สำหรับรูปองค์ประกอบของ 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 จะสร้างภาพมุมซ้ายบนของภาพอวัยวะ)""")
 
-# ------------------------------------------
-# ส่วนกดจุด (Interactive 1)
-# ------------------------------------------
+# --- Interactive 1 ---
 st.subheader("1 จุดบน k-space")
 
-if st.button("🔄 Reset จุดเลือก"):
-    st.session_state.pop("coords", None)
+# ปุ่ม Reset
+if st.button("🔄 Reset พิกัด"):
+    st.session_state.kx = 112
+    st.session_state.ky = 112
     st.rerun()
 
-col_k, col_w = st.columns(2)
+col_pick, col_wave = st.columns([1, 1])
 
-with col_k:
-    st.markdown("**เลือกพิกัดใน K-Space:**")
-    base_img = to_pil(k_data)
+with col_pick:
+    st.markdown("**คลิกเลือกจุดบน K-Space:**")
+    k_img = process_image(k_data)
     
-    # วาดเส้นทิศทางและจุดถ้ามีการคลิก
-    coords = streamlit_image_coordinates(base_img, key="kspace_map")
+    # ดักจับการคลิก
+    pos = streamlit_image_coordinates(k_img, key="coords")
     
-    if coords:
-        st.session_state["coords"] = coords
-        px, py = coords['x'], coords['y']
-        draw = ImageDraw.Draw(base_img)
-        # วาดเส้นทิศทางสีแดงจากศูนย์กลาง (112, 112)
-        draw.line((112, 112, px, py), fill="#FF0000", width=2)
-        # วาดจุดแดง
-        r = 4
-        draw.ellipse((px-r, py-r, px+r, py+r), fill="#FF0000", outline="white")
+    if pos:
+        px, py = pos['x'], pos['y']
         kx, ky = px - 112, py - 112
-        # อัปเดตรูปที่มีเส้น
-        st.image(base_img, width=300)
+        # วาดเส้นทิศทางและจุดแดง
+        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(base_img, width=300)
+        st.image(k_img, width=300)
 
-with col_w:
-    st.markdown(f"**Sinusoidal Wave (kx:{kx}, ky:{ky}):**")
+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_img = ((wave + 1) * 127.5).astype(np.uint8)
-    st.image(Image.fromarray(wave_img), width=300)
+    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.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)** คืออะไร: พื้นที่ที่สีหรือความสว่าง "ค่อยๆ เปลี่ยน" หรือ "เหมือนเดิมเป็นบริเวณกว้าง" (เหมือนคลื่นลูกใหญ่ๆ ที่ขยับช้าๆ)  
+1. **ความถี่เชิงพื้นที่ต่ำ (Low Spatial Frequency)** คืออะไร: พื้นที่ที่สีหรือความสว่าง "ค่อยๆ เปลี่ยน" หรือ "เหมือนเดิมเป็นบริเวณกว้าง" (เหมือนคลื่นลูกใหญ่ๆ ที่ขยับช้าๆ)  
 ตัวอย่างในภาพ MRI: บริเวณเนื้อเยื่อก้อนใหญ่ๆ เช่น เนื้อตับ หรือเนื้อสมอง ที่มีสีเทาโทนเดียวกันกินพื้นที่กว้าง  
 ตำแหน่งใน k-space: ข้อมูลเหล่านี้จะรวมตัวกันอยู่บริเวณ "ตรงกลาง"  
 หน้าที่หลัก: สร้าง "รูปร่างรวมๆ และคอนทราสต์ (Contrast)" ให้เรารู้ว่านี่คือก้อนอวัยวะอะไร  
 
-**2. ความถี่เชิงพื้นที่สูง (High Spatial Frequency)** คืออะไร: พื้นที่ท��่ความสว่างเปลี่ยนแบบฉับพลันและรวดเร็วภายในระยะทางสั้นๆ เช่น จากขาวตัดเป็นดำสนิททันที (เหมือนลายทางแคบๆ ที่สลับสีถี่ๆ)  
+2. **ความถี่เชิงพื้นที่สูง (High Spatial Frequency)** คืออะไร: พื้นที่ที่ความสว่างเปลี่ยนแบบฉับพลันและรวดเร็วภายในระยะทางสั้นๆ เช่น จากขาวตัดเป็นดำสนิททันที (เหมือนลายทางแคบๆ ที่สลับสีถี่ๆ)  
 ตัวอย่างในภาพ MRI: ขอบของอวัยวะ (Edges), รอยต่อระหว่างกระดูกกับไขสันหลัง, หรือรายละเอียดเส้นเลือดเส้นเล็กๆ  
 ตำแหน่งใน k-space: ข้อมูลเหล่านี้จะกระจายตัวอยู่บริเวณ "ขอบนอก"  
 หน้าที่หลัก: สร้าง "ความคมชัด (Resolution) และรายละเอียดเล็กๆ" ทำให้ภาพไม่เบลอ""")
 
-# ------------------------------------------
-# ส่วนตัวกรอง (Interactive 2)
-# ------------------------------------------
-st.write("""เมื่อเราจำแนกข้อมูลใน k-space ออกเป็นความถี่ต่ำ (ตรงกลาง) และความถี่สูง (ขอบนอก) ได้แล้ว เราสามารถเลือก "หยิบ" หรือ "ทิ้ง" ข้อมูลบางส่วนเพื่อดูผลลัพธ์ได้ เรียกว่าการใช้ตัวกรอง (Filter)""")
+# --- Interactive 2 ---
+st.divider()
+st.write("""ซึ่งจะให้ผู้เรียนได้ลองปรับหน้าตาของภาพ K-Space แล้วเปรียบเทียบความแตกต่างด้วยการปรับ High-pass filter และ Low-pass filter เพื่อดูลักษณะและความสำคัญของข้อมูลบริเวณกลางและขอบนอกของ K-space เมื่อเราจำแนกข้อมูลใน k-space ออกเป็นความถี่ต่ำ (ตรงกลาง) และความถี่สูง (ขอบนอก) ได้แล้ว เราสามารถเลือก "หยิบ" หรือ "ทิ้ง" ข้อมูลบางส่วนเพื่อดูผลลัพธ์ได้ เรียกว่าการใช้ตัวกรอง (Filter)""")
 
-f_type = st.select_slider("เลือกประเภทตัวกรอง:", options=["Low-pass Filter", "High-pass Filter"])
+f_type = st.radio("เลือกชนิดตัวกรอง:", ["Low-pass Filter", "High-pass Filter"], horizontal=True)
 
-Y_d, X_d = np.ogrid[-112:112, -112:112]
-dist = np.sqrt(X_d**2 + Y_d**2)
+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.info('**Low-pass Filter:** อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้')
-    rad = st.slider("ปรับรัศมี (Radius):", 0, 112, 112)
-    mask = dist <= rad
-    res_msg = 'ผลลัพธ์: ได้ภาพที่มีคอนทราสต์ชัด แต่ภาพจะ **เบลอ (Blurry)**'
+    st.markdown("**Low-pass Filter (ตัวกรองปล่อยความถี่ต่ำผ่าน):**")
+    st.write('ทำงานอย่างไร: "อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้ ส่วนข้อมูลขอบนอก (ความถี่สูง) ให้ทิ้งไป"')
+    rad = st.slider("รัศมีวงกลม (Radius):", 0, 112, 112)
+    mask = d <= rad
+    msg = 'เราจะได้ภาพที่มี "คอนทราสต์" ดูออกว่าเป็นอวัยวะอะไร แต่ภาพจะ "เบลอ" (Blurry) เพราะข้อมูลเส้นขอบถูกทิ้งไปแล้ว'
 else:
-    st.info('**High-pass Filter:** อนุญาตให้เฉพาะข้อมูลขอบนอก (ความถี่สูง) ผ่านไปได้')
-    rad = st.slider("ปรับรัศมี (Radius):", 0, 112, 0)
-    mask = dist >= rad
-    res_msg = 'ผลลัพธ์: สูญเสียคอนทราสต์ แต่ปรากฏ **เส้นขอบร่าง (Outline)** คมชัด'
+    st.markdown("**High-pass Filter (ตัวกรองปล่อยความถี่สูงผ่าน):**")
+    st.write("ทำงานอย่างไร: อนุญาตให้เฉพาะข้อมูลขอบนอก (ความถี่สูง) ผ่านไปได้ ส่วนข้อมูลตรงกลางทิ้ง")
+    rad = st.slider("รัศมีวงกลม (Radius):", 0, 112, 0)
+    mask = d >= rad
+    msg = 'ภาพจะสูญเสียคอนทราสต์ไปจนเกือบมืดสนิท แต่จะปรากฏ "เส้นขอบร่าง" (Outline) ของอวัยวะขึ้นมาอย่างคมชัด'
 
-# คำนวณภาพผลลัพธ์ (Reconstruction)
+# คำนวณภาพผลลัพธ์
 filtered_k = k_data * mask
-mri_result = np.abs(np.fft.ifft2(np.fft.ifftshift(filtered_k)))
-
 col_f1, col_f2 = st.columns(2)
+
 with col_f1:
-    st.image(to_pil(filtered_k), caption="K-Space ที่ผ่านตัวกรอง", width=300)
+    st.image(process_image(filtered_k), caption="K-Space Filtered", width=300)
 with col_f2:
-    # แสดงภาพสมองภาพเดียว
-    res_pil = (mri_result - mri_result.min()) / (mri_result.max() - mri_result.min() + 1e-8) * 255
-    st.image(Image.fromarray(res_pil.astype(np.uint8)), caption="ภาพ MRI ผลลัพธ์", width=300)
+    st.image(process_image(filtered_k, is_kspace=False), caption="MRI Result (Single Slice)", width=300)
 
-st.success(res_msg)
+st.success(f"**ผลลัพธ์ที่ได้:** {msg}")