Initial website

I want to build a website, "Ask Paul Graham". I will be hosting huggingface spaces or github pages if or heroku (whichever is easier / cheaper). There should be a text box for "Ask Paul Graham about: ... " it sends the prompt "Write a Paul Graham essay about X" to some LLM, and streams the response interactively below it. style it a bit like Paul Graham's website (v minimal). Every prompt response should be saved in a database (supabase?) or pushed to github. If a prompt already exists, fetch from saved things. Also have a bulleted list of all existing saved things, either ordered by time submitted or ordered by # views (update database or w/e on this) or ordered by alphabetical. Default order of recency. prompts are limited to 70 characters, backend should truncate after 70 characters and textbox should prevent extra typing. How would you design this?

https://g.co/gemini/share/ea8f6e1cc364

Dockerfile

@@ -1,13 +1,42 @@
-FROM python:3.12
+# Use an official Python runtime as a parent image
+FROM python:3.9-slim
 
+# Set the working directory in the container
 WORKDIR /code
 
+# Copy the requirements file into the container at /code
 COPY ./requirements.txt /code/requirements.txt
 
-RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+# Install any needed packages specified in requirements.txt
+# --no-cache-dir: Disables the cache to keep image size down
+# --upgrade pip: Ensures pip is up-to-date
+# -r requirements.txt: Installs packages from the requirements file
+RUN pip install --no-cache-dir --upgrade pip -r requirements.txt
 
-COPY . .
+# Copy the rest of the application code (the 'app' directory contents)
+# into the container at /code/app
+# Adjust if your Python code is not in an 'app' subfolder
+COPY ./app /code/app
+# If main.py is at the root with static/ and templates/
+# COPY ./main.py /code/main.py
+# COPY ./static /code/static
+# COPY ./templates /code/templates
+# Ensure your paths match your project structure. Assuming main.py is in 'app/'
 
-EXPOSE 7860
+# Make port 8000 available to the world outside this container
+# Hugging Face Spaces expects the app to listen on port 7860 by default,
+# but Docker apps often use 8000. We can map this in Space config if needed,
+# or change the port here and in the CMD. Let's use 8000 for now.
+EXPOSE 8000
 
-CMD ["shiny", "run", "app.py", "--host", "0.0.0.0", "--port", "7860"]
+# Define environment variable (optional, can be set in HF Secrets)
+# ENV NAME World
+
+# Run main.py when the container launches
+# Use uvicorn to run the FastAPI application
+# --host 0.0.0.0: Makes the server accessible externally
+# --port 8000: The port the server will listen on
+# app.main:app: Tells uvicorn where to find the FastAPI app instance
+# (in main.py inside the 'app' directory, the instance named 'app')
+# Adjust 'app.main:app' if your file/instance names are different.
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

main.py

