Spaces:

fxsab
/

simpliscribe

Runtime error

App Files Files Community

fxsab commited on Mar 10

Commit

59d56ca

1 Parent(s): de02ad8

Prepare app for local and Docker deploy

Browse files

Files changed (11) hide show

.dockerignore +7 -0
.env.example +9 -0
.gitignore +9 -0
Dockerfile +15 -0
README.md +48 -0
requirements.txt +11 -0
simpliscribe/web.py +3 -9
templates/dashboard.html +334 -0
templates/details.html +89 -0
templates/history.html +59 -0
tests/test_app.py +17 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,7 @@

+.git
+.venv
+__pycache__
+uploads
+data/analysis_history.json
+archive (3)
+synthetic_prescription_dataset

.env.example ADDED Viewed

	@@ -0,0 +1,9 @@

+APP_NAME=SimpliScribe
+APP_ENV=development
+HUGGINGFACEHUB_API_TOKEN=
+HF_CHAT_MODEL=Qwen/Qwen2.5-7B-Instruct
+INFERENCE_PROVIDER=fallback
+MODEL_API_URL=
+MODEL_API_KEY=
+MAX_UPLOAD_MB=10
+REQUEST_TIMEOUT_SECONDS=60

.gitignore ADDED Viewed

	@@ -0,0 +1,9 @@

