temp storage fix for memories

Dockerfile

@@ -12,6 +12,8 @@ RUN apt-get update && apt-get install -y \
 # Update pip first
 RUN pip install --upgrade pip
 
+RUN apt-get update && apt-get install -y libgl1 && apt-get clean
+
 COPY requirements.txt ./
 COPY src/ ./src/
 

src/pages/4_📝_Memory_Wall.py

@@ -1,7 +1,9 @@
+import shutil
 import streamlit as st
 import json
 import os
 from datetime import datetime
+from pathlib import Path
 from PIL import Image
 
 # --- Load Custom CSS ---
@@ -17,27 +19,85 @@ else:
     st.error(f"CSS file not found at: {css_file_path}")
 
 
-# Constants
-MEMORY_FILE = "memories.json"
-IMAGE_DIR = "memory_images"
-
-# Ensure image folder exists
-if not os.path.exists(IMAGE_DIR):
-    os.makedirs(IMAGE_DIR)
+# Constants - Using Path objects for better path handling
+PERSISTENT_DIR = Path("/data")  # Persistent storage in Hugging Face
+MEMORY_FILE = PERSISTENT_DIR / "memories.json"  # Will persist between sessions
+IMAGE_DIR = PERSISTENT_DIR / "memory_images"    # Will persist between sessions
+
+# Temporary directory for files that can be erased
+TEMP_DIR = Path("/tmp") / "transient_files"
+TEMP_DIR.mkdir(exist_ok=True, parents=True)
+
+# Initialize storage
+def init_storage():
+    """Create required directories with proper permissions"""
+    try:
+        IMAGE_DIR.mkdir(exist_ok=True, parents=True)
+        # Set permissions (rw for owner, r for others)
+        os.chmod(IMAGE_DIR, 0o755)
+        if not MEMORY_FILE.exists():
+            MEMORY_FILE.touch()
+            os.chmod(MEMORY_FILE, 0o644)
+    except Exception as e:
+        st.error(f"Storage initialization failed: {e}")
+        raise
+
+# Initialize storage when module loads
+init_storage()
 
 # Load existing memories from JSON
 def load_memories():
-    if os.path.exists(MEMORY_FILE):
-        with open(MEMORY_FILE, "r", encoding="utf-8") as f:
-            return json.load(f)
-    return []
+    try:
+        if MEMORY_FILE.stat().st_size > 0:  # Check if file has content
+            with open(MEMORY_FILE, "r", encoding="utf-8") as f:
+                return json.load(f)
+        return []
+    except json.JSONDecodeError:
+        st.warning("Memories file corrupted, starting fresh")
+        return []
+    except Exception as e:
+        st.error(f"Error loading memories: {e}")
+        return []
 
 # Save memory to JSON
 def save_memory(memory):
-    memories = load_memories()
-    memories.append(memory)
-    with open(MEMORY_FILE, "w", encoding="utf-8") as f:
-        json.dump(memories, f, indent=2)
+    try:
+        memories = load_memories()
+        memories.append(memory)
+        with open(MEMORY_FILE, "w", encoding="utf-8") as f:
+            json.dump(memories, f, indent=2, ensure_ascii=False)
+        os.chmod(MEMORY_FILE, 0o644)  # Maintain permissions
+        return True
+    except Exception as e:
+        st.error(f"Error saving memory: {e}")
+        return False
+
+# For temporary files (like uploads/previews)
+def save_temp_file(file_data, filename):
+    """Save temporary file that can be erased"""
+    temp_path = TEMP_DIR / filename
+    try:
+        with open(temp_path, "wb") as f:
+            if hasattr(file_data, "read"):
+                f.write(file_data.read())
+            else:
+                f.write(file_data)
+        return temp_path
+    except Exception as e:
+        st.error(f"Error saving temporary file: {e}")
+        return None
+
+# Cleanup temporary files (call this periodically)
+def cleanup_temp_files():
+    """Remove all temporary files"""
+    for item in TEMP_DIR.glob("*"):
+        try:
+            if item.is_file():
+                item.unlink()
+            else:
+                shutil.rmtree(item)
+        except Exception as e:
+            st.warning(f"Couldn't delete {item}: {e}")
 
 # 🔠 Page UI
 st.markdown('<h1 class="animated">📝 Memory Wall</h1>', unsafe_allow_html=True)

src/pages/7_📖_Story_Time.py

@@ -1,14 +1,11 @@
 import streamlit as st
 import os
 import json
-from streamlit_echarts import st_echarts
 
 # Load your external CSS file
-# Get the directory where this script is located
 script_dir = os.path.dirname(os.path.abspath(__file__))
 css_file_path = os.path.join(script_dir, "style.css")
 
-# Check if file exists before trying to open it
 if os.path.exists(css_file_path):
     with open(css_file_path) as f:
         st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
@@ -35,27 +32,13 @@ def load_markdown(file_path):
         return f.read()
 
 def donut_progress(percent):
-    option = {
-        "series": [
-            {
-                "type": "pie",
-                "radius": ["70%", "90%"],
-                "avoidLabelOverlap": False,
-                "label": {"show": False},
-                "labelLine": {"show": False},
-                "data": [
-                    {"value": percent, "name": "Completed", "itemStyle": {"color": "#00aaff"}},
-                    {"value": 100 - percent, "name": "Remaining", "itemStyle": {"color": "#eee"}},
-                ],
-            }
-        ]
-    }
-    st_echarts(option, height=100)  # smaller height here
-
+    # New progress bar implementation
+    st.progress(int(percent), text=f"Completed: {percent:.0f}%")
+    st.caption(f"Unlocked {int(percent)}% of the story")
 
 st.title("📚 Interactive Story Hub")
 
