From cccc1d5cd405360f8a151f62fbc61a16d7447044 Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Mon, 19 Jan 2026 12:22:02 +0800 Subject: [PATCH] feat: update prompt engineering docs and AI history demos --- .../appendix/ai-history/AiEvolutionDemo.vue | 731 +++++------------- .../ai-history/CombinatorialExplosionDemo.vue | 81 +- .../NeuralNetworkVisualizationDemo.vue | 686 ++++++++-------- .../ai-history/RuleBasedVsLearningDemo.vue | 519 ++++++++----- .../PromptTemplatesDemo.vue | 320 ++++++++ docs/.vitepress/theme/index.js | 2 + docs/zh-cn/appendix/prompt-engineering.md | 43 +- 7 files changed, 1297 insertions(+), 1085 deletions(-) create mode 100644 docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue index 537beac..05b7245 100644 --- a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue +++ b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue @@ -1,142 +1,78 @@ @@ -146,475 +82,226 @@ import { ref } from 'vue' const currentStage = ref(0) -const indexToRoman = (num) => { - const map = { 1: 'I', 2: 'II', 3: 'III', 4: 'IV' } - return map[num] || num -} - const stages = [ { - year: '1950s-1970s', - label: 'Symbolism', - title: 'The Dawn: Logic & Rules', - desc: 'AI started as "Symbolic AI". Scientists believed intelligence could be described by formal logic and rules. If we can write down all the rules of the world, a computer can be intelligent.', - icon: '♟️', - appTitle: 'Chess & Logic', + key: 'symbolic', + year: '1950s–1980s', + label: '符号主义', + title: '规则与逻辑推理（专家系统）', + desc: '相信“智能 = 规则 + 推理”。把专家经验写成 If/Then 规则与知识库。', + core: [ + '知识用“符号/规则”表达：If 条件 Then 结论', + '推理引擎按规则匹配、触发、推导', + '可解释：能指出用了哪条规则' + ], + pros: ['可解释性强', '在边界明确的垂直领域有效'], + cons: [ + '规则写不完（组合爆炸）', + '脆弱：世界稍变就失效', + '难处理不确定性与常识' + ], + examples: ['专家系统', 'MYCIN', '逻辑推理'], appDesc: - 'Programs could solve logic puzzles and play simple chess, but failed at "common sense" or recognizing a cat in a photo.' - }, - { - year: '1980s-1990s', - label: 'Expert Systems', - title: 'Knowledge Engineering', - desc: 'The era of "Expert Systems". We tried to hard-code human expertise (e.g., medical diagnosis rules) into databases. Useful for specific domains, but brittle and hard to maintain.', - icon: '🏥', - appTitle: 'MYCIN / Deep Blue', - appDesc: - 'Systems that could diagnose blood infections or beat Garry Kasparov at chess (Deep Blue, 1997), but still lacked true learning capability.' + '适合“规则明确”的任务（如部分诊断流程、合规校验），但遇到现实世界的灰度与噪声会迅速失效。' }, { + key: 'dl', year: '2010s', - label: 'Deep Learning', - title: 'Connectionism & Big Data', - desc: 'The breakthrough of Neural Networks. Inspired by the human brain, computers learned patterns from massive data instead of being told rules. AlexNet (2012) changed everything.', - icon: '🧠', - appTitle: 'AlphaGo & FaceID', + label: '深度学习', + title: '从数据中学习（连接主义）', + desc: '相信“智能 = 表示学习 + 统计优化”。用神经网络从大量数据里自动学特征与决策边界。', + core: [ + '用参数（权重）表示知识；通过优化让参数拟合数据', + '特征提取从“手写规则”变成“自动学习”', + '数据、算力、算法（GPU + 大数据 + 网络结构）共同推动' + ], + pros: ['强大的模式识别能力', '同一范式覆盖多任务（视觉/语音/推荐等）'], + cons: ['数据需求大', '可解释性较弱', '对分布外/对抗样本敏感'], + examples: ['AlexNet', 'ImageNet', 'AlphaGo'], appDesc: - 'AI learned to see (ImageNet), hear (Siri), and play Go (AlphaGo). It surpassed humans in specific perceptual tasks.' + '擅长“感知类”任务（图像、语音、推荐）；但对“为何这么判”解释不够直观，且对数据分布较敏感。' }, { + key: 'genai', year: '2020s+', - label: 'Generative AI', - title: 'Generative Intelligence (LLMs)', - desc: 'The Transformer architecture allowed AI to understand context and generate new content. AI moved from "classifying" (is this a cat?) to "creating" (draw a cat).', - icon: '✨', - appTitle: 'ChatGPT & Midjourney', + label: '生成式 AI', + title: '从“分类”到“生成”（大模型）', + desc: '用 Transformer 建模上下文关系，学习“下一 token”分布，从而能生成文本/代码/图像等新内容。', + core: [ + '统一接口：给提示词（prompt）→ 生成输出', + '能力来源：规模化预训练 + 指令微调/对齐', + '把很多任务“变成一个生成问题”' + ], + pros: ['通用性强（多任务）', '交互友好（自然语言接口）'], + cons: [ + '可能幻觉', + '安全与权限边界复杂', + '需要系统化评测与约束（格式/工具/检索）' + ], + examples: ['ChatGPT', 'GPT-4', 'Midjourney'], appDesc: - 'AI that can write code, poetry, paint images, and reason across multiple domains. A step towards AGI (General Intelligence).' + '更像“通用助手”：能写、能改、能解释、能生成；但要通过提示词、上下文与工具链把它约束到可验收、可控。' } ] diff --git a/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue index 9a0ad09..6eb6d7f 100644 --- a/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue +++ b/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue @@ -46,15 +46,14 @@
- - - +
@@ -62,7 +61,9 @@
需要的规则总数
-
{{ formatNumber(totalRules) }}
+
+ {{ formatNumber(totalRules) }} +
= {{ valuesPerFeature }}{{ featureCount }} = @@ -85,7 +86,10 @@
{{ rule.text }}
-
+
@@ -146,7 +150,8 @@
  • ...

    • - 结论：规则永远写不完，这就是为什么我们需要机器学习！ + 结论：规则永远写不完，这就是为什么我们需要机器学习！

    @@ -159,7 +164,6 @@ const featureCount = ref(3) const valuesPerFeature = ref(3) const ruleCount = ref(0) const ruleIdCounter = ref(0) -const autoGenerating = ref(false) const displayedRules = ref([]) const maxRules = 20 @@ -201,7 +205,8 @@ const valueOptions = computed(() => { const generateRuleText = () => { const conditions = features.value.map((feature, index) => { - const value = valueOptions.value[Math.floor(Math.random() * valuesPerFeature.value)] + const value = + valueOptions.value[Math.floor(Math.random() * valuesPerFeature.value)] return `${feature}=${value}` }) return `IF ${conditions.join(' AND ')} THEN ...` @@ -217,31 +222,18 @@ const addRule = () => { displayedRules.value.push({ id: ruleIdCounter.value++, text: generateRuleText(), - color: getFeatureColor(Math.floor(Math.random() * featureCount.value) + 1), + color: getFeatureColor( + Math.floor(Math.random() * featureCount.value) + 1 + ), gradient: generateColor() }) ruleCount.value++ } } -const autoGenerate = async () => { - if (autoGenerating.value) return - - autoGenerating.value = true - const interval = setInterval(() => { - if (ruleCount.value >= maxRules) { - clearInterval(interval) - autoGenerating.value = false - } else { - addRule() - } - }, 100) -} - const resetRules = () => { displayedRules.value = [] ruleCount.value = 0 - autoGenerating.value = false } const formatNumber = (num) => { @@ -448,8 +440,15 @@ watch([featureCount, valuesPerFeature], () => { } @keyframes pulse { - 0%, 100% { transform: scale(1); opacity: 0.5; } - 50% { transform: scale(1.1); opacity: 0.8; } + 0%, + 100% { + transform: scale(1); + opacity: 0.5; + } + 50% { + transform: scale(1.1); + opacity: 0.8; + } } .counter-label { @@ -512,9 +511,16 @@ watch([featureCount, valuesPerFeature], () => { } @keyframes shake { - 0%, 100% { transform: translateX(0); } - 25% { transform: translateX(-5px); } - 75% { transform: translateX(5px); } + 0%, + 100% { + transform: translateX(0); + } + 25% { + transform: translateX(-5px); + } + 75% { + transform: translateX(5px); + } } .rules-container { @@ -590,8 +596,13 @@ watch([featureCount, valuesPerFeature], () => { } @keyframes bounce { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-10px); } + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } } .warning-content h5 { diff --git a/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue index 82cc697..09552ee 100644 --- a/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue +++ b/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue @@ -1,232 +1,252 @@ diff --git a/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue index 279125f..f34eadd 100644 --- a/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue +++ b/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue @@ -1,115 +1,225 @@ @@ -118,135 +228,194 @@ const mlResult = computed(() => { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); - padding: 1rem; + padding: 1.5rem; margin: 1rem 0; + color: var(--vp-c-text-1); } -.demo-grid { +.header { + margin-bottom: 1rem; +} + +.title { + font-weight: 800; +} + +.subtitle { + margin-top: 0.25rem; + color: var(--vp-c-text-2); + font-size: 0.9rem; +} + +.grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 1.5rem; + gap: 0.75rem; } -@media (max-width: 640px) { - .demo-grid { +@media (max-width: 720px) { + .grid { grid-template-columns: 1fr; } } -.panel { - background: var(--vp-c-bg); +.card { border: 1px solid var(--vp-c-divider); border-radius: 8px; - overflow: hidden; + background: var(--vp-c-bg); + padding: 1rem; } -.panel-header { - padding: 0.8rem; - background: var(--vp-c-bg-alt); - font-weight: bold; - border-bottom: 1px solid var(--vp-c-divider); +.card-title { + font-weight: 900; + margin-bottom: 0.75rem; +} + +.row { display: flex; + gap: 0.5rem; align-items: center; + flex-wrap: wrap; + margin-bottom: 0.6rem; +} + +.label { + font-weight: 800; + color: var(--vp-c-text-1); +} + +.input, +.select { + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg-soft); + color: var(--vp-c-text-1); + border-radius: 6px; + padding: 0.4rem 0.5rem; + font-weight: 700; +} + +.input { + width: 84px; +} + +.select { + min-width: 140px; +} + +.range { + width: 220px; + max-width: 100%; +} + +.mono { + font-family: var(--vp-font-family-mono); +} + +.muted { + color: var(--vp-c-text-2); +} + +.btn { + padding: 0.45rem 0.7rem; + border-radius: 6px; + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg-soft); + color: var(--vp-c-text-1); + cursor: pointer; + font-weight: 800; + font-size: 0.875rem; +} + +.btn.primary { + background: var(--vp-c-brand); + border-color: var(--vp-c-brand); + color: var(--vp-c-bg); +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.samples { + border: 1px solid var(--vp-c-divider); + border-radius: 8px; + padding: 0.75rem; + background: var(--vp-c-bg-soft); + margin-bottom: 0.75rem; +} + +.chips { + display: flex; + flex-wrap: wrap; gap: 0.5rem; } -.panel-body { - padding: 1rem; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.code-block { - background: var(--vp-c-bg-alt); - color: var(--vp-c-text-1); - padding: 0.8rem; - border-radius: 4px; - font-family: var(--vp-font-family-mono); - font-size: 0.8rem; +.chip { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.2rem 0.55rem; + border-radius: 999px; border: 1px solid var(--vp-c-divider); -} - -.mini-input { - width: 40px; background: var(--vp-c-bg); - border: 1px solid var(--vp-c-divider); - color: var(--vp-c-text-1); - border-radius: 2px; - text-align: center; + font-weight: 800; } -.test-area { - background: var(--vp-c-bg-soft); - padding: 0.8rem; - border-radius: 6px; - text-align: center; +.sep { + color: var(--vp-c-text-2); } -.slider { - width: 100%; - margin: 0.5rem 0; +.chip-x { + margin-left: 0.2rem; + border: none; + background: transparent; + cursor: pointer; + color: var(--vp-c-text-2); + font-size: 1rem; + line-height: 1; } -.result-box { - margin-top: 0.5rem; - font-weight: bold; - font-size: 1.1rem; - padding: 0.5rem; - border-radius: 4px; - background: var(--vp-c-bg); - border: 1px solid var(--vp-c-divider); -} -.result-box.big { - color: var(--vp-c-red-1, #ef4444); - border-color: rgba(var(--vp-c-brand-rgb), 0.18); - background: var(--vp-c-bg); -} -.result-box.small { - color: var(--vp-c-text-1); - border-color: rgba(var(--vp-c-brand-rgb), 0.18); - background: var(--vp-c-bg); -} - -.note { - font-size: 0.75rem; - color: var(--vp-c-text-3); - font-style: italic; - text-align: center; -} - -.training-data { +.controls { display: flex; gap: 0.5rem; flex-wrap: wrap; - justify-content: center; - margin-bottom: 0.5rem; + margin: 0.25rem 0 0.75rem; } -.data-point { - background: var(--vp-c-bg-alt); +.result { border: 1px solid var(--vp-c-divider); - padding: 2px 6px; - border-radius: 4px; - font-size: 0.7rem; - color: var(--vp-c-text-2); + border-radius: 8px; + background: var(--vp-c-bg-soft); + padding: 0.75rem; + margin: 0.5rem 0; } -.train-btn { - width: 100%; - padding: 0.5rem; - background: var(--vp-c-brand); - color: var(--vp-c-bg); - border: 1px solid var(--vp-c-brand); - border-radius: 4px; - cursor: pointer; - transition: all 0.2s; +.result.good { + border-color: rgba(var(--vp-c-brand-rgb), 0.35); } -.train-btn:disabled { - background: var(--vp-c-bg); - border-color: var(--vp-c-divider); + +.result-title { + font-weight: 900; + color: var(--vp-c-text-1); +} + +.result-value { + margin-top: 0.25rem; + font-weight: 900; + font-size: 1.1rem; +} + +.result-note { + margin-top: 0.35rem; color: var(--vp-c-text-2); - cursor: not-allowed; + font-size: 0.85rem; +} + +.hint { + margin-top: 0.5rem; + color: var(--vp-c-text-2); + font-size: 0.85rem; + line-height: 1.6; } diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue new file mode 100644 index 0000000..fb63bf5 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue @@ -0,0 +1,320 @@ + + + + + diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index f832d6e..b588939 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.js @@ -194,6 +194,7 @@ import PromptQuickStartDemo from './components/appendix/prompt-engineering/Promp import PromptComparisonDemo from './components/appendix/prompt-engineering/PromptComparisonDemo.vue' import FewShotDemo from './components/appendix/prompt-engineering/FewShotDemo.vue' import ChainOfThoughtDemo from './components/appendix/prompt-engineering/ChainOfThoughtDemo.vue' +import PromptTemplatesDemo from './components/appendix/prompt-engineering/PromptTemplatesDemo.vue' // Context Engineering Components import AgentContextFlow from './components/appendix/context-engineering/AgentContextFlow.vue' @@ -449,6 +450,7 @@ export default { app.component('PromptComparisonDemo', PromptComparisonDemo) app.component('FewShotDemo', FewShotDemo) app.component('ChainOfThoughtDemo', ChainOfThoughtDemo) + app.component('PromptTemplatesDemo', PromptTemplatesDemo) // Context Engineering Components Registration app.component('AgentContextFlow', AgentContextFlow) diff --git a/docs/zh-cn/appendix/prompt-engineering.md b/docs/zh-cn/appendix/prompt-engineering.md index 48a7bea..e13872d 100644 --- a/docs/zh-cn/appendix/prompt-engineering.md +++ b/docs/zh-cn/appendix/prompt-engineering.md @@ -75,13 +75,11 @@ AI 不知道你要：写给谁、写多长、用什么风格、怎么验收。 ````markdown 任务：总结下面的文本，输出 3 个要点。 文本如下（用 ``` 包起来）： -```` +```text [这里粘贴原文] - -``` - ``` +```` --- @@ -251,36 +249,9 @@ AI 不知道你要：写给谁、写多长、用什么风格、怎么验收。 ## 9. 常见场景模板（可直接复制） -### 9.1 总结类（给人看） +下面这些模板做成了可切换组件（带搜索 + 一键复制），避免你往下翻一大段： -```markdown -任务：把下面文本总结给“忙碌的老板”。 -要求： - -- 3 个要点 -- 1 句结论 -- 1 个下一步建议 - 输出：Markdown - 文本： -``` - -[粘贴原文] - -``` - -``` - -### 9.2 抽取类（给程序用） - -`````markdown -任务：从文本中抽取信息。 -输出：只输出 JSON（不要解释）。 -JSON 结构：\n{\n \"title\": \"\",\n \"date\": \"\",\n \"people\": [],\n \"actions\": []\n}\n文本：\n`\n[粘贴原文]\n`\n``` - -### 9.3 代码审查类（先计划再输出） - -````markdown -你是资深工程师。\n任务：审查下面代码。\n要求：\n1) 先列检查清单（3-5条）\n2) 再列问题（现象/原因/修复）\n3) 最后给修复片段\n代码：\n`\n[粘贴代码]\n`\n``` + --- @@ -307,9 +278,3 @@ JSON 结构：\n{\n \"title\": \"\",\n \"date\": \"\",\n \"people\": [],\n \"act | Plan-first（先计划） | 先输出计划/清单，再生成最终结果，减少跑偏。 | | Prompt Injection（注入） | 把外部材料伪装成“指令”，试图让模型越权执行。 | | Self-check（自检） | 让输出附带核对项，方便你验收。 | -```` -````` - -``` - -```