@@ -0,0 +1,350 @@
+import os
+import asyncio
+from fastapi import FastAPI, Request, HTTPException, Form
+from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from supabase import create_client, Client
+
+# Removed httpx import as we'll use the anthropic client directly
+from dotenv import load_dotenv
+import json
+from pydantic import (
+    BaseModel,
+)  # For potential request body validation if not using Forms
+
+# --- Import Anthropic ---
+from anthropic import (
+    AsyncAnthropic,
+    APIError,
+)  # Import Anthropic client and specific errors
+
+# Load environment variables from .env file for local development
+load_dotenv()
+
+# --- Configuration ---
+SUPABASE_URL = os.getenv("SUPABASE_URL")
+SUPABASE_SERVICE_KEY = os.getenv(
+    "SUPABASE_SERVICE_KEY"
+)  # Use service key for backend operations
+# ANTHROPIC_API_KEY is the standard env var, but we use LLM_API_KEY from previous steps
+ANTHROPIC_API_KEY = os.getenv("LLM_API_KEY")
+# LLM_API_ENDPOINT is not needed when using the official client library
+
+# --- Initialize Supabase Client ---
+try:
+    if SUPABASE_URL and SUPABASE_SERVICE_KEY:
+        supabase: Client = create_client(SUPABASE_URL, SUPABASE_SERVICE_KEY)
+    else:
+        print("Warning: Supabase URL or Key not found in environment variables.")
+        supabase = None
+except Exception as e:
+    print(f"Error initializing Supabase client: {e}")
+    supabase = None  # Set to None to indicate failure
+
+# --- Initialize Anthropic Client ---
+try:
+    if ANTHROPIC_API_KEY:
+        # Use the API key from the environment variable LLM_API_KEY
+        anthropic_client = AsyncAnthropic(api_key=ANTHROPIC_API_KEY)
+    else:
+        print("Warning: Anthropic API Key (LLM_API_KEY) not found.")
+        anthropic_client = None
+except Exception as e:
+    print(f"Error initializing Anthropic client: {e}")
+    anthropic_client = None
+
+# --- Initialize FastAPI App ---
+app = FastAPI()
+
+# --- Mount Static Files (CSS, JS) ---
+script_dir = os.path.dirname(__file__)
+static_dir = os.path.join(script_dir, "static")
+if not os.path.exists(static_dir):
+    os.makedirs(static_dir)  # Create static dir if it doesn't exist
+app.mount("/static", StaticFiles(directory=static_dir), name="static")
+
+# --- Configure Templates ---
+templates_dir = os.path.join(script_dir, "templates")
+if not os.path.exists(templates_dir):
+    os.makedirs(templates_dir)  # Create templates dir if it doesn't exist
+templates = Jinja2Templates(directory=templates_dir)
+
+
+# --- Helper Functions ---
+def truncate_prompt(text: str, max_length: int = 70) -> str:
+    """Truncates text to a maximum length."""
+    return text[:max_length]
+
+
+async def get_llm_stream(prompt: str):
+    """
+    Gets streaming response from Anthropic Claude API.
+    Yields text chunks.
+    """
+    if not anthropic_client:
+        print("Anthropic client not initialized.")
+        yield f"data: {json.dumps({'error': 'LLM service not configured.'})}\n\n"
+        return
+
+    full_llm_prompt = f"Write a Paul Graham essay about {prompt}"
+    system_prompt = "You are an AI assistant that writes essays in the style of Paul Graham. Focus on insights about startups, technology, programming, and contrarian thinking. Be concise and clear."
+    # Using Claude 3.5 Sonnet model ID
+    model_name = "claude-3-5-sonnet-20240620"
+    max_tokens_to_sample = 2048  # Adjust as needed
+
+    print(f"Sending to Claude ({model_name}): {full_llm_prompt}")  # For debugging
+
+    try:
+        # Use the Messages streaming API
+        async with anthropic_client.messages.stream(
+            model=model_name,
+            max_tokens=max_tokens_to_sample,
+            system=system_prompt,
+            messages=[{"role": "user", "content": full_llm_prompt}],
+        ) as stream:
+            # Iterate through the stream events asynchronously
+            async for event in stream:
+                # Check for text delta events
+                if (
+                    event.type == "content_block_delta"
+                    and event.delta.type == "text_delta"
+                ):
+                    text_chunk = event.delta.text
+                    # print(f"Received chunk: {text_chunk}") # Debugging
+                    yield text_chunk  # Yield the raw text chunk
+
+    except APIError as e:
+        print(f"Anthropic API Error: {e}")
+        yield f"data: {json.dumps({'error': f'LLM API Error: {e.status_code} - {e.message}'})}\n\n"
+    except Exception as e:
+        print(f"Error calling Anthropic API: {e}")
+        yield f"data: {json.dumps({'error': f'Failed to get response from LLM: {e}'})}\n\n"
+
+
+async def stream_and_save_essay(truncated_prompt: str):
+    """
+    Streams response from LLM, yields chunks for the client (as SSE events),
+    and saves the full response to Supabase upon completion.
+    """
+    full_response = ""
+    error_occurred = False
+    try:
+        async for chunk in get_llm_stream(truncated_prompt):
+            # Check if the chunk indicates an error (yielded by get_llm_stream)
+            if isinstance(chunk, str) and chunk.startswith('data: {"error":'):
+                yield chunk  # Propagate error SSE event to client
+                print(f"LLM Stream Error reported: {chunk}")
+                error_occurred = True
+                # Don't break here, let get_llm_stream finish if it yields more details
+                # Break or return after the loop if error_occurred is True
+                continue  # Skip processing this chunk as text
+
+            # Accumulate response and yield chunk to client
+            full_response += chunk
+            # Format as Server-Sent Event (SSE)
+            yield f"data: {json.dumps({'text': chunk})}\n\n"
+            await asyncio.sleep(0.01)  # Small delay to allow client processing
+
+        # If an error was yielded during the stream, don't save or send 'end'
+        if error_occurred:
+            print("Skipping save due to previous stream error.")
+            return
+
+        # --- Save to Supabase after successful streaming ---
+        if supabase and full_response:
+            try:
+                # Check again before inserting, in case of race condition
+                check_resp = (
+                    supabase.table("essays")
+                    .select("id")
+                    .eq("prompt", truncated_prompt)
+                    .limit(1)
+                    .execute()
+                )
+                if not check_resp.data:
+                    insert_resp = (
+                        supabase.table("essays")
+                        .insert(
+                            {
+                                "prompt": truncated_prompt,
+                                "response": full_response,
+                                "view_count": 1,  # Initial view count
+                            }
+                        )
+                        .execute()
+                    )
+                    print(f"Saved new essay for prompt: {truncated_prompt}")
+                else:
+                    print(
+                        f"Essay for '{truncated_prompt}' already exists (checked before insert). Not saving again."
+                    )
+
+            except Exception as e:
+                # Handle potential unique constraint violation if race condition occurs
+                # The check above makes this less likely, but keep handling just in case.
+                if "duplicate key value violates unique constraint" in str(e):
+                    print(
+                        f"Race condition? Essay for '{truncated_prompt}' already exists."
+                    )
+                else:
+                    print(f"Error saving essay to Supabase: {e}")
+                    # Optionally yield an error message back to client if critical
+                    yield f"data: {json.dumps({'error': 'Failed to save essay.'})}\n\n"
+                    error_occurred = True  # Mark error occurred
+
+        # Signal stream end only if no errors occurred
+        if not error_occurred:
+            yield f"data: {json.dumps({'end': True})}\n\n"
+
+    except Exception as e:
+        print(f"Error during streaming/saving: {e}")
+        # Send error as SSE data event
+        yield f"data: {json.dumps({'error': f'An error occurred: {e}'})}\n\n"
+
+
+# --- API Endpoints ---
+
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    """Serves the main HTML page."""
+    if not os.path.exists(os.path.join(templates_dir, "index.html")):
+        raise HTTPException(status_code=404, detail="index.html not found")
+    return templates.TemplateResponse("index.html", {"request": request})
+
+
+@app.post("/ask")
+async def ask_paul_graham(prompt: str = Form(...)):
+    """
+    Handles prompt submission, checks cache, calls LLM, streams response.
+    Uses Server-Sent Events (SSE).
+    """
+    if not prompt:
+        raise HTTPException(status_code=400, detail="Prompt cannot be empty.")
+    if not supabase:
+        # Return SSE error if DB is down
+        async def db_error_stream():
+            yield f"data: {json.dumps({'error': 'Database connection not available.'})}\n\n"
+
+        return StreamingResponse(
+            db_error_stream(), media_type="text/event-stream", status_code=503
+        )
+    if not anthropic_client:
+        # Return SSE error if LLM client isn't configured
+        async def llm_error_stream():
+            yield f"data: {json.dumps({'error': 'LLM service not configured.'})}\n\n"
+
+        return StreamingResponse(
+            llm_error_stream(), media_type="text/event-stream", status_code=503
+        )
+
+    truncated = truncate_prompt(prompt)
+
+    try:
+        # Check if essay already exists
+        response = (
+            supabase.table("essays")
+            .select("response, view_count")
+            .eq("prompt", truncated)
+            .limit(1)
+            .execute()
+        )
+        existing_essay = response.data
+
+        if existing_essay:
+            print(f"Cache hit for prompt: {truncated}")
+            essay_data = existing_essay[0]
+            saved_response = essay_data["response"]
+            current_views = essay_data["view_count"]
+
+            # Increment view count
+            try:
+                supabase.table("essays").update({"view_count": current_views + 1}).eq(
+                    "prompt", truncated
+                ).execute()
+            except Exception as e:
+                print(f"Error updating view count: {e}")  # Log error but continue
+
+            # Stream the cached response word by word (or chunk by chunk) as SSE
+            async def stream_cached():
+                # Split into smaller chunks for smoother streaming simulation
+                chunk_size = 20  # Number of characters per chunk
+                for i in range(0, len(saved_response), chunk_size):
+                    chunk = saved_response[i : i + chunk_size]
+                    yield f"data: {json.dumps({'text': chunk})}\n\n"
+                    await asyncio.sleep(0.01)  # Simulate streaming delay
+                yield f"data: {json.dumps({'end': True})}\n\n"  # Signal end
+
+            return StreamingResponse(stream_cached(), media_type="text/event-stream")
+
+        else:
+            print(f"Cache miss for prompt: {truncated}. Calling LLM.")
+            # Stream from LLM and save upon completion
+            return StreamingResponse(
+                stream_and_save_essay(truncated), media_type="text/event-stream"
+            )
+
+    except Exception as e:
+        print(f"Error in /ask endpoint: {e}")
+
+        # Return error as SSE event
+        async def error_stream():
+            yield f"data: {json.dumps({'error': f'Server error: {e}'})}\n\n"
+
+        return StreamingResponse(
+            error_stream(), media_type="text/event-stream", status_code=500
+        )
+
+
+@app.get("/essays", response_class=JSONResponse)
+async def get_essays(sort_by: str = "time", order: str = "desc"):
+    """Fetches the list of saved essay prompts based on sorting preferences."""
+    if not supabase:
+        return JSONResponse(
+            content={"error": "Database connection not available."}, status_code=503
+        )
+
+    valid_sort_by = {"time": "created_at", "views": "view_count", "alpha": "prompt"}
+    valid_order = {"asc": True, "desc": False}
+
+    sort_column = valid_sort_by.get(sort_by, "created_at")
+    ascending = valid_order.get(order, False)
+
+    try:
+        response = (
+            supabase.table("essays")
+            .select("prompt, created_at, view_count")
+            .order(sort_column, ascending=ascending)
+            .execute()
+        )
+
+        # Convert Timestamps to ISO format strings for JSON serialization
+        essays_data = []
+        if response.data:
+            for row in response.data:
+                row["created_at"] = (
+                    row["created_at"].isoformat() if row.get("created_at") else None
+                )
+                essays_data.append(row)
+            return JSONResponse(content=essays_data)
+        else:
+            return JSONResponse(content=[])  # Return empty list if no essays
+
+    except Exception as e:
+        print(f"Error fetching essays: {e}")
+        return JSONResponse(
+            content={"error": f"Failed to fetch essays: {e}"}, status_code=500
+        )
+
+
+# --- Optional: Add simple health check ---
+@app.get("/health")
+async def health_check():
+    db_status = "ok" if supabase else "unavailable"
+    llm_status = "ok" if anthropic_client else "unavailable"
+    return {"status": "ok", "database": db_status, "llm_service": llm_status}
+
+
+# Note: For Hugging Face Spaces deployment using Dockerfile,
+# the CMD instruction will run uvicorn. No need for __main__ block.

