Update homepage.py (#3)

- Update homepage.py (c9f159aaa5e0af52756239bdc5c6b8f8cf3f0179)


Co-authored-by: Shashank Verma <ShashankV1@users.noreply.huggingface.co>

homepage.py

@@ -1,280 +1,96 @@
 import streamlit as st
-import random
+from streamlit_drawable_canvas import st_canvas
+from PIL import Image
+import numpy as np
+import io
+import base64
 from datetime import datetime
 
-# --- IMPORTANT: Streamlit's Native Multi-Page App Setup ---
-# Streamlit automatically discovers pages in a 'pages' subdirectory.
-# This homepage.py serves as the default 'Home' page.
-# Navigation is handled by Streamlit's sidebar, automatically generated from pages/*.py files.
-
-# --- Optional: Drawing canvas library check ---
-try:
-    from streamlit_drawable_canvas import st_canvas
-    DRAWING_AVAILABLE = True
-except ImportError:
-    DRAWING_AVAILABLE = False
-
-st.set_page_config(
-    page_title="HappyTrails",
-    page_icon="🐾",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
-
-# --- THEME DEFINITIONS (IMPORTANT: COPY THIS BLOCK TO ALL FILES IN THE 'PAGES' FOLDER) ---
-# These themes apply global styles and define character-based hero images.
+# ---------------------- Initialize Theme Colors (You can adjust this) ----------------------
 THEMES = {
     "boy": {
-        "primary_background": "#D0E4FF", # Light blue for Spiderman
-        "secondary_background": "#A7D2FF", # Slightly darker blue for content areas
-        "text_color": "#202060", # Dark blue/red for text
-        "accent_color": "#E53935", # Red for buttons/accents
-        "hero_image": "https://placehold.co/400x300/e53935/ffffff?text=Spiderman+Theme",
-        "welcome_message": "Ready for an adventure, {name}!" # Updated to use {name}
-    },
-    "girl": {
-        "primary_background": "#FFEBFB", # Light pink/purple for Gwen Stacy
-        "secondary_background": "#F5C7F7", # Slightly darker pink
-        "text_color": "#7B1FA2",
-        "accent_color": "#EC407A",
-        "hero_image": "https://placehold.co/400x300/EC407A/ffffff?text=Gwen+Stacy+Theme",
-        "welcome_message": "Hello, {name}! Let's make today amazing!" # Updated to use {name}
-    },
-    "neutral": { # Default for "Other" or if profile not set
-        "primary_background": "#E0FFE0",
-        "secondary_background": "#C9F0C9",
-        "text_color": "#33691E",
-        "accent_color": "#8BC34A",
-        "hero_image": "https://placehold.co/400x300/8BC34A/ffffff?text=HappyTrails+Theme",
-        "welcome_message": "Welcome to HappyTrails, {name}!" # Updated to use {name}
+        "primary_background": "#D0E4FF",
+        "secondary_background": "#A7C7E7",
+        "button_color": "#4A90E2"
     }
 }
 
-# SVG Icon Definitions (Copied to all pages for independent rendering)
-SPIDERMAN_ICON_SVG = """
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 60 60" style="vertical-align:middle; margin-right:10px; fill:currentColor;">
-    <circle cx="30" cy="18" r="8"/> <!-- Head -->
-    <circle cx="30" cy="42" r="18"/> <!-- Body -->
-    <path d="M30,26 L10,5 L5,15 L15,25" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> <!-- Top-left leg -->
-    <path d="M30,26 L50,5 L55,15 L45,25" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> <!-- Top-right leg -->
-    <path d="M30,40 L10,50 L5,55 L15,45" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> <!-- Mid-left leg -->
-    <path d="M30,40 L50,50 L55,55 L45,45" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> <!-- Mid-right leg -->
-</svg>
-"""
-
-GWEN_STACY_ICON_SVG = """
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 60 60" style="vertical-align:middle; margin-right:10px; fill:currentColor;">
-    <!-- Hood shape -->
-    <path d="M30 5 L5 25 V55 H55 V25 L30 5 Z" fill="none" stroke="currentColor" stroke-width="2"/>
-    <!-- Eye shapes - stylized like her mask -->
-    <path d="M18 25 C15 20 10 25 18 35 C26 25 21 20 18 25 Z" fill="currentColor"/> <!-- Left Eye -->
-    <path d="M42 25 C45 20 50 25 42 35 C34 25 39 20 42 25 Z" fill="currentColor"/> <!-- Right Eye -->
-</svg>
-"""
-
-# Function to apply the selected theme via custom CSS (IMPORTANT: COPY THIS BLOCK TO ALL FILES IN THE 'PAGES' FOLDER)
-def apply_theme():
-    selected_gender = st.session_state.user_profile.get("gender", "neutral") if "user_profile" in st.session_state else "neutral"
-    theme = THEMES.get(selected_gender, THEMES["neutral"])
-
-    # Define CSS variables for easier use
-    st.markdown(f"""
+theme = THEMES.get("boy", THEMES["boy"])
+st.markdown(
+    f"""
     <style>
-    :root {{
-        --primary-background: {theme["primary_background"]};
-        --secondary-background: {theme["secondary_background"]};
-        --text-color: {theme["text_color"]};
-        --accent-color: {theme["accent_color"]};
-    }}
-
-    /* Apply theme colors using CSS variables */
     .stApp {{
-        background-color: var(--primary-background);
-        color: var(--text-color); /* Fallback for general text */
-    }}
-    /* Target common Streamlit components for text color */
-    /* Increased specificity for text color to override Streamlit defaults */
-    div, p, span, li, ul, ol, strong, em, 
-    .st-emotion-cache-nahz7x, /* General text in st.write, st.markdown */
-    .st-emotion-cache-1f8796m, /* Text inside info/warning/success boxes */
-    .st-emotion-cache-1m6a05l, /* Streamlit headers/titles */
-    .st-emotion-cache-jny0p5, /* Text input and text area labels */
-    .st-emotion-cache-vk3360, /* Radio/checkbox labels */
-    .st-emotion-cache-1k1q0z8 /* Selectbox labels */
-    {{
-        color: var(--text-color) !important; /* Use !important to ensure override */
+        background-color: {theme['primary_background']};
     }}
-
-    .st-emotion-cache-1jm6gvd {{ /* Targeted for the main content area background */
-        background-color: var(--secondary-background);
-    }}
-    /* Headings color */
-    h1, h2, h3, h4, h5, h6 {{
-        color: var(--text-color) !important; /* Use !important for headings */
-    }}
-    /* Button styling */
     .stButton>button {{
-        background-color: var(--accent-color);
-        color: white !important; /* Force white text on buttons */
-        border-radius: 8px;
-        border: none;
-        padding: 10px 20px;
-        font-weight: bold;
-        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-    }}
-    .stButton>button:hover {{
-        background-color: #FF7043; /* A slightly different accent on hover */
-        transform: translateY(-2px);
-        box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
-    }}
-    /* Label colors for various input widgets */
-    .stRadio > label, .stSelectbox > label, .stSlider > label, .stTextInput > label, .stTextArea > label, .stFileUploader > label {{
-        color: var(--text-color) !important;
-    }}
-    /* Markdown text color - important for general text */
-    .stMarkdown {{
-        color: var(--text-color) !important;
-    }}
-    .stRadio div[role="radiogroup"] {{
-        background-color: var(--secondary-background);
-        padding: 10px;
-        border-radius: 8px;
-    }}
-    .stSelectbox div[data-baseweb="select"] {{
-        background-color: var(--secondary-background);
-        border-radius: 8px;
-    }}
-
-    /* Specific styles for info/warning/success/error boxes to ensure text visibility */
-    /* Targeting by class of the main alert container and the icon/text spans within */
-    .st-emotion-cache-1f8796m[data-baseweb="alert"] {{ /* general alert box container */
-        color: var(--text-color) !important; /* Text color inside alert boxes */
-        border-left-width: 5px;
-        border-left-style: solid;
-        border-radius: 8px;
-        padding: 1rem;
-        margin-bottom: 1rem;
-    }}
-    .st-emotion-cache-1f8796m[data-baseweb="alert"][kind="info"] {{
-        background-color: rgba(0, 123, 255, 0.1);
-        border-left-color: #007bff;
-    }}
-    .st-emotion-cache-1f8796m[data-baseweb="alert"][kind="success"] {{
-        background-color: rgba(40, 167, 69, 0.1);
-        border-left-color: #28a745;
-    }}
-    .st-emotion-cache-1f8796m[data-baseweb="alert"][kind="warning"] {{
-        background-color: rgba(255, 193, 7, 0.1);
-        border-left-color: #ffc107;
-    }}
-    .st-emotion-cache-1f8796m[data-baseweb="alert"][kind="error"] {{
-        background-color: rgba(220, 53, 69, 0.1);
-        border-left-color: #dc3545;
-    }}
-    /* For Streamlit's chat messages to ensure readability */
-    .stChatMessage {{
-        background-color: var(--secondary-background) !important; /* Chat bubble background */
-        color: var(--text-color) !important; /* Chat text color */
-        border-radius: 12px;
-        padding: 10px 15px;
-        margin-bottom: 8px;
-    }}
-    .stChatMessage.st-user {{ /* User's message */
-        background-color: rgba(var(--accent-color-rgb), 0.1) !important; /* Lighter accent for user */
-        color: var(--text-color) !important;
-    }}
-    .stChatMessage.st-assistant {{ /* Assistant's message */
-        background-color: rgba(var(--secondary-background-rgb), 0.8) !important; /* Secondary background for assistant */
-        color: var(--text-color) !important;
-    }}
-
-    /* Ensuring SVGs fill with current text color */
-    svg {{
-        fill: currentColor;
+        background-color: {theme['button_color']};
+        color: white;
     }}
     </style>
-    """, unsafe_allow_html=True)
-
-
-# --- Session State Initialization (Global and accessible by all pages) ---
-# This block ensures that essential session state variables are initialized once.
-if 'user_profile' not in st.session_state:
-    st.session_state.user_profile = {"name": "Friend", "age": None, "gender": "neutral", "profile_set": False}
-if 'conversation' not in st.session_state:
-    st.session_state.conversation = []
-if 'mood_data' not in st.session_state:
-    st.session_state.mood_data = []
-if 'drawings' not in st.session_state: # For Drawing Canvas (list to store image data)
-    st.session_state.drawings = []
-if 'canvas_key' not in st.session_state: # For Drawing Canvas (to force clear)
-    st.session_state.canvas_key = 0
-
-# Game-specific session states (for games_page.py)
-if "board" not in st.session_state: # For Tic-Tac-Toe
-    st.session_state.board = [" " for _ in range(9)]
-    st.session_state.player = "X"
-    st.session_state.game_over = False
-    st.session_state.message = "Your turn (X)!"
-if "game_state" not in st.session_state: # For managing game resets (Tic-Tac-Toe, WYR)
-    st.session_state.game_state = None
-if "current_wyr_question" not in st.session_state: # For Would You Rather?
-    st.session_state.current_wyr_question = None
-if "wyr_choice_made" not in st.session_state: # For Would You Rather?
-    st.session_state.wyr_choice_made = False
-if "current_adventure" not in st.session_state: # For Adventure Jar
-    st.session_state.current_adventure = None
-
-
-# --- Apply Theme Globally ---
-# This function is called at the very top of the script to ensure CSS is applied
-# before any other content is rendered, providing a consistent theme.
-apply_theme()
-
-
-# --- Main Page Content ---
-# This content runs only when homepage.py is the active page (i.e., when launched or 'Home' is clicked in sidebar)
-st.title(f"👋 Welcome to HappyTrails!")
-
-# --- User Profile Setup Section ---
-if not st.session_state.user_profile["profile_set"]:
-    st.subheader("First, tell HappyTrails a little about yourself!")
-    with st.form("user_profile_form", clear_on_submit=False):
-        name = st.text_input("What's your name?", max_chars=20, key="profile_name_input")
-        age = st.number_input("How old are you?", min_value=1, max_value=120, step=1, key="profile_age_input")
-        gender_option = st.radio(
-            "Are you a boy or a girl, or would you prefer not to say?",
-            ["Boy", "Girl", "Other / Prefer not to say"],
-            key="profile_gender_radio"
-        )
-        submit_profile = st.form_submit_button("Start My HappyTrails Adventure!")
-
-        if submit_profile:
-            if name.strip():
-                st.session_state.user_profile["name"] = name.strip()
-                st.session_state.user_profile["age"] = age
-                st.session_state.user_profile["gender"] = gender_option.lower().replace(" / prefer not to say", "") # Clean up string
-                st.session_state.user_profile["profile_set"] = True
-                st.success(f"Hello, {st.session_state.user_profile['name']}! Get ready for fun!")
-                st.rerun() # Rerun to apply theme and show personalized content
-            else:
-                st.warning("Please tell us your name!")
-else:
-    # --- Personalized Welcome After Profile Setup ---
-    current_theme = THEMES.get(st.session_state.user_profile["gender"], THEMES["neutral"])
-    
-    # Use f-string formatting to insert the user's name directly
-    welcome_message_formatted = current_theme['welcome_message'].format(name=st.session_state.user_profile['name'])
-    st.header(f"{welcome_message_formatted} 🤗")
-    
-    st.markdown("""
-    #### Here’s how to get started and have fun with your digital friend:
-
-    HappyTrails is your friend for every feeling! By playing games, chatting, drawing, and exploring adventures, HappyTrails helps you:
-    - **Understand Emotions:** Track your feelings in the journal.
-    - **Boost Creativity:** Express yourself through drawing and imagination.
-    - **Develop Skills:** Play fun games that make you think and learn.
-    - **Feel Heard & Safe:** Always have a friend ready to listen.
+    """,
+    unsafe_allow_html=True
+)
 
-    You can explore all these wonderful features using the **navigation sidebar on the left**!
-    """)
-   
+# ---------------------- Initialize Session State ----------------------
+if "saved_drawings" not in st.session_state:
+    st.session_state.saved_drawings = []
+
+# ---------------------- Main Page Function ----------------------
+def draw_page():
+    st.title("🎨 HappyTrails: Draw Your Mood!")
+
+    # Canvas settings with unique keys
+    stroke_width = st.sidebar.slider("Brush Size", 1, 25, 5, key="brush_size_slider")
+    stroke_color = st.sidebar.color_picker("Stroke Color", "#000000", key="stroke_color_picker")
+    bg_color = st.sidebar.color_picker("Canvas Background", "#FFFFFF", key="bg_color_picker")
+    drawing_mode = st.sidebar.selectbox("Drawing Tool", ("freedraw", "line", "rect", "circle", "transform"), key="drawing_tool_select")
+    realtime_update = st.sidebar.checkbox("Update in Real Time", True, key="realtime_update_checkbox")
+
+    # Load canvas with fallback
+    initial_canvas_data = {"version": "5.3.0", "objects": []}
+
+    canvas_result = st_canvas(
+        fill_color="rgba(0, 0, 0, 0)",
+        stroke_width=stroke_width,
+        stroke_color=stroke_color,
+        background_color=bg_color,
+        background_image=None,
+        update_streamlit=realtime_update,
+        height=400,
+        width=600,
+        drawing_mode=drawing_mode,
+        key="canvas",
+        initial_drawing=initial_canvas_data
+    )
+
+    # Save drawing if user clicks
+    if st.button("💾 Save Drawing"):
+        if canvas_result.image_data is not None and canvas_result.image_data.sum() > 0:
+            drawing_data = {
+                "image": canvas_result.image_data,
+                "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+                "bg_color": bg_color,
+                "stroke_color": stroke_color
+            }
+            st.session_state.saved_drawings.append(drawing_data)
+            st.success("Drawing saved!")
+        else:
+            st.warning("Canvas is empty. Draw something before saving.")
+
+    # Show saved drawings
+    if st.session_state.saved_drawings:
+        st.subheader("🖼️ Your Saved Drawings")
+        for i, saved in enumerate(st.session_state.saved_drawings):
+            st.markdown(f"*Drawing {i + 1} - {saved['timestamp']}*")
+            st.image(saved["image"])
+
+    # Clear saved drawings with confirmation
+    with st.expander("⚠️ Clear All Drawings", expanded=False):
+        confirm_clear = st.checkbox("Yes, delete all my drawings", key="clear_confirm_checkbox")
+        if confirm_clear and st.button("🗑️ Clear All My Saved Drawings"):
+            st.session_state.saved_drawings = []
+            st.success("All drawings deleted.")
+
+# ---------------------- Run the page ----------------------
+if _name_ == "_main_":
+    draw_page()