Update app.py

app.py

@@ -45,6 +45,13 @@ st.markdown("""
         background-color: #1E88E5;
         color: white;
     }
+    /* ปรับแต่งส่วนอ้างอิง */
+    .reference-text {
+        font-size: 14px;
+        color: #666;
+        text-align: center;
+        margin-top: 5px;
+    }
     </style>
     """, unsafe_allow_html=True)
 
@@ -149,7 +156,7 @@ def draw_pulse_sequence(current_step, total_steps):
     ax.text(0, 0.5, 'RF', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.get_yaxis_transform())
     ax.axis('off')
     
-    # 2. Gy (Phase Encoding)
+    # 2. Gy 
     ax = axes[1]
     gy_vals = np.linspace(1, -1, total_steps)
     for i, gy_amp in enumerate(gy_vals):
@@ -162,7 +169,7 @@ def draw_pulse_sequence(current_step, total_steps):
     ax.text(0, 0, 'Gy', fontsize=14, fontweight='bold', va='center', ha='right', transform=ax.get_yaxis_transform())
     ax.axis('off')
 
-    # 3. Gx (Frequency Encoding)
+    # 3. Gx
     ax = axes[2]
     gx = np.zeros_like(t)
     gx[(t > 2.5) & (t < 3.5)] = -0.5 
@@ -183,62 +190,46 @@ def draw_pulse_sequence(current_step, total_steps):
     plt.tight_layout()
     return get_image_from_plot(fig)
 
-# --- ฟังก์ชันวาด Trajectory (เริ่มซ้ายบน วิ่งไปขวา) ---
 def draw_kspace_filling(current_step, total_steps, mode_type, real_bg):
     fig, ax = plt.subplots(figsize=(5, 6))
+    display_img = np.zeros((224, 224))
+    
+    step_size = 224 / total_steps
     
     if mode_type == "ข้อมูลจำลอง (Simulated)":
-        # สร้างกราฟดำ
-        ax.set_facecolor('black')
-        
-        # แกน kx, ky
-        ax.axhline(0, color='gray', lw=1, ls='--')
-        ax.axvline(0, color='gray', lw=1, ls='--')
-        
-        # คำนวณพิกัด Y จากบนลงล่าง (+ky ไป -ky)
-        y_vals = np.linspace(90, -90, total_steps)
-        
-        for i in range(current_step + 1):
-            y = y_vals[i]
-            # วาดเส้นลูกศรวิ่งจาก ซ้าย (-kx) ไป ขวา (+kx)
-            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)
+        x_array = np.linspace(-10, 10, 224)
+        for step in range(current_step + 1):
+            y_center = int(step * step_size + step_size / 2)
+            y_start = max(0, y_center - 1)
+            y_end = min(224, y_center + 1)
             
-        ax.set_xlim(-112, 112)
-        ax.set_ylim(-112, 112)
-        
+            signal = np.abs(np.sinc(x_array))
+            noise = np.random.uniform(0.1, 0.4, 224)
+            line_detail = signal + noise
+            
+            ky_dist = abs(step - (total_steps - 1)/2) / ((total_steps - 1)/2)
+            line_detail = line_detail * (1.0 - 0.7 * ky_dist)
+            
+            display_img[y_start:y_end, :] = np.clip(line_detail, 0, 1)
+            
+        ax.imshow(display_img, cmap='gray', extent=[-112, 112, -112, 112], vmin=0, vmax=1)
     else:
-        # โหมดข้อมูลจริง (kspace.mat) เติมจากบนลงล่าง
-        display_img = np.zeros((224, 224))
-        step_size = 224 / total_steps
-        
         if current_step >= total_steps - 1:
             display_img = real_bg
         else:
             current_line_idx = int(current_step * step_size)
-            # เติมข้อมูลจากแถวบน (index 0) ลงมา
             display_img[:current_line_idx + int(step_size), :] = real_bg[:current_line_idx + int(step_size), :]
-            
-        # origin='upper' ควบคุมให้ index 0 อยู่ด้านบนสุด (y=112)
-        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')
+        ax.imshow(display_img, cmap='gray', extent=[-112, 112, -112, 112], vmin=0, vmax=1)
         