requirements.txt

@@ -1,6 +1,8 @@
-faicons
-shiny
-shinywidgets
-plotly
-pandas
-ridgeplot
+fastapi>=0.100.0
+uvicorn[standard]>=0.20.0
+supabase>=1.0.0,<2.0.0
+# httpx is usually installed as a dependency of fastapi or supabase, but good to have explicitly if needed elsewhere
+httpx>=0.24.0
+python-dotenv>=1.0.0
+jinja2>=3.0.0 # For templating
+anthropic>=0.20.0 # Added Anthropic client library

static/script.js

@@ -0,0 +1,188 @@
+// static/script.js
+
+document.addEventListener('DOMContentLoaded', () => {
+    const promptForm = document.getElementById('prompt-form');
+    const promptInput = document.getElementById('prompt-input');
+    const submitButton = document.getElementById('submit-button');
+    const responseOutput = document.getElementById('response-output');
+    const loadingIndicator = document.getElementById('loading-indicator');
+    const errorMessage = document.getElementById('error-message');
+    const essaysList = document.getElementById('essays-list');
+    const sortButtons = document.querySelectorAll('.sort-button');
+    const charCount = document.getElementById('char-count');
+
+    let currentSort = { field: 'time', order: 'desc' }; // Default sort
+    let eventSource = null; // To hold the EventSource connection
+
+    // --- Character Counter ---
+    promptInput.addEventListener('input', () => {
+        const count = promptInput.value.length;
+        charCount.textContent = `${count} / 70 characters`;
+    });
+
+    // --- Fetch and Render Essays ---
+    async function fetchEssays(sortBy = 'time', order = 'desc') {
+        essaysList.innerHTML = '<li class="text-gray-400">Loading essays...</li>'; // Show loading state
+        try {
+            const response = await fetch(`/essays?sort_by=${sortBy}&order=${order}`);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const essays = await response.json();
+
+            essaysList.innerHTML = ''; // Clear list
+
+            if (essays.length === 0) {
+                essaysList.innerHTML = '<li class="text-gray-500">No essays found yet.</li>';
+            } else {
+                essays.forEach(essay => {
+                    const li = document.createElement('li');
+                    // Simple display: just the prompt text
+                    li.textContent = essay.prompt;
+                    // Optional: Add view count or date
+                    // li.textContent += ` (Views: ${essay.view_count}, Created: ${new Date(essay.created_at).toLocaleDateString()})`;
+                    essaysList.appendChild(li);
+                });
+            }
+        } catch (error) {
+            console.error('Error fetching essays:', error);
+            essaysList.innerHTML = '<li class="text-red-500">Failed to load essays.</li>';
+        }
+    }
+
+    // --- Handle Form Submission ---
+    promptForm.addEventListener('submit', async (event) => {
+        event.preventDefault(); // Prevent default form submission
+        const prompt = promptInput.value.trim();
+
+        if (!prompt) return; // Do nothing if prompt is empty
+
+        // Close any existing EventSource connection
+        if (eventSource) {
+            eventSource.close();
+        }
+
+        // UI updates: disable input/button, show loading, clear previous results
+        promptInput.disabled = true;
+        submitButton.disabled = true;
+        submitButton.textContent = 'Generating...';
+        loadingIndicator.classList.remove('hidden');
+        responseOutput.innerHTML = ''; // Clear previous output
+        errorMessage.classList.add('hidden'); // Hide previous errors
+
+        try {
+            // Use EventSource for Server-Sent Events
+            eventSource = new EventSource(`/ask?prompt=${encodeURIComponent(prompt)}`, { method: 'POST' }); // NOTE: EventSource uses GET by default, FastAPI route needs POST. This is tricky.
+            // Standard fetch is better suited for POST + Streaming body response. Let's refactor to use fetch.
+
+            const response = await fetch('/ask', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded', // FastAPI Form expects this
+                },
+                body: `prompt=${encodeURIComponent(prompt)}`
+            });
+
+            if (!response.ok) {
+                // Try to read error message from backend if available
+                let errorData = { message: `HTTP error! status: ${response.status}` };
+                try {
+                    errorData = await response.json();
+                } catch (e) { /* Ignore if response is not JSON */ }
+                throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+            }
+
+            // Check if response is event-stream (SSE)
+            if (response.headers.get('content-type')?.includes('text/event-stream')) {
+                // Handle SSE stream with fetch
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                reader.read().then(function processText({ done, value }) {
+                    if (done) {
+                        console.log("Stream complete");
+                        // Re-fetch essays list to include the new one (if generated)
+                        fetchEssays(currentSort.field, currentSort.order);
+                        return;
+                    }
+
+                    const chunk = decoder.decode(value, { stream: true });
+                    // Process potential multiple events in a single chunk
+                    const lines = chunk.split('\n');
+                    lines.forEach(line => {
+                        if (line.startsWith('data:')) {
+                            try {
+                                const data = JSON.parse(line.substring(5).trim());
+                                if (data.text) {
+                                    responseOutput.innerHTML += data.text; // Append text chunk
+                                } else if (data.error) {
+                                    console.error("SSE Error:", data.error);
+                                    errorMessage.textContent = `Error: ${data.error}`;
+                                    errorMessage.classList.remove('hidden');
+                                    // Optionally close the stream reader on error
+                                    reader.cancel();
+                                } else if (data.end) {
+                                    console.log("SSE Stream ended by server.");
+                                    // Stream ended signal received
+                                    reader.cancel(); // Close the reader
+                                    fetchEssays(currentSort.field, currentSort.order);
+                                }
+                            } catch (e) {
+                                console.error("Error parsing SSE data:", e, "Line:", line);
+                            }
+                        }
+                    });
+
+                    // Continue reading
+                    reader.read().then(processText);
+                }).catch(error => {
+                    console.error("Stream reading error:", error);
+                    errorMessage.textContent = `Stream reading error: ${error.message}`;
+                    errorMessage.classList.remove('hidden');
+                });
+
+            } else {
+                // Handle non-streaming response (shouldn't happen with current backend logic)
+                const text = await response.text();
+                responseOutput.textContent = text;
+                fetchEssays(currentSort.field, currentSort.order); // Update list
+            }
+
+        } catch (error) {
+            console.error('Error submitting prompt:', error);
+            errorMessage.textContent = `Error: ${error.message}`;
+            errorMessage.classList.remove('hidden');
+        } finally {
+            // Re-enable form elements regardless of success/failure AFTER stream ends
+            // Need to move this logic to inside the stream handling completion/error
+            promptInput.disabled = false;
+            submitButton.disabled = false;
+            submitButton.textContent = 'Generate Essay';
+            loadingIndicator.classList.add('hidden');
+            // Note: Re-enabling is handled more accurately within the stream processing logic (on done/error/end)
+        }
+    });
+
+
+    // --- Handle Sorting ---
+    sortButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const sortBy = button.dataset.sort;
+            const order = button.dataset.order;
+
+            // Update current sort state
+            currentSort = { field: sortBy, order: order };
+
+            // Update active button style
+            sortButtons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+
+            // Fetch essays with new sorting
+            fetchEssays(sortBy, order);
+        });
+    });
+
+    // --- Initial Load ---
+    fetchEssays(); // Load essays on page load with default sort
+    promptInput.dispatchEvent(new Event('input')); // Initialize char count
+});

