change to gradio

Dockerfile

@@ -1,21 +0,0 @@
-FROM python:3.12-slim
-
-WORKDIR /app
-
-RUN apt-get update && apt-get install -y \
-    build-essential \
-    curl \
-    && rm -rf /var/lib/apt/lists/*
-
-COPY requirements.txt ./
-RUN pip install --no-cache-dir -r requirements.txt
-
-COPY . .
-
-RUN chmod +x /app/entrypoint.sh
-
-EXPOSE 8501
-
-HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
-
-ENTRYPOINT ["/app/entrypoint.sh"]

README.md

@@ -1,19 +1,21 @@
 ---
 title: NotebookLM
 emoji: 🚀
-colorFrom: red
-colorTo: red
-sdk: docker
-app_port: 8501
+colorFrom: purple
+colorTo: blue
+sdk: gradio
+sdk_version: "5.12.0"
+python_version: "3.12"
+app_file: app.py
 hf_oauth: true
 hf_oauth_expiration_minutes: 480
 tags:
-- streamlit
+- gradio
 pinned: false
-short_description: Notebook LM clone
+short_description: NotebookLM - AI-Powered Study Companion
 license: mit
 ---
 
 # NotebookLM Clone
 
-AI-powered study companion built with Streamlit on Hugging Face Spaces.
+AI-powered study companion built with Gradio on Hugging Face Spaces.

app.py

@@ -1,721 +1,474 @@
-import streamlit as st
-import uuid
-import base64
-import os
-from datetime import datetime
-from auth import require_auth
-
-# ── Logo ─────────────────────────────────────────────────────────────────────
-LOGO_SVG = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 60">
-  <defs>
-    <linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#667eea"/>
-      <stop offset="100%" style="stop-color:#764ba2"/>
-    </linearGradient>
-    <linearGradient id="lg2" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#a78bfa"/>
-      <stop offset="100%" style="stop-color:#667eea"/>
-    </linearGradient>
-    <linearGradient id="sp" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#fbbf24"/>
-      <stop offset="100%" style="stop-color:#f59e0b"/>
-    </linearGradient>
-  </defs>
-  <g transform="translate(4,6)">
-    <rect x="2" y="4" width="36" height="44" rx="4" fill="url(#lg1)"/>
-    <rect x="2" y="4" width="8" height="44" rx="3" fill="url(#lg2)" opacity="0.7"/>
-    <line x1="16" y1="16" x2="32" y2="16" stroke="rgba(255,255,255,0.5)" stroke-width="1.8" stroke-linecap="round"/>
-    <line x1="16" y1="23" x2="30" y2="23" stroke="rgba(255,255,255,0.4)" stroke-width="1.8" stroke-linecap="round"/>
-    <line x1="16" y1="30" x2="32" y2="30" stroke="rgba(255,255,255,0.5)" stroke-width="1.8" stroke-linecap="round"/>
-    <line x1="16" y1="37" x2="28" y2="37" stroke="rgba(255,255,255,0.4)" stroke-width="1.8" stroke-linecap="round"/>
-    <g transform="translate(32,2)">
-      <path d="M6 0 L7.5 4.5 L12 6 L7.5 7.5 L6 12 L4.5 7.5 L0 6 L4.5 4.5 Z" fill="url(#sp)"/>
-      <path d="M14 8 L14.8 10.2 L17 11 L14.8 11.8 L14 14 L13.2 11.8 L11 11 L13.2 10.2 Z" fill="#fbbf24" opacity="0.7"/>
-    </g>
-  </g>
-  <text x="56" y="28" font-family="Inter,-apple-system,sans-serif" font-size="22" font-weight="700">
-    <tspan fill="url(#lg1)">Notebook</tspan><tspan fill="#a78bfa" font-weight="800">LM</tspan>
-  </text>
-  <text x="57" y="46" font-family="Inter,-apple-system,sans-serif" font-size="10.5" fill="#8888aa" font-weight="400" letter-spacing="0.8">
-    AI-Powered Study Companion
-  </text>
-</svg>"""
-
-# Small icon-only version for headers
-LOGO_ICON_SVG = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 60">
-  <defs>
-    <linearGradient id="ig1" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#667eea"/>
-      <stop offset="100%" style="stop-color:#764ba2"/>
-    </linearGradient>
-    <linearGradient id="ig2" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#a78bfa"/>
-      <stop offset="100%" style="stop-color:#667eea"/>
-    </linearGradient>
-    <linearGradient id="isp" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#fbbf24"/>
-      <stop offset="100%" style="stop-color:#f59e0b"/>
-    </linearGradient>
-  </defs>
-  <g transform="translate(2,4)">
-    <rect x="2" y="4" width="36" height="44" rx="5" fill="url(#ig1)"/>
-    <rect x="2" y="4" width="9" height="44" rx="4" fill="url(#ig2)" opacity="0.7"/>
-    <line x1="16" y1="16" x2="32" y2="16" stroke="rgba(255,255,255,0.55)" stroke-width="2" stroke-linecap="round"/>
-    <line x1="16" y1="23" x2="30" y2="23" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-linecap="round"/>
-    <line x1="16" y1="30" x2="32" y2="30" stroke="rgba(255,255,255,0.55)" stroke-width="2" stroke-linecap="round"/>
-    <line x1="16" y1="37" x2="28" y2="37" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-linecap="round"/>
-    <g transform="translate(30,0)">
-      <path d="M7 0 L8.8 5.3 L14 7 L8.8 8.8 L7 14 L5.2 8.8 L0 7 L5.2 5.3 Z" fill="url(#isp)"/>
-      <path d="M16 9 L17 11.5 L19.5 12.5 L17 13.5 L16 16 L15 13.5 L12.5 12.5 L15 11.5 Z" fill="#fbbf24" opacity="0.7"/>
-    </g>
-  </g>
-</svg>"""
-
-
-def get_logo_b64(svg_str: str) -> str:
-    return base64.b64encode(svg_str.encode()).decode()
-
-
-LOGO_B64 = get_logo_b64(LOGO_SVG)
-ICON_B64 = get_logo_b64(LOGO_ICON_SVG)
-
-
-# ── Page Config ──────────────────────────────────────────────────────────────
-st.set_page_config(
-    page_title="NotebookLM",
-    page_icon="📓",
-    layout="wide",
-    initial_sidebar_state="expanded",
+"""NotebookLM — AI-Powered Study Companion (Gradio)."""
+
+import gradio as gr
+
+from state import (
+    UserData,
+    create_default_user_data,
+    create_notebook,
+    delete_notebook,
+    rename_notebook,
+    get_active_notebook,
+    get_notebook_choices,
 )
+from theme import dark_theme, CUSTOM_CSS, SIDEBAR_LOGO_HTML, WELCOME_HTML, NO_NOTEBOOKS_HTML
+from pages.chat import (
+    format_chatbot_messages,
+    render_no_sources_warning,
+    handle_chat_submit,
+    handle_clear_chat,
+)
+from pages.sources import (
+    render_source_header,
+    render_source_list,
+    get_source_choices,
+    handle_file_upload,
+    handle_url_add,
+    handle_source_delete,
+)
+from pages.artifacts import (
+    render_no_sources_gate,
+    has_sources,
+    render_conv_summary_section,
+    handle_gen_conv_summary,
+    render_doc_summary_section,
+    handle_gen_doc_summary,
+    render_podcast_section,
+    handle_gen_podcast,
+    render_quiz_section,
+    handle_gen_quiz,
+    has_any_summary,
+)
+
 
-# ── Global Styles ────────────────────────────────────────────────────────────
-st.markdown("""
-<style>
-/* ── Import Google Font ── */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-/* ── Base ── */
-html, body, [class*="st-"] {
-    font-family: 'Inter', sans-serif;
-}
-
-/* ── Sidebar ── */
-section[data-testid="stSidebar"] {
-    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
-    border-right: 1px solid rgba(255,255,255,0.06);
-}
-section[data-testid="stSidebar"] .stMarkdown h1 {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-weight: 700;
-    font-size: 1.8rem;
-    letter-spacing: -0.5px;
-}
-section[data-testid="stSidebar"] p,
-section[data-testid="stSidebar"] span,
-section[data-testid="stSidebar"] label {
-    color: #c0c0d0 !important;
-}
-section[data-testid="stSidebar"] .stDivider {
-    border-color: rgba(255,255,255,0.08) !important;
-}
-
-/* ── Notebook button in sidebar ── */
-section[data-testid="stSidebar"] .stButton > button {
-    border-radius: 10px !important;
-    font-size: 0.85rem !important;
-    font-weight: 500 !important;
-    padding: 8px 14px !important;
-    transition: all 0.2s ease !important;
-}
-section[data-testid="stSidebar"] .stButton > button[kind="primary"] {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
-    color: white !important;
-}
-section[data-testid="stSidebar"] .stButton > button[kind="secondary"] {
-    background: rgba(255,255,255,0.05) !important;
-    border: 1px solid rgba(255,255,255,0.1) !important;
-    color: #d0d0e0 !important;
-}
-section[data-testid="stSidebar"] .stButton > button[kind="secondary"]:hover {
-    background: rgba(255,255,255,0.1) !important;
-    border-color: rgba(102,126,234,0.4) !important;
-}
-
-/* ── Tab styling ── */
-.stTabs [data-baseweb="tab-list"] {
-    gap: 0px;
-    background: rgba(255,255,255,0.03);
-    border-radius: 12px;
-    padding: 4px;
-    border: 1px solid rgba(255,255,255,0.06);
-}
-.stTabs [data-baseweb="tab"] {
-    border-radius: 10px;
-    padding: 10px 24px;
-    font-weight: 500;
-    font-size: 0.9rem;
-    color: #888;
-}
-.stTabs [aria-selected="true"] {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    color: white !important;
-    font-weight: 600;
-}
-.stTabs [data-baseweb="tab-highlight"] {
-    display: none;
-}
-.stTabs [data-baseweb="tab-border"] {
-    display: none;
-}
-
-/* ── Main container ── */
-.main .block-container {
-    padding-top: 2rem;
-    max-width: 1100px;
-}
-
-/* ── Cards ── */
-div[data-testid="stVerticalBlock"] > div[data-testid="stContainer"] {
-    border-radius: 14px !important;
-    border: 1px solid rgba(255,255,255,0.08) !important;
-    background: rgba(255,255,255,0.02) !important;
-    transition: all 0.2s ease;
-}
-div[data-testid="stVerticalBlock"] > div[data-testid="stContainer"]:hover {
-    border-color: rgba(102,126,234,0.3) !important;
-    background: rgba(255,255,255,0.04) !important;
-}
-
-/* ── Chat messages ── */
-.stChatMessage {
-    border-radius: 14px !important;
-    padding: 16px 20px !important;
-    margin-bottom: 8px !important;
-}
-div[data-testid="stChatMessageAvatarUser"] {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-}
-div[data-testid="stChatMessageAvatarAssistant"] {
-    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
-}
-
-/* ── Chat input ── */
-.stChatInput > div {
-    border-radius: 14px !important;
-    border: 1px solid rgba(255,255,255,0.1) !important;
-    background: rgba(255,255,255,0.03) !important;
-}
-.stChatInput > div:focus-within {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 2px rgba(102,126,234,0.2) !important;
-}
-
-/* ── Expanders ── */
-.streamlit-expanderHeader {
-    border-radius: 10px !important;
-    font-weight: 500 !important;
-}
-
-/* ── File uploader ── */
-section[data-testid="stFileUploader"] > div {
-    border-radius: 14px !important;
-    border: 2px dashed rgba(102,126,234,0.3) !important;
-    background: rgba(102,126,234,0.03) !important;
-}
-section[data-testid="stFileUploader"] > div:hover {
-    border-color: rgba(102,126,234,0.6) !important;
-    background: rgba(102,126,234,0.06) !important;
-}
-
-/* ── Main content buttons ── */
-.main .stButton > button[kind="primary"] {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
-    border-radius: 10px !important;
-    font-weight: 600 !important;
-    padding: 8px 20px !important;
-    transition: all 0.2s ease !important;
-}
-.main .stButton > button[kind="primary"]:hover {
-    opacity: 0.9 !important;
-    transform: translateY(-1px) !important;
-    box-shadow: 0 4px 15px rgba(102,126,234,0.3) !important;
-}
-.main .stButton > button[kind="secondary"] {
-    border-radius: 10px !important;
-    border: 1px solid rgba(255,255,255,0.12) !important;
-    background: rgba(255,255,255,0.04) !important;
-    font-weight: 500 !important;
-    transition: all 0.2s ease !important;
-}
-.main .stButton > button[kind="secondary"]:hover {
-    background: rgba(255,255,255,0.08) !important;
-    border-color: rgba(255,255,255,0.2) !important;
-}
-
-/* ── Download button ── */
-.stDownloadButton > button {
-    border-radius: 10px !important;
-    font-weight: 500 !important;
-}
-
-/* ── Text input ── */
-.stTextInput > div > div {
-    border-radius: 10px !important;
-}
-
-/* ── Metrics / status badges ── */
-.stSuccess, .stWarning, .stError, .stInfo {
-    border-radius: 10px !important;
-}
-
-/* ── Welcome hero ── */
-.welcome-hero {
-    text-align: center;
-    padding: 80px 40px;
-    background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%);
-    border-radius: 20px;
-    border: 1px solid rgba(102,126,234,0.15);
-    margin: 20px 0;
-}
-.welcome-hero h1 {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 12px;
-}
-.welcome-hero p {
-    color: #9090a8;
-    font-size: 1.1rem;
-    line-height: 1.6;
-}
-
-/* ── Empty state ── */
-.empty-state {
-    text-align: center;
-    padding: 60px 30px;
-    color: #707088;
-}
-.empty-state h3 {
-    color: #a0a0b8;
-    margin-bottom: 8px;
-    font-weight: 600;
-}
-.empty-state p {
-    font-size: 0.95rem;
-    line-height: 1.5;
-}
-
-/* ── Source card ── */
-.source-card {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 16px 20px;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 14px;
-    margin-bottom: 10px;
-    transition: all 0.2s ease;
-}
-.source-card:hover {
-    border-color: rgba(102,126,234,0.3);
-    background: rgba(255,255,255,0.04);
-}
-.source-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    flex-shrink: 0;
-}
-.source-icon.pdf { background: rgba(239,68,68,0.15); }
-.source-icon.pptx { background: rgba(249,115,22,0.15); }
-.source-icon.txt { background: rgba(59,130,246,0.15); }
-.source-icon.url { background: rgba(34,197,94,0.15); }
-.source-icon.youtube { background: rgba(239,68,68,0.15); }
-.source-info { flex: 1; min-width: 0; }
-.source-info .name {
-    font-weight: 600;
-    font-size: 0.95rem;
-    color: #e0e0f0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.source-info .meta {
-    font-size: 0.8rem;
-    color: #707088;
-    margin-top: 2px;
-}
-.source-badge {
-    padding: 4px 12px;
-    border-radius: 20px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.3px;
-}
-.source-badge.ready {
-    background: rgba(34,197,94,0.15);
-    color: #22c55e;
-}
-.source-badge.processing {
-    background: rgba(234,179,8,0.15);
-    color: #eab308;
-}
-.source-badge.failed {
-    background: rgba(239,68,68,0.15);
-    color: #ef4444;
-}
-
-/* ── Artifact generation cards ── */
-.gen-card {
-    text-align: center;
-    padding: 30px 20px;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 16px;
-    transition: all 0.25s ease;
-    cursor: default;
-}
-.gen-card:hover {
-    border-color: rgba(102,126,234,0.3);
-    background: rgba(102,126,234,0.04);
-    transform: translateY(-2px);
-}
-.gen-card .icon {
-    font-size: 2.5rem;
-    margin-bottom: 12px;
-}
-.gen-card h4 {
-    margin: 0 0 6px 0;
-    font-weight: 600;
-    color: #e0e0f0;
-}
-.gen-card p {
-    font-size: 0.85rem;
-    color: #808098;
-    line-height: 1.4;
-    margin: 0;
-}
-
-/* ── Citation chip ── */
-.citation-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 14px;
-    background: rgba(102,126,234,0.1);
-    border: 1px solid rgba(102,126,234,0.2);
-    border-radius: 20px;
-    font-size: 0.8rem;
-    color: #a0b0f0;
-    margin: 3px 4px;
-}
-
-/* ── Notebook header ── */
-.notebook-header {
-    padding: 0 0 16px 0;
-    margin-bottom: 16px;
-    border-bottom: 1px solid rgba(255,255,255,0.06);
-}
-.notebook-header h2 {
-    font-weight: 700;
-    font-size: 1.5rem;
-    margin: 0;
-    color: #e8e8f8;
-}
-.notebook-header .meta {
-    font-size: 0.85rem;
-    color: #707088;
-    margin-top: 4px;
-}
-
-/* ── Hide ALL Streamlit default chrome ── */
-[data-testid="stSidebarCollapseButton"],
-[data-testid="collapsedControl"],
-.stDeployButton,
-[data-testid="stToolbar"],
-[data-testid="stBottomBlockContainer"],
-[data-testid="manage-app-button"] {
-    display: none !important;
-}
-/* Kill all Material Icon text leaks */
-[data-testid="stSidebarCollapseButton"] *,
-[data-testid="collapsedControl"] *,
-[data-testid="stBottomBlockContainer"] * {
-    display: none !important;
-}
-
-/* ── Force dark theme on main area ── */
-.stApp, .stApp > header {
-    background-color: #0e1117 !important;
-}
-.main .block-container {
-    background-color: #0e1117 !important;
-}
-.stApp [data-testid="stHeader"] {
-    background-color: #0e1117 !important;
-}
-/* All text defaults to light */
-.stApp, .stApp p, .stApp span, .stApp li, .stApp td, .stApp th {
-    color: #c8c8d8 !important;
-}
-.stApp h1, .stApp h2, .stApp h3, .stApp h4 {
-    color: #e0e0f0 !important;
-}
-.stApp strong {
-    color: #e8e8f8 !important;
-}
-/* Markdown inside containers */
-.stMarkdown, .stMarkdown p {
-    color: #c8c8d8 !important;
-}
-
-/* ── Expander styling for dark ── */
-.streamlit-expanderHeader {
-    background: rgba(255,255,255,0.03) !important;
-    border-radius: 10px !important;
-    color: #c0c0d0 !important;
-}
-.streamlit-expanderContent {
-    background: rgba(255,255,255,0.01) !important;
-    border-color: rgba(255,255,255,0.06) !important;
-}
-
-/* ── Table styling ── */
-.stApp table {
-    border-collapse: collapse;
-}
-.stApp th {
-    background: rgba(102,126,234,0.1) !important;
-    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
-}
-.stApp td {
-    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
-}
-
-/* ── Radio / select styling ── */
-.stRadio label, .stSelectbox label, .stSlider label {
-    color: #a0a0b8 !important;
-}
-
-/* ── Alert boxes ── */
-[data-testid="stAlert"] {
-    background: rgba(255,255,255,0.03) !important;
-    border: 1px solid rgba(255,255,255,0.08) !important;
-    border-radius: 12px !important;
-}
-
-/* ── Scrollbar ── */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
-</style>
-""", unsafe_allow_html=True)
-
-
-# ── Authentication ───────────────────────────────────────────────────────────
-user = require_auth()
-user_id = user["id"]
-
-# ── Per-User Session State ───────────────────────────────────────────────────
-if "user_data" not in st.session_state:
-    st.session_state.user_data = {}
-
-if user_id not in st.session_state.user_data:
-    default_id = str(uuid.uuid4())
-    st.session_state.user_data[user_id] = {
-        "notebooks": {
-            default_id: {
-                "id": default_id,
-                "title": "My First Notebook",
-                "created_at": datetime.now().isoformat(),
-                "sources": [],
-                "messages": [],
-                "artifacts": [],
-            }
-        },
-        "active_notebook_id": default_id,
-    }
-
-udata = st.session_state.user_data[user_id]
-
-
-# ── Helper Functions ─────────────────────────────────────────────────────────
-def get_active_notebook():
-    nb_id = udata["active_notebook_id"]
-    if nb_id and nb_id in udata["notebooks"]:
-        return udata["notebooks"][nb_id]
-    return None
-
-
-def create_notebook(title: str):
-    nb_id = str(uuid.uuid4())
-    udata["notebooks"][nb_id] = {
-        "id": nb_id,
-        "title": title,
-        "created_at": datetime.now().isoformat(),
-        "sources": [],
-        "messages": [],
-        "artifacts": [],
-    }
-    udata["active_notebook_id"] = nb_id
-
-
-def delete_notebook(nb_id: str):
-    if nb_id in udata["notebooks"]:
-        del udata["notebooks"][nb_id]
-        remaining = list(udata["notebooks"].keys())
-        udata["active_notebook_id"] = remaining[0] if remaining else None
-
-
-def rename_notebook(nb_id: str, new_title: str):
-    if nb_id in udata["notebooks"]:
-        udata["notebooks"][nb_id]["title"] = new_title
-
-
-# ── Sidebar ──────────────────────────────────────────────────────────────────
-with st.sidebar:
-    st.markdown(
-        f'<div style="padding: 8px 0 4px 0;">'
-        f'<img src="data:image/svg+xml;base64,{LOGO_B64}" style="width:100%; max-width:240px;" />'
-        f'</div>',
-        unsafe_allow_html=True,
+# ── Helpers ──────────────────────────────────────────────────────────────────
+
+def render_notebook_header(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb:
+        return NO_NOTEBOOKS_HTML
+    src = len(nb.sources)
+    msg = len(nb.messages)
+    art = len(nb.artifacts)
+    return (
+        f'<div class="notebook-header">'
+        f'<h2>{nb.title}</h2>'
+        f'<div class="meta">{src} sources &bull; {msg} messages &bull; {art} artifacts</div>'
+        f'</div>'
     )
-    st.markdown(
-        f'<p style="font-size:0.82rem; color:#7070888; margin: 4px 0 0 0;">'
-        f'Signed in as <strong style="color:#a0a0f0;">{user["name"]}</strong></p>',
-        unsafe_allow_html=True,
+
+
+def render_user_info(state: UserData) -> str:
+    if not state:
+        return ""
+    return (
+        f'<p style="font-size:0.82rem; color:#707088; margin:4px 0 0 0;">'
+        f'Signed in as <strong style="color:#a0a0f0;">{state.user_name}</strong></p>'
     )
-    st.divider()
-
-    # ── Create notebook ──
-    with st.popover("+ New Notebook", use_container_width=True):
-        new_title = st.text_input(
-            "Name", placeholder="e.g. Biology 101", label_visibility="collapsed"
-        )
-        if st.button("Create Notebook", use_container_width=True, type="primary"):
-            if new_title.strip():
-                create_notebook(new_title.strip())
-                st.rerun()
-            else:
-                st.warning("Enter a name.")
-
-    st.markdown("")  # spacer
-
-    # ── Notebook list ──
-    if not udata["notebooks"]:
-        st.markdown(
-            '<p style="text-align:center; color:#606078; padding:20px 0;">'
-            "No notebooks yet</p>",
-            unsafe_allow_html=True,
-        )
-    else:
-        for nb_id, nb in udata["notebooks"].items():
-            is_active = nb_id == udata["active_notebook_id"]
-            source_count = len(nb["sources"])
-            msg_count = len(nb["messages"])
-
-            col1, col2 = st.columns([5, 1])
-            with col1:
-                label = nb["title"]
-                if source_count > 0 or msg_count > 0:
-                    label += f"  ({source_count}s, {msg_count}m)"
-                if st.button(
-                    f"{'> ' if is_active else '  '}{label}",
-                    key=f"sel_{nb_id}",
-                    use_container_width=True,
-                    type="primary" if is_active else "secondary",
-                ):
-                    udata["active_notebook_id"] = nb_id
-                    st.rerun()
-            with col2:
-                if st.button(
-                    "x", key=f"del_{nb_id}",
-                    help="Delete this notebook",
-                    use_container_width=True,
-                ):
-                    delete_notebook(nb_id)
-                    st.rerun()
-
-    st.divider()
-
-    # ── Rename ──
-    notebook = get_active_notebook()
-    if notebook:
-        with st.popover("Rename", use_container_width=True):
-            rename_val = st.text_input(
-                "New name", value=notebook["title"], key="rename_input"
+
+
+def refresh_all(state: UserData):
+    """Refresh all display components after state change. Returns a tuple of all outputs."""
+    nb = get_active_notebook(state)
+    choices = get_notebook_choices(state) if state else []
+    active_id = state.active_notebook_id if state else None
+
+    has_nb = nb is not None
+    has_src = has_nb and len(nb.sources) > 0
+
+    return (
+        state,
+        # Sidebar
+        gr.update(choices=choices, value=active_id),
+        render_user_info(state),
+        # Header
+        render_notebook_header(state),
+        # Chat tab
+        format_chatbot_messages(state) if has_nb else [],
+        render_no_sources_warning(state),
+        # Sources tab
+        render_source_header(state),
+        render_source_list(state),
+        gr.update(choices=get_source_choices(state)),
+        # Artifacts tab
+        render_no_sources_gate(state),
+        gr.update(visible=has_src),   # artifacts_content visible
+        gr.update(visible=not has_src),  # no_sources_gate visible
+        # Artifact sub-sections
+        render_conv_summary_section(state),
+        render_doc_summary_section(state),
+        render_podcast_section(state),
+        render_quiz_section(state),
+    )
+
+
+# ── Build the App ────────────────────────────────────────────────────────────
+
+with gr.Blocks(css=CUSTOM_CSS, theme=dark_theme, title="NotebookLM") as demo:
+
+    user_state = gr.State(value=None)
+
+    # ══ Auth Gate ══════════���═════════════════════════════════════════════════
+    with gr.Column(visible=True, elem_id="auth-gate") as auth_gate:
+        gr.HTML(WELCOME_HTML)
+        gr.LoginButton(elem_id="login-btn")
+
+    # ══ Main App (hidden until login) ════════════════════════════════════════
+    with gr.Row(visible=False) as main_app:
+
+        # ── Sidebar ──────────────────────────────────────────────────────────
+        with gr.Column(scale=1, min_width=280, elem_id="sidebar"):
+            gr.HTML(SIDEBAR_LOGO_HTML)
+            user_info_html = gr.HTML("")
+
+            gr.Markdown("---")
+
+            # Create notebook
+            new_nb_name = gr.Textbox(
+                placeholder="e.g. Biology 101",
+                show_label=False,
+                container=False,
+            )
+            create_nb_btn = gr.Button("+ New Notebook", variant="primary", size="sm")
+
+            gr.HTML('<div style="height:8px;"></div>')
+
+            # Notebook selector
+            notebook_selector = gr.Radio(
+                choices=[],
+                label="Notebooks",
+                elem_id="notebook-selector",
+            )
+
+            gr.Markdown("---")
+
+            # Rename
+            rename_input = gr.Textbox(
+                placeholder="New name...",
+                show_label=False,
+                container=False,
+            )
+            rename_btn = gr.Button("Rename", size="sm")
+
+            # Delete
+            delete_btn = gr.Button("Delete Notebook", variant="stop", size="sm")
+
+            gr.HTML(
+                '<p style="font-size:0.75rem; color:#50506a; text-align:center; margin-top:16px;">'
+                'Built with Gradio on HF Spaces</p>'
             )
-            if st.button("Save", use_container_width=True, type="primary"):
-                if rename_val.strip():
-                    rename_notebook(notebook["id"], rename_val.strip())
-                    st.rerun()
-
-    # ── Footer ──
-    st.markdown("")
-    st.markdown(
-        '<p style="font-size:0.75rem; color:#50506a; text-align:center;">'
-        "Built with Streamlit on HF Spaces</p>",
-        unsafe_allow_html=True,
+
+        # ── Main Content ─────────────────────────────────────────────────────
+        with gr.Column(scale=4, elem_id="main-content"):
+
+            notebook_header = gr.HTML(NO_NOTEBOOKS_HTML)
+
+            with gr.Tabs(elem_id="main-tabs") as main_tabs:
+
+                # ── Chat Tab ─────────────────────────────────────────────────
+                with gr.TabItem("Chat", id=0):
+                    chat_warning = gr.HTML("")
+                    chatbot = gr.Chatbot(
+                        value=[],
+                        type="messages",
+                        height=480,
+                        elem_id="chatbot",
+                        show_label=False,
+                    )
+                    with gr.Row():
+                        chat_input = gr.Textbox(
+                            placeholder="Ask a question about your sources...",
+                            show_label=False,
+                            container=False,
+                            scale=5,
+                        )
+                        clear_chat_btn = gr.Button("Clear", scale=1)
+
+                # ── Sources Tab ──────────────────────────────────────────────
+                with gr.TabItem("Sources", id=1):
+                    source_header = gr.HTML("")
+
+                    with gr.Row():
+                        with gr.Column():
+                            gr.HTML(
+                                '<p style="font-weight:600; font-size:0.9rem; color:#b0b0c8; margin-bottom:8px;">'
+                                'Upload Files</p>'
+                            )
+                            file_uploader = gr.File(
+                                file_count="multiple",
+                                file_types=[".pdf", ".pptx", ".txt"],
+                                label="Drop files here",
+                                show_label=False,
+                            )
+                        with gr.Column():
+                            gr.HTML(
+                                '<p style="font-weight:600; font-size:0.9rem; color:#b0b0c8; margin-bottom:8px;">'
+                                'Add Web Source</p>'
+                            )
+                            url_input = gr.Textbox(
+                                placeholder="https://example.com  or  YouTube link",
+                                show_label=False,
+                                container=False,
+                            )
+                            add_url_btn = gr.Button("Add URL", variant="primary")
+
+                    gr.Markdown("---")
+                    source_list_html = gr.HTML("")
+
+                    with gr.Row():
+                        source_selector = gr.Dropdown(
+                            choices=[],
+                            label="Select source to delete",
+                            scale=3,
+                        )
+                        delete_source_btn = gr.Button("Delete Source", variant="stop", scale=1)
+
+                # ── Artifacts Tab ────────────────────────────────────────────
+                with gr.TabItem("Artifacts", id=2):
+
+                    # No-sources gate
+                    no_sources_msg = gr.HTML("", visible=True)
+
+                    with gr.Column(visible=False) as artifacts_content:
+
+                        with gr.Tabs(elem_id="artifact-tabs"):
+
+                            # Summary sub-tab
+                            with gr.TabItem("Summary"):
+                                # Conversation Summary
+                                gr.HTML(
+                                    '<div class="artifact-section-header">'
+                                    '<div class="artifact-section-icon" style="background:rgba(102,126,234,0.12);">💬</div>'
+                                    '<div><span style="font-weight:600; font-size:1rem; color:#e0e0f0;">Conversation Summary</span>'
+                                    '<p style="font-size:0.82rem; color:#808098; margin:2px 0 0 0;">'
+                                    'Summarize your chat history.</p></div></div>'
+                                )
+                                with gr.Row():
+                                    conv_style_radio = gr.Radio(
+                                        choices=["brief", "detailed"],
+                                        value="detailed",
+                                        label="Style",
+                                        scale=2,
+                                    )
+                                    gen_conv_sum_btn = gr.Button(
+                                        "Generate Conversation Summary",
+                                        variant="primary",
+                                        scale=2,
+                                    )
+                                conv_summary_html = gr.Markdown("")
+
+                                gr.HTML('<div style="margin:30px 0; border-top:1px solid rgba(255,255,255,0.06);"></div>')
+
+                                # Document Summary
+                                gr.HTML(
+                                    '<div class="artifact-section-header">'
+                                    '<div class="artifact-section-icon" style="background:rgba(34,197,94,0.12);">📄</div>'
+                                    '<div><span style="font-weight:600; font-size:1rem; color:#e0e0f0;">Document Summary</span>'
+                                    '<p style="font-size:0.82rem; color:#808098; margin:2px 0 0 0;">'
+                                    'Summarize content from your uploaded sources.</p></div></div>'
+                                )
+                                with gr.Row():
+                                    doc_style_radio = gr.Radio(
+                                        choices=["brief", "detailed"],
+                                        value="detailed",
+                                        label="Style",
+                                        scale=2,
+                                    )
+                                    gen_doc_sum_btn = gr.Button(
+                                        "Generate Document Summary",
+                                        variant="primary",
+                                        scale=2,
+                                    )
+                                doc_summary_html = gr.Markdown("")
+
+                            # Podcast sub-tab
+                            with gr.TabItem("Podcast"):
+                                gr.HTML(
+                                    '<div style="margin-bottom:20px;">'
+                                    '<span style="font-weight:600; font-size:1rem; color:#e0e0f0;">Generate Podcast</span>'
+                                    '<p style="font-size:0.85rem; color:#808098; margin-top:4px;">'
+                                    'Create a conversational podcast episode from your summary.</p></div>'
+                                )
+                                gen_podcast_btn = gr.Button("Generate Podcast", variant="primary")
+                                podcast_html = gr.Markdown("")
+
+                            # Quiz sub-tab
+                            with gr.TabItem("Quiz"):
+                                gr.HTML(
+                                    '<div style="margin-bottom:20px;">'
+                                    '<span style="font-weight:600; font-size:1rem; color:#e0e0f0;">Generate Quiz</span>'
+                                    '<p style="font-size:0.85rem; color:#808098; margin-top:4px;">'
+                                    'Create multiple-choice questions from your sources.</p></div>'
+                                )
+                                with gr.Row():
+                                    quiz_num_radio = gr.Radio(
+                                        choices=[5, 10],
+                                        value=5,
+                                        label="Number of questions",
+                                        scale=2,
+                                    )
+                                    gen_quiz_btn = gr.Button(
+                                        "Generate Quiz",
+                                        variant="primary",
+                                        scale=2,
+                                    )
+                                quiz_html = gr.Markdown("")
+
+    # ── All refresh outputs (must match refresh_all return order) ─────────
+    refresh_outputs = [
+        user_state,
+        notebook_selector,
+        user_info_html,
+        notebook_header,
+        chatbot,
+        chat_warning,
+        source_header,
+        source_list_html,
+        source_selector,
+        no_sources_msg,
+        artifacts_content,
+        no_sources_msg,
+        conv_summary_html,
+        doc_summary_html,
+        podcast_html,
+        quiz_html,
+    ]
+
+    # ══ Event Handlers ═══════════════════════════════════════════════════════
+
+    # ── Auth: on page load ───────────────────────────────────────────────────
+    def on_app_load(profile: gr.OAuthProfile | None):
+        if profile is None:
+            return None, gr.update(visible=True), gr.update(visible=False)
+        state = create_default_user_data(profile.username, profile.name)
+        return state, gr.update(visible=False), gr.update(visible=True)
+
+    demo.load(
+        fn=on_app_load,
+        inputs=None,
+        outputs=[user_state, auth_gate, main_app],
+    ).then(
+        fn=refresh_all,
+        inputs=[user_state],
+        outputs=refresh_outputs,
     )
 
+    # ── Sidebar: Create notebook ─────────────────────────────────────────────
+    def handle_create_notebook(name, state):
+        if not name or not name.strip() or not state:
+            return (state,) + refresh_all(state)[1:] + ("",)
+        state = create_notebook(state, name.strip())
+        return (state,) + refresh_all(state)[1:] + ("",)
+
+    create_nb_btn.click(
+        fn=handle_create_notebook,
+        inputs=[new_nb_name, user_state],
+        outputs=refresh_outputs + [new_nb_name],
+    )
 
-# ── Main Content ─────────────────────────────────────────────────────────────
-notebook = get_active_notebook()
-
-if not notebook:
-    st.markdown(
-        f"""
-        <div class="welcome-hero">
-            <img src="data:image/svg+xml;base64,{ICON_B64}" style="width:64px; margin-bottom:16px;" />
-            <h1>NotebookLM</h1>
-            <p>Your AI-powered study companion.<br>
-            Create a notebook from the sidebar to get started.</p>
-        </div>
-        """,
-        unsafe_allow_html=True,
+    # ── Sidebar: Select notebook ─────────────────────────────────────────────
+    def handle_select_notebook(nb_id, state):
+        if not state or not nb_id:
+            return refresh_all(state)
+        state.active_notebook_id = nb_id
+        return refresh_all(state)
+
+    notebook_selector.change(
+        fn=handle_select_notebook,
+        inputs=[notebook_selector, user_state],
+        outputs=refresh_outputs,
     )
-    st.stop()
-
-# ── Notebook header ──
-source_count = len(notebook["sources"])
-msg_count = len(notebook["messages"])
-artifact_count = len(notebook["artifacts"])
-st.markdown(
-    f"""
-    <div class="notebook-header">
-        <h2>{notebook["title"]}</h2>
-        <div class="meta">{source_count} sources &nbsp;&bull;&nbsp; {msg_count} messages &nbsp;&bull;&nbsp; {artifact_count} artifacts</div>
-    </div>
-    """,
-    unsafe_allow_html=True,
-)
 
-# ── Tabs ──
-tab_chat, tab_sources, tab_artifacts = st.tabs(
-    ["   Chat   ", "   Sources   ", "   Artifacts   "]
-)
+    # ── Sidebar: Delete notebook ───────────────────────────────────���─────────
+    def handle_delete_notebook(state):
+        if not state or not state.active_notebook_id:
+            return refresh_all(state)
+        state = delete_notebook(state, state.active_notebook_id)
+        return refresh_all(state)
+
+    delete_btn.click(
+        fn=handle_delete_notebook,
+        inputs=[user_state],
+        outputs=refresh_outputs,
+    )
 
-from ui.chat_page import render_chat
-from ui.upload_page import render_sources
-from ui.artifact_page import render_artifacts
+    # ── Sidebar: Rename notebook ─────────────────────────────────────────────
+    def handle_rename_notebook(new_name, state):
+        if not state or not state.active_notebook_id or not new_name or not new_name.strip():
+            return refresh_all(state)
+        state = rename_notebook(state, state.active_notebook_id, new_name.strip())
+        return refresh_all(state)
+
+    rename_btn.click(
+        fn=handle_rename_notebook,
+        inputs=[rename_input, user_state],
+        outputs=refresh_outputs,
+    )
+
+    # ── Chat: Submit message ─────────────────────────────────────────────────
+    chat_input.submit(
+        fn=handle_chat_submit,
+        inputs=[chat_input, user_state],
+        outputs=[user_state, chatbot, chat_input, chat_warning],
+    )
 
-with tab_chat:
-    render_chat(notebook)
+    # ── Chat: Clear ──────────────────────────────────────────────────────────
+    clear_chat_btn.click(
+        fn=handle_clear_chat,
+        inputs=[user_state],
+        outputs=[user_state, chatbot, chat_warning],
+    )
+
+    # ── Sources: File upload ─────────────────────────────────────────────────
+    file_uploader.upload(
+        fn=handle_file_upload,
+        inputs=[file_uploader, user_state],
+        outputs=[user_state, source_list_html, source_header, source_selector],
+    )
+
+    # ── Sources: Add URL ─────────────────────────────────────────────────────
+    add_url_btn.click(
+        fn=handle_url_add,
+        inputs=[url_input, user_state],
+        outputs=[user_state, source_list_html, source_header, url_input, source_selector],
+    )
+
+    # ── Sources: Delete source ───────────────────────────────────────────────
+    delete_source_btn.click(
+        fn=handle_source_delete,
+        inputs=[source_selector, user_state],
+        outputs=[user_state, source_list_html, source_header, source_selector],
+    )
+
+    # ── Artifacts: Conversation summary ──────────────────────────────────────
+    gen_conv_sum_btn.click(
+        fn=handle_gen_conv_summary,
+        inputs=[conv_style_radio, user_state],
+        outputs=[user_state, conv_summary_html],
+    )
+
+    # ── Artifacts: Document summary ──────────────────────────────────────────
+    gen_doc_sum_btn.click(
+        fn=handle_gen_doc_summary,
+        inputs=[doc_style_radio, user_state],
+        outputs=[user_state, doc_summary_html],
+    )
+
+    # ── Artifacts: Podcast ───────────────────────────────────────────────────
+    gen_podcast_btn.click(
+        fn=handle_gen_podcast,
+        inputs=[user_state],
+        outputs=[user_state, podcast_html],
+    )
+
+    # ── Artifacts: Quiz ──────────────────────────────────────────────────────
+    gen_quiz_btn.click(
+        fn=handle_gen_quiz,
+        inputs=[quiz_num_radio, user_state],
+        outputs=[user_state, quiz_html],
+    )
 
-with tab_sources:
-    render_sources(notebook)
 
-with tab_artifacts:
-    render_artifacts(notebook)
+# ── Launch ───────────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    demo.launch()

auth.py

@@ -1,60 +0,0 @@
-import streamlit as st
-import os
-
-
-def get_current_user() -> dict | None:
-    """
-    Get the currently logged-in user via Streamlit's native auth (st.user).
-
-    On HF Spaces: secrets.toml is auto-generated from HF OAuth env vars
-                  by entrypoint.sh, so st.login()/st.user just works.
-    Locally: uses a dev user so the app is testable without OAuth.
-
-    Returns dict with 'id' and 'name', or None if not authenticated.
-    """
-    is_hf_space = os.environ.get("SPACE_ID") is not None
-
-    if is_hf_space:
-        if st.user.is_logged_in:
-            return {
-                "id": st.user.get("sub", st.user.get("name", "unknown")),
-                "name": st.user.get("name", st.user.get("preferred_username", "User")),
-            }
-        return None
-    else:
-        return {
-            "id": "dev_user",
-            "name": "Dev User (local)",
-        }
-
-
-def _do_login():
-    st.login("huggingface")
-
-
-def require_auth() -> dict:
-    """
-    Gate the app behind authentication.
-    Returns user dict if authenticated, otherwise shows login prompt and stops.
-    """
-    user = get_current_user()
-
-    if user is None:
-        st.markdown(
-            '<div style="text-align:center; padding:60px 20px;">'
-            '<h1>NotebookLM</h1>'
-            '<p style="color:#888; font-size:1.1rem;">Sign in with your Hugging Face account to continue.</p>'
-            "</div>",
-            unsafe_allow_html=True,
-        )
-        _col1, col2, _col3 = st.columns([1, 1, 1])
-        with col2:
-            st.button(
-                "Sign in with Hugging Face",
-                on_click=_do_login,
-                use_container_width=True,
-                type="primary",
-            )
-        st.stop()
-
-    return user

entrypoint.sh

@@ -1,26 +0,0 @@
-#!/bin/bash
-set -e
-
-# Generate .streamlit/secrets.toml from HF OAuth environment variables
-mkdir -p /app/.streamlit
-
-REDIRECT="https://${SPACE_HOST}/oauth2callback"
-
-cat > /app/.streamlit/secrets.toml <<EOF
-[auth]
-redirect_uri = "${REDIRECT}"
-cookie_secret = "$(python3 -c 'import secrets; print(secrets.token_hex(32))')"
-
-[auth.huggingface]
-client_id = "${OAUTH_CLIENT_ID}"
-client_secret = "${OAUTH_CLIENT_SECRET}"
-server_metadata_url = "${OPENID_PROVIDER_URL}/.well-known/openid-configuration"
-EOF
-
-echo "Generated secrets.toml with redirect_uri=${REDIRECT}"
-
-exec streamlit run app.py \
-    --server.port=8501 \
-    --server.address=0.0.0.0 \
-    --server.enableCORS=false \
-    --server.enableXsrfProtection=false

ui/artifact_page.py → mock_data.py

@@ -1,10 +1,69 @@
-import streamlit as st
+"""All mock responses and content for the NotebookLM prototype."""
+
+import random
+import time
 import uuid
 from datetime import datetime
-import time
-
-
-# ── Mock Content ─────────────────────────────────────────────────────────────
+from state import Artifact
+
+
+# ── Chat Mock Responses ──────────────────────────────────────────────────────
+
+MOCK_RESPONSES = [
+    {
+        "content": (
+            "Based on the uploaded sources, the key concept revolves around "
+            "the relationship between the variables discussed in Chapter 3. "
+            "The author emphasizes that understanding this foundation is critical "
+            "before moving to advanced topics."
+        ),
+        "citations": [
+            {"source": "lecture_notes.pdf", "page": 3, "text": "the relationship between variables..."},
+            {"source": "textbook_ch3.pdf", "page": 42, "text": "understanding this foundation..."},
+        ],
+    },
+    {
+        "content": (
+            "The sources indicate three main approaches to this problem:\n\n"
+            "1. **Direct method** — Apply the formula from Section 2.1\n"
+            "2. **Iterative approach** — Build up from base cases\n"
+            "3. **Approximation** — Use the simplified model when precision isn't critical\n\n"
+            "The textbook recommends starting with the direct method for beginners."
+        ),
+        "citations": [
+            {"source": "textbook_ch2.pdf", "page": 15, "text": "direct method... apply the formula"},
+        ],
+    },
+    {
+        "content": (
+            "I couldn't find specific information about that topic in your "
+            "uploaded sources. Try uploading additional materials that cover this "
+            "subject, or rephrase your question to relate more closely to the "
+            "content in your current sources."
+        ),
+        "citations": [],
+    },
+    {
+        "content": (
+            "Great question! According to the lecture slides, this concept "
+            "was introduced in Week 5. The key takeaway is that the process involves "
+            "three stages: **initialization**, **processing**, and **validation**. "
+            "Each stage has specific requirements that must be met before proceeding."
+        ),
+        "citations": [
+            {"source": "week5_slides.pptx", "page": 8, "text": "three stages: initialization..."},
+            {"source": "week5_slides.pptx", "page": 12, "text": "specific requirements..."},
+        ],
+    },
+]
+
+
+def get_mock_response(query: str) -> dict:
+    time.sleep(1.2)
+    return random.choice(MOCK_RESPONSES)
+
+
+# ── Artifact Mock Content ────────────────────────────────────────────────────
 
 MOCK_CONVERSATION_SUMMARY = {
     "brief": """## Conversation Summary (Brief)
