Update app.py

app.py

@@ -1,5 +1,6 @@
 import streamlit as st
 import numpy as np
+import base64
 import scipy.io
 import zipfile
 import os
@@ -116,6 +117,20 @@ def get_image_from_plot(fig):
     plt.close(fig)
     return buf.getvalue()  # Return bytes — reliably cacheable by st.cache_data
 
+def st_image(img_bytes, caption=None):
+    """Display image as inline base64 data URI.
+    Prevents layout jiggle: browser renders it instantly with no HTTP round-trip,
+    so no 0-height placeholder → image-pop-in → scrollbar-flicker cycle."""
+    b64 = base64.b64encode(img_bytes).decode('utf-8')
+    cap_html = (f'<p style="text-align:center;font-size:14px;color:gray;margin-top:4px">' 
+                + caption + '</p>') if caption else ''
+    st.markdown(
+        f'<div style="width:100%">' 
+        f'<img src="data:image/png;base64,{b64}" style="width:100%;height:auto;display:block">' 
+        f'{cap_html}</div>',
+        unsafe_allow_html=True
+    )
+
 @st.cache_data
 def draw_kspace_diagram():
     fig, ax = plt.subplots(figsize=(6, 6))
@@ -318,7 +333,7 @@ with col_main:
 
     _, col_img_center, _ = st.columns([2.5, 3, 2.5])
     with col_img_center:
-        st.image(draw_kspace_diagram(), use_container_width=True)
+        st_image(draw_kspace_diagram())
 
     # ---------------------------------------------------------
     # K-Space Trajectories
@@ -366,9 +381,9 @@ with col_main:
     # ถอด st.empty ออกให้หมดเพื่อให้ Streamlit จัดการ Layout ปกติ ภาพจะไม่กระโดดยุบตัว
     col_anim1, col_anim2 = st.columns([1, 1])
     with col_anim1:
-        st.image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps), use_container_width=True)
+        st_image(draw_pulse_sequence(st.session_state.fill_step, total_anim_steps))
     with col_anim2:
-        st.image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps), use_container_width=True)
+        st_image(draw_kspace_filling(st.session_state.fill_step, total_anim_steps))
 
     st.markdown("""
     ---
@@ -407,9 +422,9 @@ with col_main:
 
     _, col_img1, col_img2, _ = st.columns([0.5, 2.5, 2.5, 0.5])
     with col_img1:
-        st.image(draw_kspace_point(kx_val, ky_val, kspace_bg_image), caption="พิกัด K-Space (มีเส้นบอกทิศทาง)", use_container_width=True)
+        st_image(draw_kspace_point(kx_val, ky_val, kspace_bg_image), caption="พิกัด K-Space (มีเส้นบอกทิศทาง)")
     with col_img2:
-        st.image(draw_wave(kx_val, ky_val), caption="แผ่นลวดลายคลื่น (2D Sinusoidal Wave)", use_container_width=True)
+        st_image(draw_wave(kx_val, ky_val), caption="แผ่นลวดลายคลื่น (2D Sinusoidal Wave)")
 
     with st.expander("🔍 สังเกตลักษณะคลื่น (คลิกเพื่อดูคำอธิบายเพิ่มเติม)"):
         st.markdown("""
@@ -462,9 +477,9 @@ 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(filtered_k), caption="ภาพ K-Space ที่ถูกเลือก", use_container_width=True)
+        st_image(draw_filtered_kspace(filtered_k), caption="ภาพ K-Space ที่ถูกเลือก")
     with col_fimg2:
-        st.image(draw_mri(mri_result), caption="ภาพ MRI ผลลัพธ์", use_container_width=True)
+        st_image(draw_mri(mri_result), caption="ภาพ MRI ผลลัพธ์")
 
     # Spacer: keeps page taller than viewport at all zoom levels so the
     # scrollbar never disappears and never causes a layout-shift jiggle.