SmartNotes_AI / templates /index.html
Urmila Saini
add DockerFile
b9fa4a6
Raw
History Blame Contribute Delete
7.95 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SmartNotes PDF OCR</title>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<main class="app-shell">
<section class="workspace">
<div class="panel upload-panel">
<div class="brand-row">
<span class="brand-mark">SN</span>
<div>
<h1>SmartNotes AI</h1>
<p>Advanced RAG-Powered PDF Intelligence Platform</p>
<span class="brand-subline">Hybrid Retrieval / Reranking / Citations / Evaluation</span>
</div>
</div>
<form id="uploadForm" class="drop-zone">
<input id="pdfInput" type="file" name="file" accept="application/pdf" />
<div class="drop-content">
<strong id="fileName">Choose or drop a PDF</strong>
<span>Direct text first, OCR only when needed</span>
</div>
<button type="submit">Upload PDF</button>
</form>
<div id="fileCard" class="file-card is-hidden">
<div class="file-icon">PDF</div>
<div>
<strong id="uploadedFileName">notes.pdf</strong>
<span id="uploadedFileMeta">0 Pages / 0 MB</span>
<em>Uploaded Successfully</em>
</div>
</div>
<div id="pdfPreviewCard" class="pdf-preview-card is-hidden">
<div class="section-head">
<h2>PDF Preview</h2>
<span>First page</span>
</div>
<iframe id="pdfPreview" title="PDF first page preview"></iframe>
</div>
<div class="status-grid">
<div>
<span>Route</span>
<strong id="routeValue">Waiting</strong>
</div>
<div>
<span>Pages</span>
<strong id="pageCount">0</strong>
</div>
<div>
<span>Direct Text</span>
<strong id="directText">-</strong>
</div>
</div>
<div id="uploadMessage" class="upload-message">Upload a PDF to begin.</div>
</div>
<div class="panel query-panel">
<div class="result-toolbar">
<h2>Ask PDF</h2>
<span id="activeDocument">No document indexed</span>
</div>
<form id="queryForm" class="query-form">
<input id="queryInput" type="text" placeholder="Ask your question here" />
<button type="submit">Ask</button>
</form>
<div class="answer-card">
<span>Answer</span>
<div id="confidenceBadge" class="confidence-badge neutral">Confidence pending</div>
<div id="answerBox" class="answer-box">Upload a PDF first. Answer will appear here.</div>
<div id="citations" class="citation-list"></div>
</div>
</div>
<div class="panel dashboard-panel">
<div class="result-toolbar">
<h2>Retrieval Analytics</h2>
<span id="dashboardStatus">Waiting for PDF</span>
</div>
<details class="advanced-dashboard" open>
<summary>RAG Analytics Dashboard</summary>
<div class="dashboard-grid">
<section class="metric-section">
<div class="section-head">
<h2>Indexing Timeline</h2>
<span id="docStatus">Waiting</span>
</div>
<div id="indexSteps" class="timeline-list"></div>
</section>
<section class="metric-section">
<div class="section-head">
<h2>Chunking Comparison</h2>
<span id="bestChunking" class="winner-badge">Evaluation Pending</span>
</div>
<div id="chunkComparison" class="comparison-table"></div>
</section>
<section class="metric-section">
<h2>Retrieval Metrics</h2>
<div id="hybridStats" class="stat-grid">
<div><span>Vector</span><strong>-</strong></div>
<div><span>BM25</span><strong>-</strong></div>
<div><span>Merged</span><strong>-</strong></div>
<div><span>Reranked</span><strong>-</strong></div>
</div>
</section>
<section class="metric-section">
<h2>Evaluation Dashboard</h2>
<div id="evaluationCards" class="stat-grid">
<div><span>Precision</span><strong>-</strong></div>
<div><span>Recall</span><strong>-</strong></div>
<div><span>Faithfulness</span><strong>-</strong></div>
<div><span>Relevancy</span><strong>-</strong></div>
</div>
</section>
<section class="metric-section">
<h2>CRAG Retrieval Quality</h2>
<div id="cragStatus" class="crag-box neutral">
<strong>Waiting</strong>
<span>Run a query to grade retrieval quality.</span>
</div>
</section>
<section class="metric-section">
<h2>Retrieval Pipeline</h2>
<div id="pipelineViz" class="pipeline-viz"></div>
</section>
<section class="metric-section">
<h2>Hallucination Status</h2>
<div id="hallucinationCard" class="hallucination-card neutral">
<span>Answer Source Coverage</span>
<strong>-</strong>
<span>Faithfulness</span>
<strong>-</strong>
<em>Waiting for answer</em>
</div>
</section>
</div>
<section class="metric-section retrieval-section">
<div class="section-head">
<h2>Top Retrieved Chunks</h2>
<span>🧠 Parent-Child Retrieval</span>
</div>
<div id="retrievedChunks" class="retrieved-chunks"></div>
</section>
<section class="metric-section recommendation-section">
<h2>Best Chunking Recommendation</h2>
<div id="bestRecommendation" class="recommendation-box">Index a PDF to compare chunking strategies.</div>
</section>
</details>
</div>
<div class="panel history-panel">
<div class="result-toolbar">
<h2>Recent Questions</h2>
<span id="historyCount">0 saved</span>
</div>
<div id="queryHistory" class="query-history">
<span>No questions yet.</span>
</div>
</div>
<div class="panel details-panel">
<div class="result-toolbar">
<h2>Extracted Text</h2>
<button id="copyButton" type="button">Copy Text</button>
</div>
<details>
<summary>Show extracted text and page OCR details</summary>
<div id="pageDetails" class="page-details"></div>
<pre id="resultText">Upload a PDF to see extracted text here.</pre>
</details>
<form id="feedbackForm" class="feedback-form">
<select id="feedbackRating">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
<input id="feedbackComment" type="text" placeholder="Feedback" />
<button type="submit">Save Feedback</button>
</form>
</div>
</section>
</main>
<script src="/static/app.js?v=20260625-safe-json-errors"></script>
</body>
</html>