add background image

Dockerfile

@@ -44,7 +44,7 @@ USER nonroot
 # Run the Streamlit application by default
 ENV TZ="Asia/Taipei"
 EXPOSE 8800
-CMD ["python", "-m", "streamlit", "run", "app.py", "--server.port=8800", "--server.enableCORS=false", "--server.enableXsrfProtection=false"]
+CMD ["python", "-m", "streamlit", "run", "app.py"]
 
 # Build
 # docker build --platform=linux/amd64 -t hiking_assistant:latest .

hiking_assistant/.streamlit/config.toml

@@ -0,0 +1,11 @@
+[theme]
+base = "light"
+
+[server]
+port = 8800
+enableCORS = false
+enableXsrfProtection = false
+maxUploadSize = 30
+
+[client]
+toolbarMode = "minimal"

hiking_assistant/app.py

@@ -3,7 +3,9 @@
 # author: deng
 # date: 20251127
 
+import base64
 from datetime import datetime
+from pathlib import Path
 
 import streamlit as st
 import yaml
@@ -22,6 +24,48 @@ class HikingAssistant:
         with open('assets/config.yaml', 'r') as f:
             return yaml.safe_load(f)
 
+    def _set_background(self, image_path):
+        """Set background image for the application.
+
+        Args:
+            image_path: Path to the background image
+        """
+
+        image_path = Path(image_path)
+        if not image_path.exists():
+            return
+
+        with open(image_path, 'rb') as f:
+            image_data = base64.b64encode(f.read()).decode()
+
+        # Use file modification time as cache buster
+        cache_buster = int(image_path.stat().st_mtime)
+
+        background_css = f"""
+        <style id="bg-style-{cache_buster}">
+        .stApp {{
+            background-image: url("data:image/jpeg;base64,{image_data}");
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }}
+        
+        /* Add semi-transparent overlay for better readability */
+        .stApp::before {{
+            content: "";
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.4);
+            z-index: -1;
+        }}
+        </style>
+        """
+        st.markdown(background_css, unsafe_allow_html=True)
+
     def run(self):
         """Hiking Assistant application"""
         # Page configuration
@@ -31,6 +75,7 @@ class HikingAssistant:
             layout='wide',
             initial_sidebar_state='collapsed',
         )
+        self._set_background(self._config['app']['page_background_path'])
 
         # [Block1]
         # Title and description

hiking_assistant/assets/config.yaml

@@ -2,6 +2,7 @@ app:
   page_title: 臺灣登山小幫手
   page_favicon_path: ./assets/favicon_compressed.jpg
   page_footer_text: ⚠️ 本服務提供之資訊僅供規劃參考，山區氣候瞬息萬變，請務必依據現場狀況與自身能力進行風險評估<br>Made with ❤️ by <a href="https://gitea.guineapig.love/deng">deng</a>
+  page_background_path: ./assets/background.jpg
   altitude_sickness:
     elevation_threshold: 2100
     warning_text: 此路線海拔較高，請留意[高山症](https://www.ysnp.gov.tw/StaticPage/MountainSickness)發生風險