Add paper browser web app
This commit is contained in:
wuyang
@@ -0,0 +1,367 @@
|
||||
const state = {
|
||||
papers: [],
|
||||
total: 0,
|
||||
offset: 0,
|
||||
limit: 50,
|
||||
selectedId: null,
|
||||
selectedPaper: null,
|
||||
selectedMarkdown: "",
|
||||
topic: "",
|
||||
loading: false,
|
||||
health: null,
|
||||
};
|
||||
|
||||
const $ = (selector) => document.querySelector(selector);
|
||||
|
||||
const elements = {
|
||||
healthLine: $("#healthLine"),
|
||||
searchInput: $("#searchInput"),
|
||||
yearSelect: $("#yearSelect"),
|
||||
statusSelect: $("#statusSelect"),
|
||||
sortSelect: $("#sortSelect"),
|
||||
clearTopicBtn: $("#clearTopicBtn"),
|
||||
topicChips: $("#topicChips"),
|
||||
resultTitle: $("#resultTitle"),
|
||||
resultCount: $("#resultCount"),
|
||||
resultsList: $("#resultsList"),
|
||||
loadMoreBtn: $("#loadMoreBtn"),
|
||||
detailMetaLine: $("#detailMetaLine"),
|
||||
detailTitle: $("#detailTitle"),
|
||||
detailTags: $("#detailTags"),
|
||||
arxivLink: $("#arxivLink"),
|
||||
paperPreview: $("#paperPreview"),
|
||||
abstractBtn: $("#abstractBtn"),
|
||||
summaryBtn: $("#summaryBtn"),
|
||||
translateBtn: $("#translateBtn"),
|
||||
deepBtn: $("#deepBtn"),
|
||||
modelStatus: $("#modelStatus"),
|
||||
aiStatus: $("#aiStatus"),
|
||||
abstractView: $("#abstractView"),
|
||||
aiView: $("#aiView"),
|
||||
};
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function debounce(fn, delay = 250) {
|
||||
let timer = null;
|
||||
return (...args) => {
|
||||
window.clearTimeout(timer);
|
||||
timer = window.setTimeout(() => fn(...args), delay);
|
||||
};
|
||||
}
|
||||
|
||||
async function api(path, options = {}) {
|
||||
const response = await fetch(path, {
|
||||
...options,
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
...(options.headers || {}),
|
||||
},
|
||||
});
|
||||
const payload = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(payload.error || `HTTP ${response.status}`);
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
function queryParams(extra = {}) {
|
||||
const params = new URLSearchParams();
|
||||
const q = elements.searchInput.value.trim();
|
||||
if (q) params.set("q", q);
|
||||
if (state.topic) params.set("topic", state.topic);
|
||||
if (elements.yearSelect.value) params.set("year", elements.yearSelect.value);
|
||||
if (elements.statusSelect.value) params.set("status", elements.statusSelect.value);
|
||||
if (elements.sortSelect.value) params.set("sort", elements.sortSelect.value);
|
||||
params.set("limit", String(state.limit));
|
||||
params.set("offset", String(state.offset));
|
||||
Object.entries(extra).forEach(([key, value]) => params.set(key, String(value)));
|
||||
return params;
|
||||
}
|
||||
|
||||
async function loadHealth() {
|
||||
try {
|
||||
const health = await api("/api/health");
|
||||
state.health = health;
|
||||
elements.healthLine.textContent = `${health.paper_count} papers`;
|
||||
elements.modelStatus.textContent = health.ollama_ok
|
||||
? `Ollama 已连接 · summary=${health.default_models.summary}`
|
||||
: "Ollama 未连接";
|
||||
} catch (error) {
|
||||
elements.healthLine.textContent = "服务状态未知";
|
||||
elements.modelStatus.textContent = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTopics() {
|
||||
const payload = await api("/api/topics");
|
||||
elements.topicChips.innerHTML = payload.topics
|
||||
.slice(0, 24)
|
||||
.map((item) => {
|
||||
const active = item.topic === state.topic ? " active" : "";
|
||||
return `<button class="topic-chip${active}" type="button" data-topic="${escapeHtml(item.topic)}">${escapeHtml(item.topic)} ${item.count}</button>`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
async function loadPapers({ reset = false } = {}) {
|
||||
if (state.loading) return;
|
||||
state.loading = true;
|
||||
if (reset) {
|
||||
state.offset = 0;
|
||||
state.papers = [];
|
||||
}
|
||||
elements.resultTitle.textContent = state.topic || "论文库";
|
||||
elements.resultCount.textContent = "...";
|
||||
try {
|
||||
const payload = await api(`/api/papers?${queryParams()}`);
|
||||
state.total = payload.total;
|
||||
state.papers = reset ? payload.items : [...state.papers, ...payload.items];
|
||||
state.offset = state.papers.length;
|
||||
renderResults();
|
||||
if (!state.selectedId && state.papers.length) {
|
||||
await selectPaper(state.papers[0].id);
|
||||
}
|
||||
} catch (error) {
|
||||
elements.resultsList.innerHTML = `<div class="empty-state">${escapeHtml(error.message)}</div>`;
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function renderResults() {
|
||||
elements.resultCount.textContent = String(state.total);
|
||||
elements.loadMoreBtn.style.display = state.papers.length < state.total ? "block" : "none";
|
||||
if (!state.papers.length) {
|
||||
elements.resultsList.innerHTML = `<div class="empty-state">没有匹配结果</div>`;
|
||||
return;
|
||||
}
|
||||
elements.resultsList.innerHTML = state.papers
|
||||
.map((paper) => {
|
||||
const active = paper.id === state.selectedId ? " active" : "";
|
||||
const topics = paper.topics
|
||||
.slice(0, 4)
|
||||
.map((topic) => `<span class="mini-badge">${escapeHtml(topic)}</span>`)
|
||||
.join("");
|
||||
return `
|
||||
<button class="paper-row${active}" type="button" data-id="${paper.id}">
|
||||
<div class="paper-title">${escapeHtml(paper.title)}</div>
|
||||
<div class="paper-meta">
|
||||
<span>${escapeHtml(paper.year || "unknown")}</span>
|
||||
<span>${escapeHtml(paper.venue || paper.source || "paper")}</span>
|
||||
<span>score ${escapeHtml(paper.collection_score)}</span>
|
||||
<span>${escapeHtml(paper.status)}</span>
|
||||
</div>
|
||||
<div class="paper-topics">${topics}</div>
|
||||
</button>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
function stripFrontmatter(markdown) {
|
||||
const text = String(markdown || "");
|
||||
const match = text.match(/^# .+?\n\n---[\s\S]*?\n---\n\n?/);
|
||||
return match ? text.slice(match[0].length) : text;
|
||||
}
|
||||
|
||||
function inlineMarkdown(text) {
|
||||
let value = escapeHtml(text);
|
||||
value = value.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
|
||||
value = value.replace(/`([^`]+)`/g, "<code>$1</code>");
|
||||
return value;
|
||||
}
|
||||
|
||||
function renderMarkdown(markdown) {
|
||||
const lines = stripFrontmatter(markdown).split(/\r?\n/);
|
||||
const output = [];
|
||||
let inList = false;
|
||||
const closeList = () => {
|
||||
if (inList) {
|
||||
output.push("</ul>");
|
||||
inList = false;
|
||||
}
|
||||
};
|
||||
|
||||
for (const raw of lines) {
|
||||
const line = raw.trimEnd();
|
||||
if (!line.trim()) {
|
||||
closeList();
|
||||
continue;
|
||||
}
|
||||
if (line.startsWith("### ")) {
|
||||
closeList();
|
||||
output.push(`<h3>${inlineMarkdown(line.slice(4))}</h3>`);
|
||||
} else if (line.startsWith("## ")) {
|
||||
closeList();
|
||||
output.push(`<h2>${inlineMarkdown(line.slice(3))}</h2>`);
|
||||
} else if (line.startsWith("# ")) {
|
||||
closeList();
|
||||
output.push(`<h1>${inlineMarkdown(line.slice(2))}</h1>`);
|
||||
} else if (line.startsWith("- ")) {
|
||||
if (!inList) {
|
||||
output.push("<ul>");
|
||||
inList = true;
|
||||
}
|
||||
output.push(`<li>${inlineMarkdown(line.slice(2))}</li>`);
|
||||
} else {
|
||||
closeList();
|
||||
output.push(`<p>${inlineMarkdown(line)}</p>`);
|
||||
}
|
||||
}
|
||||
closeList();
|
||||
return output.join("");
|
||||
}
|
||||
|
||||
function renderDetail(paper, markdown) {
|
||||
state.selectedPaper = paper;
|
||||
state.selectedMarkdown = markdown;
|
||||
elements.detailMetaLine.textContent = `${paper.year || "unknown"} · ${paper.venue || paper.source || "paper"} · ${paper.status}`;
|
||||
elements.detailTitle.textContent = paper.title;
|
||||
elements.arxivLink.href = paper.url || "#";
|
||||
elements.arxivLink.style.visibility = paper.url ? "visible" : "hidden";
|
||||
elements.detailTags.innerHTML = [
|
||||
`<span class="tag score">score ${escapeHtml(paper.collection_score)}</span>`,
|
||||
`<span class="tag">${escapeHtml(paper.relevance || "relevance")}</span>`,
|
||||
...paper.topics.map((topic) => `<span class="tag">${escapeHtml(topic)}</span>`),
|
||||
].join("");
|
||||
elements.paperPreview.innerHTML = renderMarkdown(markdown);
|
||||
elements.abstractView.innerHTML = `<p class="empty-state">未加载摘要</p>`;
|
||||
elements.aiView.innerHTML = `<p class="empty-state">未生成 AI 结果</p>`;
|
||||
elements.aiStatus.textContent = "";
|
||||
renderResults();
|
||||
}
|
||||
|
||||
async function selectPaper(id) {
|
||||
state.selectedId = id;
|
||||
renderResults();
|
||||
try {
|
||||
const payload = await api(`/api/paper?id=${encodeURIComponent(id)}`);
|
||||
renderDetail(payload.paper, payload.markdown);
|
||||
} catch (error) {
|
||||
elements.detailTitle.textContent = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAbstract() {
|
||||
if (!state.selectedId) return;
|
||||
setBusy(true, "获取 arXiv 摘要");
|
||||
try {
|
||||
const payload = await api(`/api/paper/abstract?id=${encodeURIComponent(state.selectedId)}`);
|
||||
const abstract = payload.abstract;
|
||||
if (!abstract) {
|
||||
elements.abstractView.innerHTML = `<p class="empty-state">${escapeHtml(payload.message || "没有摘要")}</p>`;
|
||||
} else {
|
||||
elements.abstractView.innerHTML = `
|
||||
<h3>${escapeHtml(abstract.title)}</h3>
|
||||
<p>${escapeHtml(abstract.abstract)}</p>
|
||||
<div class="paper-meta">
|
||||
<span>${escapeHtml(abstract.published)}</span>
|
||||
<span>${escapeHtml((abstract.categories || []).join(", "))}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
activateTab("abstract");
|
||||
} catch (error) {
|
||||
elements.abstractView.innerHTML = `<p class="empty-state">${escapeHtml(error.message)}</p>`;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
function setBusy(isBusy, label = "") {
|
||||
elements.abstractBtn.disabled = isBusy;
|
||||
elements.summaryBtn.disabled = isBusy;
|
||||
elements.translateBtn.disabled = isBusy;
|
||||
elements.deepBtn.disabled = isBusy;
|
||||
elements.aiStatus.textContent = isBusy ? label : "";
|
||||
}
|
||||
|
||||
async function runAi(mode) {
|
||||
if (!state.selectedId) return;
|
||||
if (mode === "deep") {
|
||||
const ok = window.confirm("深度研读会调用 large 模型，占用更多 GPU。继续？");
|
||||
if (!ok) return;
|
||||
}
|
||||
const model = state.health?.default_models?.[mode] || (mode === "translate" ? "ChatGPT-5.6:light" : "ChatGPT-5.6:fast");
|
||||
const label = mode === "translate" ? "翻译中" : mode === "deep" ? "深度研读中" : "摘要生成中";
|
||||
setBusy(true, `${label} · ${model}`);
|
||||
activateTab("ai");
|
||||
elements.aiView.innerHTML = `<p class="empty-state">${escapeHtml(label)}</p>`;
|
||||
try {
|
||||
const payload = await api("/api/ai", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ id: state.selectedId, mode, model }),
|
||||
});
|
||||
const cache = payload.cached ? "cached" : `${payload.duration_seconds}s`;
|
||||
elements.aiView.innerHTML = `
|
||||
<div class="paper-meta">
|
||||
<span>${escapeHtml(payload.model)}</span>
|
||||
<span>${escapeHtml(payload.mode)}</span>
|
||||
<span>${escapeHtml(cache)}</span>
|
||||
</div>
|
||||
<div class="ai-output">${escapeHtml(payload.response)}</div>
|
||||
`;
|
||||
} catch (error) {
|
||||
elements.aiView.innerHTML = `<p class="empty-state">${escapeHtml(error.message)}</p>`;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
function activateTab(name) {
|
||||
document.querySelectorAll(".tab").forEach((tab) => {
|
||||
tab.classList.toggle("active", tab.dataset.tab === name);
|
||||
});
|
||||
document.querySelectorAll(".tab-view").forEach((view) => {
|
||||
view.classList.toggle("active", view.id === `${name}View`);
|
||||
});
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
const reload = debounce(() => loadPapers({ reset: true }), 260);
|
||||
elements.searchInput.addEventListener("input", reload);
|
||||
elements.yearSelect.addEventListener("change", reload);
|
||||
elements.statusSelect.addEventListener("change", reload);
|
||||
elements.sortSelect.addEventListener("change", reload);
|
||||
elements.clearTopicBtn.addEventListener("click", async () => {
|
||||
state.topic = "";
|
||||
await loadTopics();
|
||||
await loadPapers({ reset: true });
|
||||
});
|
||||
elements.topicChips.addEventListener("click", async (event) => {
|
||||
const button = event.target.closest("[data-topic]");
|
||||
if (!button) return;
|
||||
state.topic = button.dataset.topic === state.topic ? "" : button.dataset.topic;
|
||||
await loadTopics();
|
||||
await loadPapers({ reset: true });
|
||||
});
|
||||
elements.resultsList.addEventListener("click", (event) => {
|
||||
const button = event.target.closest("[data-id]");
|
||||
if (button) selectPaper(button.dataset.id);
|
||||
});
|
||||
elements.loadMoreBtn.addEventListener("click", () => loadPapers());
|
||||
elements.abstractBtn.addEventListener("click", loadAbstract);
|
||||
elements.summaryBtn.addEventListener("click", () => runAi("summary"));
|
||||
elements.translateBtn.addEventListener("click", () => runAi("translate"));
|
||||
elements.deepBtn.addEventListener("click", () => runAi("deep"));
|
||||
document.querySelectorAll(".tab").forEach((tab) => {
|
||||
tab.addEventListener("click", () => activateTab(tab.dataset.tab));
|
||||
});
|
||||
}
|
||||
|
||||
async function boot() {
|
||||
bindEvents();
|
||||
await loadHealth();
|
||||
await loadTopics();
|
||||
await loadPapers({ reset: true });
|
||||
}
|
||||
|
||||
boot();
|
||||
Reference in New Issue
Block a user