feat(asl): Add Deep Research V2.0 development plan and Unifuncs API site coverage testing
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>
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
7个最关注的医学期刊或医学信息网站
|
||||
|
||||
---下面7个是我最关注的----
|
||||
|
||||
1. PubMed
|
||||
网址 ：https://pubmed.ncbi.nlm.nih.gov/
|
||||
7. ClinicalTrials.gov
|
||||
网址 ：https://clinicaltrials.gov/
|
||||
|
||||
|
||||
15. 中华医学期刊网
|
||||
网址 ：https://medjournals.cn/
|
||||
3. 中国知网（CNKI）
|
||||
网址 ：https://www.cnki.net/、ClinicalTrials.gov、
|
||||
8. 万方数据
|
||||
网址 ：https://www.wanfangdata.com.cn/
|
||||
9. 维普（VIP）
|
||||
网址 ：https://www.cqvip.com/
|
||||
16. 中国临床试验注册中心
|
||||
网址 ：http://www.chictr.org.cn/
|
||||
|
||||
|
||||
----下面是所有常用的期刊网站------
|
||||
|
||||
英文数据库
|
||||
1. PubMed
|
||||
网址 ：https://pubmed.ncbi.nlm.nih.gov/
|
||||
|
||||
2. 中国生物医学文献数据库（CBM/SinoMed）
|
||||
网址 ：http://www.sinomed.ac.cn/
|
||||
|
||||
3. 中国知网（CNKI）
|
||||
网址 ：https://www.cnki.net/
|
||||
|
||||
英文数据库
|
||||
4. Web of Science
|
||||
网址 ：https://www.webofscience.com/ 或 http://isiknowledge.com/
|
||||
5. Embase
|
||||
网址 ：http://www.embase.com/
|
||||
|
||||
6. Cochrane Library
|
||||
网址 ：https://www.cochranelibrary.com/
|
||||
|
||||
7. ClinicalTrials.gov
|
||||
网址 ：https://clinicaltrials.gov/
|
||||
中文数据库
|
||||
8. 万方数据
|
||||
网址 ：https://www.wanfangdata.com.cn/
|
||||
|
||||
9. 维普（VIP）
|
||||
网址 ：https://www.cqvip.com/
|
||||
|
||||
10. NCBI（National Center for Biotechnology Information）
|
||||
|
||||
11. Google Scholar
|
||||
网址 ：https://scholar.google.com/
|
||||
|
||||
12. Ovid
|
||||
网址 ：http://ovidsp.ovid.com/
|
||||
|
||||
13. Scopus
|
||||
网址 ：https://www.scopus.com/
|
||||
|
||||
|
||||
14. 中国中医药数据库
|
||||
网址 ：http://cowork.cintcm.com/engine/windex.jsp 或 https://cintmed.cintcm.cn/
|
||||
特点 ：中国中医科学院开发，48个数据库，220余万条数据
|
||||
重要性 ：中医药研究必备
|
||||
15. 中华医学期刊网
|
||||
网址 ：https://medjournals.cn/
|
||||
特点 ：中华医学会官方平台，收录中华系列期刊
|
||||
重要性 ：中华系顶级期刊聚集地
|
||||
|
||||
16. 中国临床试验注册中心
|
||||
网址 ：http://www.chictr.org.cn/
|
||||
特点 ：中国临床试验注册平台
|
||||
重要性 ：中国临床研究必备
|
||||
|
||||
17. GeenMedical
|
||||
网址 ：https://www.geenmedical.com/
|
||||
|
||||
18. 国家科技图书文献中心（NSTL） ⭐⭐
|
||||
网址 ：https://www.nstl.gov.cn/
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
# **技术设计文档 (TDD)：ASL \- 智能文献检索 (Deep Research) MVP 版**
|
||||
|
||||
**文档版本：** v4.4-Tech (MVP 自然语言确认版)
|
||||
|
||||
**核心架构：** LLM Requirement Expansion (需求扩写) \+ Postgres-Only (pg-boss) \+ Unifuncs Async API
|
||||
|
||||
## **🏗️ 1\. 系统数据流向 (Data Flow)**
|
||||
|
||||
MVP 版本的架构最大程度降低了状态维护的成本，充分利用 Unifuncs 原生支持自然语言查询的能力。
|
||||
|
||||
1. Client 发送原始简短自然语言 \-\> Node.js 调用 DeepSeek-V3 \-\> 返回**结构化、扩写后的自然语言检索需求（Search Requirements）**（非布尔检索式）。
|
||||
2. Client 展示该检索需求（普通文本/Markdown），允许用户直接进行文字修改与补充 \-\> 用户点击执行，发送修改后的 Confirmed Requirement \-\> Node.js 创建 pg-boss 任务。
|
||||
3. Worker 启动 \-\> 将用户确认的自然语言需求直接作为 content 传给 Unifuncs 创建任务 \-\> 每 5 秒轮询一次 Unifuncs \-\> 增量日志写入 PostgreSQL。
|
||||
4. Client 每 3 秒轮询 Node.js 获取日志 \-\> 渲染 Terminal \-\> 任务完成，渲染结果。
|
||||
|
||||
## **🗄️ 2\. 数据库设计 (Prisma)**
|
||||
|
||||
极简表结构，去掉了复杂的澄清记录，只保留原始问题和最终执行的自然语言需求。
|
||||
|
||||
model AslResearchTask {
|
||||
id String @id @default(uuid())
|
||||
user\_id String
|
||||
|
||||
// Step 1 & 2
|
||||
original\_query String @db.Text
|
||||
target\_sources Json // 选中的数据源，如 \["pubmed.ncbi.nlm.nih.gov"\]
|
||||
filters Json // 高级过滤条件
|
||||
confirmed\_requirement String? @db.Text // 核心字段：用户复核并修改后的自然语言检索需求
|
||||
|
||||
// Step 3
|
||||
status String // 'draft', 'pending', 'running', 'completed', 'failed'
|
||||
unifuncs\_task\_id String? // 外部API的ID
|
||||
execution\_logs Json? // 终端日志 \[{type: 'log', text: '...'}, ...\]
|
||||
|
||||
// Step 4
|
||||
result\_list Json?
|
||||
synthesis\_report String? @db.Text
|
||||
|
||||
created\_at DateTime @default(now())
|
||||
updated\_at DateTime @updatedAt
|
||||
}
|
||||
|
||||
## **🔌 3\. 核心 API 契约**
|
||||
|
||||
### **3.1 检索需求扩写接口 (同步, 无状态)**
|
||||
|
||||
* **POST /api/v1/asl/research/generate-requirement**
|
||||
* **处理：** 拦截用户简短输入，拼装 System Prompt，调用系统内置 LLMFactory（DeepSeek-V3）。
|
||||
* *System Prompt 示例：* “你是一个医学检索辅助专家。请将用户简短的研究意图，扩写并梳理成一份条理清晰的自然语言检索需求说明。内容包括：1. 核心检索主题；2. 建议包含的专业关键词（中英文）；3. 目标人群及干预措施限定；4. 文献类型建议（如 RCT）。输出纯文本，方便用户二次编辑。”
|
||||
* *同时：* 创建数据库记录（状态为 draft）。
|
||||
* **返回：** { taskId: "uuid", generatedRequirement: "研究主题：他汀类药物...\\n目标人群：...\\n检索要求：..." }
|
||||
|
||||
### **3.2 任务启动接口 (进入异步队列)**
|
||||
|
||||
* **PUT /api/v1/asl/research/tasks/:id/execute**
|
||||
* **请求体：** { confirmedRequirement: string }
|
||||
* **处理：** 1\. 更新 AslResearchTask 的 confirmed\_requirement 字段。
|
||||
2\. jobQueue.createJob('deep-research-worker', { taskId: id })
|
||||
3\. 更新状态为 pending。
|
||||
* **返回：** { success: true }
|
||||
|
||||
### **3.3 任务状态与日志轮询接口**
|
||||
|
||||
* **GET /api/v1/asl/research/tasks/:id**
|
||||
* **返回：** 包含 status, execution\_logs, 以及（若完成）synthesis\_report 和 result\_list。
|
||||
|
||||
## **⚙️ 4\. 后台 Worker 逻辑 (Unifuncs 集成)**
|
||||
|
||||
使用平台现有的 pg-boss 机制。
|
||||
|
||||
// backend/src/modules/asl/workers/DeepResearchWorker.ts
|
||||
|
||||
export async function processDeepResearch(job: Job) {
|
||||
const taskId \= job.data.taskId;
|
||||
const task \= await prisma.aslResearchTask.findUnique({ where: { id: taskId } });
|
||||
|
||||
// 1\. 发起 Unifuncs 创建任务请求
|
||||
const unifuncsPayload \= {
|
||||
model: "s2",
|
||||
// 💡 核心变更：直接将用户确认的、详细的自然语言需求传给 Unifuncs，由 Unifuncs 自己去理解和拆解检索词
|
||||
messages: \[{
|
||||
role: "user",
|
||||
content: \`请根据以下详细检索需求执行深度研究：\\n${task.confirmed\_requirement}\`
|
||||
}\],
|
||||
introduction: "你是一名资深的循证医学研究员。请严格遵循用户的检索需求，在指定数据库中执行详尽的深度检索。",
|
||||
max\_depth: 25,
|
||||
domain\_scope: task.target\_sources,
|
||||
// 强制输出格式以分离报告与文献JSON
|
||||
output\_prompt: \`
|
||||
\<REPORT\_SECTION\>
|
||||
\[撰写综合报告\]
|
||||
\</REPORT\_SECTION\>
|
||||
\<JSON\_LIST\_SECTION\>
|
||||
\[输出严格的文献JSON数组\]
|
||||
\</JSON\_LIST\_SECTION\>
|
||||
\`,
|
||||
reference\_style: "link"
|
||||
};
|
||||
|
||||
const createRes \= await unifuncsClient.createTask(unifuncsPayload);
|
||||
const unifuncsId \= createRes.data.task\_id;
|
||||
|
||||
await prisma.aslResearchTask.update({
|
||||
where: { id: taskId },
|
||||
data: { unifuncs\_task\_id: unifuncsId, status: 'running' }
|
||||
});
|
||||
|
||||
// 2\. 轮询 Unifuncs 状态 (防无限死循环，设置最大重试次数)
|
||||
let isCompleted \= false;
|
||||
let maxRetries \= 120; // 假设每5秒查一次，最多查10分钟
|
||||
|
||||
while (\!isCompleted && maxRetries \> 0\) {
|
||||
await sleep(5000);
|
||||
const queryRes \= await unifuncsClient.queryTask(unifuncsId);
|
||||
|
||||
// 解析增量日志 reasoning\_content
|
||||
const logs \= parseReasoningToLogs(queryRes.data.result?.reasoning\_content);
|
||||
|
||||
// 更新数据库日志 (覆盖或追加)
|
||||
await prisma.aslResearchTask.update({
|
||||
where: { id: taskId },
|
||||
data: { execution\_logs: logs }
|
||||
});
|
||||
|
||||
if (queryRes.data.status \=== 'completed') {
|
||||
isCompleted \= true;
|
||||
// 解析提取 \<REPORT\_SECTION\> 和 \<JSON\_LIST\_SECTION\>
|
||||
const report \= extractReport(queryRes.data.result.content);
|
||||
const list \= extractJsonList(queryRes.data.result.content);
|
||||
|
||||
await prisma.aslResearchTask.update({
|
||||
where: { id: taskId },
|
||||
data: { status: 'completed', synthesis\_report: report, result\_list: list }
|
||||
});
|
||||
}
|
||||
maxRetries--;
|
||||
}
|
||||
}
|
||||
|
||||
## **🛡️ 5\. 技术优势**
|
||||
|
||||
1. **零学习成本**：去除了对医生来说晦涩难懂的“布尔逻辑检索式”，整个确认过程完全采用大白话（自然语言），用户审查和修改都极其自然。
|
||||
2. **充分发挥 API 威力**：将“拆解关键词、发起搜索、阅读网页”的复杂动作全部下放给专业的 Unifuncs 引擎，本系统架构只做轻量级的“需求扩写”和“流式日志透传”，代码稳定性极高。
|
||||
3. **极速上线**：前端页面仅需一个大文本框渲染扩写后的要求，没有任何复杂的 UI 组件开销，是名副其实的 MVP 最优解。
|
||||
@@ -0,0 +1,143 @@
|
||||
# **产品需求文档 (PRD)：ASL \- 智能文献检索 (Deep Research) V4.1**
|
||||
|
||||
## **📑 1\. 文档概述**
|
||||
|
||||
| 属性 | 说明 |
|
||||
| :---- | :---- |
|
||||
| **产品名称** | AI Clinical \- ASL 智能文献模块 |
|
||||
| **功能模块** | Deep Research (智能文献检索) |
|
||||
| **文档版本** | V4.1 (自然语言需求确认版) |
|
||||
| **目标受众** | 研发团队、UI/UX 设计师、测试工程师 |
|
||||
| **当前痛点** | 传统医学检索要求医生手动编写复杂的布尔逻辑（Boolean Query），学习成本极高；MVP版本直接盲搜容易偏离意图；强加聊天框（Chat UI）又会破坏工具的沉浸感。 |
|
||||
| **核心目标** | 采用\*\*“单页瀑布流 \+ 自然语言需求扩写 (Requirement Expansion) \+ 人机协同编辑”\*\*的极简专业工作流，彻底消除布尔逻辑的门槛，充分发挥底层深搜大模型的能力。 |
|
||||
|
||||
## **🎯 2\. 用户故事与核心工作流 (User Workflow)**
|
||||
|
||||
**UX 核心理念：单页瀑布流 (Progressive Disclosure) \+ 大白话指令驱动**
|
||||
|
||||
本版本摒弃了传统数据库必须的“检索式”，改为生成一份\*\*“深度检索指令书”\*\*。
|
||||
|
||||
**标准工作流 (The Happy Path)：**
|
||||
|
||||
1. **粗略输入 (Input)：** 医生在顶部文本框中输入一个极其粗略的想法（如“他汀预防心血管疾病，要能下载PDF的”），并勾选数据库范围和年份。
|
||||
2. **意图扩写 (Generate)：** 点击“生成需求书”，系统内置的 LLM 将这句话扩写为一份结构严谨、逻辑清晰的\*\*《自然语言检索指令书》\*\*，并在下方展开【策略确认区】。
|
||||
3. **人工核验与修改 (Edit \- HITL)：** 医生在可编辑的文本区内审查这份指令书。如果发现 AI 遗漏了限定条件（如未限定 RCT），可以直接像写邮件一样用大白话打字补充进去。
|
||||
4. **异步深搜 (Execute)：** 确认无误后点击“执行”，系统展开【AI 执行终端】。该自然语言指令被直接发送给底层 Unifuncs 深搜引擎，任务进入后台队列。
|
||||
5. **透明执行 (Monitor)：** 终端实时打印深搜引擎跨库检索、阅读、抓取 PDF 的进度日志。
|
||||
6. **成果交付 (Results)：** 任务完成后，最下方展开包含图表、文献清单、综合报告的【结果看板】。
|
||||
|
||||
## **💻 3\. 详细功能需求说明 (Functional Requirements)**
|
||||
|
||||
### **模块 3.1：检索立项配置区 (Step 1: Setup)**
|
||||
|
||||
* **自然语言输入区 (Textarea)：** 提供大号文本域，支持用户随意输入临床问题。
|
||||
* **数据源与高级过滤 (Options)：**
|
||||
* 目标数据源 (Checkbox)：PubMed/PMC, BMJ Open/Lancet(OA), Cochrane Library。
|
||||
* 发表年份 (Dropdown)：2010至今, 过去5年, 不限。
|
||||
* 目标文献数 (Dropdown)：\~100篇(测试集), 全面检索。
|
||||
* 强制约束项 (Checkbox)：高亮显示“强制要求：仅限可获取免费全文 (PDF Open Access)”。
|
||||
* **触发动作：** 点击“解析并生成检索需求书”按钮。系统进行短暂 Loading 后，平滑向下滑出 Step 2。
|
||||
|
||||
### **模块 3.2：检索策略确认区 (Step 2: Strategy HITL)**
|
||||
|
||||
**设计意图：** 破除代码恐惧感，建立基于自然语言的专业信任。
|
||||
|
||||
* **左侧 \- 核心意图提炼 (Read-only 卡片)：**
|
||||
* 用精简的 UI 块展示 AI 提取出的结构化要素（例如🎯核心目标、💊干预/疾病、📚文献标准）。
|
||||
* 包含一个“预估命中率”的视觉反馈标签。
|
||||
* **右侧 \- 深度检索指令书编辑器 (Code Editor UI, but Plain Text)：**
|
||||
* **(核心交互)** 这是一个必须可编辑的宽大文本框 (Textarea)。
|
||||
* 里面展示由 AI 生成的一篇结构化大白话要求（如：【核心主题】...【目标文献类型】...【强制数据要求】...）。
|
||||
* 提示文案引导用户：“您可以像写邮件一样在这里补充任何大白话要求，底层的深搜大模型会完美理解。”
|
||||
* **触发动作：** 点击“确认需求，启动 Deep Research”。向下滑出 Step 3。
|
||||
|
||||
### **模块 3.3：AI 执行终端区 (Step 3: Agent Terminal)**
|
||||
|
||||
* **极客暗黑终端 (Dark Mode Log View)：** 固定高度（550px），内部滚动，顶部带脉冲闪烁的 Running 状态灯。
|
||||
* **阶段化日志流 (Event Stream)：** 实时打印后台 Worker 轮询获取到的状态，分为不同的视觉样式：
|
||||
* \[Thinking\] 紫色：AI 分析问题、过滤非 RCT 文献的思考过程。
|
||||
* \[Action\] 蓝色：执行具体站点的 Search 动作。
|
||||
* \[Done\] 绿色：阶段性爬取成功。
|
||||
* \[Summary\] 黄色：阶段性总结。
|
||||
* *前端交互：日志增加时，容器需自动滚动到最底部。*
|
||||
|
||||
### **模块 3.4：最终交付结果大屏 (Step 4: Results Dashboard)**
|
||||
|
||||
* **统计看板 (Top Row)：** \* 数量概览卡片（包含 OA 获取率、研究类型占比）。
|
||||
* 动态图表（Chart.js）：文献来源分布（饼图）、发表年份趋势（柱状图）。
|
||||
* **详情双 Tab 视图：**
|
||||
* **Tab A \- 核心文献清单：** 表格展示 Title, Authors, Journal, Year, Type, PDF状态。
|
||||
* **Tab B \- 智能综合报告：** AI 基于摘要生成的 Markdown 深度报告（背景、共识、研究空白 Gap）。
|
||||
* **科研资产流转 (Actions)：**
|
||||
* 推送至 ASL 初筛池（无缝流入下一阶段的筛选工作流）。
|
||||
* 导出 Excel、Word 报告、RIS 引文。
|
||||
|
||||
## **⚙️ 4\. 技术架构与底层实现规约 (Architecture Specs)**
|
||||
|
||||
### **4.1 系统数据流向**
|
||||
|
||||
1. **指令扩写层 (本系统)：** 前端提交 original\_query \-\> Node.js 调用内部 DeepSeek-V3 \-\> 返回一段 Markdown 格式的**自然语言检索需求书 (Requirement)**。
|
||||
2. **异步执行层 (pg-boss \+ Unifuncs)：** 用户确认后的 confirmed\_requirement \-\> 压入 pg-boss 队列 \-\> Worker 将该自然语言原封不动地发给 Unifuncs /v1/create\_task 接口。由 Unifuncs 内部去理解大白话并自主执行复杂爬虫。
|
||||
3. **状态透传层：** Worker 轮询 Unifuncs 的 reasoning\_content，正则提取并写入 PostgreSQL 的 execution\_logs 数组。前端只负责拉取 DB 渲染，实现状态解耦。
|
||||
|
||||
### **4.2 数据库 Schema (Prisma)**
|
||||
|
||||
model AslResearchTask {
|
||||
id String @id @default(uuid())
|
||||
user\_id String
|
||||
|
||||
// Step 1: 原始输入配置
|
||||
original\_query String @db.Text
|
||||
target\_sources Json
|
||||
filters Json
|
||||
|
||||
// Step 2: HITL 策略确认阶段
|
||||
ai\_intent\_summary Json? // 左侧小卡片用的结构化摘要
|
||||
confirmed\_requirement String? @db.Text // 核心：用户最终复核并修改后的自然语言指令书
|
||||
|
||||
// Step 3: 执行与状态
|
||||
status String // 'draft', 'pending', 'running', 'completed', 'failed'
|
||||
unifuncs\_task\_id String? // 绑定的深搜任务ID
|
||||
execution\_logs Json? // 终端执行日志数组 (增量更新)
|
||||
|
||||
// Step 4: 交付资产
|
||||
result\_list Json? // 抓取到的文献元数据列表
|
||||
synthesis\_report String? @db.Text // Markdown 综合报告
|
||||
|
||||
created\_at DateTime @default(now())
|
||||
updated\_at DateTime @updatedAt
|
||||
}
|
||||
|
||||
### **4.3 Unifuncs 核心 Payload 规约**
|
||||
|
||||
在 Worker 请求 Unifuncs 时，利用其强大的指令遵循能力，强制分离报告与 JSON 列表：
|
||||
|
||||
const unifuncsPayload \= {
|
||||
model: "s2",
|
||||
messages: \[{
|
||||
role: "user",
|
||||
content: \`请严格根据以下检索需求执行深度研究：\\n${task.confirmed\_requirement}\`
|
||||
}\],
|
||||
// 核心约束：强制要求 XML tag 隔离输出，确保前端渲染不崩溃
|
||||
output\_prompt: \`
|
||||
请严格按照以下两部分输出结果，不要包含任何其他废话：
|
||||
\<REPORT\_SECTION\>
|
||||
\[此处撰写深度综合报告，包括研究背景、核心共识、分歧点\]
|
||||
\</REPORT\_SECTION\>
|
||||
|
||||
\<JSON\_LIST\_SECTION\>
|
||||
\[此处输出文献元数据的严格 JSON 数组结构\]
|
||||
\</JSON\_LIST\_SECTION\>
|
||||
\`
|
||||
};
|
||||
|
||||
## **📅 5\. 敏捷迭代开发计划建议 (Sprint Plan)**
|
||||
|
||||
**周期：1.5 周 (约 8 个工作日)**
|
||||
|
||||
| 阶段 | 时间 | 前端任务 (Frontend) | 后端任务 (Backend/Python) |
|
||||
| :---- | :---- | :---- | :---- |
|
||||
| **Phase 1: 单页交互与需求扩写** | Day 1-3 | 搭建 V4.1 瀑布流单页布局；开发 Step 1 和 Step 2 的 UI 联动；支持 Textarea 编辑。 | 升级 Schema；编写“需求扩写 (Requirement Expansion)” 的 Prompt；提供生成草稿接口。 |
|
||||
| **Phase 2: 异步队列与终端日志** | Day 4-6 | 开发暗黑 Terminal 组件；实现轮询接口对接与 auto-scroll 日志滚动逻辑。 | 对接 Unifuncs API；实现 pg-boss 长任务 Worker；解析 reasoning\_content 转为增量 JSON 存入 DB。 |
|
||||
| **Phase 3: 结果解析与多维导出** | Day 7-8 | 集成 Chart.js 绘制双图表；完成 Tab 列表和 Markdown 报告渲染。 | 后端正则切割 \<REPORT\> 与 \<JSON\_LIST\>；提供 Word (复用 Pandoc) 和 .ris 格式的导出接口联调。 |
|
||||
|
||||
@@ -0,0 +1,627 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user