Add custom artwork icons for all spaces

app.py

@@ -1,9 +1,23 @@
 """Practice Fields Hub — Curated Therapeutic Practice Spaces"""
 
 import streamlit as st
+import base64
+import os
 
 st.set_page_config(page_title="Practice Fields", page_icon="🌱", layout="wide")
 
+def get_image_base64(image_path):
+    """Convert image to base64 for embedding in HTML."""
+    try:
+        with open(image_path, "rb") as f:
+            return base64.b64encode(f.read()).decode()
+    except:
+        return None
+
+# Get base path for images
+BASE_PATH = os.path.dirname(os.path.abspath(__file__))
+IMG_PATH = os.path.join(BASE_PATH, "images")
+
 st.markdown("""
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@@ -13,7 +27,6 @@ st.markdown("""
         font-family: 'Inter', sans-serif;
     }
 
-    /* Hide Streamlit branding */
     #MainMenu {visibility: hidden;}
     footer {visibility: hidden;}
 
@@ -42,7 +55,6 @@ st.markdown("""
         font-size: 1.15rem;
         font-weight: 300;
         font-style: italic;
-        letter-spacing: 0.01em;
     }
 
     .clinician-badge {
@@ -72,7 +84,7 @@ st.markdown("""
     .field-card {
         background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(252,255,253,0.95) 100%);
         border-radius: 20px;
-        padding: 1.75rem;
+        padding: 1.5rem;
         margin: 0.6rem 0;
         border: 1px solid rgba(180, 210, 195, 0.25);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -86,26 +98,26 @@ st.markdown("""
         transform: translateY(-4px);
         box-shadow: 0 12px 32px rgba(100, 160, 140, 0.15);
         border-color: rgba(140, 190, 170, 0.4);
-        background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(248,255,250,1) 100%);
     }
 
     .field-icon {
-        font-size: 2.5rem;
+        width: 80px;
+        height: 80px;
+        object-fit: contain;
         margin-bottom: 0.75rem;
-        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+        border-radius: 12px;
     }
 
     .field-title {
         color: #3a5555;
-        font-size: 1.25rem;
+        font-size: 1.2rem;
         font-weight: 500;
-        margin-bottom: 0.5rem;
-        letter-spacing: -0.01em;
+        margin-bottom: 0.4rem;
     }
 
     .field-desc {
         color: #6a8585;
-        font-size: 0.95rem;
+        font-size: 0.9rem;
         line-height: 1.5;
         font-weight: 300;
     }
@@ -143,7 +155,6 @@ st.markdown("""
         background: rgba(255,255,255,0.6);
         padding: 0.75rem 1.5rem;
         border-radius: 30px;
-        margin-top: 0.5rem;
     }
 
     .crisis-item {
@@ -152,16 +163,6 @@ st.markdown("""
         font-weight: 500;
     }
 
-    .onboarding-container {
-        max-width: 500px;
-        margin: 2rem auto;
-        padding: 2.5rem;
-        background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(250,255,252,0.95) 100%);
-        border-radius: 24px;
-        border: 1px solid rgba(180, 210, 195, 0.25);
-        box-shadow: 0 8px 32px rgba(100, 160, 140, 0.1);
-    }
-
     .welcome-text {
         color: #4a6a6a;
         font-size: 1.1rem;
@@ -176,21 +177,12 @@ st.markdown("""
         border: 1px solid rgba(180, 210, 195, 0.4) !important;
         border-radius: 12px !important;
         padding: 0.75rem 1rem !important;
-        font-size: 1rem !important;
-        transition: all 0.2s ease !important;
-    }
-
-    .stTextInput > div > div > input:focus {
-        border-color: rgba(140, 190, 170, 0.6) !important;
-        box-shadow: 0 0 0 3px rgba(140, 190, 170, 0.1) !important;
     }
 
     .stTextArea > div > div > textarea {
         background-color: rgba(255,255,255,0.9) !important;
         border: 1px solid rgba(180, 210, 195, 0.4) !important;
         border-radius: 12px !important;
-        padding: 0.75rem 1rem !important;
-        font-size: 1rem !important;
     }
 
     .stButton > button {
@@ -200,15 +192,12 @@ st.markdown("""
         color: white !important;
         font-weight: 500 !important;
         padding: 0.75rem 2rem !important;
-        font-size: 1rem !important;
-        transition: all 0.3s ease !important;
         box-shadow: 0 4px 12px rgba(100, 160, 140, 0.25) !important;
     }
 
     .stButton > button:hover {
         background: linear-gradient(135deg, #6aaa98 0%, #5a9a88 100%) !important;
         transform: translateY(-2px) !important;
-        box-shadow: 0 6px 20px rgba(100, 160, 140, 0.35) !important;
     }
 
     .divider {
@@ -226,14 +215,30 @@ if "clinician_orientation" not in st.session_state:
 if "onboarded" not in st.session_state:
     st.session_state.onboarded = False
 
+# Load images
+IMAGES = {
+    "shadowbox": get_image_base64(os.path.join(IMG_PATH, "shadowbox.webp")),
+    "tendsend": get_image_base64(os.path.join(IMG_PATH, "tendsend.webp")),
+    "buildabot": get_image_base64(os.path.join(IMG_PATH, "buildabot.webp")),
+    "diagnosis": get_image_base64(os.path.join(IMG_PATH, "diagnosis.webp")),
+    "gspt": get_image_base64(os.path.join(IMG_PATH, "gspt.webp")),
+    "learnnvc": get_image_base64(os.path.join(IMG_PATH, "learnnvc.webp")),
+    "difficultconversations": get_image_base64(os.path.join(IMG_PATH, "difficultconversations.webp")),
+}
+
+def img_tag(key):
+    if IMAGES.get(key):
+        return f'<img src="data:image/webp;base64,{IMAGES[key]}" class="field-icon" />'
+    return ""
+
 SPACES = [
-    {"icon": "📖", "title": "ShadowBox Library", "desc": "A resonant library for hard thoughts. Psychoeducation without synthetic intimacy.", "url": "https://huggingface.co/spaces/jostlebot/shadowbox.library"},
-    {"icon": "💌", "title": "Tend & Send", "desc": "Craft messages with care. Practice tending to yourself before sending.", "url": "https://huggingface.co/spaces/jostlebot/TendSend.PrototypeBot"},
-    {"icon": "🤖", "title": "Build a Bot", "desc": "AI literacy — understand how LLMs work, spot synthetic intimacy.", "url": "https://huggingface.co/spaces/jostlebot/BuildABot.2"},
-    {"icon": "🩺", "title": "Diagnosis Explorer", "desc": "Understand diagnostic categories with nuance and care.", "url": "https://huggingface.co/spaces/jostlebot/DiagnosisExplorer"},
-    {"icon": "🪞", "title": "GSPT", "desc": "Generating Safer Passages of Text. Warm, boundaried reflections.", "url": "https://huggingface.co/spaces/jostlebot/GSPT"},
-    {"icon": "💚", "title": "Learn NVC", "desc": "Practice Nonviolent Communication. Transform judgments into needs.", "url": "https://huggingface.co/spaces/jostlebot/LearnNVC"},
-    {"icon": "💬", "title": "Difficult Conversations", "desc": "Rehearse hard conversations before having them for real.", "url": "https://huggingface.co/spaces/jostlebot/PracticeDifficultConversations"},
+    {"key": "shadowbox", "title": "ShadowBox Library", "desc": "A resonant library for hard thoughts. Psychoeducation without synthetic intimacy.", "url": "https://huggingface.co/spaces/jostlebot/shadowbox.library"},
+    {"key": "tendsend", "title": "Tend & Send", "desc": "Craft messages with care. Practice tending to yourself before sending.", "url": "https://huggingface.co/spaces/jostlebot/TendSend.PrototypeBot"},
+    {"key": "buildabot", "title": "Build a Bot", "desc": "AI literacy — understand how LLMs work, spot synthetic intimacy.", "url": "https://huggingface.co/spaces/jostlebot/BuildABot.2"},
+    {"key": "diagnosis", "title": "Diagnosis Explorer", "desc": "Understand diagnostic categories with nuance and care.", "url": "https://huggingface.co/spaces/jostlebot/DiagnosisExplorer"},
+    {"key": "gspt", "title": "GSPT", "desc": "Generating Safer Passages of Text. Warm, boundaried reflections.", "url": "https://huggingface.co/spaces/jostlebot/GSPT"},
+    {"key": "learnnvc", "title": "Learn NVC", "desc": "Practice Nonviolent Communication. Transform judgments into needs.", "url": "https://huggingface.co/spaces/jostlebot/LearnNVC"},
+    {"key": "difficultconversations", "title": "Difficult Conversations", "desc": "Rehearse hard conversations before having them for real.", "url": "https://huggingface.co/spaces/jostlebot/PracticeDifficultConversations"},
 ]
 
 if not st.session_state.onboarded:
@@ -297,7 +302,7 @@ else:
         with col1 if i % 2 == 0 else col2:
             st.markdown(f"""
             <a href="{s["url"]}" target="_blank" class="field-card">
-                <div class="field-icon">{s["icon"]}</div>
+                {img_tag(s["key"])}
                 <div class="field-title">{s["title"]}</div>
                 <div class="field-desc">{s["desc"]}</div>
             </a>