@@ -211,7 +270,6 @@ What is the recommended learning order for the three methods?
 
 ### Question 1
 What is the primary advantage of the direct method?
-
 - A) It works with incomplete data
 - B) It provides exact results in a single pass
 - C) It is the fastest method
@@ -223,7 +281,6 @@ What is the primary advantage of the direct method?
 
 ### Question 2
 Which stage comes immediately after initialization?
-
 - A) Validation
 - B) Optimization
 - C) Processing
@@ -235,7 +292,6 @@ Which stage comes immediately after initialization?
 
 ### Question 3
 When should the approximation method be preferred?
-
 - A) When working with critical systems
 - B) When precision is not the primary concern
 - C) When the dataset is very small
@@ -247,7 +303,6 @@ When should the approximation method be preferred?
 
 ### Question 4
 What does "convergence" mean in the iterative approach?
-
 - A) The point where the algorithm starts
 - B) When iterations produce negligible differences
 - C) The final validation step
@@ -259,7 +314,6 @@ What does "convergence" mean in the iterative approach?
 
 ### Question 5
 What is the recommended learning order?
-
 - A) Approximation → Iterative → Direct
 - B) Iterative → Direct → Approximation
 - C) Direct → Iterative → Approximation
@@ -271,7 +325,6 @@ What is the recommended learning order?
 
 ### Question 6
 What does the direct method require?
