HaHafeng
b06daecacd
Completed: - Unifuncs DeepSearch API site coverage test (18 medical sites, 9 tier-1 available) - ClinicalTrials.gov dedicated test (4 strategies, English query + depth>=10 works best) - Deep Research V2.0 development plan (5-day phased delivery) - DeepResearch engine capability guide (docs/02-common-capability/) - Test scripts: test-unifuncs-site-coverage.ts, test-unifuncs-clinicaltrials.ts Key findings: - Tier-1 sites: PubMed(28), ClinicalTrials(38), NCBI(18), Scholar(10), Cochrane(4), CNKI(7), SinoMed(9), GeenMedical(5), VIP(1) - Paid databases (WoS/Embase/Scopus/Ovid) cannot be accessed (no credential support) - ClinicalTrials.gov requires English queries with max_depth>=10 Updated: ASL module status doc, system status doc, common capability list Co-authored-by: Cursor <cursoragent@cursor.com>
627 lines
40 KiB
HTML
627 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" class="scroll-smooth">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ASL - 智能文献检索 (Deep Research) V4.2</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#1677ff',
|
||
primaryHover: '#4096ff',
|
||
bgBase: '#f5f7fa',
|
||
panelBg: '#ffffff',
|
||
terminalBg: '#0f172a',
|
||
terminalHeader: '#1e293b',
|
||
},
|
||
animation: {
|
||
'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
/* 自定义滚动条 */
|
||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||
|
||
.terminal-scroll::-webkit-scrollbar-thumb { background: #475569; }
|
||
.terminal-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
|
||
|
||
/* 瀑布流渐入动画 */
|
||
.reveal-section {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||
}
|
||
.reveal-visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.tab-active { color: #1677ff; border-bottom: 2px solid #1677ff; font-weight: 500; }
|
||
.tab-inactive { color: #64748b; border-bottom: 2px solid transparent; }
|
||
.tab-inactive:hover { color: #1677ff; }
|
||
|
||
/* 工作流连接线 */
|
||
.workflow-connector {
|
||
width: 2px;
|
||
height: 32px;
|
||
background-color: #cbd5e1;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
.workflow-connector::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4px;
|
||
left: -4px;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background-color: #cbd5e1;
|
||
}
|
||
.workflow-connector.active {
|
||
background-color: #1677ff;
|
||
}
|
||
.workflow-connector.active::after {
|
||
background-color: #1677ff;
|
||
box-shadow: 0 0 8px #1677ff;
|
||
}
|
||
|
||
/* 落地页平滑消失动画 */
|
||
.landing-fade-out {
|
||
opacity: 0;
|
||
transform: translateY(-30px);
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-bgBase text-gray-800 font-sans h-screen flex overflow-hidden">
|
||
|
||
<!-- 左侧导航栏 -->
|
||
<aside class="w-64 bg-slate-900 text-white flex flex-col h-full flex-shrink-0 shadow-xl z-20">
|
||
<div class="h-16 flex items-center px-6 border-b border-slate-800">
|
||
<i class="fa-solid fa-notes-medical text-blue-400 text-xl mr-3"></i>
|
||
<span class="text-lg font-bold tracking-wide">AI Clinical</span>
|
||
</div>
|
||
<div class="p-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">业务模块</div>
|
||
<nav class="flex-1 px-3 space-y-1">
|
||
<a href="#" class="flex items-center px-3 py-2.5 bg-blue-600/20 text-blue-400 rounded-lg group transition-colors">
|
||
<i class="fa-solid fa-magnifying-glass-chart w-6 text-center"></i>
|
||
<span class="ml-2 font-medium">智能文献检索</span>
|
||
</a>
|
||
<a href="#" class="flex items-center px-3 py-2.5 text-slate-300 hover:bg-slate-800 hover:text-white rounded-lg transition-colors">
|
||
<i class="fa-solid fa-filter w-6 text-center"></i><span class="ml-2">标题摘要初筛</span>
|
||
</a>
|
||
<a href="#" class="flex items-center px-3 py-2.5 text-slate-300 hover:bg-slate-800 hover:text-white rounded-lg transition-colors">
|
||
<i class="fa-solid fa-file-pdf w-6 text-center"></i><span class="ml-2">全文复筛</span>
|
||
</a>
|
||
<a href="#" class="flex items-center px-3 py-2.5 text-slate-300 hover:bg-slate-800 hover:text-white rounded-lg transition-colors">
|
||
<i class="fa-solid fa-chart-network w-6 text-center"></i><span class="ml-2">自动化证据合成</span>
|
||
</a>
|
||
</nav>
|
||
<div class="p-4 border-t border-slate-800 flex items-center">
|
||
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-sm">DR</div>
|
||
<div class="ml-3">
|
||
<div class="text-sm font-medium">Dr. 研究员</div>
|
||
<div class="text-xs text-slate-400">专业版用户</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右侧工作区 -->
|
||
<main class="flex-1 flex flex-col h-full relative overflow-hidden bg-bgBase">
|
||
|
||
<!-- 顶部 Header -->
|
||
<header class="h-16 bg-panelBg shadow-sm flex items-center justify-between px-6 z-10 flex-shrink-0 relative">
|
||
<h1 class="text-lg font-semibold text-gray-800">
|
||
智能文献检索 (Deep Research)
|
||
<span class="text-xs text-primary bg-blue-50 px-2 py-1 rounded ml-2 border border-blue-100">V4.2 极简引导版</span>
|
||
</h1>
|
||
</header>
|
||
|
||
<!-- 滚动主容器 -->
|
||
<div class="flex-1 overflow-y-auto relative" id="scroll-container">
|
||
|
||
<!-- ================= 第一眼：落地页大搜索框 (Landing View) ================= -->
|
||
<div id="landing-view" class="absolute inset-0 flex flex-col items-center justify-center px-6 pb-20 transition-all duration-500 z-10 bg-bgBase">
|
||
|
||
<!-- 徽标与标题 -->
|
||
<div class="text-center mb-10">
|
||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white text-primary mb-6 shadow-sm border border-blue-100">
|
||
<i class="fa-solid fa-sparkles text-3xl"></i>
|
||
</div>
|
||
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-800 mb-4 tracking-tight">
|
||
AI Clinical <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-500">Deep Research</span>
|
||
</h1>
|
||
<p class="text-slate-500 text-lg">今天想探索什么临床问题？让 AI 为您构建专业的循证医学检索方案。</p>
|
||
</div>
|
||
|
||
<!-- 核心大搜索框 -->
|
||
<div class="w-full max-w-3xl relative group">
|
||
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
|
||
<i class="fa-solid fa-magnifying-glass text-gray-400 text-lg group-focus-within:text-primary transition-colors"></i>
|
||
</div>
|
||
<input type="text" id="landing-input" class="w-full pl-14 pr-36 py-4 rounded-2xl border-2 border-white bg-white focus:border-primary focus:ring-4 focus:ring-primary/10 shadow-lg text-lg transition-all outline-none text-slate-700" placeholder="例如：他汀类药物预防心血管疾病的高质量临床研究..." onkeydown="if(event.key === 'Enter') proceedToSetup()">
|
||
<button onclick="proceedToSetup()" class="absolute right-2 top-2 bottom-2 bg-primary hover:bg-primaryHover text-white px-6 rounded-xl font-medium transition-colors flex items-center shadow-md">
|
||
开始研究 <i class="fa-solid fa-arrow-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 推荐预置词 -->
|
||
<div class="mt-8 flex flex-wrap justify-center gap-3 max-w-2xl items-center">
|
||
<span class="text-sm text-slate-400">试着探索：</span>
|
||
<button onclick="fillLanding('他汀类药物预防心血管疾病的Meta分析系统测试语料库，重点寻找高质量的临床研究文献（包含RCT、队列研究、Meta分析），必须包含可下载的PDF全文。')" class="text-sm bg-white border border-slate-200 hover:border-blue-300 hover:bg-blue-50 text-slate-600 hover:text-primary px-4 py-1.5 rounded-full transition-all shadow-sm">
|
||
他汀类心血管一级预防
|
||
</button>
|
||
<button onclick="fillLanding('SGLT2抑制剂对比安慰剂在射血分数降低的心力衰竭 (HFrEF) 患者中的疗效与安全性，需要最新的RCT。')" class="text-sm bg-white border border-slate-200 hover:border-blue-300 hover:bg-blue-50 text-slate-600 hover:text-primary px-4 py-1.5 rounded-full transition-all shadow-sm">
|
||
SGLT2 抑制剂治疗 HFrEF
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= 工作台流容器 (初始隐藏) ================= -->
|
||
<div id="workflow-container" class="max-w-5xl mx-auto py-8 pb-32 hidden">
|
||
|
||
<!-- ================= Step 1: 检索立项配置 (继承自Landing输入) ================= -->
|
||
<section id="step1-setup" class="reveal-section bg-panelBg rounded-xl shadow-sm border border-gray-200 p-8">
|
||
<div class="flex items-center mb-6">
|
||
<div class="w-10 h-10 bg-blue-50 text-primary rounded-lg flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-1 text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-gray-800">核对研究问题与范围</h2>
|
||
<p class="text-sm text-gray-500 mt-1">确认您的初步想法并配置检索边界，AI将为您扩写为自然语言深搜指令。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<!-- 搜索框 (动态填充) -->
|
||
<div>
|
||
<textarea id="search-input" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none text-base shadow-sm font-medium text-gray-700"></textarea>
|
||
</div>
|
||
|
||
<!-- 基础配置 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="p-5 bg-gray-50/50 rounded-lg border border-gray-100">
|
||
<h3 class="text-sm font-semibold text-gray-700 mb-3"><i class="fa-solid fa-database mr-2 text-primary"></i>目标数据源</h3>
|
||
<div class="flex flex-wrap gap-3">
|
||
<label class="flex items-center px-3 py-1.5 bg-white border border-blue-200 rounded-md cursor-pointer hover:bg-blue-50 transition-colors">
|
||
<input type="checkbox" checked class="text-primary rounded border-gray-300 focus:ring-primary w-4 h-4">
|
||
<span class="ml-2 text-sm text-gray-700 font-medium">PubMed / PMC</span>
|
||
</label>
|
||
<label class="flex items-center px-3 py-1.5 bg-white border border-blue-200 rounded-md cursor-pointer hover:bg-blue-50 transition-colors">
|
||
<input type="checkbox" checked class="text-primary rounded border-gray-300 focus:ring-primary w-4 h-4">
|
||
<span class="ml-2 text-sm text-gray-700 font-medium">BMJ Open / Lancet (OA)</span>
|
||
</label>
|
||
<label class="flex items-center px-3 py-1.5 bg-white border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50 transition-colors">
|
||
<input type="checkbox" checked class="text-primary rounded border-gray-300 focus:ring-primary w-4 h-4">
|
||
<span class="ml-2 text-sm text-gray-700">Cochrane Library</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-5 bg-gray-50/50 rounded-lg border border-gray-100">
|
||
<h3 class="text-sm font-semibold text-gray-700 mb-3"><i class="fa-solid fa-sliders mr-2 text-primary"></i>高级过滤</h3>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-xs text-gray-500 mb-1">发表年份</label>
|
||
<select class="w-full text-sm border-gray-300 rounded-md py-1.5 pl-2 pr-6 border bg-white focus:ring-primary focus:border-primary">
|
||
<option>2010 至今</option>
|
||
<option>过去 5 年</option>
|
||
<option>不限</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 mb-1">目标文献数</label>
|
||
<select class="w-full text-sm border-gray-300 rounded-md py-1.5 pl-2 pr-6 border bg-white focus:ring-primary focus:border-primary">
|
||
<option>~100 篇 (测试集)</option>
|
||
<option>全面检索 (不限)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-span-2 flex items-center mt-1">
|
||
<label class="flex items-center cursor-pointer">
|
||
<input type="checkbox" checked class="text-primary rounded border-gray-300 focus:ring-primary w-4 h-4">
|
||
<span class="ml-2 text-sm text-gray-700 font-medium text-green-600">强制要求：仅限可获取免费全文 (PDF Open Access)</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 动作按钮 -->
|
||
<div class="flex justify-end pt-2">
|
||
<button id="btn-generate" class="bg-primary hover:bg-primaryHover text-white px-6 py-2.5 rounded-lg text-sm font-medium transition-all shadow-md hover:shadow-lg flex items-center" onclick="revealStep2()">
|
||
<i class="fa-solid fa-wand-magic-sparkles mr-2"></i> 解析并生成检索需求书
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 连接线 1 -->
|
||
<div id="conn-1" class="workflow-connector hidden my-2"></div>
|
||
|
||
<!-- ================= Step 2: 检索策略确认 (HITL) ================= -->
|
||
<section id="step2-strategy" class="hidden reveal-section bg-panelBg rounded-xl shadow-sm border-2 border-blue-200 p-8 relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-bl-full -z-10 opacity-50"></div>
|
||
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 bg-blue-100 text-primary rounded-lg flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-2 text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-gray-800">检索需求确认与完善 (人机协同)</h2>
|
||
<p class="text-sm text-gray-500 mt-1">请核对 AI 扩写的检索指令。确认无误后，系统将把这段大白话交由 Unifuncs 引擎执行。</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-orange-50 text-orange-600 border border-orange-200 px-3 py-1 rounded text-xs font-medium flex items-center animate-pulse">
|
||
<i class="fa-solid fa-hand-pointer mr-1.5"></i> 待您确认与修改
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<!-- 左侧：AI 解析摘要 -->
|
||
<div class="lg:col-span-1 space-y-3">
|
||
<h3 class="text-sm font-semibold text-gray-700 flex items-center"><i class="fa-solid fa-lightbulb text-primary mr-2"></i>核心意图提炼</h3>
|
||
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200 text-sm text-gray-700 space-y-4">
|
||
<div>
|
||
<span class="text-gray-400 font-bold block mb-1">🎯 核心目标</span>
|
||
为Meta分析构建测试语料库
|
||
</div>
|
||
<div class="border-t border-gray-200 pt-3">
|
||
<span class="text-blue-500 font-bold block mb-1">💊 干预 / 疾病</span>
|
||
他汀类药物 (Statins) / 心血管疾病 (CVD)
|
||
</div>
|
||
<div class="border-t border-gray-200 pt-3">
|
||
<span class="text-purple-500 font-bold block mb-1">📚 文献标准</span>
|
||
要求有PDF全文、高质量临床研究 (RCT/队列/Meta分析)
|
||
</div>
|
||
</div>
|
||
<div class="bg-green-50 border border-green-200 p-3 rounded-lg flex justify-between items-center mt-2">
|
||
<span class="text-xs text-gray-600">目标完成率预估: <span class="font-bold text-green-600">极高 (可获100+篇)</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：自然语言指令编辑器 -->
|
||
<div class="lg:col-span-2 flex flex-col">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="text-sm font-semibold text-gray-700 flex items-center"><i class="fa-solid fa-file-lines text-primary mr-2"></i>深度检索指令书 (可直接编辑)</h3>
|
||
<button class="text-xs text-gray-500 hover:text-primary transition-colors"><i class="fa-solid fa-rotate-left mr-1"></i>重置</button>
|
||
</div>
|
||
<textarea class="flex-1 w-full p-5 text-sm leading-relaxed text-gray-800 bg-white rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary shadow-inner resize-y min-h-[220px]" spellcheck="false">请帮我执行一次深度的医学文献检索，目标是构建一个高质量的测试语料库。以下是具体的检索要求：
|
||
|
||
【核心主题】
|
||
评估他汀类药物（Statins）预防心血管疾病（CVD）的疗效与安全性。包含一级预防与二级预防。
|
||
|
||
【目标文献类型】
|
||
- 随机对照试验（RCT）
|
||
- 前瞻性队列研究（Cohort Study）
|
||
- 现有的系统综述与Meta分析（Systematic Review & Meta-analysis）
|
||
|
||
【强制数据要求】
|
||
- 必须是开放获取（Open Access）的文献，且必须能直接下载 PDF 全文。
|
||
- 文章中最好包含标准的基线特征表（Table 1）以及统计学结局数据（HR/OR/RR值及95% CI）。</textarea>
|
||
<p class="text-xs text-gray-400 mt-2"><i class="fa-solid fa-circle-info mr-1"></i>您可以像写邮件一样在这里补充任何大白话要求。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 动作按钮 -->
|
||
<div class="flex justify-end pt-6 mt-4 border-t border-gray-100 gap-3">
|
||
<button id="btn-execute" class="bg-primary hover:bg-primaryHover text-white px-8 py-2.5 rounded-lg text-sm font-medium transition-all shadow-md flex items-center" onclick="revealStep3()">
|
||
<i class="fa-solid fa-rocket mr-2"></i> 确认需求，启动 Deep Research
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 连接线 2 -->
|
||
<div id="conn-2" class="workflow-connector hidden my-2"></div>
|
||
|
||
<!-- ================= Step 3: Deep Research AI Agent 执行终端 ================= -->
|
||
<section id="step3-terminal" class="hidden reveal-section">
|
||
<div class="bg-terminalBg rounded-xl shadow-2xl border border-slate-700 overflow-hidden flex flex-col h-[550px]">
|
||
<div class="bg-terminalHeader px-4 py-3 flex items-center justify-between border-b border-slate-700 shrink-0">
|
||
<div class="flex space-x-2">
|
||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||
</div>
|
||
<div class="text-xs text-slate-400 font-mono flex items-center">
|
||
<i class="fa-solid fa-microchip mr-2 text-blue-400"></i> Deep Research Agent - 实时执行日志
|
||
</div>
|
||
<div id="terminal-status" class="text-xs font-mono text-green-400 flex items-center">
|
||
<span class="w-2 h-2 rounded-full bg-green-400 mr-2 animate-pulse-fast"></span> Running
|
||
</div>
|
||
</div>
|
||
|
||
<div id="terminal-body" class="p-6 flex-1 overflow-y-auto terminal-scroll space-y-4 font-mono text-sm">
|
||
<div class="text-slate-400">>> Initializing pg-boss worker for Deep Research... OK</div>
|
||
<div class="text-slate-400">>> Sending natural language requirements to Unifuncs API... OK</div>
|
||
<div class="text-slate-400">>> Starting autonomous research loop. Target: 100 high-quality PDFs.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 连接线 3 -->
|
||
<div id="conn-3" class="workflow-connector hidden my-2"></div>
|
||
|
||
<!-- ================= Step 4: 最终交付结果 ================= -->
|
||
<section id="step4-results" class="hidden reveal-section space-y-6">
|
||
<div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center justify-between shadow-sm">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-check text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-lg font-bold text-gray-800">Deep Research 任务圆满完成</h2>
|
||
<p class="text-xs text-gray-600 mt-0.5">历时 3 分 12 秒，成功提取并验证 <span class="font-bold">103</span> 篇高质量 OA 文献，并已生成智能综合报告。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex space-x-3">
|
||
<button class="px-4 py-2 bg-white text-gray-700 hover:text-primary hover:border-primary border border-gray-300 rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center">
|
||
<i class="fa-solid fa-share-from-square mr-2"></i> 推送至 ASL 初筛池
|
||
</button>
|
||
<button class="px-4 py-2 bg-primary text-white hover:bg-primaryHover rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center">
|
||
<i class="fa-solid fa-download mr-2"></i> 导出科研结果资产 <i class="fa-solid fa-chevron-down ml-2 text-[10px]"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="bg-panelBg rounded-xl p-5 border border-gray-200 shadow-sm flex flex-col justify-center">
|
||
<div class="text-sm font-medium text-gray-500 mb-1">高质量文献库构建</div>
|
||
<div class="text-4xl font-bold text-gray-800 mb-4">103<span class="text-sm text-gray-400 font-normal ml-1">篇</span></div>
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between text-xs">
|
||
<span class="text-gray-500"><i class="fa-solid fa-unlock text-green-500 w-4"></i> PDF 成功获取率</span>
|
||
<span class="font-medium text-green-600">100%</span>
|
||
</div>
|
||
<div class="flex justify-between text-xs">
|
||
<span class="text-gray-500"><i class="fa-solid fa-vial text-purple-500 w-4"></i> RCT & 队列研究</span>
|
||
<span class="font-medium text-gray-700">78 篇</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-panelBg rounded-xl p-5 border border-gray-200 shadow-sm">
|
||
<h4 class="text-xs font-semibold text-gray-500 uppercase mb-3">文献来源分布</h4>
|
||
<div class="relative h-32 w-full"><canvas id="sourceChart"></canvas></div>
|
||
</div>
|
||
<div class="bg-panelBg rounded-xl p-5 border border-gray-200 shadow-sm">
|
||
<h4 class="text-xs font-semibold text-gray-500 uppercase mb-3">发表年份趋势</h4>
|
||
<div class="relative h-32 w-full"><canvas id="yearChart"></canvas></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-panelBg rounded-xl border border-gray-200 shadow-sm overflow-hidden flex flex-col" style="min-height: 500px;">
|
||
<div class="flex px-6 pt-4 border-b border-gray-200 bg-gray-50/50">
|
||
<button class="pb-3 px-4 tab-active text-sm flex items-center transition-colors" onclick="switchTab('list')">
|
||
<i class="fa-solid fa-list-ul mr-2"></i>核心文献清单 (103)
|
||
</button>
|
||
<button class="pb-3 px-4 tab-inactive text-sm flex items-center relative transition-colors" onclick="switchTab('report')">
|
||
<i class="fa-solid fa-file-signature mr-2"></i>智能综合报告 (AI生成)
|
||
</button>
|
||
</div>
|
||
<div id="tab-list" class="flex-1 overflow-auto bg-white">
|
||
<table class="w-full text-left text-sm text-gray-600">
|
||
<thead class="bg-gray-50 text-gray-700 text-xs uppercase border-b border-gray-200 sticky top-0 z-10">
|
||
<tr>
|
||
<th class="px-6 py-4 font-semibold">文献信息 (Title / Authors / Journal)</th>
|
||
<th class="px-6 py-4 font-semibold w-24">年份</th>
|
||
<th class="px-6 py-4 font-semibold w-32">研究类型</th>
|
||
<th class="px-6 py-4 font-semibold w-32">获取状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-100">
|
||
<tr class="hover:bg-blue-50/30 transition-colors">
|
||
<td class="px-6 py-4">
|
||
<div class="font-medium text-primary hover:underline cursor-pointer text-base">Efficacy and safety of cholesterol-lowering treatment: prospective meta-analysis</div>
|
||
<div class="text-xs text-gray-500 mt-1">Cholesterol Treatment Trialists' (CTT) Collaborators. <span class="text-gray-800 font-medium">The Lancet</span></div>
|
||
</td>
|
||
<td class="px-6 py-4">2010</td>
|
||
<td class="px-6 py-4"><span class="px-2 py-1 bg-purple-50 text-purple-600 rounded text-xs border border-purple-200">Meta-analysis</span></td>
|
||
<td class="px-6 py-4"><span class="text-green-600 text-xs font-medium flex items-center bg-green-50 px-2 py-1 rounded border border-green-100 w-max"><i class="fa-solid fa-file-pdf mr-1.5"></i>PDF 已缓存</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div id="tab-report" class="hidden flex-1 overflow-auto p-10 bg-white prose prose-slate max-w-none">
|
||
<h2 class="text-2xl font-bold text-gray-900 border-b pb-4 mb-6">他汀类药物在心血管疾病预防中的应用</h2>
|
||
<p class="text-sm text-gray-600">本报告基于此次 Deep Research 提取的 103 篇高质量文献摘要，由 AI 自动交叉验证并总结生成。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 交互逻辑 -->
|
||
<script>
|
||
// 辅助工具：填充测试用例
|
||
function fillLanding(text) {
|
||
document.getElementById('landing-input').value = text;
|
||
}
|
||
|
||
// 辅助工具：平滑滚动
|
||
function scrollToElement(id) {
|
||
setTimeout(() => {
|
||
const el = document.getElementById(id);
|
||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}, 50);
|
||
}
|
||
|
||
// 核心交互一：从落地页进入工作台 (Landing -> Step 1)
|
||
function proceedToSetup() {
|
||
const inputVal = document.getElementById('landing-input').value.trim();
|
||
if (!inputVal) {
|
||
const inputEl = document.getElementById('landing-input');
|
||
inputEl.classList.add('border-red-400');
|
||
setTimeout(() => inputEl.classList.remove('border-red-400'), 1000);
|
||
return;
|
||
}
|
||
|
||
// 1. 将落地页的输入转移到工作台的输入框中
|
||
document.getElementById('search-input').value = inputVal;
|
||
|
||
// 2. 隐藏落地页 (执行消失动画)
|
||
const landing = document.getElementById('landing-view');
|
||
landing.classList.add('landing-fade-out');
|
||
|
||
// 3. 动画结束后，真正隐藏 Landing，并显示 Workflow
|
||
setTimeout(() => {
|
||
landing.classList.add('hidden');
|
||
|
||
const workflow = document.getElementById('workflow-container');
|
||
workflow.classList.remove('hidden');
|
||
|
||
// 触发内部 Step 1 的显示动画
|
||
const step1 = document.getElementById('step1-setup');
|
||
void step1.offsetWidth; // Trigger reflow
|
||
step1.classList.add('reveal-visible');
|
||
}, 400); // 匹配 CSS duration-500 左右的时间
|
||
}
|
||
|
||
// 核心交互二：生成需求 (Step 1 -> Step 2)
|
||
function revealStep2() {
|
||
const btn = document.getElementById('btn-generate');
|
||
btn.innerHTML = '<i class="fa-solid fa-check mr-2"></i> 需求已生成';
|
||
btn.classList.replace('bg-primary', 'bg-green-500');
|
||
btn.classList.replace('hover:bg-primaryHover', 'hover:bg-green-600');
|
||
btn.disabled = true;
|
||
|
||
setTimeout(() => {
|
||
const conn1 = document.getElementById('conn-1');
|
||
conn1.classList.remove('hidden');
|
||
conn1.classList.add('active');
|
||
|
||
const step2 = document.getElementById('step2-strategy');
|
||
step2.classList.remove('hidden');
|
||
void step2.offsetWidth;
|
||
step2.classList.add('reveal-visible');
|
||
scrollToElement('step2-strategy');
|
||
}, 500);
|
||
}
|
||
|
||
// 核心交互三：执行深搜 (Step 2 -> Step 3)
|
||
function revealStep3() {
|
||
const btn = document.getElementById('btn-execute');
|
||
btn.innerHTML = '<i class="fa-solid fa-lock mr-2"></i> 需求已锁定，执行中...';
|
||
btn.disabled = true;
|
||
|
||
setTimeout(() => {
|
||
const conn2 = document.getElementById('conn-2');
|
||
conn2.classList.remove('hidden');
|
||
conn2.classList.add('active');
|
||
|
||
const step3 = document.getElementById('step3-terminal');
|
||
step3.classList.remove('hidden');
|
||
void step3.offsetWidth;
|
||
step3.classList.add('reveal-visible');
|
||
scrollToElement('step3-terminal');
|
||
|
||
startAIExecutionLog();
|
||
}, 500);
|
||
}
|
||
|
||
// 模拟 AI Agent 思考过程
|
||
function startAIExecutionLog() {
|
||
const terminalBody = document.getElementById('terminal-body');
|
||
const statusIndicator = document.getElementById('terminal-status');
|
||
|
||
const events = [
|
||
{ delay: 1000, type: 'think', title: '任务理解 (Unifuncs Engine)', text: '已收到自然语言指令。目标：他汀类药物心血管疾病预防文献库，需PDF全文。' },
|
||
{ delay: 1500, type: 'action', title: 'Action: Search', text: '> executing search across PubMed & PMC...' },
|
||
{ delay: 1500, type: 'done', title: '搜索轮次完成', text: '' },
|
||
{ delay: 1000, type: 'think', title: '过滤阶段', text: '正在过滤非 RCT 与非开放获取 (OA) 资源...' },
|
||
{ delay: 1500, type: 'action', title: 'Action: Scrape', text: '> extracting PDF links and Abstract data [103/103] OK.' },
|
||
{ delay: 1000, type: 'summary', title: '初步发现汇总', text: '✅ 已成功获取 103 篇高质量目标文献。开始生成综述报告。' },
|
||
{ delay: 2000, type: 'finish', title: '', text: '' }
|
||
];
|
||
|
||
let cumulativeDelay = 0;
|
||
events.forEach((event) => {
|
||
cumulativeDelay += event.delay;
|
||
setTimeout(() => {
|
||
if (event.type === 'finish') {
|
||
statusIndicator.innerHTML = '<span class="w-2 h-2 rounded-full bg-slate-500 mr-2"></span> Finished';
|
||
statusIndicator.className = "text-xs font-mono text-slate-400 flex items-center";
|
||
revealStep4();
|
||
return;
|
||
}
|
||
|
||
const entryDiv = document.createElement('div');
|
||
entryDiv.className = 'opacity-0 transform translate-y-2 transition-all duration-300';
|
||
|
||
if (event.type === 'think') {
|
||
entryDiv.innerHTML = `<div class="flex items-start"><i class="fa-solid fa-brain mt-1 mr-3 text-purple-400 w-4"></i><div class="flex-1 border-l-2 border-slate-700 pl-3"><div class="text-purple-400 font-bold mb-1">[Thinking] ${event.title}</div><div class="text-slate-300">${event.text}</div></div></div>`;
|
||
} else if (event.type === 'action') {
|
||
entryDiv.innerHTML = `<div class="flex items-start bg-slate-800 p-3 rounded border border-slate-700"><i class="fa-solid fa-terminal mt-1 mr-3 text-blue-400 w-4"></i><div class="flex-1"><div class="text-blue-400 font-bold mb-1">${event.title}</div><div class="text-green-400">${event.text}</div></div></div>`;
|
||
} else if (event.type === 'done') {
|
||
entryDiv.innerHTML = `<div class="flex items-start"><i class="fa-solid fa-check mt-1 mr-3 text-green-500 w-4"></i><div class="text-green-500 font-bold">${event.title}</div></div>`;
|
||
} else if (event.type === 'summary') {
|
||
entryDiv.innerHTML = `<div class="flex items-start mt-4 bg-slate-800/50 p-4 border border-slate-600 rounded"><i class="fa-solid fa-flag-checkered mt-1 mr-3 text-yellow-400 w-4 text-lg"></i><div class="flex-1"><div class="text-yellow-400 font-bold mb-2">${event.title}</div><div class="text-slate-300">${event.text}</div></div></div>`;
|
||
}
|
||
|
||
terminalBody.appendChild(entryDiv);
|
||
void entryDiv.offsetWidth;
|
||
entryDiv.classList.remove('opacity-0', 'translate-y-2');
|
||
terminalBody.scrollTop = terminalBody.scrollHeight;
|
||
|
||
}, cumulativeDelay);
|
||
});
|
||
}
|
||
|
||
// 第 3 步 -> 第 4 步
|
||
function revealStep4() {
|
||
const conn3 = document.getElementById('conn-3');
|
||
conn3.classList.remove('hidden');
|
||
conn3.classList.add('active');
|
||
|
||
const step4 = document.getElementById('step4-results');
|
||
step4.classList.remove('hidden');
|
||
void step4.offsetWidth;
|
||
step4.classList.add('reveal-visible');
|
||
|
||
scrollToElement('step4-results');
|
||
setTimeout(renderCharts, 300);
|
||
}
|
||
|
||
// Tab 切换
|
||
function switchTab(tab) {
|
||
const btnList = document.querySelector('button[onclick="switchTab(\'list\')"]');
|
||
const btnReport = document.querySelector('button[onclick="switchTab(\'report\')"]');
|
||
const contentList = document.getElementById('tab-list');
|
||
const contentReport = document.getElementById('tab-report');
|
||
|
||
if (tab === 'list') {
|
||
btnList.className = 'pb-3 px-4 tab-active text-sm flex items-center transition-colors';
|
||
btnReport.className = 'pb-3 px-4 tab-inactive text-sm flex items-center relative transition-colors';
|
||
contentList.classList.remove('hidden');
|
||
contentReport.classList.add('hidden');
|
||
} else {
|
||
btnReport.className = 'pb-3 px-4 tab-active text-sm flex items-center relative transition-colors';
|
||
btnList.className = 'pb-3 px-4 tab-inactive text-sm flex items-center transition-colors';
|
||
contentReport.classList.remove('hidden');
|
||
contentList.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
// 渲染图表
|
||
function renderCharts() {
|
||
if(window.chartsRendered) return;
|
||
new Chart(document.getElementById('sourceChart').getContext('2d'), { type: 'doughnut', data: { labels: ['PMC', 'BMJ Open', 'Cochrane', 'Other OA'], datasets: [{ data: [68, 15, 8, 12], backgroundColor: ['#1677ff', '#52c41a', '#faad14', '#13c2c2'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { boxWidth: 10, font: { size: 10 } } } }, cutout: '65%' } });
|
||
new Chart(document.getElementById('yearChart').getContext('2d'), { type: 'bar', data: { labels: ['2010-12', '2013-15', '2016-18', '2019-21', '2022-24'], datasets: [{ label: '纳入文献数', data: [15, 22, 28, 25, 13], backgroundColor: '#69b1ff', borderRadius: 3 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false } }, y: { beginAtZero: true, grid: { borderDash: [2, 4], color: '#f0f0f0' } } } } });
|
||
window.chartsRendered = true;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |