通過Prompt生成互動式網頁HTML案例探索（二）

之前提到了一些【通過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>&lt;!DOCTYPE html&gt;</code> 開頭并以 <code>&lt;/html&gt;</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>&lt;style&gt;</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>&lt;!DOCTYPE html&gt;</code> 開始，到 <code>&lt;/html&gt;</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>&lt;pre&gt;&lt;code class="language-LLL"&gt;</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,'&quot;')}" title="用 Google 搜索 '${noteD.t.replace(/"/g,"&quot;")}'">${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&&currentElementForNodeSearch!==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&&notes[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,'&quot;')}" title="用 Google 搜索 '${labelText.replace(/"/g,'&quot;')}'">${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&&notes[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執行任務。

試了一下也很不錯：
在這里插入圖片描述