Output rendering, documentation, model readiness UI

backend/app.py

@@ -1,5 +1,7 @@
 from typing import Optional
 
+import os
+
 import httpx
 from fastapi import FastAPI, HTTPException, UploadFile, File, Header, Request
 from fastapi.middleware.cors import CORSMiddleware
@@ -32,7 +34,6 @@ app.add_middleware(
 )
 
 # Only mount frontend in production when dist/ exists
-import os
 if os.path.isdir("frontend/dist"):
     app.mount("/", StaticFiles(directory="frontend/dist", html=True), name="static")
 
@@ -101,6 +102,53 @@ async def list_models():
     return {"default": DEFAULT_MODEL, "available": AVAILABLE_MODELS}
 
 
+@app.post("/warmup")
+async def warmup_model(model: Optional[str] = None):
+    """Load a model into Ollama VRAM.
+
+    Per the Ollama API docs: sending a generate request with an empty
+    prompt (no 'prompt' key at all) causes Ollama to load the model into
+    memory and return once it is ready.  stream=False means this endpoint
+    only returns *after* the model is fully loaded — the frontend can await
+    it to know exactly when the model is warm.
+    """
+    keep_alive = os.getenv("OLLAMA_KEEP_ALIVE", "30m")
+    target = model or DEFAULT_MODEL
+    try:
+        async with httpx.AsyncClient(timeout=120.0) as client:
+            await client.post(
+                f"{OLLAMA_BASE_URL}/api/generate",
+                json={"model": target, "keep_alive": keep_alive, "stream": False},
+            )
+    except Exception:
+        pass  # Non-fatal
+    return {"model": target, "status": "warmed"}
+
+
+@app.get("/warmup/status")
+async def warmup_status(model: Optional[str] = None):
+    """Check whether a model is currently loaded in Ollama's memory.
+
+    Hits GET /api/ps (the equivalent of `ollama ps`) and returns
+    {"loaded": true/false, "model": name}.
+    """
+    target = model or DEFAULT_MODEL
+    try:
+        async with httpx.AsyncClient(timeout=5.0) as client:
+            r = await client.get(f"{OLLAMA_BASE_URL}/api/ps")
+            r.raise_for_status()
+            payload = r.json() if r.content else {}
+            running = [m.get("name", "") for m in payload.get("models", [])]
+            # Match on exact name or prefix (e.g. "phi4-mini" matches "phi4-mini:latest")
+            loaded = any(
+                name == target or name.startswith(target + ":")
+                for name in running
+            )
+            return {"model": target, "loaded": loaded}
+    except Exception:
+        return {"model": target, "loaded": False}
+
+
 @app.post("/summarize/transcript")
 async def summarize_transcript(
     request: TranscriptRequest,

frontend/src/App.css

@@ -70,6 +70,19 @@
   cursor: not-allowed;
 }
 
