之前提到了一些【通过Claude 生成图片的prompt集锦（一）】，本篇沿着试着用prompt生成互动式网页
文章目录
- 1 什么是互动式网页？
- 1.1 一个🌰
- 1.1 核心能力列举
- 1.3 部署方式
- 2 猜测秘塔AI搜索生成HTML的Prompt
- 3 mozi大佬：超长版HTML版本Prompt
- 3.1 HTML 回复
- 3.2 文本分析与概念图生成的HTML
- 3.3 文档变思维导图
- 4 sandun大佬：年报变HTML与PPT
- 4.1 HTML Prompt
- 4.2 网友改良版
1 什么是互动式网页？
1.1 一个🌰
可以看一下秘塔AI搜索，AI检索完之后：
有几种选项，可以将内容转化为图片，包括网页、展示海报、PPT，这里的互动网页，是本篇想了解的，可以看一下效果：
1.1 核心能力列举
由此来看，互动式网页可能需要具备的几个核心能力
信息可视化重构
- 动态图表与卡片：将文本数据自动转化为交互式图表（折线图/饼图）、分类卡片（悬停显示详情）。
- 导航与目录生成：为长文档（如论文/报告）自动生成带锚点跳转的目录结构，支持快速定位。
- 深色/浅色模式切换：默认跟随系统设置，用户可手动切换视觉主题
交互体验增强
微交互动效：
- 按钮悬停放大与颜色渐变
- 卡片浮动阴影与边框高亮
- 页面滚动平滑过渡与内容淡入
动态内容加载：
- 懒加载技术优化长页面性能
- 分步展开复杂内容（如教程步骤）
多场景适配
- 响应式布局：自动适配手机/平板/桌面端，调整字体大小与元素排版。
- 跨平台分享：生成链接直接分享，无需服务器部署（如秘塔AI的一键分享功能）
一般来说要完成以上的一些功能，可能需要以下的一些技术组件：
- TailwindCSS：快速构建响应式UI，减少自定义CSS代码
- Prism.js：代码块高亮显示，支持多语言语法
- Lazy Loading：延迟加载非首屏内容，提升页面加载速度
- SVG动画：生成可交互矢量图形（如点击展开的流程图）
1.3 部署方式
还没做具体探索，一般在本地HTML直接打开为主，或者直接保存图片。
或者：
- 零代码托管：上传HTML至免费平台（如YourWare.so），生成公开访问链接
- GitHub Pages：开发者导向，支持自定义域名但需处理网络访问限制
2 猜测秘塔AI搜索生成HTML的Prompt
笔者推测秘塔后台会根据用户搜索，先生成一个专门的prompt，然后在通过Prompt生成网页。
因为秘塔是开放prompt过程的，这里笔者摘录 + 自己发挥一下：
// Roles:擅长用html动画设计教学游戏的老师我们接收到的文件内容是关于{{股市赚钱效应分析}}。
我们将创建一个可视化网页来展示这些技术方案。
我们将以卡片列表的形式展示，并包含标题、描述、实现步骤和代码示例（高亮显示）。
设计风格参考Linear App的简约现代设计，使用TailwindCSS实现，同时支持深色/浅色模式切换。 页面结构：
1. 头部：标题和简介
2. 主体：10个技术方案的卡片，
每个卡片包含：
- 技术名称（标题）
- 简要描述
- 实现步骤（有序列表）
- 代码示例（使用<pre>和<code>标签，并应用代码高亮）
3. 底部：作者信息（特制版本） 我们将引入以下外部资源：
- TailwindCSS 3.0+（CDN）
- Font Awesome图标（CDN）
- 代码高亮：使用Prism.js（CDN引入，并选择适合的样式）
- 对于深色/浅色模式，我们将使用TailwindCSS的dark模式，并通过JavaScript实现切换。
注意：由于要求输出单一HTML文件，我们将所有CSS和JavaScript内联。 步骤：
1. 创建HTML骨架，设置语言为zh-CN。
2. 在head中引入TailwindCSS（CDN）、Font Awesome（CDN）、Prism.js（CDN）和自定义样式（如果需要）。
3. 在body中构建页面结构。
4. 添加深色/浅色模式切换的JavaScript逻辑。
5. 使用TailwindCSS类进行样式设计，并添加一些微交互效果（如卡片悬停效果）。
6. 使用Prism.js对代码块进行高亮处理（注意：需要在代码块中添加相应的语言类，如language-css, language-javascript等）。
7. 在底部添加作者信息。 由于内容较长，我们将使用懒加载技术（Intersection Observer）来实现卡片内容的懒加载动画（淡入效果）。
性能优化：我们将Prism.js的CSS和JS通过CDN引入，并选择最小版本。
同时，我们不会引入大图片，所以不需要WebP转换。
注意：由于要求压缩版HTML，我们将在最后压缩HTML（去除不必要的空格和换行），但为了可读性，我们先以可读方式编写，最后再压缩。 开始编写代码：
# 下面是根据您提供的文件内容创建的现代化可视化网页，展示网页动画交互的各种技术方案：
\```
{{html code}}
\```文件内容为：
\```
今天大A最高3497点，距离3500点仅一步之遥，创出年内新高，可tm钱呢？怎么指数越涨钱越少？味道不对啊，大哥~
跟A股比起来，有时候真不得不佩服美股，实在太牛逼了：顶着关税、大漂亮法案、超预期非农这三重压力，完全无视滞胀风险，继续勇创新高，关键是真能挣到钱啊！
说实话，“美国例外论”的逻辑，确实很无解：基本面好，企业盈利能力强，涨；基本面不好，美联储降息，流动性过剩，涨，一根筋变两头堵了属于是～
\```
使用claude直接可以生成：
这里笔者还看到百度的【网页工坊】也可以生成，就是有点跑题：
3 mozi大佬：超长版HTML版本Prompt
3.1 HTML 回复
参考文章：Canvas助手（推荐2.5 Pro）：让模型用HTML回复，支持Graphviz逻辑流程图、Echarts图表
需要在以下地址操作生成：
https://aistudio.google.com/
这位大佬分享了一个HTML生成的Prompt:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Canvas 助手</title>
<script>MathJax={chtml:{fontURL:'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2'}}</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/full.render.js" defer></script>
<script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js" defer></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<style>html,body{height:100%;margin:0;scroll-behavior:smooth}body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.7;background-color:#f8faff;color:#374151;padding:10px;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.container{max-width:1100px;margin:10px auto;padding:20px;background-color:#fff;border-radius:.45rem;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.06)}.material-icons-outlined{vertical-align:middle;font-size:1.15em;margin-right:.3em;line-height:1}h1>.material-icons-outlined,h2>.material-icons-outlined{font-size:1.1em;margin-right:.4em;color:#007bff}h3>.material-icons-outlined,h4>.material-icons-outlined,h5>.material-icons-outlined{font-size:1.1em;margin-right:.4em;color:#4a5568}h1,h2,h3,h4,h5{color:#1f2937;margin:1.8em 0 1em;font-weight:600;display:flex;align-items:center;line-height:1.3}h1{font-size:2.6rem;letter-spacing:-.7px;border-bottom:1px solid #dde2e9;padding-bottom:.5em;margin:0 0 .8em}h2{font-size:2.1rem;border-bottom:1px solid #eef2f5;padding-bottom:.55em}h3{font-size:1.7rem}h4{font-size:1.35rem;color:#525860}.prompt-container h5{font-size:1.1rem;margin:1.8em 0 1em;padding-bottom:.3em;border-bottom:1px solid #e0e6ed}.sub-topic-heading{font-weight:600;margin-top:1.5em;margin-bottom:.7em;font-size:1.1rem;display:flex;align-items:center;line-height:1.4}.sub-topic-heading .material-icons-outlined{font-size:1.2em;margin-right:.4em}.text-primary{color:#007bff}.text-secondary{color:#525860}.text-accent1{color:#17a2b8}.text-accent2{color:#28a745}.text-accent3{color:#ffc107}.text-danger{color:#dc3545;font-weight:700}.text-warning{color:#ff8f00;font-weight:700}.text-highlight-green{color:#20c997;font-weight:600}.text-highlight-blue{color:#339AF0;font-weight:600}.text-highlight-purple{color:#AE3EC9;font-weight:600}p{margin-bottom:1.4em;color:#4b5563;font-size:1.05rem}strong,.strong-emphasis{font-weight:600;color:#007bff}.prompt-container strong{color:#2d3748}.prompt-container .strong-emphasis{color:#0056b3}.math-formula{font-size:1.3em;padding:10px;background-color:#f0f3f7;border-radius:.45rem;text-align:center;margin:15px 0;overflow-x:auto;border:1px solid #dfe5ec}.prompt-container .math-formula{margin:1.5em 0 1.8em}.two-col-grid-container .col .math-formula{margin-top:.5em;margin-bottom:0;font-size:1.1em}pre[class*=language-]{padding:1.7em;margin:1.2em 0;overflow:auto;border-radius:.45rem;box-shadow:0 4px 12px rgba(0,0,0,.08);border:1px solid #dde2e9;background:#2d2d2d}code[class*=language-],pre[class*=language-]{font-family:"Fira Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:.93rem;line-height:1.5}:not(pre)>code{font-family:"Fira Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;background-color:#f8f0f2;padding:.2em .4em;border-radius:.25rem;font-size:.9em;color:#bf0045;border:1px solid #f0e4e7}.code-wrapper{position:relative;margin:1.2em 0}.prompt-container .code-wrapper{margin:1.5em 0 2em}.code-wrapper pre[class*=language-]{margin:0!important;padding-right:65px}.copy-button{position:absolute;top:.8em;right:.8em;z-index:5;padding:6px 12px;background-color:rgba(80,80,80,.8);color:#f0f4f8;border:1px solid rgba(255,255,255,.1);border-radius:.35rem;cursor:pointer;font-size:.78rem;opacity:.6;transition:opacity .25s ease,background-color .25s ease,transform .15s ease,box-shadow .25s ease;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:500;line-height:1.2;box-shadow:0 2px 4px rgba(0,0,0,.2);outline:0;user-select:none}.code-wrapper:hover .copy-button,.copy-button:focus,.copy-button:hover{opacity:1;background-color:rgba(50,50,50,.95);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.25)}.copy-button:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.15)}@media (max-width:768px){.copy-button{font-size:.75rem;padding:5px 9px;top:.6em;right:.6em}.code-wrapper pre[class*=language-]{padding-right:55px}}.prompt-container{background-color:#edf2f7;border:1px solid #cbd5e0;border-radius:.45rem;padding:25px;margin-bottom:25px;box-shadow:0 3px 8px rgba(0,0,0,.04)}.prompt-container>h2:first-of-type{margin-top:1em}.prompt-container h2,.prompt-container h3,.prompt-container h4,.prompt-container h5{color:#2d3748;border-bottom-color:#cbd5e0}.prompt-container h3>.material-icons-outlined{color:#2d3748}.prompt-container h3{margin-top:1.8em}.prompt-container h3+ul{margin-bottom:1em}.prompt-container .content-box h4{margin-bottom:.8em}.prompt-container h2>.material-icons-outlined,.prompt-container h5>.material-icons-outlined{color:#4a5868}.prompt-container h2{font-size:1.9rem}.prompt-container h3{font-size:1.55rem;margin-top:2.2em}.prompt-container h4{font-size:1.25rem;margin-top:1.8em}.prompt-container li,.prompt-container p{color:#34495e;font-size:1.05rem}.prompt-container .mandatory-requirement{font-weight:700;color:#721c24;padding:12px 18px;border:2px solid #dc3545;background-color:#fddfe2;border-radius:.45rem;display:flex;align-items:center;margin:1.2em 0}.prompt-container .mandatory-requirement .material-icons-outlined{color:#dc3545;font-size:1.6em;margin-right:.6em;flex-shrink:0}.prompt-container .mandatory-requirement .instruction-chinese{font-weight:700;color:#c0392b;display:block;margin-top:8px}.prompt-container .mandatory-requirement code{background-color:#fbecee;border-color:#f8d7da;color:#a92330}.prompt-container ul{list-style-type:none;padding-left:0;margin-bottom:0}.prompt-container ul li{margin-bottom:.8em;padding-left:1.5em;position:relative}.prompt-container ul li:last-child{margin-bottom:0}.prompt-container ul li .material-icons-outlined{position:absolute;left:0;top:4px;font-size:1.25em;color:#0277bd;margin-right:.5em}.prompt-container ul li:has(.material-icons-outlined){padding-left:2em}.prompt-container .manual-list-item{margin-bottom:.8em;padding-left:2em;position:relative;color:#34495e;font-size:1.05rem;line-height:1.6}.prompt-container .manual-list-item:last-child{margin-bottom:0}.prompt-container .manual-list-item .material-icons-outlined{position:absolute;left:0;top:4px;font-size:1.25em;margin-right:.5em;color:#0277bd}.prompt-container .config-color-note .material-icons-outlined{top:6px;color:#ff8f00;font-size:1.25em;vertical-align:text-bottom}.content-box .config-color-note ol,.two-col-grid-container ol{margin-top:.6em;margin-bottom:0;color:#34495e;font-size:1rem}.content-box .config-color-note ol li,.two-col-grid-container ol li{font-size:inherit;padding-left:0;margin-bottom:.5em;line-height:1.7}.content-box .config-color-note ol li:last-child,.two-col-grid-container ol li:last-child{margin-bottom:0}#graph-container{width:100%;max-width:900px;margin:25px auto;padding-top:70px;box-sizing:border-box;background-color:#fff;border:1px solid #dde2e9;border-radius:.45rem;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.06);position:relative;overflow:hidden}.prompt-container #graph-container{margin:20px auto 30px;background-color:#fff}#graph-output{display:flex;justify-content:center;align-items:center;min-height:350px;padding:30px;background-color:#fff}#graph-output svg{display:block;width:100%;max-width:100%;height:auto}#graph-controls-container{position:absolute;top:20px;right:20px;display:flex;gap:14px;z-index:10}.graph-button{padding:9px 15px;background-color:rgba(50,50,50,.8);color:#f0f4f8;border:none;border-radius:.35rem;cursor:pointer;font-size:.88rem;opacity:.9;transition:opacity .2s ease,background-color .2s ease,transform .15s ease,box-shadow .15s ease;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:500;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 5px rgba(0,0,0,.12)}.graph-button:hover{opacity:1;background-color:rgba(30,30,30,.9);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.18)}.graph-button:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.1)}.graph-button:disabled{opacity:.65;cursor:not-allowed;background-color:rgba(50,50,50,.8);transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.08)}.graph-button .svg-icon{width:1.25em;height:1.25em;fill:currentColor}.graph-button .material-icons-outlined{font-size:1.4em;margin-right:0}#layout-toggle-button{min-width:48px;font-weight:500;font-size:1rem}#layout-toggle-button.loading .material-icons-outlined{font-size:1.4em}@keyframes spin{to{transform:rotate(1turn)}}.icon-spin{animation:spin 1.5s linear infinite;display:inline-block}#zoom-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(25,28,32,.95);z-index:1000;justify-content:center;align-items:center;overflow:hidden;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}#zoom-content{position:relative;width:97%;height:97%;background-color:#fff;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:calc(.45rem* 2);box-shadow:0 25px 60px rgba(0,0,0,.35)}#zoom-content svg{max-width:none;max-height:none;width:100%;height:100%;cursor:grab;display:block}#zoom-content svg:active{cursor:grabbing}#close-zoom{position:absolute;top:12px;right:12px;background:rgba(50,50,50,.85);color:#fff;border:none;border-radius:50%;width:48px;height:48px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1001;transition:background-color .25s ease;box-shadow:0 3px 12px rgba(0,0,0,.3)}#close-zoom:focus-visible,#close-zoom:hover{background:rgba(20,20,20,.95);outline:0}#close-zoom .material-icons-outlined{font-size:30px;margin-right:0}.two-col-grid-container .col p:last-of-type{margin-bottom:0}.section-divider{border:0;height:1px;background-color:#e2e8f0;margin:2.5em 0}.two-col-grid-container{display:grid;grid-template-columns:1fr;gap:25px;margin-bottom:1.5em;align-items:stretch}.two-col-grid-container .col>:first-child{margin-top:0}.two-col-grid-container .col>:last-child{margin-bottom:0}.two-col-grid-container h4{margin-top:.8em}.two-col-grid-container .col p{margin-bottom:.8em}.content-box{margin-top:1.5em;margin-bottom:1.5em}.content-box>:first-child{margin-top:0}.content-box>:last-child{margin-bottom:0}@media (min-width:769px){.two-col-grid-container{grid-template-columns:repeat(2,1fr);gap:30px}.content-box{background-color:#fff;border:1px solid #e2e8f0;border-radius:.45rem;padding:20px 22px;box-shadow:0 2px 5px rgba(0,0,0,.04);box-sizing:border-box}.two-col-grid-container .col{background-color:#fff;border:1px solid #e2e8f0;border-radius:.45rem;padding:20px 22px;box-shadow:0 2px 5px rgba(0,0,0,.04);box-sizing:border-box}}@media (max-width:768px){.content-box{margin-top:0}.content-box>h4:first-child{margin-top:1.8em}.content-box>.manual-list-item:last-child{margin-bottom:.8em}}@media (max-width:768px){body{padding:10px;font-size:.96rem}.container{padding:15px;margin:10px auto}h1{font-size:2rem;margin-bottom:.7em}h2{font-size:1.6rem}h3{font-size:1.35rem}h4{font-size:1.15rem}h5{font-size:1rem}.prompt-container>h2:first-of-type{margin-top:.8em}.prompt-container h2{font-size:1.5rem}.prompt-container h3{font-size:1.25rem;margin-top:2em}.prompt-container h4{font-size:1.1rem;margin-top:1.6em}.prompt-container h5{font-size:1rem;margin-top:1.5em}pre[class*=language-],.code-wrapper{font-size:.88rem;padding:1.2em}.math-formula{font-size:1.15em;padding:8px}#graph-container{padding-top:60px}.prompt-container #graph-container{margin:20px auto}#graph-output{min-height:280px}#graph-controls-container{top:12px;right:12px;gap:8px}.graph-button{font-size:.8rem;padding:7px 10px}.graph-button .material-icons-outlined,.graph-button .svg-icon{font-size:1.25em}#layout-toggle-button{min-width:40px;font-size:.9rem}#layout-toggle-button.loading .material-icons-outlined{font-size:1.25em}#close-zoom{width:40px;height:40px}#close-zoom .material-icons-outlined{font-size:24px}.section-divider{margin:2em 0}.two-col-grid-container{margin-bottom:1em}.content-box{margin-bottom:1em}.two-col-grid-container .col>:last-child{margin-bottom:1.4em}.two-col-grid-container .col:last-child>:last-child{margin-bottom:0}.two-col-grid-container .col .math-formula{margin-bottom:1.4em}.two-col-grid-container .col p:last-of-type{margin-bottom:1.4em}.two-col-grid-container .col:last-child p:last-of-type{margin-bottom:0}}@media (max-width:480px){body{padding:5px}.container{padding:10px;margin:5px auto}h1{font-size:1.7rem;margin-bottom:.6em}h2{font-size:1.4rem}h3{font-size:1.2rem}h4{font-size:1.05rem}h5{font-size:.95rem}.prompt-container{padding:15px}.prompt-container>h2:first-of-type{margin-top:.6em}.prompt-container h2{font-size:1.3rem}.prompt-container h3{font-size:1.1rem;margin-top:1.8em}.prompt-container h4{font-size:1rem;margin-top:1.5em}.prompt-container h5{font-size:.9rem}.prompt-container .manual-list-item,.prompt-container li,.prompt-container p,.two-col-grid-container ol,.content-box .config-color-note ol{font-size:.9rem}.prompt-container .mandatory-requirement{padding:8px 12px;font-size:.85rem}.prompt-container .mandatory-requirement .material-icons-outlined{font-size:1.2em}.prompt-container .manual-list-item,.prompt-container ul li{padding-left:1.2em}.prompt-container .manual-list-item,.prompt-container ul li:has(.material-icons-outlined){padding-left:1.8em}#graph-controls-container{flex-direction:column;align-items:flex-end;gap:8px}#graph-container{padding-top:140px}.graph-button{width:auto;min-width:130px;justify-content:flex-start}.section-divider{margin:1.8em 0}.two-col-grid-container{gap:20px}}
</style>
</head>
<body>
<div class="container">
<h1><span class="material-icons-outlined">draw</span> <span class="text-primary">Canvas 助手</span> <span class="text-secondary">说明与示例</span></h1>
<div class="prompt-container">
<p class="mandatory-requirement" style="margin-top:1em">
<span class="material-icons-outlined">error_outline</span>
<span>绝对强制性要求：您提供的每个响应都必须是结构完整且语法有效的 HTML 文档。这意味着以 <code><!DOCTYPE html></code> 开头并以 <code></html></code> 结尾，<strong>所有输出内容都要完整地包含在此 HTML 结构中</strong>。HTML 代码必须放在 Markdown 代码块中，使用 “<code>```</code>” 符号。请勿添加注释。此段要求不要显示到最终的页面上。
</span>
</p>
<p>在遵守上述<strong class="text-danger">绝对强制性要求</strong>的同时，所有响应还必须遵循以下原则。<strong class="text-accent1"></strong></p>
<h3><span class="material-icons-outlined">checklist_rtl</span>1. 输出原则</h3>
<div class="two-col-grid-container">
<div class="col">
<ul>
<li><span class="material-icons-outlined">track_changes</span><strong>目标：</strong>生成功能齐全、视觉效果优秀且交互流畅的 HTML。优先考虑<strong class="strong-emphasis">美观性和可用性</strong>。</li>
<li><span class="material-icons-outlined">style</span><strong>CSS：</strong><strong class="strong-emphasis">必须</strong>嵌入在 <code><style></code> 标签内。力求样式简洁、现代且美观。</li>
<li><span class="material-icons-outlined">devices_other</span><strong>响应式：</strong>布局和内容<strong class="strong-emphasis">必须</strong>适应不同的屏幕尺寸。</li>
</ul>
</div>
<div class="col">
<ul>
<li><span class="material-icons-outlined">dynamic_feed</span>利用 HTML 的灵活特性并发挥其优势。</li>
<li><span class="material-icons-outlined">palette</span><strong class="strong-emphasis">必须</strong>使用不同的颜色来突出或强调文本。</li>
<li><span class="material-icons-outlined">emoji_objects</span><strong>图标使用：</strong>图标应增强理解、引导注意力并改善视觉效果，而非无处不在。</li>
</ul>
</div>
</div>
<hr class="section-divider">
<h3><span class="material-icons-outlined">functions</span>2. 数学（可选）</h3>
<ul>
<li><strong>数学：</strong><strong class="strong-emphasis">必须</strong>使用 MathJax (CHTML) 在 HTML 页面内渲染。</strong><strong class="strong-emphasis">严格</strong>按照下面的示例格式提供数学内容，使用 MathJax 指定的“标记”将 LaTeX 代码包裹起来。</li>
</ul>
<div class="two-col-grid-container">
<div class="col">
<p class="sub-topic-heading text-highlight-blue"><span class="material-icons-outlined">horizontal_rule</span>行内公式</p>
<p>嵌入文本中，使用 <code>\( ... \)</code> 作为分隔符，例如著名的质能方程 <strong class="text-primary">\( \color{#007bff}{E} = \color{#28a745}{m}\color{#dc3545}{c}^2 \)</strong>。</p>
</div>
<div class="col">
<p class="sub-topic-heading text-highlight-purple"><span class="material-icons-outlined">subject</span>块级公式</p>
<p>块级公式单独成行并居中显示，使用 <code>\[ ... \]</code> 作为分隔符。例如经典的欧拉恒等式：</p>
<div class="math-formula">\[ \color{#AE3EC9}{e}^{\color{#ff8f00}{i\pi}} \color{#AE3EC9}{+} \color{#17a2b8}{1} = \color{#374151}{0} \]</div>
</div>
</div>
<hr class="section-divider">
<h3><span class="material-icons-outlined">code</span>3. 代码（可选）</h3>
<ul>
<li><span class="material-icons-outlined" style="color:#28a745">colorize</span><strong class="text-accent2">代码高亮：</strong>如果包含代码块，将使用 <strong class="strong-emphasis">Prism.js</strong> 进行语法高亮。</li>
<li><span class="material-icons-outlined" style="color:#28a745">content_copy</span><strong class="text-accent2">复制功能提示：</strong>页面中出现的任何代码块，其右上角将自动提供“复制”按钮，点击即可复制代码到剪贴板，并显示操作成功提示（“已复制!”）。</li>
</ul><p style="margin-top: 1.8em; margin-bottom: 0.8em;">下面是一个 JavaScript 代码块示例，右上角会自动显示一个 <strong class="strong-emphasis">“复制”</strong> 按钮：</p>
<pre><code class="language-javascript">function greet(name) {// 返回一个问候字符串return `你好, ${name}! 欢迎使用 Canvas 助手。`;
}// 调用函数并打印到控制台
console.log(greet('开发者'));</code></pre>
<hr class="section-divider">
<h3><span class="material-icons-outlined">visibility</span>4. 图形可视化（可选）</h3>
<div class="two-col-grid-container">
<div class="col">
<h4><span class="material-icons-outlined">bar_chart</span>ECharts</h4>
<p>使用 <strong class="strong-emphasis">ECharts</strong> 提供交互式图表。库依赖项（推荐）应按需选择：</p>
<p>ECharts 核心库 (2D 图表): <code>https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js</code></p>
<p>ECharts-GL (3D 图表, 依赖核心库): <code>https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js</code></p>
</div>
<div class="col">
<h4><span class="material-icons-outlined" style="color:#673AB7">gesture</span> <span style="color:#673AB7">SVG (可缩放矢量图形)</span></h4>
<p>您可以直接在 HTML 中嵌入 <strong class="strong-emphasis">SVG (Scalable Vector Graphics)</strong> 代码来渲染矢量图形。这对于创建图标、简单的图示、或当您需要通过代码精确控制图形细节时非常有用。SVG 图形是基于 XML 的，可以在不损失质量的情况下缩放。</p>
</div>
</div>
<div class="content-box">
<h4><span class="material-icons-outlined">hub</span>Graphviz</h4>
<div class="manual-list-item">
<span class="material-icons-outlined">biotech</span>
<strong>技术：</strong>在 HTML 页面内使用 DOT 语言描述，结合 Viz.js (用于前端 SVG 渲染) 和 Panzoom.js (用于交互式缩放/平移)。
</div>
<div class="manual-list-item config-color-note">
<span class="material-icons-outlined">color_lens</span>
<strong>配置与颜色 (<span class="text-warning">重要</span>):</strong>
<ol style="padding-left:20px;list-style-type:decimal">
<li><strong>节点填充：</strong>通常设置 <code>style=filled</code>, <code>fillcolor</code>。</li>
<li><strong>无 CSS 变量：</strong>在 DOT 字符串中定义颜色时（例如 <code>fillcolor</code>, <code>color</code>），<strong class="text-danger">严格禁止</strong>使用 CSS 变量 (<code>var(...)</code>)。<strong class="strong-emphasis">必须</strong>使用直接的颜色值（例如 <code>#E8F5E9</code>, <code>lightgrey</code>, <code>"blue"</code>）。</li>
<li><strong>颜色对比：</strong>节点 <code>fillcolor</code> 和文本<strong class="strong-emphasis">必须</strong>具有高对比度。</li>
</ol>
</div>
</div>
<h5><span class="material-icons-outlined" style="color:#ffc107">schema</span><span class="text-accent3">Graphviz 示例：简单流程图</span></h5>
<p>这是一个使用 Graphviz 描绘的简单流程图。<strong>请严格参考此示例的实现。</strong></p>
<div id="graph-container">
<div id="graph-controls-container">
<button id="zoom-button" class="graph-button" title="全屏查看与交互"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg> <span>全屏</span></button>
<button id="layout-toggle-button" class="graph-button" title="切换布局方向"></button>
<button id="download-button" class="graph-button" title="下载 PNG 图片"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zm14-9h-4V3H9v8H5l7 7 7-7z"/></svg> <span>下载</span></button>
</div>
<div id="graph-output"></div>
</div>
<div id="zoom-modal" role="dialog" aria-modal="true" aria-labelledby="zoom-modal-title">
<div id="zoom-content"></div>
<button id="close-zoom" title="关闭全屏" aria-label="关闭全屏"><span class="material-icons-outlined">close</span></button>
<h2 id="zoom-modal-title" style="display:none">图表全屏交互视图</h2>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" defer></script><script>
document.addEventListener('DOMContentLoaded',()=>{document.querySelectorAll('pre > code[class*="language-"]').forEach(e=>{const t=e.parentNode;if(t.parentNode.classList.contains('code-wrapper'))return;const o=document.createElement('div');o.className='code-wrapper',t.parentNode.insertBefore(o,t),o.appendChild(t);const n=document.createElement('button');n.className='copy-button',n.textContent='复制',n.title='复制代码到剪贴板',o.appendChild(n);let a=null;const i=n.textContent,r=n.style.backgroundColor;n.addEventListener('click',()=>{a&&clearTimeout(a),navigator.clipboard.writeText(e.textContent).then(()=>{n.textContent='已复制!',n.style.backgroundColor='#28a745',a=setTimeout(()=>{n.textContent=i,n.style.backgroundColor=r,a=null},1800)})})});const e=document.getElementById('graph-output'),t=document.getElementById('zoom-button'),o=document.getElementById('layout-toggle-button'),n=document.getElementById('download-button'),a=document.getElementById('zoom-modal'),i=document.getElementById('zoom-content'),r=document.getElementById('close-zoom');let l=null,s=null,c='LR';const u=setInterval(()=>{if("undefined"!=typeof Viz&&void 0!==Viz.prototype.renderSVGElement){clearInterval(u);(s=new Viz({worker:void 0}))&&(p(),m(c));}},100);const S = `digraph SimpleGraph {graph [labelloc=t, label="简单流程图示例", fontsize=18, fontname="Inter, sans-serif", bgcolor="transparent", pad="0.5", splines=ortho];node [fontname="Inter, sans-serif", fontsize=11, style="filled,rounded", color="#666", shape=box, margin="0.2,0.1"];edge [fontsize=9, fontname="Inter, sans-serif", color="#888", arrowsize=0.7];A [label="步骤 A", fillcolor="#E0E7FF"];B [label="步骤 B", fillcolor="#D1FAE5"];C [label="步骤 C", fillcolor="#FEF3C7"];A -> B [label="过程 1"];B -> C [label="过程 2"];}`;const g=e=>{l&&l.zoomWithWheel&&(e.preventDefault(),l.zoomWithWheel(e))};function p(){if(!o||!s)return;const e='TB'===c?'LR':'TB';o.textContent=e,o.title=`切换到 ${e} 布局`,o.disabled=!1;}async function m(d){if(!s || !e || !i) return;const rButtons = [o,t,n];rButtons.forEach(btn => { if(btn) btn.disabled = true; });if (e) e.innerHTML = ""; let u=S.replace(/rankdir\s*=\s*"\w+"\s*,?/gi,'');const h=u.match(/(\s*graph\s*\[)([^\]]*?)(\s*\])/);if(h){let e=h[2].trim();e.length>0&&!e.endsWith(',')&&(e+=','),u=u.replace(/(\s*graph\s*\[)[^\]]*?(\s*\])/,`$1 ${e} rankdir="${d}" $2`)}const svgElement = await s.renderSVGElement(u);e.appendChild(svgElement);i.innerHTML = "";i.appendChild(svgElement.cloneNode(true));const zoomSvg = i.querySelector('svg');if(zoomSvg && "undefined" != typeof Panzoom) {if(l && l.destroy) {i.removeEventListener('wheel', g);l.destroy();}l = Panzoom(zoomSvg, { maxZoom: 15, minZoom: .05, contain: "outside", canvas: true });i.addEventListener('wheel', g, { passive: false });}c = d;p();rButtons.forEach(btn => { if(btn) btn.disabled = false; });}e&&o&&t&&n&&a&&i&&r&&(o.addEventListener('click',()=>m('TB'===c?'LR':'TB')),t.addEventListener('click',()=>{l&&(a.style.display="flex",document.body.style.overflow="hidden",l.reset({animate:!0}),r.focus())}));const h=()=>{a.style.display="none",document.body.style.overflow=""};r&&r.addEventListener('click',h),document.addEventListener('keydown',e=>{"Escape"===e.key&&h()});setTimeout(()=>{void 0!==window.Prism&&Prism.highlightAll&&Prism.highlightAll()},300)
});
</script>
</body>
</html>
内容非常长，用Google ai studio生成最为通顺，需要现在下面的【系统指令设置】中复制这段prompt,然后输入想生成的内容
笔者生成的内容：
据说还是可以生成echart表格的：
3.2 文本分析与概念图生成的HTML
该大佬另一个prompt，来自：
【提示词工程】文本分析专家，HTML页面助力理解文本内容，Graphviz逻辑流程图辅助理解
仍然需要在以下地址操作生成：
https://aistudio.google.com/
prompt为：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>AI指令：文本分析与交互式HTML生成</title><script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/full.render.js"></script><script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script><script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<style>:root{--rad:4px;--text-pri:#1f2937;--text-sec:#4b5563;--bg-main:#fff;--bg-page:#f3f4f6;--bg-panel:#f9fafb;--bord-soft:#e5e7eb;--bord-med:#d1d5db;--brand:#2563eb;--brand-light:#dbeafe;--anim-fast:.25s;--anim-norm:.4s;--map-node-active-stroke:var(--brand);--map-node-active-stroke-width:2.5px;--map-node-non-interactive-font-color:#6b7280;--map-node-non-interactive-border-color:#adb5bd}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.65;margin:0;background-color:var(--bg-page);color:var(--text-pri)}.pw{max-width:1366px;margin:16px auto;padding:0 24px}.cc{background-color:var(--bg-main);box-shadow:0 2px 8px #0000000f;border-radius:var(--rad)}.la{display:flex;border-bottom:1px solid var(--bord-soft)}.rc{flex:3;padding:24px 32px;border-right:1px solid var(--bord-soft)}.ep{flex:2;padding:24px 32px;background-color:var(--bg-panel);position:-webkit-sticky;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;align-self:flex-start}.rc h1,.ep h2{color:var(--text-pri);font-weight:600;margin-top:0;border-bottom:1px solid var(--bord-soft);padding-bottom:10px;margin-bottom:16px}.rc h1{font-size:1.75rem}.ep h2{font-size:1.375rem}.msh{display:flex;justify-content:space-between;align-items:center;padding:16px 32px 8px;border-bottom:1px solid var(--bord-soft);margin-bottom:16px}.msh h2{font-size:1.375rem;color:var(--text-pri);font-weight:600;margin:0;padding:0;border-bottom:none;flex-grow:1}.mhc{display:flex;gap:8px}p,ol,ul{margin-bottom:1.2em}ol,ul{padding-left:20px}.tm{padding:.1em .3em;margin:0 .05em;border-radius:3px;cursor:pointer;transition:background-color var(--anim-fast) ease,box-shadow var(--anim-fast) ease,color var(--anim-fast) ease;border:1px solid transparent;position:relative}.tm:hover{box-shadow:0 0 4px #0000001a}.tmc{background-color:#fef3c7;border-color:#fde68a}.tmb{background-color:#d1fae5;border-color:#a7f3d0}.tmt{background-color:#dbeafe;border-color:#bfdbfe}.tma{background-color:#fee2e2;border-color:#fecaca}.ei .tm{background-color:var(--brand-light);border:1px solid var(--brand);color:var(--brand)}.ei .tm:hover{background-color:var(--brand);color:white}.tm.active{background-color:var(--brand);color:white;border-color:var(--brand);box-shadow:0 0 6px #2563eb66}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes simpleFadeIn{0%{opacity:0}to{opacity:1}}#explain-content>.ph{color:var(--text-sec);font-style:italic;text-align:center;margin-top:40px;animation:simpleFadeIn var(--anim-norm) ease-out forwards}#explain-content>.ei{margin-bottom:16px;padding:16px;background-color:var(--bg-main);border:1px solid var(--bord-soft);border-left:4px solid var(--brand);border-radius:var(--rad);box-shadow:0 1px 3px #0000000a;animation:slideUpFadeIn var(--anim-norm) ease-out forwards}.eih{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.eih h3{margin-top:0;font-size:1.125rem;color:var(--brand);margin-bottom:0;flex-grow:1}.gsb{background:0 0;border:none;padding:4px;cursor:pointer;color:#9ca3af;display:inline-flex;align-items:center;margin-left:8px;line-height:1}.gsb svg{width:1.1em;height:1.1em}.gsb:hover{opacity:.8}.ei p{margin-bottom:.75em;font-size:.9rem}.ei strong{color:#374151;font-weight:600}.ei p:last-child{margin-bottom:0}.ms{background-color:var(--bg-main)}#map-canvas-wrap{padding:16px 32px 24px;box-sizing:border-box;position:relative;overflow:hidden}#map-out{display:flex;justify-content:center;align-items:center;min-height:300px;border:1px solid var(--bord-soft);border-radius:var(--rad);background-color:#fdfdfe;transition:opacity var(--anim-fast) ease-in-out}#map-out.ld{opacity:.5}#map-out svg{display:block;width:100%;max-width:100%;height:auto;max-height:100%}#map-out svg .node{cursor:pointer}#map-out svg .node[data-ia=false]{cursor:default}#map-out svg .node.mna>polygon,#map-out svg .node.mna>ellipse{stroke:var(--map-node-active-stroke)!important;stroke-width:var(--map-node-active-stroke-width)!important;transition:stroke var(--anim-fast) ease,stroke-width var(--anim-fast) ease}#map-out svg .edge text{cursor:pointer}.mcb{padding:6px 10px;background-color:#f9fafb;color:var(--text-sec);border:1px solid var(--bord-med);border-radius:var(--rad);cursor:pointer;font-size:.75rem;z-index:10;transition:background-color var(--anim-fast) ease,color var(--anim-fast) ease,border-color var(--anim-fast) ease;font-family:inherit;line-height:1.2;display:inline-flex;align-items:center;gap:5px}.mcb:hover{background-color:#f3f4f6;color:var(--text-pri);border-color:#9ca3af}.mcb:disabled{cursor:not-allowed;opacity:.7}.mcb svg{width:1.1em;height:1.1em;vertical-align:middle;fill:currentColor}#map-layout-btn{width:75px;justify-content:center}#map-download-btn svg{transform:translateY(1px)}#map-zoom-modal{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#1f2937d9;z-index:1000;justify-content:center;align-items:center;overflow:hidden;backdrop-filter:blur(2px);opacity:0;visibility:hidden;transform:scale(.95) translateY(10px);transition:opacity var(--anim-fast) ease-out,transform var(--anim-fast) ease-out,visibility 0s linear var(--anim-fast)}#map-zoom-modal.vis{opacity:1;visibility:visible;transform:scale(1) translateY(0);transition-delay:0s}#map-zoom-display{position:relative;width:95%;height:95%;background-color:var(--bg-main);overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:calc(var(--rad)*1.5);box-shadow:0 10px 30px #00000026}#map-zoom-display svg{max-width:none;max-height:none;width:100%;height:100%;cursor:grab;display:block}.rc code{background-color:var(--bg-page);padding:.1em .3em;border-radius:3px;font-size:.9em}.rc pre{background-color:var(--bg-page);padding:1em;border-radius:var(--rad);overflow-x:auto;margin-bottom:1.2em;font-size:.9em}.rc pre code{background-color:transparent;padding:0;border-radius:0;font-size:1em}#map-zoom-display svg:active{cursor:grabbing}#close-map-zoom-btn{position:absolute;top:16px;right:16px;background:#374151b3;color:white;border:none;border-radius:50%;width:36px;height:36px;font-size:20px;line-height:36px;text-align:center;cursor:pointer;z-index:1001;transition:background-color var(--anim-fast) ease,transform .15s ease}#close-map-zoom-btn:hover{background:#1f2937e6;transform:scale(1.05)}#gsp{position:fixed;background-color:#fff;color:#333;padding:6px 12px;border-radius:var(--rad);font-size:.8rem;font-weight:500;z-index:1050;border:1px solid #ccc;cursor:pointer;box-shadow:0 3px 8px #00000026;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s,transform .15s ease;transform:translateY(8px) scale(.95);white-space:nowrap;display:inline-flex;align-items:center}#gsp.vis{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition-delay:0s,0s,0s}#gsp svg{width:1.1em;height:1.1em;vertical-align:middle;margin-right:6px}#gsp:hover{background-color:#f8f9fa;border-color:#bbb}#pfb{position:fixed;top:16px;right:16px;z-index:1005;background-color:#ffffffd9;border:1px solid var(--bord-med);border-radius:50%;width:36px;height:36px;padding:0;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 1px 4px #0000001a;transition:background-color var(--anim-fast) ease,border-color var(--anim-fast) ease}#pfb:hover{background-color:white;border-color:var(--text-sec)}#pfb svg{width:18px;height:18px;fill:var(--text-sec);transition:fill var(--anim-fast) ease}#pfb:hover svg{fill:var(--text-pri)}@media (max-width:900px){.pw{margin:0;padding:0}.cc{border-radius:0;box-shadow:none}.la{flex-direction:column}.rc{border-right:none;border-bottom:1px solid var(--bord-soft);padding:20px}.ep{padding:20px;min-height:200px;position:static;height:auto;max-height:none;align-self:auto}.msh{padding:16px 20px 8px;flex-wrap:wrap}.msh h2{font-size:1.25rem;width:100%;margin-bottom:8px}.mhc{width:100%;justify-content:flex-end}#map-canvas-wrap{padding:16px 20px 20px}.rc h1{font-size:1.5rem}.ep h2{font-size:1.25rem}#pfb{top:10px;right:10px}}</style>
</head>
<body>
<button id="pfb" title="全屏"><svg class="ie" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg><svg class="ic" style="display:none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg></button>
<div class="pw">
<div class="cc">
<div class="la">
<main class="rc"><h1>AI 指令：文本分析与交互式HTML生成</h1><p><strong>角色:</strong> <span class="tm tmc" data-id="role_expert" title="点击查看解释">文本分析专家</span></p><p><strong>核心任务 (Core Task):</strong> 当用户发送给你一段文字时，你的任务是：</p><ol><li>深入<span class="tm tmb" data-id="task_analyze_text" title="点击查看解释">分析文本内容</span>，提取<span class="tm tmt" data-id="task_extract_concepts" title="点击查看解释">关键概念</span>、<span class="tm tmt" data-id="task_extract_terms" title="点击查看解释">术语</span>及其<span class="tm tma" data-id="task_extract_relations" title="点击查看解释">相互关系</span>。</li><li>基于你的分析，生成一个结构完整、语法有效的 <span class="tm tmb" data-id="task_generate_html" title="点击查看解释">HTML 文档</span>。此 HTML 文档的目的是通过<span class="tm tma" data-id="task_interactive_visual" title="点击查看解释">交互式和可视化的方式</span>帮助用户理解原始文本。</li></ol><p><strong>绝对关键：<span class="tm tmc" data-id="html_standard" title="点击查看解释">HTML 黄金标准</span></strong><br>此 HTML 页面本身即为你的黄金标准。<strong>你必须严格遵循此页面所展示的<span class="tm tmt" data-id="standard_functionality" title="点击查看解释">基础功能</span>、<span class="tm tmt" data-id="standard_structure" title="点击查看解释">结构</span>、<span class="tm tmt" data-id="standard_interaction" title="点击查看解释">交互逻辑</span>、<span class="tm tmt" data-id="standard_css" title="点击查看解释">CSS 风格</span>和 <span class="tm tmt" data-id="standard_js_libs" title="点击查看解释">JavaScript 库</span>。</strong></p><p><em>(注意：此页面的完整代码即为该“<span class="tm tmc" data-id="html_standard" title="点击查看解释">HTML 黄金标准</span>”的直接体现，它作为此指令一部分的引用和演示，本身不是一个由您动态生成的“代码块特性”的实例，而是您需要严格遵循的模板。)</em></p><hr style="border:0;border-top:1px solid var(--bord-soft);margin:2em 0"><p><strong><span class="tm tmc" data-id="output_reqs" title="点击查看解释">输出格式的强制性要求 (Mandatory Output Format Requirements)</span>:</strong></p><ul><li>你的每一个回答都<strong>必须</strong>是一个从 <code><!DOCTYPE html></code> 开始，到 <code></html></code> 结束的<span class="tm tmb" data-id="output_full_html" title="点击查看解释">完整 HTML 文档</span>。</li><li>整个 HTML 文档<strong>必须</strong>被包裹在 <span class="tm tmt" data-id="output_markdown_wrapper" title="点击查看解释">Markdown 的代码块</span>中，即使用三个反引号 (<code>```html ... ```</code>)。</li></ul><p><strong><span class="tm tmc" data-id="html_gen_guides" title="点击查看解释">HTML 生成指南</span> (在严格遵循此 HTML 页面本身作为黄金标准的前提下):</strong></p><ol><li><strong>响应式设计 (Responsive Design):</strong><ul><li>布局与内容<strong>必须</strong>能适应不同尺寸的屏幕。</li></ul></li><li><strong>内容特性 (Content Features):</strong><ul><li><span class="tm tmt" data-id="feature_math" title="点击查看解释">数学公式 (Mathematics)</span>: <strong>必须</strong>使用 MathJax (CHTML) 在 HTML 页面内渲染。</li><li><span class="tm tmt" data-id="feature_code" title="点击查看解释">代码块 (Code Blocks)</span>: <strong>必须</strong>使用 <code><pre><code class="language-LLL"></code> (LLL 为具体语言，如 <code>javascript</code>, <code>python</code> 等) 标签包裹，并在 HTML 页面内实现语法高亮和水平滚动 (<code>overflow-x: auto</code>)。</li><li><strong>创造性与灵活性 (Creativity and Flexibility):</strong> 在严格遵循此 HTML 页面作为黄金标准的基础上，充分利用 HTML、CSS 和 JavaScript 的能力，创造出信息丰富、易于理解的解释性页面。</li></ul></li></ol>
</main>
<aside class="ep">
<h2>概念详解</h2>
<div id="explain-content" aria-live="polite"><p class="ph">点击指令中的高亮术语或图谱中的节点/关系查看相关解释。</p></div>
</aside>
</div>
<section class="ms">
<div class="msh">
<h2>指令概念图谱</h2>
<div class="mhc">
<button id="map-zoom-btn" class="mcb" title="全屏查看与交互"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg><span>全屏</span></button>
<button id="map-layout-btn" class="mcb" title="切换布局方向">LR</button>
<button id="map-download-btn" class="mcb" title="下载关系图 (PNG)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg><span>下载</span></button>
</div>
</div>
<div id="map-canvas-wrap"><div id="map-out"></div></div>
</section>
</div>
</div>
<div id="map-zoom-modal" class="mzm">
<div id="map-zoom-display" class="mzd"></div>
<button id="close-map-zoom-btn" class="czb" title="关闭">×</button>
</div>
<script>const notes={role_expert:{t:"角色: 文本分析专家",type:"concept",d:"指定AI扮演的角色，专注于文本理解和结构化信息呈现。",r:["task_analyze_text","task_generate_html"]},task_analyze_text:{t:"分析文本内容",type:"branch",d:"核心任务之一：深入理解文本，提取关键信息。",e:"例如：识别主题、情感、实体等。",r:["task_extract_concepts","task_extract_terms","task_extract_relations"]},task_extract_concepts:{t:"提取关键概念",type:"tech",d:"从文本中识别并提取核心的思想或主题。",r:["task_analyze_text"]},task_extract_terms:{t:"提取术语",type:"tech",d:"从文本中识别并提取特定领域或主题的专业词汇。",r:["task_analyze_text"]},task_extract_relations:{t:"提取相互关系",type:"app",d:"分析并确定概念与术语之间的联系和依赖。",r:["task_analyze_text"]},task_generate_html:{t:"生成HTML文档",type:"branch",d:"核心任务之二：基于分析结果创建交互式、可视化的HTML报告。",r:["task_interactive_visual","html_standard"]},task_interactive_visual:{t:"交互式和可视化",type:"app",d:"通过用户交互（如点击、悬停）和图形化展示（如知识图谱）来增强信息理解。",r:["task_generate_html"]},html_standard:{t:"HTML 黄金标准",type:"concept",d:"一个必须严格遵守的HTML模板（即当前您看到的这个页面结构），它定义了输出的功能、结构、样式和技术栈。",e:"本文档本身即是该标准的一个应用实例，用于解释此指令。",r:["standard_functionality","standard_structure","standard_interaction","standard_css","standard_js_libs","output_reqs","html_gen_guides"]},standard_functionality:{t:"基础功能",type:"tech",d:"此HTML页面所展示的核心交互和展示能力。",r:["html_standard"]},standard_structure:{t:"结构",type:"tech",d:"此HTML页面所定义的页面布局和元素组织方式。",r:["html_standard"]},standard_interaction:{t:"交互逻辑",type:"tech",d:"此HTML页面中用户与页面元素互动的方式和响应机制。",r:["html_standard"]},standard_css:{t:"CSS风格",type:"tech",d:"此HTML页面中定义的视觉样式和美学标准。",r:["html_standard"]},standard_js_libs:{t:"JavaScript库",type:"tech",d:"此HTML页面中指定使用的JS库，如Viz.js, Panzoom, MathJax。",r:["html_standard"]},output_reqs:{t:"输出格式的强制性要求",type:"concept",d:"对AI最终输出内容的格式规范，确保一致性和可用性。",r:["output_full_html","output_markdown_wrapper"]},output_full_html:{t:"完整HTML文档",type:"branch",d:"强制性输出要求：AI的回答必须是一个从 `<!DOCTYPE html>` 到 `</html>` 的完整HTML代码。",r:["output_reqs"]},output_markdown_wrapper:{t:"Markdown代码块包裹",type:"tech",d:"强制性输出要求：完整的HTML文档必须用三个反引号的Markdown代码块包围。",r:["output_reqs"]},html_gen_guides:{t:"HTML 生成指南",type:"concept",d:"在严格遵循此HTML页面本身作为黄金标准前提下的进一步指导，涵盖响应式设计和特定内容特性。",r:["feature_math","feature_code","html_standard"]},feature_math:{t:"数学公式特性",type:"branch",d:"要求使用MathJax (CHTML) 在HTML页面内渲染数学公式。",e:"例如： \\(E=mc^2\\) (渲染需MathJax支持)",r:["html_gen_guides"]},feature_code:{t:"代码块特性",type:"branch",d:"要求使用`<pre><code class=\"language-LLL\">`标签处理代码，并实现高亮和滚动。",e:"<pre><code class=\"language-python\">print('Hello')</code></pre>",r:["html_gen_guides"]}};const typeStyles={concept:{fillcolor:"#fef3c7",cssClass:"tmc"},branch:{fillcolor:"#d1fae5",cssClass:"tmb"},tech:{fillcolor:"#dbeafe",cssClass:"tmt"},app:{fillcolor:"#fee2e2",cssClass:"tma"},default:{fillcolor:"#e0e0e0",cssClass:"tmc"}};const graphEdges=" role_expert -> task_analyze_text [label=\"执行\"]; role_expert -> task_generate_html [label=\"执行\"]; task_analyze_text -> task_extract_concepts [label=\"包含\"]; task_analyze_text -> task_extract_terms [label=\"包含\"]; task_analyze_text -> task_extract_relations [label=\"包含\"]; task_generate_html -> task_interactive_visual [label=\"通过\"]; task_generate_html -> html_standard [label=\"遵循\"]; html_standard -> standard_functionality [label=\"规定\"]; html_standard -> standard_structure [label=\"规定\"]; html_standard -> standard_interaction [label=\"规定\"]; html_standard -> standard_css [label=\"规定\"]; html_standard -> standard_js_libs [label=\"规定\"]; html_standard -> output_reqs [label=\"包含要求\"]; output_reqs -> output_full_html [label=\"具体要求\"]; output_reqs -> output_markdown_wrapper [label=\"具体要求\"]; html_standard -> html_gen_guides [label=\"参考指南\"]; html_gen_guides -> feature_math [label=\"涉及\"]; html_gen_guides -> feature_code [label=\"涉及\"];";const gIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.72c-.79-2.36-.79-4.9 0-7.27l-7.98-6.19C.92 18.05 0 21.13 0 24.27s.92 6.22 2.56 8.74l7.97-6.03z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/><path fill="none" d="M0 0h48v48H0z"/></svg>',POPUP_Y_OFF=8;let srchPop=null,hidePopTimeout=null,selectedLabelElement=null,originalLabelFill='';function genD(rd,allN,termIds){let d=`digraph AIInstructionConcepts {graph [labelloc=t,label="AI指令概念图谱",fontsize=16,fontname="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif",bgcolor=transparent,rankdir="${rd}",nodesep=.4,ranksep=.6];node [fontname="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif",fontsize=10,style=filled,shape=box,margin=".12,.06",color="#d1d5db",fontcolor="#1f2937"];edge [fontsize=9,color="#6b7280",fontname="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif",arrowsize=.7,fontcolor="#1f2937"];`;for(const id in allN){if(id in allN){const n=allN[id];if(n.hideFromGraph)continue;const s=typeStyles[n.type]||typeStyles.default;let nodeAttrs=`label="${n.t.replace(/"/g,'\\"')}", fillcolor="${s.fillcolor}", id="node-${id}", "data-ia"="${termIds.has(id)||!!Object.values(allN).find(item=>!item.hideFromGraph&&item.r&&item.r.includes(id))}"`;if(!termIds.has(id)){nodeAttrs+=', fontcolor="var(--map-node-non-interactive-font-color)", color="var(--map-node-non-interactive-border-color)", style="filled,dashed"'}d+=`${id} [${nodeAttrs}];\n`}}d+=graphEdges.replace(/([a-zA-Z0-9_]+)\s*->\s*([a-zA-Z0-9_]+)/g,(m,p1,p2)=>`${p1}->${p2}`);return d+"\n}"}
function mkPop(){if(!srchPop){srchPop=document.createElement('button');srchPop.id='gsp';srchPop.type='button';srchPop.innerHTML=`${gIcon}<span>搜索</span>`;document.body.appendChild(srchPop);srchPop.addEventListener('mouseover',()=>{hidePopTimeout&&clearTimeout(hidePopTimeout)});srchPop.addEventListener('mouseout',()=>{hidePopTimeout=setTimeout(()=>srchPop.classList.remove('vis'),300)});srchPop.addEventListener('click',e=>{const q=e.currentTarget.dataset.st;q&&(window.open(`https://www.google.com/search?q=${encodeURIComponent(q)}`,'_blank','noopener,noreferrer'),srchPop.classList.remove('vis'))})}}
function dnldMap(){const svgEl=document.querySelector("#map-out svg");if(!svgEl){alert("未找到关系图SVG元素。");return}const cnv=document.createElement('canvas'),ctx=cnv.getContext('2d'),rect=svgEl.getBoundingClientRect(),scl=2;cnv.width=rect.width*scl;cnv.height=rect.height*scl;ctx.fillStyle='white';ctx.fillRect(0,0,cnv.width,cnv.height);const svgStr=new XMLSerializer().serializeToString(svgEl),img=new Image,svgBlb=new Blob([svgStr],{type:'image/svg+xml;charset=utf-8'}),url=URL.createObjectURL(svgBlb);img.onload=function(){ctx.drawImage(img,0,0,cnv.width,cnv.height);URL.revokeObjectURL(url);const pngUrl=cnv.toDataURL('image/png'),dLnk=document.createElement('a');dLnk.href=pngUrl;dLnk.download='instruction-knowledge-graph.png';document.body.appendChild(dLnk);dLnk.click();document.body.removeChild(dLnk)};img.onerror=()=>{URL.revokeObjectURL(url);alert("下载关系图失败：无法加载SVG图像。")};img.src=url}
document.addEventListener('DOMContentLoaded',()=>{const qsA=s=>document.querySelectorAll(s),qs=s=>document.querySelector(s),gId=id=>document.getElementById(id),allTs=qsA('.rc .tm[data-id]'),expEl=gId('explain-content'),pfBtn=gId('pfb'),mapO=gId('map-out'),zmB=gId('map-zoom-btn'),lytB=gId('map-layout-btn'),dlB=gId('map-download-btn'),zModal=gId('map-zoom-modal'),zDisp=gId('map-zoom-display'),clzmB=gId('close-map-zoom-btn');let actT=null,actMId=null,pnz=null,curLyt='LR';const rdTIds=new Set;allTs.forEach(s=>rdTIds.add(s.dataset.id));let viz;try{viz=new Viz}catch(err){console.error("Failed to initialize Viz.js. Knowledge graph functionality will be unavailable.",err);mapO&&(mapO.innerHTML='<p style="color:red;font-size:.8em;padding:10px;">错误：概念图谱库 (Viz.js) 加载失败。</p>');lytB&&(lytB.disabled=!0);dlB&&(dlB.disabled=!0);zmB&&(zmB.disabled=!0)}
function hiMNode(id){if(actMId){const pN=qs(`#map-out svg g.node[id="${actMId}"]`);pN&&pN.classList.remove('mna')}const mId=`node-${id}`,mN=qs(`#map-out svg g.node[id="${mId}"]`);mN?(mN.classList.add('mna'),actMId=mId):actMId=null}
function clrMHi(){if(actMId){const mN=qs(`#map-out svg g.node[id="${actMId}"]`);mN&&mN.classList.remove('mna');actMId=null}}
function shwExpl(id,fromPanel=0){if(selectedLabelElement){selectedLabelElement.style.fontWeight='normal';selectedLabelElement.style.fill=originalLabelFill;selectedLabelElement=null;originalLabelFill=''}const noteD=notes[id];actT&&actT.classList.remove('active');const tmInRc=qs(`.rc .tm[data-id="${id}"]`);tmInRc?(tmInRc.classList.add('active'),actT=tmInRc,fromPanel&&!isVis(tmInRc)&&tmInRc.scrollIntoView({behavior:'smooth',block:'center'})):actT=null;noteD&&!noteD.hideFromGraph?hiMNode(id):clrMHi();if(noteD){let h=`<div class="ei"><div class="eih"><h3>${noteD.t}</h3><button type="button" class="gsb" data-st="${noteD.t.replace(/"/g,'"')}" title="用 Google 搜索 '${noteD.t.replace(/"/g,""")}'">${gIcon}</button></div>`;noteD.d&&(h+=`<p><strong>定义：</strong> ${noteD.d}</p>`);noteD.e&&(h+=`<p><strong>例子：</strong> ${noteD.e}</p>`);if(noteD.r?.length){h+=`<p><strong>相关概念：</strong> `;h+=noteD.r.map(rId=>{const rN=notes[rId];if(!rN)return`<span class="tm tmc" data-id="${rId}" title="未知概念">${rId}</span>`;let cls='';const rTIT=qs(`.rc .tm[data-id="${rId}"]`);rTIT?(cls=Array.from(rTIT.classList).find(c=>c.startsWith('tm')&&c.length===3),cls||(cls=(typeStyles[rN.type]||typeStyles.default).cssClass)):cls=(typeStyles[rN.type]||typeStyles.default).cssClass;return`<span class="tm ${cls}" data-id="${rId}" title="点击查看解释">${rN.t}</span>`}).join('、 ');h+='</p>'}expEl.innerHTML=h+'</div>';MathJax?.typesetPromise?.([expEl]).catch(err=>console.error('MathJax typeset error:',err))}else expEl.innerHTML='<p class="ph">未找到此术语的解释。</p>'}
function isVis(el){const rect=el.getBoundingClientRect();return rect.top>=0&&rect.left>=0&&rect.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&rect.right<=(window.innerWidth||document.documentElement.clientWidth)}
function clrExpl(){actT&&actT.classList.remove('active');actT=null;clrMHi();if(selectedLabelElement){selectedLabelElement.style.fontWeight='normal';selectedLabelElement.style.fill=originalLabelFill;selectedLabelElement=null;originalLabelFill=''}expEl.innerHTML='<p class="ph">点击指令中的高亮术语或图谱中的节点/关系查看相关解释。</p>'}
const firstT=qs('.rc .tm.tmc[data-id]');allTs.forEach(s=>s.addEventListener('click',function(){this===actT&&expEl.querySelector('.ei h3')?.textContent===notes[this.dataset.id]?.t?clrExpl():shwExpl(this.dataset.id)}));
expEl.addEventListener('click',e=>{const t=e.target.closest('.tm'),b=e.target.closest('.gsb');if(t?.dataset.id){const curExplH3=expEl.querySelector('.ei h3');notes[t.dataset.id]&&curExplH3&&curExplH3.textContent===notes[t.dataset.id].t?(qs(`.rc .tm.active[data-id="${t.dataset.id}"]`)?clrExpl():(shwExpl(t.dataset.id,1),expEl.parentElement.scrollTop=0)):(shwExpl(t.dataset.id,1),expEl.parentElement.scrollTop=0)}else b?.dataset.st&&window.open(`https://www.google.com/search?q=${encodeURIComponent(b.dataset.st)}`,'_blank','noopener,noreferrer')});
expEl.addEventListener('mouseover',e=>{const targetEl=e.target.closest('.tm');if(targetEl?.dataset.id&&targetEl.parentElement?.tagName==='P'&&targetEl.parentElement.firstChild?.tagName==='STRONG'&&targetEl.parentElement.firstChild.textContent.includes('相关概念')){mkPop();hidePopTimeout&&clearTimeout(hidePopTimeout);const id=targetEl.dataset.id,d=notes[id],sT=d?d.t:targetEl.textContent.trim();srchPop.dataset.st=sT;srchPop.querySelector('span').textContent=`搜索 "${sT.length>18?sT.substring(0,16)+'...':sT}"`;srchPop.classList.remove('vis');const r=targetEl.getBoundingClientRect(),popW=srchPop.offsetWidth,popH=srchPop.offsetHeight;let l=r.left+r.width/2-popW/2,t=r.top-popH-POPUP_Y_OFF;l<POPUP_Y_OFF&&(l=POPUP_Y_OFF);l+popW>innerWidth-POPUP_Y_OFF&&(l=innerWidth-popW-POPUP_Y_OFF);t<POPUP_Y_OFF&&(t=r.bottom+POPUP_Y_OFF,t+popH>innerHeight-POPUP_Y_OFF&&(t=r.top+r.height/2-popH/2));srchPop.style.left=`${l}px`;srchPop.style.top=`${t}px`;srchPop.classList.add('vis')}});
expEl.addEventListener('mouseout',e=>{const targetEl=e.target.closest('.tm');targetEl?.dataset.id&&targetEl.parentElement?.tagName==='P'&&targetEl.parentElement.firstChild?.tagName==='STRONG'&&targetEl.parentElement.firstChild.textContent.includes('相关概念')&&srchPop&&(hidePopTimeout&&clearTimeout(hidePopTimeout),hidePopTimeout=setTimeout(()=>{srchPop.matches(':hover')||srchPop.classList.remove('vis')},200))});
mapO.addEventListener('click',e=>{const target=e.target;let nodeElement=null,currentElementForNodeSearch=target;while(currentElementForNodeSearch&¤tElementForNodeSearch!==mapO){if(currentElementForNodeSearch.matches?.('g.node[id^="node-"]')){nodeElement=currentElementForNodeSearch;break}currentElementForNodeSearch=currentElementForNodeSearch.parentNode}if(nodeElement){if(selectedLabelElement){selectedLabelElement.style.fontWeight='normal';selectedLabelElement.style.fill=originalLabelFill;selectedLabelElement=null;originalLabelFill=''}const id=nodeElement.id.substring(5);if(notes[id]&&!notes[id].hideFromGraph&&nodeElement.dataset.ia!=="false"){const curExplH3=expEl.querySelector('.ei h3');actMId===nodeElement.id&&curExplH3&¬es[id]&&curExplH3.textContent===notes[id].t?clrExpl():(shwExpl(id,1),expEl.parentElement.scrollTop=0)}return}if(target.localName==='text'){const parentG=target.parentNode;if(parentG?.localName==='g'&&parentG.classList.contains('edge')){const labelText=target.textContent.trim();if(labelText){actT&&(actT.classList.remove('active'),actT=null);clrMHi();if(selectedLabelElement===target){target.style.fontWeight='normal';target.style.fill=originalLabelFill;selectedLabelElement=null;originalLabelFill='';clrExpl();return}selectedLabelElement&&selectedLabelElement!==target&&(selectedLabelElement.style.fontWeight='normal',selectedLabelElement.style.fill=originalLabelFill);originalLabelFill=target.style.fill||target.getAttribute('fill')||'var(--text-pri)';target.style.fontWeight='bold';target.style.fill='var(--brand)';selectedLabelElement=target;let html=`<div class="ei"><div class="eih"><h3>关系类型: ${labelText}</h3><button type="button" class="gsb" data-st="${labelText.replace(/"/g,'"')}" title="用 Google 搜索 '${labelText.replace(/"/g,'"')}'">${gIcon}</button></div><p>此标签描述了图谱中两个概念之间的关系类型。</p><p>您可以使用搜索按钮搜索关于“<strong>${labelText}</strong>”的更多信息。</p></div>`;expEl.innerHTML=html;MathJax?.typesetPromise?.([expEl]).catch(err=>console.error('MathJax typeset error:',err));expEl.parentElement.scrollTop=0}}}});
const pzWheel=e=>{pnz?.zoomWithWheel&&(e.preventDefault(),pnz.zoomWithWheel(e))};
function updLBtn(){lytB.textContent=curLyt==='TB'?'LR':'TB';lytB.title=`切换到 ${curLyt==='TB'?'LR':'TB'} 布局`}updLBtn();
async function rndrMap(rd){if(!viz||!mapO){!viz&&mapO&&!mapO.querySelector('p[style*="color:red"]')&&(mapO.innerHTML='<p style="color:red;font-size:.8em;padding:10px;">错误：概念图谱库 (Viz.js) 未初始化，无法渲染图谱。</p>');return}lytB.disabled=!0;dlB&&(dlB.disabled=!0);mapO.classList.add('ld');lytB.innerHTML='<svg viewBox="0 0 24 24" style="width:1.1em;height:1.1em;fill:currentColor"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" opacity=".3"/><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg> <span>...</span>';if(selectedLabelElement){selectedLabelElement=null;originalLabelFill=''}const dotStr=genD(rd,notes,rdTIds);try{const svgRend=await viz.renderSVGElement(dotStr);mapO.innerHTML='';mapO.appendChild(svgRend);const activeTermId=actT?actT.dataset.id:null;activeTermId&¬es[activeTermId]&&!notes[activeTermId].hideFromGraph?hiMNode(activeTermId):actMId&&(notes[actMId.substring(5)]&&!notes[actMId.substring(5)].hideFromGraph?hiMNode(actMId.substring(5)):clrMHi());const svgCln=svgRend.cloneNode(!0);zDisp.innerHTML='';zDisp.appendChild(svgCln);const pzEl=zDisp.querySelector('svg');if(pnz?.destroy){const oldPnz=pnz.getPan()?.parentElement;oldPnz&&oldPnz.removeEventListener('wheel',pzWheel);pnz.destroy();pnz=null}pzEl&&(pnz=Panzoom(pzEl,{maxZoom:10,minZoom:.1,contain:'outside',canvas:!0,duration:200,easing:'ease-out'}),zDisp.addEventListener('wheel',pzWheel,{passive:!1}))}catch(err){console.error("Error rendering Map SVG:",err);mapO.innerHTML=`<p style="color:red;font-size:.8em;padding:10px;">概念图渲染失败: ${err.message}</p>`}finally{curLyt=rd;updLBtn();lytB.disabled=!1;dlB&&(dlB.disabled=!1);mapO.classList.remove('ld')}}
viz?rndrMap(curLyt).then(()=>{firstT?.dataset.id&&shwExpl(firstT.dataset.id)}):firstT?.dataset.id&&shwExpl(firstT.dataset.id);
lytB.addEventListener('click',()=>rndrMap(curLyt==='TB'?'LR':'TB'));
zmB.addEventListener('click',()=>{zModal.classList.add('vis');pnz?.reset?.({animate:!1});clzmB.focus();pfBtn&&(pfBtn.style.display='none')});
dlB?.addEventListener('click',dnldMap);function hidZm(){zModal.classList.remove('vis');pfBtn&&(pfBtn.style.display='flex')}clzmB.addEventListener('click',hidZm);
zModal.addEventListener('click',e=>{e.target===zModal&&hidZm()});document.addEventListener('keydown',e=>{e.key==='Escape'&&zModal.classList.contains('vis')&&hidZm()});
const fsIconE=pfBtn.querySelector('.ie'),fsIconC=pfBtn.querySelector('.ic');
function tglFs(){const doc=document;!doc.fullscreenElement&&!doc.mozFullScreenElement&&!doc.webkitFullscreenElement&&!doc.msFullscreenElement?(doc.documentElement.requestFullscreen?doc.documentElement.requestFullscreen():doc.documentElement.mozRequestFullScreen?doc.documentElement.mozRequestFullScreen():doc.documentElement.webkitRequestFullscreen?doc.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT):doc.documentElement.msRequestFullscreen&&doc.documentElement.msRequestFullscreen()):doc.exitFullscreen?doc.exitFullscreen():doc.mozCancelFullScreen?doc.mozCancelFullScreen():doc.webkitExitFullscreen?doc.webkitExitFullscreen():doc.msExitFullscreen&&doc.msExitFullscreen()}
function updFsBtn(){const doc=document;doc.fullscreenElement||doc.mozFullScreenElement||doc.webkitFullscreenElement||doc.msFullscreenElement?(fsIconE.style.display='none',fsIconC.style.display='block',pfBtn.title="退出全屏"):(fsIconE.style.display='block',fsIconC.style.display='none',pfBtn.title="全屏")}
pfBtn&&(pfBtn.style.display='flex',pfBtn.addEventListener('click',tglFs),['fullscreenchange','webkitfullscreenchange','mozfullscreenchange','MSFullscreenChange'].forEach(evt=>document.addEventListener(evt,updFsBtn)),updFsBtn())});</script>
</body>
</html>
笔者自己的尝试：
点击不同的关键词按钮，就会对这个关键词进行解释
3.3 文档变思维导图
来自：https://linux.do/t/topic/722266
二开上面的prompt，仍然需要使用google ai studio
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>深度概念思维导图助手指令 (ECharts)</title><!-- ECharts 核心库 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js" defer></script><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"><style>html,body{height:100%;margin:0;scroll-behavior:smooth}body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.7;background-color:#f8faff;color:#374151;padding:10px;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.container{max-width:1200px;margin:10px auto;padding:20px;background-color:#fff;border-radius:.45rem;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.06)}.material-icons-outlined{vertical-align:middle;font-size:1.15em;margin-right:.3em;line-height:1}h1>.material-icons-outlined,h2>.material-icons-outlined{font-size:1.1em;margin-right:.4em;color:#0d6efd} h3>.material-icons-outlined,h4>.material-icons-outlined,h5>.material-icons-outlined{font-size:1.1em;margin-right:.4em;color:#495057} h1,h2,h3,h4,h5{color:#212529;margin:1.8em 0 1em;font-weight:600;display:flex;align-items:center;line-height:1.3}h1{font-size:2.5rem;letter-spacing:-.6px;border-bottom:1px solid #dee2e6;padding-bottom:.5em;margin:.0 0 .9em}h2{font-size:2rem;border-bottom:1px solid #e9ecef;padding-bottom:.55em}h3{font-size:1.6rem}h4{font-size:1.3rem;color:#495057}h5{font-size:1.1rem;color:#212529}.text-primary{color:#0d6efd}.text-secondary{color:#6c757d}.text-accent1{color:#17a2b8}.text-accent2{color:#198754}.text-accent3{color:#ffc107}.text-danger{color:#dc3545;font-weight:bold}.text-warning{color:#fd7e14;font-weight:bold}.text-highlight-green{color:#20c997;font-weight:600}.text-highlight-blue{color:#339AF0;font-weight:600}.text-highlight-purple{color:#AE3EC9;font-weight:600}p{margin-bottom:1.4em;color:#495057;font-size:1.05rem}strong,.strong-emphasis{font-weight:600;color:#0d6efd} .prompt-container .strong-emphasis{color:#0a58ca} :not(pre)>code{font-family:"Fira Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;background-color:#e9ecef;padding:.2em .4em;border-radius:.25rem;font-size:.9em;color:#d63384} .prompt-container{background-color:#f8f9fa;border:1px solid #ced4da;border-radius:.45rem;padding:25px;margin-bottom:25px;box-shadow:0 3px 8px rgba(0,0,0,.04)}.prompt-container>h2:first-of-type{margin-top:1em}.prompt-container h2,.prompt-container h3,.prompt-container h4,.prompt-container h5{color:#343a40;border-bottom-color:#ced4da}.prompt-container h2>.material-icons-outlined,.prompt-container h5>.material-icons-outlined{color:#495057}.prompt-container h2{font-size:1.8rem}.prompt-container h3{font-size:1.5rem;margin-top:2.2em}.prompt-container h4{font-size:1.2rem;margin-top:1.8em}.prompt-container h5{font-size:1.05rem;margin:1.8em 0 1em;padding-bottom:.3em;border-bottom:1px solid #dee2e6}.prompt-container p,.prompt-container li{color:#495057;font-size:1.05rem}.prompt-container .mandatory-requirement{font-weight:bold;color:#842029;padding:12px 18px;border:2px solid #dc3545;background-color:#f8d7da;border-radius:.45rem;display:flex;align-items:center;margin:1.2em 0}.prompt-container .mandatory-requirement .material-icons-outlined{color:#dc3545;font-size:1.6em;margin-right:.6em;flex-shrink:0}.prompt-container ul{list-style-type:none;padding-left:0}.prompt-container ul li{margin-bottom:.8em;padding-left:1.5em;position:relative}.prompt-container ul li .material-icons-outlined{position:absolute;left:0;top:4px;font-size:1.25em;color:#0d6efd;margin-right:.5em} .prompt-container ul li:has(.material-icons-outlined){padding-left:2em}.prompt-container strong{color:#0a58ca} .prompt-container .guideline-item { margin-bottom: 1em !important; padding-left: 2.2em !important; }.prompt-container .guideline-item .material-icons-outlined { color: #198754 !important; font-size: 1.3em !important; top: 3px !important; left: 0px !important;}.prompt-container .guideline-item ul { margin-top: 0.5em; padding-left: 1em;}.prompt-container .guideline-item ul li { font-size: 0.95em; color: #5a6268; margin-bottom: 0.4em;}.echarts-container {width: 100%;max-width: 1000px; /* Wider for deeper trees */height: 600px; /* Taller for deeper trees */margin: 25px auto;padding: 20px;box-sizing: border-box;background-color: #ffffff;border: 1px solid #dee2e6;border-radius: .45rem;box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.05);display: flex; justify-content: center;align-items: center;}.prompt-container .echarts-container { margin: 30px 0; }@media (max-width:992px){ /* Adjusted breakpoint */.echarts-container { height: 550px; }}@media (max-width:768px){body{padding:10px;font-size:.96rem}.container{padding:15px;margin:10px auto}h1{font-size:1.9rem}h2{font-size:1.5rem}h3{font-size:1.25rem}.echarts-container { height: 500px; padding: 15px; }}@media (max-width:480px){body{padding:5px}.container{padding:10px;margin:5px auto}h1{font-size:1.6rem}h2{font-size:1.3rem}h3{font-size:1.1rem}.prompt-container p,.prompt-container li{font-size:1rem}.echarts-container { height: 450px; padding: 10px; }}</style></head><body><div class="container"><h1><span class="material-icons-outlined" aria-hidden="true">psychology_alt</span> <span class="text-primary">深度概念思维导图助手</span> <span class="text-secondary">高级指令</span></h1><div class="prompt-container"><h2><span class="material-icons-outlined" aria-hidden="true">checklist_rtl</span>思维导图生成核心准则 (深度强化版)</h2><p class="mandatory-requirement"><span class="material-icons-outlined" aria-hidden="true">error_outline</span> <span>绝对强制性要求：你的每一个回答都必须是一个结构完整、语法有效的 HTML 文档。 这意味着从 <code><!DOCTYPE html></code> 开始，到 <code></html></code> 结束，所有内容都必须包含在这个 HTML 结构内，HTML代码必须放到markdown代码块中，必须用“<code>```</code>”符号。不要加注释。</span></p><p>在遵循上述<strong class="text-danger">绝对强制性要求</strong>的前提下，所有思维导图的生成还<strong class="text-danger">必须严格遵守</strong>以下准则：</p><h3>1. 内容构建准则</h3><ul><li class="guideline-item"><span class="material-icons-outlined" aria-hidden="true">share</span><strong>严禁照抄目录结构:</strong> 思维导图的<strong class="text-highlight-purple">根节点和主要分支绝对不能简单对应原始文本的章节号、标题或小节编号</strong>。必须从文本内容中<strong class="strong-emphasis">独立提炼核心主题和概念</strong>作为导图的骨架。</li><li class="guideline-item"><span class="material-icons-outlined" aria-hidden="true">science</span><strong>绝对聚焦纯粹概念:</strong> <strong class="text-highlight-purple">彻底移除所有具体的实例、例题、习题、练习、案例分析、代码片段或步骤性演练</strong>。只保留对核心概念、原理、定义、特性、分类、影响因素、相关理论等的阐述和组织。</li><li class="guideline-item"><span class="material-icons-outlined" aria-hidden="true">hub</span><strong>构建真实的逻辑层级:</strong> 思维导图的结构<strong class="strong-emphasis">必须反映概念之间内在的、真实的逻辑关系</strong> (如：总分、因果、并列、递进、分类、属性归属等)，而非原始文本的叙述顺序。</li><li class="guideline-item"><span class="material-icons-outlined" aria-hidden="true">density_large</span><strong>追求极致深度与丰富性:</strong><ul><li><strong class="text-highlight-purple">信息密度最大化:</strong> 每一个概念节点都<strong class="strong-emphasis">必须尽可能地深入挖掘和扩展</strong>其相关的子概念、属性、构成要素、关键特征、优缺点、适用条件、与其他概念的关联等。</li><li><strong class="text-highlight-purple">构建极深层级:</strong> <strong class="strong-emphasis">目标是创建具有显著深度（例如，至少4-6层，甚至更多，只要逻辑上合理）的多层级结构</strong>。即使是最末梢的叶子节点，如果仍能逻辑地细分或列举其组成部分/特性，就应继续展开。</li><li><strong class="text-highlight-purple">避免空泛节点:</strong> 严禁仅有标题式的、过于简略的节点。每个节点都应承载具体的、有价值的信息。</li></ul></li><li class="guideline-item"><span class="material-icons-outlined" aria-hidden="true">unfold_more_double</span><strong>强制可交互展开/折叠:</strong> 所有包含子节点的父节点都<strong class="strong-emphasis">必须能通过点击进行展开和折叠操作</strong>，以便用户按需探索不同层级的细节。</li></ul><h3>2. 技术实现与输出原则</h3><ul><li><span class="material-icons-outlined" aria-hidden="true">memory</span><strong>技术核心:</strong> <strong class="strong-emphasis">必须使用 ECharts 的 `tree` 系列</strong>生成思维导图。</li><li><span class="material-icons-outlined" aria-hidden="true">code_off</span><strong>格式与嵌入:</strong> 最终输出<strong class="strong-emphasis">必须是单一、完整的 HTML 文档</strong>，所有 CSS <strong class="strong-emphasis">必须</strong>嵌入在 <code><style></code> 标签内，JavaScript <strong class="strong-emphasis">必须</strong>嵌入在 <code><script></code> 标签内。</li><li><span class="material-icons-outlined" aria-hidden="true">devices_fold</span><strong>响应式设计:</strong> 布局与内容<strong class="strong-emphasis">必须</strong>适应不同屏幕尺寸。</li><li><span class="material-icons-outlined" aria-hidden="true">palette</span><strong>视觉优化:</strong> <strong class="strong-emphasis">必须</strong>使用清晰的配色方案、合适的节点形状和标签样式，以增强可读性和美观性。不同层级或类型的概念可使用不同颜色或符号区分。</li><li><span class="material-icons-outlined" aria-hidden="true">settings_ethernet</span><strong>ECharts `tree` 配置要点:</strong><ol style="padding-left:20px;list-style-type:lower-alpha; margin-top:0.5em;"><li><code>data</code>: <strong class="text-highlight-purple">最关键！</strong> 严格按照上述“内容构建准则”（尤其是深度和丰富性要求）生成纯概念的、层级极深、逻辑清晰的嵌套数据对象。</li><li><code>layout</code>, <code>orient</code>: 灵活选择，确保深层结构清晰展示。</li><li><code>initialTreeDepth</code>: <strong class="text-highlight-blue">建议设置为 2 或 3</strong>，以在初次加载时展现一定的结构深度，同时避免信息过载。</li><li><code>expandAndCollapse: true</code>: <strong class="text-highlight-purple">确保开启</strong>。</li><li><code>roam: true</code>: 允许缩放和平移，对深层导图尤为重要。</li><li><code>label.width</code>, <code>label.overflow</code>: 对深层结构中可能出现的长标签进行处理。</li><li><code>symbolSize</code>, <code>lineStyle</code>: 细致调整，以适应增加的节点数量和层级。</li><li><code>emphasis: { focus: 'descendant' }</code>: 推荐使用。</li></ol></li></ul><h5><span class="material-icons-outlined" style="color:#198754" aria-hidden="true">model_training</span>ECharts 思维导图示例 (极致深度概念化 - 正交布局)</h5><p>此示例旨在演示如何将一个知识领域构建为<strong class="text-danger">具有极高层级深度和信息密度</strong>的纯概念思维导图，并<strong class="text-danger">完全避免目录结构和实例内容</strong>。</p><div id="echarts-mindmap-deep-conceptual" class="echarts-container"><p style="padding:20px;text-align:center;color:#6c757d">深度概念思维导图加载中...</p></div></div></div><script>document.addEventListener('DOMContentLoaded', () => {const mindmapDeepConceptualContainer = document.getElementById('echarts-mindmap-deep-conceptual');if (mindmapDeepConceptualContainer && typeof echarts !== 'undefined') {try {mindmapDeepConceptualContainer.innerHTML = ''; const myChartDeepConceptual = echarts.init(mindmapDeepConceptualContainer);// --- 极致深度概念化数据结构示例 ---const dataDeepConceptual = {name: "高级算法设计与分析", itemStyle: { color: '#0d6efd', borderColor: '#0a58ca', borderWidth: 2 },symbolSize: 24,label: { fontSize: 14, fontWeight: 'bold', color: '#fff' },children: [{name: "分治策略 (Divide & Conquer)", itemStyle: { color: '#17a2b8' }, symbolSize: 20,children: [{ name: "核心思想", itemStyle: { color: '#6cc0ce' },children: [{ name: "分解 (Divide)", itemStyle: {color: '#aedde5'}, children: [ {name: "子问题独立性"}, {name: "规模减小"} ] },{ name: "解决 (Conquer)", itemStyle: {color: '#aedde5'}, children: [ {name: "递归基准条件"} ] },{ name: "合并 (Combine)", itemStyle: {color: '#aedde5'}, children: [ {name: "子解合并成本"} ] }]},{ name: "复杂度分析模型", itemStyle: { color: '#6cc0ce' },children: [{ name: "主定理 (Master Theorem)", itemStyle: {color: '#aedde5'}, children:[{name: "三种情况"}, {name: "适用条件与限制"}] },{ name: "递归树方法", itemStyle: {color: '#aedde5'} }]},{name: "典型应用场景（概念性）",itemStyle: {color: '#6cc0ce'},children: [{name: "排序算法领域", itemStyle: {color: '#aedde5'}, children: [{name: "归并排序思想"}, {name: "快速排序思想"}]},{name: "查找问题", itemStyle: {color: '#aedde5'}, children: [{name: "二分搜索本质"}]},{name: "几何问题", itemStyle: {color: '#aedde5'}, children:[{name: "最近点对问题思路"}]}]}]},{name: "动态规划 (Dynamic Programming)", itemStyle: { color: '#198754' }, symbolSize: 20,children: [{ name: "基本要素", itemStyle: { color: '#72bca2' },children: [{ name: "最优子结构", itemStyle: {color: '#b6dccf'}, children: [{name: "定义与判断"}, {name: "与贪心选择的区别"}]},{ name: "重叠子问题", itemStyle: {color: '#b6dccf'}, children: [{name: "识别方法"}, {name: "解决策略 (备忘录/自底向上)"}]},{ name: "状态转移方程", itemStyle: {color: '#b6dccf'}, children:[{name:"构建核心"}, {name:"边界条件设定"}]}]},{ name: "实现方式", itemStyle: { color: '#72bca2' },children: [{ name: "自顶向下 (备忘录法)", itemStyle: {color: '#b6dccf'} },{ name: "自底向上 (迭代法)", itemStyle: {color: '#b6dccf'} }]},{name: "常见模型（概念性）",itemStyle: { color: '#72bca2' },children: [{name: "背包问题类"}, {name: "最长子序列类"}, {name: "矩阵链乘类"}, {name: "路径规划类"}]}]},{name: "贪心算法 (Greedy Algorithms)", itemStyle: { color: '#ffc107' }, symbolSize: 20,children: [{ name: "核心特征：贪心选择性质", itemStyle: { color: '#ffd567' }, children: [{name: "定义与证明思路"}, {name:"局部最优导出全局最优"}]},{ name: "与动态规划的比较", itemStyle: { color: '#ffd567' } },{ name: "设计要素", itemStyle: { color: '#ffd567' },children: [{name: "候选集"}, {name:"选择函数"}, {name:"可行解函数"}, {name:"目标函数"}]},{name: "适用场景辨析（概念性）",itemStyle: { color: '#ffd567' },children: [{name: "活动选择问题"}, {name:"霍夫曼编码思想"}, {name:"部分背包问题"}]}]},{name: "网络流 (Network Flow)",itemStyle: { color: '#fd7e14' }, symbolSize: 20,children: [{ name: "基本概念", itemStyle: {color: '#febda8'}, children:[{name:"流网络 (s-t图)"}, {name:"容量限制"}, {name:"流量守恒"}, {name:"可行流与最大流"}] },{ name: "核心定理：最大流最小割定理", itemStyle: {color: '#febda8'}, children:[{name:"割的定义"},{name:"定理内容与证明概要"}] },{ name: "经典算法思想（概念性）", itemStyle: {color: '#febda8'}, children:[{name:"Ford-Fulkerson方法"}, {name:"增广路径概念"}, {name:"Edmonds-Karp (BFS增广)"} , {name:"Dinic算法思想"}]},{ name: "应用领域（概念性）", itemStyle: {color: '#febda8'}, children:[{name:"二分图匹配"}, {name:"任务分配问题"}]}]}]};// --- End of Deep Conceptual Data ---const optionDeepConceptual = {title: { text: '极致深度概念思维导图 (正交 LR)', left: 'center', textStyle: { fontSize: 16, fontFamily: 'Inter, sans-serif', color: '#212529' } },tooltip: { trigger: 'item', triggerOn: 'mousemove', formatter: '{b}',backgroundColor: 'rgba(40,40,40,0.85)',borderColor: '#777',borderWidth: 1,textStyle: { color: '#fff', fontSize: 11 }},series: [{type: 'tree', data: [dataDeepConceptual],top: '5%', bottom: '5%', left: '7%', right: '15%', // Adjusted for potential widthlayout: 'orthogonal', orient: 'LR', symbol: 'roundRect', symbolSize: function(value, params){// Adjust size based on depth or if it's a leaflet depth = 0;let curr = params.data;// while(curr.parent) { depth++; curr = curr.parent; } // ECharts data doesn't directly have parent ref here// A simpler proxy: if it has children, it's larger.return (params.data.children && params.data.children.length > 0) ? (params.data.symbolSize || 18) : 12;},roam: true,label: { show: true, position: 'inside', verticalAlign: 'middle', align: 'center', fontSize: 9, fontFamily: 'Inter, sans-serif', color: function(params) {const nodeColor = params.data.itemStyle && params.data.itemStyle.color ? params.data.itemStyle.color : '#0d6efd';const r = parseInt(nodeColor.slice(1,3), 16);const g = parseInt(nodeColor.slice(3,5), 16);const b = parseInt(nodeColor.slice(5,7), 16);return ((0.299*r + 0.587*g + 0.114*b) / 255) > 0.6 ? '#212529' : '#f8f9fa';},overflow: 'truncate', width: function(params){ // Smaller width for deeper nodes if neededreturn (params.data.children && params.data.children.length > 0) ? 65 : 50;},formatter: function (params) { return params.name; }},leaves: { label: { position: 'right', offset:, align:'left', color: '#343a40',fontSize: 8.5,width: 80 }, itemStyle: { opacity: 0.9 },symbolSize: 10},lineStyle: { color: '#adb5bd', width: 1.2, curveness: 0 }, edgeShape: 'polyline', initialTreeDepth: 2, // Initial expansion depthexpandAndCollapse: true,animationDurationUpdate: 500,emphasis: { focus: 'descendant', lineStyle: {width: 2, color: '#0a58ca'},itemStyle: { borderColor: '#0a58ca', borderWidth: 2 }}}]};myChartDeepConceptual.setOption(optionDeepConceptual);window.addEventListener('resize', () => { myChartDeepConceptual.resize(); });} catch(e) { console.error("Deep Conceptual ECharts Mindmap failed:", e); if (mindmapDeepConceptualContainer) {mindmapDeepConceptualContainer.innerHTML = '<p style="color:#dc3545;text-align:center;font-weight:bold;padding:20px;">深度概念思维导图加载失败。错误：' + e.message + '</p>';}}} else if (!mindmapDeepConceptualContainer) { console.warn("ECharts container 'echarts-mindmap-deep-conceptual' not found.");} else { if (mindmapDeepConceptualContainer) {mindmapDeepConceptualContainer.innerHTML = '<p style="color:#fd7e14;text-align:center;font-weight:bold;padding:20px;">ECharts 库未加载，思维导图无法显示。</p>'; }}});</script></body></html>
笔者的效果：
确实可以生成思维导图以及可交互，就是字体大小不是特别适配。
4 sandun大佬：年报变HTML与PPT
来自：把小米379页的年报转为可视化网页，附完整提示词
4.1 HTML Prompt
原作者的效果图，输入年报，输出的是一些数据卡片：
作者仍然使用的是gemini，在ai studio：
https://aistudio.google.com/
生成HTML的prompt:
基于提供的源文档（例如，财务报告、分析报告、产品信息），生成一个单一、完整、可直接运行的 HTML 文件。此文件必须动态地、可视化地呈现文档中的核心发现、关键数据和结构化信息，并严格遵守以下设计和实现要求：
**核心要求：**
1. **单一 HTML 文件输出：*** 最终交付物必须是**一个 .html 文件**，包含所有必要的 HTML 结构、CSS 样式（通过 `<style>` 标签或内联 Tailwind 类）和 JavaScript（通过 `<script>` 标签，包括 CDN 引入和初始化逻辑）。* 不允许使用外部 CSS 或 JS 文件，只允许在 HTML 文件内部使用 CDN 链接。
**视觉设计与布局：**
1. **整体风格：*** 参考 Apple 官网及发布会风格——简洁、现代，具有清晰的信息层级。
2. **布局核心：卡片式布局*** **主卡片 (Main Cards)：** 用于主要版块（如执行摘要、财务状况、业务分部等）。使用大尺寸、风格明确的卡片样式。* **迷你卡片 / 要点卡片 (Mini-Cards / Point-Cards) (关键布局元素)：*** **目的：** 专门用于拆分和展示包含多个要点、风险、建议、特性、步骤或并行信息（例如，“关键发现”、“风险”、“建议”、“特性”）的段落或列表。* **AI 任务：** 深入理解这些内容的语义。提取每个逻辑上独立、并列的核心要点。将每个要点转换为一个独立的迷你卡片。* **布局：** 将这些迷你卡片排列在一个响应式网格中（例如，`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4`）。在中大型屏幕上，目标是每行排列 3-5 个迷你卡片，以实现结构化、易于扫视的信息密度。* **嵌套布局：** 主卡片可以包含迷你卡片网格。
3. **背景：*** 纯黑页面背景 (`#000000`)。
4. **高亮颜色*** **自动品牌色：** 尝试识别内容中主要品牌（例如，“小米”、“华为”）。如果成功，则使用其官方主 VI 色（例如，小米橙 `#FF6900`）作为**唯一的核心高亮色**。* **备选方案：** 如果品牌/颜色识别失败，则使用专业的科技蓝 (`#00AEEF`) 或亮橙色 (`#FFA500`)。* **应用：** 统一应用于关键文本（标题、核心数据）、大的强调数字、图标、图表元素、可选边框和渐变色。
5. **科技感渐变 (Tech Gradient)：*** **仅应用于高亮色：** 创建从 `rgba(高亮色, 0.7)` 到 `rgba(高亮色, 0.3)` 的透明度渐变。* **用途：** 用作卡片/区域、图表区域或文本背景的微妙底色。**禁止使用多色渐变**。
6. **卡片样式 (Card Styling)：*** **背景：** 所有卡片（主卡片和迷你卡片）均使用深灰色背景（例如 `#1a1a1a` 或 `#222222`）。* **圆角：** 主卡片使用较大圆角半径（`rounded-xl` 或 `rounded-2xl`），迷你卡片使用较小圆角半径（`rounded-lg`）。* **分隔：** 使用细微边框（`border: 1px solid #333;`）或适合暗黑模式的轻微阴影（`shadow-md` 或 `shadow-lg`）。
7. **主标题强化 (Main Title Enhancement)：*** 使主中文标题显著增大（例如，`text-5xl` 或 `text-6xl`, `font-bold`）。* 在其下方添加一个较小的、对应的英文标题（例如，`text-xl` 或 `text-lg`, `font-semibold`，颜色稍浅，如 `text-gray-300` 或 `text-gray-400`）。示例：“Xiaomi Corporation 2024 Annual Financial Report Analysis”。
**内容呈现与布局（核心优化）：**
1. **全面的基础数据：*** 准确提取并展示源文档中的所有关键信息、核心数据点（特别是财务数据、增长率、市场份额）、结论和分析。
2. **核心要点提取与卡片化（关键）：*** **语义理解：** 超越简单的句子分割。理解逻辑和语义，识别段落或列表**内部独立、并列的核心观点/元素**。* **转换：** 将每个提取出的核心要点转化为**一个独立的迷你卡片**。* **目标：** 将复杂信息解构成结构化、可视化的网格，使其成为易于扫视的单元。
3. **迷你卡片内部结构与细节（关键）：*** **结构优先级：*** **强调数字优先：** 如果核心要点包含一个关键、突出的数字/指标，则将该**数字/指标本身**作为顶部元素，使用超大、粗体字号（例如 `text-5xl` 或 `text-6xl`, `font-bold`，使用高亮色）。目的是为了最大化视觉冲击力。* **文本标题：** 如果核心要点是概念性的或数字是次要的，则使用一个**简洁、加粗的中文短语**（理想情况 3-5 个汉字）作为顶部元素，使用大字号（例如 `text-3xl` 或 `text-4xl`, `font-bold`，白色或高亮色）。* **支撑文本：** 在大的数字/标题下方，使用较小字号（例如 `text-sm`, `text-gray-400`）。* **当大元素是数字时：** 解释该数字代表什么（例如，“研发费用同比增长”，“营收额”，“市场份额排名”）并提供简要背景。* **当大元素是文本标题时：** 提供具体细节、解释、数据支撑或影响。* **可选双语副标题（选择性应用）：*** 在适合增强设计感的地方（尤其是在大的中文数字或文本标题下方），添加一个**非常简洁的英文短语**，使用小字号（例如 `text-xs` 或 `text-sm`）、常规字重和柔和的颜色（例如 `text-gray-500` 或 `text-gray-400`）。示例：“YoY Growth”，“Total Revenue”，“Market Share”。**审慎地应用**以增加视觉风格，而非死板地用于每个卡片。* **专注与简洁：** 严格遵守“**一个卡片，一个核心要点**”。大的元素和支撑文本都必须**高度简洁**。避免在单个迷你卡片中使用长句或包含多个观点。
4. **强烈的视觉层级：*** 利用显著的**字号差异**（例如，数字用 `text-5xl/6xl` vs 文本标题用 `text-3xl/4xl` vs 支撑文本用 `text-sm` vs 英文副标题用 `text-xs`）、**字重**（`font-bold` vs `font-normal`）和**颜色**（高亮色、白色、灰色系）来在主要信息（大数字/标题）和次要信息（支撑文本、英文副标题）之间创建清晰的视觉区分。
5. **语言策略：*** **主要语言：** 使用**中文或数字**承载核心信息、主标题（大的中文部分）和迷你卡片的大元素。确保它们在视觉上占主导地位（大字号、加粗）。* **次要/装饰性语言：** 使用**英文**作为主标题的副标题以及可选的、小的迷你卡片副标题。对这些元素使用较小字号和较低的强调度。如果源文档中存在英文术语，为确保技术准确性应予保留。
**图形元素与图表：**
1. **图标 (Font Awesome)：*** **来源：** 通过 CDN 引入 Font Awesome (v5/v6)。* **风格：** 偏好简洁、现代的**线框风格 (outline-style)** 图标。* **使用：** 放置于主标题附近，可选择性地（且需微妙地）用于迷你卡片内部（靠近标题处）、列表前缀等。**严格禁止使用 Emoji 作为功能性图标**。颜色应协调；关键图标可使用高亮色。
2. **数据可视化 (推荐 Chart.js)：*** **应用场景：** 用于展示趋势、增长率、构成（饼图/环形图）、比较（柱状图）等适合的数据 [引用：数据可视化最佳实践]。* **技术：** 通过 CDN 嵌入 Chart.js。* **位置：** 放置在讨论财务或业务分析的相关主卡片内部。* **样式：** 图表颜色必须与暗黑主题和高亮色保持一致。确保图表清晰、易读且响应式。
**技术与动画：**
1. **技术栈：*** HTML5, TailwindCSS 3+ (CDN), 原生 JavaScript (用于 Intersection Observer/图表初始化), Font Awesome (CDN), Chart.js (CDN)。
2. **动画 (CSS Transitions & Intersection Observer)：*** **触发：** 当元素（所有主卡片、所有迷你卡片、其他内容块）滚动进入视口时。* **效果：** 平滑、微妙的**淡入/向上滑动**效果（模仿 Apple 风格）。通过 JavaScript 的 `Intersection Observer API` 添加/移除 CSS 类来触发 `CSS Transitions` 实现。确保动画性能流畅。为网格项应用轻微延迟以产生交错效果。
3. **响应式设计：*** **强制要求**。使用 Tailwind 的响应式修饰符（特别是针对网格布局），确保在手机、平板和桌面设备上均具有出色的显示效果和可用性。
**最终输出：**
* 生成一个**单一、可运行的 .html 文件**，该文件精确实现了上述所有要求，特别注意**优先使用卡片布局**，**避免大段文字**，**核心要点提取到迷你卡片**、通过**更大的数字和选择性双语**实现的增强视觉层级，以及整体的**美学一致性**。
上述内容可以转化为PPT版本：
请你修改HTML文件，改成类似PPT的形式，每页都是16:9，可以滚动切换。注意放大文字大小，以适配16：9的页面尺寸
最后笔者将一份报告丢进去，生成的HTML：
PPT 版本其实也是一个HTML网页，截图几个
4.2 网友改良版
有一个改良版
# Role: Dynamic HTML Report Weaver## Profile
- language: Chinese (Primary Content & Large Titles/Numbers), English (Subtitles, Technical Terms)
- description: An expert AI specializing in transforming source documents (like financial reports, analyses, product info) into a single, dynamic, visually compelling HTML file. It focuses on an Apple-inspired aesthetic, leverages card-based layouts (especially mini-cards for key points), incorporates data visualizations, and ensures all dependencies (CSS, JS via CDN) are embedded within the single HTML output.
- background: Designed to distill complex information into accessible and engaging web-based presentations, understanding principles of information hierarchy, data visualization, and modern UI/UX design, particularly for dark-mode, high-impact interfaces.
- personality: Professional, precise, detail-oriented, aesthetically sensitive, focused on clarity, impact, and adherence to specifications.
- expertise: HTML5, CSS3 (TailwindCSS), JavaScript (DOM Manipulation, Intersection Observer, Chart.js), Data Extraction & Semantic Summarization, Information Architecture, UI/UX Design (Dark Mode, Card-Based Layouts, Apple Aesthetic), Responsive Web Design, Single-File Web Application Packaging.
- target_audience: Users needing to present complex data or findings in a sophisticated, easily shareable, web-based format without external dependencies.## Skills1. **Core Generation & Content Processing**- HTML Generation: Create valid, semantic HTML5 structures for reports.- CSS Styling (TailwindCSS & Inline): Apply TailwindCSS via CDN classes and necessary custom styles within `<style>` tags to achieve the specified visual design (dark mode, cards, typography, gradients).- JavaScript Implementation: Write clean, efficient JavaScript within `<script>` tags for dynamic behaviors (Intersection Observer animations), library initialization (Chart.js, Font Awesome), and DOM manipulation.- Single-File Packaging: Consolidate all HTML, CSS (via `<style>`/Tailwind classes), and JavaScript (via `<script>`, including CDN links) into one self-contained `.html` file.- Content Extraction & Structuring: Analyze source documents to accurately extract key sections, findings, data points, and logically independent, parallel concepts (for mini-cards).- Semantic Point Distillation: Understand the meaning of lists or paragraphs containing multiple distinct points and extract each point as a separate conceptual unit for mini-card representation.- Data Visualization (Chart.js): Generate appropriate Chart.js charts (bar, line, pie/doughnut) based on extracted data, ensuring correct data mapping and thematic styling.2. **Design & UX Implementation**- Apple Aesthetic Replication: Implement design principles inspired by Apple's website and presentations (minimalism, whitespace, clear typography, subtle animations).- Card Layout Mastery: Construct layouts primarily using main cards for sections and responsive grids of mini-cards for key points/features/risks.- Visual Hierarchy Creation: Utilize typography (size, weight), color (highlight, primary, secondary), and spacing to establish clear information priority, especially within mini-cards (large number/title emphasis).- Responsive Design Execution: Employ TailwindCSS responsive modifiers (`sm:`, `lg:`, etc.) to ensure optimal layout and readability across various screen sizes (mobile, tablet, desktop).- Brand Color Identification (Basic): Attempt to identify the primary brand mentioned in the content and use its official main VI color; use specified fallbacks if identification fails.- Icon Integration (Font Awesome): Select and embed appropriate Font Awesome icons (via CDN) using clean, outline styles, placed thoughtfully for enhancement.- Animation Implementation: Use JavaScript (Intersection Observer) and CSS Transitions to trigger subtle fade-in/slide-up animations as elements scroll into view.## Rules1. **Fundamental Output Requirements**:- Single File Mandate: The absolute final output MUST be a single `.html` file.- Embedded Styling: All CSS must be within the HTML file, either as TailwindCSS classes (via CDN link) or within `<style>` tags. No external `.css` files.- Embedded Scripting: All JavaScript must be within `<script>` tags in the HTML file, including initialization logic and CDN links for libraries (Tailwind, Chart.js, Font Awesome). No external `.js` files.- Valid HTML5: Generated code must be valid HTML5.2. **Design & Content Presentation**:- Strict Aesthetic Adherence: Follow the specified Apple-inspired design: black background (`#000000`), dark gray cards (`#1a1a1a` or `#222222`), large rounded corners for main cards, smaller for mini-cards.- Mandatory Card Usage: Structure content using main cards for sections. **Crucially, decompose lists or paragraphs containing multiple parallel key points, features, risks, or recommendations into a responsive grid of mini-cards.**- Mini-Card Formatting Priority: Structure mini-cards with a large, highlighted number (if applicable, `text-5xl/6xl`, highlight color) or a concise bold title (if conceptual, `text-3xl/4xl`, white/highlight color) at the top. Follow with smaller supporting text (`text-sm`, gray) and an optional, very small English subtitle (`text-xs/sm`, lighter gray). **One core idea per mini-card.**- Visual Hierarchy Enforcement: Strictly apply defined contrasts in font size, weight, and color to distinguish primary (large numbers/titles) from secondary information (supporting text, subtitles).- Single Highlight Color: Identify brand color or use fallback (`#00AEEF` or `#FFA500`). Use *only this color* for all highlights (text, numbers, icons, chart elements, gradients).- Tech Gradient Application: Use subtle transparency gradients derived *only* from the single highlight color (`rgba(highlight, 0.7)` to `rgba(highlight, 0.3)`) for subtle backgrounds where appropriate. **No multi-color gradients.**- Language Strategy Implementation: Use Chinese/Numbers for visually dominant elements (main titles, large numbers/titles in mini-cards). Use English for secondary elements (main title subtitle, optional mini-card subtitles, preserved technical terms).- Professional Iconography: Use Font Awesome (CDN) outline-style icons. Place strategically near titles or list items. Color appropriately (highlight for key icons). **No Emojis as functional icons.**3. **Technical & Behavioral Constraints**:- No External File Dependencies: Reiteration - absolutely no external `.css` or `.js` files linked locally.- Avoid Long Text Blocks: Aggressively break down information. Prioritize summarized, structured presentation in cards (especially mini-cards) over lengthy paragraphs.- Subtle Animations Only: Implement smooth, non-intrusive fade-in/slide-up animations on scroll using Intersection Observer and CSS Transitions. Apply slight stagger to grid items if possible.- Mandatory Responsiveness: Ensure the layout is fully responsive using TailwindCSS modifiers, adapting gracefully from mobile to large desktop screens. Grid columns for mini-cards must adjust (`1`, `2`, `3-5` based on screen size).## Workflows- **Goal**: To generate a single, self-contained, dynamically visualized HTML report from a provided source document, strictly adhering to the specified Apple-inspired aesthetic, card-based structure (with heavy use of mini-cards for key points), and technical constraints.
- **Step 1: Document Ingestion & Analysis**:- Receive and parse the source document.- Identify main thematic sections (e.g., Executive Summary, Financial Performance, Market Analysis, Product Features, Risks).- Extract key findings, conclusions, critical data points (especially quantitative data like financials, percentages, rankings).- **Critically analyze content for lists or paragraphs containing multiple distinct, parallel items (key discoveries, risks, suggestions, features, steps). Mark these for mini-card transformation.**- Attempt to identify the primary brand mentioned for color selection; determine fallback color if needed.
- **Step 2: Structural & Visual Planning**:- Outline the overall HTML `<body>` structure.- Map extracted sections to main cards (`<section>`, `<div>` styled as large cards).- **Plan the mini-card grids**: For each identified set of parallel items, design a responsive grid (`grid`, `grid-cols-*`, `gap-*`) to contain the mini-cards. Determine the content structure for each mini-card based on whether it's number-centric or title-centric.- Identify data suitable for visualization and select appropriate Chart.js chart types. Plan their placement within relevant main cards.- Select appropriate Font Awesome icons for titles or specific points.
- **Step 3: Code Generation (HTML, CSS, JS)**:- Generate the HTML structure, including semantic tags and container divs.- Embed CDN links for TailwindCSS, Font Awesome, and Chart.js in the `<head>`.- Apply TailwindCSS classes extensively for layout (Flexbox, Grid), spacing, colors (backgrounds, text, borders), typography (sizes, weights), card styling (padding, rounded corners, borders/shadows), and responsiveness.- Add custom CSS within `<style>` tags if needed for the specific tech gradient or minor adjustments not easily achievable with Tailwind alone.- Write JavaScript within `<script>` tags:* Implement the `Intersection Observer` logic to detect when cards/sections enter the viewport and add/remove CSS classes to trigger transition animations.* Initialize Chart.js instances with extracted data, configuring options for dark mode compatibility, responsiveness, and using the selected highlight color.
- **Step 4: Content Integration & Styling Refinement**:- Populate the generated HTML structure with the extracted text and data.- **Construct each mini-card precisely according to the rules**: Place the large number or title first, followed by supporting text and optional English subtitle, applying the correct Tailwind classes for size, weight, and color to enforce visual hierarchy.- Integrate selected Font Awesome icons.- Apply the main title enhancement (large Chinese title, smaller English subtitle).- Ensure consistent application of the highlight color and tech gradient where planned.
- **Step 5: Final Packaging & Output**:- Assemble all generated HTML, embedded CSS (Tailwind classes + `<style>` content), and embedded JavaScript (`<script>` content including CDN links) into a single string representing the final `.html` file content.- Ensure the output is exclusively the HTML code, ready to be saved as a `.html` file.- **Expected Result**: A single, valid `.html` file that, when opened in a browser, displays a visually polished, dynamic, and responsive report based on the source document, characterized by a dark theme, prominent use of main cards and mini-card grids for key information, data visualizations, subtle animations, and adherence to all specified design and technical constraints.## Initialization
作为 Dynamic HTML Report Weaver，你必须遵守上述Rules，按照Workflows执行任务。
试了一下也很不错：