-
 - A) Multiple iterations
 - B) Complete data
 - C) A confidence threshold
@@ -283,7 +336,6 @@ What does the direct method require?
 
 ### Question 7
 What is a "confidence threshold"?
-
 - A) How sure you are about your method choice
 - B) The minimum acceptable certainty for a result
 - C) The maximum number of iterations
@@ -295,7 +347,6 @@ What is a "confidence threshold"?
 
 ### Question 8
 How do lecture notes differ from the textbook?
-
 - A) Lectures focus on theory, textbook on application
 - B) Lectures focus on application, textbook on theory
 - C) They cover different topics entirely
@@ -307,7 +358,6 @@ How do lecture notes differ from the textbook?
 
 ### Question 9
 What is a "base case" in this context?
-
 - A) The most complex problem instance
 - B) The simplest problem instance used as a starting point
 - C) The final validated result
@@ -319,7 +369,6 @@ What is a "base case" in this context?
 
 ### Question 10
 The three-stage process applies to which methods?
-
 - A) Only the direct method
 - B) Only the iterative method
 - C) Direct and iterative only
@@ -330,21 +379,7 @@ The three-stage process applies to which methods?
 }
 
 
-def get_latest_artifact(notebook: dict, artifact_type: str) -> dict | None:
-    """Get the most recent artifact of a given type."""
-    for artifact in reversed(notebook["artifacts"]):
-        if artifact["type"] == artifact_type:
-            return artifact
-    return None
-
-
-def get_all_artifacts(notebook: dict, artifact_type: str) -> list[dict]:
-    """Get all artifacts of a given type, newest first."""
-    return [a for a in reversed(notebook["artifacts"]) if a["type"] == artifact_type]
-
-
-def generate_mock_artifact(artifact_type: str, **kwargs) -> dict:
-    """Simulate artifact generation."""
+def generate_mock_artifact(artifact_type: str, **kwargs) -> Artifact:
     time.sleep(1.5)
 
     if artifact_type == "conversation_summary":
