Update app.py

app.py

@@ -4,28 +4,41 @@ import requests
 import json
 from io import StringIO
 
-# 圓周率與無限猴子定理的介紹
+# 圓周率與無限猴子定理的介紹與分頁圖片展示
 st.title("探索圓周率與無限猴子定理的奇妙世界")
 st.write("""
 歡迎參加這個有趣的活動！我們將一起探索圓周率 (π) 和無限猴子定理的奧秘，並透過幸運數字查詢系統，發現你選的數字在 π 中的秘密。
 """)
 
-# 插入五張 GIF 圖片，每張獨占一列
-col1 = st.columns(1)  # 單列佈局
-with col1[0]:
-    st.image("m1.GIF", caption="圓周率與無限猴子定理的奇妙關聯", use_column_width=True)
-col2 = st.columns(1)
-with col2[0]:
-    st.image("m2.GIF", caption="重複與不重複", use_column_width=True)
-col3 = st.columns(1)
-with col3[0]:
-    st.image("m3.GIF", caption="圓周率裡藏著你的幸運號碼", use_column_width=True)
-col4 = st.columns(1)
-with col4[0]:
-    st.image("m4.GIF", caption="無限猴子定理是什麼？", use_column_width=True)
-col5 = st.columns(1)
-with col5[0]:
-    st.image("m5.GIF", caption="圓周率是無限長的數字打字機", use_column_width=True)
+# 定義圖片和標題
+image_data = [
+    {"path": "m1.GIF", "caption": "圓周率與無限猴子定理的奇妙關聯"},
+    {"path": "m2.GIF", "caption": "重複與不重複"},
+    {"path": "m3.GIF", "caption": "圓周率裡藏著你的幸運號碼"},
+    {"path": "m4.GIF", "caption": "無限猴子定理是什麼？"},
+    {"path": "m5.GIF", "caption": "圓周率是無限長的數字打字機"},
+]
+
+# 初始化 session state 用於追蹤當前頁面
+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)
+
+# 換頁按鈕
+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
+
+# 顯示當前頁數
+st.write(f"頁面: {st.session_state.page + 1} / {len(image_data)}")
 
 # 分隔線
 st.markdown("---")