workflow_visualization_20251205_144231.html 71 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429
  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. <button class="tab " onclick="switchTab(1)">女儿的生日派对这个选题点怎么来的</button>
  342. <button class="tab " onclick="switchTab(2)">花艺造型蛋糕这个选题点怎么来的</button>
  343. </div>
  344. <div class="tab-content active" id="tab-0">
  345. <div class="input-section">
  346. <h3>输入信息</h3>
  347. <div class="input-item"><strong>问题:</strong> 教资查分这个选题点怎么来的</div>
  348. <div class="input-item"><strong>帖子信息:</strong> 发帖时间:2025.11.07</div>
  349. <div class="input-item"><strong>人设信息:</strong> <span class="placeholder">(无)</span></div>
  350. </div>
  351. <div class="workflow">
  352. <div class="workflow-step" id="step-0-0">
  353. <div class="step-header" onclick="toggleStep('step-0-0')">
  354. <div class="step-title">
  355. <span class="step-number">1</span>
  356. <span class="step-name">生成查询</span>
  357. </div>
  358. <span class="step-toggle">▼</span>
  359. </div>
  360. <div class="step-content" id="content-step-0-0">
  361. <div class="step-detail">
  362. <span class="step-detail-label">生成的Query:</span>
  363. <div class="step-detail-content">用什么工具获取 教资查分这个选题点</div>
  364. </div>
  365. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-0-0')">显示 Prompt</button>
  366. <div class="prompt-content" id="prompt-step-0-0">你是一个问题转换助手。你的任务是将用户的问题,转换一个用于搜索或调用工具的查询语句(Query)。
  367. 用户问题:
  368. 教资查分这个选题点怎么来的
  369. 转换规则:
  370. - 提取问题中的 主体对象
  371. - 将问题转换成 用什么工具获取 [主体对象] query格式
  372. 示例:
  373. 用户问题: “教资查分”这个选题点怎么来的
  374. 主体对象: “教资查分”选题点
  375. 转换的Query: 用什么工具获取“教资查分”选题点
  376. 请分析上述信息,按要求生成Query语句。
  377. 只输出Query语句,不要包含任何解释。</div>
  378. </div>
  379. </div>
  380. <div class="arrow"></div>
  381. <div class="workflow-step" id="step-0-1">
  382. <div class="step-header" onclick="toggleStep('step-0-1')">
  383. <div class="step-title">
  384. <span class="step-number">2</span>
  385. <span class="step-name">选择工具</span>
  386. </div>
  387. <span class="step-toggle">▼</span>
  388. </div>
  389. <div class="step-content" id="content-step-0-1">
  390. <div class="step-detail">
  391. <span class="step-detail-label">工具名称:</span>
  392. <div class="step-detail-content">新红热搜词搜索</div>
  393. </div>
  394. <div class="step-detail">
  395. <span class="step-detail-label">工具调用ID:</span>
  396. <div class="step-detail-content">new_red_hot_search_words_search</div>
  397. </div>
  398. <div class="step-detail">
  399. <span class="step-detail-label">使用方法:</span>
  400. <div class="step-detail-content">输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、声量概览及近90天热度值趋势曲线,以评估其作为选题点的流量潜力和趋势。</div>
  401. </div>
  402. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-0-1')">显示 Prompt</button>
  403. <div class="prompt-content" id="prompt-step-0-1"># 角色定位
  404. 你是一个工具匹配专家,负责根据用户需求从MCP工具库中找到最合适的工具。
  405. # 核心任务
  406. 1. 接收上游传入的需求用什么工具获取 教资查分这个选题点
  407. 2. 理解需求的核心意图(用户想找什么、解决什么问题)
  408. 3. **判断需求内容是否在工具覆盖范围内**
  409. 4. 查询MCP工具库,匹配最相关的工具
  410. 5. 返回工具信息或&quot;无工具&quot;
  411. # MCP工具库信息
  412. 工具名:新红话题榜单
  413. 工具调用ID:xh_newrank_hottopics
  414. 工具介绍:提供小红书平台热门话题全景榜单数据,覆盖排名、话题名称及核心简介、参与人数增量、浏览量增量、笔记增量、互动增量(点赞 / 收藏 / 评论综合统计)等核心维度。支持精准筛选与高效应用。话题类型涵盖美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直领域,统计时间可选择日榜(近 7 天)、周榜(近 4 周)、月榜(近 5 个月),满足不同周期的热点追踪需求。榜单数据实时更新,同步呈现官方流量扶持话题标识,助力品牌、达人快速锁定高曝光赛道;便于拆解爆款逻辑、制定内容选题策略,提升运营效率。
  415. 工具名:新红话题搜索
  416. 工具调用ID:new_red_TopicSearch
  417. 工具介绍:提供小红书平台话题精准检索服务,输入关键词即可匹配相关话题完整列表,核心数据包含话题名称及简介、总浏览量、总参与人数、近 30 天笔记增量、近 30 天互动增量。支持按参与人数、浏览量等指标排序筛选,可精准定位品牌发起话题或官方扶持话题,清晰展示话题流量趋势与内容创作方向。无论是达人寻找高适配性话题蹭流,还是品牌监测竞品话题布局,均能通过数据支撑快速决策,降低内容试错成本。
  418. 工具名:新红热搜词榜单
  419. 工具调用ID:xh_newrank_hotwords
  420. 工具介绍:提供小红书平台热搜词权威榜单数据,核心维度包括实时排名、热搜词、主要覆盖内容领域、相关笔记总量、爆文数(高互动笔记占比)、热度值(综合搜索量与互动率计算)。支持按统计时间(日榜 / 周榜 / 月榜)及 美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直内容领域筛选。榜单每日更新,助力用户第一时间捕捉流量风口。可直接应用于选题规划、竞品投放策略分析。
  421. 工具名:新红热搜词搜索
  422. 工具调用ID:new_red_hot_search_words_search
  423. 工具介绍:提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。
  424. # 匹配规则
  425. ## 匹配逻辑(按顺序执行)
  426. ### 第一步:需求本质识别
  427. 理解需求背后的真实意图:
  428. - 示例:&quot;谐音梗这个选题灵感怎么来的&quot; → 真实意图是&quot;寻找热门选题的来源/方法&quot;
  429. - 示例:&quot;女儿生日派对这个选题点怎么来的&quot; → 真实意图是&quot;寻找选题的灵感来源&quot;
  430. - 不关注具体关键词,而关注用户想解决什么问题
  431. ### 第二步:内容适用性判断(关键!)
  432. 用什么工具能寻找到来源方法
  433. **在匹配工具前,必须先判断选题内容是否在工具覆盖范围内**
  434. #### 热搜词工具适用的内容类型:
  435. - ✅ **大众话题**:教资查分、高考、春节、双十一等
  436. - ✅ **社会热点**:政策变化、明星事件、流行趋势
  437. - ✅ **行业热点**:美妆新品、穿搭流行、热门景点
  438. - ✅ **周期性事件**:节日、考试、季节性话题
  439. - ✅ **群体性关注**:大多数人都可能关注的话题
  440. #### 热搜词工具不适用的内容类型:
  441. - ❌ **个人化场景**:我的生日、女儿生日派对、我的婚礼
  442. - ❌ **私人事件**:家庭聚会、个人旅行、朋友聚餐
  443. - ❌ **特定个体**:某个具体的人、某个具体的宠物、某个具体的家庭
  444. - ❌ **小众话题**:极少数人关注的专业话题
  445. - ❌ **虚构内容**:不存在的事件、假设的场景
  446. **判断标准**:
  447. - 这个选题是否有可能出现在小红书热搜榜上?
  448. - 这个选题是否是大众普遍关注的?
  449. - 这个选题是否具有&quot;群体性&quot;而非&quot;个体性&quot;?
  450. **如果内容不在适用范围,直接返回&quot;无工具&quot;,不再继续匹配。**
  451. ### 第三步:需求类型分类
  452. 判断需求属于哪种类型:
  453. - 寻找灵感/选题来源 → 需要热搜词/榜单类工具
  454. - 分析特定词的热度/趋势 → 需要趋势分析类工具
  455. - 寻找内容案例/参考 → 需要内容搜索/爬取类工具
  456. - 生成创意内容 → 需要大模型/AI生成类工具
  457. ### 第四步:工具能力匹配
  458. 根据需求类型,对比工具的核心能力:
  459. - 工具能否解决该类型的问题(如&quot;提供热门选题&quot;)
  460. ### 第五步:选择最优工具
  461. 返回能力最匹配的1个工具,无匹配则返回&quot;无工具&quot;
  462. ## 匹配标准
  463. - 功能匹配:工具能力是否覆盖需求要解决的问题
  464. ## 无匹配判定
  465. 当满足以下任一条件时,返回&quot;无工具&quot;:
  466. 1. 需求内容不在工具覆盖范围内(如非常个人化场景)
  467. 2. MCP工具库中没有工具能解决该需求
  468. 3. 需求涉及的领域完全不在工具库范围
  469. # 输出格式
  470. json格式,字段定义如下:
  471. &#39;&#39;&#39;json
  472. {
  473. &quot;工具名&quot;: &quot;工具名称&quot;,
  474. &quot;工具调用ID&quot;: &quot;调用ID&quot;,
  475. &quot;使用方法&quot;: &quot;简要说明如何使用该工具解决用户需求&quot;
  476. }
  477. &#39;&#39;&#39;
  478. ## 无匹配时
  479. &#39;&#39;&#39;json
  480. {
  481. }
  482. &#39;&#39;&#39;
  483. # 执行要求
  484. 1. **必须先执行&quot;内容适用性判断&quot;**,再进行工具匹配
  485. 2. 只返回1个最优工具,不返回多个备选
  486. 3. 严格按照输出格式返回结果
  487. 4. 使用方法要具体,说明如何用该工具解决当前需求
  488. # 示例
  489. ## 示例1:成功匹配
  490. 需求输入:什么工具能找到教资查分这个灵感点?
  491. 输出:
  492. 工具名:新红热搜词搜索
  493. 工具调用ID:new_red_hot_search_words_search
  494. 使用方法:输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。
  495. {
  496. &quot;工具名&quot;: &quot;新红热搜词搜索&quot;,
  497. &quot;工具调用ID&quot;: &quot;工具调用ID:new_red_hot_search_words_search&quot;,
  498. &quot;使用方法&quot;: &quot;输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。&quot;
  499. }
  500. ## 示例2:无匹配
  501. 需求输入:哪里可以找到股票实时行情数据?
  502. 输出:
  503. {
  504. }
  505. # 上游输入的需求用什么工具获取 教资查分这个选题点
  506. {用什么工具获取 教资查分这个选题点}</div>
  507. </div>
  508. </div>
  509. <div class="arrow"></div>
  510. <div class="workflow-step" id="step-0-2">
  511. <div class="step-header" onclick="toggleStep('step-0-2')">
  512. <div class="step-title">
  513. <span class="step-number">3</span>
  514. <span class="step-name">提取参数</span>
  515. </div>
  516. <span class="step-toggle">▼</span>
  517. </div>
  518. <div class="step-content" id="content-step-0-2">
  519. <div class="step-detail">
  520. <span class="step-detail-label">提取的参数:</span>
  521. <div class="step-detail-content json-content">{
  522. &quot;prompt&quot;: &quot;输入关键词\&quot;教资查分\&quot;,获取该词在小红书的热度值、近90天热度值趋势曲线、声量概览及相关搜索结果,从而判断其作为选题点的热度和趋势,辅助选题决策。&quot;
  523. }</div>
  524. </div>
  525. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-0-2')">显示 Prompt</button>
  526. <div class="prompt-content" id="prompt-step-0-2">你是一个API调用专家。你的任务是根据已经选择的工具及使用方法信息生成正确的调用参数。
  527. 选择的工具调用ID:
  528. new_red_hot_search_words_search
  529. 选择的工具使用方法:
  530. 输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天热度值趋势曲线、声量概览及相关搜索结果,从而判断其作为选题点的热度和趋势,辅助选题决策。
  531. 所有的工具参数定义:
  532. {
  533. &quot;name&quot;: &quot;新红热搜词搜索&quot;,
  534. &quot;description&quot;: &quot;提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。&quot;,
  535. &quot;inputSchema&quot;: {
  536. &quot;type&quot;: &quot;object&quot;,
  537. &quot;properties&quot;: {
  538. &quot;prompt&quot;: {
  539. &quot;type&quot;: &quot;string&quot;,
  540. &quot;description&quot;: &quot;用户使用方法,包括输入的关键词&quot;
  541. }
  542. },
  543. &quot;required&quot;: [
  544. &quot;prompt&quot;
  545. ]
  546. }
  547. }
  548. 请分析工具的参数要求,根据查询内容提取或推断出合适的参数值。
  549. 输出格式:请以 JSON 格式输出参数字典,例如:
  550. {
  551. &quot;param1&quot;: &quot;value1&quot;,
  552. &quot;param2&quot;: &quot;value2&quot;
  553. }
  554. 注意事项:
  555. 1. 只输出参数的JSON字典,不要包含任何解释
  556. 2. 参数名必须与工具定义中的参数名完全一致
  557. 3. 参数值要从查询中提取或合理推断
  558. 4. 不要添加工具定义中没有的参数
  559. 5. 如果某个参数无法从查询中获取,使用合理的默认值或省略该参数
  560. 只输出JSON,不要包含markdown标记。</div>
  561. </div>
  562. </div>
  563. <div class="arrow"></div>
  564. <div class="workflow-step" id="step-0-3">
  565. <div class="step-header" onclick="toggleStep('step-0-3')">
  566. <div class="step-title">
  567. <span class="step-number">4</span>
  568. <span class="step-name">执行工具</span>
  569. </div>
  570. <span class="step-toggle">▼</span>
  571. </div>
  572. <div class="step-content" id="content-step-0-3">
  573. <div class="step-detail">
  574. <span class="step-detail-label">执行结果:</span>
  575. <div class="step-detail-content json-content">## &quot;教资查分&quot;关键词数据表现和趋势分析
  576. ### 热度值
  577. - 近30天热度值超过96.14%全站其他词
  578. - 近30天热度值超过95.86%教育领域其他词
  579. ### 声量概览
  580. - **笔记数**: 16篇(环比增长700.00%)
  581. - **总热度**: 4082(环比增长408100.00%)
  582. - **热门天数**: 4/30天
  583. - **近30天热门内容领域**:
  584. - 教育: 56.25%
  585. - 职场: 31.25%
  586. - 运动健身: 6.25%
  587. - **高频搭配词**: 暂无相关数据
  588. ### 热度值趋势
  589. - **整体趋势**: 下降趋势
  590. - **效果分析**:
  591. - TOP1下降趋势: 2025-11-07 至 2025-11-08
  592. - TOP2下降趋势: 2025-11-04 至 2025-11-05
  593. ### 相关搜索结果
  594. - 共1条搜索结果
  595. - 内容领域分布: 教育、职场等领域为主
  596. 从数据可以看出,&quot;教资查分&quot;这个关键词在近期有显著的热度增长,但目前呈现下降趋势。该关键词主要与教育和职场领域相关,这符合教师资格证查询分数的实际应用场景。虽然笔记数量不多(16篇),但环比增长非常高,表明这是一个短期内突然受到关注的话题。</div>
  597. </div>
  598. </div>
  599. </div>
  600. </div>
  601. <div class="output-section">
  602. <h3>最终输出</h3>
  603. <div class="step-detail-content json-content">## &quot;教资查分&quot;关键词数据表现和趋势分析
  604. ### 热度值
  605. - 近30天热度值超过96.14%全站其他词
  606. - 近30天热度值超过95.86%教育领域其他词
  607. ### 声量概览
  608. - **笔记数**: 16篇(环比增长700.00%)
  609. - **总热度**: 4082(环比增长408100.00%)
  610. - **热门天数**: 4/30天
  611. - **近30天热门内容领域**:
  612. - 教育: 56.25%
  613. - 职场: 31.25%
  614. - 运动健身: 6.25%
  615. - **高频搭配词**: 暂无相关数据
  616. ### 热度值趋势
  617. - **整体趋势**: 下降趋势
  618. - **效果分析**:
  619. - TOP1下降趋势: 2025-11-07 至 2025-11-08
  620. - TOP2下降趋势: 2025-11-04 至 2025-11-05
  621. ### 相关搜索结果
  622. - 共1条搜索结果
  623. - 内容领域分布: 教育、职场等领域为主
  624. 从数据可以看出,&quot;教资查分&quot;这个关键词在近期有显著的热度增长,但目前呈现下降趋势。该关键词主要与教育和职场领域相关,这符合教师资格证查询分数的实际应用场景。虽然笔记数量不多(16篇),但环比增长非常高,表明这是一个短期内突然受到关注的话题。</div>
  625. </div>
  626. </div>
  627. <div class="tab-content " id="tab-1">
  628. <div class="input-section">
  629. <h3>输入信息</h3>
  630. <div class="input-item"><strong>问题:</strong> 女儿的生日派对这个选题点怎么来的</div>
  631. <div class="input-item"><strong>帖子信息:</strong> 发帖时间:2025-09-16</div>
  632. <div class="input-item"><strong>人设信息:</strong> <span class="placeholder">(无)</span></div>
  633. </div>
  634. <div class="workflow">
  635. <div class="workflow-step" id="step-1-0">
  636. <div class="step-header" onclick="toggleStep('step-1-0')">
  637. <div class="step-title">
  638. <span class="step-number">1</span>
  639. <span class="step-name">生成查询</span>
  640. </div>
  641. <span class="step-toggle">▼</span>
  642. </div>
  643. <div class="step-content" id="content-step-1-0">
  644. <div class="step-detail">
  645. <span class="step-detail-label">生成的Query:</span>
  646. <div class="step-detail-content">用什么工具获取女儿的生日派对这个选题点 query</div>
  647. </div>
  648. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-1-0')">显示 Prompt</button>
  649. <div class="prompt-content" id="prompt-step-1-0">你是一个问题转换助手。你的任务是将用户的问题,转换一个用于搜索或调用工具的查询语句(Query)。
  650. 用户问题:
  651. 女儿的生日派对这个选题点怎么来的
  652. 转换规则:
  653. - 提取问题中的 主体对象
  654. - 将问题转换成 用什么工具获取 [主体对象] query格式
  655. 示例:
  656. 用户问题: “教资查分”这个选题点怎么来的
  657. 主体对象: “教资查分”选题点
  658. 转换的Query: 用什么工具获取“教资查分”选题点
  659. 请分析上述信息,按要求生成Query语句。
  660. 只输出Query语句,不要包含任何解释。</div>
  661. </div>
  662. </div>
  663. <div class="arrow"></div>
  664. <div class="workflow-step" id="step-1-1">
  665. <div class="step-header" onclick="toggleStep('step-1-1')">
  666. <div class="step-title">
  667. <span class="step-number">2</span>
  668. <span class="step-name">选择工具</span>
  669. </div>
  670. <span class="step-toggle">▼</span>
  671. </div>
  672. <div class="step-content" id="content-step-1-1">
  673. <div class="step-detail">
  674. <span class="step-detail-label">选择结果:</span>
  675. <div class="step-detail-content" style="color: #dc3545; font-weight: 500;">无匹配工具</div>
  676. </div>
  677. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-1-1')">显示 Prompt</button>
  678. <div class="prompt-content" id="prompt-step-1-1"># 角色定位
  679. 你是一个工具匹配专家,负责根据用户需求从MCP工具库中找到最合适的工具。
  680. # 核心任务
  681. 1. 接收上游传入的需求用什么工具获取女儿的生日派对这个选题点 query
  682. 2. 理解需求的核心意图(用户想找什么、解决什么问题)
  683. 3. **判断需求内容是否在工具覆盖范围内**
  684. 4. 查询MCP工具库,匹配最相关的工具
  685. 5. 返回工具信息或&quot;无工具&quot;
  686. # MCP工具库信息
  687. 工具名:新红话题榜单
  688. 工具调用ID:xh_newrank_hottopics
  689. 工具介绍:提供小红书平台热门话题全景榜单数据,覆盖排名、话题名称及核心简介、参与人数增量、浏览量增量、笔记增量、互动增量(点赞 / 收藏 / 评论综合统计)等核心维度。支持精准筛选与高效应用。话题类型涵盖美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直领域,统计时间可选择日榜(近 7 天)、周榜(近 4 周)、月榜(近 5 个月),满足不同周期的热点追踪需求。榜单数据实时更新,同步呈现官方流量扶持话题标识,助力品牌、达人快速锁定高曝光赛道;便于拆解爆款逻辑、制定内容选题策略,提升运营效率。
  690. 工具名:新红话题搜索
  691. 工具调用ID:new_red_TopicSearch
  692. 工具介绍:提供小红书平台话题精准检索服务,输入关键词即可匹配相关话题完整列表,核心数据包含话题名称及简介、总浏览量、总参与人数、近 30 天笔记增量、近 30 天互动增量。支持按参与人数、浏览量等指标排序筛选,可精准定位品牌发起话题或官方扶持话题,清晰展示话题流量趋势与内容创作方向。无论是达人寻找高适配性话题蹭流,还是品牌监测竞品话题布局,均能通过数据支撑快速决策,降低内容试错成本。
  693. 工具名:新红热搜词榜单
  694. 工具调用ID:xh_newrank_hotwords
  695. 工具介绍:提供小红书平台热搜词权威榜单数据,核心维度包括实时排名、热搜词、主要覆盖内容领域、相关笔记总量、爆文数(高互动笔记占比)、热度值(综合搜索量与互动率计算)。支持按统计时间(日榜 / 周榜 / 月榜)及 美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直内容领域筛选。榜单每日更新,助力用户第一时间捕捉流量风口。可直接应用于选题规划、竞品投放策略分析。
  696. 工具名:新红热搜词搜索
  697. 工具调用ID:new_red_hot_search_words_search
  698. 工具介绍:提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。
  699. # 匹配规则
  700. ## 匹配逻辑(按顺序执行)
  701. ### 第一步:需求本质识别
  702. 理解需求背后的真实意图:
  703. - 示例:&quot;谐音梗这个选题灵感怎么来的&quot; → 真实意图是&quot;寻找热门选题的来源/方法&quot;
  704. - 示例:&quot;女儿生日派对这个选题点怎么来的&quot; → 真实意图是&quot;寻找选题的灵感来源&quot;
  705. - 不关注具体关键词,而关注用户想解决什么问题
  706. ### 第二步:内容适用性判断(关键!)
  707. 用什么工具能寻找到来源方法
  708. **在匹配工具前,必须先判断选题内容是否在工具覆盖范围内**
  709. #### 热搜词工具适用的内容类型:
  710. - ✅ **大众话题**:教资查分、高考、春节、双十一等
  711. - ✅ **社会热点**:政策变化、明星事件、流行趋势
  712. - ✅ **行业热点**:美妆新品、穿搭流行、热门景点
  713. - ✅ **周期性事件**:节日、考试、季节性话题
  714. - ✅ **群体性关注**:大多数人都可能关注的话题
  715. #### 热搜词工具不适用的内容类型:
  716. - ❌ **个人化场景**:我的生日、女儿生日派对、我的婚礼
  717. - ❌ **私人事件**:家庭聚会、个人旅行、朋友聚餐
  718. - ❌ **特定个体**:某个具体的人、某个具体的宠物、某个具体的家庭
  719. - ❌ **小众话题**:极少数人关注的专业话题
  720. - ❌ **虚构内容**:不存在的事件、假设的场景
  721. **判断标准**:
  722. - 这个选题是否有可能出现在小红书热搜榜上?
  723. - 这个选题是否是大众普遍关注的?
  724. - 这个选题是否具有&quot;群体性&quot;而非&quot;个体性&quot;?
  725. **如果内容不在适用范围,直接返回&quot;无工具&quot;,不再继续匹配。**
  726. ### 第三步:需求类型分类
  727. 判断需求属于哪种类型:
  728. - 寻找灵感/选题来源 → 需要热搜词/榜单类工具
  729. - 分析特定词的热度/趋势 → 需要趋势分析类工具
  730. - 寻找内容案例/参考 → 需要内容搜索/爬取类工具
  731. - 生成创意内容 → 需要大模型/AI生成类工具
  732. ### 第四步:工具能力匹配
  733. 根据需求类型,对比工具的核心能力:
  734. - 工具能否解决该类型的问题(如&quot;提供热门选题&quot;)
  735. ### 第五步:选择最优工具
  736. 返回能力最匹配的1个工具,无匹配则返回&quot;无工具&quot;
  737. ## 匹配标准
  738. - 功能匹配:工具能力是否覆盖需求要解决的问题
  739. ## 无匹配判定
  740. 当满足以下任一条件时,返回&quot;无工具&quot;:
  741. 1. 需求内容不在工具覆盖范围内(如非常个人化场景)
  742. 2. MCP工具库中没有工具能解决该需求
  743. 3. 需求涉及的领域完全不在工具库范围
  744. # 输出格式
  745. json格式,字段定义如下:
  746. &#39;&#39;&#39;json
  747. {
  748. &quot;工具名&quot;: &quot;工具名称&quot;,
  749. &quot;工具调用ID&quot;: &quot;调用ID&quot;,
  750. &quot;使用方法&quot;: &quot;简要说明如何使用该工具解决用户需求&quot;
  751. }
  752. &#39;&#39;&#39;
  753. ## 无匹配时
  754. &#39;&#39;&#39;json
  755. {
  756. }
  757. &#39;&#39;&#39;
  758. # 执行要求
  759. 1. **必须先执行&quot;内容适用性判断&quot;**,再进行工具匹配
  760. 2. 只返回1个最优工具,不返回多个备选
  761. 3. 严格按照输出格式返回结果
  762. 4. 使用方法要具体,说明如何用该工具解决当前需求
  763. # 示例
  764. ## 示例1:成功匹配
  765. 需求输入:什么工具能找到教资查分这个灵感点?
  766. 输出:
  767. 工具名:新红热搜词搜索
  768. 工具调用ID:new_red_hot_search_words_search
  769. 使用方法:输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。
  770. {
  771. &quot;工具名&quot;: &quot;新红热搜词搜索&quot;,
  772. &quot;工具调用ID&quot;: &quot;工具调用ID:new_red_hot_search_words_search&quot;,
  773. &quot;使用方法&quot;: &quot;输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。&quot;
  774. }
  775. ## 示例2:无匹配
  776. 需求输入:哪里可以找到股票实时行情数据?
  777. 输出:
  778. {
  779. }
  780. # 上游输入的需求用什么工具获取女儿的生日派对这个选题点 query
  781. {用什么工具获取女儿的生日派对这个选题点 query}</div>
  782. </div>
  783. </div>
  784. <div class="arrow"></div>
  785. <div class="workflow-step" id="step-1-2">
  786. <div class="step-header" onclick="toggleStep('step-1-2')">
  787. <div class="step-title">
  788. <span class="step-number">3</span>
  789. <span class="step-name">LLM搜索</span>
  790. </div>
  791. <span class="step-toggle">▼</span>
  792. </div>
  793. <div class="step-content" id="content-step-1-2">
  794. <div class="step-detail">
  795. <span class="step-detail-label">搜索结果:</span>
  796. <div style="margin-bottom: 15px; padding: 12px; background: #f0f8ff; border-radius: 6px; border-left: 3px solid #4a90e2;">
  797. <div style="font-weight: 600; color: #2c3e50; margin-bottom: 8px;">查询 1: 用什么工具获取女儿的生日派对这个选题点 query</div>
  798. <div style="color: #555; line-height: 1.6; white-space: pre-wrap;">根据搜索结果,要围绕“女儿的生日派对”这个选题点进行内容创作或策划,可以使用以下几类工具和方法来获取灵感、信息和执行方案:
  799. **1. 灵感与创意获取工具:**
  800. * **社交媒体平台:** 如小红书、Instagram、Pinterest(需科学上网)等。这些平台上有大量用户分享的真实派对照片、视频和经验贴,是获取最新流行主题(如独角兽、小黄鸭、公主风等)、布置创意和DIY点子的绝佳来源。
  801. * **视频平台:** 如YouTube、Bilibili。可以搜索“低成本生日派对”、“XX岁女孩生日派对”等关键词,观看详细的策划和布置过程视频,非常直观且具有可操作性。
  802. **2. 实用策划与执行工具:**
  803. * **在线邀请函制作工具:** 如Canva、金数据、腾讯问卷等。可以轻松创建精美的电子邀请函,并附带RSVP(请回复)功能,方便统计人数。
  804. * **清单与项目管理工具:** 如滴答清单(TickTick)、微软To Do、甚至简单的Excel表格。用于制定详细的待办事项清单,包括预算、采购清单、时间安排等,确保不遗漏任何环节。
  805. * **本地生活服务平台:** 如大众点评、美团。用于搜索和预订附近的亲子餐厅、室内游乐场、派对策划公司、蛋糕房等服务。
  806. **3. 信息查询与学习工具:**
  807. * **搜索引擎:** 直接使用百度、谷歌等搜索引擎,输入具体的疑问,例如“4岁女孩生日派对游戏”、“低预算生日派对食物”、“生日派对注意事项”等,可以找到大量博客文章、论坛讨论(如知乎、Reddit)和专业指南,了解不同年龄段孩子的派对要点、避坑指南和花费参考。
  808. 总而言之,将**社交媒体/视频平台**作为灵感库,用**在线工具**处理邀请和规划,并通过**搜索引擎**解决具体问题,就能高效地完成“女儿生日派对”的选题策划。</div>
  809. </div>
  810. </div>
  811. </div>
  812. </div>
  813. <div class="arrow"></div>
  814. <div class="workflow-step" id="step-1-3">
  815. <div class="step-header" onclick="toggleStep('step-1-3')">
  816. <div class="step-title">
  817. <span class="step-number">4</span>
  818. <span class="step-name">多渠道搜索结果整合</span>
  819. </div>
  820. <span class="step-toggle">▼</span>
  821. </div>
  822. <div class="step-content" id="content-step-1-3">
  823. <div class="step-detail">
  824. <span class="step-detail-label">来源统计:</span>
  825. <div class="step-detail-content">总来源数: 1, 有效来源数: 1</div>
  826. </div>
  827. <div class="step-detail">
  828. <span class="step-detail-label">整合结果:</span>
  829. <div class="step-detail-content">女儿的生日派对这一选题点,可以通过以下工具和方法进行灵感获取、信息查询及策划执行,从而使内容或派对本身得以具体化和完善:
  830. ### 1. 灵感与创意获取
  831. * **社交媒体平台:** 小红书、Instagram、Pinterest等平台汇集了大量用户分享的派对照片、视频和经验贴,是发现最新流行主题(如独角兽、小黄鸭、公主风)、布置创意和DIY点子的宝库。
  832. * **视频平台:** YouTube、Bilibili等平台可搜索“低成本生日派对”、“XX岁女孩生日派对”等关键词,通过观看详细的策划和布置过程视频,获取直观且可操作的灵感。
  833. ### 2. 实用策划与执行
  834. * **在线邀请函制作工具:** Canva、金数据、腾讯问卷等工具可用于轻松创建精美的电子邀请函,并支持RSVP(请回复)功能,便于统计派对人数。
  835. * **清单与项目管理工具:** 滴答清单(TickTick)、微软To Do或Excel表格等,有助于制定详细的待办事项清单,包括预算、采购清单和时间安排,确保派对筹备不遗漏任何环节。
  836. * **本地生活服务平台:** 大众点评、美团等平台可用于搜索和预订附近的亲子餐厅、室内游乐场、派对策划公司、蛋糕房等服务。
  837. ### 3. 信息查询与学习
  838. * **搜索引擎:** 百度、谷歌等搜索引擎是解答具体疑问的强大工具。输入“4岁女孩生日派对游戏”、“低预算生日派对食物”、“生日派对注意事项”等关键词,可以找到大量博客文章、论坛讨论(如知乎、Reddit)和专业指南,了解不同年龄段孩子派对的要点、避坑指南及花费参考。
  839. 总而言之,通过将社交媒体/视频平台作为灵感来源,利用在线工具进行邀请和规划,并通过搜索引擎解决具体问题,可以高效地展开和完善“女儿生日派对”这个选题点。</div>
  840. </div>
  841. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-1-3')">显示 Prompt</button>
  842. <div class="prompt-content" id="prompt-step-1-3">你是一个知识整合专家。你的任务是根据用户的问题,将来自不同渠道(如LLM搜索、小红书搜索等)的知识文本进行整合,生成一份全面、准确、逻辑清晰的回答。
  843. 用户问题:
  844. 女儿的生日派对这个选题点怎么来的||发帖时间:2025-09-16||
  845. 以下是来自不同渠道的知识文本:
  846. 【来源:LLM Search】
  847. 根据搜索结果,要围绕“女儿的生日派对”这个选题点进行内容创作或策划,可以使用以下几类工具和方法来获取灵感、信息和执行方案:
  848. **1. 灵感与创意获取工具:**
  849. * **社交媒体平台:** 如小红书、Instagram、Pinterest(需科学上网)等。这些平台上有大量用户分享的真实派对照片、视频和经验贴,是获取最新流行主题(如独角兽、小黄鸭、公主风等)、布置创意和DIY点子的绝佳来源。
  850. * **视频平台:** 如YouTube、Bilibili。可以搜索“低成本生日派对”、“XX岁女孩生日派对”等关键词,观看详细的策划和布置过程视频,非常直观且具有可操作性。
  851. **2. 实用策划与执行工具:**
  852. * **在线邀请函制作工具:** 如Canva、金数据、腾讯问卷等。可以轻松创建精美的电子邀请函,并附带RSVP(请回复)功能,方便统计人数。
  853. * **清单与项目管理工具:** 如滴答清单(TickTick)、微软To Do、甚至简单的Excel表格。用于制定详细的待办事项清单,包括预算、采购清单、时间安排等,确保不遗漏任何环节。
  854. * **本地生活服务平台:** 如大众点评、美团。用于搜索和预订附近的亲子餐厅、室内游乐场、派对策划公司、蛋糕房等服务。
  855. **3. 信息查询与学习工具:**
  856. * **搜索引擎:** 直接使用百度、谷歌等搜索引擎,输入具体的疑问,例如“4岁女孩生日派对游戏”、“低预算生日派对食物”、“生日派对注意事项”等,可以找到大量博客文章、论坛讨论(如知乎、Reddit)和专业指南,了解不同年龄段孩子的派对要点、避坑指南和花费参考。
  857. 总而言之,将**社交媒体/视频平台**作为灵感库,用**在线工具**处理邀请和规划,并通过**搜索引擎**解决具体问题,就能高效地完成“女儿生日派对”的选题策划。
  858. 请遵循以下原则进行整合:
  859. 1. **全面性**:涵盖所有渠道提供的关键信息,不要遗漏重要细节。
  860. 2. **准确性**:如果不同渠道的信息存在冲突,请尝试分析原因并给出最合理的解释,或者同时呈现不同的观点并说明来源。
  861. 3. **逻辑性**:将信息组织成结构清晰的文章,使用恰当的标题、列表和段落。
  862. 4. **可读性**:语言通顺流畅,易于理解。
  863. 5. **去重**:去除重复的信息。
  864. 请直接输出整合后的知识文本,不要包含任何解释性的话语。</div>
  865. </div>
  866. </div>
  867. </div>
  868. </div>
  869. <div class="tab-content " id="tab-2">
  870. <div class="input-section">
  871. <h3>输入信息</h3>
  872. <div class="input-item"><strong>问题:</strong> 花艺造型蛋糕这个选题点怎么来的</div>
  873. <div class="input-item"><strong>帖子信息:</strong> 发帖时间:2025-09-16</div>
  874. <div class="input-item"><strong>人设信息:</strong> <span class="placeholder">(无)</span></div>
  875. </div>
  876. <div class="workflow">
  877. <div class="workflow-step" id="step-2-0">
  878. <div class="step-header" onclick="toggleStep('step-2-0')">
  879. <div class="step-title">
  880. <span class="step-number">1</span>
  881. <span class="step-name">生成查询</span>
  882. </div>
  883. <span class="step-toggle">▼</span>
  884. </div>
  885. <div class="step-content" id="content-step-2-0">
  886. <div class="step-detail">
  887. <span class="step-detail-label">生成的Query:</span>
  888. <div class="step-detail-content">用什么工具获取花艺造型蛋糕这个选题点</div>
  889. </div>
  890. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-2-0')">显示 Prompt</button>
  891. <div class="prompt-content" id="prompt-step-2-0">你是一个问题转换助手。你的任务是将用户的问题,转换一个用于搜索或调用工具的查询语句(Query)。
  892. 用户问题:
  893. 花艺造型蛋糕这个选题点怎么来的
  894. 转换规则:
  895. - 提取问题中的 主体对象
  896. - 将问题转换成 用什么工具获取 [主体对象] query格式
  897. 示例:
  898. 用户问题: “教资查分”这个选题点怎么来的
  899. 主体对象: “教资查分”选题点
  900. 转换的Query: 用什么工具获取“教资查分”选题点
  901. 请分析上述信息,按要求生成Query语句。
  902. 只输出Query语句,不要包含任何解释。</div>
  903. </div>
  904. </div>
  905. <div class="arrow"></div>
  906. <div class="workflow-step" id="step-2-1">
  907. <div class="step-header" onclick="toggleStep('step-2-1')">
  908. <div class="step-title">
  909. <span class="step-number">2</span>
  910. <span class="step-name">选择工具</span>
  911. </div>
  912. <span class="step-toggle">▼</span>
  913. </div>
  914. <div class="step-content" id="content-step-2-1">
  915. <div class="step-detail">
  916. <span class="step-detail-label">工具名称:</span>
  917. <div class="step-detail-content">新红热搜词搜索</div>
  918. </div>
  919. <div class="step-detail">
  920. <span class="step-detail-label">工具调用ID:</span>
  921. <div class="step-detail-content">new_red_hot_search_words_search</div>
  922. </div>
  923. <div class="step-detail">
  924. <span class="step-detail-label">使用方法:</span>
  925. <div class="step-detail-content">输入关键词&quot;花艺造型蛋糕&quot;,获取该词在小红书的热度值、近90天趋势曲线、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词),以此评估其作为选题点的潜力与创作方向。</div>
  926. </div>
  927. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-2-1')">显示 Prompt</button>
  928. <div class="prompt-content" id="prompt-step-2-1"># 角色定位
  929. 你是一个工具匹配专家,负责根据用户需求从MCP工具库中找到最合适的工具。
  930. # 核心任务
  931. 1. 接收上游传入的需求用什么工具获取花艺造型蛋糕这个选题点
  932. 2. 理解需求的核心意图(用户想找什么、解决什么问题)
  933. 3. **判断需求内容是否在工具覆盖范围内**
  934. 4. 查询MCP工具库,匹配最相关的工具
  935. 5. 返回工具信息或&quot;无工具&quot;
  936. # MCP工具库信息
  937. 工具名:新红话题榜单
  938. 工具调用ID:xh_newrank_hottopics
  939. 工具介绍:提供小红书平台热门话题全景榜单数据,覆盖排名、话题名称及核心简介、参与人数增量、浏览量增量、笔记增量、互动增量(点赞 / 收藏 / 评论综合统计)等核心维度。支持精准筛选与高效应用。话题类型涵盖美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直领域,统计时间可选择日榜(近 7 天)、周榜(近 4 周)、月榜(近 5 个月),满足不同周期的热点追踪需求。榜单数据实时更新,同步呈现官方流量扶持话题标识,助力品牌、达人快速锁定高曝光赛道;便于拆解爆款逻辑、制定内容选题策略,提升运营效率。
  940. 工具名:新红话题搜索
  941. 工具调用ID:new_red_TopicSearch
  942. 工具介绍:提供小红书平台话题精准检索服务,输入关键词即可匹配相关话题完整列表,核心数据包含话题名称及简介、总浏览量、总参与人数、近 30 天笔记增量、近 30 天互动增量。支持按参与人数、浏览量等指标排序筛选,可精准定位品牌发起话题或官方扶持话题,清晰展示话题流量趋势与内容创作方向。无论是达人寻找高适配性话题蹭流,还是品牌监测竞品话题布局,均能通过数据支撑快速决策,降低内容试错成本。
  943. 工具名:新红热搜词榜单
  944. 工具调用ID:xh_newrank_hotwords
  945. 工具介绍:提供小红书平台热搜词权威榜单数据,核心维度包括实时排名、热搜词、主要覆盖内容领域、相关笔记总量、爆文数(高互动笔记占比)、热度值(综合搜索量与互动率计算)。支持按统计时间(日榜 / 周榜 / 月榜)及 美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直内容领域筛选。榜单每日更新,助力用户第一时间捕捉流量风口。可直接应用于选题规划、竞品投放策略分析。
  946. 工具名:新红热搜词搜索
  947. 工具调用ID:new_red_hot_search_words_search
  948. 工具介绍:提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。
  949. # 匹配规则
  950. ## 匹配逻辑(按顺序执行)
  951. ### 第一步:需求本质识别
  952. 理解需求背后的真实意图:
  953. - 示例:&quot;谐音梗这个选题灵感怎么来的&quot; → 真实意图是&quot;寻找热门选题的来源/方法&quot;
  954. - 示例:&quot;女儿生日派对这个选题点怎么来的&quot; → 真实意图是&quot;寻找选题的灵感来源&quot;
  955. - 不关注具体关键词,而关注用户想解决什么问题
  956. ### 第二步:内容适用性判断(关键!)
  957. 用什么工具能寻找到来源方法
  958. **在匹配工具前,必须先判断选题内容是否在工具覆盖范围内**
  959. #### 热搜词工具适用的内容类型:
  960. - ✅ **大众话题**:教资查分、高考、春节、双十一等
  961. - ✅ **社会热点**:政策变化、明星事件、流行趋势
  962. - ✅ **行业热点**:美妆新品、穿搭流行、热门景点
  963. - ✅ **周期性事件**:节日、考试、季节性话题
  964. - ✅ **群体性关注**:大多数人都可能关注的话题
  965. #### 热搜词工具不适用的内容类型:
  966. - ❌ **个人化场景**:我的生日、女儿生日派对、我的婚礼
  967. - ❌ **私人事件**:家庭聚会、个人旅行、朋友聚餐
  968. - ❌ **特定个体**:某个具体的人、某个具体的宠物、某个具体的家庭
  969. - ❌ **小众话题**:极少数人关注的专业话题
  970. - ❌ **虚构内容**:不存在的事件、假设的场景
  971. **判断标准**:
  972. - 这个选题是否有可能出现在小红书热搜榜上?
  973. - 这个选题是否是大众普遍关注的?
  974. - 这个选题是否具有&quot;群体性&quot;而非&quot;个体性&quot;?
  975. **如果内容不在适用范围,直接返回&quot;无工具&quot;,不再继续匹配。**
  976. ### 第三步:需求类型分类
  977. 判断需求属于哪种类型:
  978. - 寻找灵感/选题来源 → 需要热搜词/榜单类工具
  979. - 分析特定词的热度/趋势 → 需要趋势分析类工具
  980. - 寻找内容案例/参考 → 需要内容搜索/爬取类工具
  981. - 生成创意内容 → 需要大模型/AI生成类工具
  982. ### 第四步:工具能力匹配
  983. 根据需求类型,对比工具的核心能力:
  984. - 工具能否解决该类型的问题(如&quot;提供热门选题&quot;)
  985. ### 第五步:选择最优工具
  986. 返回能力最匹配的1个工具,无匹配则返回&quot;无工具&quot;
  987. ## 匹配标准
  988. - 功能匹配:工具能力是否覆盖需求要解决的问题
  989. ## 无匹配判定
  990. 当满足以下任一条件时,返回&quot;无工具&quot;:
  991. 1. 需求内容不在工具覆盖范围内(如非常个人化场景)
  992. 2. MCP工具库中没有工具能解决该需求
  993. 3. 需求涉及的领域完全不在工具库范围
  994. # 输出格式
  995. json格式,字段定义如下:
  996. &#39;&#39;&#39;json
  997. {
  998. &quot;工具名&quot;: &quot;工具名称&quot;,
  999. &quot;工具调用ID&quot;: &quot;调用ID&quot;,
  1000. &quot;使用方法&quot;: &quot;简要说明如何使用该工具解决用户需求&quot;
  1001. }
  1002. &#39;&#39;&#39;
  1003. ## 无匹配时
  1004. &#39;&#39;&#39;json
  1005. {
  1006. }
  1007. &#39;&#39;&#39;
  1008. # 执行要求
  1009. 1. **必须先执行&quot;内容适用性判断&quot;**,再进行工具匹配
  1010. 2. 只返回1个最优工具,不返回多个备选
  1011. 3. 严格按照输出格式返回结果
  1012. 4. 使用方法要具体,说明如何用该工具解决当前需求
  1013. # 示例
  1014. ## 示例1:成功匹配
  1015. 需求输入:什么工具能找到教资查分这个灵感点?
  1016. 输出:
  1017. 工具名:新红热搜词搜索
  1018. 工具调用ID:new_red_hot_search_words_search
  1019. 使用方法:输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。
  1020. {
  1021. &quot;工具名&quot;: &quot;新红热搜词搜索&quot;,
  1022. &quot;工具调用ID&quot;: &quot;工具调用ID:new_red_hot_search_words_search&quot;,
  1023. &quot;使用方法&quot;: &quot;输入关键词&quot;教资查分&quot;,获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。&quot;
  1024. }
  1025. ## 示例2:无匹配
  1026. 需求输入:哪里可以找到股票实时行情数据?
  1027. 输出:
  1028. {
  1029. }
  1030. # 上游输入的需求用什么工具获取花艺造型蛋糕这个选题点
  1031. {用什么工具获取花艺造型蛋糕这个选题点}</div>
  1032. </div>
  1033. </div>
  1034. <div class="arrow"></div>
  1035. <div class="workflow-step" id="step-2-2">
  1036. <div class="step-header" onclick="toggleStep('step-2-2')">
  1037. <div class="step-title">
  1038. <span class="step-number">3</span>
  1039. <span class="step-name">提取参数</span>
  1040. </div>
  1041. <span class="step-toggle">▼</span>
  1042. </div>
  1043. <div class="step-content" id="content-step-2-2">
  1044. <div class="step-detail">
  1045. <span class="step-detail-label">提取的参数:</span>
  1046. <div class="step-detail-content json-content">{
  1047. &quot;prompt&quot;: &quot;输入关键词\&quot;花艺造型蛋糕\&quot;,获取该词在小红书的热度值、近90天趋势曲线、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词),以此评估其作为选题点的潜力与创作方向。&quot;
  1048. }</div>
  1049. </div>
  1050. <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-2-2')">显示 Prompt</button>
  1051. <div class="prompt-content" id="prompt-step-2-2">你是一个API调用专家。你的任务是根据已经选择的工具及使用方法信息生成正确的调用参数。
  1052. 选择的工具调用ID:
  1053. new_red_hot_search_words_search
  1054. 选择的工具使用方法:
  1055. 输入关键词&quot;花艺造型蛋糕&quot;,获取该词在小红书的热度值、近90天趋势曲线、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词),以此评估其作为选题点的潜力与创作方向。
  1056. 所有的工具参数定义:
  1057. {
  1058. &quot;name&quot;: &quot;新红热搜词搜索&quot;,
  1059. &quot;description&quot;: &quot;提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。&quot;,
  1060. &quot;inputSchema&quot;: {
  1061. &quot;type&quot;: &quot;object&quot;,
  1062. &quot;properties&quot;: {
  1063. &quot;prompt&quot;: {
  1064. &quot;type&quot;: &quot;string&quot;,
  1065. &quot;description&quot;: &quot;用户使用方法,包括输入的关键词&quot;
  1066. }
  1067. },
  1068. &quot;required&quot;: [
  1069. &quot;prompt&quot;
  1070. ]
  1071. }
  1072. }
  1073. 请分析工具的参数要求,根据查询内容提取或推断出合适的参数值。
  1074. 输出格式:请以 JSON 格式输出参数字典,例如:
  1075. {
  1076. &quot;param1&quot;: &quot;value1&quot;,
  1077. &quot;param2&quot;: &quot;value2&quot;
  1078. }
  1079. 注意事项:
  1080. 1. 只输出参数的JSON字典,不要包含任何解释
  1081. 2. 参数名必须与工具定义中的参数名完全一致
  1082. 3. 参数值要从查询中提取或合理推断
  1083. 4. 不要添加工具定义中没有的参数
  1084. 5. 如果某个参数无法从查询中获取,使用合理的默认值或省略该参数
  1085. 只输出JSON,不要包含markdown标记。</div>
  1086. </div>
  1087. </div>
  1088. <div class="arrow"></div>
  1089. <div class="workflow-step" id="step-2-3">
  1090. <div class="step-header" onclick="toggleStep('step-2-3')">
  1091. <div class="step-title">
  1092. <span class="step-number">4</span>
  1093. <span class="step-name">执行工具</span>
  1094. </div>
  1095. <span class="step-toggle">▼</span>
  1096. </div>
  1097. <div class="step-content" id="content-step-2-3">
  1098. <div class="step-detail">
  1099. <span class="step-detail-label">执行结果:</span>
  1100. <div class="step-detail-content json-content">## &quot;花艺造型蛋糕&quot;关键词数据分析结果
  1101. **关键词**: 花艺造型蛋糕
  1102. **平台**: 小红书
  1103. **主要发现**:
  1104. 1. **热度值**: 该关键词未达到小红书热搜榜单的门槛,无法获取具体的热度值数据
  1105. 2. **趋势曲线**: 由于未上榜,近90天的趋势曲线数据不可用
  1106. 3. **声量概览**:
  1107. - 笔记数: 数据不可用(未达到展示门槛)
  1108. - 总热度: 数据不可用(未达到展示门槛)
  1109. - 热门天数: 数据不可用(未达到展示门槛)
  1110. - 热门内容领域: 数据不可用(未达到展示门槛)
  1111. - 高频搭配词: 数据不可用(未达到展示门槛)
  1112. **选题潜力评估**:
  1113. - **热度水平**: 较低。该关键词在小红书平台上的讨论度和关注度不足以进入热搜榜单
  1114. - **创作方向建议**:
  1115. 1. 考虑使用更热门的相关关键词,如&quot;蛋糕&quot;、&quot;花艺&quot;、&quot;甜品&quot;等单独词汇
  1116. 2. 或者尝试组合其他热门元素,如&quot;ins风花艺蛋糕&quot;、&quot;网红花艺蛋糕&quot;等
  1117. 3. 可以关注页面推荐的热门热搜词,如&quot;美食VLOG&quot;、&quot;美食制作&quot;等,将花艺蛋糕内容融入这些热门话题中
  1118. **建议**:
  1119. 由于&quot;花艺造型蛋糕&quot;关键词热度较低,建议调整选题策略:
  1120. 1. 扩大关键词范围,使用更通用的词汇
  1121. 2. 关注相关但更热门的话题标签
  1122. 3. 结合当前热门趋势(如页面显示的&quot;美食VLOG&quot;、&quot;美食制作&quot;等)来包装花艺蛋糕内容
  1123. 这个结果表明,虽然花艺造型蛋糕可能是一个有创意的内容方向,但在小红书平台上目前的热度不足以支撑作为独立的热门选题点.</div>
  1124. </div>
  1125. </div>
  1126. </div>
  1127. </div>
  1128. <div class="output-section">
  1129. <h3>最终输出</h3>
  1130. <div class="step-detail-content json-content">## &quot;花艺造型蛋糕&quot;关键词数据分析结果
  1131. **关键词**: 花艺造型蛋糕
  1132. **平台**: 小红书
  1133. **主要发现**:
  1134. 1. **热度值**: 该关键词未达到小红书热搜榜单的门槛,无法获取具体的热度值数据
  1135. 2. **趋势曲线**: 由于未上榜,近90天的趋势曲线数据不可用
  1136. 3. **声量概览**:
  1137. - 笔记数: 数据不可用(未达到展示门槛)
  1138. - 总热度: 数据不可用(未达到展示门槛)
  1139. - 热门天数: 数据不可用(未达到展示门槛)
  1140. - 热门内容领域: 数据不可用(未达到展示门槛)
  1141. - 高频搭配词: 数据不可用(未达到展示门槛)
  1142. **选题潜力评估**:
  1143. - **热度水平**: 较低。该关键词在小红书平台上的讨论度和关注度不足以进入热搜榜单
  1144. - **创作方向建议**:
  1145. 1. 考虑使用更热门的相关关键词,如&quot;蛋糕&quot;、&quot;花艺&quot;、&quot;甜品&quot;等单独词汇
  1146. 2. 或者尝试组合其他热门元素,如&quot;ins风花艺蛋糕&quot;、&quot;网红花艺蛋糕&quot;等
  1147. 3. 可以关注页面推荐的热门热搜词,如&quot;美食VLOG&quot;、&quot;美食制作&quot;等,将花艺蛋糕内容融入这些热门话题中
  1148. **建议**:
  1149. 由于&quot;花艺造型蛋糕&quot;关键词热度较低,建议调整选题策略:
  1150. 1. 扩大关键词范围,使用更通用的词汇
  1151. 2. 关注相关但更热门的话题标签
  1152. 3. 结合当前热门趋势(如页面显示的&quot;美食VLOG&quot;、&quot;美食制作&quot;等)来包装花艺蛋糕内容
  1153. 这个结果表明,虽然花艺造型蛋糕可能是一个有创意的内容方向,但在小红书平台上目前的热度不足以支撑作为独立的热门选题点.</div>
  1154. </div>
  1155. </div>
  1156. </div>
  1157. <script>
  1158. function switchTab(index) {
  1159. // 隐藏所有tab内容
  1160. const contents = document.querySelectorAll('.tab-content');
  1161. contents.forEach(content => content.classList.remove('active'));
  1162. // 移除所有tab的active状态
  1163. const tabs = document.querySelectorAll('.tab');
  1164. tabs.forEach(tab => tab.classList.remove('active'));
  1165. // 显示选中的tab内容
  1166. document.getElementById('tab-' + index).classList.add('active');
  1167. tabs[index].classList.add('active');
  1168. }
  1169. function toggleStep(stepId) {
  1170. const step = document.getElementById(stepId);
  1171. const content = document.getElementById('content-' + stepId);
  1172. const toggle = step.querySelector('.step-toggle');
  1173. if (content.classList.contains('expanded')) {
  1174. content.classList.remove('expanded');
  1175. toggle.classList.remove('expanded');
  1176. step.classList.remove('active');
  1177. } else {
  1178. content.classList.add('expanded');
  1179. toggle.classList.add('expanded');
  1180. step.classList.add('active');
  1181. }
  1182. }
  1183. function togglePrompt(promptId) {
  1184. const promptContent = document.getElementById(promptId);
  1185. const btn = promptContent.previousElementSibling;
  1186. if (promptContent.classList.contains('show')) {
  1187. promptContent.classList.remove('show');
  1188. btn.textContent = '显示 Prompt';
  1189. } else {
  1190. promptContent.classList.add('show');
  1191. btn.textContent = '隐藏 Prompt';
  1192. }
  1193. }
  1194. // 页面加载时高亮第一个步骤
  1195. window.addEventListener('load', function() {
  1196. const firstSteps = document.querySelectorAll('.workflow-step');
  1197. firstSteps.forEach((step, index) => {
  1198. if (index === 0 || index % (firstSteps.length / document.querySelectorAll('.tab-content').length) === 0) {
  1199. step.classList.add('active');
  1200. const content = step.querySelector('.step-content');
  1201. const toggle = step.querySelector('.step-toggle');
  1202. if (content) {
  1203. content.classList.add('expanded');
  1204. toggle.classList.add('expanded');
  1205. }
  1206. }
  1207. });
  1208. });
  1209. </script>
  1210. </body>
  1211. </html>