YT support, front end improvements, secondary model option (might remove later)

backend/app.py

@@ -1,36 +1,22 @@
-"""FastAPI backend for Précis — powered by Ollama (phi4-mini:3.8b)."""
+"""Précis API — routes and app setup."""
 
-import logging
+import asyncio
 from typing import Optional
 
 import httpx
 from fastapi import FastAPI, HTTPException, UploadFile, File
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import HTMLResponse, StreamingResponse
-from pydantic import BaseModel
+from fastapi.responses import StreamingResponse
 
-# ---------------------------------------------------------------------------
-# Config
-# ---------------------------------------------------------------------------
-
-OLLAMA_BASE_URL = "http://127.0.0.1:11434"
-OLLAMA_COMPLETIONS_URL = f"{OLLAMA_BASE_URL}/v1/completions"
-MODEL_NAME = "phi4-mini:3.8b"
-
-# Tokens to generate for the summary — keep short for speed
-MAX_SUMMARY_TOKENS = 120
-TEMPERATURE = 0.2
-
-logger = logging.getLogger(__name__)
-
-# ---------------------------------------------------------------------------
-# App
-# ---------------------------------------------------------------------------
+from config import OLLAMA_BASE_URL, DEFAULT_MODEL, AVAILABLE_MODELS
+from schemas import TranscriptRequest, YouTubeRequest
+from ollama import stream_summary
+from youtube import extract_video_id, fetch_transcript
 
 app = FastAPI(
     title="Précis API",
-    description="Content summarisation service powered by phi4-mini via Ollama",
-    version="0.2.0",
+    description="Content summarisation service powered by Ollama",
+    version="0.4.0",
 )
 
 app.add_middleware(
@@ -42,158 +28,13 @@ app.add_middleware(
 )
 
 
-# ---------------------------------------------------------------------------
-# Schemas
-# ---------------------------------------------------------------------------
-
-class YouTubeRequest(BaseModel):
-    url: str
-    max_length: Optional[int] = 512
-
-
-class TranscriptRequest(BaseModel):
-    text: str
-    title: Optional[str] = None
-    max_length: Optional[int] = 512
-
-
-class SummarizeResponse(BaseModel):
-    summary: str
-    success: bool
-    source_type: str
-    model: str = MODEL_NAME
-
-
-# ---------------------------------------------------------------------------
-# Ollama helper
-# ---------------------------------------------------------------------------
-
-def _build_prompt(title: Optional[str], text: str) -> str:
-    if title:
-        instructions = (
-            f'The article is titled "{title}". '
-            "If the title is a question, answer it directly in one sentence using only facts from the article. "
-            "If the title is not a question, write one sentence that gives a concise, high-level overview "
-            "of the article, briefly enumerating all key facts."
-        )
-    else:
-        instructions = (
-            "Write one sentence that gives a concise, high-level overview of the article, "
-            "briefly enumerating all key facts."
-        )
-    return (
-        f"{instructions}\n"
-        "Do not add opinions, commentary, or filler phrases like 'The article discusses'.\n"
-        "Output the summary sentence only — nothing else.\n\n"
-        f"Article:\n{text}\n\n"
-        "Summary:"
-    )
-
-
-def _ollama_payload(prompt: str, stream: bool = False) -> dict:
-    return {
-        "model": MODEL_NAME,
-        "prompt": prompt,
-        "stream": stream,
-        "options": {
-            "num_predict": MAX_SUMMARY_TOKENS,
-            "temperature": TEMPERATURE,
-            "stop": ["\n\n", "Article:", "Title:"],
-        },
-    }
-
-
-def _ollama_connect_error() -> HTTPException:
-    return HTTPException(
-        status_code=503,
-        detail="Cannot reach Ollama at 127.0.0.1:11434. Make sure `ollama serve` is running.",
-    )
-
-
-async def call_ollama(prompt: str) -> str:
-    """Non-streaming call — returns the full generated text."""
-    async with httpx.AsyncClient(timeout=120.0) as client:
-        try:
-            resp = await client.post(
-                f"{OLLAMA_BASE_URL}/api/generate",
-                json=_ollama_payload(prompt, stream=False),
-            )
-            resp.raise_for_status()
-        except httpx.ConnectError:
-            raise _ollama_connect_error()
-        except httpx.HTTPStatusError as exc:
-            raise HTTPException(status_code=502, detail=f"Ollama error: {exc.response.text}")
-
-    data = resp.json()
-    try:
-        return data["response"].strip()
-    except KeyError as exc:
-        logger.error("Unexpected Ollama response: %s", data)
-        raise HTTPException(status_code=502, detail=f"Unexpected response shape: {exc}")
-
-
-async def stream_ollama(prompt: str):
-    """Async generator that yields raw NDJSON lines from Ollama's streaming endpoint."""
-    async with httpx.AsyncClient(timeout=120.0) as client:
-        try:
-            async with client.stream(
-                "POST",
-                f"{OLLAMA_BASE_URL}/api/generate",
-                json=_ollama_payload(prompt, stream=True),
-            ) as resp:
-                resp.raise_for_status()
-                async for line in resp.aiter_lines():
-                    if line:
-                        yield line + "\n"
-        except httpx.ConnectError:
-            raise _ollama_connect_error()
-
-
-# ---------------------------------------------------------------------------
-# Routes
-# ---------------------------------------------------------------------------
-
-@app.get("/", response_class=HTMLResponse)
-async def root():
-    """Root endpoint with basic info."""
-    return """
-    <!DOCTYPE html>
-    <html>
-        <head>
-            <title>Précis API</title>
-            <style>
-                body { font-family: system-ui; max-width: 800px; margin: 50px auto; padding: 20px; }
-                h1 { color: #333; }
-                code { background: #f4f4f4; padding: 2px 6px; border-radius: 3px; }
-                .model { color: #6366f1; font-weight: bold; }
-            </style>
-        </head>
-        <body>
-            <h1>Précis API</h1>
-            <p>Model: <span class="model">phi4-mini:3.8b</span> via Ollama</p>
-            <h2>Endpoints</h2>
-            <ul>
-                <li><code>POST /summarize/transcript</code> — Summarise raw text</li>
-                <li><code>POST /summarize/file</code> — Summarise a .txt file</li>
-                <li><code>POST /summarize/youtube</code> — Summarise a YouTube video (transcript required)</li>
-                <li><code>GET /health</code> — Health check</li>
-                <li><code>GET /status</code> — Service status</li>
-                <li><code>GET /docs</code> — Interactive API docs</li>
-            </ul>
-        </body>
-    </html>
-    """
-
-
 @app.get("/health")
 async def health():
-    """Health check endpoint."""
     return {"status": "healthy", "service": "precis"}
 
 
 @app.get("/status")
 async def status():
-    """Service status — also pings Ollama to confirm it is reachable."""
     ollama_ok = False
     try:
         async with httpx.AsyncClient(timeout=5.0) as client:
@@ -204,84 +45,42 @@ async def status():
 
     return {
         "service": "Précis API",
-        "version": "0.2.0",
-        "model": MODEL_NAME,
+        "version": "0.4.0",
+        "default_model": DEFAULT_MODEL,
+        "available_models": AVAILABLE_MODELS,
         "ollama_reachable": ollama_ok,
-        "endpoints": ["/", "/health", "/status", "/summarize/transcript",
-                      "/summarize/file", "/summarize/youtube"],
     }
 
 
-@app.post("/summarize/transcript", response_model=SummarizeResponse)
-async def summarize_transcript(request: TranscriptRequest):
-    """Summarise a provided article or transcript (non-streaming)."""
-    if not request.text.strip():
-        raise HTTPException(status_code=400, detail="text must not be empty")
-
-    prompt = _build_prompt(request.title, request.text)
-    summary = await call_ollama(prompt)
-
-    return SummarizeResponse(summary=summary, success=True, source_type="transcript")
+@app.get("/models")
+async def list_models():
+    return {"default": DEFAULT_MODEL, "available": AVAILABLE_MODELS}
 
 
-@app.post("/summarize/transcript/stream")
-async def summarize_transcript_stream(request: TranscriptRequest):
-    """
-    Streaming variant — pipes Ollama's NDJSON stream directly to the client.
-    Each line is a JSON object: {"response": "<token>", "done": false}.
-    """
+@app.post("/summarize/transcript")
+async def summarize_transcript(request: TranscriptRequest):
     if not request.text.strip():
-        raise HTTPException(status_code=400, detail="text must not be empty")
+        raise HTTPException(status_code=400, detail="Text must not be empty.")
+    return stream_summary(request.text, title=request.title, model=request.model)
 
-    prompt = _build_prompt(request.title, request.text)
 
-    return StreamingResponse(
-        stream_ollama(prompt),
-        media_type="application/x-ndjson",
-        headers={"X-Accel-Buffering": "no"},  # disable nginx buffering if behind a proxy
-    )
+@app.post("/summarize/youtube")
+async def summarize_youtube(request: YouTubeRequest):
+    video_id = extract_video_id(request.url)
+    text = await asyncio.to_thread(fetch_transcript, video_id)
+    return stream_summary(text, model=request.model)
 
 
-@app.post("/summarize/file", response_model=SummarizeResponse)
-async def summarize_file(file: UploadFile = File(...)):
-    """Summarise content from an uploaded .txt file."""
+@app.post("/summarize/file")
+async def summarize_file(file: UploadFile = File(...), model: Optional[str] = None):
     if not file.filename.endswith(".txt"):
-        raise HTTPException(status_code=400, detail="Only .txt files are supported")
-
+        raise HTTPException(status_code=400, detail="Only .txt files are supported.")
     content = await file.read()
     text = content.decode("utf-8")
-
     if not text.strip():
-        raise HTTPException(status_code=400, detail="Uploaded file is empty")
-
-    prompt = _build_prompt(file.filename, text)
-    summary = await call_ollama(prompt)
-
-    return SummarizeResponse(summary=summary, success=True, source_type="file")
-
-
-@app.post("/summarize/youtube", response_model=SummarizeResponse)
-async def summarize_youtube(request: YouTubeRequest):
-    """
-    Summarise a YouTube video.
-
-    NOTE: Automatic transcript fetching is not yet implemented.
-    Pass the transcript text in a separate /summarize/transcript call,
-    or extend this endpoint with youtube-transcript-api.
-    """
-    # Placeholder — returns a clear message rather than silently lying
-    raise HTTPException(
-        status_code=501,
-        detail=(
-            "Automatic YouTube transcript fetching is not yet implemented. "
-            "Extract the transcript yourself and POST it to /summarize/transcript."
-        ),
-    )
-
+        raise HTTPException(status_code=400, detail="Uploaded file is empty.")
+    return stream_summary(text, title=file.filename, model=model)
 
-# ---------------------------------------------------------------------------
-# Entry point
-# ---------------------------------------------------------------------------
 
 if __name__ == "__main__":
     import uvicorn

backend/config.py

@@ -0,0 +1,5 @@
+OLLAMA_BASE_URL = "http://127.0.0.1:11434"
+DEFAULT_MODEL = "phi4-mini:latest"
+AVAILABLE_MODELS = ["phi4-mini:latest", "qwen:4b"]
+MAX_SUMMARY_TOKENS = 120
+TEMPERATURE = 0.2

backend/ollama.py

@@ -0,0 +1,88 @@
+"""Ollama integration: prompt building, model validation, and streaming."""
+
+from typing import Optional
+
+import httpx
+from fastapi import HTTPException
+from fastapi.responses import StreamingResponse
+
+from config import (
+    OLLAMA_BASE_URL, DEFAULT_MODEL, AVAILABLE_MODELS,
+    MAX_SUMMARY_TOKENS, TEMPERATURE,
+)
+
+
+def build_prompt(title: Optional[str], text: str) -> str:
+    if title:
+        instructions = (
+            f'The article is titled "{title}". '
+            "If the title is a question, answer it directly in one sentence using only facts from the article. "
+            "If the title is not a question, write one sentence that gives a concise, high-level overview "
+            "of the article, briefly enumerating all key facts."
+        )
+    else:
+        instructions = (
+            "Write one sentence that gives a concise, high-level overview of the article, "
+            "briefly enumerating all key facts."
+        )
+    return (
+        f"{instructions}\n"
+        "Do not add opinions, commentary, or filler phrases like 'The article discusses'.\n"
+        "Output the summary sentence only — nothing else.\n\n"
+        f"Article:\n{text}\n\n"
+        "Summary:"
+    )
+
+
+def resolve_model(model: Optional[str]) -> str:
+    if not model:
+        return DEFAULT_MODEL
+    if model not in AVAILABLE_MODELS:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Unknown model '{model}'. Available: {AVAILABLE_MODELS}",
+        )
+    return model
+
+
+async def ollama_stream(prompt: str, model: str):
+    """Async generator: yields raw NDJSON lines from Ollama."""
+    payload = {
+        "model": model,
+        "prompt": prompt,
+        "stream": True,
+        "options": {
+            "num_predict": MAX_SUMMARY_TOKENS,
+            "temperature": TEMPERATURE,
+            "stop": ["\n\n", "Article:", "Title:"],
+        },
+    }
+    async with httpx.AsyncClient(timeout=120.0) as client:
+        try:
+            async with client.stream(
+                "POST", f"{OLLAMA_BASE_URL}/api/generate", json=payload,
+            ) as resp:
+                resp.raise_for_status()
+                async for line in resp.aiter_lines():
+                    if line:
+                        yield line + "\n"
+        except httpx.ConnectError:
+            raise HTTPException(
+                status_code=503,
+                detail="Cannot reach Ollama. Make sure `ollama serve` is running.",
+            )
+
+
+def stream_summary(
+    text: str,
+    title: Optional[str] = None,
+    model: Optional[str] = None,
+) -> StreamingResponse:
+    """Universal funnel: text -> prompt -> Ollama stream -> NDJSON response."""
+    resolved = resolve_model(model)
+    prompt = build_prompt(title, text)
+    return StreamingResponse(
+        ollama_stream(prompt, resolved),
+        media_type="application/x-ndjson",
+        headers={"X-Accel-Buffering": "no"},
+    )

