Update app.py

app.py

@@ -45,7 +45,6 @@ st.markdown("""
         background-color: #1E88E5;
         color: white;
     }
-    /* ปรับแต่งส่วนอ้างอิง */
     .reference-text {
         font-size: 14px;
         color: #666;
@@ -73,16 +72,16 @@ def load_kspace_data():
 
 kspace_raw = load_kspace_data()
 
+# ปรับแก้ความสว่างด้วย Log Transformation แบบ 100% สว่างคมชัด
 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)
-    k_display = (k_display - k_min) / (k_max - k_min)
-    k_display = np.power(k_display, 0.6)
-    return k_display
+    if np.max(k_mag) == 0:
+        return np.zeros_like(k_mag, dtype=np.uint8)
+    
+    # สูตร Log Transformation เพื่อดึงความสว่าง
+    c = 255.0 / np.log(1 + np.max(k_mag))
+    log_img = c * np.log(1 + k_mag)
+    return log_img.astype(np.uint8)
 
 kspace_bg_image = format_kspace_display(kspace_raw)
 
@@ -93,9 +92,65 @@ def get_image_from_plot(fig):
     buf.seek(0)
     return Image.open(buf)
 
+# สร้างภาพแผนผังองค์ประกอบ K-Space ด้วยโค้ด Matplotlib (ไม่ต้องใช้รูปภาพภายนอก)
+def draw_kspace_diagram():
+    fig, ax = plt.subplots(figsize=(10, 6))
+    
+    c_center = '#E1B138' # สีเหลืองตรงกลาง
+    c_tb = '#4B8BDE'     # สีฟ้าบนล่าง
+    c_lr = '#5EAA4D'     # สีเขียวซ้ายขวา
+    
+    # วาดโซนต่างๆ
+    ax.add_patch(plt.Rectangle((0.2, 0.2), 0.4, 0.6, facecolor=c_center, edgecolor='black', zorder=2))
+    ax.add_patch(plt.Rectangle((0.1, 0.2), 0.1, 0.6, facecolor=c_lr, edgecolor='black', zorder=2))
+    ax.add_patch(plt.Rectangle((0.6, 0.2), 0.1, 0.6, facecolor=c_lr, edgecolor='black', zorder=2))
+    ax.add_patch(plt.Rectangle((0.1, 0.8), 0.6, 0.1, facecolor=c_tb, edgecolor='black', zorder=2))
+    ax.add_patch(plt.Rectangle((0.1, 0.1), 0.6, 0.1, facecolor=c_tb, edgecolor='black', zorder=2))
+    
+    # วาดเส้น Grid
+    for i in range(1, 10):
+        ax.plot([0.1, 0.7], [i*0.1, i*0.1], color='black', lw=0.5, alpha=0.5, zorder=3)
+    for i in range(1, 7):
+        ax.plot([0.1 + i*0.1, 0.1 + i*0.1], [0.1, 0.9], color='black', lw=0.5, alpha=0.5, zorder=3)
+
+    # ตัวหนังสืออธิบาย
+    ax.text(0.4, 0.95, "k-space data", ha='center', va='bottom', fontsize=16, fontweight='bold')
+    ax.text(0.4, 0.85, "HIGH $K_y$ FREQUENCY ZONE\nCAPTURES HORIZONTAL EDGES", ha='center', va='center', fontsize=9, fontweight='bold')
+    ax.text(0.4, 0.5, "LOW SPATIAL\nFREQUENCY ZONE\nCAPTURES BASIC CONTRAST", ha='center', va='center', fontsize=11, fontweight='bold')
+
+    # แกน X, Y
+    ax.annotate('', xy=(0.7, 0.05), xytext=(0.1, 0.05), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=2))
+    ax.text(0.4, 0.0, 'Frequency Encoding (horizontal axis) $K_x$', ha='center', va='top', fontsize=14)
+    ax.annotate('', xy=(0.05, 0.9), xytext=(0.05, 0.1), arrowprops=dict(arrowstyle='<|-|>', color='black', lw=2))
+    ax.text(0.0, 0.5, 'Phase Encoding\n(vertical axis) $K_y$', ha='center', va='center', rotation=90, fontsize=14)
+
+    # วาดคลื่น 3 รูปแบบ
+    x_w = np.linspace(0, 1, 300)
+    
+    # คลื่นบน (Yellow - Low freq)
+    y_w1 = np.sin(2 * np.pi * 2 * x_w) * 0.1 + 0.8
+    ax.plot(x_w*0.2 + 0.8, y_w1, color=c_center, lw=3)
+    ax.annotate('', xy=(0.78, 0.8), xytext=(0.55, 0.6), arrowprops=dict(arrowstyle='fancy', color=c_center, lw=2, connectionstyle="arc3,rad=-0.2"))
+
+    # คลื่นกลาง (Blue - High freq y)
+    y_w2 = np.sin(2 * np.pi * 12 * x_w) * 0.1 + 0.5
+    ax.plot(x_w*0.2 + 0.8, y_w2, color=c_tb, lw=3)
+    ax.annotate('', xy=(0.78, 0.55), xytext=(0.65, 0.85), arrowprops=dict(arrowstyle='fancy', color=c_tb, lw=2, connectionstyle="arc3,rad=0.2"))
+    
+    # คลื่นล่าง (Green - High freq x)
+    y_w3 = np.sin(2 * np.pi * 8 * x_w) * 0.1 + 0.2
+    ax.plot(x_w*0.2 + 0.8, y_w3, color=c_lr, lw=3)
+    ax.annotate('', xy=(0.78, 0.2), xytext=(0.65, 0.3), arrowprops=dict(arrowstyle='fancy', color=c_lr, lw=2, connectionstyle="arc3,rad=0.2"))
+
+    ax.set_xlim(-0.05, 1.05)
+    ax.set_ylim(-0.05, 1.05)
+    ax.axis('off')
+    return get_image_from_plot(fig)
+
 def draw_kspace_point(kx, ky, bg_image):
     fig, ax = plt.subplots(figsize=(4, 4))
-    ax.imshow(bg_image, cmap='gray', extent=[-112, 112, -112, 112])
+    # vmin=0, vmax=255 ช่วยให้ภาพสว่างเต็มที่
+    ax.imshow(bg_image, cmap='gray', extent=[-112, 112, -112, 112], vmin=0, vmax=255)
     ax.plot(kx, ky, 'ro', markersize=6)
     ax.annotate('', xy=(kx, ky), xytext=(0, 0), arrowprops=dict(arrowstyle='->', color='yellow', lw=2))
     ax.axhline(0, color='white', linewidth=0.5, linestyle='--')
@@ -131,7 +186,7 @@ def apply_filter(k_data, mode, radius):
 
 def draw_filtered_kspace(filtered_k):
     fig, ax = plt.subplots(figsize=(4, 4))
-    ax.imshow(format_kspace_display(filtered_k), cmap='gray')
+    ax.imshow(format_kspace_display(filtered_k), cmap='gray', vmin=0, vmax=255)
     ax.axis('off')
     return get_image_from_plot(fig)
 
@@ -190,52 +245,32 @@ def draw_pulse_sequence(current_step, total_steps):
     plt.tight_layout()
     return get_image_from_plot(fig)
 
-def draw_kspace_filling(current_step, total_steps, mode_type, real_bg):
+# วาด Trajectory แบบลูกศรซ้ายไปขวา (เฉพาะโหมดจำลอง)
+def draw_kspace_filling(current_step, total_steps):
     fig, ax = plt.subplots(figsize=(5, 6))
     
-    if mode_type == "ข้อมูลจำลอง (Simulated)":
-        ax.set_facecolor('black')
-        
-        ax.axhline(0, color='gray', lw=1, ls='--')
-        ax.axvline(0, color='gray', lw=1, ls='--')
-        
-        y_vals = np.linspace(90, -90, total_steps)
-        
-        for i in range(current_step + 1):
-            y = y_vals[i]
-            if i == current_step:
-                ax.annotate('', xy=(100, y), xytext=(-100, y), arrowprops=dict(arrowstyle='->', color='red', lw=3))
-            else:
-                ax.annotate('', xy=(100, y), xytext=(-100, y), arrowprops=dict(arrowstyle='->', color='white', lw=1.5))
-                
-        for i in range(current_step):
-            ax.plot([100, -100], [y_vals[i], y_vals[i+1]], color='gray', ls=':', lw=1)
-            
-        ax.set_xlim(-112, 112)
-        ax.set_ylim(-112, 112)
-        
-    else:
-        display_img = np.zeros((224, 224))
-        step_size = 224 / total_steps
-        
-        if current_step >= total_steps - 1:
-            display_img = real_bg
+    ax.set_facecolor('black')
+    ax.axhline(0, color='gray', lw=1, ls='--')
+    ax.axvline(0, color='gray', lw=1, ls='--')
+    
+    y_vals = np.linspace(90, -90, total_steps)
+    
+    for i in range(current_step + 1):
+        y = y_vals[i]
+        if i == current_step:
+            ax.annotate('', xy=(100, y), xytext=(-100, y), arrowprops=dict(arrowstyle='->', color='red', lw=3))
         else:
-            current_line_idx = int(current_step * step_size)
-            display_img[:current_line_idx + int(step_size), :] = real_bg[:current_line_idx + int(step_size), :]
+            ax.annotate('', xy=(100, y), xytext=(-100, y), arrowprops=dict(arrowstyle='->', color='white', lw=1.5))
             
-        ax.imshow(display_img, cmap='gray', extent=[-112, 112, -112, 112], origin='upper', vmin=0, vmax=1)
-        
-        current_y_center = 112 - int(current_step * step_size + step_size / 2)
-        ax.annotate('', xy=(112, current_y_center), xytext=(-112, current_y_center), arrowprops=dict(arrowstyle='->', color='red', lw=2))
-        
-        ax.set_xlim(-112, 112)
-        ax.set_ylim(-112, 112)
-        
-    ax.set_title("K-Space Trajectory", fontweight='bold', color='white' if mode_type=="ข้อมูลจำลอง (Simulated)" else 'black')
-    if mode_type == "ข้อมูลจำลอง (Simulated)":
-        fig.patch.set_facecolor('black')
+    for i in range(current_step):
+        ax.plot([100, -100], [y_vals[i], y_vals[i+1]], color='gray', ls=':', lw=1)
         
+    ax.set_xlim(-112, 112)
+    ax.set_ylim(-112, 112)
+    
+    ax.set_title("K-Space Trajectory (Simulated)", fontweight='bold', color='white')
+    fig.patch.set_facecolor('black')
+    
     ax.axis('off')
     return get_image_from_plot(fig)
 
@@ -260,19 +295,16 @@ with col_main:
     ข้อมูลใน k-space มักจะถูกนำมาแสดงผลในรูปแบบตารางสี่เหลี่ยม (Grid) โดยมีแกนหลักคือ **kx (แนวนอน - Frequency)** และ **ky (แนวตั้ง - Phase)** จุดสำคัญคือ **แกน kx และ ky เหล่านี้ ไม่ได้บอกตำแหน่งพิกัดในภาพอวัยวะ** แต่มันคือแกนที่บอกถึงลักษณะของ **"ความถี่เชิงพื้นที่"** ที่เป็นคลื่น (Sinusoidal wave) ด้วยเหตุนี้ **จุดแต่ละจุดบน K-space จึงไม่ได้จับคู่แบบ 1 ต่อ 1 กับพิกเซลบนภาพ MRI** (เช่น จุดมุมซ้ายบนของ K-space ไม่ได้สร้างภาพมุมซ้ายบนของอวัยวะ)
     """)
 
