Update app.py

app.py

@@ -45,13 +45,6 @@ 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)
 
@@ -156,7 +149,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 
+    # 2. Gy (Phase Encoding)
     ax = axes[1]
     gy_vals = np.linspace(1, -1, total_steps)
     for i, gy_amp in enumerate(gy_vals):
@@ -169,7 +162,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
+    # 3. Gx (Frequency Encoding)
     ax = axes[2]
     gx = np.zeros_like(t)
     gx[(t > 2.5) & (t < 3.5)] = -0.5 
@@ -190,46 +183,62 @@ 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)":
-        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)
-            
-            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.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)
             
-        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)
+        
     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), :]
-        ax.imshow(display_img, cmap='gray', extent=[-112, 112, -112, 112], vmin=0, vmax=1)
+            
+        # 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.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)
 
@@ -256,17 +265,10 @@ with col_main:
 
     _, col_img_center, _ = st.columns([1.5, 3, 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("กรุณาอัปโหลดรูปภาพ image_729a00.jpg เข้าระบบ")
+        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)
 
     # ---------------------------------------------------------
     # NEW: K-Space Trajectories
@@ -276,10 +278,10 @@ with col_main:
     **การบันทึกข้อมูลลงใน K-space สามารถทำได้หลายรูปแบบ** โดยจะยกตัวอย่างให้การเก็บข้อมูลจะดำเนินไปทีละบรรทัด โดยสัญญาณจะเกิดขึ้นหลังจากกระตุ้นด้วย RF Pulse โดยมีลำดับดังนี้
 
     1. กระบวนการเริ่มต้นขึ้นเมื่อสนามแม่เหล็กเกรเดียนท์ **Gx** และ **Gy** เริ่มทำงานพร้อมกันเพื่อสร้างพิกัดอ้างอิง
-    2. ระบบจะเริ่มบันทึกข้อมูลจุดแรกของเฟสในแถวที่ 1 โดยจะเริ่มต้นที่ค่าแอมปลิจูดของ **Gy ทางฝั่งบวกก่อน**
-    3. สัญญาณจะถูกบันทึกไล่ไปตามแกน Gx จนได้ข้อมูลครบถ้วนเต็ม 1 แถว
+    2. ระบบจะเริ่มบันทึกข้อมูลจุดแรกของเฟสในแถวที่ 1 โดยจะเริ่มต้นที่ค่าแอมปลิจูดของ **Gy ทางฝั่งบวกก่อน (พิกัดด้านบนของ K-Space)**
+    3. สัญญาณจะถูกบันทึกไล่ไปตามแกน **Gx (จากซ้าย -kx ไป ขวา +kx)** จนได้ข้อมูลครบถ้วนเต็ม 1 แถว
     4. เมื่อจบแถวแรก ระบบจะเริ่มกระบวนการใหม่เพื่อบันทึกข้อมูลในเฟสแถวที่ 2, 3, 4 ต่อไปเรื่อยๆ
-    5. การวนรอบนี้จะดำเนินต่อไปพร้อมกับการเปลี่ยนค่า **Gy ให้ลดลงจนไปถึงค่าทางฝั่งลบ** เมื่อบันทึกครบทุกแถวตามจำนวนความละเอียดที่ตั้งไว้ จะถือว่าสิ้นสุดกระบวนการเก็บข้อมูล MRI แบบสองมิติลงบน K-space
+    5. การวนรอบนี้จะดำเนินต่อไปพร้อมกับการเปลี่ยนค่า **Gy ให้ลดลงจนไปถึงค่าทางฝั่งลบ (พิกัดด้านล่าง)** เมื่อบันทึกครบทุกแถวตามจำนวนความละเอียดที่ตั้งไว้ จะถือว่าสิ้นสุดกระบวนการเก็บข้อมูล MRI แบบสองมิติลงบน K-space
     """)
 
     total_anim_steps = 15
@@ -321,6 +323,7 @@ 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")