Update app.py

app.py

@@ -23,19 +23,46 @@ image_data = [
 if 'page' not in st.session_state:
     st.session_state.page = 0
 
-# 顯示當前頁面的圖片
-st.image(image_data[st.session_state.page]["path"], 
-         caption=image_data[st.session_state.page]["caption"], 
-         use_container_width=True)
+# 使用容器來控制圖片和按鈕的佈局
+with st.container():
+    # 顯示當前頁面的圖片，全屏顯示
+    st.image(image_data[st.session_state.page]["path"], 
+             caption=image_data[st.session_state.page]["caption"], 
+             use_container_width=True)
 
-# 換頁按鈕
-col1, col2 = st.columns(2)
-with col1:
-    if st.button("上一頁") and st.session_state.page > 0:
-        st.session_state.page -= 1
-with col2:
-    if st.button("下一頁") and st.session_state.page < len(image_data) - 1:
-        st.session_state.page += 1
+    # 自訂 CSS 樣式，將按鈕浮動在圖片上方
+    st.markdown("""
+    <style>
+    .button-container {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 20px;
+        transform: translateY(-50%);
+    }
+    .stButton > button {
+        background-color: rgba(255, 255, 255, 0.7);
+        border: none;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+    }
+    .stButton > button:hover {
+        background-color: rgba(255, 255, 255, 1);
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+    # 在圖片上浮動按鈕
+    col1, col2 = st.columns([1, 1])  # 左右分欄
+    with col1:
+        if st.button("上一頁", key="prev") and st.session_state.page > 0:
+            st.session_state.page -= 1
+    with col2:
+        if st.button("下一頁", key="next") and st.session_state.page < len(image_data) - 1:
+            st.session_state.page += 1
 
 # 顯示當前頁數
 st.write(f"頁面: {st.session_state.page + 1} / {len(image_data)}")