Update app.py

app.py

@@ -1,9 +1,14 @@
 import streamlit as st
 import numpy as np
 import scipy.io
-import matplotlib.pyplot as plt
 import zipfile
 import os
+import io
+
+# สำคัญมาก! บังคับให้ Matplotlib ทำงานแบบ Background (Agg) เพื่อแก้ปัญหาภาพสั่นและลดบั๊กใน Streamlit
+import matplotlib
+matplotlib.use('Agg') 
+import matplotlib.pyplot as plt
 
 # --- 1. ตั้งค่า CSS เพื่อปรับขนาดตัวอักษรและจัดกลาง ---
 st.set_page_config(layout="wide", page_title="K-Space to MRI")
@@ -20,8 +25,15 @@ st.markdown("""
         color: #1E88E5;
         margin-bottom: 30px;
     }
-    h1, h2, h3 {
+    h2 {
         color: #0D47A1;
+        border-bottom: 2px solid #1E88E5;
+        padding-bottom: 10px;
+        margin-top: 40px;
+    }
+    h3 {
+        color: #1565C0;
+        margin-top: 20px;
     }
     </style>
     """, unsafe_allow_html=True)
@@ -44,25 +56,100 @@ def load_kspace_data():
 
 kspace_raw = load_kspace_data()
 
-def get_mri_image(k_data):
-    img = np.fft.fftshift(np.fft.ifft2(np.fft.ifftshift(k_data)))
-    return np.abs(img)
-
 def format_kspace_display(k_data):
     k_mag = np.abs(k_data)
     k_display = np.log(1 + k_mag)
     k_min = np.min(k_display)
     k_max = np.max(k_display)
     if k_max == k_min:
-        return np.zeros_like(k_display, dtype=np.uint8)
-    k_display = (k_display - k_min) / (k_max - k_min) * 255.0
-    k_display = np.power(k_display / 255.0, 0.6) * 255.0
-    return k_display.astype(np.uint8) # บังคับเป็น uint8 แก้ปัญหาภาพหาย
+        return np.zeros_like(k_display)
+    k_display = (k_display - k_min) / (k_max - k_min)
+    k_display = np.power(k_display, 0.6)
+    return k_display
 
-# เตรียมภาพ K-space พื้นฐานไว้แสดงผล
+# เตรียมภาพพื้นหลังตั้งต้นเพื่อลดเวลาคำนวณซ้ำ
 kspace_bg_image = format_kspace_display(kspace_raw)
 
-# --- 3. ส่วนหน้าเว็บ ---
+# --- ฟังก์ชันวาดกราฟเป็น Image Buffer (แก้ปัญหาภาพสั่นและภาษาไทย) ---
+def draw_kspace_point(kx, ky, bg_image):
+    fig, ax = plt.subplots(figsize=(5, 5))
+    ax.imshow(bg_image, cmap='gray', extent=[-112, 112, -112, 112])
+    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(-112, 112)
+    ax.set_ylim(-112, 112)
+    ax.axis('off')
+    
+    plt.tight_layout()
+    buf = io.BytesIO()
+    plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0, dpi=100)
+    plt.close(fig)
+    return buf.getvalue()
+
+def draw_wave(kx, ky):
+    fig, ax = plt.subplots(figsize=(5, 5))
+    x = np.linspace(-112, 112, 224)
+    # สลับ Y ให้สอดคล้องกับพิกัดภาพเพื่อทิศทางลูกศรที่ถูกต้องเป๊ะๆ
+    y = np.linspace(112, -112, 224) 
+    X, Y = np.meshgrid(x, y)
+    freq_x = kx / 224.0
+    freq_y = ky / 224.0
+    wave = np.cos(2 * np.pi * (freq_x * X + freq_y * Y))
+    
+    ax.imshow(wave, cmap='gray', extent=[-112, 112, -112, 112])
+    ax.axis('off')
+    
+    plt.tight_layout()
+    buf = io.BytesIO()
+    plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0, dpi=100)
+    plt.close(fig)
+    return buf.getvalue()
+
+def apply_filter(k_data, mode, radius):
+    Y, X = np.ogrid[:224, :224]
+    dist = np.sqrt((X - 112)**2 + (Y - 112)**2)
+    mask = np.ones((224, 224))
+    if mode == "Low-pass Filter":
+        mask[dist > radius] = 0
+    else:
+        mask[dist < radius] = 0
+        
+    filtered_k = k_data * mask
+    img = np.fft.fftshift(np.fft.ifft2(np.fft.ifftshift(filtered_k)))
+    img_mag = np.abs(img)
+    return filtered_k, img_mag
+
+def draw_filtered_kspace(filtered_k):
+    fig, ax = plt.subplots(figsize=(5, 5))
+    k_disp = format_kspace_display(filtered_k)
+    ax.imshow(k_disp, cmap='gray')
+    ax.axis('off')
+    
+    plt.tight_layout()
+    buf = io.BytesIO()
+    plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0, dpi=100)
+    plt.close(fig)
+    return buf.getvalue()
+
+def draw_mri(mri_result):
+    fig, ax = plt.subplots(figsize=(5, 5))
+    m_max = np.max(mri_result)
+    m_disp = mri_result / (m_max + 1e-8)
+    ax.imshow(m_disp, cmap='gray')
+    ax.axis('off')
+    
+    plt.tight_layout()
+    buf = io.BytesIO()
+    plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0, dpi=100)
+    plt.close(fig)
+    return buf.getvalue()
+
+
+# --- 3. ส่วนเนื้อหาเว็บ (เรียงเนื้อหามาก่อน Interactive เสมอ) ---
 
 st.markdown('<p class="main-title">K-space to MRI image</p>', unsafe_allow_html=True)
 