@@ -366,465 +401,11 @@ def generate_mock_artifact(artifact_type: str, **kwargs) -> dict:
         content = ""
         title = artifact_type
 
-    return {
-        "id": str(uuid.uuid4()),
-        "type": artifact_type,
-        "title": title,
-        "content": content,
-        "audio_path": None,
-        "created_at": datetime.now().isoformat(),
-    }
-
-
-def _render_artifact_card(artifact: dict, index: int, notebook: dict):
-    """Render a single artifact with actions."""
-    try:
-        dt = datetime.fromisoformat(artifact["created_at"])
-        time_str = dt.strftime("%b %d at %H:%M")
-    except (ValueError, KeyError):
-        time_str = ""
-
-    st.markdown(
-        f"""
-        <div style="
-            padding: 4px 0 8px 0;
-            font-size: 0.8rem;
-            color: #707088;
-        ">Generated {time_str}</div>
-        """,
-        unsafe_allow_html=True,
+    return Artifact(
+        id=str(uuid.uuid4()),
+        type=artifact_type,
+        title=title,
+        content=content,
+        audio_path=None,
+        created_at=datetime.now().isoformat(),
     )
-
-    # Content
-    with st.container(height=400, border=True):
-        st.markdown(artifact["content"])
-
-    # Audio player for podcast
-    if artifact["type"] == "podcast":
-        if artifact.get("audio_path"):
-            st.audio(artifact["audio_path"])
-        else:
-            st.markdown(
-                """
-                <div style="
-                    display: flex; align-items: center; gap: 10px;
-                    padding: 12px 16px;
-                    background: rgba(102,126,234,0.06);
-                    border: 1px solid rgba(102,126,234,0.15);
-                    border-radius: 10px;
-                    margin-top: 8px;
-                ">
-                    <span style="font-size: 1.3rem;">🔇</span>
-                    <span style="font-size: 0.85rem; color: #8888aa;">
-                        Audio player will appear here when TTS is connected.
-                    </span>
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )
-
-    # Actions
-    st.markdown('<div style="margin-top: 8px;"></div>', unsafe_allow_html=True)
-    c1, c2, c3 = st.columns([1, 1, 3])
-    with c1:
-        st.download_button(
-            "Download .md",
-            data=artifact["content"],
-            file_name=f"{artifact['title'].lower().replace(' ', '_')}.md",
-            mime="text/markdown",
-            key=f"dl_{artifact['id']}",
-            use_container_width=True,
-        )
-    with c2:
-        if st.button("Delete", key=f"del_{artifact['id']}", use_container_width=True):
-            notebook["artifacts"].remove(artifact)
-            st.rerun()
-
-
-def _render_history(artifacts: list[dict], label: str):
-    """Show older artifacts in a collapsed section."""
-    if len(artifacts) > 1:
-        with st.expander(f"Previous {label} ({len(artifacts) - 1})"):
-            for a in artifacts[1:]:
-                try:
-                    dt = datetime.fromisoformat(a["created_at"])
-                    time_str = dt.strftime("%b %d at %H:%M")
-                except (ValueError, KeyError):
-                    time_str = ""
-                st.markdown(f"**{a['title']}** — {time_str}")
-                with st.container(height=200, border=True):
-                    st.markdown(a["content"])
-                c1, c2, c3 = st.columns([1, 1, 4])
-                with c1:
-                    st.download_button(
-                        "Download",
-                        data=a["content"],
-                        file_name=f"{a['title'].lower().replace(' ', '_')}.md",
-                        mime="text/markdown",
-                        key=f"dl_hist_{a['id']}",
-                        use_container_width=True,
-                    )
-                with c2:
-                    # No delete in history to keep things simple
-                    pass
-
-
-# ── Main Render ──────────────────────────────────────────────────────────────
-
-def render_artifacts(notebook: dict):
-    """Render artifact generation with sub-tabs: Summary | Podcast | Quiz."""
-
-    if not notebook["sources"]:
-        st.markdown(
-            """
-            <div class="empty-state">
-                <div style="font-size: 3rem; margin-bottom: 16px;">🎯</div>
-                <h3>Add sources first</h3>
-                <p>Upload documents in the <strong>Sources</strong> tab to unlock<br>
-                summary, quiz, and podcast generation.</p>
-            </div>
-            """,
-            unsafe_allow_html=True,
-        )
-        return
-
-    tab_summary, tab_podcast, tab_quiz = st.tabs(
-        ["  Summary  ", "  Podcast  ", "  Quiz  "]
-    )
-
-    # ── SUMMARY TAB ──────────────────────────────────────────────────────────
-    with tab_summary:
-
-        # ── Section 1: Conversation Summary ──
-        st.markdown(
-            """
-            <div style="
-                display: flex; align-items: center; gap: 10px;
-                margin-bottom: 12px;
-            ">
-                <div style="
-                    width: 36px; height: 36px; border-radius: 10px;
-                    background: rgba(102,126,234,0.12);
-                    display: flex; align-items: center; justify-content: center;
-                    font-size: 1.1rem;
-                ">💬</div>
-                <div>
-                    <span style="font-weight:600; font-size:1rem; color:#e0e0f0;">
-                        Conversation Summary
-                    </span>
-                    <p style="font-size:0.82rem; color:#808098; margin:2px 0 0 0;">
-                        Summarize your chat history — topics discussed, key insights, and citations used.
-                    </p>
-                </div>
-            </div>
-            """,
-            unsafe_allow_html=True,
-        )
-
-        has_messages = len(notebook["messages"]) > 0
-
-        if not has_messages:
-            st.markdown(
-                """
-                <div style="
-                    text-align: center; padding: 30px 20px;
-                    color: #606078;
-                    border: 1px dashed rgba(255,255,255,0.08);
-                    border-radius: 14px;
-                ">
-                    <p style="margin:0;">No conversation yet. Start chatting in the <strong>Chat</strong> tab first.</p>
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )
-        else:
-            col_cs1, col_cs2, col_cs3 = st.columns([2, 2, 2])
-            with col_cs1:
-                conv_style = st.radio(
-                    "Style",
-                    ["brief", "detailed"],
-                    format_func=lambda x: "Brief" if x == "brief" else "Detailed",
-                    horizontal=True,
-                    key=f"conv_sum_style_{notebook['id']}",
-                )
-            with col_cs3:
-                st.markdown('<div style="margin-top: 24px;"></div>', unsafe_allow_html=True)
-                gen_conv_sum = st.button(
-                    "Generate Conversation Summary",
-                    type="primary",
-                    use_container_width=True,
-                    key=f"gen_conv_sum_{notebook['id']}",
-                )
-
-            if gen_conv_sum:
-                with st.spinner("Summarizing conversation..."):
-                    artifact = generate_mock_artifact("conversation_summary", style=conv_style)
-                notebook["artifacts"].append(artifact)
-                st.rerun()
-
-            conv_summaries = get_all_artifacts(notebook, "conversation_summary")
-            if conv_summaries:
-                _render_artifact_card(conv_summaries[0], 0, notebook)
-                _render_history(conv_summaries, "conversation summaries")
-
-        # ── Divider between sections ──
-        st.markdown(
-            '<div style="margin: 30px 0; border-top: 1px solid rgba(255,255,255,0.06);"></div>',
-            unsafe_allow_html=True,
-        )
-
-        # ── Section 2: Document Summary ──
-        st.markdown(
-            """
-            <div style="
-                display: flex; align-items: center; gap: 10px;
-                margin-bottom: 12px;
-            ">
-                <div style="
-                    width: 36px; height: 36px; border-radius: 10px;
-                    background: rgba(34,197,94,0.12);
-                    display: flex; align-items: center; justify-content: center;
-                    font-size: 1.1rem;
-                ">📄</div>
-                <div>
-                    <span style="font-weight:600; font-size:1rem; color:#e0e0f0;">
-                        Document Summary
-                    </span>
-                    <p style="font-size:0.82rem; color:#808098; margin:2px 0 0 0;">
-                        Summarize content from your uploaded sources — key concepts, themes, and connections.
-                    </p>
-                </div>
-            </div>
-            """,
-            unsafe_allow_html=True,
-        )
-
-        col_ds1, col_ds2, col_ds3 = st.columns([2, 2, 2])
-        with col_ds1:
-            doc_style = st.radio(
-                "Style",
-                ["brief", "detailed"],
-                format_func=lambda x: "Brief (1 page)" if x == "brief" else "Detailed (full analysis)",
-                horizontal=True,
-                key=f"doc_sum_style_{notebook['id']}",
-            )
-        with col_ds3:
-            st.markdown('<div style="margin-top: 24px;"></div>', unsafe_allow_html=True)
-            gen_doc_sum = st.button(
-                "Generate Document Summary",
-                type="primary",
-                use_container_width=True,
-                key=f"gen_doc_sum_{notebook['id']}",
-            )
-
-        if gen_doc_sum:
-            with st.spinner("Analyzing sources and generating summary..."):
-                artifact = generate_mock_artifact("document_summary", style=doc_style)
-            notebook["artifacts"].append(artifact)
-            st.rerun()
-
-        doc_summaries = get_all_artifacts(notebook, "document_summary")
-        if doc_summaries:
-            _render_artifact_card(doc_summaries[0], 0, notebook)
-            _render_history(doc_summaries, "document summaries")
-
-    # ── PODCAST TAB ──────────────────────────────────────────────────────────
-    with tab_podcast:
-        # Podcast depends on having any summary (conversation or document)
-        latest_doc_summary = get_latest_artifact(notebook, "document_summary")
-        latest_conv_summary = get_latest_artifact(notebook, "conversation_summary")
-        latest_summary = latest_doc_summary or latest_conv_summary
-        has_summary = latest_summary is not None
-
-        st.markdown(
-            """
-            <div style="margin-bottom: 20px;">
-                <span style="font-weight:600; font-size:1rem; color:#e0e0f0;">
-                    Generate Podcast
-                </span>
-                <p style="font-size:0.85rem; color:#808098; margin-top:4px;">
-                    Create a conversational podcast episode from your summary.
-                </p>
-            </div>
-            """,
-            unsafe_allow_html=True,
-        )
-
-        if not has_summary:
-            # Locked state
-            st.markdown(
-                """
-                <div style="
-                    text-align: center;
-                    padding: 50px 30px;
-                    background: rgba(255,255,255,0.02);
-                    border: 1px solid rgba(255,255,255,0.06);
-                    border-radius: 16px;
-                ">
-                    <div style="font-size: 2.5rem; margin-bottom: 16px;">🔒</div>
-                    <h3 style="color: #a0a0b8; font-weight: 600; margin-bottom: 8px;">
-                        Summary Required
-                    </h3>
-                    <p style="color: #707088; font-size: 0.9rem; line-height: 1.6;">
-                        Generate a summary first in the <strong>Summary</strong> tab.<br>
-                        The podcast is created from your summary to ensure accuracy.
-                    </p>
-                    <div style="
-                        margin-top: 20px;
-                        display: inline-flex; align-items: center; gap: 8px;
-                        padding: 8px 18px;
-                        background: rgba(102,126,234,0.08);
-                        border: 1px solid rgba(102,126,234,0.15);
-                        border-radius: 20px;
-                        font-size: 0.82rem;
-                        color: #8090d0;
-                    ">
-                        📝 Summary &nbsp;→&nbsp; 🎙️ Podcast
-                    </div>
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )
-        else:
-            # Show which summary will be used
-            sum_title = latest_summary["title"]
-            try:
-                dt = datetime.fromisoformat(latest_summary["created_at"])
-                sum_time = dt.strftime("%b %d at %H:%M")
-            except (ValueError, KeyError):
-                sum_time = ""
-
-            st.markdown(
-                f"""
-                <div style="
-                    display: flex; align-items: center; gap: 12px;
-                    padding: 12px 18px;
-                    background: rgba(34,197,94,0.06);
-                    border: 1px solid rgba(34,197,94,0.15);
-                    border-radius: 12px;
-                    margin-bottom: 16px;
-                ">
-                    <span style="font-size: 1.2rem;">📝</span>
-                    <div>
-                        <span style="font-size: 0.85rem; color: #a0b8a0;">
-                            Based on:
-                        </span>
-                        <strong style="color: #c0e0c0;">{sum_title}</strong>
-                        <span style="color: #708070; font-size: 0.8rem;">
-                            &nbsp;({sum_time})
-                        </span>
-                    </div>
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )
-
-            col1, col2 = st.columns([3, 1])
-            with col2:
-                gen_podcast = st.button(
-                    "Generate Podcast",
-                    type="primary",
-                    use_container_width=True,
-                    key=f"gen_pod_{notebook['id']}",
-                )
-
-            if gen_podcast:
-                with st.spinner("Creating podcast script and audio..."):
-                    artifact = generate_mock_artifact("podcast")
-                notebook["artifacts"].append(artifact)
-                st.rerun()
-
-            # Display latest podcast
-            podcasts = get_all_artifacts(notebook, "podcast")
-            if podcasts:
-                st.divider()
-                st.markdown(
-                    f'<span style="font-weight:600; font-size:0.9rem; color:#b0b0c8;">'
-                    f'Latest Podcast</span>',
-                    unsafe_allow_html=True,
-                )
-                _render_artifact_card(podcasts[0], 0, notebook)
-                _render_history(podcasts, "podcasts")
-            else:
-                st.markdown(
-                    """
-                    <div style="
-                        text-align: center; padding: 40px 20px;
-                        color: #606078; margin-top: 16px;
-                        border: 1px dashed rgba(255,255,255,0.08);
-                        border-radius: 14px;
-                    ">
-                        <div style="font-size: 2rem; margin-bottom: 10px;">🎙️</div>
-                        <p>No podcast generated yet.<br>
-                        Click <strong>Generate Podcast</strong> to create one from your summary.</p>
-                    </div>
-                    """,
-                    unsafe_allow_html=True,
-                )
-
-    # ── QUIZ TAB ─────────────────────────────────────────────────────────────
-    with tab_quiz:
-        st.markdown(
-            """
-            <div style="margin-bottom: 20px;">
-                <span style="font-weight:600; font-size:1rem; color:#e0e0f0;">
-                    Generate Quiz
-                </span>
-                <p style="font-size:0.85rem; color:#808098; margin-top:4px;">
-                    Create multiple-choice questions from your sources to test your understanding.
-                </p>
-            </div>
-            """,
-            unsafe_allow_html=True,
-        )
-
-        col_q1, col_q2, col_q3 = st.columns([2, 2, 2])
-        with col_q1:
-            num_questions = st.select_slider(
-                "Number of questions",
-                options=[5, 10],
-                value=5,
-                key=f"quiz_num_{notebook['id']}",
-            )
-        with col_q3:
-            st.markdown('<div style="margin-top: 24px;"></div>', unsafe_allow_html=True)
-            gen_quiz = st.button(
-                "Generate Quiz",
-                type="primary",
-                use_container_width=True,
-                key=f"gen_quiz_{notebook['id']}",
-            )
-
-        if gen_quiz:
-            with st.spinner(f"Generating {num_questions} questions..."):
-                artifact = generate_mock_artifact("quiz", num_questions=num_questions)
-            notebook["artifacts"].append(artifact)
-            st.rerun()
-
-        # Display latest quiz
-        quizzes = get_all_artifacts(notebook, "quiz")
-        if quizzes:
-            st.divider()
-            st.markdown(
-                f'<span style="font-weight:600; font-size:0.9rem; color:#b0b0c8;">'
-                f'Latest Quiz</span>',
-                unsafe_allow_html=True,
-            )
-            _render_artifact_card(quizzes[0], 0, notebook)
-            _render_history(quizzes, "quizzes")
-        else:
-            st.markdown(
-                """
-                <div style="
-                    text-align: center; padding: 40px 20px;
-                    color: #606078; margin-top: 16px;
-                    border: 1px dashed rgba(255,255,255,0.08);
-                    border-radius: 14px;
-                ">
-                    <div style="font-size: 2rem; margin-bottom: 10px;">❓</div>
-                    <p>No quiz generated yet.<br>
-                    Choose the number of questions and click <strong>Generate Quiz</strong>.</p>
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )

pages/artifacts.py

@@ -0,0 +1,238 @@
+"""Artifacts tab: Summary, Podcast, and Quiz generation with mock data."""
+
+from datetime import datetime
+from state import UserData, get_active_notebook, get_all_artifacts, get_latest_artifact
+from mock_data import generate_mock_artifact
+
+
+def _format_time(iso_str: str) -> str:
+    try:
+        dt = datetime.fromisoformat(iso_str)
+        return dt.strftime("%b %d at %H:%M")
+    except (ValueError, KeyError):
+        return ""
+
+
+def _render_artifact_content(artifact) -> str:
+    """Render a single artifact as HTML with metadata."""
+    time_str = _format_time(artifact.created_at)
+    html = (
+        f'<div style="padding:4px 0 8px 0; font-size:0.8rem; color:#707088;">'
+        f'Generated {time_str}</div>'
+    )
+    html += (
+        f'<div style="max-height:400px; overflow-y:auto; padding:16px; '
+        f'background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); '
+        f'border-radius:14px;">'
+    )
+    # Convert markdown to basic display (Gradio HTML will render markdown in gr.Markdown)
+    html += f'<div class="artifact-content">{artifact.content}</div>'
+    html += '</div>'
+
+    if artifact.type == "podcast" and not artifact.audio_path:
+        html += (
+            '<div style="display:flex; align-items:center; gap:10px; padding:12px 16px; '
+            'background:rgba(102,126,234,0.06); border:1px solid rgba(102,126,234,0.15); '
+            'border-radius:10px; margin-top:8px;">'
+            '<span style="font-size:1.3rem;">🔇</span>'
+            '<span style="font-size:0.85rem; color:#8888aa;">Audio player will appear here when TTS is connected.</span>'
+            '</div>'
+        )
+    return html
+
+
+def _render_history(artifacts: list, label: str) -> str:
+    if len(artifacts) <= 1:
+        return ""
+    html = f'<details><summary style="cursor:pointer; color:#a0a0b8; font-size:0.85rem; margin-top:12px;">Previous {label} ({len(artifacts) - 1})</summary>'
+    for a in artifacts[1:]:
+        time_str = _format_time(a.created_at)
+        html += f'<div style="margin-top:12px; padding:12px; border:1px solid rgba(255,255,255,0.06); border-radius:10px;">'
+        html += f'<strong>{a.title}</strong> — {time_str}'
+        html += f'<div style="max-height:200px; overflow-y:auto; margin-top:8px; font-size:0.85rem;">{a.content}</div>'
+        html += '</div>'
+    html += '</details>'
+    return html
+
+
+# ── No-sources gate ──────────────────────────────────────────────────────────
+
+def render_no_sources_gate(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb or not nb.sources:
+        return (
+            '<div class="empty-state">'
+            '<div style="font-size:3rem; margin-bottom:16px;">🎯</div>'
+            '<h3>Add sources first</h3>'
+            '<p>Upload documents in the <strong>Sources</strong> tab to unlock '
+            'summary, quiz, and podcast generation.</p>'
+            '</div>'
+        )
+    return ""
+
+
+def has_sources(state: UserData) -> bool:
+    nb = get_active_notebook(state)
+    return nb is not None and len(nb.sources) > 0
+
+
+# ── Conversation Summary ─────────────────────────────────────────────────────
+
+def render_conv_summary_section(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb:
+        return ""
+    if not nb.messages:
+        return (
+            '<div style="text-align:center; padding:30px 20px; color:#606078; '
+            'border:1px dashed rgba(255,255,255,0.08); border-radius:14px;">'
+            '<p style="margin:0;">No conversation yet. Start chatting in the <strong>Chat</strong> tab first.</p>'
+            '</div>'
+        )
+    summaries = get_all_artifacts(nb, "conversation_summary")
+    if not summaries:
+        return '<p style="color:#606078; text-align:center; padding:20px;">Click "Generate" to create a conversation summary.</p>'
+    html = _render_artifact_content(summaries[0])
+    html += _render_history(summaries, "conversation summaries")
+    return html
+
+
+def handle_gen_conv_summary(style: str, state: UserData) -> tuple[UserData, str]:
+    nb = get_active_notebook(state)
+    if not nb or not nb.messages:
+        return state, render_conv_summary_section(state)
+    artifact = generate_mock_artifact("conversation_summary", style=style or "detailed")
+    nb.artifacts.append(artifact)
+    return state, render_conv_summary_section(state)
+
+
+# ── Document Summary ─────────────────────────────────────────────────────────
+
+def render_doc_summary_section(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb:
+        return ""
+    summaries = get_all_artifacts(nb, "document_summary")
+    if not summaries:
+        return '<p style="color:#606078; text-align:center; padding:20px;">Click "Generate" to create a document summary.</p>'
+    html = _render_artifact_content(summaries[0])
+    html += _render_history(summaries, "document summaries")
+    return html
+
+
+def handle_gen_doc_summary(style: str, state: UserData) -> tuple[UserData, str]:
+    nb = get_active_notebook(state)
+    if not nb:
+        return state, render_doc_summary_section(state)
+    artifact = generate_mock_artifact("document_summary", style=style or "detailed")
+    nb.artifacts.append(artifact)
+    return state, render_doc_summary_section(state)
+
+
+# ── Podcast ──────────────────────────────────────────────────────────────────
+
+def has_any_summary(state: UserData) -> bool:
+    nb = get_active_notebook(state)
+    if not nb:
+        return False
+    return (
+        get_latest_artifact(nb, "document_summary") is not None
+        or get_latest_artifact(nb, "conversation_summary") is not None
+    )
+
+
+def render_podcast_locked() -> str:
+    return (
+        '<div class="locked-state">'
+        '<div style="font-size:2.5rem; margin-bottom:16px;">🔒</div>'
+        '<h3 style="color:#a0a0b8; font-weight:600; margin-bottom:8px;">Summary Required</h3>'
+        '<p style="color:#707088; font-size:0.9rem; line-height:1.6;">'
+        'Generate a summary first in the <strong>Summary</strong> tab.<br>'
+        'The podcast is created from your summary to ensure accuracy.</p>'
+        '<div style="margin-top:20px; display:inline-flex; align-items:center; gap:8px; '
+        'padding:8px 18px; background:rgba(102,126,234,0.08); '
+        'border:1px solid rgba(102,126,234,0.15); border-radius:20px; '
+        'font-size:0.82rem; color:#8090d0;">'
+        '📝 Summary &nbsp;→&nbsp; 🎙️ Podcast</div>'
+        '</div>'
+    )
+
+
+def render_podcast_section(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb:
+        return ""
+
+    if not has_any_summary(state):
+        return render_podcast_locked()
+
+    # Show which summary will be used
+    latest_doc = get_latest_artifact(nb, "document_summary")
+    latest_conv = get_latest_artifact(nb, "conversation_summary")
+    latest = latest_doc or latest_conv
+    sum_title = latest.title
+    sum_time = _format_time(latest.created_at)
+
+    html = (
+        f'<div style="display:flex; align-items:center; gap:12px; padding:12px 18px; '
+        f'background:rgba(34,197,94,0.06); border:1px solid rgba(34,197,94,0.15); '
+        f'border-radius:12px; margin-bottom:16px;">'
+        f'<span style="font-size:1.2rem;">📝</span>'
+        f'<div><span style="font-size:0.85rem; color:#a0b8a0;">Based on: </span>'
+        f'<strong style="color:#c0e0c0;">{sum_title}</strong>'
+        f'<span style="color:#708070; font-size:0.8rem;"> ({sum_time})</span></div>'
+        f'</div>'
+    )
+
+    podcasts = get_all_artifacts(nb, "podcast")
+    if podcasts:
+        html += _render_artifact_content(podcasts[0])
+        html += _render_history(podcasts, "podcasts")
+    else:
+        html += (
+            '<div style="text-align:center; padding:40px 20px; color:#606078; margin-top:16px; '
+            'border:1px dashed rgba(255,255,255,0.08); border-radius:14px;">'
+            '<div style="font-size:2rem; margin-bottom:10px;">🎙️</div>'
+            '<p>No podcast generated yet.<br>Click <strong>Generate Podcast</strong> to create one.</p>'
+            '</div>'
+        )
+    return html
+
+
+def handle_gen_podcast(state: UserData) -> tuple[UserData, str]:
+    nb = get_active_notebook(state)
+    if not nb or not has_any_summary(state):
+        return state, render_podcast_section(state)
+    artifact = generate_mock_artifact("podcast")
+    nb.artifacts.append(artifact)
+    return state, render_podcast_section(state)
+
+
+# ── Quiz ─────────────────────────────────────────────────────────────────────
+
+def render_quiz_section(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb:
+        return ""
+    quizzes = get_all_artifacts(nb, "quiz")
+    if not quizzes:
+        return (
+            '<div style="text-align:center; padding:40px 20px; color:#606078; margin-top:16px; '
+            'border:1px dashed rgba(255,255,255,0.08); border-radius:14px;">'
+            '<div style="font-size:2rem; margin-bottom:10px;">❓</div>'
+            '<p>No quiz generated yet.<br>Choose the number of questions and click <strong>Generate Quiz</strong>.</p>'
+            '</div>'
+        )
+    html = _render_artifact_content(quizzes[0])
+    html += _render_history(quizzes, "quizzes")
+    return html
+
+
+def handle_gen_quiz(num_questions: int, state: UserData) -> tuple[UserData, str]:
+    nb = get_active_notebook(state)
+    if not nb:
+        return state, render_quiz_section(state)
+    num_q = int(num_questions) if num_questions else 5
+    artifact = generate_mock_artifact("quiz", num_questions=num_q)
+    nb.artifacts.append(artifact)
+    return state, render_quiz_section(state)

pages/chat.py

@@ -0,0 +1,91 @@
+"""Chat tab: message display with citations and mock RAG responses."""
+
+import uuid
+from datetime import datetime
+from state import UserData, Message, get_active_notebook
+from mock_data import get_mock_response
+
+
+FILE_TYPE_ICONS = {
+    "pdf": "📕", "pptx": "📊", "txt": "📝", "url": "🌐", "youtube": "🎬",
+}
+
+
+def format_chatbot_messages(state: UserData) -> list[dict]:
+    """Convert notebook messages to gr.Chatbot format with embedded citations."""
+    nb = get_active_notebook(state)
+    if not nb or not nb.messages:
+        return []
+
+    formatted = []
+    for msg in nb.messages:
+        content = msg.content
+        if msg.role == "assistant" and msg.citations:
+            # Add citation chips
+            chips = ""
+            for c in msg.citations:
+                chips += f'<span class="citation-chip">📄 {c["source"]} · p.{c["page"]}</span>'
+            content += f"\n\n{chips}"
+            # Add expandable passages
+            passages = ""
+            for c in msg.citations:
+                passages += f'> *"{c["text"]}"*\n>\n> — **{c["source"]}**, page {c["page"]}\n\n'
+            content += f"\n\n<details><summary>View cited passages</summary>\n\n{passages}</details>"
+        formatted.append({"role": msg.role, "content": content})
+    return formatted
+
+
+def render_no_sources_warning(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb or len(nb.sources) == 0:
+        return (
+            '<div style="padding:14px 20px; background:rgba(234,179,8,0.08); '
+            'border:1px solid rgba(234,179,8,0.2); border-radius:12px; color:#d4a017; '
+            'font-size:0.9rem; margin-bottom:16px;">'
+            'Upload sources in the <strong>Sources</strong> tab to start chatting with your documents.'
+            '</div>'
+        )
+    return ""
+
+
+def handle_chat_submit(message: str, state: UserData) -> tuple[UserData, list[dict], str, str]:
+    """Handle user sending a chat message. Returns (state, chatbot_messages, textbox_value, warning_html)."""
+    if not message or not message.strip():
+        return state, format_chatbot_messages(state), "", render_no_sources_warning(state)
+
+    nb = get_active_notebook(state)
+    if not nb:
+        return state, [], "", ""
+
+    # Add user message
+    user_msg = Message(
+        id=str(uuid.uuid4()),
+        role="user",
+        content=message.strip(),
+        citations=[],
+        created_at=datetime.now().isoformat(),
+    )
+    nb.messages.append(user_msg)
+
+    # Get mock response
+    response = get_mock_response(message)
+
+    # Add assistant message
+    assistant_msg = Message(
+        id=str(uuid.uuid4()),
+        role="assistant",
+        content=response["content"],
+        citations=response["citations"],
+        created_at=datetime.now().isoformat(),
+    )
+    nb.messages.append(assistant_msg)
+
+    return state, format_chatbot_messages(state), "", render_no_sources_warning(state)
+
+
+def handle_clear_chat(state: UserData) -> tuple[UserData, list[dict], str]:
+    """Clear all messages from the active notebook."""
+    nb = get_active_notebook(state)
+    if nb:
+        nb.messages = []
+    return state, [], render_no_sources_warning(state)

pages/sources.py

@@ -0,0 +1,172 @@
+"""Sources tab: file upload, URL input, and source list management."""
+
+import uuid
+from datetime import datetime
+from state import UserData, Source, get_active_notebook
+
+ALLOWED_TYPES = ["pdf", "pptx", "txt"]
+MAX_FILE_SIZE_MB = 15
+MAX_SOURCES_PER_NOTEBOOK = 20
+
+FILE_TYPE_CONFIG = {
+    "pdf": {"icon": "📕", "color": "239,68,68", "label": "PDF"},
+    "pptx": {"icon": "📊", "color": "249,115,22", "label": "PPTX"},
+    "txt": {"icon": "📝", "color": "59,130,246", "label": "TXT"},
+    "url": {"icon": "🌐", "color": "34,197,94", "label": "URL"},
+    "youtube": {"icon": "🎬", "color": "239,68,68", "label": "YouTube"},
+}
+
+
+def render_source_header(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb:
+        return ""
+    total = len(nb.sources)
+    remaining = MAX_SOURCES_PER_NOTEBOOK - total
+    return (
+        f'<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;">'
+        f'<div>'
+        f'<span style="font-size:1.1rem; font-weight:600; color:#e0e0f0;">Sources</span>'
+        f'<span style="margin-left:10px; padding:3px 10px; background:rgba(102,126,234,0.15); '
+        f'color:#8090d0; border-radius:12px; font-size:0.8rem; font-weight:600;">'
+        f'{total} / {MAX_SOURCES_PER_NOTEBOOK}</span>'
+        f'</div>'
+        f'<span style="font-size:0.8rem; color:#606078;">{remaining} slots remaining</span>'
+        f'</div>'
+    )
+
+
+def render_source_list(state: UserData) -> str:
+    nb = get_active_notebook(state)
+    if not nb or not nb.sources:
+        return (
+            '<div style="text-align:center; padding:50px 20px; color:#606078;">'
+            '<div style="font-size:3rem; margin-bottom:16px;">📄</div>'
+            '<h3 style="color:#a0a0b8; font-weight:600;">No sources yet</h3>'
+            '<p style="font-size:0.9rem;">Upload documents or add web links above.<br>'
+            'Your sources power the AI chat and artifact generation.</p>'
+            '</div>'
+        )
+
+    html = f'<p style="font-weight:600; font-size:0.9rem; color:#a0a0b8; margin-bottom:12px;">Your Sources ({len(nb.sources)})</p>'
+    for source in nb.sources:
+        ft = source.file_type
+        cfg = FILE_TYPE_CONFIG.get(ft, {"icon": "📄", "color": "150,150,170", "label": ft.upper()})
+        meta_parts = [cfg["label"]]
+        if source.size_mb:
+            meta_parts.append(f"{source.size_mb} MB")
+        if source.chunk_count > 0:
+            meta_parts.append(f"{source.chunk_count} chunks")
+        meta_str = " · ".join(meta_parts)
+
+        html += (
+            f'<div class="source-card">'
+            f'<div class="source-icon {ft}">{cfg["icon"]}</div>'
+            f'<div class="source-info">'
+            f'<div class="name">{source.filename}</div>'
+            f'<div class="meta">{meta_str}</div>'
+            f'</div>'
+            f'<span class="source-badge ready">Ready</span>'
+            f'</div>'
+        )
+    return html
+
+
+def get_source_choices(state: UserData) -> list[str]:
+    nb = get_active_notebook(state)
+    if not nb:
+        return []
+    return [s.filename for s in nb.sources]
+
+
+def handle_file_upload(files, state: UserData) -> tuple[UserData, str, str, list[str]]:
+    """Handle file upload. Returns (state, source_list_html, header_html, source_choices)."""
+    nb = get_active_notebook(state)
+    if not nb or not files:
+        return state, render_source_list(state), render_source_header(state), get_source_choices(state)
+
+    for f in files:
+        filename = f.name if hasattr(f, 'name') else str(f).rsplit("/", 1)[-1]
+        # Extract just the filename from the path
+        filename = filename.rsplit("/", 1)[-1] if "/" in filename else filename
+
+        existing_names = [s.filename for s in nb.sources]
+        if filename in existing_names:
+            continue
+        if len(nb.sources) >= MAX_SOURCES_PER_NOTEBOOK:
+            break
+
+        file_ext = filename.rsplit(".", 1)[-1].lower() if "." in filename else ""
+        if file_ext not in ALLOWED_TYPES:
+            continue
+
+        # Get file size
+        try:
+            import os
+            file_path = f.name if hasattr(f, 'name') else str(f)
+            size_bytes = os.path.getsize(file_path)
+            size_mb = round(size_bytes / (1024 * 1024), 2)
+        except Exception:
+            size_mb = 0
+
+        if size_mb > MAX_FILE_SIZE_MB:
+            continue
+
+        source = Source(
+            id=str(uuid.uuid4()),
+            filename=filename,
+            file_type=file_ext,
+            size_mb=size_mb,
+            source_url=None,
+            chunk_count=0,
+            status="ready",
+            error_message=None,
+            created_at=datetime.now().isoformat(),
+        )
+        nb.sources.append(source)
+
+    return state, render_source_list(state), render_source_header(state), get_source_choices(state)
+
+
+def handle_url_add(url: str, state: UserData) -> tuple[UserData, str, str, str, list[str]]:
+    """Handle adding a URL source. Returns (state, source_list_html, header_html, url_textbox_value, source_choices)."""
+    nb = get_active_notebook(state)
+    if not nb or not url or not url.strip():
+        return state, render_source_list(state), render_source_header(state), "", get_source_choices(state)
+
+    url = url.strip()
+    if len(nb.sources) >= MAX_SOURCES_PER_NOTEBOOK:
+        return state, render_source_list(state), render_source_header(state), "", get_source_choices(state)
+
+    existing_urls = [s.source_url for s in nb.sources if s.source_url]
+    if url in existing_urls:
+        return state, render_source_list(state), render_source_header(state), "", get_source_choices(state)
+
+    is_youtube = "youtube.com" in url or "youtu.be" in url
+    file_type = "youtube" if is_youtube else "url"
+    display_name = url[:55] + "..." if len(url) > 55 else url
+
+    source = Source(
+        id=str(uuid.uuid4()),
+        filename=display_name,
+        file_type=file_type,
+        size_mb=None,
+        source_url=url,
+        chunk_count=0,
+        status="ready",
+        error_message=None,
+        created_at=datetime.now().isoformat(),
+    )
+    nb.sources.append(source)
+
+    return state, render_source_list(state), render_source_header(state), "", get_source_choices(state)
+
+
+def handle_source_delete(source_name: str, state: UserData) -> tuple[UserData, str, str, list[str]]:
+    """Delete a source by filename. Returns (state, source_list_html, header_html, source_choices)."""
+    nb = get_active_notebook(state)
+    if not nb or not source_name:
+        return state, render_source_list(state), render_source_header(state), get_source_choices(state)
+
+    nb.sources = [s for s in nb.sources if s.filename != source_name]
+    return state, render_source_list(state), render_source_header(state), get_source_choices(state)

requirements.txt

@@ -1,2 +1 @@
-streamlit>=1.42.0
-authlib>=1.3.2
+gradio>=5.0.0

state.py

@@ -0,0 +1,125 @@
+"""Per-user state management with dataclasses and CRUD helpers."""
+
+from dataclasses import dataclass, field
+from datetime import datetime
+import uuid
+
+
+@dataclass
+class Source:
+    id: str
+    filename: str
+    file_type: str  # "pdf", "pptx", "txt", "url", "youtube"
+    size_mb: float | None
+    source_url: str | None
+    chunk_count: int
+    status: str  # "ready", "processing", "failed"
+    error_message: str | None
+    created_at: str
+
+
+@dataclass
+class Message:
+    id: str
+    role: str  # "user" or "assistant"
+    content: str
+    citations: list[dict]  # [{source, page, text}]
+    created_at: str
+
+
+@dataclass
+class Artifact:
+    id: str
+    type: str  # "conversation_summary", "document_summary", "podcast", "quiz"
+    title: str
+    content: str
+    audio_path: str | None
+    created_at: str
+
+
+@dataclass
+class Notebook:
+    id: str
+    title: str
+    created_at: str
+    sources: list[Source] = field(default_factory=list)
+    messages: list[Message] = field(default_factory=list)
+    artifacts: list[Artifact] = field(default_factory=list)
+
+
+@dataclass
+class UserData:
+    user_id: str
+    user_name: str
+    notebooks: dict[str, Notebook] = field(default_factory=dict)
+    active_notebook_id: str | None = None
+
+
+def create_default_user_data(user_id: str, user_name: str) -> UserData:
+    nb_id = str(uuid.uuid4())
+    default_nb = Notebook(
+        id=nb_id,
+        title="My First Notebook",
+        created_at=datetime.now().isoformat(),
+    )
+    return UserData(
+        user_id=user_id,
+        user_name=user_name,
+        notebooks={nb_id: default_nb},
+        active_notebook_id=nb_id,
+    )
+
+
+def get_active_notebook(state: UserData) -> Notebook | None:
+    if state and state.active_notebook_id and state.active_notebook_id in state.notebooks:
+        return state.notebooks[state.active_notebook_id]
+    return None
+
+
+def create_notebook(state: UserData, title: str) -> UserData:
+    nb_id = str(uuid.uuid4())
+    state.notebooks[nb_id] = Notebook(
+        id=nb_id,
+        title=title,
+        created_at=datetime.now().isoformat(),
+    )
+    state.active_notebook_id = nb_id
+    return state
+
+
+def delete_notebook(state: UserData, nb_id: str) -> UserData:
+    if nb_id in state.notebooks:
+        del state.notebooks[nb_id]
+        remaining = list(state.notebooks.keys())
+        state.active_notebook_id = remaining[0] if remaining else None
+    return state
+
+
+def rename_notebook(state: UserData, nb_id: str, new_title: str) -> UserData:
+    if nb_id in state.notebooks:
+        state.notebooks[nb_id].title = new_title
+    return state
+
+
+def get_notebook_choices(state: UserData) -> list[tuple[str, str]]:
+    """Return list of (display_label, notebook_id) for gr.Radio."""
+    choices = []
+    for nb_id, nb in state.notebooks.items():
+        src_count = len(nb.sources)
+        msg_count = len(nb.messages)
+        label = nb.title
+        if src_count > 0 or msg_count > 0:
+            label += f"  ({src_count}s, {msg_count}m)"
+        choices.append((label, nb_id))
+    return choices
+
+
+def get_all_artifacts(notebook: Notebook, artifact_type: str) -> list[Artifact]:
+    return [a for a in reversed(notebook.artifacts) if a.type == artifact_type]
+
+
+def get_latest_artifact(notebook: Notebook, artifact_type: str) -> Artifact | None:
+    for artifact in reversed(notebook.artifacts):
+        if artifact.type == artifact_type:
+            return artifact
+    return None

theme.py

@@ -0,0 +1,333 @@
+"""Dark theme, custom CSS, and logo SVGs for the NotebookLM Gradio app."""
+
+import base64
+import gradio as gr
+
+# ── Logo SVGs ────────────────────────────────────────────────────────────────
+
+LOGO_SVG = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 60">
+  <defs>
+    <linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="100%" style="stop-color:#764ba2"/>
+    </linearGradient>
+    <linearGradient id="lg2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#a78bfa"/>
+      <stop offset="100%" style="stop-color:#667eea"/>
+    </linearGradient>
+    <linearGradient id="sp" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#fbbf24"/>
+      <stop offset="100%" style="stop-color:#f59e0b"/>
+    </linearGradient>
+  </defs>
+  <g transform="translate(4,6)">
+    <rect x="2" y="4" width="36" height="44" rx="4" fill="url(#lg1)"/>
+    <rect x="2" y="4" width="8" height="44" rx="3" fill="url(#lg2)" opacity="0.7"/>
+    <line x1="16" y1="16" x2="32" y2="16" stroke="rgba(255,255,255,0.5)" stroke-width="1.8" stroke-linecap="round"/>
+    <line x1="16" y1="23" x2="30" y2="23" stroke="rgba(255,255,255,0.4)" stroke-width="1.8" stroke-linecap="round"/>
+    <line x1="16" y1="30" x2="32" y2="30" stroke="rgba(255,255,255,0.5)" stroke-width="1.8" stroke-linecap="round"/>
+    <line x1="16" y1="37" x2="28" y2="37" stroke="rgba(255,255,255,0.4)" stroke-width="1.8" stroke-linecap="round"/>
+    <g transform="translate(32,2)">
+      <path d="M6 0 L7.5 4.5 L12 6 L7.5 7.5 L6 12 L4.5 7.5 L0 6 L4.5 4.5 Z" fill="url(#sp)"/>
+      <path d="M14 8 L14.8 10.2 L17 11 L14.8 11.8 L14 14 L13.2 11.8 L11 11 L13.2 10.2 Z" fill="#fbbf24" opacity="0.7"/>
+    </g>
+  </g>
+  <text x="56" y="28" font-family="Inter,-apple-system,sans-serif" font-size="22" font-weight="700">
+    <tspan fill="url(#lg1)">Notebook</tspan><tspan fill="#a78bfa" font-weight="800">LM</tspan>
+  </text>
+  <text x="57" y="46" font-family="Inter,-apple-system,sans-serif" font-size="10.5" fill="#8888aa" font-weight="400" letter-spacing="0.8">
+    AI-Powered Study Companion
+  </text>
+</svg>"""
+
+LOGO_ICON_SVG = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 60">
+  <defs>
+    <linearGradient id="ig1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="100%" style="stop-color:#764ba2"/>
+    </linearGradient>
+    <linearGradient id="ig2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#a78bfa"/>
+      <stop offset="100%" style="stop-color:#667eea"/>
+    </linearGradient>
+    <linearGradient id="isp" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#fbbf24"/>
+      <stop offset="100%" style="stop-color:#f59e0b"/>
+    </linearGradient>
+  </defs>
+  <g transform="translate(2,4)">
+    <rect x="2" y="4" width="36" height="44" rx="5" fill="url(#ig1)"/>
+    <rect x="2" y="4" width="9" height="44" rx="4" fill="url(#ig2)" opacity="0.7"/>
+    <line x1="16" y1="16" x2="32" y2="16" stroke="rgba(255,255,255,0.55)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="16" y1="23" x2="30" y2="23" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="16" y1="30" x2="32" y2="30" stroke="rgba(255,255,255,0.55)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="16" y1="37" x2="28" y2="37" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-linecap="round"/>
+    <g transform="translate(30,0)">
+      <path d="M7 0 L8.8 5.3 L14 7 L8.8 8.8 L7 14 L5.2 8.8 L0 7 L5.2 5.3 Z" fill="url(#isp)"/>
+      <path d="M16 9 L17 11.5 L19.5 12.5 L17 13.5 L16 16 L15 13.5 L12.5 12.5 L15 11.5 Z" fill="#fbbf24" opacity="0.7"/>
+    </g>
+  </g>
+</svg>"""
+
+
+def get_logo_b64(svg_str: str) -> str:
+    return base64.b64encode(svg_str.encode()).decode()
+
+
+LOGO_B64 = get_logo_b64(LOGO_SVG)
+ICON_B64 = get_logo_b64(LOGO_ICON_SVG)
+
+# ── Gradio Dark Theme ────────────────────────────────────────────────────────
+
+dark_theme = gr.themes.Base(
+    primary_hue=gr.themes.colors.indigo,
+    secondary_hue=gr.themes.colors.purple,
+    neutral_hue=gr.themes.colors.slate,
+    font=gr.themes.GoogleFont("Inter"),
+).set(
+    body_background_fill="#0e1117",
+    body_background_fill_dark="#0e1117",
+    block_background_fill="rgba(255,255,255,0.02)",
+    block_background_fill_dark="rgba(255,255,255,0.02)",
+    block_border_color="rgba(255,255,255,0.08)",
+    block_border_color_dark="rgba(255,255,255,0.08)",
+    block_label_text_color="#a0a0b8",
+    block_label_text_color_dark="#a0a0b8",
+    block_title_text_color="#e0e0f0",
+    block_title_text_color_dark="#e0e0f0",
+    body_text_color="#c8c8d8",
+    body_text_color_dark="#c8c8d8",
+    button_primary_background_fill="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    button_primary_background_fill_dark="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    button_primary_text_color="white",
+    button_primary_text_color_dark="white",
+    button_secondary_background_fill="rgba(255,255,255,0.04)",
+    button_secondary_background_fill_dark="rgba(255,255,255,0.04)",
+    button_secondary_border_color="rgba(255,255,255,0.12)",
+    button_secondary_border_color_dark="rgba(255,255,255,0.12)",
+    button_secondary_text_color="#d0d0e0",
+    button_secondary_text_color_dark="#d0d0e0",
+    border_color_primary="rgba(255,255,255,0.08)",
+    border_color_primary_dark="rgba(255,255,255,0.08)",
+    input_background_fill="rgba(255,255,255,0.03)",
+    input_background_fill_dark="rgba(255,255,255,0.03)",
+    input_border_color="rgba(255,255,255,0.1)",
+    input_border_color_dark="rgba(255,255,255,0.1)",
+    shadow_drop="none",
+    shadow_drop_lg="none",
+    shadow_spread="none",
+)
+
+# ── Custom CSS ───────────────────────────────────────────────────────────────
+
+CUSTOM_CSS = """
+/* ── Import Google Font ── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+/* ── Sidebar ── */
+#sidebar {
+    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
+    border-right: 1px solid rgba(255,255,255,0.06);
+    padding: 16px !important;
+    min-height: 100vh;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+    max-height: 100vh;
+    overflow-y: auto;
+    border-radius: 0 !important;
+}
+#sidebar .gr-button-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 10px !important;
+}
+#sidebar .gr-button-secondary {
+    background: rgba(255,255,255,0.05) !important;
+    border: 1px solid rgba(255,255,255,0.1) !important;
+    border-radius: 10px !important;
+    color: #d0d0e0 !important;
+}
+
+/* ── Notebook selector radio ── */
+#notebook-selector label {
+    border-radius: 10px !important;
+    padding: 8px 14px !important;
+    transition: all 0.2s ease !important;
+    font-size: 0.85rem !important;
+}
+#notebook-selector label.selected {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+}
+
+/* ── Tab styling ── */
+.tabs > .tab-nav > button {
+    border-radius: 10px !important;
+    padding: 10px 24px !important;
+    font-weight: 500 !important;
+    font-size: 0.9rem !important;
+}
+.tabs > .tab-nav > button.selected {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+}
+
+/* ── Chat ── */
+#chatbot {
+    border-radius: 14px !important;
+    border: 1px solid rgba(255,255,255,0.08) !important;
+}
+#chatbot .message {
+    border-radius: 14px !important;
+    padding: 14px 18px !important;
+}
+
+/* ── Cards ── */
+.source-card {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px 20px;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 14px;
+    margin-bottom: 10px;
+    transition: all 0.2s ease;
+}
+.source-card:hover {
+    border-color: rgba(102,126,234,0.3);
+    background: rgba(255,255,255,0.04);
+}
+.source-icon {
+    width: 48px; height: 48px; border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1.5rem; flex-shrink: 0;
+}
+.source-icon.pdf { background: rgba(239,68,68,0.15); }
+.source-icon.pptx { background: rgba(249,115,22,0.15); }
+.source-icon.txt { background: rgba(59,130,246,0.15); }
+.source-icon.url { background: rgba(34,197,94,0.15); }
+.source-icon.youtube { background: rgba(239,68,68,0.15); }
+.source-info { flex: 1; min-width: 0; }
+.source-info .name {
+    font-weight: 600; font-size: 0.95rem; color: #e0e0f0;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.source-info .meta { font-size: 0.8rem; color: #707088; margin-top: 2px; }
+.source-badge {
+    padding: 4px 12px; border-radius: 20px; font-size: 0.75rem;
+    font-weight: 600; letter-spacing: 0.3px;
+}
+.source-badge.ready { background: rgba(34,197,94,0.15); color: #22c55e; }
+
+/* ── Welcome hero ── */
+.welcome-hero {
+    text-align: center; padding: 80px 40px;
+    background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%);
+    border-radius: 20px; border: 1px solid rgba(102,126,234,0.15); margin: 20px 0;
+}
+.welcome-hero h1 {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    font-size: 2.5rem; font-weight: 700; margin-bottom: 12px;
+}
+.welcome-hero p { color: #9090a8; font-size: 1.1rem; line-height: 1.6; }
+
+/* ─��� Empty state ── */
+.empty-state {
+    text-align: center; padding: 60px 30px; color: #707088;
+}
+.empty-state h3 { color: #a0a0b8; margin-bottom: 8px; font-weight: 600; }
+.empty-state p { font-size: 0.95rem; line-height: 1.5; }
+
+/* ── Notebook header ── */
+.notebook-header {
+    padding: 0 0 16px 0; margin-bottom: 16px;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+.notebook-header h2 {
+    font-weight: 700; font-size: 1.5rem; margin: 0; color: #e8e8f8;
+}
+.notebook-header .meta { font-size: 0.85rem; color: #707088; margin-top: 4px; }
+
+/* ── Citation chip ── */
+.citation-chip {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 14px; background: rgba(102,126,234,0.1);
+    border: 1px solid rgba(102,126,234,0.2); border-radius: 20px;
+    font-size: 0.8rem; color: #a0b0f0; margin: 3px 4px;
+}
+
+/* ── Artifact section header ── */
+.artifact-section-header {
+    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
+}
+.artifact-section-icon {
+    width: 36px; height: 36px; border-radius: 10px;
+    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
+}
+
+/* ── Locked state ── */
+.locked-state {
+    text-align: center; padding: 50px 30px;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 16px;
+}
+
+/* ── File uploader ── */
+.gr-file-upload {
+    border-radius: 14px !important;
+    border: 2px dashed rgba(102,126,234,0.3) !important;
+    background: rgba(102,126,234,0.03) !important;
+}
+
+/* ── Primary button ── */
+.gr-button-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important; border-radius: 10px !important;
+    font-weight: 600 !important;
+}
+.gr-button-primary:hover {
+    opacity: 0.9 !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 15px rgba(102,126,234,0.3) !important;
+}
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
+
+/* ── Hide Gradio footer ── */
+footer { display: none !important; }
+
+/* ── Auth gate ── */
+#auth-gate { max-width: 500px; margin: 100px auto; }
+"""
+
+# ── Reusable HTML Templates ──────────────────────────────────────────────────
+
+WELCOME_HTML = f"""
+<div class="welcome-hero">
+    <img src="data:image/svg+xml;base64,{ICON_B64}" style="width:64px; margin-bottom:16px;" />
+    <h1>NotebookLM</h1>
+    <p>Your AI-powered study companion.<br>
+    Sign in with your Hugging Face account to get started.</p>
+</div>
+"""
+
+NO_NOTEBOOKS_HTML = """
+<div class="welcome-hero">
+    <h1>NotebookLM</h1>
+    <p>Create a notebook from the sidebar to get started.</p>
+</div>
+"""
+
+SIDEBAR_LOGO_HTML = f"""
+<div style="padding: 8px 0 4px 0;">
+    <img src="data:image/svg+xml;base64,{LOGO_B64}" style="width:100%; max-width:240px;" />
+</div>
+"""

ui/chat_page.py

@@ -1,165 +0,0 @@
-import streamlit as st
-import uuid
-from datetime import datetime
-import random
-import time
-
-
-# ── Mock responses ───────────────────────────────────────────────────────────
-MOCK_RESPONSES = [
-    {
-        "content": (
-            "Based on the uploaded sources, the key concept revolves around "
-            "the relationship between the variables discussed in Chapter 3. "
-            "The author emphasizes that understanding this foundation is critical "
-            "before moving to advanced topics."
-        ),
-        "citations": [
-            {"source": "lecture_notes.pdf", "page": 3, "text": "the relationship between variables..."},
-            {"source": "textbook_ch3.pdf", "page": 42, "text": "understanding this foundation..."},
-        ],
-    },
-    {
-        "content": (
-            "The sources indicate three main approaches to this problem:\n\n"
-            "1. **Direct method** — Apply the formula from Section 2.1\n"
-            "2. **Iterative approach** — Build up from base cases\n"
-            "3. **Approximation** — Use the simplified model when precision isn't critical\n\n"
-            "The textbook recommends starting with the direct method for beginners."
-        ),
-        "citations": [
-            {"source": "textbook_ch2.pdf", "page": 15, "text": "direct method... apply the formula"},
-        ],
-    },
-    {
-        "content": (
-            "I couldn't find specific information about that topic in your "
-            "uploaded sources. Try uploading additional materials that cover this "
-            "subject, or rephrase your question to relate more closely to the "
-            "content in your current sources."
-        ),
-        "citations": [],
-    },
-    {
-        "content": (
-            "Great question! According to the lecture slides, this concept "
-            "was introduced in Week 5. The key takeaway is that the process involves "
-            "three stages: **initialization**, **processing**, and **validation**. "
-            "Each stage has specific requirements that must be met before proceeding."
-        ),
-        "citations": [
-            {"source": "week5_slides.pptx", "page": 8, "text": "three stages: initialization..."},
-            {"source": "week5_slides.pptx", "page": 12, "text": "specific requirements..."},
-        ],
-    },
-]
-
-
-def get_mock_response(query: str) -> dict:
-    """Simulate a RAG response. Will be replaced with actual RAG pipeline."""
-    time.sleep(1.2)
-    return random.choice(MOCK_RESPONSES)
-
-
-def render_chat(notebook: dict):
-    """Render the chat interface."""
-
-    source_count = len(notebook["sources"])
-
-    # ── No sources warning ──
-    if source_count == 0:
-        st.markdown(
-            """
-            <div style="
-                padding: 14px 20px;
-                background: rgba(234,179,8,0.08);
-                border: 1px solid rgba(234,179,8,0.2);
-                border-radius: 12px;
-                color: #d4a017;
-                font-size: 0.9rem;
-                margin-bottom: 16px;
-            ">
-                Upload sources in the <strong>Sources</strong> tab to start chatting with your documents.
-            </div>
-            """,
-            unsafe_allow_html=True,
-        )
-
-    # ── Chat history ──
-    chat_container = st.container(height=480)
-
-    with chat_container:
-        if not notebook["messages"]:
-            st.markdown(
-                """
-                <div class="empty-state" style="padding: 80px 20px;">
-                    <div style="font-size: 3rem; margin-bottom: 16px;">💬</div>
-                    <h3>Start a conversation</h3>
-                    <p>Ask questions about your uploaded sources.<br>
-                    The AI will answer using only your documents<br>
-                    and provide citations for every claim.</p>
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )
-        else:
-            for msg in notebook["messages"]:
-                avatar = "🧑" if msg["role"] == "user" else "🤖"
-                with st.chat_message(msg["role"], avatar=avatar):
-                    st.markdown(msg["content"])
-
-                    # Citations
-                    if msg["role"] == "assistant" and msg.get("citations"):
-                        citations_html = ""
-                        for cite in msg["citations"]:
-                            citations_html += (
-                                f'<span class="citation-chip">'
-                                f'📄 {cite["source"]} &middot; p.{cite["page"]}'
-                                f'</span>'
-                            )
-                        st.markdown(
-                            f'<div style="margin-top: 10px;">{citations_html}</div>',
-                            unsafe_allow_html=True,
-                        )
-                        # Expandable full citation text
-                        with st.expander("View cited passages"):
-                            for cite in msg["citations"]:
-                                st.markdown(
-                                    f'> *"{cite["text"]}"*\n>\n'
-                                    f'> — **{cite["source"]}**, page {cite["page"]}'
-                                )
-
-    # ── Chat input ──
-    if prompt := st.chat_input(
-        "Ask a question about your sources...",
-        key=f"chat_input_{notebook['id']}",
-    ):
-        user_msg = {
-            "id": str(uuid.uuid4()),
-            "role": "user",
-            "content": prompt,
-            "citations": [],
-            "created_at": datetime.now().isoformat(),
-        }
-        notebook["messages"].append(user_msg)
-
-        with st.spinner("Thinking..."):
-            response = get_mock_response(prompt)
-
-        assistant_msg = {
-            "id": str(uuid.uuid4()),
-            "role": "assistant",
-            "content": response["content"],
-            "citations": response["citations"],
-            "created_at": datetime.now().isoformat(),
-        }
-        notebook["messages"].append(assistant_msg)
-        st.rerun()
-
-    # ── Controls ──
-    if notebook["messages"]:
-        cols = st.columns([5, 1])
-        with cols[1]:
-            if st.button("Clear chat", use_container_width=True):
-                notebook["messages"] = []
-                st.rerun()

ui/upload_page.py

@@ -1,199 +0,0 @@
-import streamlit as st
-import uuid
-from datetime import datetime
-
-
-ALLOWED_TYPES = ["pdf", "pptx", "txt"]
-MAX_FILE_SIZE_MB = 15
-MAX_SOURCES_PER_NOTEBOOK = 20
-
-FILE_TYPE_CONFIG = {
-    "pdf": {"icon": "📕", "color": "239,68,68", "label": "PDF"},
-    "pptx": {"icon": "📊", "color": "249,115,22", "label": "PPTX"},
-    "txt": {"icon": "📝", "color": "59,130,246", "label": "TXT"},
-    "url": {"icon": "🌐", "color": "34,197,94", "label": "URL"},
-    "youtube": {"icon": "🎬", "color": "239,68,68", "label": "YouTube"},
-}
-
-
-def render_sources(notebook: dict):
-    """Render source upload and management."""
-
-    total = len(notebook["sources"])
-    remaining = MAX_SOURCES_PER_NOTEBOOK - total
-
-    # ── Header with count ──
-    st.markdown(
-        f"""
-        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;">
-            <div>
-                <span style="font-size:1.1rem; font-weight:600; color:#e0e0f0;">Sources</span>
-                <span style="
-                    margin-left: 10px;
-                    padding: 3px 10px;
-                    background: rgba(102,126,234,0.15);
-                    color: #8090d0;
-                    border-radius: 12px;
-                    font-size: 0.8rem;
-                    font-weight: 600;
-                ">{total} / {MAX_SOURCES_PER_NOTEBOOK}</span>
-            </div>
-            <span style="font-size:0.8rem; color:#606078;">{remaining} slots remaining</span>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
-
-    # ── Upload section ──
-    col_upload, col_url = st.columns([1, 1], gap="large")
-
-    with col_upload:
-        st.markdown(
-            '<p style="font-weight:600; font-size:0.9rem; color:#b0b0c8; margin-bottom:8px;">'
-            "Upload Files</p>",
-            unsafe_allow_html=True,
-        )
-        uploaded_files = st.file_uploader(
-            "Drop files here",
-            type=ALLOWED_TYPES,
-            accept_multiple_files=True,
-            help=f"PDF, PPTX, TXT — max {MAX_FILE_SIZE_MB}MB each",
-            key=f"uploader_{notebook['id']}",
-            label_visibility="collapsed",
-        )
-
-        if uploaded_files:
-            for f in uploaded_files:
-                existing_names = [s["filename"] for s in notebook["sources"]]
-                if f.name in existing_names:
-                    continue
-                if len(notebook["sources"]) >= MAX_SOURCES_PER_NOTEBOOK:
-                    st.error(f"Limit of {MAX_SOURCES_PER_NOTEBOOK} sources reached.")
-                    break
-
-                file_size_mb = f.size / (1024 * 1024)
-                if file_size_mb > MAX_FILE_SIZE_MB:
-                    st.error(f"**{f.name}** is too large ({file_size_mb:.1f}MB).")
-                    continue
-
-                source = {
-                    "id": str(uuid.uuid4()),
-                    "filename": f.name,
-                    "file_type": f.name.rsplit(".", 1)[-1].lower(),
-                    "size_mb": round(file_size_mb, 2),
-                    "chunk_count": 0,
-                    "status": "ready",
-                    "error_message": None,
-                    "created_at": datetime.now().isoformat(),
-                }
-                notebook["sources"].append(source)
-                st.toast(f"Added {f.name}", icon="✅")
-
-    with col_url:
-        st.markdown(
-            '<p style="font-weight:600; font-size:0.9rem; color:#b0b0c8; margin-bottom:8px;">'
-            "Add Web Source</p>",
-            unsafe_allow_html=True,
-        )
-        url_input = st.text_input(
-            "URL",
-            placeholder="https://example.com  or  YouTube link",
-            label_visibility="collapsed",
-            key=f"url_input_{notebook['id']}",
-        )
-        if st.button("Add URL", use_container_width=True, type="primary"):
-            if not url_input.strip():
-                st.warning("Enter a URL.")
-            elif len(notebook["sources"]) >= MAX_SOURCES_PER_NOTEBOOK:
-                st.error(f"Limit of {MAX_SOURCES_PER_NOTEBOOK} sources reached.")
-            else:
-                url = url_input.strip()
-                existing_urls = [s.get("source_url") for s in notebook["sources"]]
-                if url in existing_urls:
-                    st.warning("Already added.")
-                else:
-                    is_youtube = "youtube.com" in url or "youtu.be" in url
-                    file_type = "youtube" if is_youtube else "url"
-                    display_name = url[:55] + "..." if len(url) > 55 else url
-
-                    source = {
-                        "id": str(uuid.uuid4()),
-                        "filename": display_name,
-                        "file_type": file_type,
-                        "size_mb": None,
-                        "source_url": url,
-                        "chunk_count": 0,
-                        "status": "ready",
-                        "error_message": None,
-                        "created_at": datetime.now().isoformat(),
-                    }
-                    notebook["sources"].append(source)
-                    st.toast(f"Added {file_type} source", icon="✅")
-                    st.rerun()
-
-    # ── Source list ──
-    st.divider()
-
-    if not notebook["sources"]:
-        st.markdown(
-            """
-            <div style="
-                text-align: center; padding: 50px 20px;
-                color: #606078;
-            ">
-                <div style="font-size: 3rem; margin-bottom: 16px;">📄</div>
-                <h3 style="color: #a0a0b8; font-weight: 600;">No sources yet</h3>
-                <p style="font-size: 0.9rem;">Upload documents or add web links above.<br>
-                Your sources power the AI chat and artifact generation.</p>
-            </div>
-            """,
-            unsafe_allow_html=True,
-        )
-        return
-
-    st.markdown(
-        f'<p style="font-weight:600; font-size:0.9rem; color:#a0a0b8; margin-bottom:12px;">'
-        f'Your Sources ({len(notebook["sources"])})</p>',
-        unsafe_allow_html=True,
-    )
-
-    for i, source in enumerate(notebook["sources"]):
-        ft = source["file_type"]
-        cfg = FILE_TYPE_CONFIG.get(ft, {"icon": "📄", "color": "150,150,170", "label": ft.upper()})
-
-        meta_parts = [cfg["label"]]
-        if source.get("size_mb"):
-            meta_parts.append(f"{source['size_mb']} MB")
-        if source["chunk_count"] > 0:
-            meta_parts.append(f"{source['chunk_count']} chunks")
-        meta_str = " · ".join(meta_parts)
-
-        status = source["status"]
-
-        with st.container(border=True):
-            col_icon, col_info, col_status, col_del = st.columns([0.5, 4, 1.2, 0.8])
-
-            with col_icon:
-                st.markdown(
-                    f'<div style="font-size:1.8rem; text-align:center; padding-top:4px;">'
-                    f'{cfg["icon"]}</div>',
-                    unsafe_allow_html=True,
-                )
-
-            with col_info:
-                st.markdown(f"**{source['filename']}**")
-                st.caption(meta_str)
-
-            with col_status:
-                if status == "ready":
-                    st.success("Ready")
-                elif status == "processing":
-                    st.warning("Processing")
-                elif status == "failed":
-                    st.error("Failed")
-
-            with col_del:
-                st.markdown('<div style="padding-top:8px;"></div>', unsafe_allow_html=True)
-                if st.button("X", key=f"rm_{source['id']}", help="Remove source"):
-                    notebook["sources"].pop(i)
-                    st.rerun()