+.env
+__pycache__/
+*.pyc
+.pytest_cache/
+.venv/
+archive (3)/
+synthetic_prescription_dataset/
+uploads/*
+data/analysis_history.json

Dockerfile ADDED Viewed

	@@ -0,0 +1,15 @@

+FROM python:3.11-slim
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+EXPOSE 7860
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md ADDED Viewed

	@@ -0,0 +1,48 @@

+# SimpliScribe
+SimpliScribe is a FastAPI application that extracts text from prescription images or PDFs and turns that OCR output into a structured medication summary.
+## Runtime options
+- `INFERENCE_PROVIDER=fallback`
+  Uses a local heuristic fallback and does not require external model credentials.
+- `INFERENCE_PROVIDER=huggingface`
+  Uses the Hugging Face Inference API with `HUGGINGFACEHUB_API_TOKEN` and `HF_CHAT_MODEL`.
+- `INFERENCE_PROVIDER=endpoint`
+  Sends OCR text to a compatible HTTP endpoint using `MODEL_API_URL` and optional `MODEL_API_KEY`.
+## Local development
+```bash
+python -m venv .venv
+.venv\Scripts\activate
+pip install -r requirements.txt
+copy .env.example .env
+uvicorn app:app --reload
+```
+Open `http://127.0.0.1:8000`.
+## Testing
+```bash
+pytest
+```
+## Docker deployment
+```bash
+docker build -t simpliscribe .
+docker run -p 7860:7860 --env-file .env simpliscribe
+```
+## Hugging Face Spaces
+This project is ready for a Docker Space.
+1. Create a new Hugging Face Space with the Docker SDK.
+2. Push this repository to the Space.
+3. Add the environment variables from `.env.example` in the Space settings.
+4. Expose port `7860`.
+For an external hosted model, set `INFERENCE_PROVIDER=endpoint` and point `MODEL_API_URL` at your inference endpoint.

requirements.txt ADDED Viewed

	@@ -0,0 +1,11 @@

+easyocr
+fastapi
+huggingface_hub
+httpx
+jinja2
+Pillow
+PyMuPDF
+pytest
+python-dotenv
+python-multipart
+uvicorn[standard]

simpliscribe/web.py CHANGED Viewed

@@ -47,9 +47,9 @@ async def save_upload(file: UploadFile) -> Path:
 async def render_dashboard(request: Request, templates) -> HTMLResponse:
     return templates.TemplateResponse(
         "dashboard.html",
         {
-            "request": request,
             "recent_analyses": load_history()[:5],
             "max_upload_mb": settings.max_upload_mb,
             "app_name": settings.app_name,
@@ -58,20 +58,14 @@ async def render_dashboard(request: Request, templates) -> HTMLResponse:
 async def render_history(request: Request, templates) -> HTMLResponse:
-    return templates.TemplateResponse(
-        "history.html",
-        {"request": request, "analyses": load_history(), "app_name": settings.app_name},
-    )
 async def render_details(request: Request, analysis_id: str, templates) -> HTMLResponse:
     analysis = get_analysis_record(analysis_id)
     if analysis is None:
         raise HTTPException(status_code=404, detail="Analysis not found.")
-    return templates.TemplateResponse(
-        "details.html",
-        {"request": request, "analysis": analysis, "app_name": settings.app_name},
-    )
 async def history_payload() -> dict[str, Any]:

 async def render_dashboard(request: Request, templates) -> HTMLResponse:
     return templates.TemplateResponse(
+        request,
         "dashboard.html",
         {
             "recent_analyses": load_history()[:5],
             "max_upload_mb": settings.max_upload_mb,
             "app_name": settings.app_name,
 async def render_history(request: Request, templates) -> HTMLResponse:
+    return templates.TemplateResponse(request, "history.html", {"analyses": load_history(), "app_name": settings.app_name})
 async def render_details(request: Request, analysis_id: str, templates) -> HTMLResponse:
     analysis = get_analysis_record(analysis_id)
     if analysis is None:
         raise HTTPException(status_code=404, detail="Analysis not found.")
+    return templates.TemplateResponse(request, "details.html", {"analysis": analysis, "app_name": settings.app_name})
 async def history_payload() -> dict[str, Any]:

templates/dashboard.html ADDED Viewed

	@@ -0,0 +1,334 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>{{ app_name }} | Prescription Dashboard</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+    <script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#6600ff",
+                        "background-light": "#f7f5f8",
+                        "background-dark": "#170f23",
+                    },
+                    fontFamily: {
+                        "display": ["Inter"]
+                    },
+                    borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
+                },
+            },
+        }
+    </script>
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+    </style>
+</head>
+<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen">
+<header class="sticky top-0 z-50 border-b border-primary/10 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md">
+    <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+            <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-white">
+                <span class="material-symbols-outlined text-2xl">health_metrics</span>
+            </div>
+            <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">{{ app_name }}</h1>
+        </div>
+        <nav class="hidden md:flex items-center gap-10">
+            <a class="text-sm font-semibold text-primary" href="/">Dashboard</a>
+            <a class="text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" href="/history">History</a>
+            <a class="text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" href="#recent-activity">Recent Activity</a>
+        </nav>
+        <span class="rounded-full border border-primary/20 bg-primary/5 px-4 py-2 text-xs font-semibold text-primary">Configurable inference pipeline</span>
+    </div>
+</header>
+<main class="max-w-5xl mx-auto px-6 py-12">
+    <section class="text-center mb-16">
+        <h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 dark:text-white mb-4 tracking-tight">
+            Your Health, <span class="text-primary">Decoded.</span>
+        </h2>
+        <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed">
+            Upload a prescription image or PDF and convert OCR output into a cleaner medication summary that is easier to review.
+        </p>
+    </section>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
+        <div class="bg-white dark:bg-slate-900/50 p-8 rounded-xl border border-primary/10 shadow-sm flex flex-col items-center justify-center text-center">
+            <form id="upload-form" class="w-full h-64 border-2 border-dashed border-primary/30 rounded-xl bg-primary/5 flex flex-col items-center justify-center group cursor-pointer hover:border-primary hover:bg-primary/10 transition-all relative">
+                <input type="file" id="prescription_image" name="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/png, image/jpeg, image/webp, application/pdf">
+                <span class="material-symbols-outlined text-4xl text-primary mb-3">cloud_upload</span>
+                <p class="text-slate-900 dark:text-white font-semibold mb-1" id="upload-text">Drag and drop prescription</p>
+                <p class="text-xs text-slate-500 mb-6 uppercase tracking-widest font-bold">PDF, JPG, PNG, or WEBP</p>
+                <button type="button" class="bg-primary text-white px-6 py-3 rounded-lg font-bold text-sm shadow-lg shadow-primary/20 hover:scale-[1.02] transition-transform pointer-events-none">
+                    Select File
+                </button>
+            </form>
+            <div class="mt-4 w-full text-center">
+                 <button id="analyze-btn" class="hidden bg-slate-900 text-white dark:bg-white dark:text-slate-900 px-8 py-3 rounded-lg font-bold text-sm shadow-lg hover:scale-[1.02] transition-transform mx-auto">Analyze Now</button>
+            </div>
+            <p class="mt-4 text-xs text-slate-500">Maximum upload size: {{ max_upload_mb }} MB</p>
+            <div class="mt-6 flex items-center gap-2 text-slate-500 text-xs text-center mx-auto justify-center">
+                <span class="material-symbols-outlined text-sm">info</span>
+                Results are stored locally in the workspace history file until you clear them.
+            </div>
+        </div>
+        <div class="relative group">
+            <div class="absolute -inset-1 bg-gradient-to-r from-primary/20 to-primary/5 rounded-2xl blur opacity-25"></div>
+            <div class="relative h-full bg-white dark:bg-slate-800 rounded-xl border border-primary/10 overflow-hidden shadow-xl">
+                <div class="absolute top-0 left-0 w-full h-1 bg-primary"></div>
+                <div class="p-6 h-full flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-sm font-bold uppercase tracking-wider text-slate-400">Scan Preview</h3>
+                        <span id="scan-status" class="px-2 py-1 bg-slate-100 text-slate-700 dark:bg-slate-900/30 dark:text-slate-400 text-[10px] font-bold rounded uppercase">Awaiting File</span>
+                    </div>
+                    <div class="flex-1 rounded-lg bg-slate-50 dark:bg-slate-900/80 border border-slate-100 dark:border-slate-700 overflow-hidden relative flex items-center justify-center">
+                        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
+                        <img id="preview-image" class="hidden w-full h-full object-cover" src="" alt="Preview"/>
+                        <div id="pdf-preview-label" class="hidden absolute inset-6 rounded-2xl border border-dashed border-primary/30 bg-white/80 dark:bg-slate-800/80 px-6 py-8 text-center">
+                            <span class="material-symbols-outlined text-5xl text-primary">picture_as_pdf</span>
+                            <p class="mt-4 text-sm font-bold text-slate-900 dark:text-white">PDF document ready</p>
+                            <p class="mt-2 text-xs text-slate-500">The first page will be converted before OCR.</p>
+                        </div>
+                        <div id="processing-overlay" class="hidden absolute inset-0 flex items-center justify-center bg-slate-900/10 dark:bg-slate-100/10 backdrop-blur-sm z-10 transition-opacity">
+                            <div class="bg-white/90 dark:bg-slate-800/90 px-4 py-2 rounded-full shadow-lg border border-primary/20 flex items-center gap-2">
+                                <span class="w-2 h-2 bg-primary rounded-full animate-pulse"></span>
+                                <span class="text-xs font-bold text-slate-700 dark:text-slate-200">Processing Document...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <section id="results-area" class="hidden">
+        <div class="flex items-center justify-between mb-8">
+            <h3 class="text-2xl font-bold text-slate-900 dark:text-white">Analyzed Medications</h3>
+            <button id="download-report-btn" class="text-primary text-sm font-bold flex items-center gap-1 hover:underline">
+                Download Report
+                <span class="material-symbols-outlined text-sm">download</span>
+            </button>
+        </div>
+        <div id="medications-container" class="space-y-6"></div>
+    </section>
+    <section id="recent-activity" class="mt-16">
+        <div class="flex items-center justify-between gap-4 mb-6">
+            <div>
+                <h3 class="text-2xl font-bold text-slate-900 dark:text-white">Recent Activity</h3>
+                <p class="text-sm text-slate-500">The latest saved analyses from this workspace.</p>
+            </div>
+            <a href="/history" class="text-sm font-bold text-primary hover:underline">View all history</a>
+        </div>
+        {% if recent_analyses %}
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {% for analysis in recent_analyses %}
+            <a href="/details/{{ analysis.id }}" class="block rounded-xl border border-primary/10 bg-white dark:bg-slate-900/50 p-5 shadow-sm hover:shadow-md transition-shadow">
+                <p class="text-[11px] uppercase tracking-[0.2em] text-slate-500 font-bold">{{ analysis.created_at }}</p>
+                <h4 class="mt-2 text-lg font-bold text-slate-900 dark:text-white">{{ analysis.filename }}</h4>
+                <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
+                    {{ analysis.medications|length }} medication{% if analysis.medications|length != 1 %}s{% endif %} extracted
+                </p>
+            </a>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="rounded-xl border border-dashed border-primary/20 bg-white/70 dark:bg-slate-900/40 p-8 text-center text-sm text-slate-500">
+            No saved analyses yet. Your recent scans will appear here.
+        </div>
+        {% endif %}
+    </section>
+</main>
+<template id="medication-card-template">
+    <div class="bg-white dark:bg-slate-900 rounded-xl border border-primary/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+        <div class="flex flex-col gap-6 p-8">
+            <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
+                <div class="flex items-start gap-4">
+                    <div class="med-badge flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-lg font-black text-primary"></div>
+                    <div>
+                        <div class="flex items-center gap-3 flex-wrap">
+                            <h4 class="med-name text-2xl font-bold text-slate-900 dark:text-white"></h4>
+                            <span class="med-type bg-primary text-white text-[10px] font-black px-2 py-1 rounded-full uppercase tracking-widest"></span>
+                        </div>
+                        <p class="med-desc mt-2 text-slate-500 text-sm"></p>
+                    </div>
+                </div>
+                <a href="#" class="med-details-link bg-slate-50 dark:bg-slate-800 hover:bg-primary/10 hover:text-primary transition-all text-slate-600 dark:text-slate-300 px-4 py-2 rounded-lg text-sm font-bold border border-slate-100 dark:border-slate-700">
+                    Full Details
+                </a>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="p-3 rounded-lg bg-background-light dark:bg-slate-800/50">
+                    <p class="text-[10px] uppercase font-bold text-slate-400 mb-1">Dosage</p>
+                    <p class="med-dosage text-sm font-bold text-slate-800 dark:text-slate-200"></p>
+                </div>
+                <div class="p-3 rounded-lg bg-background-light dark:bg-slate-800/50">
+                    <p class="text-[10px] uppercase font-bold text-slate-400 mb-1">Frequency</p>
+                    <p class="med-frequency text-sm font-bold text-slate-800 dark:text-slate-200"></p>
+                </div>
+                <div class="p-3 rounded-lg bg-background-light dark:bg-slate-800/50">
+                    <p class="text-[10px] uppercase font-bold text-slate-400 mb-1">Duration</p>
+                    <p class="med-duration text-sm font-bold text-slate-800 dark:text-slate-200"></p>
+                </div>
+            </div>
+            <div class="p-4 rounded-lg bg-primary/5 border border-primary/10 flex gap-3">
+                <span class="material-symbols-outlined text-primary text-xl">fact_check</span>
+                <div>
+                    <p class="text-xs font-bold text-primary uppercase tracking-tighter mb-1">Medication Note</p>
+                    <p class="med-insight text-sm text-slate-700 dark:text-slate-300 leading-relaxed"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<footer class="mt-20 border-t border-primary/10 py-12 bg-white dark:bg-slate-950">
+    <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
+        <div class="flex items-center gap-3 grayscale opacity-70">
+            <div class="w-8 h-8 bg-slate-400 rounded-lg flex items-center justify-center text-white">
+                <span class="material-symbols-outlined text-lg">health_metrics</span>
+            </div>
+            <h1 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ app_name }}</h1>
+        </div>
+        <div class="flex items-center gap-2 bg-slate-100 dark:bg-slate-900/30 px-4 py-2 rounded-full border border-slate-200 dark:border-slate-700">
+            <span class="material-symbols-outlined text-slate-600 dark:text-slate-300 text-lg">memory</span>
+            <span class="text-xs font-bold text-slate-700 dark:text-slate-300 tracking-wide uppercase">Local history enabled</span>
+        </div>
+    </div>
+</footer>
+<script>
+    const fileInput = document.getElementById('prescription_image');
+    const previewImage = document.getElementById('preview-image');
+    const uploadText = document.getElementById('upload-text');
+    const scanStatus = document.getElementById('scan-status');
+    const analyzeBtn = document.getElementById('analyze-btn');
+    const pdfPreviewLabel = document.getElementById('pdf-preview-label');
+    const processingOverlay = document.getElementById('processing-overlay');
+    const resultsArea = document.getElementById('results-area');
+    const medicationsContainer = document.getElementById('medications-container');
+    const template = document.getElementById('medication-card-template');
+    const pdfPlaceholderSvg = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800">
+            <rect width="1200" height="800" fill="#f8fafc"/>
+            <rect x="320" y="120" width="560" height="560" rx="42" fill="#ffffff" stroke="#e2e8f0" stroke-width="12"/>
+            <text x="600" y="330" text-anchor="middle" fill="#6600ff" font-size="80" font-family="Arial, sans-serif">PDF</text>
+            <text x="600" y="420" text-anchor="middle" fill="#475569" font-size="32" font-family="Arial, sans-serif">Preview generated from first page at scan time</text>
+        </svg>
+    `)}`;
+    fileInput.addEventListener('change', function(e) {
+        if(e.target.files && e.target.files[0]) {
+            const file = e.target.files[0];
+            uploadText.innerText = file.name;
+            scanStatus.className = "px-2 py-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 text-[10px] font-bold rounded uppercase";
+            scanStatus.innerText = "Ready to Scan";
+            analyzeBtn.classList.remove('hidden');
+            if (file.type === 'application/pdf') {
+                previewImage.src = pdfPlaceholderSvg;
+                previewImage.classList.remove('hidden');
+                pdfPreviewLabel.classList.remove('hidden');
+                return;
+            }
+            pdfPreviewLabel.classList.add('hidden');
+            const reader = new FileReader();
+            reader.onload = function(loadEvent) {
+                previewImage.src = loadEvent.target.result;
+                previewImage.classList.remove('hidden');
+            };
+            reader.readAsDataURL(file);
+        }
+    });
+    analyzeBtn.addEventListener('click', async function() {
+        if(!fileInput.files[0]) return;
+        processingOverlay.classList.remove('hidden');
+        scanStatus.innerText = "Active Scan";
+        analyzeBtn.disabled = true;
+        analyzeBtn.innerHTML = "Processing...";
+        analyzeBtn.classList.add("opacity-50");
+        const formData = new FormData();
+        formData.append("file", fileInput.files[0]);
+        try {
+            const response = await fetch('/api/analyze', {
+                method: 'POST',
+                body: formData
+            });
+            const data = await response.json();
+            if(!response.ok) throw new Error(data.error || data.detail || "Server Error");
+            medicationsContainer.innerHTML = '';
+            if (data.medications && data.medications.length > 0) {
+                data.medications.forEach(med => {
+                    const clone = template.content.cloneNode(true);
+                    clone.querySelector('.med-name').textContent = med.name || 'Unknown';
+                    clone.querySelector('.med-desc').textContent = med.category || 'General Medication';
+                    clone.querySelector('.med-dosage').textContent = med.dosage || 'N/A';
+                    clone.querySelector('.med-frequency').textContent = med.frequency || 'N/A';
+                    clone.querySelector('.med-duration').textContent = med.duration || 'N/A';
+                    clone.querySelector('.med-insight').textContent = med.insight || 'Follow doctor\'s instructions carefully.';
+                    clone.querySelector('.med-type').textContent = med.type || 'MEDICATION';
+                    const badgeText = (med.name || 'M').slice(0, 2).toUpperCase();
+                    clone.querySelector('.med-badge').textContent = badgeText;
+                    clone.querySelector('.med-details-link').href = data.analysis_id ? `/details/${data.analysis_id}` : '/history';
+                    medicationsContainer.appendChild(clone);
+                });
+                scanStatus.className = "px-2 py-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 text-[10px] font-bold rounded uppercase";
+                scanStatus.innerText = "Scan Complete";
+                resultsArea.classList.remove('hidden');
+                resultsArea.scrollIntoView({ behavior: 'smooth' });
+            } else {
+                alert(data.error || "Could not extract any medications. Please try another image.");
+                scanStatus.className = "px-2 py-1 bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 text-[10px] font-bold rounded uppercase";
+                scanStatus.innerText = "Scan Failed";
+            }
+        } catch(err) {
+            console.error(err);
+            alert(err.message || "Error analyzing prescription. Make sure backend is running.");
+            scanStatus.className = "px-2 py-1 bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 text-[10px] font-bold rounded uppercase";
+            scanStatus.innerText = "Error";
+        } finally {
+            processingOverlay.classList.add('hidden');
+            analyzeBtn.disabled = false;
+            analyzeBtn.innerHTML = "Analyze Again";
+            analyzeBtn.classList.remove("opacity-50");
+        }
+    });
+    const downloadReportBtn = document.getElementById('download-report-btn');
+    if(downloadReportBtn) {
+        downloadReportBtn.addEventListener('click', function() {
+            const resultsAreaToPrint = document.getElementById('results-area');
+            const opt = {
+                margin:       10,
+                filename:     'SimpliScribe_Report.pdf',
+                image:        { type: 'jpeg', quality: 0.98 },
+                html2canvas:  { scale: 2 },
+                jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
+            };
+            html2pdf().set(opt).from(resultsAreaToPrint).save();
+        });
+    }
+</script>
+</body>
+</html>

templates/details.html ADDED Viewed

	@@ -0,0 +1,89 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>{{ app_name }} | Analysis Details</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+    </style>
+</head>
+<body class="min-h-screen bg-slate-50 text-slate-900">
+    <header class="border-b border-slate-200 bg-white/90 backdrop-blur sticky top-0 z-20">
+        <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+            <a href="/" class="text-xl font-bold tracking-tight text-slate-900">{{ app_name }}</a>
+            <nav class="flex items-center gap-6 text-sm font-semibold">
+                <a href="/" class="text-slate-500 hover:text-slate-900">Dashboard</a>
+                <a href="/history" class="text-slate-500 hover:text-slate-900">History</a>
+            </nav>
+        </div>
+    </header>
+    <main class="max-w-6xl mx-auto px-6 py-10">
+        <div class="mb-8 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+            <div>
+                <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500">Analysis Detail</p>
+                <h1 class="mt-1 text-3xl font-extrabold tracking-tight">{{ analysis.filename }}</h1>
+                <p class="mt-2 text-sm text-slate-600">Created at {{ analysis.created_at }}</p>
+            </div>
+            <a href="/history" class="inline-flex items-center justify-center rounded-lg border border-slate-300 px-4 py-2 text-sm font-bold text-slate-800 hover:border-slate-900 hover:text-slate-900">
+                Back to History
+            </a>
+        </div>
+        <section class="grid gap-8 lg:grid-cols-[1.4fr_0.9fr]">
+            <div class="space-y-4">
+                {% for med in analysis.medications %}
+                <article class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+                    <div class="grid gap-0 md:grid-cols-[160px_1fr]">
+                        <div class="flex min-h-[220px] items-center justify-center bg-primary/5 text-4xl font-black text-primary">
+                            {{ med.name[:2]|upper }}
+                        </div>
+                        <div class="p-6">
+                            <div class="flex flex-wrap items-start justify-between gap-3">
+                                <div>
+                                    <h2 class="text-2xl font-bold text-slate-900">{{ med.name }}</h2>
+                                    <p class="mt-1 text-sm text-slate-500">{{ med.category }}</p>
+                                </div>
+                                <span class="rounded-full bg-slate-900 px-3 py-1 text-xs font-bold uppercase tracking-[0.2em] text-white">{{ med.type }}</span>
+                            </div>
+                            <div class="mt-6 grid gap-3 sm:grid-cols-3">
+                                <div class="rounded-xl bg-slate-50 p-4">
+                                    <p class="text-xs font-bold uppercase tracking-[0.15em] text-slate-500">Dosage</p>
+                                    <p class="mt-2 text-sm font-bold text-slate-900">{{ med.dosage }}</p>
+                                </div>
+                                <div class="rounded-xl bg-slate-50 p-4">
+                                    <p class="text-xs font-bold uppercase tracking-[0.15em] text-slate-500">Frequency</p>
+                                    <p class="mt-2 text-sm font-bold text-slate-900">{{ med.frequency }}</p>
+                                </div>
+                                <div class="rounded-xl bg-slate-50 p-4">
+                                    <p class="text-xs font-bold uppercase tracking-[0.15em] text-slate-500">Duration</p>
+                                    <p class="mt-2 text-sm font-bold text-slate-900">{{ med.duration }}</p>
+                                </div>
+                            </div>
+                            <div class="mt-6 rounded-xl border border-emerald-100 bg-emerald-50 p-4 text-sm text-emerald-900">
+                                {{ med.insight }}
+                            </div>
+                        </div>
+                    </div>
+                </article>
+                {% endfor %}
+            </div>
+            <aside class="space-y-6">
+                <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <h2 class="text-lg font-bold text-slate-900">Raw OCR Text</h2>
+                    <p class="mt-4 whitespace-pre-wrap break-words text-sm leading-7 text-slate-700">{{ analysis.raw_text }}</p>
+                </section>
+                <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <h2 class="text-lg font-bold text-slate-900">Summary</h2>
+                    <p class="mt-4 text-sm text-slate-700">
+                        {{ analysis.medications|length }} medication{% if analysis.medications|length != 1 %}s{% endif %} were identified from this document.
+                    </p>
+                </section>
+            </aside>
+        </section>
+    </main>
+</body>
+</html>

templates/history.html ADDED Viewed

	@@ -0,0 +1,59 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>{{ app_name }} | Analysis History</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+    </style>
+</head>
+<body class="min-h-screen bg-slate-50 text-slate-900">
+    <header class="border-b border-slate-200 bg-white/90 backdrop-blur sticky top-0 z-20">
+        <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+            <a href="/" class="text-xl font-bold tracking-tight text-slate-900">{{ app_name }}</a>
+            <nav class="flex items-center gap-6 text-sm font-semibold">
+                <a href="/" class="text-slate-500 hover:text-slate-900">Dashboard</a>
+                <a href="/history" class="text-primary-700 text-slate-900">History</a>
+            </nav>
+        </div>
+    </header>
+    <main class="max-w-6xl mx-auto px-6 py-10">
+        <div class="flex items-end justify-between gap-4 mb-8">
+            <div>
+                <p class="text-sm uppercase tracking-[0.2em] text-slate-500 font-semibold">Saved Analyses</p>
+                <h1 class="text-3xl font-extrabold tracking-tight">Prescription analysis history</h1>
+            </div>
+            <a href="/" class="inline-flex items-center rounded-lg bg-slate-900 px-4 py-2 text-sm font-bold text-white">New Analysis</a>
+        </div>
+        {% if analyses %}
+        <div class="grid gap-4">
+            {% for analysis in analyses %}
+            <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                    <div>
+                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500">{{ analysis.created_at }}</p>
+                        <h2 class="mt-1 text-xl font-bold text-slate-900">{{ analysis.filename }}</h2>
+                        <p class="mt-2 text-sm text-slate-600">
+                            {{ analysis.medications|length }} medication{% if analysis.medications|length != 1 %}s{% endif %} extracted
+                        </p>
+                    </div>
+                    <a href="/details/{{ analysis.id }}" class="inline-flex items-center justify-center rounded-lg border border-slate-300 px-4 py-2 text-sm font-bold text-slate-800 hover:border-slate-900 hover:text-slate-900">
+                        View Details
+                    </a>
+                </div>
+            </article>
+            {% endfor %}
+        </div>
+        {% else %}
+        <section class="rounded-2xl border border-dashed border-slate-300 bg-white p-12 text-center">
+            <h2 class="text-2xl font-bold text-slate-900">No analyses saved yet</h2>
+            <p class="mt-3 text-sm text-slate-600">Run a prescription scan from the dashboard to start building your history.</p>
+        </section>
+        {% endif %}
+    </main>
+</body>
+</html>

tests/test_app.py ADDED Viewed

	@@ -0,0 +1,17 @@

+from fastapi.testclient import TestClient
+from simpliscribe.main import app
+client = TestClient(app)
+def test_dashboard_route():
+    response = client.get("/")
+    assert response.status_code == 200
+def test_history_api_route():
+    response = client.get("/api/history")
+    assert response.status_code == 200
+    assert "analyses" in response.json()