feat: save current work to dev branch
This commit is contained in:
sanbuphy
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="chain-of-thought-demo">
|
||||
<div class="comparison-container">
|
||||
<!-- Direct Answer -->
|
||||
<div class="method-card">
|
||||
<div class="method-header">
|
||||
<span class="method-icon">⚡</span>
|
||||
<span class="method-title">直接回答</span>
|
||||
</div>
|
||||
<div class="method-body">
|
||||
<div class="prompt-box">
|
||||
<div class="prompt-label">提示词</div>
|
||||
<div class="prompt-text">
|
||||
罗杰有 5 个网球。他又买了 2 罐网球，每罐有 3 个球。
|
||||
现在他总共有多少个网球？
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">↓</div>
|
||||
|
||||
<div class="result-box">
|
||||
<div class="result-label">AI 可能的输出</div>
|
||||
<div class="result-content bad">
|
||||
"11 个球。"
|
||||
<br><br>
|
||||
<span class="badge">错误 ❌</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chain of Thought -->
|
||||
<div class="method-card highlight">
|
||||
<div class="method-header">
|
||||
<span class="method-icon">🧠</span>
|
||||
<span class="method-title">思维链 (CoT)</span>
|
||||
</div>
|
||||
<div class="method-body">
|
||||
<div class="prompt-box">
|
||||
<div class="prompt-label">提示词</div>
|
||||
<div class="prompt-text">
|
||||
罗杰有 5 个网球。他又买了 2 罐网球，每罐有 3 个球。
|
||||
现在他总共有多少个网球？
|
||||
<br><br>
|
||||
<span class="instruction">请一步步思考：</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">↓</div>
|
||||
|
||||
<div class="result-box">
|
||||
<div class="result-label">AI 输出</div>
|
||||
<div class="result-content good">
|
||||
<div class="thinking-process">
|
||||
① 罗杰原本有 5 个球<br>
|
||||
② 他买了 2 罐，每罐 3 个：2 × 3 = 6 个<br>
|
||||
③ 总共：5 + 6 = 11 个
|
||||
</div>
|
||||
<div class="final-answer">
|
||||
<strong>答案：11 个球</strong>
|
||||
</div>
|
||||
<span class="badge success">正确 ✅</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
<div class="exp-item">
|
||||
<span class="exp-icon">🔍</span>
|
||||
<span><strong>思维链</strong>：让 AI "展示思考过程"，一步步推理问题。
|
||||
对于数学、逻辑、推理类问题特别有效！</span>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<span class="exp-icon">📝</span>
|
||||
<span><strong>触发词</strong>：使用"请一步步思考"、"详细说明推理过程"等提示语可以激活 CoT</span>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<span class="exp-icon">🎯</span>
|
||||
<span><strong>适用场景</strong>：数学计算、逻辑推理、复杂问题拆解、多步骤任务</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chain-of-thought-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.comparison-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.method-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.method-card.highlight {
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.method-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 15px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
}
|
||||
|
||||
.method-card.highlight .method-header {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
.method-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.method-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.method-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.prompt-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.prompt-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.thinking-process {
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.final-answer {
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.badge:not(.success) {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.exp-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.exp-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="few-shot-demo">
|
||||
<div class="mode-switch">
|
||||
<button :class="{ active: mode === 'zero' }" @click="mode = 'zero'">
|
||||
🎯 Zero-shot（零样本）
|
||||
</button>
|
||||
<button :class="{ active: mode === 'few' }" @click="mode = 'few'">
|
||||
📚 Few-shot（少样本）
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<!-- Zero-shot -->
|
||||
<div v-if="mode === 'zero'" class="zero-shot">
|
||||
<div class="prompt-box">
|
||||
<div class="prompt-header">提示词</div>
|
||||
<div class="prompt-content">
|
||||
将<strong>中文</strong>翻译成<strong>英文</strong>：
|
||||
<br><br>
|
||||
"我很好"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">↓</div>
|
||||
|
||||
<div class="output-box">
|
||||
<div class="output-header">AI 可能的输出</div>
|
||||
<div class="output-content">
|
||||
"I'm fine." 或 "I'm very good." 或 "I am well."
|
||||
<br><br>
|
||||
<span class="comment">❓ 不确定应该用什么语气，可能是正式或随意</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Few-shot -->
|
||||
<div v-else class="few-shot">
|
||||
<div class="prompt-box">
|
||||
<div class="prompt-header">提示词（含示例）</div>
|
||||
<div class="prompt-content">
|
||||
将<strong>中文</strong>翻译成<strong>英文</strong>：
|
||||
<br><br>
|
||||
<div class="examples">
|
||||
<div class="example-item">
|
||||
<span class="input">你好</span> → <span class="output">Hi!</span>
|
||||
</div>
|
||||
<div class="example-item">
|
||||
<span class="input">谢谢</span> → <span class="output">Thanks!</span>
|
||||
</div>
|
||||
<div class="example-item">
|
||||
<span class="input">再见</span> → <span class="output">Bye!</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task">
|
||||
<strong>任务：</strong>"我很好"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">↓</div>
|
||||
|
||||
<div class="output-box">
|
||||
<div class="output-header">AI 输出</div>
|
||||
<div class="output-content">
|
||||
"I'm great!"
|
||||
<br><br>
|
||||
<span class="comment success">✨ 通过示例学会了随意的对话风格</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
<div v-if="mode === 'zero'">
|
||||
<strong>Zero-shot</strong>：不给任何示例，直接让 AI 完成任务。简单但可能不够准确。
|
||||
</div>
|
||||
<div v-else>
|
||||
<strong>Few-shot</strong>：提供几个示例让 AI 学习规律。示例的质量和数量直接影响输出效果。
|
||||
通常 3-5 个示例就足够了！
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const mode = ref('zero')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.few-shot-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mode-switch button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.mode-switch button.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.prompt-box,
|
||||
.output-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.prompt-header,
|
||||
.output-header {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.prompt-content,
|
||||
.output-content {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.examples {
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.example-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.example-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.example-item .input {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.example-item .output {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.task {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.comment:not(.success) {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.comment.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
+201
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="prompt-comparison">
|
||||
<div class="comparison-container">
|
||||
<!-- Bad Prompt -->
|
||||
<div class="prompt-card bad">
|
||||
<div class="card-header">
|
||||
<span class="card-icon">❌</span>
|
||||
<span class="card-title">模糊提示词</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="prompt-text">"写个文章"</div>
|
||||
<div class="result-box">
|
||||
<div class="result-label">AI 输出：</div>
|
||||
<div class="result-content">
|
||||
好的，这是一篇关于某个主题的文章...
|
||||
<br><br>
|
||||
<span class="result-comment">❓ 不清楚要写什么主题、风格、长度</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Good Prompt -->
|
||||
<div class="prompt-card good">
|
||||
<div class="card-header">
|
||||
<span class="card-icon">✅</span>
|
||||
<span class="card-title">清晰提示词</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="prompt-text">
|
||||
"请以<strong>技术博客</strong>的形式，写一篇关于<strong>提示词工程</strong>的文章。
|
||||
目标读者：<strong>初学者</strong>。字数：<strong>800-1000 字</strong>。
|
||||
包含<strong>3 个实用技巧</strong>和<strong>代码示例</strong>。"
|
||||
</div>
|
||||
<div class="result-box">
|
||||
<div class="result-label">AI 输出：</div>
|
||||
<div class="result-content">
|
||||
# 提示词工程入门指南
|
||||
<br><br>
|
||||
作为 AI 时代的核心技能...
|
||||
<br><br>
|
||||
<span class="result-comment success">✨ 符合所有要求，输出精准</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-points">
|
||||
<div class="point">
|
||||
<span class="point-icon">🎯</span>
|
||||
<span><strong>明确目标</strong>：说明要做什么（写文章、写代码、分析）</span>
|
||||
</div>
|
||||
<div class="point">
|
||||
<span class="point-icon">📋</span>
|
||||
<span><strong>提供细节</strong>：主题、风格、长度、格式等具体要求</span>
|
||||
</div>
|
||||
<div class="point">
|
||||
<span class="point-icon">👥</span>
|
||||
<span><strong>指定受众</strong>：说明目标读者（初学者/专家/儿童等）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.prompt-comparison {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.comparison-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prompt-card.bad {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.prompt-card.good {
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 15px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
}
|
||||
|
||||
.bad .card-header {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.good .card-header {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.result-comment {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.result-comment:not(.success) {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.result-comment.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.key-points {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.point {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user