-    _, col_img_center, _ = st.columns([1.5, 3, 1.5])
+    _, col_img_center, _ = st.columns([1.5, 4, 1.5])
     with col_img_center:
-        # เช็คไฟล์รูปภาพใหม่
-        if os.path.exists("kspaceaxis.png"):
-            st.image("kspaceaxis.png", use_container_width=True)
-            # เพิ่มคำอ��ิบายอ้างอิงด้านล่างภาพ
-            st.markdown(
-                """<p class="reference-text">ภาพดัดแปลงจาก: Clover Learning. (2024). <i>MRI k-space made easy - MRI physics explained</i> [Video]. YouTube. 
-                <a href="https://youtu.be/cfE6SL2Xj6o?t=68" target="_blank">https://youtu.be/cfE6SL2Xj6o?t=68</a></p>""",
-                unsafe_allow_html=True
-            )
-        else:
-            st.info("กรุณาอัปโหลดรูปภาพ kspaceaxis.png เข้าระบบ")
+        # ใช้กราฟโค้ดแทนการดึงรูปภาพภายนอก
+        st.image(draw_kspace_diagram(), use_container_width=True)
+        # คำอ้างอิง
+        st.markdown(
+            """<p class="reference-text">ภาพจำลองอ้างอิงจาก: Clover Learning. (2024). <i>MRI k-space made easy - MRI physics explained</i> [Video]. YouTube. 
+            <a href="https://youtu.be/cfE6SL2Xj6o?t=68" target="_blank">https://youtu.be/cfE6SL2Xj6o?t=68</a></p>""",
+            unsafe_allow_html=True
+        )
 
     # ---------------------------------------------------------
     # NEW: K-Space Trajectories
