|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<title>Gemini RAG Assistant</title> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
|
|
|
<style> |
|
|
:root { |
|
|
--bg: radial-gradient(1200px 600px at top, #e0e7ff 0%, #f8fafc 60%); |
|
|
--card: rgba(255,255,255,0.85); |
|
|
--border: rgba(15,23,42,0.08); |
|
|
--primary: #4f46e5; |
|
|
--secondary: #0ea5e9; |
|
|
--text: #0f172a; |
|
|
--muted: #64748b; |
|
|
--error: #dc2626; |
|
|
} |
|
|
|
|
|
* { box-sizing: border-box; font-family: Inter, sans-serif; } |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
min-height: 100vh; |
|
|
background: var(--bg); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
padding: 40px 16px; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 980px; |
|
|
background: var(--card); |
|
|
backdrop-filter: blur(16px); |
|
|
border-radius: 24px; |
|
|
padding: 36px; |
|
|
border: 1px solid var(--border); |
|
|
box-shadow: 0 40px 120px rgba(15,23,42,.15); |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2.2rem; |
|
|
margin: 0; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(135deg, #4f46e5, #06b6d4); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
margin-top: 8px; |
|
|
color: var(--muted); |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.card { |
|
|
margin-top: 28px; |
|
|
background: white; |
|
|
border-radius: 18px; |
|
|
padding: 24px; |
|
|
border: 1px solid var(--border); |
|
|
} |
|
|
|
|
|
.card h3 { |
|
|
margin-top: 0; |
|
|
margin-bottom: 16px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
input[type="file"], textarea { |
|
|
width: 100%; |
|
|
padding: 14px; |
|
|
border-radius: 14px; |
|
|
border: 1px solid var(--border); |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
|
|
|
textarea { |
|
|
min-height: 120px; |
|
|
resize: vertical; |
|
|
} |
|
|
|
|
|
.row { |
|
|
display: flex; |
|
|
gap: 12px; |
|
|
margin-top: 12px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
button { |
|
|
padding: 12px 18px; |
|
|
border-radius: 14px; |
|
|
border: none; |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all .2s ease; |
|
|
} |
|
|
|
|
|
button.secondary { background: var(--secondary); } |
|
|
|
|
|
button:disabled { |
|
|
opacity: .5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
button:hover:not(:disabled) { |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 10px 25px rgba(79,70,229,.35); |
|
|
} |
|
|
|
|
|
.status { |
|
|
margin-top: 10px; |
|
|
font-size: .9rem; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.answer { |
|
|
margin-top: 24px; |
|
|
padding: 20px; |
|
|
border-radius: 16px; |
|
|
background: #f8fafc; |
|
|
border: 1px solid var(--border); |
|
|
white-space: pre-wrap; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.error { |
|
|
color: var(--error); |
|
|
margin-top: 10px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.loader { |
|
|
font-weight: 600; |
|
|
color: var(--primary); |
|
|
animation: pulse 1.2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { opacity: .4 } |
|
|
50% { opacity: 1 } |
|
|
100% { opacity: .4 } |
|
|
} |
|
|
|
|
|
footer { |
|
|
text-align: center; |
|
|
margin-top: 28px; |
|
|
font-size: .8rem; |
|
|
color: var(--muted); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Gemini RAG Assistant</h1> |
|
|
<div class="subtitle"> |
|
|
Upload documents · Ask questions · Get grounded answers |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h3>📄 Upload documents</h3> |
|
|
<input type="file" id="files" multiple /> |
|
|
<div class="row"> |
|
|
<button id="uploadBtn" onclick="upload()">Upload & Index</button> |
|
|
</div> |
|
|
<div id="uploadStatus" class="status"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h3>💬 Ask or summarize</h3> |
|
|
<textarea id="question" placeholder="Ask something about your documents…"></textarea> |
|
|
<div class="row"> |
|
|
<button id="askBtn" onclick="ask()">Ask</button> |
|
|
<button class="secondary" id="sumBtn" onclick="summarize()">Summarize</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="answerBox" class="answer" style="display:none;"></div> |
|
|
<div id="errorBox" class="error"></div> |
|
|
|
|
|
<footer> |
|
|
Built with FastAPI · FAISS · Gemini |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let busy = false; |
|
|
|
|
|
function setBusy(state) { |
|
|
busy = state; |
|
|
document.getElementById("askBtn").disabled = state; |
|
|
document.getElementById("sumBtn").disabled = state; |
|
|
document.getElementById("uploadBtn").disabled = state; |
|
|
} |
|
|
|
|
|
async function upload() { |
|
|
const files = document.getElementById("files").files; |
|
|
if (!files.length) return; |
|
|
|
|
|
setBusy(true); |
|
|
document.getElementById("uploadStatus").innerText = "Indexing documents…"; |
|
|
|
|
|
const fd = new FormData(); |
|
|
for (let f of files) fd.append("files", f); |
|
|
|
|
|
const res = await fetch("/upload", { method: "POST", body: fd }); |
|
|
const data = await res.json(); |
|
|
|
|
|
document.getElementById("uploadStatus").innerText = data.message || "Done ✅"; |
|
|
setBusy(false); |
|
|
} |
|
|
|
|
|
async function ask() { |
|
|
const q = document.getElementById("question").value.trim(); |
|
|
if (!q || busy) return; |
|
|
|
|
|
setBusy(true); |
|
|
document.getElementById("errorBox").innerText = ""; |
|
|
document.getElementById("answerBox").style.display = "block"; |
|
|
document.getElementById("answerBox").innerHTML = "<span class='loader'>Thinking…</span>"; |
|
|
|
|
|
try { |
|
|
const res = await fetch("/ask", { |
|
|
method: "POST", |
|
|
headers: { "Content-Type": "application/json" }, |
|
|
body: JSON.stringify({ prompt: q }) |
|
|
}); |
|
|
|
|
|
const data = await res.json(); |
|
|
document.getElementById("answerBox").innerText = data.answer; |
|
|
} catch { |
|
|
document.getElementById("errorBox").innerText = |
|
|
"⚠️ LLM quota exceeded. Please wait ~1 minute and retry."; |
|
|
} |
|
|
|
|
|
setBusy(false); |
|
|
} |
|
|
|
|
|
function summarize() { |
|
|
document.getElementById("question").value = |
|
|
"Summarize the uploaded documents in 5 bullet points."; |
|
|
ask(); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