backend/schemas.py

@@ -0,0 +1,13 @@
+from typing import Optional
+from pydantic import BaseModel
+
+
+class YouTubeRequest(BaseModel):
+    url: str
+    model: Optional[str] = None
+
+
+class TranscriptRequest(BaseModel):
+    text: str
+    title: Optional[str] = None
+    model: Optional[str] = None

backend/youtube.py

@@ -0,0 +1,37 @@
+"""YouTube transcript extraction."""
+
+import re
+
+from fastapi import HTTPException
+from youtube_transcript_api import YouTubeTranscriptApi
+from youtube_transcript_api._errors import (
+    TranscriptsDisabled,
+    NoTranscriptFound,
+    VideoUnavailable,
+)
+
+YT_ID_RE = re.compile(r"(?:v=|youtu\.be/|embed/|shorts/)([A-Za-z0-9_-]{11})")
+
+
+def extract_video_id(url: str) -> str:
+    match = YT_ID_RE.search(url)
+    if not match:
+        raise HTTPException(status_code=400, detail="Could not extract a video ID from that URL.")
+    return match.group(1)
+
+
+def fetch_transcript(video_id: str) -> str:
+    """Synchronous transcript fetch — call via asyncio.to_thread."""
+    ytt = YouTubeTranscriptApi()
+    try:
+        transcript = ytt.fetch(video_id, languages=["en", "en-US", "en-GB"])
+    except TranscriptsDisabled:
+        raise HTTPException(status_code=422, detail="This video has transcripts disabled.")
+    except NoTranscriptFound:
+        raise HTTPException(status_code=422, detail="No transcript found for this video.")
+    except VideoUnavailable:
+        raise HTTPException(status_code=404, detail="Video is unavailable or does not exist.")
+    except Exception as exc:
+        raise HTTPException(status_code=502, detail=f"Transcript fetch failed: {exc}")
+
+    return " ".join(snippet.text for snippet in transcript)