@@ -306,10 +338,8 @@ with col_main:
     def reset_anim():
         st.session_state.fill_step = 0
 
-    _, col_ctrl1, col_ctrl2, _ = st.columns([0.5, 2.5, 2.5, 0.5])
-    with col_ctrl1:
-        data_mode = st.radio("เลือกรูปแบบ K-Space:", ["ข้อมูลจำลอง (Simulated)", "ข้อมูลจริง (kspace.mat)"])
-    with col_ctrl2:
+    _, col_ctrl, _ = st.columns([1, 4, 1])
+    with col_ctrl:
         st.write("ควบคุมการเติมบรรทัด (Gy):")
         c1, c2, c3, c4 = st.columns(4)
         c1.button("⏮ Reset", on_click=reset_anim)
@@ -325,21 +355,31 @@ with col_main:
         with col_anim1:
             st.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps), use_container_width=True)
         with col_anim2:
-            st.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps, data_mode, kspace_bg_image), use_container_width=True)
+            st.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps), use_container_width=True)
+
+    st.markdown("""
+    ---
+    **📌 หมายเหตุ:** หากพูดถึงจำนวนครั้ง Phase Encoding ที่มากขึ้น หรือจำนวนบรรทัดการเก็บข้อมูลมากขึ้น ภาพก็จะมีความละเอียด (Resolution) ที่มากขึ้น เช่น เพิ่มขึ้นเป็น 128 หรือ 256 บรรทัด เป็นต้น
+    """)
 
     st.markdown("---")
     st.markdown("## 📍 1 จุดบน k-space")
 
