docs: update content and components across multiple files
- Refine chapter introductions in zh-cn docs for clarity and conciseness - Update navigation links to include '/easy-vibe' prefix - Simplify UI components (ChapterIntroduction, ContextWindowVisualizer) - Add new agent-related demo components (AgentMemoryDemo, AgentToolUseDemo) - Improve context compression demo with better visuals and metrics - Adjust styling and layout across various components
This commit is contained in:
sanbuphy
+484
-248
@@ -1,315 +1,551 @@
|
||||
<template>
|
||||
<div class="rag-simulation-demo">
|
||||
<div class="layout">
|
||||
<!-- Left: Long-term Memory (Vector DB) -->
|
||||
<div class="panel vector-db">
|
||||
<div class="panel-header">📚 Long-term Memory (Vector DB)</div>
|
||||
<div class="documents">
|
||||
<div
|
||||
v-for="doc in documents"
|
||||
:key="doc.id"
|
||||
class="doc-card"
|
||||
:class="{ retrieved: doc.retrieved }"
|
||||
>
|
||||
<div class="doc-icon">📄</div>
|
||||
<div class="doc-content">{{ doc.content }}</div>
|
||||
<div class="doc-meta">
|
||||
ID: {{ doc.id }} | Vector: {{ doc.vector }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center: Query & Retrieval Process -->
|
||||
<div class="process-area">
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="query"
|
||||
placeholder="Ask a question..."
|
||||
@keyup.enter="search"
|
||||
/>
|
||||
<button @click="search" :disabled="isSearching">
|
||||
{{ isSearching ? 'Searching...' : '🔍 Retrieve' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">⬇️</div>
|
||||
|
||||
<div class="retrieval-status" :class="{ active: isSearching }">
|
||||
<div class="status-step" v-if="step >= 1">1. Embed Query</div>
|
||||
<div class="status-step" v-if="step >= 2">2. Semantic Search</div>
|
||||
<div class="status-step" v-if="step >= 3">3. Retrieve Top-K</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">⬇️</div>
|
||||
|
||||
<!-- Right: Augmented Context -->
|
||||
<div class="panel context-builder">
|
||||
<div class="panel-header">📦 Augmented Context</div>
|
||||
<div class="context-content">
|
||||
<div class="context-section system">
|
||||
<span class="label">System:</span>
|
||||
You are a helpful assistant. Use the following context to answer
|
||||
the user.
|
||||
</div>
|
||||
<div
|
||||
class="context-section retrieved"
|
||||
v-if="retrievedDocs.length > 0"
|
||||
>
|
||||
<span class="label">Retrieved Context:</span>
|
||||
<div
|
||||
v-for="doc in retrievedDocs"
|
||||
:key="doc.id"
|
||||
class="retrieved-item"
|
||||
>
|
||||
- {{ doc.content }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="context-section user">
|
||||
<span class="label">User:</span>
|
||||
{{ lastQuery }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!--
|
||||
* Component: RAGSimulationDemo.vue
|
||||
* Description: Demonstrates the Retrieval-Augmented Generation (RAG) process.
|
||||
* Features:
|
||||
* - Interactive search simulation
|
||||
* - Visual representation of Vector DB and Document retrieval
|
||||
* - Step-by-step animation of the RAG pipeline
|
||||
* - Visualization of context augmentation
|
||||
-->
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const query = ref('How do I reset my password?')
|
||||
const query = ref('如何重置密码？')
|
||||
const lastQuery = ref('')
|
||||
const isSearching = ref(false)
|
||||
const step = ref(0)
|
||||
const currentStep = ref(0)
|
||||
const searchTime = ref(0)
|
||||
|
||||
const documents = ref([
|
||||
{
|
||||
id: 1,
|
||||
content: 'To reset password, go to settings page.',
|
||||
vector: '[0.1, 0.9]',
|
||||
retrieved: false
|
||||
title: '密码重置指南',
|
||||
content: '用户可以通过点击设置页面的"忘记密码"链接来重置密码。系统会发送验证邮件。',
|
||||
vector: [0.12, 0.88, 0.05],
|
||||
score: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: 'Pricing starts at $10/month.',
|
||||
vector: '[0.8, 0.2]',
|
||||
retrieved: false
|
||||
title: '定价策略',
|
||||
content: '基础版每月 $10，专业版每月 $29。企业版需要联系销售团队获取报价。',
|
||||
vector: [0.85, 0.15, 0.10],
|
||||
score: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
content: 'Contact support at support@example.com.',
|
||||
vector: '[0.3, 0.5]',
|
||||
retrieved: false
|
||||
title: 'API 文档',
|
||||
content: '所有 API 请求都需要在 Header 中包含 Bearer Token 进行身份验证。',
|
||||
vector: [0.30, 0.20, 0.95],
|
||||
score: 0
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
content: 'Click "Forgot Password" on login screen.',
|
||||
vector: '[0.2, 0.8]',
|
||||
retrieved: false
|
||||
title: '账户安全',
|
||||
content: '为了账户安全，建议开启双重认证 (2FA)。定期修改密码也是好习惯。',
|
||||
vector: [0.15, 0.85, 0.12],
|
||||
score: 0
|
||||
}
|
||||
])
|
||||
|
||||
const retrievedDocs = ref([])
|
||||
const steps = [
|
||||
{ id: 1, label: 'Embedding', desc: '将问题转换为向量' },
|
||||
{ id: 2, label: 'Similarity Search', desc: '计算向量相似度' },
|
||||
{ id: 3, label: 'Retrieval', desc: '提取 Top-K 相关文档' },
|
||||
{ id: 4, label: 'Augmentation', desc: '注入上下文窗口' }
|
||||
]
|
||||
|
||||
const search = async () => {
|
||||
if (isSearching.value) return
|
||||
isSearching.value = true
|
||||
lastQuery.value = query.value
|
||||
step.value = 0
|
||||
|
||||
// Reset previous state
|
||||
documents.value.forEach((d) => (d.retrieved = false))
|
||||
retrievedDocs.value = []
|
||||
|
||||
// Step 1: Embedding
|
||||
await wait(500)
|
||||
step.value = 1
|
||||
|
||||
// Step 2: Search
|
||||
await wait(500)
|
||||
step.value = 2
|
||||
|
||||
// Mock semantic search logic (simple keyword match for demo)
|
||||
const keywords = query.value.toLowerCase().split(' ')
|
||||
const matches = documents.value
|
||||
.map((doc) => {
|
||||
let score = 0
|
||||
keywords.forEach((k) => {
|
||||
if (doc.content.toLowerCase().includes(k)) score++
|
||||
})
|
||||
return { ...doc, score }
|
||||
})
|
||||
const retrievedDocs = computed(() => {
|
||||
return documents.value
|
||||
.filter(doc => doc.score > 0.7)
|
||||
.sort((a, b) => b.score - a.score)
|
||||
.slice(0, 2) // Top 2
|
||||
})
|
||||
|
||||
// Step 3: Retrieve
|
||||
await wait(500)
|
||||
step.value = 3
|
||||
|
||||
matches.forEach((m) => {
|
||||
const doc = documents.value.find((d) => d.id === m.id)
|
||||
if (doc) doc.retrieved = true
|
||||
})
|
||||
|
||||
retrievedDocs.value = matches
|
||||
|
||||
isSearching.value = false
|
||||
const calculateSimilarity = (q, docVector) => {
|
||||
// Mock similarity calculation based on keywords for demo purposes
|
||||
// In reality, this would be a vector dot product
|
||||
if (q.includes('密码') || q.includes('安全')) {
|
||||
if (docVector[1] > 0.8) return 0.92 + (Math.random() * 0.05)
|
||||
if (docVector[0] > 0.8) return 0.15
|
||||
return 0.4 + (Math.random() * 0.1)
|
||||
}
|
||||
if (q.includes('价格') || q.includes('多少钱')) {
|
||||
if (docVector[0] > 0.8) return 0.95
|
||||
return 0.1
|
||||
}
|
||||
return Math.random() * 0.3
|
||||
}
|
||||
|
||||
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
const search = async () => {
|
||||
if (isSearching.value || !query.value) return
|
||||
|
||||
isSearching.value = true
|
||||
lastQuery.value = query.value
|
||||
currentStep.value = 1
|
||||
searchTime.value = 0
|
||||
|
||||
// Reset scores
|
||||
documents.value.forEach(d => d.score = 0)
|
||||
|
||||
// Step 1: Embedding (Simulated)
|
||||
await new Promise(r => setTimeout(r, 800))
|
||||
currentStep.value = 2
|
||||
|
||||
// Step 2: Search
|
||||
const startTime = performance.now()
|
||||
documents.value.forEach(doc => {
|
||||
doc.score = calculateSimilarity(query.value, doc.vector)
|
||||
})
|
||||
await new Promise(r => setTimeout(r, 800))
|
||||
searchTime.value = Math.round(performance.now() - startTime) + 45 // Add base latency
|
||||
currentStep.value = 3
|
||||
|
||||
// Step 3: Retrieval
|
||||
await new Promise(r => setTimeout(r, 800))
|
||||
currentStep.value = 4
|
||||
|
||||
// Step 4: Complete
|
||||
await new Promise(r => setTimeout(r, 800))
|
||||
isSearching.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rag-simulation-demo">
|
||||
<!-- Control Panel -->
|
||||
<div class="control-panel">
|
||||
<div class="search-bar">
|
||||
<input
|
||||
v-model="query"
|
||||
type="text"
|
||||
placeholder="输入问题 (例如: 怎么重置密码?)"
|
||||
@keyup.enter="search"
|
||||
:disabled="isSearching"
|
||||
/>
|
||||
<button
|
||||
class="search-btn"
|
||||
@click="search"
|
||||
:disabled="isSearching || !query"
|
||||
>
|
||||
{{ isSearching ? '检索中...' : '🔍 开始检索' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="step-indicator">
|
||||
<div
|
||||
v-for="s in steps"
|
||||
:key="s.id"
|
||||
class="step-dot"
|
||||
:class="{ active: currentStep >= s.id, current: currentStep === s.id }"
|
||||
:title="s.label"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Visualization -->
|
||||
<div class="viz-container">
|
||||
|
||||
<!-- Left: Vector Database -->
|
||||
<div class="panel vector-db" :class="{ dimmed: currentStep === 4 }">
|
||||
<div class="panel-header">
|
||||
<span class="icon">🗄️</span> 向量数据库 (Knowledge Base)
|
||||
</div>
|
||||
<div class="doc-list">
|
||||
<div
|
||||
v-for="doc in documents"
|
||||
:key="doc.id"
|
||||
class="doc-card"
|
||||
:class="{
|
||||
'scanning': currentStep === 2,
|
||||
'matched': doc.score > 0.7 && currentStep >= 3,
|
||||
'rejected': doc.score <= 0.7 && currentStep >= 3
|
||||
}"
|
||||
:style="{ '--score': doc.score }"
|
||||
>
|
||||
<div class="doc-icon">📄</div>
|
||||
<div class="doc-info">
|
||||
<div class="doc-title">{{ doc.title }}</div>
|
||||
<div class="doc-preview">{{ doc.content.substring(0, 20) }}...</div>
|
||||
</div>
|
||||
<div class="doc-score" v-if="currentStep >= 2 && doc.score > 0">
|
||||
{{ (doc.score * 100).toFixed(0) }}%
|
||||
</div>
|
||||
<div class="vector-visual">
|
||||
<span v-for="(v,i) in doc.vector" :key="i" :style="{ height: v * 10 + 'px' }"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center: Pipeline Visuals -->
|
||||
<div class="pipeline-arrow">
|
||||
<div class="arrow-line" :class="{ active: isSearching }"></div>
|
||||
<div class="pipeline-status" v-if="currentStep > 0">
|
||||
{{ steps[currentStep - 1]?.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Augmented Context -->
|
||||
<div class="panel context-window" :class="{ active: currentStep === 4 }">
|
||||
<div class="panel-header">
|
||||
<span class="icon">🤖</span> 增强后的上下文 (Final Prompt)
|
||||
</div>
|
||||
<div class="prompt-content">
|
||||
<div class="prompt-section system">
|
||||
<span class="tag">System</span>
|
||||
<p>你是一个帮助用户的 AI 助手。请基于以下上下文回答用户的问题。</p>
|
||||
</div>
|
||||
|
||||
<div class="prompt-section context" v-if="currentStep >= 3">
|
||||
<span class="tag">Context (RAG)</span>
|
||||
<div v-if="retrievedDocs.length > 0">
|
||||
<div v-for="doc in retrievedDocs" :key="doc.id" class="retrieved-item">
|
||||
<span class="bullet">•</span> {{ doc.content }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-context">
|
||||
(暂无相关文档)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prompt-section user" v-if="lastQuery">
|
||||
<span class="tag">User</span>
|
||||
<p>{{ lastQuery }}</p>
|
||||
</div>
|
||||
<div class="placeholder-text" v-else>
|
||||
等待查询...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Metrics Footer -->
|
||||
<div class="metrics-footer">
|
||||
<div class="metric">
|
||||
<span class="label">检索耗时:</span>
|
||||
<span class="value">{{ searchTime }} ms</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="label">命中数量:</span>
|
||||
<span class="value">{{ retrievedDocs.length }} docs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rag-simulation-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
padding: 1.5rem;
|
||||
overflow: hidden;
|
||||
margin: 1rem 0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex: 1;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
transition: all 0.3s;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.doc-card.retrieved {
|
||||
border-color: #10b981;
|
||||
background: #ecfdf5;
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.doc-meta {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.process-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
.control-panel {
|
||||
padding: 1rem;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
padding: 0.6rem;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.retrieval-status {
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0.5rem 0;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
input:focus {
|
||||
border-color: var(--vp-c-brand);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.status-step {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: bold;
|
||||
margin: 0.2rem 0;
|
||||
font-size: 0.9rem;
|
||||
.search-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.search-btn:hover:not(:disabled) {
|
||||
background-color: var(--vp-c-brand-dark);
|
||||
}
|
||||
.search-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.context-content {
|
||||
font-size: 0.85rem;
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.step-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--vp-c-divider);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.step-dot.active {
|
||||
background-color: var(--vp-c-brand);
|
||||
}
|
||||
.step-dot.current {
|
||||
transform: scale(1.4);
|
||||
box-shadow: 0 0 4px var(--vp-c-brand);
|
||||
}
|
||||
|
||||
/* Viz Container */
|
||||
.viz-container {
|
||||
display: flex;
|
||||
padding: 1.5rem;
|
||||
gap: 1rem;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
min-height: 350px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex: 1;
|
||||
background-color: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.panel.dimmed {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
.panel.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
box-shadow: 0 0 15px rgba(var(--vp-c-brand-rgb), 0.1);
|
||||
}
|
||||
|
||||
.context-section {
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-left: 3px solid #ccc;
|
||||
.panel-header {
|
||||
padding: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.context-section.system {
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
.context-section.retrieved {
|
||||
border-color: #10b981;
|
||||
background: #ecfdf5;
|
||||
}
|
||||
.context-section.user {
|
||||
border-color: #3b82f6;
|
||||
.doc-list {
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
.doc-card {
|
||||
padding: 0.6rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
background-color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.doc-card.scanning {
|
||||
animation: pulse 1s infinite;
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
}
|
||||
.doc-card.matched {
|
||||
border-color: var(--vp-c-green);
|
||||
background-color: var(--vp-c-green-dimm);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
.doc-card.rejected {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.doc-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.doc-title {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.doc-preview {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.doc-score {
|
||||
font-family: var(--vp-font-mono);
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
.vector-visual {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
align-items: flex-end;
|
||||
height: 15px;
|
||||
width: 20px;
|
||||
}
|
||||
.vector-visual span {
|
||||
width: 4px;
|
||||
background-color: var(--vp-c-text-3);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Pipeline Arrow */
|
||||
.pipeline-arrow {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.arrow-line {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: var(--vp-c-divider);
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.arrow-line.active {
|
||||
background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-light));
|
||||
background-size: 200% 100%;
|
||||
animation: flow 1s linear infinite;
|
||||
}
|
||||
.pipeline-status {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Context Window */
|
||||
.prompt-content {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
font-family: var(--vp-font-mono);
|
||||
font-size: 0.85rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.prompt-section {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
padding: 0.8rem;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.prompt-section.system {
|
||||
border-left-color: var(--vp-c-yellow);
|
||||
}
|
||||
.prompt-section.context {
|
||||
border-left-color: var(--vp-c-green);
|
||||
background-color: rgba(var(--vp-c-green-rgb), 0.1);
|
||||
}
|
||||
.prompt-section.user {
|
||||
border-left-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.retrieved-item {
|
||||
margin-bottom: 0.3rem;
|
||||
color: #047857;
|
||||
margin-top: 0.4rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.empty-context {
|
||||
color: var(--vp-c-text-3);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
.placeholder-text {
|
||||
text-align: center;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
color: var(--vp-c-text-3);
|
||||
margin: 0.5rem 0;
|
||||
/* Metrics Footer */
|
||||
.metrics-footer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0.8rem;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.metric .label {
|
||||
color: var(--vp-c-text-2);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.metric .value {
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@keyframes flow {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.viz-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pipeline-arrow {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
flex-direction: row;
|
||||
}
|
||||
.arrow-line {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user