274 lines
10 KiB
HTML
274 lines
10 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<title>医学文献检索总结 Agent</title>
|
|||
|
|
<style>
|
|||
|
|
:root { --bg:#0b1220; --panel:#111a2e; --muted:#8aa0c5; --text:#e6eeff; --border:#233152; --accent:#4f8cff; --danger:#ff5c7a; }
|
|||
|
|
* { box-sizing: border-box; }
|
|||
|
|
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei"; background: radial-gradient(1200px 600px at 10% 0%, #182447, var(--bg)); color:var(--text); }
|
|||
|
|
.wrap { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|||
|
|
.header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom: 16px; }
|
|||
|
|
.title { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
|
|||
|
|
.sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
|
|||
|
|
.panel { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius: 14px; padding: 14px; }
|
|||
|
|
label { display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
|
|||
|
|
input[type="text"], input[type="number"], textarea { width: 100%; background: rgba(0,0,0,.18); color: var(--text); border:1px solid var(--border); border-radius: 10px; padding: 10px 10px; outline: none; }
|
|||
|
|
textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.45; }
|
|||
|
|
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|||
|
|
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }
|
|||
|
|
.btns { display:flex; gap:10px; flex-wrap: wrap; align-items:center; }
|
|||
|
|
button { border: 1px solid var(--border); background: rgba(79,140,255,.18); color: var(--text); border-radius: 10px; padding: 9px 12px; cursor:pointer; font-weight:700; }
|
|||
|
|
button.secondary { background: rgba(255,255,255,.06); }
|
|||
|
|
button.danger { background: rgba(255,92,122,.18); border-color: rgba(255,92,122,.4); }
|
|||
|
|
button:disabled { opacity: .55; cursor:not-allowed; }
|
|||
|
|
.pill { display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.04); }
|
|||
|
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
|||
|
|
.out { white-space: pre-wrap; word-break: break-word; min-height: 180px; background: rgba(0,0,0,.22); border:1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.5; }
|
|||
|
|
.muted { color: var(--muted); }
|
|||
|
|
.err { color: #ffd0d8; border-color: rgba(255,92,122,.35); background: rgba(255,92,122,.08); }
|
|||
|
|
.ok { border-color: rgba(79,140,255,.35); }
|
|||
|
|
.small { font-size: 12px; }
|
|||
|
|
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
|||
|
|
.table th, .table td { border-bottom: 1px solid rgba(35,49,82,.7); padding: 8px 6px; vertical-align: top; }
|
|||
|
|
.table th { text-align: left; color: var(--muted); font-weight: 650; }
|
|||
|
|
a { color: var(--accent); text-decoration: none; }
|
|||
|
|
a:hover { text-decoration: underline; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="wrap">
|
|||
|
|
<div class="header">
|
|||
|
|
<div>
|
|||
|
|
<div class="title">医疗行业：医学文献检索总结 Agent</div>
|
|||
|
|
<div class="sub">输入关键词 → PubMed 检索 → 拉取摘要 → 百炼（兼容模式）生成总结报告（带引用）</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="small muted">接口：<span class="mono">/api/medlit/report</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel" style="margin-bottom: 12px;">
|
|||
|
|
<div class="grid">
|
|||
|
|
<div>
|
|||
|
|
<label>后端 Base URL</label>
|
|||
|
|
<input id="baseUrl" type="text" placeholder="http://localhost:8080" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label>模型（可选；留空则后端默认）</label>
|
|||
|
|
<input id="model" type="text" placeholder="例如：qwen-plus" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid" style="margin-top:10px;">
|
|||
|
|
<div>
|
|||
|
|
<label>关键词（PubMed term）</label>
|
|||
|
|
<input id="keyword" type="text" placeholder="例如：diabetes metformin cardiovascular outcomes" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label>最大返回篇数（1-20）</label>
|
|||
|
|
<input id="maxResults" type="number" min="1" max="20" step="1" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top:10px;" class="btns">
|
|||
|
|
<button id="runBtn">生成报告</button>
|
|||
|
|
<button id="stopBtn" class="danger" disabled>停止</button>
|
|||
|
|
<span id="status" class="muted small"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="panel">
|
|||
|
|
<h3 style="margin:0 0 10px 0; font-size:14px;">请求体</h3>
|
|||
|
|
<div id="reqBox" class="out mono muted" style="min-height:140px;"></div>
|
|||
|
|
|
|||
|
|
<h3 style="margin:12px 0 10px 0; font-size:14px;">检索到的文献</h3>
|
|||
|
|
<div id="articlesBox" class="out" style="min-height:220px;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel">
|
|||
|
|
<h3 style="margin:0 0 10px 0; font-size:14px;">总结报告</h3>
|
|||
|
|
<div id="reportBox" class="out ok"></div>
|
|||
|
|
|
|||
|
|
<div style="margin-top:10px;">
|
|||
|
|
<h3 style="margin:0 0 10px 0; font-size:14px;">调试信息</h3>
|
|||
|
|
<div id="debugBox" class="out mono muted" style="min-height:140px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const $ = (id) => document.getElementById(id);
|
|||
|
|
|
|||
|
|
const state = {
|
|||
|
|
aborter: null,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function setStatus(msg) { $('status').textContent = msg || ''; }
|
|||
|
|
|
|||
|
|
function setReqBox(objOrText) {
|
|||
|
|
if (typeof objOrText === 'string') { $('reqBox').textContent = objOrText; return; }
|
|||
|
|
$('reqBox').textContent = JSON.stringify(objOrText, null, 2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setDebug(objOrText) {
|
|||
|
|
if (typeof objOrText === 'string') { $('debugBox').textContent = objOrText; return; }
|
|||
|
|
$('debugBox').textContent = JSON.stringify(objOrText, null, 2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setReportBox(text, isError=false) {
|
|||
|
|
const box = $('reportBox');
|
|||
|
|
box.textContent = text ?? '';
|
|||
|
|
box.classList.toggle('err', !!isError);
|
|||
|
|
box.classList.toggle('ok', !isError);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setArticles(articles) {
|
|||
|
|
if (!articles || articles.length === 0) {
|
|||
|
|
$('articlesBox').textContent = '未检索到文献';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rows = articles.map((a, i) => {
|
|||
|
|
const title = a.title || '';
|
|||
|
|
const journal = a.journal || '';
|
|||
|
|
const year = a.pubYear || '';
|
|||
|
|
const pmid = a.pmid || '';
|
|||
|
|
const url = a.url || '';
|
|||
|
|
const abs = a.abstractText || '';
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<tr>
|
|||
|
|
<td class="mono">[${i+1}]</td>
|
|||
|
|
<td>
|
|||
|
|
<div style="font-weight:700; margin-bottom:4px;">${escapeHtml(title)}</div>
|
|||
|
|
<div class="muted">${escapeHtml(journal)} ${year ? ('(' + escapeHtml(year) + ')') : ''}</div>
|
|||
|
|
<div class="muted">PMID: <span class="mono">${escapeHtml(pmid)}</span> ${url ? ('- <a href="' + escapeAttr(url) + '" target="_blank">链接</a>') : ''}</div>
|
|||
|
|
${abs ? ('<div style="margin-top:6px;" class="mono">' + escapeHtml(abs) + '</div>') : '<div class="muted" style="margin-top:6px;">(无摘要或摘要未获取到)</div>'}
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
|
|||
|
|
$('articlesBox').innerHTML = `
|
|||
|
|
<table class="table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th style="width:60px;">#</th>
|
|||
|
|
<th>文献信息</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
${rows}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function baseUrl() {
|
|||
|
|
const v = $('baseUrl').value.trim();
|
|||
|
|
return v || 'http://localhost:8080';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopRunning() {
|
|||
|
|
if (state.aborter) {
|
|||
|
|
state.aborter.abort();
|
|||
|
|
state.aborter = null;
|
|||
|
|
}
|
|||
|
|
$('stopBtn').disabled = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function buildRequest() {
|
|||
|
|
const keyword = $('keyword').value.trim();
|
|||
|
|
const maxResults = Number($('maxResults').value || 8);
|
|||
|
|
const model = $('model').value.trim();
|
|||
|
|
|
|||
|
|
const body = {
|
|||
|
|
keyword,
|
|||
|
|
maxResults: isFinite(maxResults) ? maxResults : 8,
|
|||
|
|
};
|
|||
|
|
if (model) body.model = model;
|
|||
|
|
return body;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function run() {
|
|||
|
|
stopRunning();
|
|||
|
|
$('stopBtn').disabled = false;
|
|||
|
|
state.aborter = new AbortController();
|
|||
|
|
|
|||
|
|
setReportBox('');
|
|||
|
|
setDebug('');
|
|||
|
|
$('articlesBox').textContent = '';
|
|||
|
|
|
|||
|
|
const body = buildRequest();
|
|||
|
|
setReqBox(body);
|
|||
|
|
|
|||
|
|
if (!body.keyword) {
|
|||
|
|
setReportBox('请输入关键词', true);
|
|||
|
|
stopRunning();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const url = baseUrl() + '/api/medlit/report';
|
|||
|
|
setDebug({ url, method: 'POST', headers: { 'Content-Type': 'application/json' }, body });
|
|||
|
|
|
|||
|
|
const startedAt = Date.now();
|
|||
|
|
setStatus('生成中...');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const resp = await fetch(url, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify(body),
|
|||
|
|
signal: state.aborter.signal,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const text = await resp.text();
|
|||
|
|
if (!resp.ok) {
|
|||
|
|
throw new Error(`HTTP ${resp.status}: ${text}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const data = text ? JSON.parse(text) : {};
|
|||
|
|
setArticles(data.articles || []);
|
|||
|
|
setReportBox(data.report || '');
|
|||
|
|
|
|||
|
|
setStatus(`完成：${((Date.now() - startedAt)/1000).toFixed(2)}s`);
|
|||
|
|
} catch (e) {
|
|||
|
|
if (e.name === 'AbortError') {
|
|||
|
|
setStatus('已中止');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setReportBox(String(e?.message ?? e), true);
|
|||
|
|
setStatus('失败');
|
|||
|
|
} finally {
|
|||
|
|
state.aborter = null;
|
|||
|
|
$('stopBtn').disabled = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function escapeHtml(s) {
|
|||
|
|
return String(s)
|
|||
|
|
.replaceAll('&', '&')
|
|||
|
|
.replaceAll('<', '<')
|
|||
|
|
.replaceAll('>', '>')
|
|||
|
|
.replaceAll('"', '"')
|
|||
|
|
.replaceAll("'", ''');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function escapeAttr(s) {
|
|||
|
|
return escapeHtml(s);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// init
|
|||
|
|
$('baseUrl').value = 'http://localhost:8080';
|
|||
|
|
$('keyword').value = 'diabetes metformin cardiovascular outcomes';
|
|||
|
|
$('maxResults').value = 8;
|
|||
|
|
|
|||
|
|
$('runBtn').addEventListener('click', run);
|
|||
|
|
$('stopBtn').addEventListener('click', () => {
|
|||
|
|
stopRunning();
|
|||
|
|
setStatus('已停止');
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|