-# Initialize session state for story and unlocked parts
+# Initialize session state
 if "active_story" not in st.session_state:
     st.session_state.active_story = None
 
@@ -79,11 +62,10 @@ if st.session_state.active_story:
     parts = meta["parts"]
     passwords = meta["passwords"]
 
-    # Initialize unlocked state if needed
     if story_id not in st.session_state.unlocked_parts:
         st.session_state.unlocked_parts[story_id] = [0]
 
-    # Show progress donut
+    # Show progress (now using native progress bar)
     total_parts = len(parts)
     unlocked_count = len(st.session_state.unlocked_parts[story_id])
     progress_pct = unlocked_count / total_parts * 100
@@ -108,18 +90,17 @@ if st.session_state.active_story:
                             st.rerun()
                         else:
                             st.error("❌ Incorrect password.")
-                break  # Show only one unlock form at a time
+                break
 
     st.markdown("---")
     if st.button("🔙 Back to story list"):
         st.session_state.active_story = None
         st.rerun()
 
-# ========== VIEW: STORY SELECTION (Fancy Cards) ==========
+# ========== VIEW: STORY SELECTION ==========
 else:
-    st.markdown("<style>.stButton>button{width:100%;}</style>", unsafe_allow_html=True)  # make buttons full width inside cards
+    st.markdown("<style>.stButton>button{width:100%;}</style>", unsafe_allow_html=True)
     
-    # Layout cards in 2 columns (adjust as you want)
     cols = st.columns(2)
     for idx, folder in enumerate(story_folders):
         meta_path = os.path.join(stories_dir, folder, "metadata.json")
@@ -130,9 +111,7 @@ else:
             continue
         
         col = cols[idx % 2]
-
         with col:
-            # Create card container div with your CSS class "story-card"
             card_html = f"""
             <div class="story-card">
                 <div class="story-card-title">{meta.get("title", folder)}</div>
@@ -141,7 +120,6 @@ else:
             """
             st.markdown(card_html, unsafe_allow_html=True)
 
-            # Button below card
             if st.button("Read", key=folder):
                 st.session_state.active_story = folder
-                st.rerun()
+                st.rerun()

src/pages/style.css

@@ -0,0 +1,147 @@
+body {
+  background-color: #FFF1E6;
+}
+
+h1, h2, h3 {
+  color: #FF6F61;
+}
+
+.stButton > button {
+  background-color: #CBAACB;
+  color: white;
+}
+
+.sidebar .sidebar-content {
+  background-color: #FFF1E6;
+}
+
+.css-1d391kg {
+  background-color: #FF6F61;
+  color: white;
+}
+
+.animated {
+  animation: pulse 2s infinite;
+  color: #ff69b4;
+}
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+.fade-in {
+  animation: fadeIn 2s ease-in forwards;
+  opacity: 0;
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+.bounce {
+  animation: bounce 1s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+.swing {
+  animation: swing 1s ease-in-out infinite;
+  transform-origin: top center;
+}
+
+@keyframes swing {
+  0% { transform: rotate(0deg); }
+  50% { transform: rotate(10deg); }
+  100% { transform: rotate(0deg); }
+}
+
+.rotate {
+  animation: spin 3s linear infinite;
+}
+
+@keyframes spin {
+  100% { transform: rotate(360deg); }
+}
+
+.glow {
+  color: #ff69b4;
+  text-shadow: 0 0 5px #ff69b4, 0 0 10px #ff69b4, 0 0 20px #ff69b4;
+  animation: glow-pulse 2s infinite alternate;
+}
+
+@keyframes glow-pulse {
+  from { text-shadow: 0 0 5px #ff69b4; }
+  to { text-shadow: 0 0 20px #ff69b4; }
+}
+
+:root {
+  --coral-pink: #f88379ff; /* your coral pink */
+}
+
+/* Card container */
+.story-card {
+  background-color: #F4C2C2;
+  border: 3px solid var(--coral-pink);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 8px rgba(248, 131, 121, 0.3);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+
+.story-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(224, 127, 189, 0.6);
+  border-color: #f3a2bd; /* stronger coral */
+}
+
+/* Card title with glow */
+.story-card-title {
+  font-size: 1.5rem;
+  color: #4f6d7aff;
+  font-weight: 700;
+  margin-bottom: 8px;
+  text-align: center;
+  animation: glow-pulse 2s infinite alternate;
+}
+
+/* Card description */
+.story-card-desc {
+  color: #555;
+  font-size: 1rem;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+/* Read button inside card */
+.story-card-button button {
+  width: 100%;
+  background-color: var(--coral-pink);
+  border: none;
+  border-radius: 12px;
+  padding: 10px;
+  color: FFF0F5;
+  font-weight: 600;
+  font-size: 1rem;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+}
+
+.story-card-button button:hover {
+  background-color: #E0B0FF;
+}
+
+
+
+/* --coral-pink: #f88379ff;
+--lemon-chiffon: #fdf5bfff;
+--tiffany-blue: #92d1c3ff;
+--cambridge-blue: #8bb8a8ff;
+--paynes-gray: #4f6d7aff; */