Update app.py

app.py

@@ -22,132 +22,29 @@ image_data = [
 # 初始化 session state 用於追蹤當前頁面
 if 'page' not in st.session_state:
     st.session_state.page = 0
-if 'fullscreen' not in st.session_state:
-    st.session_state.fullscreen = False
 
-# 自訂全屏和換頁功能
-st.markdown("""
-    <style>
-    .fullscreen-container {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: #000;
-        z-index: 1000;
-        justify-content: center;
-        align-items: center;
-    }
-    .fullscreen-container.active {
-        display: flex;
-    }
-    .fullscreen-image {
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
-    }
-    .caption {
-        position: absolute;
-        bottom: 10px;
-        left: 50%;
-        transform: translateX(-50%);
-        color: white;
-        font-size: 20px;
-    }
-    .nav-buttons {
-        position: absolute;
-        top: 50%;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        padding: 0 20px;
-        transform: translateY(-50%);
-    }
-    .nav-buttons button {
-        background-color: rgba(255, 255, 255, 0.7);
-        border: none;
-        padding: 10px 20px;
-        font-size: 16px;
-        cursor: pointer;
-    }
-    .nav-buttons button:hover {
-        background-color: rgba(255, 255, 255, 1);
-    }
-    .exit-fullscreen {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        background-color: rgba(255, 255, 255, 0.7);
-        border: none;
-        padding: 5px 10px;
-        cursor: pointer;
-    }
-    </style>
-    <div class="fullscreen-container" id="fullscreen-container">
-        <img class="fullscreen-image" id="fullscreen-image" src="">
-        <div class="caption" id="fullscreen-caption"></div>
-        <div class="nav-buttons">
-            <button onclick="changePage(-1)">上一頁</button>
-            <button onclick="changePage(1)">下一頁</button>
-        </div>
-        <button class="exit-fullscreen" onclick="exitFullscreen()">退出全屏</button>
-    </div>
-    <script>
-        function toggleFullscreen() {
-            const container = document.getElementById('fullscreen-container');
-            const image = document.getElementById('fullscreen-image');
-            const caption = document.getElementById('fullscreen-caption');
-            const page = parseInt(window.parent.document.getElementById('page').value);
-            image.src = window.parent.streamlitDocStore.get('image_data')[page]['path'];
-            caption.textContent = window.parent.streamlitDocStore.get('image_data')[page]['caption'];
-            container.classList.toggle('active');
-            window.parent.document.getElementById('fullscreen').value = container.classList.contains('active');
-            window.parent.streamlitDocStore.setRerun();
-        }
-
-        function changePage(direction) {
-            let page = parseInt(window.parent.document.getElementById('page').value);
-            const maxPage = window.parent.streamlitDocStore.get('image_data').length - 1;
-            page = Math.max(0, Math.min(maxPage, page + direction));
-            window.parent.document.getElementById('page').value = page;
-            toggleFullscreen(); // 切換後重新載入圖片
-        }
-
-        function exitFullscreen() {
-            const container = document.getElementById('fullscreen-container');
-            container.classList.remove('active');
-            window.parent.document.getElementById('fullscreen').value = false;
-            window.parent.streamlitDocStore.setRerun();
-        }
-
-        // 監聽鍵盤事件（可選）
-        document.addEventListener('keydown', (event) => {
-            if (document.getElementById('fullscreen-container').classList.contains('active')) {
-                if (event.key === 'ArrowLeft') changePage(-1);
-                if (event.key === 'ArrowRight') changePage(1);
-                if (event.key === 'Escape') exitFullscreen();
-            }
-        });
-    </script>
-    <input type="hidden" id="page" value="0">
-    <input type="hidden" id="fullscreen" value="false">
-    <button onclick="toggleFullscreen()">點擊進入全屏</button>
-""", unsafe_allow_html=True)
-
-# 根據 session state 控制全屏狀態
-if st.session_state.fullscreen:
-    st.markdown(f'<script>toggleFullscreen()</script>', unsafe_allow_html=True)
-
-# 顯示當前頁面的圖片（非全屏模式）
+# 顯示當前頁面的圖片，使用 Streamlit 原生全屏
 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("上一頁", disabled=st.session_state.page == 0):
+        st.session_state.page -= 1
+        st.experimental_rerun()
+with col2:
+    if st.button("下一頁", disabled=st.session_state.page == len(image_data) - 1):
+        st.session_state.page += 1
+        st.experimental_rerun()
+
 # 顯示當前頁數
 st.write(f"頁面: {st.session_state.page + 1} / {len(image_data)}")
 
+# 提示使用鍵盤換頁（全屏模式下）
+st.write("**全屏模式提示**：進入全屏後，可使用鍵盤的 ←（上一頁）或 →（下一頁）切換。")
+
 # 分隔線
 st.markdown("---")