feat: add header image and remove unused demo components
- Add header.png to assets directory - Remove deprecated Vue demo components for API and context engineering - Update README.md to include new header image
This commit is contained in:
sanbuphy
@@ -1,284 +0,0 @@
|
||||
<template>
|
||||
<div class="context-window-demo">
|
||||
<div class="window-comparison">
|
||||
<!-- Short Context -->
|
||||
<div class="model-card">
|
||||
<div class="model-header">
|
||||
<span class="model-icon">📱</span>
|
||||
<span class="model-title">短上下文模型</span>
|
||||
</div>
|
||||
<div class="model-body">
|
||||
<div class="window-visual">
|
||||
<div class="window-bar">
|
||||
<div class="window-label">上下文窗口: 4K tokens</div>
|
||||
<div class="window-size">
|
||||
<div class="size-fill short" :style="{ width: '20%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-preview">
|
||||
<div class="content-item system">系统提示词</div>
|
||||
<div class="content-item user">用户消息</div>
|
||||
<div class="content-item assistant">助手回复</div>
|
||||
<div class="content-item warning">⚠️ 只能处理短文档</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-info">
|
||||
<div class="info-item">
|
||||
<span class="label">窗口大小:</span>
|
||||
<span>4K tokens (~3000 字)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">适用场景:</span>
|
||||
<span>问答、摘要、对话</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">代表模型:</span>
|
||||
<span>GPT-3.5, Claude 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Long Context -->
|
||||
<div class="model-card highlight">
|
||||
<div class="model-header">
|
||||
<span class="model-icon">📚</span>
|
||||
<span class="model-title">长上下文模型</span>
|
||||
</div>
|
||||
<div class="model-body">
|
||||
<div class="window-visual">
|
||||
<div class="window-bar">
|
||||
<div class="window-label">上下文窗口: 200K tokens</div>
|
||||
<div class="window-size">
|
||||
<div class="size-fill long" :style="{ width: '100%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-preview">
|
||||
<div class="content-item system">系统提示词</div>
|
||||
<div class="content-item user">用户消息</div>
|
||||
<div class="content-item docs">📄 完整技术文档</div>
|
||||
<div class="content-item docs">📄 代码库文件</div>
|
||||
<div class="content-item assistant">助手回复</div>
|
||||
<div class="content-item success">✅ 可处理长文档</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-info">
|
||||
<div class="info-item">
|
||||
<span class="label">窗口大小:</span>
|
||||
<span>200K tokens (~15 万字)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">适用场景:</span>
|
||||
<span>长文档分析、代码审查</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">代表模型:</span>
|
||||
<span>GPT-4, Claude 3, Gemini</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<div class="tip">
|
||||
<span class="tip-icon">💡</span>
|
||||
<span
|
||||
><strong>选择合适的模型</strong>：短对话用短上下文模型（更快更便宜），
|
||||
长文档分析用长上下文模型（避免信息丢失）</span
|
||||
>
|
||||
</div>
|
||||
<div class="tip">
|
||||
<span class="tip-icon">📏</span>
|
||||
<span
|
||||
><strong>注意 Token 计算</strong>：1 Token ≈ 0.75 个英文单词 或 0.5-1
|
||||
个汉字。 100K tokens 大约等于一本 300 页的书</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.context-window-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.window-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.window-comparison {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.model-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.model-card.highlight {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.model-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 15px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
}
|
||||
|
||||
.model-card.highlight .model-header {
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.1);
|
||||
}
|
||||
|
||||
.model-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.model-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.model-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.window-visual {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.window-bar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.window-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.window-size {
|
||||
height: 8px;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.size-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.size-fill.short {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.size-fill.long {
|
||||
background: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.content-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.content-item {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-item.system {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.content-item.user {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.content-item.assistant {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
.content-item.docs {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.content-item.warning {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.content-item.success {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.model-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.info-item span:last-child {
|
||||
color: var(--vp-c-text-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
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;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,272 +0,0 @@
|
||||
<template>
|
||||
<div class="rag-pipeline-demo">
|
||||
<div class="pipeline-title">🔄 RAG (检索增强生成) 工作流程</div>
|
||||
|
||||
<div class="pipeline-flow">
|
||||
<!-- Step 1: Query -->
|
||||
<div class="flow-step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<div class="step-icon">❓</div>
|
||||
<div class="step-title">用户提问</div>
|
||||
<div class="step-desc">"什么是 RAG？"</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">→</div>
|
||||
|
||||
<!-- Step 2: Retrieve -->
|
||||
<div class="flow-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<div class="step-icon">🔍</div>
|
||||
<div class="step-title">检索相关文档</div>
|
||||
<div class="step-desc">从知识库找到最相关的 3-5 篇文章</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">→</div>
|
||||
|
||||
<!-- Step 3: Augment -->
|
||||
<div class="flow-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<div class="step-icon">📝</div>
|
||||
<div class="step-title">增强提示词</div>
|
||||
<div class="step-desc">将文档内容插入到提示词中</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">→</div>
|
||||
|
||||
<!-- Step 4: Generate -->
|
||||
<div class="flow-step highlight">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-content">
|
||||
<div class="step-icon">🤖</div>
|
||||
<div class="step-title">生成回答</div>
|
||||
<div class="step-desc">基于检索到的信息生成答案</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="example-header">📄 增强后的提示词示例</div>
|
||||
<div class="example-content">
|
||||
<div class="example-section">
|
||||
<span class="section-label">系统提示：</span>
|
||||
<span class="section-text">你是一个技术助手。</span>
|
||||
</div>
|
||||
<div class="example-section">
|
||||
<span class="section-label">检索到的文档：</span>
|
||||
<div class="retrieved-docs">
|
||||
<div class="doc-item">
|
||||
📄 Doc 1: "RAG 是一种结合检索和生成的技术..."
|
||||
</div>
|
||||
<div class="doc-item">
|
||||
📄 Doc 2: "RAG 的优势是减少幻觉、提高准确性..."
|
||||
</div>
|
||||
<div class="doc-item">
|
||||
📄 Doc 3: "常见的 RAG 框架包括 LangChain..."
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-section">
|
||||
<span class="section-label">用户问题：</span>
|
||||
<span class="section-text">什么是 RAG？</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="benefits">
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">✅</span>
|
||||
<span><strong>减少幻觉</strong>：基于真实文档回答，不瞎编</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">📚</span>
|
||||
<span><strong>知识更新</strong>：无需重新训练，只需更新文档库</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">🎯</span>
|
||||
<span><strong>答案可溯源</strong>：可以知道答案来自哪篇文档</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">💰</span>
|
||||
<span><strong>降低成本</strong>：不需要频繁微调模型</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rag-pipeline-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.pipeline-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pipeline-flow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 25px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-bg-mute);
|
||||
color: var(--vp-c-text-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.flow-step.highlight .step-number {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flow-step.highlight .step-content {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.1);
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
font-size: 1.5rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.example {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.example-header {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.example-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.example-section {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.retrieved-docs {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.doc-item {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-3);
|
||||
padding: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 3px;
|
||||
border-left: 3px solid #fbbf24;
|
||||
}
|
||||
|
||||
.benefits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.benefits {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.benefit-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;
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user