+    # Center Text
     st.markdown("""
-    **k-space 1 จุด = ข้อมูลของภาพทั้งภาพ** และ **ภาพ 1 พิกเซล = ผลรวมของ k-space ทุกจุด**
-
-    **1 จุดใน k-space = แผ่นลวดลายคลื่น 1 แผ่น (2D Sinusoidal Wave)**
+    <div style="text-align: center; background-color: #f0f8ff; padding: 15px; border-radius: 10px; margin-bottom: 20px;">
+        <b>k-space 1 จุด = ข้อมูลของภาพทั้งภาพ และ ภาพ 1 พิกเซล = ผลรวมของ k-space ทุกจุด</b><br><br>
+        <b>1 จุดใน k-space = แผ่นลวดลายคลื่น 1 แผ่น (2D Sinusoidal Wave)</b>
+    </div>
+    """, unsafe_allow_html=True)
 
+    st.markdown("""
     1. **ตำแหน่งของจุด (พิกัด kx, ky) บอก "ความถี่" และ "ทิศทาง"**
-       - **ระยะห่างจากศูนย์กลาง (ความถี่):** ยิ่งจุดนี้อยู่ไกลจากจุดศูนย์กลาง k-space มากเท่าไหร่ แผ่นลวดลายคลื่นก็จะยิ่ง **"ถี่"** (High frequency)
+       - **ระยะห่างจากศูนย์กลาง (ความถี่):** ยิ่งจุดนี้อยู่ไกลจากจุดศูนย์กลาง k-space มากเท่าไหร่ แผ่นลวดลายคลื่นก็จะยิ่ง **"ถี่"** (High frequency) ความยาวคลื่นจะสั้นลง มีความละเอียด เส้นจะห่างกันน้อยลง ทำให้ภาพมีดีเทลที่ชัดเจนขึ้น ในขณะที่ส่วนที่ใกล้จุดศูนย์กลาง คลื่นจะมีความถี่น้อย ความยาวคลื่นมาก มีลัก���ณะเป็นก้อนใหญ่ ๆ (สร้างรูปร่างโดยรวมของภาพ)
        - **มุมของจุด (ทิศทาง):** ตำแหน่งของจุดเมื่อเทียบกับจุดศูนย์กลาง จะเป็นตัวบอกว่าแผ่นลวดลายคลื่นนี้จะ **"เอียง"** ไปในทิศทางไหน
-    2. **ความสว่างของจุด (Amplitude / Magnitude) บอก "น้ำหนัก"**
-       - ความสว่างของจุดไม่ได้แปลว่าภาพ MRI ตรงนั้นจะสว่าง แต่มันบอกถึง **"ปริมาณ (Weight)"**
+       - **จุดศูนย์กลางเป๊ะ (Origin):** จะเป็นคลื่นที่ไม่มีความถี่ ค่าความถี่ของคลื่นเป็นศูนย์ ดังนั้นตรงกลางจะไม่เห็นลักษณะรูปคลื่น
+    2. **ความสว่างของจุด (Amplitude / Magnitude) บอก "ปริมาณ/น้ำหนัก (Weight)"**
+       - ความสว่างของจุดไม่ได้แปลว่าภาพ MRI ตรงนั้นจะสว่าง แต่มันบอกถึง **"ปริมาณ/น้ำหนัก (Weight)"**
        - **จุดสว่างมาก:** ภาพ MRI มีแผ่นลวดลายชนิดนี้เป็นส่วนประกอบอยู่ **เยอะมาก (มีความสำคัญต่อภาพสูง)**
        - **จุดมืดหรือจาง:** ภาพ MRI แทบจะไม่มีลวดลายชนิดนี้ประกอบอยู่เลย
     """)