frontend/index.html

@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <meta name="description" content="Précis — Summarize YouTube videos, articles, and text files with local AI models." />
+    <title>Précis</title>
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.css

@@ -3,24 +3,71 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-3) var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-4);
   background-color: var(--color-canvas-subtle);
   border-bottom: 1px solid var(--color-border-default);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  backdrop-filter: blur(12px);
+  background-color: rgba(22, 27, 34, 0.85);
 }
 
 .logo {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--color-fg-default);
+  gap: 10px;
   text-decoration: none;
+  color: var(--color-fg-default);
 }
 
 .logo-icon {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+}
+
+.logo-text {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.model-select {
+  appearance: none;
+  background: var(--color-canvas-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  color: var(--color-fg-default);
+  font-size: 13px;
+  font-family: inherit;
+  padding: 6px 28px 6px 10px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
+.model-select:hover {
+  border-color: var(--color-accent-fg);
+}
+
+.model-select:focus {
+  outline: none;
+  border-color: var(--color-accent-fg);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+.model-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 /* Main content */
@@ -52,6 +99,12 @@
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-2);
   overflow: hidden;
+  box-shadow: var(--shadow-md);
+  transition: box-shadow 0.2s ease;
+}
+
+.upload-card:hover {
+  box-shadow: var(--shadow-lg);
 }
 
 .upload-header {
@@ -264,7 +317,7 @@
   text-decoration: underline;
 }
 
-/* ── Inline result (transcript tab) ─────────────────────────────────────── */
+/* Inline result */
 .inline-result {
   margin-top: var(--spacing-3);
   padding: var(--spacing-3) var(--spacing-4);

frontend/src/App.jsx

@@ -1,125 +1,31 @@
 import { useState, useRef } from 'react'
+import InlineResult from './components/InlineResult'
+import { useStreaming } from './hooks/useStreaming'
+import logoSvg from './assets/logo.svg'
 import './App.css'
 
 const API_BASE = 'http://localhost:8000'
+const MODELS = ['phi4-mini:latest', 'qwen:4b']
 
 function App() {
   const [activeTab, setActiveTab] = useState('youtube')
   const [youtubeUrl, setYoutubeUrl] = useState('')
   const [transcript, setTranscript] = useState('')
   const [selectedFile, setSelectedFile] = useState(null)
-  const [loading, setLoading] = useState(false)
-  const [response, setResponse] = useState(null)
-  const [error, setError] = useState(null)
-  const [streamingText, setStreamingText] = useState('')
+  const [selectedModel, setSelectedModel] = useState(MODELS[0])
   const fileInputRef = useRef(null)
-  const abortRef = useRef(null)
 
-  /**
-   * Stream tokens from the backend's /summarize/transcript/stream endpoint.
-   * The backend owns the prompt — we just send the raw text and title.
-   */
-  const streamFromBackend = async (text, title) => {
-    abortRef.current = new AbortController()
+  const { loading, response, error, streamingText, submit } = useStreaming()
 
-    const res = await fetch(`${API_BASE}/summarize/transcript/stream`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      signal: abortRef.current.signal,
-      body: JSON.stringify({ text, title: title || null }),
-    })
-
-    if (!res.ok) {
-      const body = await res.text()
-      throw new Error(`Backend error (${res.status}): ${body}`)
-    }
-
-    const reader = res.body.getReader()
-    const decoder = new TextDecoder()
-    let accumulated = ''
-    let buffer = ''
-
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
-
-      buffer += decoder.decode(value, { stream: true })
-
-      const lines = buffer.split('\n')
-      buffer = lines.pop() // keep incomplete line in buffer
-
-      for (const line of lines) {
-        if (!line.trim()) continue
-        try {
-          const chunk = JSON.parse(line)
-          if (chunk.response) {
-            accumulated += chunk.response
-            setStreamingText(accumulated)
-          }
-        } catch {
-          // skip malformed lines
-        }
-      }
-    }
-
-    return accumulated.trim()
-  }
-
-  const handleSubmit = async () => {
-    setLoading(true)
-    setError(null)
-    setResponse(null)
-
-    try {
-      let result
-
-      if (activeTab === 'youtube') {
-        if (!youtubeUrl.trim()) {
-          throw new Error('Please enter a YouTube URL')
-        }
-        const res = await fetch(`${API_BASE}/summarize/youtube`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ url: youtubeUrl })
-        })
-        result = await res.json()
-      } else if (activeTab === 'transcript') {
-        if (!transcript.trim()) {
-          throw new Error('Please enter some text')
-        }
-        setStreamingText('')
-        const summary = await streamFromBackend(transcript, null)
-        result = { summary, success: true, source_type: 'transcript', model: 'phi4-mini:3.8b' }
-      } else if (activeTab === 'file') {
-        if (!selectedFile) {
-          throw new Error('Please select a file')
-        }
-        const formData = new FormData()
-        formData.append('file', selectedFile)
-        const res = await fetch(`${API_BASE}/summarize/file`, {
-          method: 'POST',
-          body: formData
-        })
-        result = await res.json()
-      }
-
-      setResponse(result)
-    } catch (err) {
-      setError(err.message || 'An error occurred')
-    } finally {
-      setLoading(false)
-    }
-  }
+  const handleSubmit = () =>
+    submit(activeTab, { youtubeUrl, transcript, selectedFile, selectedModel })
 
   const handleFileDrop = (e) => {
     e.preventDefault()
     e.stopPropagation()
     const file = e.dataTransfer?.files[0] || e.target.files?.[0]
-    if (file && file.name.endsWith('.txt')) {
-      setSelectedFile(file)
-    } else if (file) {
-      setError('Only .txt files are supported')
-    }
+    if (file && file.name.endsWith('.txt')) setSelectedFile(file)
+    else if (file) alert('Only .txt files are supported')
   }
 
   const formatFileSize = (bytes) => {
@@ -128,20 +34,32 @@ function App() {
     return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
   }
 
+  const ctrlEnter = (e) => {
+    if (e.key === 'Enter' && e.ctrlKey && !loading) handleSubmit()
+  }
+
+  const resultProps = { error, loading, response, streamingText, selectedModel }
+
   return (
     <>
       <header className="header">
         <a href="/" className="logo">
-          <svg className="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M12 2L2 7l10 5 10-5-10-5z" />
-            <path d="M2 17l10 5 10-5" />
-            <path d="M2 12l10 5 10-5" />
-          </svg>
-          Précis
-        </a>
-        <a href={`${API_BASE}/docs`} target="_blank" rel="noopener noreferrer" className="btn">
-          API Docs
+          <img src={logoSvg} alt="Précis" className="logo-icon" />
+          <span className="logo-text">Précis</span>
         </a>
+        <div className="header-actions">
+          <select
+            className="model-select"
+            value={selectedModel}
+            onChange={(e) => setSelectedModel(e.target.value)}
+            disabled={loading}
+          >
+            {MODELS.map((m) => <option key={m} value={m}>{m}</option>)}
+          </select>
+          <a href={`${API_BASE}/docs`} target="_blank" rel="noopener noreferrer" className="btn" style={{ textDecoration: 'none' }}>
+            API Docs
+          </a>
+        </div>
       </header>
 
       <main className="main">
@@ -166,42 +84,30 @@ function App() {
 
               <div className="upload-body">
                 <div className="tabs">
-                  <button
-                    className={`tab ${activeTab === 'youtube' ? 'active' : ''}`}
-                    onClick={() => setActiveTab('youtube')}
-                  >
-                    YouTube Video
-                  </button>
-                  <button
-                    className={`tab ${activeTab === 'transcript' ? 'active' : ''}`}
-                    onClick={() => setActiveTab('transcript')}
-                  >
-                    Article / Transcript
-                  </button>
-                  <button
-                    className={`tab ${activeTab === 'file' ? 'active' : ''}`}
-                    onClick={() => setActiveTab('file')}
-                  >
-                    Text File
-                  </button>
+                  {[['youtube', 'YouTube Video'], ['transcript', 'Article / Transcript'], ['file', 'Text File']].map(([key, label]) => (
+                    <button key={key} className={`tab ${activeTab === key ? 'active' : ''}`} onClick={() => setActiveTab(key)}>
+                      {label}
+                    </button>
+                  ))}
                 </div>
 
-                {/* YouTube Tab */}
+                {/* YouTube */}
                 <div className={`tab-panel ${activeTab === 'youtube' ? 'active' : ''}`}>
                   <div className="form-group">
                     <label className="form-label">YouTube URL</label>
                     <input
-                      type="url"
-                      className="input"
+                      type="url" className="input"
                       placeholder="https://www.youtube.com/watch?v=..."
                       value={youtubeUrl}
                       onChange={(e) => setYoutubeUrl(e.target.value)}
+                      onKeyDown={ctrlEnter}
                     />
-                    <p className="form-hint">Paste the full URL of a YouTube video to summarize its content.</p>
+                    <p className="form-hint">Paste a YouTube URL. Ctrl+Enter to generate.</p>
                   </div>
+                  {activeTab === 'youtube' && <InlineResult {...resultProps} loadingLabel="Fetching transcript…" />}
                 </div>
 
-                {/* Transcript Tab */}
+                {/* Transcript */}
                 <div className={`tab-panel ${activeTab === 'transcript' ? 'active' : ''}`}>
                   <div className="form-group">
                     <label className="form-label">Article or Transcript Text</label>
@@ -210,70 +116,31 @@ function App() {
                       placeholder="Paste your article or transcript here..."
                       value={transcript}
                       onChange={(e) => setTranscript(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' && e.ctrlKey && !loading) handleSubmit()
-                      }}
+                      onKeyDown={ctrlEnter}
                     />
-                    <p className="form-hint">Paste any text content you want to summarize. Press <kbd style={{ fontFamily: 'inherit', background: 'var(--color-canvas-inset)', border: '1px solid var(--color-border-muted)', borderRadius: 3, padding: '0 4px', fontSize: 11 }}>Ctrl</kbd> + <kbd style={{ fontFamily: 'inherit', background: 'var(--color-canvas-inset)', border: '1px solid var(--color-border-muted)', borderRadius: 3, padding: '0 4px', fontSize: 11 }}>Enter</kbd> to generate.</p>
+                    <p className="form-hint">
+                      Paste any text you want to summarize.{' '}
+                      <kbd style={{ fontFamily: 'inherit', background: 'var(--color-canvas-inset)', border: '1px solid var(--color-border-muted)', borderRadius: 3, padding: '0 4px', fontSize: 11 }}>Ctrl</kbd>
+                      {' + '}
+                      <kbd style={{ fontFamily: 'inherit', background: 'var(--color-canvas-inset)', border: '1px solid var(--color-border-muted)', borderRadius: 3, padding: '0 4px', fontSize: 11 }}>Enter</kbd>
+                      {' '}to generate.
+                    </p>
                   </div>
-
-                  {/* Inline result — only shown when this tab triggered it */}
-                  {activeTab === 'transcript' && error && (
-                    <div className="inline-result inline-result--error fade-in">
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
-                      {error}
-                    </div>
-                  )}
-                  {activeTab === 'transcript' && loading && (
-                    <div className="inline-result inline-result--streaming fade-in">
-                      <div className="inline-result__label">
-                        <span className="loading-spinner" style={{ width: 12, height: 12 }} />
-                        Generating…
-                        <span className="response-badge" style={{ marginLeft: 'auto' }}>phi4-mini:3.8b</span>
-                      </div>
-                      <p className="inline-result__text">
-                        {streamingText || <span className="streaming-placeholder">Waiting for model…</span>}
-                        <span className="streaming-cursor">▌</span>
-                      </p>
-                    </div>
-                  )}
-                  {activeTab === 'transcript' && response && !loading && (
-                    <div className="inline-result inline-result--success fade-in">
-                      <div className="inline-result__label">
-                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="20 6 9 17 4 12" /></svg>
-                        Summary
-                        <span className="response-badge" style={{ marginLeft: 'auto' }}>{response.model ?? 'phi4-mini'}</span>
-                      </div>
-                      <p className="inline-result__text">{response.summary}</p>
-                    </div>
-                  )}
+                  {activeTab === 'transcript' && <InlineResult {...resultProps} loadingLabel="Generating…" />}
                 </div>
 
-                {/* File Tab */}
+                {/* File upload */}
                 <div className={`tab-panel ${activeTab === 'file' ? 'active' : ''}`}>
                   <div className="form-group">
                     <label className="form-label">Text File (.txt)</label>
-                    <div
-                      className={`dropzone ${selectedFile ? '' : ''}`}
-                      onClick={() => fileInputRef.current?.click()}
-                      onDrop={handleFileDrop}
-                      onDragOver={(e) => e.preventDefault()}
-                    >
+                    <div className="dropzone" onClick={() => fileInputRef.current?.click()} onDrop={handleFileDrop} onDragOver={(e) => e.preventDefault()}>
                       <svg className="dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                         <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                       </svg>
-                      <p className="dropzone-text">
-                        Drag and drop a <strong>.txt</strong> file here, or click to browse
-                      </p>
+                      <p className="dropzone-text">Drag and drop a <strong>.txt</strong> file here, or click to browse</p>
                       <p className="dropzone-hint">Maximum file size: 10 MB</p>
                     </div>
-                    <input
-                      ref={fileInputRef}
-                      type="file"
-                      className="file-input"
-                      accept=".txt"
-                      onChange={handleFileDrop}
-                    />
+                    <input ref={fileInputRef} type="file" className="file-input" accept=".txt" onChange={handleFileDrop} />
 
                     {selectedFile && (
                       <div className="file-selected">
@@ -289,39 +156,25 @@ function App() {
                           <div className="file-name">{selectedFile.name}</div>
                           <div className="file-size">{formatFileSize(selectedFile.size)}</div>
                         </div>
-                        <button
-                          className="file-remove"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            setSelectedFile(null)
-                          }}
-                        >
+                        <button className="file-remove" onClick={(e) => { e.stopPropagation(); setSelectedFile(null) }}>
                           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                            <line x1="18" y1="6" x2="6" y2="18" />
-                            <line x1="6" y1="6" x2="18" y2="18" />
+                            <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
                           </svg>
                         </button>
                       </div>
                     )}
                   </div>
+                  {activeTab === 'file' && <InlineResult {...resultProps} loadingLabel="Reading file…" />}
                 </div>
 
                 <div className="submit-section">
-                  <button
-                    className="btn btn-primary btn-lg"
-                    onClick={handleSubmit}
-                    disabled={loading}
-                  >
+                  <button className="btn btn-primary btn-lg" onClick={handleSubmit} disabled={loading}>
                     {loading ? (
-                      <>
-                        <span className="loading-spinner" style={{ width: 16, height: 16 }}></span>
-                        Processing...
-                      </>
+                      <><span className="loading-spinner" style={{ width: 16, height: 16 }} /> Processing...</>
                     ) : (
                       <>
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                          <path d="M22 2L11 13" />
-                          <path d="M22 2L15 22l-4-9-9-4L22 2z" />
+                          <path d="M22 2L11 13" /><path d="M22 2L15 22l-4-9-9-4L22 2z" />
                         </svg>
                         Generate Summary
                       </>
@@ -330,56 +183,12 @@ function App() {
                 </div>
               </div>
             </div>
-
-            {/* Error display — for YouTube / File tabs only (transcript shows inline) */}
-            {error && activeTab !== 'transcript' && (
-              <div className="response-section fade-in">
-                <div className="response-card" style={{ borderColor: 'var(--color-danger-fg)' }}>
-                  <div className="response-header" style={{ borderColor: 'var(--color-danger-fg)' }}>
-                    <div className="response-title" style={{ color: 'var(--color-danger-fg)' }}>
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <circle cx="12" cy="12" r="10" />
-                        <line x1="12" y1="8" x2="12" y2="12" />
-                        <line x1="12" y1="16" x2="12.01" y2="16" />
-                      </svg>
-                      Error
-                    </div>
-                  </div>
-                  <div className="response-body">
-                    <p className="response-text" style={{ color: 'var(--color-danger-fg)' }}>{error}</p>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Response display — for YouTube / File tabs only (transcript shows inline) */}
-            {response && activeTab !== 'transcript' && (
-              <div className="response-section fade-in">
-                <div className="response-card">
-                  <div className="response-header">
-                    <div className="response-title">
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
-                        <polyline points="14 2 14 8 20 8" />
-                        <line x1="16" y1="13" x2="8" y2="13" />
-                        <line x1="16" y1="17" x2="8" y2="17" />
-                      </svg>
-                      Summary
-                    </div>
-                    <span className="response-badge">{response.source_type}</span>
-                  </div>
-                  <div className="response-body">
-                    <p className="response-text">{response.summary}</p>
-                  </div>
-                </div>
-              </div>
-            )}
           </div>
         </div>
       </main>
 
       <footer className="footer">
-        <p>Précis © 2026 · Built with ♥ · <a href={`${API_BASE}/docs`} target="_blank" rel="noopener noreferrer">API Documentation</a></p>
+        <p>Précis © 2026 · <a href={`${API_BASE}/docs`} target="_blank" rel="noopener noreferrer">API Documentation</a></p>
       </footer>
     </>
   )

frontend/src/components/InlineResult.jsx

@@ -0,0 +1,39 @@
+export default function InlineResult({ error, loading, response, streamingText, selectedModel, loadingLabel }) {
+    return (
+        <>
+            {error && (
+                <div className="inline-result inline-result--error fade-in">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
+                    </svg>
+                    {error}
+                </div>
+            )}
+            {loading && (
+                <div className="inline-result inline-result--streaming fade-in">
+                    <div className="inline-result__label">
+                        <span className="loading-spinner" style={{ width: 12, height: 12 }} />
+                        {streamingText ? 'Generating…' : (loadingLabel || 'Processing…')}
+                        <span className="response-badge" style={{ marginLeft: 'auto' }}>{selectedModel}</span>
+                    </div>
+                    <p className="inline-result__text">
+                        {streamingText || <span className="streaming-placeholder">Waiting for model…</span>}
+                        <span className="streaming-cursor">▌</span>
+                    </p>
+                </div>
+            )}
+            {response && !loading && (
+                <div className="inline-result inline-result--success fade-in">
+                    <div className="inline-result__label">
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                        Summary
+                        <span className="response-badge" style={{ marginLeft: 'auto' }}>{response.model ?? 'phi4-mini'}</span>
+                    </div>
+                    <p className="inline-result__text">{response.summary}</p>
+                </div>
+            )}
+        </>
+    )
+}

frontend/src/hooks/useStreaming.js

@@ -0,0 +1,99 @@
+import { useState, useRef } from 'react'
+
+const API_BASE = 'http://localhost:8000'
+
+export function useStreaming() {
+    const [loading, setLoading] = useState(false)
+    const [response, setResponse] = useState(null)
+    const [error, setError] = useState(null)
+    const [streamingText, setStreamingText] = useState('')
+    const abortRef = useRef(null)
+
+    const readNDJSONStream = async (res) => {
+        const reader = res.body.getReader()
+        const decoder = new TextDecoder()
+        let accumulated = ''
+        let buffer = ''
+
+        while (true) {
+            const { done, value } = await reader.read()
+            if (done) break
+
+            buffer += decoder.decode(value, { stream: true })
+            const lines = buffer.split('\n')
+            buffer = lines.pop()
+
+            for (const line of lines) {
+                if (!line.trim()) continue
+                try {
+                    const chunk = JSON.parse(line)
+                    if (chunk.response) {
+                        accumulated += chunk.response
+                        setStreamingText(accumulated)
+                    }
+                } catch { /* skip malformed */ }
+            }
+        }
+
+        return accumulated.trim()
+    }
+
+    const streamFrom = async (endpoint, { json, formData } = {}) => {
+        abortRef.current = new AbortController()
+
+        const fetchOpts = {
+            method: 'POST',
+            signal: abortRef.current.signal,
+        }
+
+        if (json) {
+            fetchOpts.headers = { 'Content-Type': 'application/json' }
+            fetchOpts.body = JSON.stringify(json)
+        } else if (formData) {
+            fetchOpts.body = formData
+        }
+
+        const res = await fetch(`${API_BASE}${endpoint}`, fetchOpts)
+
+        if (!res.ok) {
+            const body = await res.text()
+            let detail = `Backend error (${res.status})`
+            try { detail = JSON.parse(body).detail } catch { /* use default */ }
+            throw new Error(detail)
+        }
+
+        return readNDJSONStream(res)
+    }
+
+    const submit = async (activeTab, { youtubeUrl, transcript, selectedFile, selectedModel }) => {
+        setLoading(true)
+        setError(null)
+        setResponse(null)
+        setStreamingText('')
+
+        try {
+            let summary
+
+            if (activeTab === 'youtube') {
+                if (!youtubeUrl.trim()) throw new Error('Please enter a YouTube URL')
+                summary = await streamFrom('/summarize/youtube', { json: { url: youtubeUrl, model: selectedModel } })
+            } else if (activeTab === 'transcript') {
+                if (!transcript.trim()) throw new Error('Please enter some text')
+                summary = await streamFrom('/summarize/transcript', { json: { text: transcript, model: selectedModel } })
+            } else if (activeTab === 'file') {
+                if (!selectedFile) throw new Error('Please select a file')
+                const fd = new FormData()
+                fd.append('file', selectedFile)
+                summary = await streamFrom(`/summarize/file?model=${encodeURIComponent(selectedModel)}`, { formData: fd })
+            }
+
+            setResponse({ summary, success: true, source_type: activeTab, model: selectedModel })
+        } catch (err) {
+            setError(err.message || 'An error occurred')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return { loading, response, error, streamingText, submit }
+}