@@ -71,93 +158,22 @@ st.markdown("""
 เมื่อเรานำผู้ป่วยเข้าเครื่อง 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")
-
-col_ax1, col_ax2 = st.columns([1, 1])
-with col_ax1:
-    # สร้างแกนสีเขียวด้วย Matplotlib การันตีว่าติด 100%
-    fig_axis, ax_axis = plt.subplots(figsize=(5, 5))
-    for i in range(-5, 6):
-        ax_axis.plot([-5, 5], [i, i], color='#8BC34A', lw=1)
-        ax_axis.plot([i, i], [-5, 5], color='#8BC34A', lw=1)
-    ax_axis.plot([-5.5, 5.5], [0, 0], color='#1565C0', lw=3)
-    ax_axis.plot([0, 0], [-5.5, 5.5], color='#1565C0', lw=3)
-    
-    ax_axis.annotate('kx\n(Frequency)', xy=(5, 0), xytext=(3.5, 0.5), color='red', weight='bold', fontsize=12, arrowprops=dict(arrowstyle="->", color='red', lw=2))
-    ax_axis.annotate('ky\n(Phase)', xy=(0, 5), xytext=(0.5, 3.5), color='red', weight='bold', fontsize=12, arrowprops=dict(arrowstyle="->", color='red', lw=2))
-    
-    ax_axis.set_xlim(-6, 6)
-    ax_axis.set_ylim(-6, 6)
-    ax_axis.axis('off')
-    st.pyplot(fig_axis)
-
-with col_ax2:
-    st.markdown("""
+st.markdown("## 🧩 องค์ประกอบของ K-Space")
+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 จะสร้างภาพมุมซ้ายบนของ ภาพอวัยวะ)
-    """)
-
-st.divider()
-
-st.header("1 จุดบน k-space")
-
-# --- Interactive Part: กลับมาใช้ 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.markdown("**ปรับตำแหน่งพิกัด:**")
-    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, ax_pt = plt.subplots(figsize=(5, 5))
-    size = 224
-    # ใช้ภาพ K-space จริงเป็น Background
-    ax_pt.imshow(kspace_bg_image, cmap='gray', extent=[-size//2, size//2, -size//2, size//2])
-    
-    kx = st.session_state.kx_val
-    ky = st.session_state.ky_val
-    
-    # วาดจุดแดงและลูกศรสีเหลือง
-    ax_pt.plot(kx, ky, 'ro', markersize=8)
-    ax_pt.annotate('', xy=(kx, ky), xytext=(0, 0),
-                arrowprops=dict(arrowstyle='->', color='yellow', lw=2))
-    
-    ax_pt.axhline(0, color='white', linewidth=0.5, linestyle='--')
-    ax_pt.axvline(0, color='white', linewidth=0.5, linestyle='--')
-    
-    ax_pt.set_xlim(-size//2, size//2)
-    ax_pt.set_ylim(-size//2, size//2)
-    ax_pt.set_title(f"พิกัด K-Space (kx={kx}, ky={ky})")
-    ax_pt.axis('off')
-    st.pyplot(fig_pt)
-
-with col_w3:
-    x = np.linspace(-size//2, size//2, size)
-    y = np.linspace(-size//2, size//2, size)
-    X, Y = np.meshgrid(x, y)
-    
-    freq_x = kx / size
-    freq_y = ky / size
-    wave = np.cos(2 * np.pi * (freq_x * X + freq_y * Y))
-    
-    fig_wave, ax_wave = plt.subplots(figsize=(5, 5))
-    ax_wave.imshow(wave, cmap='gray')
-    ax_wave.set_title("แผ่นลวดลายคลื่น (2D Sinusoidal Wave)")
-    ax_wave.axis('off')
-    st.pyplot(fig_wave)
+""")
+
+# แทรกรูปภาพไฟล์ที่คุณให้มาโดยตรง
+if os.path.exists("Screenshot 2026-05-07 205051.jpg"):
+    st.image("Screenshot 2026-05-07 205051.jpg", width=500)
+else:
+    st.info("กรุณาอัปโหลดรูปภาพ Screenshot 2026-05-07 205051.jpg เข้ามาในระบบ")
 
