Init: 第一个版本
This commit is contained in:
+399
@@ -0,0 +1,399 @@
|
||||
const EXAMPLES = [
|
||||
"周末几点开门，几点关门？",
|
||||
"柏卡会员年费多少，能借几本书？",
|
||||
"买的书几天内可以退？",
|
||||
"阅读区可以带外面的食物吗？",
|
||||
"十月读书会的主题和票价是什么？",
|
||||
];
|
||||
|
||||
const state = {
|
||||
ready: false,
|
||||
failed: false,
|
||||
sending: false,
|
||||
documents: [],
|
||||
turns: [],
|
||||
};
|
||||
|
||||
const messages = document.querySelector("#messages");
|
||||
const questionInput = document.querySelector("#question");
|
||||
const sendButton = document.querySelector("#send");
|
||||
const topK = document.querySelector("#top-k");
|
||||
const docForm = document.querySelector("#doc-form");
|
||||
const docTitle = document.querySelector("#doc-title");
|
||||
const docContent = document.querySelector("#doc-content");
|
||||
const saveDoc = document.querySelector("#save-doc");
|
||||
const pickFile = document.querySelector("#pick-file");
|
||||
const fileInput = document.querySelector("#file");
|
||||
const docList = document.querySelector("#doc-list");
|
||||
const pills = document.querySelector("#pills");
|
||||
const facts = document.querySelector("#facts");
|
||||
const libraryMeta = document.querySelector("#library-meta");
|
||||
|
||||
messages.addEventListener("click", (event) => {
|
||||
const chip = event.target.closest("[data-question]");
|
||||
if (chip) {
|
||||
ask(chip.dataset.question);
|
||||
return;
|
||||
}
|
||||
const cite = event.target.closest(".cite");
|
||||
if (!cite) return;
|
||||
const turn = cite.closest(".turn");
|
||||
turn.querySelectorAll(".cite").forEach((node) => node.classList.remove("is-on"));
|
||||
turn.querySelectorAll(".slice").forEach((node) => node.classList.remove("is-active"));
|
||||
cite.classList.add("is-on");
|
||||
const slice = turn.querySelector(`.slice[data-n="${cite.dataset.n}"]`);
|
||||
if (slice) {
|
||||
slice.classList.add("is-active");
|
||||
slice.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
}
|
||||
});
|
||||
|
||||
docList.addEventListener("click", (event) => {
|
||||
const button = event.target.closest("[data-delete]");
|
||||
if (!button) return;
|
||||
removeDocument(button.dataset.delete, button.dataset.title);
|
||||
});
|
||||
|
||||
document.querySelector("#composer").addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
ask(questionInput.value);
|
||||
});
|
||||
|
||||
questionInput.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
document.querySelector("#composer").requestSubmit();
|
||||
}
|
||||
});
|
||||
|
||||
docForm.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
await createDocument(docTitle.value, docContent.value);
|
||||
});
|
||||
|
||||
pickFile.addEventListener("click", () => fileInput.click());
|
||||
fileInput.addEventListener("change", async () => {
|
||||
const file = fileInput.files && fileInput.files[0];
|
||||
fileInput.value = "";
|
||||
if (!file) return;
|
||||
const body = new FormData();
|
||||
body.append("file", file);
|
||||
try {
|
||||
const response = await fetch("/api/documents/upload", { method: "POST", body });
|
||||
if (!response.ok) throw new Error(await readError(response));
|
||||
const doc = await response.json();
|
||||
toast(`已把《${doc.title}》切成 ${doc.chunk_count} 片并写入向量库`);
|
||||
await refreshDocs();
|
||||
await refreshStatus();
|
||||
} catch (error) {
|
||||
toast(error.message);
|
||||
}
|
||||
});
|
||||
|
||||
function el(tag, className, text) {
|
||||
const node = document.createElement(tag);
|
||||
if (className) node.className = className;
|
||||
if (text != null) node.textContent = text;
|
||||
return node;
|
||||
}
|
||||
|
||||
function toast(message) {
|
||||
const node = document.querySelector("#toast");
|
||||
node.textContent = message;
|
||||
node.classList.add("is-on");
|
||||
clearTimeout(toast.timer);
|
||||
toast.timer = setTimeout(() => node.classList.remove("is-on"), 3400);
|
||||
}
|
||||
|
||||
async function readError(response) {
|
||||
try {
|
||||
const data = await response.json();
|
||||
if (typeof data.detail === "string") return data.detail;
|
||||
} catch {
|
||||
/* 响应体不是 JSON */
|
||||
}
|
||||
return `请求失败（${response.status}）`;
|
||||
}
|
||||
|
||||
function setBusy(busy) {
|
||||
state.sending = busy;
|
||||
const locked = busy || !state.ready;
|
||||
questionInput.disabled = locked;
|
||||
sendButton.disabled = locked;
|
||||
topK.disabled = locked;
|
||||
docTitle.disabled = !state.ready;
|
||||
docContent.disabled = !state.ready;
|
||||
saveDoc.disabled = !state.ready;
|
||||
pickFile.disabled = !state.ready;
|
||||
sendButton.textContent = busy ? "检索中" : "提问";
|
||||
}
|
||||
|
||||
function renderStatus(data) {
|
||||
pills.replaceChildren();
|
||||
const model = el("span", "pill");
|
||||
if (data.error) {
|
||||
model.classList.add("is-bad");
|
||||
model.textContent = "模型准备失败";
|
||||
} else if (data.ready) {
|
||||
model.classList.add("is-ok");
|
||||
model.textContent = data.embedding_model;
|
||||
} else {
|
||||
model.classList.add("is-wait");
|
||||
model.textContent = "正在下载并加载嵌入模型…";
|
||||
}
|
||||
const store = el("span", "pill");
|
||||
store.append(`${data.vector_db} · `);
|
||||
const strong = el("strong", null, `${data.documents} 篇 / ${data.chunks} 片`);
|
||||
store.append(strong);
|
||||
const llm = el("span", "pill");
|
||||
if (data.llm_ready) {
|
||||
llm.classList.add("is-ok");
|
||||
llm.textContent = `生成模型 ${data.llm_model}`;
|
||||
} else {
|
||||
llm.textContent = "未配置大模型，先摘录原文";
|
||||
}
|
||||
pills.append(model, store, llm);
|
||||
if (data.error) {
|
||||
const retry = el("button", "chip", "重试");
|
||||
retry.type = "button";
|
||||
retry.addEventListener("click", async () => {
|
||||
state.failed = false;
|
||||
await fetch("/api/boot", { method: "POST" });
|
||||
poll();
|
||||
});
|
||||
pills.append(retry);
|
||||
}
|
||||
|
||||
facts.replaceChildren();
|
||||
const rows = [
|
||||
["嵌入", data.embedding_model],
|
||||
["向量库", data.vector_db],
|
||||
["切片", `${data.chunk_size} 字，重叠 ${data.chunk_overlap} 字`],
|
||||
];
|
||||
for (const [key, value] of rows) {
|
||||
facts.append(el("dt", null, key), el("dd", null, value));
|
||||
}
|
||||
libraryMeta.textContent = data.ready
|
||||
? "示例资料是虚构的云栖书店。可以继续追加你自己的文本，提问时会一起检索。"
|
||||
: "第一次启动会下载大约一百兆的中文嵌入模型，页面可以先开着。";
|
||||
}
|
||||
|
||||
function renderDocs() {
|
||||
docList.replaceChildren();
|
||||
if (!state.documents.length) {
|
||||
docList.append(el("p", "empty-docs quiet", "知识库还是空的。"));
|
||||
return;
|
||||
}
|
||||
for (const doc of state.documents) {
|
||||
const card = el("article", "doc");
|
||||
const title = el("h3", "doc-title", doc.title);
|
||||
const button = el("button", "icon-btn", "删");
|
||||
button.type = "button";
|
||||
button.dataset.delete = doc.id;
|
||||
button.dataset.title = doc.title;
|
||||
button.setAttribute("aria-label", `删除《${doc.title}》`);
|
||||
const preview = el("p", "doc-preview", `${doc.chunk_count} 个切片 · ${doc.preview}`);
|
||||
card.append(title, button, preview);
|
||||
docList.append(card);
|
||||
}
|
||||
}
|
||||
|
||||
function appendRichText(container, text) {
|
||||
const pattern = /〔来源(\d+)〕/g;
|
||||
let cursor = 0;
|
||||
for (const match of String(text || "").matchAll(pattern)) {
|
||||
const index = match.index ?? 0;
|
||||
if (index > cursor) container.append(text.slice(cursor, index));
|
||||
const cite = el("button", "cite", `来源 ${match[1]}`);
|
||||
cite.type = "button";
|
||||
cite.dataset.n = match[1];
|
||||
cite.title = `定位到第 ${match[1]} 条切片`;
|
||||
container.append(cite);
|
||||
cursor = index + match[0].length;
|
||||
}
|
||||
if (cursor < text.length) container.append(text.slice(cursor));
|
||||
}
|
||||
|
||||
function renderSlice(chunk) {
|
||||
const item = el("li", "slice");
|
||||
item.dataset.n = String(chunk.n);
|
||||
const top = el("div", "slice-top");
|
||||
top.append(el("span", "slice-no", `来源 ${chunk.n}`));
|
||||
const bar = el("div", "bar");
|
||||
const fill = document.createElement("span");
|
||||
fill.style.width = `${Math.max(6, Math.round(chunk.score * 100))}%`;
|
||||
bar.append(fill);
|
||||
top.append(bar, el("span", "slice-no", `${Math.round(chunk.score * 100)}%`));
|
||||
const title = el("p", "slice-title", `《${chunk.title}》 · 第 ${chunk.chunk_index}/${chunk.chunk_total} 片`);
|
||||
const body = el("p", "slice-text", chunk.text);
|
||||
item.append(top, title, body);
|
||||
return item;
|
||||
}
|
||||
|
||||
function renderTurn(turn) {
|
||||
const article = el("article", "turn");
|
||||
const question = el("div", "question");
|
||||
question.append(el("span", "label", "提问"), el("p", null, turn.question));
|
||||
const row = el("div", "answer-row");
|
||||
const answer = el("div", "answer");
|
||||
answer.append(el("span", "label", "回答"));
|
||||
if (turn.pending) {
|
||||
answer.append(el("div", "pending"), el("div", "pending short"));
|
||||
} else if (turn.error) {
|
||||
answer.append(el("p", "warn", turn.error));
|
||||
} else {
|
||||
const body = el("div", "answer-body");
|
||||
appendRichText(body, turn.answer);
|
||||
answer.append(body);
|
||||
const foot = el("div", "answer-foot");
|
||||
const mode = el("span", turn.mode === "llm" ? "tag" : "tag is-extract", turn.mode === "llm" ? "模型生成" : "原文摘录");
|
||||
foot.append(mode, el("span", null, `${turn.chunks.length} 条切片 · ${formatElapsed(turn.elapsed_ms)}`));
|
||||
answer.append(foot);
|
||||
if (turn.notice) answer.append(el("p", "quiet", turn.notice));
|
||||
}
|
||||
|
||||
const slices = el("aside", "slices");
|
||||
const head = el("div", "slices-head");
|
||||
head.append(el("h3", null, "检索到的知识切片"), el("span", "quiet", turn.pending ? "检索中" : `${(turn.chunks || []).length} 条`));
|
||||
slices.append(head);
|
||||
if (turn.pending) {
|
||||
slices.append(el("div", "pending"), el("div", "pending"));
|
||||
} else if (turn.chunks && turn.chunks.length) {
|
||||
if (turn.low_confidence) slices.append(el("p", "warn", "最高相关度偏低，请核对原文后再采信。"));
|
||||
const list = el("ol", "slice-list");
|
||||
turn.chunks.forEach((chunk) => list.append(renderSlice(chunk)));
|
||||
slices.append(list);
|
||||
} else if (!turn.error) {
|
||||
slices.append(el("p", "quiet", "这次没有检索到切片。"));
|
||||
}
|
||||
row.append(answer, slices);
|
||||
article.append(question, row);
|
||||
return article;
|
||||
}
|
||||
|
||||
function renderThread() {
|
||||
messages.replaceChildren();
|
||||
if (!state.turns.length) {
|
||||
const empty = el("div", "empty");
|
||||
empty.append(
|
||||
el("h2", null, "先问一句，看证据从哪来"),
|
||||
el("p", null, "预置了一家虚构书店的规章。回答出现在左侧，右侧是向量库检索到的原文切片。"),
|
||||
);
|
||||
const chips = el("div", "chips");
|
||||
for (const sample of EXAMPLES) {
|
||||
const button = el("button", "chip", sample);
|
||||
button.type = "button";
|
||||
button.dataset.question = sample;
|
||||
button.disabled = !state.ready || state.sending;
|
||||
chips.append(button);
|
||||
}
|
||||
empty.append(chips);
|
||||
messages.append(empty);
|
||||
return;
|
||||
}
|
||||
state.turns.forEach((turn) => messages.append(renderTurn(turn)));
|
||||
messages.scrollTop = messages.scrollHeight;
|
||||
}
|
||||
|
||||
function formatElapsed(ms) {
|
||||
if (ms < 1000) return `${ms} ms`;
|
||||
return `${(ms / 1000).toFixed(1)} s`;
|
||||
}
|
||||
|
||||
async function refreshStatus() {
|
||||
const response = await fetch("/api/status");
|
||||
if (!response.ok) throw new Error(await readError(response));
|
||||
const data = await response.json();
|
||||
state.ready = Boolean(data.ready);
|
||||
state.failed = Boolean(data.error);
|
||||
renderStatus(data);
|
||||
setBusy(state.sending);
|
||||
return data;
|
||||
}
|
||||
|
||||
async function refreshDocs() {
|
||||
const response = await fetch("/api/documents");
|
||||
if (!response.ok) throw new Error(await readError(response));
|
||||
const data = await response.json();
|
||||
state.documents = data.documents;
|
||||
renderDocs();
|
||||
}
|
||||
|
||||
async function poll() {
|
||||
try {
|
||||
const data = await refreshStatus();
|
||||
if (data.ready) {
|
||||
await refreshDocs();
|
||||
renderThread();
|
||||
questionInput.focus();
|
||||
return;
|
||||
}
|
||||
if (!data.error) setTimeout(poll, 1000);
|
||||
else renderThread();
|
||||
} catch {
|
||||
pills.replaceChildren(el("span", "pill is-bad", "暂时连不上问答服务"));
|
||||
setTimeout(poll, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
async function ask(raw) {
|
||||
const question = (raw || "").trim();
|
||||
if (!question || state.sending || !state.ready) return;
|
||||
questionInput.value = "";
|
||||
const turn = { id: crypto.randomUUID(), question, pending: true, chunks: [] };
|
||||
state.turns.push(turn);
|
||||
renderThread();
|
||||
setBusy(true);
|
||||
try {
|
||||
const response = await fetch("/api/ask", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ question, top_k: Number(topK.value) }),
|
||||
});
|
||||
if (!response.ok) throw new Error(await readError(response));
|
||||
Object.assign(turn, await response.json(), { pending: false, error: null });
|
||||
} catch (error) {
|
||||
turn.pending = false;
|
||||
turn.error = error.message;
|
||||
turn.chunks = [];
|
||||
} finally {
|
||||
setBusy(false);
|
||||
renderThread();
|
||||
}
|
||||
}
|
||||
|
||||
async function createDocument(title, content) {
|
||||
if (!state.ready) return;
|
||||
try {
|
||||
const response = await fetch("/api/documents", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ title: title.trim(), content }),
|
||||
});
|
||||
if (!response.ok) throw new Error(await readError(response));
|
||||
const doc = await response.json();
|
||||
docTitle.value = "";
|
||||
docContent.value = "";
|
||||
toast(`已把《${doc.title}》切成 ${doc.chunk_count} 片并写入向量库`);
|
||||
await refreshDocs();
|
||||
await refreshStatus();
|
||||
} catch (error) {
|
||||
toast(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function removeDocument(id, title) {
|
||||
if (!confirm(`从向量库删除《${title}》？`)) return;
|
||||
try {
|
||||
const response = await fetch(`/api/documents/${id}`, { method: "DELETE" });
|
||||
if (!response.ok) throw new Error(await readError(response));
|
||||
toast(`已删除《${title}》`);
|
||||
await refreshDocs();
|
||||
await refreshStatus();
|
||||
} catch (error) {
|
||||
toast(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
renderThread();
|
||||
poll();
|
||||
Reference in New Issue
Block a user