+    ax.set_xlim(-112, 112)
+    ax.set_ylim(112, -112)
+    
+    current_y_center = 112 - int(current_step * step_size + step_size / 2)
+    ax.annotate('', xy=(-70, current_y_center), xytext=(-110, current_y_center), arrowprops=dict(arrowstyle='->', color='red', lw=2))
+    
+    ax.axhline(0, color='white', linewidth=0.5, linestyle='--')
+    ax.axvline(0, color='white', linewidth=0.5, linestyle='--')
+    ax.set_title("K-Space Filling", fontweight='bold')
     ax.axis('off')
     return get_image_from_plot(fig)
 
@@ -265,10 +256,17 @@ with col_main:
 
     _, col_img_center, _ = st.columns([1.5, 3, 1.5])
     with col_img_center:
-        if os.path.exists("Screenshot 2026-05-07 205051.png"):
-            st.image("Screenshot 2026-05-07 205051.png", use_container_width=True)
-        elif os.path.exists("Screenshot 2026-05-07 205051.jpg"):
-            st.image("Screenshot 2026-05-07 205051.jpg", use_container_width=True)
+        # เช็คไฟล์รูปภาพใหม่
+        if os.path.exists("image_729a00.jpg"):
+            st.image("image_729a00.jpg", 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("กรุณาอัปโหลดรูปภาพ image_729a00.jpg เข้าระบบ")
 
     # ---------------------------------------------------------
     # NEW: K-Space Trajectories
@@ -278,10 +276,10 @@ with col_main:
     **การบันทึกข้อมูลลงใน K-space สามารถทำได้หลายรูปแบบ** โดยจะยกตัวอย่างให้การเก็บข้อมูลจะดำเนินไปทีละบรรทัด โดยสัญญาณจะเกิดขึ้นหลังจากกระตุ้นด้วย RF Pulse โดยมีลำดับดังนี้
 
     1. กระบวนการเริ่มต้นขึ้นเมื่อสนามแม่เหล็กเกรเดียนท์ **Gx** และ **Gy** เริ่มทำงานพร้อมกันเพื่อสร้างพิกัดอ้างอิง
-    2. ระบบจะเริ่มบันทึกข้อมูลจุดแรกของเฟสในแถวที่ 1 โดยจะเริ่มต้นที่ค่าแอมปลิจูดของ **Gy ทางฝั่งบวกก่อน (พิกัดด้านบนของ K-Space)**
-    3. สัญญาณจะถูกบันทึกไล่ไปตามแกน **Gx (จากซ้าย -kx ไป ขวา +kx)** จนได้ข้อมูลครบถ้วนเต็ม 1 แถว
+    2. ระบบจะเริ่มบันทึกข้อมูลจุดแรกของเฟสในแถวที่ 1 โดยจะเริ่มต้นที่ค่าแอมปลิจูดของ **Gy ทางฝั่งบวกก่อน**
+    3. สัญญาณจะถูกบันทึกไล่ไปตามแกน Gx จนได้ข้อมูลครบถ้วนเต็ม 1 แถว
     4. เมื่อจบแถวแรก ระบบจะเริ่มกระบวนการใหม่เพื่อบันทึกข้อมูลในเฟสแถวที่ 2, 3, 4 ต่อไปเรื่อยๆ
-    5. การวนรอบนี้จะดำเนินต่อไปพร้อมกับการเปลี่ยนค่า **Gy ให้ลดลงจนไปถึงค่าทางฝั่งลบ (พิกัดด้านล่าง)** เมื่อบันทึกครบทุกแถวตามจำนวนความละเอียดที่ตั้งไว้ จะถือว่าสิ้นสุดกระบวนการเก็บข้อมูล MRI แบบสองมิติลงบน K-space
+    5. การวนรอบนี้จะดำเนินต่อไปพร้อมกับการเปลี่ยนค่า **Gy ให้ลดลงจนไปถึงค่าทางฝั่งลบ** เมื่อบันทึกครบทุกแถวตามจำนวนความละเอียดที่ตั้งไว้ จะถือว่าสิ้นสุดกระบวนการเก็บข้อมูล MRI แบบสองมิติลงบน K-space
     """)
 
     total_anim_steps = 15
@@ -323,7 +321,6 @@ with col_main:
         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.markdown("---")
     st.markdown("## 📍 1 จุดบน k-space")