Add automatic light/dark theme support

.gitattributes

@@ -35,3 +35,5 @@ data/episodes_embedding_chunks.csv filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.faiss filter=lfs diff=lfs merge=lfs -text
+data/episodes_embedding_chunks.csv filter=lfs diff=lfs merge=lfs -text

README.md

@@ -88,6 +88,27 @@ uv run app.py
 
 Open http://localhost:7860
 
+### Deploy to Hugging Face Spaces
+
+Use the no-persistent-clone deploy script. It creates a temporary clone, shows the exact staged diff, pushes to your Space, then deletes the temp folder.
+
+```bash
+# One-time prerequisite
+brew install git-lfs
+
+# Optional: use token-based auth for non-interactive push
+export HF_TOKEN=hf_xxx
+
+# Deploy (you will see pending changes before confirm)
+./scripts/deploy_hf_space.sh "Deploy latest Podcast Assistant updates"
+```
+
+By default, it deploys to `StanKonkin/Podcast_Assistant`. Override with:
+
+```bash
+SPACE_REPO=YourUser/YourSpace ./scripts/deploy_hf_space.sh "Deploy update"
+```
+
 ### Why uv?
 
 We use [uv](https://docs.astral.sh/uv/) for dependency management — it's fast, handles Python versions, and creates reproducible environments via `uv.lock`. No Docker overhead needed.

app.py

@@ -95,6 +95,31 @@ feedback_logger = FeedbackLogger(FEEDBACK_FILE)
 def create_app():
     """Create and configure the Gradio application."""
     
+    # Create a custom theme that supports both light and dark modes
+    custom_theme = gr.themes.Soft(
+        primary_hue=gr.themes.Color(
+            c50="#f0fdfa",
+            c100="#ccfbf1",
+            c200="#99f6e4",
+            c300="#5eead4",
+            c400="#2dd4bf",
+            c500="#0091ad",  # Our primary teal
+            c600="#0091ad",
+            c700="#007a94",
+            c800="#006275",
+            c900="#004d5c",
+            c950="#003844",
+        ),
+        secondary_hue="slate",
+        neutral_hue="slate",
+        font=[
+            gr.themes.GoogleFont("Poppins"),
+            "ui-sans-serif",
+            "system-ui",
+            "sans-serif",
+        ],
+    )
+    
     with gr.Blocks(title="Podcast Assistant") as app:
         # State variables
         conversation_id = gr.State(lambda: str(uuid.uuid4()))
@@ -105,7 +130,7 @@ def create_app():
         
         # Header - centered
         gr.Markdown("""
-<div style="text-align: center;">
+<div class="header-content">
 <h1>🎧 Podcast Assistant</h1>
 <p>Ask questions about Lex Fridman podcast episodes. Get answers with quotes and links.</p>
 </div>
@@ -439,10 +464,10 @@ def create_app():
             ]
         )
     
-    return app
+    return app, custom_theme
 
 
 if __name__ == "__main__":
-    app = create_app()
+    app, theme = create_app()
     # server_name="0.0.0.0" allows access from other devices on the same network
-    app.launch(css=CUSTOM_CSS, footer_links=[], server_name="0.0.0.0")
+    app.launch(theme=theme, css=CUSTOM_CSS, footer_links=[], server_name="0.0.0.0")

scripts/deploy_hf_space.sh

@@ -0,0 +1,98 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Deploy Podcast Assistant to Hugging Face Spaces using a temporary clone.
+# No persistent extra folders are left behind.
+#
+# Usage:
+#   ./scripts/deploy_hf_space.sh "Your commit message"
+# Optional env:
+#   SPACE_REPO=StanKonkin/Podcast_Assistant
+#   HF_TOKEN=hf_xxx
+#   AUTO_CONFIRM=1
+
+SPACE_REPO="${SPACE_REPO:-StanKonkin/Podcast_Assistant}"
+PROJECT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+TMP_DIR="$(mktemp -d -t hf-space-deploy-XXXXXX)"
+SPACE_CLONE="${TMP_DIR}/space"
+SPACE_URL="https://huggingface.co/spaces/${SPACE_REPO}"
+COMMIT_MSG="${*:-Deploy Podcast Assistant update}"
+
+cleanup() {
+  rm -rf "${TMP_DIR}"
+}
+trap cleanup EXIT
+
+if ! command -v git >/dev/null 2>&1; then
+  echo "git is required but not installed."
+  exit 1
+fi
+
+if ! command -v git-lfs >/dev/null 2>&1; then
+  echo "git-lfs is required. Install first: brew install git-lfs"
+  exit 1
+fi
+
+if [[ -n "${HF_TOKEN:-}" ]]; then
+  AUTH_URL="https://user:${HF_TOKEN}@huggingface.co/spaces/${SPACE_REPO}"
+else
+  AUTH_URL="${SPACE_URL}"
+fi
+
+echo "Cloning ${SPACE_REPO} into temporary workspace..."
+git clone "${AUTH_URL}" "${SPACE_CLONE}" >/dev/null
+
+echo "Syncing local project into Space clone..."
+rsync -a --delete \
+  --exclude '.git/' \
+  --exclude '.gitattributes' \
+  --exclude '.env' \
+  --exclude '.venv/' \
+  --exclude '.gradio/' \
+  --exclude '.cursor/' \
+  --exclude '.specstory/' \
+  --exclude '.cursorindexingignore' \
+  --exclude '__pycache__/' \
+  --exclude '.DS_Store' \
+  --exclude 'tasks.md' \
+  "${PROJECT_DIR}/" "${SPACE_CLONE}/"
+
+ensure_lfs_rule() {
+  local rule="$1"
+  if ! rg -F -x -q "${rule}" "${SPACE_CLONE}/.gitattributes"; then
+    echo "${rule}" >> "${SPACE_CLONE}/.gitattributes"
+  fi
+}
+
+ensure_lfs_rule "*.faiss filter=lfs diff=lfs merge=lfs -text"
+ensure_lfs_rule "data/episodes_embedding_chunks.csv filter=lfs diff=lfs merge=lfs -text"
+
+cd "${SPACE_CLONE}"
+git add .
+
+echo
+echo "===== Pending Space changes ====="
+git status --short
+echo
+git diff --cached --stat
+echo "================================="
+echo
+
+if git diff --cached --quiet; then
+  echo "No changes to deploy."
+  exit 0
+fi
+
+if [[ "${AUTO_CONFIRM:-0}" != "1" ]]; then
+  read -r -p "Commit and push to ${SPACE_REPO}? [y/N] " answer
+  if [[ ! "${answer}" =~ ^[Yy]$ ]]; then
+    echo "Cancelled. No push performed."
+    exit 0
+  fi
+fi
+
+git commit -m "${COMMIT_MSG}" >/dev/null
+git push origin main
+
+echo
+echo "Deployment complete: ${SPACE_URL}/tree/main"

styles.css

@@ -3,15 +3,7 @@
  * 
  * Design: Modern, minimalistic interface with teal color palette
  * Typography: Poppins font family
- * 
- * Color Palette:
- *   Primary teal:    #0091ad (buttons, links, accents)
- *   Dark teal hover: #007a94
- *   Light teal bg:   #e0f7fa, #f0fdfa
- *   Text dark:       #0f172a
- *   Text muted:      #64748b, #94a3b8
- *   Borders:         #e2e8f0
- *   Surface:         #f8fafc
+ * Supports both light and dark themes automatically
  */
 
 /* ============================================================
@@ -23,6 +15,113 @@
     font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
 }
 
+/* ============================================================
+   CSS VARIABLES - Light & Dark Theme Support
+   ============================================================ */
+:root {
+    /* Primary teal colors */
+    --teal-primary: #0091ad;
+    --teal-hover: #007a94;
+    --teal-light: #e0f7fa;
+    --teal-soft: #f0fdfa;
+    
+    /* Light theme colors */
+    --text-primary: #0f172a;
+    --text-secondary: #64748b;
+    --text-muted: #94a3b8;
+    --bg-surface: #f8fafc;
+    --bg-input: #f8fafc;
+    --border-color: #e2e8f0;
+    --border-light: #f1f5f9;
+    
+    /* User bubble */
+    --user-bubble-bg: #e0f7fa;
+    --user-bubble-border: #b2ebf2;
+    
+    /* Blockquote */
+    --quote-bg: #f0fdfa;
+    
+    /* Example buttons */
+    --example-bg: #f8fafc;
+    --example-text: #475569;
+    
+    /* Feedback */
+    --feedback-bg: #f8fafc;
+    
+    /* New button */
+    --new-btn-bg: #f0fdfa;
+    --new-btn-text: #0d9488;
+    --new-btn-border: #99f6e4;
+    --new-btn-hover-bg: #ccfbf1;
+    --new-btn-hover-border: #5eead4;
+}
+
+/* Dark theme overrides */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --teal-primary: #22d3ee;
+        --teal-hover: #67e8f9;
+        --teal-light: #164e63;
+        --teal-soft: #0f3d4c;
+        
+        --text-primary: #f1f5f9;
+        --text-secondary: #94a3b8;
+        --text-muted: #64748b;
+        --bg-surface: #1e293b;
+        --bg-input: #1e293b;
+        --border-color: #334155;
+        --border-light: #1e293b;
+        
+        --user-bubble-bg: #164e63;
+        --user-bubble-border: #0e7490;
+        
+        --quote-bg: #0f3d4c;
+        
+        --example-bg: #1e293b;
+        --example-text: #cbd5e1;
+        
+        --feedback-bg: #1e293b;
+        
+        --new-btn-bg: #0f3d4c;
+        --new-btn-text: #22d3ee;
+        --new-btn-border: #0e7490;
+        --new-btn-hover-bg: #164e63;
+        --new-btn-hover-border: #22d3ee;
+    }
+}
+
+/* Gradio dark mode class support */
+.dark {
+    --teal-primary: #22d3ee;
+    --teal-hover: #67e8f9;
+    --teal-light: #164e63;
+    --teal-soft: #0f3d4c;
+    
+    --text-primary: #f1f5f9;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+    --bg-surface: #1e293b;
+    --bg-input: #1e293b;
+    --border-color: #334155;
+    --border-light: #1e293b;
+    
+    --user-bubble-bg: #164e63;
+    --user-bubble-border: #0e7490;
+    
+    --quote-bg: #0f3d4c;
+    
+    --example-bg: #1e293b;
+    --example-text: #cbd5e1;
+    
+    --feedback-bg: #1e293b;
+    
+    --new-btn-bg: #0f3d4c;
+    --new-btn-text: #22d3ee;
+    --new-btn-border: #0e7490;
+    --new-btn-hover-bg: #164e63;
+    --new-btn-hover-border: #22d3ee;
+}
+
 /* ============================================================
    LAYOUT & CONTAINER
    ============================================================ */
@@ -63,26 +162,21 @@ footer.svelte-zxu34v {
 /* ============================================================
    COLOR THEME - Override Gradio orange with teal
    ============================================================ */
-:root {
-    --color-accent: #0091ad !important;
-    --color-accent-soft: #e0f7fa !important;
-}
-
 .orange, [class*="orange"], [style*="orange"] {
-    background: #0091ad !important;
-    border-color: #0091ad !important;
+    background: var(--teal-primary) !important;
+    border-color: var(--teal-primary) !important;
 }
 
 [style*="rgb(249"] {
-    border-color: #0091ad !important;
+    border-color: var(--teal-primary) !important;
 }
 
 .progress-bar, .progress-level {
-    background: #0091ad !important;
+    background: var(--teal-primary) !important;
 }
 
 *:focus {
-    outline-color: #0091ad !important;
+    outline-color: var(--teal-primary) !important;
 }
 
 /* ============================================================
@@ -93,15 +187,21 @@ footer.svelte-zxu34v {
     text-align: center !important;
 }
 
-.header-section h1 {
+.header-content {
+    text-align: center;
+}
+
+.header-section h1,
+.header-content h1 {
     font-weight: 700 !important;
     font-size: 1.6rem !important;
     margin-bottom: 2px !important;
-    color: #0f172a !important;
+    color: var(--teal-primary) !important;
 }
 
-.header-section p {
-    color: #64748b !important;
+.header-section p,
+.header-content p {
+    color: var(--text-secondary) !important;
     font-size: 0.85rem !important;
     margin: 0 !important;
 }
@@ -111,7 +211,7 @@ footer.svelte-zxu34v {
    ============================================================ */
 #chatbot {
     border-radius: 12px !important;
-    border: 1px solid #e2e8f0 !important;
+    border: 1px solid var(--border-color) !important;
     box-shadow: 0 2px 8px rgba(0,145,173,0.06) !important;
     min-height: 240px !important;
 }
@@ -137,27 +237,27 @@ footer.svelte-zxu34v {
 /* User message bubbles */
 #chatbot .user.message,
 .svelte-1nr59td.user {
-    background: #e0f7fa !important;
-    color: #0f172a !important;
-    border: 1px solid #b2ebf2 !important;
+    background: var(--user-bubble-bg) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--user-bubble-border) !important;
 }
 
 /* Links in chat */
 #chatbot a {
-    color: #0091ad !important;
+    color: var(--teal-primary) !important;
     font-weight: 600 !important;
     text-decoration: underline !important;
     text-underline-offset: 2px !important;
 }
 
 #chatbot a:hover {
-    color: #007a94 !important;
+    color: var(--teal-hover) !important;
 }
 
 /* Blockquotes in chat */
 #chatbot blockquote {
-    border-left: 3px solid #0091ad !important;
-    background: #f0fdfa !important;
+    border-left: 3px solid var(--teal-primary) !important;
+    background: var(--quote-bg) !important;
     padding: 10px 14px !important;
     margin: 8px 0 !important;
     border-radius: 0 8px 8px 0 !important;
@@ -187,19 +287,24 @@ footer.svelte-zxu34v {
 .input-row input,
 .input-row textarea {
     border-radius: 10px !important;
-    border: 1px solid #e2e8f0 !important;
+    border: 1px solid var(--border-color) !important;
     padding: 12px 16px !important;
     font-size: 0.85rem !important;
     min-height: 44px !important;
-    background: #f8fafc !important;
+    background: var(--bg-input) !important;
     max-width: 700px !important;
+    color: var(--text-primary) !important;
 }
 
 .input-row input:focus,
 .input-row textarea:focus {
-    border-color: #0091ad !important;
+    border-color: var(--teal-primary) !important;
     box-shadow: none !important;
-    background: white !important;
+}
+
+.input-row input::placeholder,
+.input-row textarea::placeholder {
+    color: var(--text-muted) !important;
 }
 
 /* ============================================================
@@ -237,22 +342,41 @@ button.primary:hover {
     background: linear-gradient(135deg, #007a94 0%, #0091ad 100%) !important;
 }
 
+/* Dark mode primary button - brighter */
+@media (prefers-color-scheme: dark) {
+    button.primary {
+        background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%) !important;
+    }
+    
+    button.primary:hover {
+        background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%) !important;
+    }
+}
+
+.dark button.primary {
+    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%) !important;
+}
+
+.dark button.primary:hover {
+    background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%) !important;
+}
+
 /* New button */
 .new-btn {
     gap: 0 !important;
 }
 
 .new-btn button {
-    background: #f0fdfa !important;
-    color: #0d9488 !important;
-    border: 1px solid #99f6e4 !important;
+    background: var(--new-btn-bg) !important;
+    color: var(--new-btn-text) !important;
+    border: 1px solid var(--new-btn-border) !important;
     height: 30px !important;
     font-size: 0.7rem !important;
 }
 
 .new-btn button:hover {
-    background: #ccfbf1 !important;
-    border-color: #5eead4 !important;
+    background: var(--new-btn-hover-bg) !important;
+    border-color: var(--new-btn-hover-border) !important;
 }
 
 /* ============================================================
@@ -267,7 +391,7 @@ button.primary:hover {
 .message-counter p {
     display: inline-block !important;
     background: transparent !important;
-    color: #94a3b8 !important;
+    color: var(--text-muted) !important;
     font-size: 0.7rem !important;
     font-weight: 500 !important;
     padding: 2px 0 !important;
@@ -280,7 +404,7 @@ button.primary:hover {
 }
 
 .limit-msg p {
-    color: #64748b !important;
+    color: var(--text-secondary) !important;
     font-size: 0.75rem !important;
     font-weight: 500 !important;
     margin: 0 !important;
@@ -293,7 +417,7 @@ button.primary:hover {
 }
 
 .frozen-message p {
-    color: #0091ad !important;
+    color: var(--teal-primary) !important;
     font-size: 0.8rem !important;
     font-weight: 500 !important;
     margin: 0 !important;
@@ -326,7 +450,7 @@ button.primary:hover {
 
 .examples-section p {
     font-size: 0.7rem !important;
-    color: #94a3b8 !important;
+    color: var(--text-muted) !important;
     font-weight: 500 !important;
     margin: 0 !important;
     white-space: nowrap !important;
@@ -336,11 +460,11 @@ button.primary:hover {
 .example-btn {
     font-size: 0.68rem !important;
     font-weight: 500 !important;
-    background: #f8fafc !important;
-    border: 1px solid #e2e8f0 !important;
+    background: var(--example-bg) !important;
+    border: 1px solid var(--border-color) !important;
     border-radius: 8px !important;
     padding: 8px 12px !important;
-    color: #475569 !important;
+    color: var(--example-text) !important;
     transition: all 0.15s ease !important;
     white-space: normal !important;
     text-align: center !important;
@@ -355,9 +479,9 @@ button.primary:hover {
 }
 
 .example-btn:hover {
-    background: #f0fdfa !important;
-    border-color: #0091ad !important;
-    color: #0091ad !important;
+    background: var(--teal-soft) !important;
+    border-color: var(--teal-primary) !important;
+    color: var(--teal-primary) !important;
 }
 
 /* ============================================================
@@ -366,9 +490,9 @@ button.primary:hover {
 .feedback-section {
     margin-top: 8px !important;
     padding: 8px 12px !important;
-    background: #f8fafc !important;
+    background: var(--feedback-bg) !important;
     border-radius: 8px !important;
-    border: 1px solid #e2e8f0 !important;
+    border: 1px solid var(--border-color) !important;
     display: flex !important;
     align-items: center !important;
     gap: 10px !important;
@@ -377,7 +501,7 @@ button.primary:hover {
 .feedback-section p {
     font-size: 0.75rem !important;
     font-weight: 500 !important;
-    color: #64748b !important;
+    color: var(--text-secondary) !important;
     margin: 0 !important;
     white-space: nowrap !important;
 }
@@ -387,13 +511,14 @@ button.primary:hover {
     font-weight: 500 !important;
     padding: 4px 12px !important;
     border-radius: 5px !important;
-    background: white !important;
-    border: 1px solid #e2e8f0 !important;
+    background: var(--bg-surface) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-primary) !important;
 }
 
 .feedback-section button:hover {
-    background: #f0fdfa !important;
-    border-color: #0091ad !important;
+    background: var(--teal-soft) !important;
+    border-color: var(--teal-primary) !important;
 }
 
 .feedback-input {
@@ -403,7 +528,9 @@ button.primary:hover {
 .feedback-input textarea {
     border-radius: 6px !important;
     font-size: 0.8rem !important;
-    border: 1px solid #e2e8f0 !important;
+    border: 1px solid var(--border-color) !important;
+    background: var(--bg-input) !important;
+    color: var(--text-primary) !important;
 }
 
 /* ============================================================
@@ -429,14 +556,14 @@ button.primary:hover {
 .loading-msg {
     text-align: center !important;
     padding: 12px 20px !important;
-    background: linear-gradient(90deg, #f0fdfa 0%, #e0f7fa 25%, #f0fdfa 50%, #e0f7fa 75%, #f0fdfa 100%) !important;
+    background: linear-gradient(90deg, var(--teal-soft) 0%, var(--teal-light) 25%, var(--teal-soft) 50%, var(--teal-light) 75%, var(--teal-soft) 100%) !important;
     background-size: 200% 100% !important;
     animation: shimmer 2s ease-in-out infinite, fadeInOut 2s ease-in-out infinite !important;
     border-radius: 10px !important;
 }
 
 .loading-msg p {
-    color: #0091ad !important;
+    color: var(--teal-primary) !important;
     font-size: 0.75rem !important;
     font-weight: 500 !important;
     margin: 0 !important;
@@ -456,7 +583,7 @@ button.primary:hover {
 }
 
 .footer p {
-    color: #cbd5e1 !important;
+    color: var(--text-muted) !important;
     font-size: 0.65rem !important;
     font-weight: 400 !important;
     margin: 0 !important;
@@ -516,11 +643,13 @@ button.primary:hover {
     }
     
     /* Header smaller on mobile */
-    .header-section h1 {
+    .header-section h1,
+    .header-content h1 {
         font-size: 1.3rem !important;
     }
     
-    .header-section p {
+    .header-section p,
+    .header-content p {
         font-size: 0.75rem !important;
     }