add new compressed background and favicon

hiking_assistant/app.py

@@ -5,7 +5,6 @@
 
 import base64
 from datetime import datetime
-from pathlib import Path
 
 import streamlit as st
 import yaml
@@ -24,47 +23,45 @@ class HikingAssistant:
         with open('assets/config.yaml', 'r') as f:
             return yaml.safe_load(f)
 
-    def _set_background(self, image_path):
+    def _convert_image_to_base64(self, image_path):
+        with open(image_path, 'rb') as f:
+            return base64.b64encode(f.read()).decode()
+
+    def _set_page_background(self, image_path, opacity=0.8):
         """Set background image for the application.
 
         Args:
             image_path: Path to the background image
         """
+        image_data = self._convert_image_to_base64(image_path)
+        ext = image_path.split('.')[-1]
+        overlay = f'rgba(255, 255, 255, {1 - opacity})'
+        st.markdown(
+            f"""
+            <style>
+            .stApp {{
+                background-image: linear-gradient({overlay}, {overlay}), url(data:image/{ext};base64,{image_data});
+                background-size: cover;
+                background-position: center;
+                background-attachment: fixed;
+            }}
+            </style>
+            """,
+            unsafe_allow_html=True,
+        )
 
-        image_path = Path(image_path)
+    def _add_custom_title(self, title, image_path):
-        if not image_path.exists():
+        favicon_data = self._convert_image_to_base64(image_path)
-            return
+        ext = image_path.split('.')[-1]
-
+        st.markdown(
-        with open(image_path, 'rb') as f:
+            f"""
-            image_data = base64.b64encode(f.read()).decode()
+            <h1 style="display: flex; align-items: center; gap: 0.5rem;">
-
+                <img src="data:image/{ext};base64,{favicon_data}" width="48" height="48" style="border-radius: 8px;">
-        # Use file modification time as cache buster
+                {title}
-        cache_buster = int(image_path.stat().st_mtime)
+            </h1>
-
+            """,
-        background_css = f"""
+            unsafe_allow_html=True,
-        <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"""
@@ -75,11 +72,11 @@ class HikingAssistant:
             layout='wide',
             initial_sidebar_state='collapsed',
         )
-        self._set_background(self._config['app']['page_background_path'])
+        self._set_page_background(self._config['app']['page_background_path'], self._config['app']['page_background_opacity'])
 
         # [Block1]
-        # Title and description
+        # Title with favicon
-        st.title('⛰️ ' + self._config['app']['page_title'])
+        self._add_custom_title(self._config['app']['page_title'], self._config['app']['page_favicon_path'])
 
         # File uploader
         uploaded_file = st.file_uploader(

hiking_assistant/assets/config.yaml

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