@@ -358,6 +398,15 @@ with col_main:
     with col_img2:
         st.image(draw_wave(kx_val, ky_val), caption="แผ่นลวดลายคลื่น (2D Sinusoidal Wave)", use_container_width=True)
 
+    # ส่วน Toggle สำหรับสังเกตคลื่น
+    with st.expander("🔍 สังเกตลักษณะคลื่น (คลิกเพื่อดูคำอธิบายเพิ่มเติม)"):
+        st.markdown("""
+        **ลองปรับเลื่อนพิกัดเพื่อสังเกตความเปลี่ยนแปลง:**
+        - **ยิ่งจุดอยู่ใกล้ศูนย์กลาง:** คลื่นจะมีความถี่น้อย ความยาวคลื่นมาก มีลักษณะเป็นก้อนใหญ่ ๆ (แสดงถึงรูปร่างโดยรวม)
+        - **ยิ่งจุดอยู่ไกลศูนย์กลาง:** คลื่นจะมีความถี่สูง ความยาวคลื่นสั้นลง เส้นห่างกันน้อยลง มีความละเอียดสูง (แสดงส่วนที่เป็นดีเทลหรือเส้นขอบ)
+        - **เมื่อจุดอยู่ตรงกลางเป๊ะ (kx=0, ky=0):** จะไม่มีรูปคลื่นปรากฏให้เห็นเลย เพราะค่าความถี่ของคลื่นเป็นศูนย์
+        """)
+
     st.markdown("## 🔄 Inverse Fourier Transform")
     st.markdown("""
     เมื่อเก็บข้อมูลจนเต็มพื้นที่ k-space เราจะใช้กระบวนการทางคณิตศาสตร์ **2D Inverse Fourier Transform (2D-iFT)** เปลี่ยนข้อมูลความถี่กลับไปเป็นข้อมูลภาพ (Spatial Domain)
@@ -401,6 +450,6 @@ with col_main:
 
     _, col_fimg1, col_fimg2, _ = st.columns([0.5, 2.5, 2.5, 0.5])
     with col_fimg1:
-        st.image(draw_filtered_kspace(np.log(filtered_k)), caption="ภาพ K-Space ที่ถูกเลือก", use_container_width=True)
+        st.image(draw_filtered_kspace(filtered_k), caption="ภาพ K-Space ที่ถูกเลือก", use_container_width=True)
     with col_fimg2:
         st.image(draw_mri(mri_result), caption="ภาพ MRI ผลลัพธ์", use_container_width=True)