+/* Model warm-up border states */
+.model-select--ready {
+  border-color: rgba(46, 160, 67, 0.7) !important;
+  box-shadow: 0 0 0 2px rgba(46, 160, 67, 0.15);
+  transition: border-color 0.4s, box-shadow 0.4s;
+}
+
+.model-select--warming {
+  border-color: rgba(234, 179, 8, 0.7) !important;
+  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.12);
+  transition: border-color 0.4s, box-shadow 0.4s;
+}
+
 /* Main content */
 .main {
   flex: 1;
@@ -220,12 +233,35 @@
 /* Submit section */
 .submit-section {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  gap: var(--spacing-2);
   padding-top: var(--spacing-4);
   border-top: 1px solid var(--color-border-muted);
   margin-top: var(--spacing-4);
 }
 
+/* Cancel / stop button */
+.btn-cancel {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid rgba(248, 81, 73, 0.4);
+  background-color: rgba(248, 81, 73, 0.08);
+  color: var(--color-danger-fg);
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.btn-cancel:hover {
+  background-color: rgba(248, 81, 73, 0.16);
+  border-color: rgba(248, 81, 73, 0.6);
+}
+
 /* Response section */
 .response-section {
   margin-top: var(--spacing-5);
@@ -374,29 +410,129 @@
   width: 100%;
 }
 
+/* ── Prose styles for ReactMarkdown output ── */
 .inline-result__text {
   font-size: 14px;
   line-height: 1.7;
   color: var(--color-fg-default);
   margin: 0;
+  width: 100%;
 }
 
-.inline-result__text strong {
+/* Paragraphs */
+.inline-result__text p {
+  margin: 0 0 0.6em;
+}
+.inline-result__text p:last-child {
+  margin-bottom: 0;
+}
+
+/* Headings */
+.inline-result__text h1,
+.inline-result__text h2,
+.inline-result__text h3,
+.inline-result__text h4,
+.inline-result__text h5,
+.inline-result__text h6 {
   font-weight: 600;
+  line-height: 1.3;
+  margin: 0.9em 0 0.35em;
   color: var(--color-fg-default);
 }
-
-.inline-result__text em {
+.inline-result__text h1 { font-size: 1.35em; }
+.inline-result__text h2 { font-size: 1.2em; }
+.inline-result__text h3 { font-size: 1.08em; }
+.inline-result__text h4,
+.inline-result__text h5,
+.inline-result__text h6 { font-size: 1em; }
+.inline-result__text h1:first-child,
+.inline-result__text h2:first-child,
+.inline-result__text h3:first-child { margin-top: 0; }
+
+/* Lists — top-level */
+.inline-result__text ul,
+.inline-result__text ol {
+  margin: 0.4em 0 0.6em;
+  padding-left: 1.5em;
+}
+.inline-result__text ul { list-style-type: disc; }
+.inline-result__text ol { list-style-type: decimal; }
+
+/* Nested lists — level 2 */
+.inline-result__text ul ul,
+.inline-result__text ol ul { list-style-type: circle; }
+.inline-result__text ul ol,
+.inline-result__text ol ol { list-style-type: lower-alpha; }
+.inline-result__text ul ul,
+.inline-result__text ol ul,
+.inline-result__text ul ol,
+.inline-result__text ol ol {
+  margin: 0.15em 0;
+  padding-left: 1.4em;
+}
+
+/* Nested lists — level 3+ */
+.inline-result__text ul ul ul,
+.inline-result__text ol ul ul { list-style-type: square; }
+.inline-result__text ul ul ul,
+.inline-result__text ol ol ol,
+.inline-result__text ul ol ul,
+.inline-result__text ol ul ol {
+  margin: 0.1em 0;
+  padding-left: 1.3em;
+}
+
+.inline-result__text li {
+  margin: 0.2em 0;
+}
+.inline-result__text li > p { margin: 0; }
+
+/* Inline emphasis */
+.inline-result__text strong { font-weight: 600; }
+.inline-result__text em { font-style: italic; }
+
+/* Blockquote */
+.inline-result__text blockquote {
+  margin: 0.6em 0;
+  padding: 0.3em 0 0.3em 0.9em;
+  border-left: 3px solid var(--color-border-default);
+  color: var(--color-fg-muted);
   font-style: italic;
 }
 
+/* Inline code */
 .inline-result__text code {
   font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
   font-size: 12px;
   background-color: var(--color-canvas-inset);
   border: 1px solid var(--color-border-muted);
   border-radius: 3px;
-  padding: 0 4px;
+  padding: 0.1em 0.35em;
+}
+
+/* Fenced code blocks */
+.inline-result__text pre {
+  background-color: var(--color-canvas-inset);
+  border: 1px solid var(--color-border-muted);
+  border-radius: 6px;
+  padding: 0.75em 1em;
+  margin: 0.6em 0;
+  overflow-x: auto;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.inline-result__text pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* Horizontal rule */
+.inline-result__text hr {
+  border: none;
+  border-top: 1px solid var(--color-border-muted);
+  margin: 0.8em 0;
 }
 
 /* Streaming cursor blink */

frontend/src/App.jsx

@@ -12,9 +12,11 @@ function App() {
   const [selectedFile, setSelectedFile] = useState(null)
   const [models, setModels] = useState([])
   const [selectedModel, setSelectedModel] = useState('')
+  const [modelReady, setModelReady] = useState(null) // null=unknown, false=warming, true=ready
   const fileInputRef = useRef(null)
+  const warmupAbortRef = useRef(null)
 
-  const { loading, response, error, streamingText, submit } = useStreaming()
+  const { loading, response, error, streamingText, submit, cancel } = useStreaming()
 
   useEffect(() => {
     let cancelled = false
@@ -37,6 +39,58 @@ function App() {
     return () => { cancelled = true }
   }, [])
 
+  // Warm up the selected model whenever the selection changes.
+  // 1. POST /warmup  — tells Ollama to load the model; only resolves when done.
+  // 2. While waiting, poll GET /warmup/status every 2 s to update the indicator sooner.
+  useEffect(() => {
+    if (!selectedModel) return
+
+    // Cancel any in-flight warmup for the previous model
+    if (warmupAbortRef.current) warmupAbortRef.current.abort()
+    const controller = new AbortController()
+    warmupAbortRef.current = controller
+
+    setModelReady(false)
+
+    // Poll /warmup/status every 2 s until loaded or aborted
+    let pollTimer = null
+    const poll = async () => {
+      if (controller.signal.aborted) return
+      try {
+        const r = await fetch(
+          `${API_BASE}/warmup/status?model=${encodeURIComponent(selectedModel)}`,
+          { signal: controller.signal },
+        )
+        if (r.ok) {
+          const data = await r.json()
+          if (data.loaded) {
+            setModelReady(true)
+            return
+          }
+        }
+      } catch { /* ignore */ }
+      if (!controller.signal.aborted) {
+        pollTimer = setTimeout(poll, 2000)
+      }
+    }
+    poll()
+
+    // POST /warmup — blocks until Ollama has the model in VRAM
+    fetch(`${API_BASE}/warmup`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ model: selectedModel }),
+      signal: controller.signal,
+    })
+      .then(() => { setModelReady(true) })
+      .catch(() => { /* warmup errors are non-fatal */ })
+
+    return () => {
+      controller.abort()
+      clearTimeout(pollTimer)
+    }
+  }, [selectedModel])
+
   const handleSubmit = () =>
     submit(activeTab, {
       youtubeUrl,
@@ -74,13 +128,14 @@ function App() {
         </a>
         <div className="header-actions">
           <select
-            className="model-select"
+            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}
           >
             {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>
@@ -132,7 +187,7 @@ function App() {
                   {activeTab === 'youtube' && (
                     <InlineResult
                       {...resultProps}
-                      loadingLabel="Fetching transcript…"
+                      loadingLabel={streamingText ? 'Generating…' : 'Fetching transcript…'}
                       placeholderText="Fetching transcript…"
                     />
                   )}
@@ -211,6 +266,14 @@ function App() {
                 </div>
 
                 <div className="submit-section">
+                  {loading && (
+                    <button className="btn btn-cancel" onClick={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 ? (
                       <><span className="loading-spinner" style={{ width: 16, height: 16 }} /> Processing...</>

frontend/src/components/InlineResult.jsx

@@ -18,14 +18,16 @@ export default function InlineResult({ error, loading, response, streamingText,
                         {streamingText ? 'Generating…' : (loadingLabel || 'Processing…')}
                         <span className="response-badge" style={{ marginLeft: 'auto' }}>{selectedModel}</span>
                     </div>
-                    <p className="inline-result__text">
-                        {streamingText || (
+                    <div className="inline-result__text inline-result__text--streaming">
+                        {streamingText ? (
+                            <ReactMarkdown>{streamingText}</ReactMarkdown>
+                        ) : (
                             <span className="streaming-placeholder">
                                 {placeholderText || loadingLabel || 'Waiting for model…'}
                             </span>
                         )}
                         <span className="streaming-cursor">▌</span>
-                    </p>
+                    </div>
                 </div>
             )}
             {response && !loading && (
@@ -38,11 +40,7 @@ export default function InlineResult({ error, loading, response, streamingText,
                         <span className="response-badge" style={{ marginLeft: 'auto' }}>{response.model ?? 'phi4-mini'}</span>
                     </div>
                     <div className="inline-result__text">
-                        <ReactMarkdown
-                            components={{ p: ({ children }) => <span>{children}</span> }}
-                        >
-                            {response.summary}
-                        </ReactMarkdown>
+                        <ReactMarkdown>{response.summary}</ReactMarkdown>
                     </div>
                 </div>
             )}

frontend/src/hooks/useStreaming.js

@@ -103,11 +103,19 @@ export function useStreaming() {
 
             setResponse({ summary, success: true, source_type: activeTab, model: selectedModel })
         } catch (err) {
+            if (err.name === 'AbortError') {
+                // User cancelled — clear loading silently, keep any partial text
+                return
+            }
             setError(err.message || 'An error occurred')
         } finally {
             setLoading(false)
         }
     }
 
-    return { loading, response, error, streamingText, submit }
+    const cancel = () => {
+        abortRef.current?.abort()
+    }
+
+    return { loading, response, error, streamingText, submit, cancel }
 }

{src → init}/__init__.py

@@ -1,5 +1,5 @@
 """
-Précis — Model loading, configuration, and fine-tuning utilities.
+Model loading, configuration, and fine-tuning utilities.
 """
 
 from src.config import ModelConfig, TrainingConfig, DataConfig

{src → init}/config.py

@@ -1,4 +1,4 @@
-"""Configuration management for Précis."""
+"""Configuration management."""
 
 from dataclasses import dataclass, field
 from typing import Optional, List

scripts/README.md

@@ -0,0 +1,15 @@
+# Scripts
+
+These are scripts that are run separetly from the app. They are used to collect data and fine-tune the model(s) being run for the actual app's functionality.
+
+## Pull.py
+
+Pull.py pulls (downloads) different datasets that are known to be exemplary fine-tuners for the task of summarization in the way we're trying to perform it. It'll place the data in the data directory.
+
+## Cleaners
+
+Cleaners are scripts that are used to clean up the data that is collected. They are used to remove any irrelevant information from the data. The data is then modified by hand to ensure even better performance.
+
+## Train.py
+
+Train.py simply fine-tunes the model with the cleaned data, and then places the model in the trained_models directory.

scripts/clean.py

@@ -1,5 +1,6 @@
 """
-Clean up the raw data files so as to curate specifically-required 
+Clean up the raw data files so as to curate specifically-required
+* Imports cleaners from the scripts/ folder
 """
 
 import subprocess

scripts/evaluate.py

@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-"""CLI evaluation script for Précis."""
+"""CLI evaluation script for the models"""
 
 import argparse
 import logging