workflow_visualization_20251205_102946.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>知识获取工作流可视化</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. body {
  14. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  15. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  16. color: #333;
  17. line-height: 1.6;
  18. min-height: 100vh;
  19. }
  20. .container {
  21. max-width: 1400px;
  22. margin: 0 auto;
  23. padding: 30px 20px;
  24. }
  25. h1 {
  26. text-align: center;
  27. color: white;
  28. margin-bottom: 40px;
  29. font-size: 32px;
  30. font-weight: 600;
  31. text-shadow: 0 2px 10px rgba(0,0,0,0.2);
  32. letter-spacing: 1px;
  33. }
  34. .tabs {
  35. display: flex;
  36. background: white;
  37. border-radius: 12px 12px 0 0;
  38. box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  39. overflow-x: auto;
  40. padding: 5px;
  41. }
  42. .tab {
  43. padding: 16px 28px;
  44. cursor: pointer;
  45. border: none;
  46. background: transparent;
  47. color: #666;
  48. font-size: 14px;
  49. transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  50. white-space: nowrap;
  51. border-radius: 8px;
  52. margin: 0 4px;
  53. position: relative;
  54. font-weight: 500;
  55. }
  56. .tab:hover {
  57. background: #f0f0f0;
  58. color: #333;
  59. }
  60. .tab.active {
  61. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  62. color: white;
  63. box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  64. }
  65. .tab-content {
  66. display: none;
  67. background: white;
  68. padding: 40px;
  69. border-radius: 0 0 12px 12px;
  70. box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  71. margin-bottom: 20px;
  72. animation: fadeIn 0.3s ease-in;
  73. }
  74. @keyframes fadeIn {
  75. from { opacity: 0; transform: translateY(10px); }
  76. to { opacity: 1; transform: translateY(0); }
  77. }
  78. .tab-content.active {
  79. display: block;
  80. }
  81. .input-section {
  82. background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  83. padding: 28px;
  84. border-radius: 12px;
  85. margin-bottom: 35px;
  86. box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  87. border: 1px solid rgba(255,255,255,0.5);
  88. }
  89. .input-section h3 {
  90. color: #2c3e50;
  91. margin-bottom: 20px;
  92. font-size: 20px;
  93. font-weight: 600;
  94. display: flex;
  95. align-items: center;
  96. gap: 10px;
  97. }
  98. .input-section h3::before {
  99. content: '📋';
  100. font-size: 24px;
  101. }
  102. .input-item {
  103. margin-bottom: 16px;
  104. padding: 12px;
  105. background: rgba(255,255,255,0.7);
  106. border-radius: 8px;
  107. transition: all 0.3s;
  108. }
  109. .input-item:hover {
  110. background: rgba(255,255,255,0.9);
  111. transform: translateX(5px);
  112. }
  113. .input-item strong {
  114. color: #495057;
  115. display: inline-block;
  116. width: 110px;
  117. font-weight: 600;
  118. }
  119. .input-item .placeholder {
  120. color: #999;
  121. font-style: italic;
  122. }
  123. .workflow {
  124. position: relative;
  125. }
  126. .workflow-step {
  127. background: white;
  128. border: 2px solid #e0e0e0;
  129. border-radius: 12px;
  130. margin-bottom: 25px;
  131. transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  132. overflow: hidden;
  133. box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  134. }
  135. .workflow-step.active {
  136. border-color: #667eea;
  137. box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
  138. transform: translateY(-2px);
  139. }
  140. .step-header {
  141. padding: 20px 24px;
  142. background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  143. cursor: pointer;
  144. display: flex;
  145. justify-content: space-between;
  146. align-items: center;
  147. user-select: none;
  148. transition: all 0.3s;
  149. }
  150. .step-header:hover {
  151. background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  152. }
  153. .workflow-step.active .step-header {
  154. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  155. color: white;
  156. }
  157. .workflow-step.active .step-name {
  158. color: white;
  159. }
  160. .workflow-step.active .step-toggle {
  161. color: white;
  162. }
  163. .step-title {
  164. display: flex;
  165. align-items: center;
  166. gap: 15px;
  167. }
  168. .step-number {
  169. display: inline-flex;
  170. align-items: center;
  171. justify-content: center;
  172. width: 36px;
  173. height: 36px;
  174. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  175. color: white;
  176. border-radius: 50%;
  177. font-size: 16px;
  178. font-weight: bold;
  179. box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  180. }
  181. .workflow-step.active .step-number {
  182. background: white;
  183. color: #667eea;
  184. box-shadow: 0 4px 12px rgba(255,255,255,0.3);
  185. }
  186. .step-name {
  187. font-size: 18px;
  188. font-weight: 600;
  189. color: #2c3e50;
  190. }
  191. .step-toggle {
  192. color: #6c757d;
  193. font-size: 20px;
  194. transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  195. }
  196. .step-toggle.expanded {
  197. transform: rotate(180deg);
  198. }
  199. .step-content {
  200. padding: 0 20px;
  201. max-height: 0;
  202. overflow: hidden;
  203. transition: max-height 0.3s ease-out, padding 0.3s;
  204. }
  205. .step-content.expanded {
  206. max-height: 5000px;
  207. padding: 20px;
  208. }
  209. .step-detail {
  210. margin-bottom: 20px;
  211. }
  212. .step-detail-label {
  213. font-weight: 600;
  214. color: #495057;
  215. margin-bottom: 10px;
  216. display: block;
  217. font-size: 14px;
  218. text-transform: uppercase;
  219. letter-spacing: 0.5px;
  220. }
  221. .step-detail-content {
  222. background: #f8f9fa;
  223. padding: 16px;
  224. border-radius: 8px;
  225. border-left: 4px solid #667eea;
  226. font-size: 14px;
  227. line-height: 1.8;
  228. white-space: pre-wrap;
  229. word-wrap: break-word;
  230. max-height: 400px;
  231. overflow-y: auto;
  232. box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  233. }
  234. .json-content {
  235. font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
  236. background: #1e1e1e;
  237. color: #d4d4d4;
  238. padding: 20px;
  239. border-radius: 8px;
  240. overflow-x: auto;
  241. border-left: 4px solid #667eea;
  242. box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  243. }
  244. .prompt-toggle-btn {
  245. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  246. color: white;
  247. border: none;
  248. padding: 10px 20px;
  249. border-radius: 6px;
  250. cursor: pointer;
  251. font-size: 13px;
  252. font-weight: 500;
  253. margin-top: 15px;
  254. transition: all 0.3s;
  255. box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  256. }
  257. .prompt-toggle-btn:hover {
  258. transform: translateY(-2px);
  259. box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  260. }
  261. .prompt-content {
  262. display: none;
  263. margin-top: 15px;
  264. padding: 16px;
  265. background: #fff3cd;
  266. border-radius: 8px;
  267. border-left: 4px solid #ffc107;
  268. font-size: 13px;
  269. line-height: 1.8;
  270. white-space: pre-wrap;
  271. word-wrap: break-word;
  272. max-height: 500px;
  273. overflow-y: auto;
  274. }
  275. .prompt-content.show {
  276. display: block;
  277. animation: slideDown 0.3s ease-out;
  278. }
  279. @keyframes slideDown {
  280. from {
  281. opacity: 0;
  282. max-height: 0;
  283. }
  284. to {
  285. opacity: 1;
  286. max-height: 500px;
  287. }
  288. }
  289. .output-section {
  290. background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  291. padding: 28px;
  292. border-radius: 12px;
  293. margin-top: 35px;
  294. border-left: 4px solid #0ea5e9;
  295. box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2);
  296. }
  297. .output-section h3 {
  298. color: #0369a1;
  299. margin-bottom: 20px;
  300. font-size: 20px;
  301. font-weight: 600;
  302. display: flex;
  303. align-items: center;
  304. gap: 10px;
  305. }
  306. .output-section h3::before {
  307. content: '✨';
  308. font-size: 24px;
  309. }
  310. .arrow {
  311. text-align: center;
  312. color: #667eea;
  313. font-size: 32px;
  314. margin: -15px 0;
  315. position: relative;
  316. z-index: 1;
  317. filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
  318. }
  319. .arrow::before {
  320. content: '↓';
  321. }
  322. @media (max-width: 768px) {
  323. .container {
  324. padding: 10px;
  325. }
  326. .tab {
  327. padding: 12px 15px;
  328. font-size: 13px;
  329. }
  330. .tab-content {
  331. padding: 20px;
  332. }
  333. }
  334. </style>
  335. </head>
  336. <body>
  337. <div class="container">
  338. <h1>知识获取工作流可视化</h1>
  339. <div class="tabs" id="tabs">
  340. <button class="tab active" onclick="switchTab(0)">教资查分这个信息怎么来的</button>
  341. </div>
  342. <div class="tab-content active" id="tab-0">
  343. <div class="input-section">
  344. <h3>输入信息</h3>
  345. <div class="input-item"><strong>问题:</strong> 教资查分这个信息怎么来的</div>
  346. <div class="input-item"><strong>帖子信息:</strong> 发帖时间:2025.11.07</div>
  347. <div class="input-item"><strong>人设信息:</strong> <span class="placeholder">(无)</span></div>
  348. </div>
  349. <div class="workflow">
  350. <div class="workflow-step" id="step-0-0">
  351. <div class="step-header" onclick="toggleStep('step-0-0')">
  352. <div class="step-title">
  353. <span class="step-number">1</span>
  354. <span class="step-name">生成查询</span>
  355. </div>
  356. <span class="step-toggle">▼</span>
  357. </div>
  358. <div class="step-content" id="content-step-0-0">
  359. <div class="step-detail">
  360. <span class="step-detail-label">生成的Query:</span>
  361. <div class="step-detail-content">用什么工具获取教资查分这个信息</div>
  362. </div>
  363. </div>
  364. </div>
  365. <div class="arrow"></div>
  366. <div class="workflow-step" id="step-0-1">
  367. <div class="step-header" onclick="toggleStep('step-0-1')">
  368. <div class="step-title">
  369. <span class="step-number">2</span>
  370. <span class="step-name">选择工具</span>
  371. </div>
  372. <span class="step-toggle">▼</span>
  373. </div>
  374. <div class="step-content" id="content-step-0-1">
  375. <div class="step-detail">
  376. <span class="step-detail-label">工具名称:</span>
  377. <div class="step-detail-content">新红热搜词搜索</div>
  378. </div>
  379. <div class="step-detail">
  380. <span class="step-detail-label">工具调用ID:</span>
  381. <div class="step-detail-content">new_red_hot_search_words_search</div>
  382. </div>
  383. <div class="step-detail">
  384. <span class="step-detail-label">使用方法:</span>
  385. <div class="step-detail-content">输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天热度趋势曲线、声量概览及相关搜索结果,全面了解该信息的关注度和趋势。</div>
  386. </div>
  387. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-0-1')">显示 Prompt</button>
  388. <div class="prompt-content" id="prompt-step-0-1"># 角色定位
  389. 你是一个工具匹配专家,负责根据用户需求从MCP工具库中找到最合适的工具。
  390. # 核心任务
  391. 1. 接收上游输入的需求用什么工具获取教资查分这个信息
  392. 2. 理解需求的核心意图(用户想找什么、解决什么问题)
  393. 3. 查询MCP工具库,匹配最相关的工具
  394. 4. 返回工具信息或&quot;无工具&quot;
  395. # MCP工具库信息
  396. 工具名:新红话题榜单
  397. 工具调用ID:xh_newrank_hottopics
  398. 工具介绍:提供小红书平台热门话题全景榜单数据,覆盖排名、话题名称及核心简介、参与人数增量、浏览量增量、笔记增量、互动增量(点赞 / 收藏 / 评论综合统计)等核心维度。支持精准筛选与高效应用。话题类型涵盖美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直领域,统计时间可选择日榜(近 7 天)、周榜(近 4 周)、月榜(近 5 个月),满足不同周期的热点追踪需求。榜单数据实时更新,同步呈现官方流量扶持话题标识,助力品牌、达人快速锁定高曝光赛道;便于拆解爆款逻辑、制定内容选题策略,提升运营效率。
  399. 工具名:新红话题搜索
  400. 工具调用ID:new_red_TopicSearch
  401. 工具介绍:提供小红书平台话题精准检索服务,输入关键词即可匹配相关话题完整列表,核心数据包含话题名称及简介、总浏览量、总参与人数、近 30 天笔记增量、近 30 天互动增量。支持按参与人数、浏览量等指标排序筛选,可精准定位品牌发起话题或官方扶持话题,清晰展示话题流量趋势与内容创作方向。无论是达人寻找高适配性话题蹭流,还是品牌监测竞品话题布局,均能通过数据支撑快速决策,降低内容试错成本。
  402. 工具名:新红热搜词榜单
  403. 工具调用ID:xh_newrank_hotwords
  404. 工具介绍:提供小红书平台热搜词权威榜单数据,核心维度包括实时排名、热搜词、主要覆盖内容领域、相关笔记总量、爆文数(高互动笔记占比)、热度值(综合搜索量与互动率计算)。支持按统计时间(日榜 / 周榜 / 月榜)及 美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直内容领域筛选。榜单每日更新,助力用户第一时间捕捉流量风口。可直接应用于选题规划、竞品投放策略分析。
  405. 工具名:新红热搜词搜索
  406. 工具调用ID:new_red_hot_search_words_search
  407. 工具介绍:提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。
  408. # 匹配规则
  409. ## 匹配逻辑
  410. 1. **需求本质识别**:理解需求背后的真实意图
  411. - 示例:&quot;谐音梗这个选题灵感怎么来的&quot; → 真实意图是&quot;寻找热门选题的来源/依据&quot;
  412. - 不关注具体关键词(如&quot;谐音梗&quot;),而关注用户想解决什么问题
  413. 2. **需求类型分类**:判断需求属于哪种类型
  414. - 寻找灵感/选题来源 → 需要热搜词/榜单类工具
  415. - 分析特定词的热度/趋势 → 需要趋势分析类工具
  416. - 寻找内容案例/参考 → 需要内容搜索/爬取类工具
  417. - 生成创意内容 → 需要大模型/AI生成类工具
  418. 3. **工具能力匹配**:根据需求类型,对比工具的核心能力
  419. - 看工具能否解决该类型的问题(如&quot;提供热门选题&quot;)
  420. 4. **选择最优工具**:返回能力最匹配的1个工具,无匹配则返回&quot;无工具&quot;
  421. ## 匹配标准
  422. - 关键词匹配:需求核心词是否在工具介绍中出现或相关
  423. - 功能匹配:工具能力是否覆盖需求要解决的问题
  424. ### 需求意图映射表
  425. | 需求意图关键信号 | 需求类型 | 对应工具类型 |
  426. |----------------|---------|------------|
  427. | &quot;灵感怎么来的&quot;、&quot;选题来源&quot;、&quot;找选题&quot; | 寻找选题灵感 | 热搜词榜单工具 |
  428. | &quot;这个词热不热&quot;、&quot;趋势如何&quot;、&quot;热度分析&quot; | 关键词趋势分析 | 热搜词搜索工具 |
  429. | &quot;找案例&quot;、&quot;参考内容&quot;、&quot;爆款笔记&quot; | 内容案例搜索 | 内容爬取工具 |
  430. ## 无匹配判定
  431. 当MCP工具库中没有任何工具能解决该需求时,直接返回空json对象。
  432. # 输出格式
  433. json格式,字段定义如下:
  434. &#39;&#39;&#39;json
  435. {
  436. &quot;工具名&quot;: &quot;工具名称&quot;,
  437. &quot;工具调用ID&quot;: &quot;调用ID&quot;,
  438. &quot;使用方法&quot;: &quot;简要说明如何使用该工具解决用户需求&quot;
  439. }
  440. &#39;&#39;&#39;
  441. ## 无匹配时
  442. &#39;&#39;&#39;json
  443. {
  444. }
  445. &#39;&#39;&#39;
  446. # 执行要求
  447. 1. 只返回1个最优工具,不返回多个备选
  448. 2. 严格按照输出格式返回结果
  449. 3. 使用方法要具体,说明如何用该工具解决当前需求
  450. # 示例
  451. ## 示例1:成功匹配
  452. 需求输入:什么工具能找到教资查分这个灵感点?
  453. 输出:
  454. 工具名:新红热搜词搜索
  455. 工具调用ID:new_red_hot_search_words_search
  456. 使用方法:输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。
  457. {
  458. &quot;工具名&quot;: &quot;新红热搜词搜索&quot;,
  459. &quot;工具调用ID&quot;: &quot;工具调用ID:new_red_hot_search_words_search&quot;,
  460. &quot;使用方法&quot;: &quot;输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。&quot;
  461. }
  462. ## 示例2:无匹配
  463. 需求输入:哪里可以找到股票实时行情数据?
  464. 输出:
  465. {
  466. }
  467. # 上游输入的需求用什么工具获取教资查分这个信息
  468. {用什么工具获取教资查分这个信息}</div>
  469. </div>
  470. </div>
  471. <div class="arrow"></div>
  472. <div class="workflow-step" id="step-0-2">
  473. <div class="step-header" onclick="toggleStep('step-0-2')">
  474. <div class="step-title">
  475. <span class="step-number">3</span>
  476. <span class="step-name">提取参数</span>
  477. </div>
  478. <span class="step-toggle">▼</span>
  479. </div>
  480. <div class="step-content" id="content-step-0-2">
  481. <div class="step-detail">
  482. <span class="step-detail-label">提取的参数:</span>
  483. <div class="step-detail-content json-content">{
  484. &quot;prompt&quot;: &quot;教资查分&quot;
  485. }</div>
  486. </div>
  487. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-0-2')">显示 Prompt</button>
  488. <div class="prompt-content" id="prompt-step-0-2">你是一个API调用专家。你的任务是根据工具的信息和用户的查询,生成正确的调用参数。
  489. 查询内容:
  490. 用什么工具获取教资查分这个信息
  491. 工具信息:
  492. {
  493. &quot;name&quot;: &quot;新红热搜词搜索&quot;,
  494. &quot;description&quot;: &quot;提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。&quot;,
  495. &quot;inputSchema&quot;: {
  496. &quot;type&quot;: &quot;object&quot;,
  497. &quot;properties&quot;: {
  498. &quot;prompt&quot;: {
  499. &quot;type&quot;: &quot;string&quot;,
  500. &quot;description&quot;: &quot;提示词prompt,包含完整的输入信息,图片、音频等多媒体需要url表示&quot;
  501. }
  502. },
  503. &quot;required&quot;: [
  504. &quot;prompt&quot;
  505. ]
  506. }
  507. }
  508. 请分析工具的参数要求,根据查询内容提取或推断出合适的参数值。
  509. 输出格式:请以 JSON 格式输出参数字典,例如:
  510. {
  511. &quot;param1&quot;: &quot;value1&quot;,
  512. &quot;param2&quot;: &quot;value2&quot;
  513. }
  514. 注意事项:
  515. 1. 只输出参数的JSON字典,不要包含任何解释
  516. 2. 参数名必须与工具定义中的参数名完全一致
  517. 3. 参数值要从查询中提取或合理推断
  518. 4. 不要添加工具定义中没有的参数
  519. 5. 如果某个参数无法从查询中获取,使用合理的默认值或省略该参数
  520. 只输出JSON,不要包含markdown标记。</div>
  521. </div>
  522. </div>
  523. <div class="arrow"></div>
  524. <div class="workflow-step" id="step-0-3">
  525. <div class="step-header" onclick="toggleStep('step-0-3')">
  526. <div class="step-title">
  527. <span class="step-number">4</span>
  528. <span class="step-name">执行工具</span>
  529. </div>
  530. <span class="step-toggle">▼</span>
  531. </div>
  532. <div class="step-content" id="content-step-0-3">
  533. <div class="step-detail">
  534. <span class="step-detail-label">执行结果:</span>
  535. <div class="step-detail-content json-content">{
  536. &quot;result&quot;: {
  537. &quot;image_url&quot;: [],
  538. &quot;content&quot;: &quot;## \&quot;教资查分\&quot;关键词数据表现和趋势分析\n\n### 热度值\n- 近30天热度值超过96.14%全站其他词\n- 近30天热度值超过95.86%教育领域其他词\n\n### 声量概览\n- **笔记数**: 16篇(环比增长700.00%)\n- **总热度**: 4082(环比增长408100.00%)\n- **热门天数**: 4/30天\n- **近30天热门内容领域**:\n - 教育: 56.25%\n - 职场: 31.25%\n - 运动健身: 6.25%\n- **高频搭配词**: 暂无相关数据\n\n### 热度值趋势\n- **整体趋势**: 下降趋势\n- **效果分析**:\n - TOP1下降趋势: 2025-11-07 至 2025-11-08\n - TOP2下降趋势: 2025-11-04 至 2025-11-05\n\n### 相关搜索结果\n- 共1条搜索结果\n- 内容领域分布: 教育、职场等领域为主\n\n从数据可以看出,\&quot;教资查分\&quot;这个关键词在近期有显著的热度增长,但目前呈现下降趋势。该关键词主要与教育和职场领域相关,这符合教师资格证查询分数的实际应用场景。虽然笔记数量不多(16篇),但环比增长非常高,表明这是一个短期内突然受到关注的话题。&quot;,
  539. &quot;video_url&quot;: []
  540. },
  541. &quot;success&quot;: true,
  542. &quot;error&quot;: &quot;&quot;
  543. }</div>
  544. </div>
  545. </div>
  546. </div>
  547. </div>
  548. <div class="output-section">
  549. <h3>最终输出</h3>
  550. <div class="step-detail-content json-content">{
  551. &quot;result&quot;: {
  552. &quot;image_url&quot;: [],
  553. &quot;content&quot;: &quot;## \&quot;教资查分\&quot;关键词数据表现和趋势分析\n\n### 热度值\n- 近30天热度值超过96.14%全站其他词\n- 近30天热度值超过95.86%教育领域其他词\n\n### 声量概览\n- **笔记数**: 16篇(环比增长700.00%)\n- **总热度**: 4082(环比增长408100.00%)\n- **热门天数**: 4/30天\n- **近30天热门内容领域**:\n - 教育: 56.25%\n - 职场: 31.25%\n - 运动健身: 6.25%\n- **高频搭配词**: 暂无相关数据\n\n### 热度值趋势\n- **整体趋势**: 下降趋势\n- **效果分析**:\n - TOP1下降趋势: 2025-11-07 至 2025-11-08\n - TOP2下降趋势: 2025-11-04 至 2025-11-05\n\n### 相关搜索结果\n- 共1条搜索结果\n- 内容领域分布: 教育、职场等领域为主\n\n从数据可以看出,\&quot;教资查分\&quot;这个关键词在近期有显著的热度增长,但目前呈现下降趋势。该关键词主要与教育和职场领域相关,这符合教师资格证查询分数的实际应用场景。虽然笔记数量不多(16篇),但环比增长非常高,表明这是一个短期内突然受到关注的话题。&quot;,
  554. &quot;video_url&quot;: []
  555. },
  556. &quot;success&quot;: true,
  557. &quot;error&quot;: &quot;&quot;
  558. }</div>
  559. </div>
  560. </div>
  561. </div>
  562. <script>
  563. function switchTab(index) {
  564. // 隐藏所有tab内容
  565. const contents = document.querySelectorAll('.tab-content');
  566. contents.forEach(content => content.classList.remove('active'));
  567. // 移除所有tab的active状态
  568. const tabs = document.querySelectorAll('.tab');
  569. tabs.forEach(tab => tab.classList.remove('active'));
  570. // 显示选中的tab内容
  571. document.getElementById('tab-' + index).classList.add('active');
  572. tabs[index].classList.add('active');
  573. }
  574. function toggleStep(stepId) {
  575. const step = document.getElementById(stepId);
  576. const content = document.getElementById('content-' + stepId);
  577. const toggle = step.querySelector('.step-toggle');
  578. if (content.classList.contains('expanded')) {
  579. content.classList.remove('expanded');
  580. toggle.classList.remove('expanded');
  581. step.classList.remove('active');
  582. } else {
  583. content.classList.add('expanded');
  584. toggle.classList.add('expanded');
  585. step.classList.add('active');
  586. }
  587. }
  588. function togglePrompt(promptId) {
  589. const promptContent = document.getElementById(promptId);
  590. const btn = promptContent.previousElementSibling;
  591. if (promptContent.classList.contains('show')) {
  592. promptContent.classList.remove('show');
  593. btn.textContent = '显示 Prompt';
  594. } else {
  595. promptContent.classList.add('show');
  596. btn.textContent = '隐藏 Prompt';
  597. }
  598. }
  599. // 页面加载时高亮第一个步骤
  600. window.addEventListener('load', function() {
  601. const firstSteps = document.querySelectorAll('.workflow-step');
  602. firstSteps.forEach((step, index) => {
  603. if (index === 0 || index % (firstSteps.length / document.querySelectorAll('.tab-content').length) === 0) {
  604. step.classList.add('active');
  605. const content = step.querySelector('.step-content');
  606. const toggle = step.querySelector('.step-toggle');
  607. if (content) {
  608. content.classList.add('expanded');
  609. toggle.classList.add('expanded');
  610. }
  611. }
  612. });
  613. });
  614. </script>
  615. </body>
  616. </html>