prompt engineering improvements

backend/app.py

@@ -157,7 +157,7 @@ async def summarize_transcript(
     verify_api_key(x_api_key)
     if not request.text.strip():
         raise HTTPException(status_code=400, detail="Text must not be empty.")
-    return stream_summary(request.text, title=request.title, model=request.model)
+    return await stream_summary(request.text, title=request.title, model=request.model)
 
 
 @app.post("/summarize/youtube")
@@ -167,7 +167,7 @@ async def summarize_youtube(
 ):
     verify_api_key(x_api_key)
     title, text = await fetch_yt_transcript(request.url)
-    return stream_summary(text, title=title, model=request.model)
+    return await stream_summary(text, title=title, model=request.model)
 
 
 @app.post("/summarize/file")
@@ -196,7 +196,7 @@ async def summarize_file(
 
     if not text.strip():
         raise HTTPException(status_code=400, detail="Uploaded file is empty.")
-    return stream_summary(text, title=file.filename, model=model)
+    return await stream_summary(text, title=file.filename, model=model)
 
 
 if __name__ == "__main__":

backend/helpers/transcript.py

@@ -120,6 +120,17 @@ async def transcript(url: str) -> tuple[Optional[str], str]:
     # fetch runs on the event loop — both in parallel.
     title_task = asyncio.create_task(_fetch_title(video_id))
     text = await asyncio.to_thread(_fetch_transcript_sync, video_id)
-    title = await title_task
 
+    # Give the title at most 1 extra second after the transcript is done.
+    # oEmbed can be slow; we never want it to be the bottleneck.
+    try:
+        title = await asyncio.wait_for(asyncio.shield(title_task), timeout=1.0)
+    except (asyncio.TimeoutError, Exception):
+        title_task.cancel()
+        title = None
+
+    # Return the fetched title (or None if unavailable) and the transcript text.
+    # Callers (e.g., backend/app.py) forward the title to `stream_summary`, which includes it in the prompt
+    # via `build_prompt`. If `title` is None, the prompt omits the title block, which is appropriate for
+    # plain‑text or other non‑title scenarios.
     return title, text

backend/ollama.py

@@ -47,15 +47,15 @@ def build_prompt(title: Optional[str], text: str) -> str:
 # Cache for installed models to avoid repeated network calls
 _installed_models_cache: Optional[list] = None
 
-def resolve_model(model: Optional[str]) -> str:
+async def resolve_model(model: Optional[str]) -> str:
     requested = model or ""
 
     # Prefer what Ollama actually has installed, using cache to avoid repeated network calls.
     global _installed_models_cache
     if _installed_models_cache is None:
         try:
-            with httpx.Client(timeout=5.0) as client:
-                r = client.get(f"{OLLAMA_BASE_URL}/api/tags")
+            async with httpx.AsyncClient(timeout=5.0) as client:
+                r = await client.get(f"{OLLAMA_BASE_URL}/api/tags")
                 r.raise_for_status()
                 payload = r.json() if r.content else {}
                 _installed_models_cache = [m.get("name") for m in payload.get("models", []) if m.get("name")]
@@ -87,10 +87,10 @@ def resolve_model(model: Optional[str]) -> str:
     return requested
 
 
-def ensure_ollama_reachable() -> None:
+async def ensure_ollama_reachable() -> None:
     try:
-        with httpx.Client(timeout=10.0) as client:
-            response = client.get(f"{OLLAMA_BASE_URL}/api/tags")
+        async with httpx.AsyncClient(timeout=10.0) as client:
+            response = await client.get(f"{OLLAMA_BASE_URL}/api/tags")
             response.raise_for_status()
     except httpx.ConnectError:
         raise HTTPException(
@@ -152,14 +152,14 @@ async def ollama_stream(prompt: str, model: str):
             yield error_line + "\n"
 
 
-def stream_summary(
+async def stream_summary(
     text: str,
     title: Optional[str] = None,
     model: Optional[str] = None,
 ) -> StreamingResponse:
     """Universal funnel: text -> prompt -> Ollama stream -> NDJSON response."""
-    ensure_ollama_reachable()
-    resolved = resolve_model(model)
+    await ensure_ollama_reachable()
+    resolved = await resolve_model(model)
     prompt = build_prompt(title, text)
     return StreamingResponse(
         ollama_stream(prompt, resolved),

frontend/src/App.jsx

@@ -16,7 +16,13 @@ function App() {
   const fileInputRef = useRef(null)
   const warmupAbortRef = useRef(null)
 
-  const { loading, response, error, streamingText, submit, cancel } = useStreaming()
+  // One streaming instance per tab — state is fully independent and persists across tab switches
+  const ytStreaming = useStreaming()
+  const textStreaming = useStreaming()
+  const fileStreaming = useStreaming()
+
+  const streaming = { youtube: ytStreaming, transcript: textStreaming, file: fileStreaming }
+  const active = streaming[activeTab]
 
   useEffect(() => {
     let cancelled = false
@@ -92,7 +98,7 @@ function App() {
   }, [selectedModel])
 
   const handleSubmit = () =>
-    submit(activeTab, {
+    active.submit(activeTab, {
       youtubeUrl,
       transcript,
       selectedFile,
@@ -114,11 +120,9 @@ function App() {
   }
 
   const ctrlEnter = (e) => {
-    if (e.key === 'Enter' && e.ctrlKey && !loading) handleSubmit()
+    if (e.key === 'Enter' && e.ctrlKey && !active.loading) handleSubmit()
   }
 
-  const resultProps = { error, loading, response, streamingText, selectedModel }
-
   return (
     <>
       <header className="header">
@@ -131,7 +135,7 @@ function App() {
             className={`model-select${modelReady === true ? ' model-select--ready' : modelReady === false ? ' model-select--warming' : ''}`}
             value={selectedModel}
             onChange={(e) => setSelectedModel(e.target.value)}
-            disabled={loading || models.length === 0}
+            disabled={active.loading || models.length === 0}
           >
             {models.map((m) => <option key={m} value={m}>{m}</option>)}
           </select>
@@ -184,13 +188,15 @@ function App() {
                     />
                     <p className="form-hint">Paste a YouTube URL. Ctrl+Enter to generate.</p>
                   </div>
-                  {activeTab === 'youtube' && (
-                    <InlineResult
-                      {...resultProps}
-                      loadingLabel={streamingText ? 'Generating…' : 'Fetching transcript…'}
-                      placeholderText="Fetching transcript…"
-                    />
-                  )}
+                  <InlineResult
+                    error={ytStreaming.error}
+                    loading={ytStreaming.loading}
+                    response={ytStreaming.response}
+                    streamingText={ytStreaming.streamingText}
+                    selectedModel={selectedModel}
+                    loadingLabel={ytStreaming.streamingText ? 'Generating…' : 'Fetching transcript…'}
+                    placeholderText="Fetching transcript…"
+                  />
                 </div>
 
                 {/* Transcript */}
@@ -212,13 +218,15 @@ function App() {
                       {' '}to generate.
                     </p>
                   </div>
-                  {activeTab === 'transcript' && (
-                    <InlineResult
-                      {...resultProps}
-                      loadingLabel="Generating…"
-                      placeholderText="Waiting for model…"
-                    />
-                  )}
+                  <InlineResult
+                    error={textStreaming.error}
+                    loading={textStreaming.loading}
+                    response={textStreaming.response}
+                    streamingText={textStreaming.streamingText}
+                    selectedModel={selectedModel}
+                    loadingLabel="Generating…"
+                    placeholderText="Waiting for model…"
+                  />
                 </div>
 
                 {/* File upload */}
@@ -256,26 +264,28 @@ function App() {
                       </div>
                     )}
                   </div>
-                  {activeTab === 'file' && (
-                    <InlineResult
-                      {...resultProps}
-                      loadingLabel="Reading file…"
-                      placeholderText="Reading file…"
-                    />
-                  )}
+                  <InlineResult
+                    error={fileStreaming.error}
+                    loading={fileStreaming.loading}
+                    response={fileStreaming.response}
+                    streamingText={fileStreaming.streamingText}
+                    selectedModel={selectedModel}
+                    loadingLabel="Reading file…"
+                    placeholderText="Reading file…"
+                  />
                 </div>
 
                 <div className="submit-section">
-                  {loading && (
-                    <button className="btn btn-cancel" onClick={cancel}>
+                  {active.loading && (
+                    <button className="btn btn-cancel" onClick={active.cancel}>
                       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                         <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
                       </svg>
                       Cancel
                     </button>
                   )}
-                  <button className="btn btn-primary btn-lg" onClick={handleSubmit} disabled={loading}>
-                    {loading ? (
+                  <button className="btn btn-primary btn-lg" onClick={handleSubmit} disabled={active.loading}>
+                    {active.loading ? (
                       <><span className="loading-spinner" style={{ width: 16, height: 16 }} /> Processing...</>
                     ) : (
                       <>

frontend/src/hooks/useStreaming.js

@@ -7,6 +7,10 @@ export function useStreaming() {
     const [error, setError] = useState(null)
     const [streamingText, setStreamingText] = useState('')
     const abortRef = useRef(null)
+    // Tracks accumulated text in real-time so cancel() can save it as a response
+    const accumulatedRef = useRef('')
+    // Incremented on each submit so stale completions don't overwrite fresh state
+    const submitIdRef = useRef(0)
 
     const readNDJSONStream = async (res) => {
         const reader = res.body.getReader()
@@ -33,6 +37,7 @@ export function useStreaming() {
                     }
                     if (chunk.response) {
                         accumulated += chunk.response
+                        accumulatedRef.current = accumulated
                         setStreamingText(accumulated)
                     }
                 } catch { /* skip malformed */ }
@@ -80,10 +85,16 @@ export function useStreaming() {
     }
 
     const submit = async (activeTab, { youtubeUrl, transcript, selectedFile, selectedModel }) => {
+        // Abort any in-flight request before starting a new one
+        abortRef.current?.abort()
+
+        const myId = ++submitIdRef.current
+
         setLoading(true)
         setError(null)
         setResponse(null)
         setStreamingText('')
+        accumulatedRef.current = ''
 
         try {
             let summary
@@ -101,15 +112,26 @@ export function useStreaming() {
                 summary = await streamFrom(`/summarize/file?model=${encodeURIComponent(selectedModel)}`, { formData: fd })
             }
 
+            if (submitIdRef.current !== myId) return  // superseded by a newer submit
             setResponse({ summary, success: true, source_type: activeTab, model: selectedModel })
         } catch (err) {
+            if (submitIdRef.current !== myId) return  // superseded — don't touch state
             if (err.name === 'AbortError') {
-                // User cancelled — clear loading silently, keep any partial text
+                // User cancelled — keep whatever was generated so far as the result
+                const partial = accumulatedRef.current.trim()
+                if (partial) {
+                    setResponse({ summary: partial, success: true, source_type: activeTab, model: selectedModel, cancelled: true })
+                }
+                // If nothing was generated yet, just reset silently (no error shown)
                 return
             }
             setError(err.message || 'An error occurred')
         } finally {
-            setLoading(false)
+            // Only the current submit should clear loading — stale ones must not interfere
+            if (submitIdRef.current === myId) {
+                setLoading(false)
+                setStreamingText('')
+            }
         }
     }