Update app.py

app.py

@@ -2,101 +2,64 @@ import streamlit as st
 import numpy as np
 import scipy.io
 import matplotlib.pyplot as plt
+import plotly.express as px
+import plotly.graph_objects as go
 import zipfile
 import os
 
-# --- ตั้งค่าหน้าเว็บ Streamlit ---
+# --- 1. ตั้งค่า CSS เพื่อปรับขนาดตัวอักษรและจัดกลาง ---
 st.set_page_config(layout="wide", page_title="K-Space to MRI")
 
-# --- ฟังก์ชันช่วยเหลือ (Helper Functions) ---
+st.markdown("""
+    <style>
+    /* ปรับขนาดตัวอักษรหลัก */
+    html, body, [class*="st-"] {
+        font-size: 18px;
+    }
+    /* หัวข้อหลักให้อยู่กลาง */
+    .main-title {
+        text-align: center;
+        font-size: 45px !important;
+        font-weight: bold;
+        color: #1E88E5;
+        margin-bottom: 30px;
+    }
+    /* หัวข้อรอง */
+    h1, h2, h3 {
+        color: #0D47A1;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+# --- 2. ฟังก์ชันโหลดข้อมูลและการคำนวณ ---
 @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:
+        elif os.path.exists('kspace.zip'):
             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)
-    
-    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')
-    
-    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')
-    
-    # วาดคลื่นจำลองในกราฟให้คล้ายกับรูปที่ร่างไว้
-    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)
-    
-    return fig
+        else:
+            # สร้างข้อมูลจำลองถ้าไม่เจอไฟล์
+            return np.zeros((224, 224))
+        
+        k = mat_data['kspace']
+        return k
+    except:
+        return np.zeros((224, 224))
 
-def generate_2d_wave(kx, ky, size=224):
-    x = np.arange(size)
-    y = np.arange(size)
-    X, Y = np.meshgrid(x, y)
-    
-    X = X - size // 2
-    Y = Y - size // 2
-    
-    # สร้างคลื่น 2D Sinusoidal
-    wave = np.cos(2 * np.pi * (kx * X + ky * Y) / size)
-    return wave
+kspace_raw = load_kspace_data()
 
-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
+def get_mri_image(k_data):
+    # แก้ Artifact สมอง 4 มุม: ต้อง shift ก่อน IFFT และ shift ผลลัพธ์หลัง IFFT อีกรอบ
+    img = np.fft.fftshift(np.fft.ifft2(np.fft.ifftshift(k_data)))
+    return np.abs(img)
 
-# --- ส่วนเนื้อหาและ UI ของหน้าเว็บ ---
+# --- 3. ส่วนหน้าเว็บ ---
 
-st.title("K-Space to MRI image")
+st.markdown('<p class="main-title">K-space to MRI image</p>', unsafe_allow_html=True)
 
 st.markdown("""
 **K-space คือ**
@@ -105,11 +68,29 @@ st.markdown("""
 
 st.header("องค์ประกอบของ K-Space")
 
-col1, col2 = st.columns([1, 1.5])
-with col1:
-    fig_axis = generate_kspace_axis_image()
-    st.pyplot(fig_axis)
-with col2:
+# ส่วนที่ทำภาพเลียนแบบ "รูปเขียว" (K-space axis)
+col_ax1, col_ax2 = st.columns([1, 1])
+with col_ax1:
+    fig_axis = go.Figure()
+    # วาด Grid และแกน
+    for i in range(-5, 6):
+        fig_axis.add_trace(go.Scatter(x=[-5, 5], y=[i, i], mode='lines', line=dict(color='lightgreen', width=1), showlegend=False))
+        fig_axis.add_trace(go.Scatter(x=[i, i], y=[-5, 5], mode='lines', line=dict(color='lightgreen', width=1), showlegend=False))
+    
+    # ลูกศรแกน
+    fig_axis.add_annotation(x=5.5, y=0, text="kx (Frequency)", showarrow=True, arrowhead=2, ax=-40, ay=0, font=dict(color="red", size=14))
+    fig_axis.add_annotation(x=0, y=5.5, text="ky (Phase)", showarrow=True, arrowhead=2, ax=0, ay=40, font=dict(color="red", size=14))
+    
+    fig_axis.update_layout(
+        title="K-space axis",
+        xaxis=dict(visible=False, range=[-6, 6]),
+        yaxis=dict(visible=False, range=[-6, 6]),
+        width=400, height=400,
+        plot_bgcolor='white'
+    )
+    st.plotly_chart(fig_axis)
+
+with col_ax2:
     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 จะสร้างภาพมุมซ้ายบนของ ภาพอวัยวะ)
     """)
@@ -117,37 +98,45 @@ with col2:
 st.divider()
 
 st.header("1 จุดบน k-space")
+st.info("💡 วิธีเล่น: กดคลิกที่จุดใดก็ได้บนภาพ K-Space ด้านซ้าย เพื่อดูคลื่นความถี่ที่เกิดขึ้นในจุดนั้น")
 
-# --- 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)
+# --- Interactive Part: คลิกบนภาพ K-Space ---
+col_int1, col_int2 = st.columns([1, 1])
 
+with col_int1:
+    # แสดงภาพ K-Space แบบ Log scale เพื่อให้เห็นข้อมูลชัด��จน
+    k_display = np.log(np.abs(kspace_raw) + 1)
+    
+    # ใช้ Plotly เพื่อให้คลิกได้
+    fig_k = px.imshow(k_display, color_continuous_scale='gray', labels=dict(x="kx", y="ky"))
+    fig_k.update_layout(coloraxis_showscale=False, margin=dict(l=20, r=20, t=30, b=20), width=450, height=450)
+    
+    # จับเหตุการณ์การคลิก (ใน Streamlit จะใช้การเลือกจุดจาก Plotly)
+    selected_point = st.plotly_chart(fig_k, on_select="rerun")
+    
+    # กำหนดจุดเริ่มต้นถ้ายังไม่กด
+    kx_idx, ky_idx = 127, 127 # กลางภาพ
+    if selected_point and "points" in selected_point and len(selected_point["points"]) > 0:
+        kx_idx = selected_point["points"][0]["x"]
+        ky_idx = selected_point["points"][0]["y"]
+
+with col_int2:
+    # คำนวณคลื่น 2D จากจุดที่เลือก
+    size = 224
+    x = np.linspace(-size//2, size//2, size)
+    y = np.linspace(-size//2, size//2, size)
+    X, Y = np.meshgrid(x, y)
+    
+    # ความถี่ตามตำแหน่ง kx, ky (relative to center)
+    freq_x = (kx_idx - size//2) / size
+    freq_y = (ky_idx - size//2) / size
+    wave = np.cos(2 * np.pi * (freq_x * X + freq_y * Y))
+    
+    fig_wave = px.imshow(wave, color_continuous_scale='gray', title=f"คลื่นที่พิกัด kx:{kx_idx-112}, ky:{112-ky_idx}")
+    fig_wave.update_layout(coloraxis_showscale=False, width=400, height=400)
+    st.plotly_chart(fig_wave)
+    if st.button("Reset จุด"):
+        st.rerun()
 
 st.markdown("""
 **k-space 1 จุด = ข้อมูลของภาพทั้งภาพ และ ภาพ 1 พิกเซล = ผลรวมของ k-space ทุกจุด**
@@ -187,83 +176,54 @@ st.markdown("""
    - **ตัวอย่างในภาพ MRI:** ขอบของอวัยวะ (Edges), รอยต่อระหว่างกระดูกกับไขสันหลัง, หรือรายละเอียดเส้นเลือดเส้นเล็กๆ
    - **ตำแหน่งใน k-space:** ข้อมูลเหล่านี้จะกระจายตัวอยู่บริเวณ "ขอบนอก"
    - **หน้าที่หลัก:** สร้าง "ความคมชัด (Resolution) และรายละเอียดเล็กๆ" ทำให้ภาพไม่เบลอ
-
-ซึ่งจะให้ผู้เรียนได้ลองปรับหน้าตาของภาพ K-Space แล้วเปรียบเทียบความแตกต่างด้วยการปรับ High-pass filter และ Low-pass filter เพื่อดูลักษณะและความสำคัญของข้อมูลบริเวณกลางและขอบนอกของ K-space
-เมื่อเราจำแนกข้อมูลใน k-space ออกเป็นความถี่ต่ำ (ตรงกลาง) และความถี่สูง (ขอบนอก) ได้แล้ว เราสามารถเลือก "หยิบ" หรือ "ทิ้ง" ข้อมูลบางส่วนเพื่อดูผลลัพธ์ได้ เรียกว่าการใช้ตัวกรอง (Filter)
 """)
 
 st.divider()
 
-# --- Interactive Part 2: Slide bar แบบ High/Low Pass ---
-st.subheader("ตัวกรอง K-Space (Interactive Filters)")
+# --- ส่วน Filter ---
+st.subheader("Interactive Filters: ปรับแต่งภาพ MRI จาก K-Space")
 
-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
+col_filter_ctrl, col_filter_res = st.columns([1, 2])
 
-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:
-    filter_choice = st.radio("เลือกรูปแบบ Filter", ['Low-pass Filter', 'High-pass Filter'], key='filter_type')
+with col_filter_ctrl:
+    mode = st.radio("เลือกตัวกรอง", ["Low-pass Filter", "High-pass Filter"])
     
-    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:
-    if filter_choice == 'Low-pass Filter':
-        with st.expander("รายละเอียด Low-pass Filter", expanded=True):
-            st.markdown("""
-            **Low-pass Filter (ตัวกรองปล่อยความถี่ต่ำผ่าน):**
-            - **ทำงานอย่างไร:** "อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้ ส่วนข้อมูลขอบนอก (ความถี่สูง) ให้ทิ้งไป"
-            - **ผลลัพธ์ที่ได้:** เราจะได้ภาพที่มี "คอนทราสต์" ดูออกว่าเป็นอวัยวะอะไร แต่ภาพจะ "เบลอ" (Blurry) เพราะข้อมูลเส้นขอบถูกทิ้งไปแล้ว
-            """)
+    # ปรับปรุง Slide bar ตาม Logic ที่ต้องการ
+    if mode == "Low-pass Filter":
+        radius = st.slider("รัศมีข้อมูลความถี่ต่ำ (กลางภาพ)", 1, 112, 112)
+        st.write("ยิ่งลดค่า ภาพจะยิ่งเบลอแต่เห็นโครงร่างหลัก")
     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)
-
-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)
+        radius = st.slider("รัศมีการตัดข้อมูลตรงกลางออก", 0, 112, 0)
+        st.write("ยิ่งเพิ่มค่า คอนทราสต์จะหายไปเหลือแต่เส้นขอบ")
+
+# สร้าง Mask
+Y_m, X_m = np.ogrid[:224, :224]
+dist = np.sqrt((X_m - 112)**2 + (Y_m - 112)**2)
+mask = np.ones((224, 224))
+
+if mode == "Low-pass Filter":
+    mask[dist > radius] = 0
+else:
+    mask[dist < radius] = 0
+
+filtered_k = kspace_raw * mask
+mri_result = get_mri_image(filtered_k)
+
+with col_filter_res:
+    c1, c2 = st.columns(2)
+    with c1:
+        st.image(np.log(np.abs(filtered_k)+1), caption="K-Space Filtered", use_container_width=True)
+    with c2:
+        st.image(mri_result/mri_result.max(), caption="MRI Result (224x224)", use_container_width=True)
+
+# Toggle ซ่อนเนื้อหา
+with st.expander("อ่านคำอธิบายเพิ่มเติมเกี่ยวกับ Filter"):
+    st.markdown("""
+**Low-pass Filter (ตัวกรองปล่อยความถี่ต่ำผ่าน):**
+- **ทำงานอย่างไร:** "อนุญาตให้เฉพาะข้อมูลตรงกลาง (ความถี่ต่ำ) ผ่านไปสร้างภาพได้ ส่วนข้อมูลขอบนอก (ความถี่สูง) ให้ทิ้งไป"
+- **ผลลัพธ์ที่ได้:** เราจะได้ภาพที่มี "คอนทราสต์" ดูออกว่าเป็นอวัยวะอะไร แต่ภาพจะ "เบลอ" (Blurry) เพราะข้อมูลเส้นขอบถูกทิ้งไปแล้ว
+
+**High-pass Filter (ตัวกรองปล่อยความถี่สูงผ่าน):**
+- **ทำงานอย่างไร:** อนุญาตให้เฉพาะข้อมูลขอบนอก (ความถี่สูง) ผ่านไปได้ ส่วนข้อมูลตรงกลางทิ้ง
+- **ผลลัพธ์ที่ได้:** ภาพจะสูญเสียคอนทราสต์ไปจนเกือบมืดสนิท แต่จะปรากฏ "เส้นขอบร่าง" (Outline) ของอวัยวะขึ้นมาอย่างคมชัด
+    """)