Stronger alignment and word flow. Backend finalized.

backend/app.py

@@ -6,7 +6,7 @@ from typing import Optional
 import httpx
 from fastapi import FastAPI, HTTPException, UploadFile, File
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, StreamingResponse
 from pydantic import BaseModel
 
 # ---------------------------------------------------------------------------
@@ -69,53 +69,84 @@ class SummarizeResponse(BaseModel):
 # ---------------------------------------------------------------------------
 
 def _build_prompt(title: Optional[str], text: str) -> str:
-    header = f"Title: {title}\n" if title else ""
+    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 (
-        "Summarise the following article in 2–4 clear, factual sentences. "
-        "Do not add opinions or commentary.\n\n"
-        f"{header}"
+        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:"
     )
 
 
-async def call_ollama(prompt: str, max_tokens: int = MAX_SUMMARY_TOKENS) -> str:
-    """Send a prompt to the local Ollama completions endpoint and return the text."""
-    payload = {
+def _ollama_payload(prompt: str, stream: bool = False) -> dict:
+    return {
         "model": MODEL_NAME,
         "prompt": prompt,
-        "max_tokens": max_tokens,
-        "temperature": TEMPERATURE,
-        "stop": ["\n\n", "Article:", "Title:"],  # prevent runaway generation
+        "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(OLLAMA_COMPLETIONS_URL, json=payload)
+            resp = await client.post(
+                f"{OLLAMA_BASE_URL}/api/generate",
+                json=_ollama_payload(prompt, stream=False),
+            )
             resp.raise_for_status()
         except httpx.ConnectError:
-            raise HTTPException(
-                status_code=503,
-                detail=(
-                    "Cannot reach Ollama at 127.0.0.1:11434. "
-                    "Make sure `ollama serve` is running."
-                ),
-            )
+            raise _ollama_connect_error()
         except httpx.HTTPStatusError as exc:
-            raise HTTPException(
-                status_code=502,
-                detail=f"Ollama returned an error: {exc.response.text}",
-            )
+            raise HTTPException(status_code=502, detail=f"Ollama error: {exc.response.text}")
 
     data = resp.json()
     try:
-        return data["choices"][0]["text"].strip()
-    except (KeyError, IndexError) as exc:
+        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 from Ollama: {exc}",
-        )
+        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()
 
 
 # ---------------------------------------------------------------------------
@@ -183,7 +214,7 @@ async def status():
 
 @app.post("/summarize/transcript", response_model=SummarizeResponse)
 async def summarize_transcript(request: TranscriptRequest):
-    """Summarise a provided article or transcript."""
+    """Summarise a provided article or transcript (non-streaming)."""
     if not request.text.strip():
         raise HTTPException(status_code=400, detail="text must not be empty")
 
@@ -193,6 +224,24 @@ async def summarize_transcript(request: TranscriptRequest):
     return SummarizeResponse(summary=summary, success=True, source_type="transcript")
 
 
+@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}.
+    """
+    if not request.text.strip():
+        raise HTTPException(status_code=400, detail="text must not be empty")
+
+    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/file", response_model=SummarizeResponse)
 async def summarize_file(file: UploadFile = File(...)):
     """Summarise content from an uploaded .txt file."""

frontend/src/App.css

@@ -299,6 +299,18 @@
   align-items: center;
 }
 
+.inline-result--streaming {
+  background-color: var(--color-canvas-inset);
+  border-color: var(--color-accent-emphasis);
+  color: var(--color-fg-default);
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.inline-result--streaming .inline-result__label {
+  color: var(--color-accent-fg);
+}
+
 .inline-result__label {
   display: flex;
   align-items: center;
@@ -315,4 +327,22 @@
   color: var(--color-fg-default);
   white-space: pre-wrap;
   margin: 0;
+}
+
+/* Streaming cursor blink */
+.streaming-cursor {
+  animation: blink 0.7s step-end infinite;
+  color: var(--color-accent-fg);
+  font-weight: 300;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.streaming-placeholder {
+  color: var(--color-fg-muted);
+  font-style: italic;
 }

frontend/src/App.jsx

@@ -2,8 +2,6 @@ import { useState, useRef } from 'react'
 import './App.css'
 
 const API_BASE = 'http://localhost:8000'
-const OLLAMA_URL = 'http://127.0.0.1:11434/v1/completions'
-const MODEL_NAME = 'phi4-mini:3.8b'
 
 function App() {
   const [activeTab, setActiveTab] = useState('youtube')
@@ -13,30 +11,58 @@ function App() {
   const [loading, setLoading] = useState(false)
   const [response, setResponse] = useState(null)
   const [error, setError] = useState(null)
+  const [streamingText, setStreamingText] = useState('')
   const fileInputRef = useRef(null)
+  const abortRef = useRef(null)
 
-  const callOllama = async (text) => {
-    const prompt = `Summarise the following article in 2–4 clear, factual sentences. Do not add opinions or commentary.\n\nArticle:\n${text}\n\nSummary:`
+  /**
+   * 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 res = await fetch(OLLAMA_URL, {
+    const res = await fetch(`${API_BASE}/summarize/transcript/stream`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        model: MODEL_NAME,
-        prompt,
-        max_tokens: 120,
-        temperature: 0.2,
-        stop: ['\n\n', 'Article:', 'Title:']
-      })
+      signal: abortRef.current.signal,
+      body: JSON.stringify({ text, title: title || null }),
     })
 
     if (!res.ok) {
       const body = await res.text()
-      throw new Error(`Ollama error (${res.status}): ${body}`)
+      throw new Error(`Backend error (${res.status}): ${body}`)
     }
 
-    const data = await res.json()
-    return data.choices[0].text.trim()
+    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 () => {
@@ -61,8 +87,9 @@ function App() {
         if (!transcript.trim()) {
           throw new Error('Please enter some text')
         }
-        const summary = await callOllama(transcript)
-        result = { summary, success: true, source_type: 'transcript', model: MODEL_NAME }
+        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')
@@ -183,8 +210,11 @@ 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()
+                      }}
                     />
-                    <p className="form-hint">Paste any text content you want to summarize.</p>
+                    <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>
                   </div>
 
                   {/* Inline result — only shown when this tab triggered it */}
@@ -195,9 +225,16 @@ function App() {
                     </div>
                   )}
                   {activeTab === 'transcript' && loading && (
-                    <div className="inline-result inline-result--loading fade-in">
-                      <span className="loading-spinner" style={{ width: 14, height: 14 }} />
-                      Generating summary…
+                    <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 && (