static/style.css

@@ -0,0 +1,37 @@
+/* static/style.css */
+
+/* Add any custom styles here if needed, complementing Tailwind */
+
+/* Example: Style for the active sort button */
+.sort-button.active {
+    font-weight: bold;
+    text-decoration: none;
+    color: #374151;
+    /* gray-700 */
+    cursor: default;
+}
+
+/* Style for list items in the essay list for better readability */
+#essays-list li {
+    padding: 2px 0;
+}
+
+/* You might want to style the prose output further if needed */
+#response-output {
+    /* Example: Add a light background or border */
+    /* background-color: #f9fafb; */
+    /* border-left: 3px solid #fb923c; */
+    /* orange-400 */
+    /* padding-left: 1rem; */
+    /* margin-top: 0.5rem; */
+}
+
+/* Ensure loading indicator is centered or styled appropriately if used more prominently */
+#loading-indicator {
+    /* Add styles if needed */
+}
+
+/* Ensure error message stands out */
+#error-message {
+    /* Tailwind classes handle most of this, but you can override */
+}

templates/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ask Paul Graham</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/static/style.css">
+    <script>
+        // Minimal Tailwind config (optional, can customize fonts etc.)
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        // Match PG's site or use a clean default
+                        sans: ['Inter', 'sans-serif'],
+                        // serif: ['Georgia', 'serif'], // Example if using serif
+                    },
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-white text-gray-800 font-sans antialiased">
+    <div class="container mx-auto px-4 py-8 max-w-3xl">
+
+        <header class="mb-8">
+            <h1 class="text-3xl font-semibold text-gray-900">Ask Paul Graham</h1>
+        </header>
+
+        <section class="mb-8 p-4 border border-gray-200 rounded-md bg-gray-50">
+            <form id="prompt-form">
+                <label for="prompt-input" class="block text-sm font-medium text-gray-700 mb-1">
+                    Ask Paul Graham about:
+                </label>
+                <div class="flex items-center space-x-2">
+                    <input
+                        type="text"
+                        id="prompt-input"
+                        name="prompt"
+                        maxlength="70"
+                        required
+                        placeholder="e.g., starting a startup, Lisp, Y Combinator..."
+                        class="flex-grow px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm"
+                    >
+                    <button
+                        type="submit"
+                        id="submit-button"
+                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        Generate Essay
+                    </button>
+                </div>
+                 <p id="char-count" class="text-xs text-gray-500 mt-1 text-right">0 / 70 characters</p>
+            </form>
+        </section>
+
+        <section id="response-section" class="mb-8 min-h-[100px]">
+             <h2 class="text-xl font-semibold text-gray-800 mb-2">Essay:</h2>
+             <div id="loading-indicator" class="hidden text-gray-500">Generating...</div>
+             <div id="error-message" class="hidden text-red-600 bg-red-100 border border-red-300 p-3 rounded-md"></div>
+             <div id="response-output" class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-none text-gray-700 leading-relaxed">
+                 </div>
+        </section>
+
+        <section>
+            <h2 class="text-xl font-semibold text-gray-800 mb-3">Past Essays</h2>
+            <div class="mb-3 text-sm">
+                Sort by:
+                <button data-sort="time" data-order="desc" class="sort-button text-orange-600 hover:underline focus:outline-none active">Recent</button> |
+                <button data-sort="views" data-order="desc" class="sort-button text-orange-600 hover:underline focus:outline-none">Popular</button> |
+                <button data-sort="alpha" data-order="asc" class="sort-button text-orange-600 hover:underline focus:outline-none">A-Z</button>
+            </div>
+            <ul id="essays-list" class="list-disc pl-5 space-y-1 text-gray-700">
+                <li class="text-gray-400">Loading essays...</li>
+            </ul>
+        </section>
+
+    </div>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>