Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="ResearchRAG Browser Edition: evidence-first document search with transparent citations.">
  <title>ResearchRAG | Evidence-First Document Search</title>
  <style>
    :root{color-scheme:dark;--bg:#07111f;--panel:#0e2033;--panel2:#10283c;--stroke:#284056;--muted:#a6bfd0;--text:#f2f7ff;--blue:#54a6ff;--turq:#4fe0c1;--yellow:#ffc774;--red:#ffb1af}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 60% 30% at 86% 0,rgba(35,96,138,.24),transparent),var(--bg);color:var(--text);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
    main{max-width:1170px;padding:44px 22px 90px;margin:auto}h1,h2,h3,p{margin-top:0}header{padding:0 0 26px}header .eyebrow{color:#80c9ed;text-transform:uppercase;letter-spacing:.19em;font-size:11px;font-weight:800;margin-bottom:9px}.hero h1{font-size:clamp(36px,6.5vw,72px);letter-spacing:-.05em;line-height:1.05;margin:0 0 18px}.hero p{color:#c1d5e2;max-width:770px;font-size:17px}.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.badges span{border:1px solid #385b74;border-radius:40px;padding:4px 10px;color:#d3e9f4;font-size:12px}
    .layout{display:grid;grid-template-columns:390px minmax(0,1fr);gap:20px;align-items:start}.column{display:flex;flex-direction:column;gap:18px}.card{background:linear-gradient(150deg,rgba(18,43,63,.95),rgba(9,28,45,.97));border:1px solid var(--stroke);border-radius:18px;padding:22px;box-shadow:0 14px 45px rgba(0,0,0,.09)}.card h2{font-size:20px;letter-spacing:-.02em;margin:0 0 6px}.subtitle,.muted{color:var(--muted)}.subtitle{font-size:13px;margin-bottom:20px}.field{display:flex;flex-direction:column;gap:7px;margin:16px 0}.field label{font-weight:700;font-size:13px}.field small{color:var(--muted)}input[type=text],textarea{color:var(--text);width:100%;background:#081829;border:1px solid #365269;padding:12px 13px;border-radius:11px;font:inherit;resize:vertical;outline:none}input[type=text]:focus,textarea:focus{border-color:var(--turq);box-shadow:0 0 0 3px rgba(79,224,193,.12)}textarea{min-height:104px}#question{min-height:110px}button{cursor:pointer;font:inherit;font-weight:750;border-radius:10px;border:1px solid #3d6078;padding:10px 13px;background:#19344b;color:#e4f4fc;transition:filter .15s,transform .15s}button:hover:not(:disabled){filter:brightness(1.15)}button:focus-visible{outline:3px solid #83d8ec;outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}.primary{border-color:#3998ff;background:#287ae6;color:white}.secondary{background:#122a3d}.button-row{display:flex;flex-wrap:wrap;gap:9px}.button-row>*{flex:1 1 auto}.drop{border:2px dashed #42657a;padding:18px;border-radius:12px;text-align:center;display:block;cursor:pointer;background:#0c1f31}.drop:hover,.drop.over{border-color:var(--turq);background:#103147}.drop input{position:absolute;opacity:0;width:1px;height:1px}.drop span{display:block;color:#dbeef7;font-weight:700}.drop small{color:var(--muted)}.doc-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #2a4557}.doc-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.doc-len{font-size:11px;color:var(--muted);white-space:nowrap}.delete{background:none;padding:3px 7px;font-size:11px;border-color:#536a76}.empty{font-size:13px}#status{font-size:13px;padding:11px 13px;border-radius:10px;background:#10283c;color:#c8dfe8;border:1px solid #31536a}#status[data-type=error]{color:#ffd7d4;border-color:#a95c5c;background:#3a212b}#status[data-type=ok]{color:#d1ffeb;border-color:#357a6d;background:#11392f}
    .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:17px}.metric{border:1px solid #315069;border-radius:12px;background:#0b1c2e;padding:12px}.metric strong{display:block;font-size:25px;line-height:1.2}.metric span{font-size:11px;color:var(--muted)}.question{background:linear-gradient(160deg,#102b42,#112137);border:1px solid #356180;padding:22px;border-radius:15px}.question h2{font-size:20px;margin-bottom:8px}.tip{font-size:12px;color:#b5c9d7;margin-top:10px}.result-banner{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.result-pill{border-radius:40px;background:#133a40;border:1px solid #326a71;color:#bde8e0;padding:4px 10px;font-size:12px}.advisory{font-size:13px;color:#dfd8ae}.answer-line{line-height:1.65;color:#e4f4fb;border-left:3px solid #3689d1;padding:10px 12px;margin:8px 0 12px;background:rgba(16,49,75,.6);border-radius:0 8px 8px 0}.cite{white-space:nowrap;font-weight:800;color:#8fe6e0}.evidence-card{padding:15px 0;border-top:1px solid #35516b}.evidence-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.evidence-top strong{font-size:14px;color:#e0f7ff;word-break:break-word}.evidence-card p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;color:#cfdfed;margin-bottom:8px}.evidence-card .footnote{font-size:11px;color:#90acbf;margin:0}.score{font-size:12px;color:var(--turq);white-space:nowrap}.warning{margin-top:15px;font-size:12px;color:var(--muted);border-top:1px solid #2c495f;padding-top:16px}footer{margin-top:30px;color:#9fb7ca;font-size:12px}footer a{color:#9cdbfc}code{color:#bdeaff}.privacy{color:#d1e7f1}button.large{font-size:15px;padding:12px 17px}
    @media (max-width:900px){main{padding:25px 14px 60px}.layout{grid-template-columns:1fr}.card{padding:18px}.hero h1{font-size:44px}.hero p{font-size:15px}}@media(max-width:520px){.metrics{grid-template-columns:repeat(3,1fr)}.metric{padding:9px}.metric strong{font-size:19px}}
  </style>
</head>
<body>
<main>
  <header class="hero">
    <div class="eyebrow">RODRIGO PANTOJA · OPEN SOURCE RESEARCH TOOLS</div>
    <h1>📚 ResearchRAG</h1>
    <p>Find evidence across your documents. Ask a question, inspect matched passages, and export source-linked excerpts without sending document text to an AI service.</p>
    <div class="badges"><span>English · Español · Português</span><span>Source-linked excerpts</span><span>Runs in your browser</span><span>Free Static Space</span><span>No generative AI API</span></div>
  </header>
  <div class="layout">
    <div class="column">
      <section class="card" aria-labelledby="library-title">
        <h2 id="library-title">1. Build your document library</h2>
        <p class="subtitle">Load an example set or add your own text. Nothing is transmitted to a server by this application.</p>
        <div class="button-row"><button id="demo" type="button" class="primary">Load 3 example documents</button><button id="reset" type="button">Clear library</button></div>
        <div class="field"><label for="files">Upload text-based files</label><label for="files" id="drop" class="drop"><span>⬆ Drag files here or click to browse</span><small>.txt, .md, .csv · up to 1 MB each</small><input id="files" type="file" accept=".txt,.md,.csv,text/plain,text/markdown,text/csv" multiple></label></div>
        <div class="field"><label for="doc-title">Or paste a document</label><input id="doc-title" type="text" maxlength="130" placeholder="Document title (optional)" autocomplete="off"><textarea id="doc-text" placeholder="Paste research notes, articles or other source text here..." aria-label="Document text"></textarea><button id="add-paste" type="button">Add pasted document</button></div>
        <h3 style="font-size:14px;margin:18px 0 8px">Indexed source documents</h3>
        <div id="documents" aria-live="polite"></div>
        <p class="warning"><strong>Formats:</strong> Paste text or upload TXT, Markdown or CSV. To use PDF/DOCX, first copy or export its selectable text. Scanned PDFs require OCR and are not supported by this static edition.</p>
      </section>
      <section class="card" aria-label="Project methodology">
        <h2>How it works</h2>
        <p class="subtitle" style="margin-bottom:8px">Transparent document retrieval, not an LLM chatbot</p>
        <p class="muted">The app breaks source text into passages, ranks relevant passages using word overlap and character matching, then selects source sentences with document identifiers such as <code>[D1:C2]</code>.</p>
        <p class="muted">It does <strong class="privacy">not</strong> generate new claims, run semantic embeddings, check facts or provide conclusions beyond the uploaded text.</p>
      </section>
    </div>
    <div class="column">
      <section class="card" aria-label="Search documents">
        <div class="metrics" aria-label="Document statistics"><div class="metric"><strong id="metric-docs">0</strong><span>documents</span></div><div class="metric"><strong id="metric-chunks">0</strong><span>source passages</span></div><div class="metric"><strong id="metric-characters">0</strong><span>characters</span></div></div>
        <div class="question"><h2>2. Ask the documents</h2><p class="subtitle">Ask a question that the indexed documents might answer.</p><label class="field" for="question"><span style="font-weight:700">Your research question</span><textarea id="question" placeholder="Example: Why is source verification important in research?"></textarea></label><div class="button-row"><button id="run" type="button" class="primary large" disabled>🔎 Find evidence</button><button id="download" type="button" disabled>↓ Export report (.md)</button></div><p class="tip">Tip: Ctrl/⌘ + Enter runs your question.</p></div>
        <p id="status" role="status" aria-live="polite" style="margin:14px 0 0">Ready.</p>
      </section>
      <section id="results-empty" class="card"><h2>3. Review the findings</h2><p class="muted" style="margin:0">Your cited excerpts will appear here. Start by loading the three example documents, then click “Find evidence”.</p></section>
      <section id="results" class="card" hidden aria-live="polite">
        <div class="result-banner"><h2 style="margin:0">3. Review the findings</h2><span id="result-status" class="result-pill">Evidence found</span></div>
        <p class="subtitle">Found <strong id="hit-count">0</strong> relevant source passages.</p>
        <div id="answer"></div>
        <h3 style="font-size:18px;margin:22px 0 12px">Cited source passages</h3><div id="evidence"></div>
        <p class="warning">A relevance percentage estimates lexical similarity, not credibility, truth or factual certainty. Verify each claim with the original document.</p>
      </section>
    </div>
  </div>
  <footer>ResearchRAG Browser Edition · Rodrigo Pantoja · MIT License · Static Hugging Face Space · Document text is processed locally in this browser tab; do not treat extractive retrieval as verified fact.</footer>
</main>
<script src="engine.js"></script>
<script src="app.js"></script>
</body>
</html>