+st.markdown("## 📍 1 จุดบน k-space")
 
 st.markdown("""
 **k-space 1 จุด = ข้อมูลของภาพทั้งภาพ และ ภาพ 1 พิกเซล = ผลรวมของ k-space ทุกจุด**
+
 **1 จุดใน k-space = แผ่นลวดลายคลื่น 1 แผ่น (2D Sinusoidal Wave)**
 
 1. **ตำแหน่งของจุด (พิกัด kx, ky) บอก "ความถี่" และ "ทิศทาง"**
@@ -169,17 +185,30 @@ st.markdown("""
    - **จุดมืดหรือจาง:** แปลว่าภาพ MRI ภาพนี้ แทบจะไม่มีลวดลายชนิดนี้ประกอบอยู่เลย
 """)
 
-st.divider()
+# --- ส่วน Interactive พิกัด K-space ---
+st.markdown("### 🎛️ ลองปรับตำแหน่งของจุด K-Space เพื่อดูคลื่นความถี่")
+
+col_slide1, col_slide2 = st.columns(2)
+with col_slide1:
+    kx_val = st.slider("พิกัด kx (แนวนอน)", -112, 111, 15)
+with col_slide2:
+    ky_val = st.slider("พิกัด ky (แนวตั้ง)", -112, 111, 20)
 
-st.header("Inverse Fourier Transform")
+col_img1, col_img2 = st.columns(2)
+with col_img1:
+    st.image(draw_kspace_point(kx_val, ky_val, kspace_bg_image), caption="พิกัด K-Space (มีเส้นบอกทิศทาง)", use_container_width=True)
+with col_img2:
+    st.image(draw_wave(kx_val, ky_val), caption="แผ่นลวดลายคลื่น (2D Sinusoidal Wave)", use_container_width=True)
+
+st.markdown("## 🔄 Inverse Fourier Transform")
 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.markdown("## 📊 ความถี่เชิงพื้นที่ (Spatial Frequency) คือ")
 st.markdown("""
 ในทางสัญญาณภาพ (Spatial Frequency) ความถี่ไม่ได้หมายถึงความเร็วของเวลา แต่หมายถึง "อัตราการเปลี่ยนแปลงความเข้มของแสงในพื้นที่หนึ่งๆ"
 
@@ -191,60 +220,35 @@ st.markdown("""
 
 2. **ความถี่เชิงพื้นที่สูง (High Spatial Frequency)**
    - **คืออะไร:** พื้นที่ที่ความสว่าง เปลี่ยนแบบฉับพลันและรวดเร็ว ภายในระยะทางสั้นๆ เช่น จากขาว ตัดเป็นดำสนิททันที (เหมือนลายทางแคบๆ ที่สลับสีถี่ๆ)
-   - **ตัวอย่างในภาพ MRI:** ขอบของอวัยวะ (Edges), รอยต่อระหว่างกระดูกกับไขสันหลัง, หรือรายละเอียดเส้นเลือดเส้นเล็กๆ
+   - **ตัวอย่างในภาพ MRI:** ขอบของอวัยวะ (Edges), หรือรายละเอียดเส้นเลือดเส้นเล็กๆ
    - **ตำแหน่งใน k-space:** ข้อมูลเหล่านี้จะกระจายตัวอยู่บริเวณ "ขอบนอก"
    - **หน้าที่หลัก:** สร้าง "ความคมชัด (Resolution) และรายละเอียดเล็กๆ" ทำให้ภาพไม่เบลอ
 
 ซึ่งจะให้ผู้เรียนได้ลองปรับหน้าตาของภาพ K-Space แล้วเปรียบเทียบความแตกต่างด้วยการปรับ High-pass filter และ Low-pass filter เพื่อดูลักษณะและความสำคัญของข้อมูลบริเวณกลางและขอบนอกของ K-space
 เมื่อเราจำแนกข้อมูลใน k-space ออกเป็นความถี่ต่ำ (ตรงกลาง) และความถี่สูง (ขอบนอก) ได้แล้ว เราสามารถเลือก "หยิบ" หรือ "ทิ้ง" ข้อมูลบางส่วนเพื่อดูผลลัพธ์ได้ เรียกว่าการใช้ตัวกรอง (Filter)
-""")
 
-st.divider()
+- **Low-pass Filter (ตัวกรองปล่อยความถี่ต่ำผ่าน):**
+  - **ทำงานอย่างไร:** "อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้ ส่วนข้อมูลขอบนอก (ความถี่สูง) ให้ทิ้งไป"
+  - **ผลลัพธ์ที่ได้:** เราจะได้ภาพที่มี "คอนทราสต์" ดูออกว่าเป็นอวัยวะอะไร แต่ภาพจะ "เบลอ" (Blurry) เพราะข้อมูลเส้นขอบถูกทิ้งไปแล้ว
+- **High-pass Filter (ตัวกรองปล่อยความถี่สูงผ่าน):**
+  - **ทำงานอย่างไร:** อนุญาตให้เฉพาะข้อมูลขอบนอก (ความถี่สูง) ผ่านไปได้ ส่วนข้อมูลตรงกลางทิ้ง
+  - **ผลลัพธ์ที่ได้:** ภาพจะสูญเสียคอนทราสต์ไปจนเกือบมืดสนิท แต่จะปรากฏ "เส้นขอบร่าง" (Outline) ของอวัยวะขึ้นมาอย่างคมชัด
+""")
 
-# --- ส่วน Filter ---
-st.subheader("Interactive Filters")
+# --- ส่วน Interactive ตัวกรอง K-space ---
+st.markdown("### 🎛️ ลองปรับตัวกรอง (Interactive Filter)")
 
-col_filter_ctrl, col_filter_res = st.columns([1, 2])
-
-with col_filter_ctrl:
-    mode = st.radio("เลือกตัวกรอง", ["Low-pass Filter", "High-pass Filter"])
-    
-    if mode == "Low-pass Filter":
-        radius = st.slider("ปรับระดับความถี่ที่ยอมให้ผ่าน", 1, 112, 112)
-    else:
-        radius = st.slider("ปรับระดับการตัดข้อมูลส่วนกลาง", 0, 112, 0)
-
-Y_m, X_m = np.ogrid[:224, :224]
-dist = np.sqrt((X_m - 112)**2 + (Y_m - 112)**2)
-mask = np.ones((224, 224))
+mode = st.radio("เลือกตัวกรอง:", ["Low-pass Filter", "High-pass Filter"], horizontal=True)
 
 if mode == "Low-pass Filter":
-    mask[dist > radius] = 0
+    radius = st.slider("ปรับระดับความถี่ที่ยอมให้ผ่าน (รัศมีจากตรงกลาง)", 1, 112, 112)
 else:
-    mask[dist < radius] = 0
-
-filtered_k = kspace_raw * mask
-mri_result = get_mri_image(filtered_k)
+    radius = st.slider("ปรับระดับการตัดข้อมูลส่วนกลาง (รัศมีจากตรงกลาง)", 0, 112, 0)
 
-with col_filter_res:
-    c1, c2 = st.columns(2)
-    with c1:
-        st.image(format_kspace_display(filtered_k), caption="K-Space Map", use_container_width=True)
-    with c2:
-        mri_disp = mri_result / (mri_result.max() + 1e-8) # ป้องกันการหารด้วยศูนย์
-        st.image(mri_disp, caption="MRI Result", use_container_width=True, clamp=True)
+filtered_k, mri_result = apply_filter(kspace_raw, mode, radius)
 
-# เอา Toggle ออก กางเนื้อหาเต็มๆ
-st.markdown("---")
-if mode == "Low-pass Filter":
-    st.markdown("""
-**Low-pass Filter (ตัวกรองปล่อยความถี่ต่ำผ่าน):**
-- **ทำงานอย่างไร:** "อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้ ส่วนข้อมูลขอบนอก (ความถี่สูง) ให้ทิ้งไป"
-- **ผลลัพธ์ที่ได้:** เราจะได้ภาพที่มี "คอนทราสต์" ดูออกว่าเป็นอวัยวะอะไร แต่ภาพจะ "เบลอ" (Blurry) เพราะข้อมูลเส้นขอบถูกทิ้งไปแล้ว
-    """)
-else:
-    st.markdown("""
-**High-pass Filter (ตัวกรองปล่อยความถี่สูงผ่าน):**
-- **ทำงานอย่างไร:** อนุญาตให้เฉพาะข้อมูลขอบนอก (ความถี่สูง) ผ่านไปได้ ส่วนข้อมูลตรงกลางทิ้ง
-- **ผลลัพธ์ที่ได้:** ภาพจะสูญเสียคอนทราสต์ไปจนเกือบมืดสนิท แต่จะปรากฏ "เส้นขอบร่าง" (Outline) ของอวัยวะขึ้นมาอย่างคมชัด
-    """)
+col_f1, col_f2 = st.columns(2)
+with col_f1:
+    st.image(draw_filtered_kspace(filtered_k), caption="ภาพ K-Space ที่ถูกตัวกรอง", use_container_width=True)
+with col_f2:
+    st.image(draw_mri(mri_result), caption="ภาพ MRI ผลลัพธ์", use_container_width=True)