Vapora/assets/vapora_logo.html

542 lines
19 KiB
HTML
Raw Permalink Normal View History

feat: Phase 5.3 - Multi-Agent Learning Infrastructure Implement intelligent agent learning from Knowledge Graph execution history with per-task-type expertise tracking, recency bias, and learning curves. ## Phase 5.3 Implementation ### Learning Infrastructure (✅ Complete) - LearningProfileService with per-task-type expertise metrics - TaskTypeExpertise model tracking success_rate, confidence, learning curves - Recency bias weighting: recent 7 days weighted 3x higher (exponential decay) - Confidence scoring prevents overfitting: min(1.0, executions / 20) - Learning curves computed from daily execution windows ### Agent Scoring Service (✅ Complete) - Unified AgentScore combining SwarmCoordinator + learning profiles - Scoring formula: 0.3*base + 0.5*expertise + 0.2*confidence - Rank agents by combined score for intelligent assignment - Support for recency-biased scoring (recent_success_rate) - Methods: rank_agents, select_best, rank_agents_with_recency ### KG Integration (✅ Complete) - KGPersistence::get_executions_for_task_type() - query by agent + task type - KGPersistence::get_agent_executions() - all executions for agent - Coordinator::load_learning_profile_from_kg() - core KG→Learning integration - Coordinator::load_all_learning_profiles() - batch load for multiple agents - Convert PersistedExecution → ExecutionData for learning calculations ### Agent Assignment Integration (✅ Complete) - AgentCoordinator uses learning profiles for task assignment - extract_task_type() infers task type from title/description - assign_task() scores candidates using AgentScoringService - Fallback to load-based selection if no learning data available - Learning profiles stored in coordinator.learning_profiles RwLock ### Profile Adapter Enhancements (✅ Complete) - create_learning_profile() - initialize empty profiles - add_task_type_expertise() - set task-type expertise - update_profile_with_learning() - update swarm profiles from learning ## Files Modified ### vapora-knowledge-graph/src/persistence.rs (+30 lines) - get_executions_for_task_type(agent_id, task_type, limit) - get_agent_executions(agent_id, limit) ### vapora-agents/src/coordinator.rs (+100 lines) - load_learning_profile_from_kg() - core KG integration method - load_all_learning_profiles() - batch loading for agents - assign_task() already uses learning-based scoring via AgentScoringService ### Existing Complete Implementation - vapora-knowledge-graph/src/learning.rs - calculation functions - vapora-agents/src/learning_profile.rs - data structures and expertise - vapora-agents/src/scoring.rs - unified scoring service - vapora-agents/src/profile_adapter.rs - adapter methods ## Tests Passing - learning_profile: 7 tests ✅ - scoring: 5 tests ✅ - profile_adapter: 6 tests ✅ - coordinator: learning-specific tests ✅ ## Data Flow 1. Task arrives → AgentCoordinator::assign_task() 2. Extract task_type from description 3. Query KG for task-type executions (load_learning_profile_from_kg) 4. Calculate expertise with recency bias 5. Score candidates (SwarmCoordinator + learning) 6. Assign to top-scored agent 7. Execution result → KG → Update learning profiles ## Key Design Decisions ✅ Recency bias: 7-day half-life with 3x weight for recent performance ✅ Confidence scoring: min(1.0, total_executions / 20) prevents overfitting ✅ Hierarchical scoring: 30% base load, 50% expertise, 20% confidence ✅ KG query limit: 100 recent executions per task-type for performance ✅ Async loading: load_learning_profile_from_kg supports concurrent loads ## Next: Phase 5.4 - Cost Optimization Ready to implement budget enforcement and cost-aware provider selection.
2026-01-11 13:03:53 +00:00
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vapora Logo - Sistema de Branding</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0a0a;
font-family: 'JetBrains Mono', monospace;
color: #fff;
padding: 40px;
}
h1 {
color: #22d3ee;
margin-bottom: 10px;
font-size: 28px;
}
.subtitle {
color: #a855f7;
margin-bottom: 40px;
font-size: 14px;
opacity: 0.8;
}
h2 {
color: #ec4899;
margin-top: 50px;
margin-bottom: 30px;
font-size: 18px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
h2:first-of-type {
margin-top: 0;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.preview {
border: 1px solid #333;
padding: 20px;
border-radius: 8px;
background: #111;
transition: border-color 0.3s;
}
.preview:hover {
border-color: #22d3ee;
}
.preview h3 {
color: #a855f7;
margin-bottom: 15px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.preview-wrapper {
display: flex;
align-items: center;
justify-content: center;
background: #000;
border-radius: 4px;
padding: 20px;
min-height: 180px;
}
.vertical .preview-wrapper {
min-height: 320px;
}
.preview-wrapper a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
position: relative;
}
.preview-wrapper a::after {
content: '🔗 Click to open';
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: #22d3ee;
padding: 8px 12px;
border-radius: 4px;
font-size: 10px;
opacity: 0;
transition: opacity 0.3s;
white-space: nowrap;
pointer-events: none;
}
.preview-wrapper a:hover::after {
opacity: 1;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.info {
margin-top: 12px;
padding: 10px;
background: #1a1a1a;
border-left: 2px solid #22d3ee;
font-size: 11px;
color: #666;
}
.variant-type {
display: inline-block;
font-size: 10px;
padding: 2px 6px;
background: #1a1a1a;
color: #888;
margin-top: 8px;
border-radius: 3px;
}
.specs-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.spec-card {
border: 1px solid #333;
padding: 25px;
border-radius: 8px;
background: #111;
transition: border-color 0.3s;
}
.spec-card:hover {
border-color: #ec4899;
}
.spec-card h3 {
color: #ec4899;
margin-bottom: 20px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.spec-content ul {
list-style: none;
margin-left: 0;
}
.spec-content li {
padding: 6px 0;
font-size: 12px;
color: #bbb;
border-bottom: 1px solid #1a1a1a;
}
.spec-content li:last-child {
border-bottom: none;
}
.spec-content p {
font-size: 12px;
color: #bbb;
margin: 10px 0;
}
.color-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 0;
border-bottom: 1px solid #1a1a1a;
}
.color-item:last-of-type {
border-bottom: none;
}
.color-box {
width: 50px;
height: 50px;
border-radius: 4px;
flex-shrink: 0;
}
.color-info {
flex: 1;
}
.color-info strong {
display: block;
color: #fff;
font-size: 12px;
margin-bottom: 4px;
}
.color-values {
margin-top: 8px;
}
.color-format {
font-size: 14px;
color: #aaa;
margin: 8px 0;
padding: 8px 0;
border-bottom: 1px solid #222;
}
.color-format:last-child {
border-bottom: none;
}
.color-format span {
color: #666;
font-weight: 600;
display: inline-block;
width: 45px;
}
.color-format {
display: flex;
align-items: center;
justify-content: space-between;
}
.color-code {
flex: 1;
color: #fff !important;
}
.copy-btn {
background: none;
border: none;
color: #555;
cursor: pointer;
font-size: 12px;
padding: 2px 6px;
border-radius: 3px;
margin-left: 8px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 4px;
}
.copy-btn:hover {
background: #1a1a1a;
color: #22d3ee;
}
.copy-btn.copied {
color: #4ade80;
}
</style>
</head>
<body>
<h1>🎨 Vapora Logo System</h1>
<p class="subtitle">Complete branding system with horizontal and vertical variations</p>
<div style="background: #1a1a1a; border-left: 3px solid #22d3ee; padding: 15px; margin-bottom: 30px; border-radius: 4px; font-size: 12px; color: #aaa;">
💡 <strong>Tip:</strong> Click on any logo preview to open it in a full-screen view in a new tab
</div>
<!-- HORIZONTAL LOGOS -->
<h2>📐 Horizontal Logos</h2>
<div class="container horizontal">
<!-- Animated -->
<div class="preview">
<h3>Animated (Color)</h3>
<div class="preview-wrapper">
<a href="./vapora.svg" target="_blank">
<img src="./vapora.svg" alt="Vapora Logo - Animated">
</a>
</div>
<div class="info">Main version with animations - Black background</div>
<span class="variant-type">animated</span>
</div>
<!-- White Background -->
<div class="preview">
<h3>White Background</h3>
<div class="preview-wrapper" style="background: #fff;">
<a href="./vapora_white.svg" target="_blank">
<img src="./vapora_white.svg" alt="Vapora Logo - White">
</a>
</div>
<div class="info">For light backgrounds - Static version</div>
<span class="variant-type">static</span>
</div>
<!-- Monochromatic -->
<div class="preview">
<h3>Monochromatic</h3>
<div class="preview-wrapper">
<a href="./vapora_mono.svg" target="_blank">
<img src="./vapora_mono.svg" alt="Vapora Logo - Mono">
</a>
</div>
<div class="info">Grayscale - For printing and B/W applications</div>
<span class="variant-type">static</span>
</div>
<!-- Favicon -->
<div class="preview">
<h3>Favicon</h3>
<div class="preview-wrapper">
<a href="./vapora_favicon.svg" target="_blank">
<img src="./vapora_favicon.svg" alt="Vapora Logo - Favicon">
</a>
</div>
<div class="info">64x64px - For browser tabs and favicons</div>
<span class="variant-type">animated</span>
</div>
<!-- Static -->
<div class="preview">
<h3>Static Version</h3>
<div class="preview-wrapper">
<a href="./vapora_static.svg" target="_blank">
<img src="./vapora_static.svg" alt="Vapora Logo - Static">
</a>
</div>
<div class="info">No animations - For documents and PDFs</div>
<span class="variant-type">static</span>
</div>
</div>
<!-- VERTICAL LOGOS -->
<h2>⬇️ Vertical Logos</h2>
<div class="container vertical">
<!-- Animated -->
<div class="preview">
<h3>Animated (Color)</h3>
<div class="preview-wrapper">
<a href="./vapora_v.svg" target="_blank">
<img src="./vapora_v.svg" alt="Vapora Logo Vertical - Animated">
</a>
</div>
<div class="info">Vertical version with animations - Image on top, text below</div>
<span class="variant-type">animated</span>
</div>
<!-- White Background -->
<div class="preview">
<h3>White Background</h3>
<div class="preview-wrapper" style="background: #fff;">
<a href="./vapora_v_white.svg" target="_blank">
<img src="./vapora_v_white.svg" alt="Vapora Logo Vertical - White">
</a>
</div>
<div class="info">For light backgrounds - Static version</div>
<span class="variant-type">static</span>
</div>
<!-- Monochromatic -->
<div class="preview">
<h3>Monochromatic</h3>
<div class="preview-wrapper">
<a href="./vapora_v_mono.svg" target="_blank">
<img src="./vapora_v_mono.svg" alt="Vapora Logo Vertical - Mono">
</a>
</div>
<div class="info">Grayscale - For printing</div>
<span class="variant-type">static</span>
</div>
<!-- Favicon Vertical -->
<div class="preview">
<h3>Favicon Vertical</h3>
<div class="preview-wrapper">
<a href="./vapora_v_favicon.svg" target="_blank">
<img src="./vapora_v_favicon.svg" alt="Vapora Logo Vertical - Favicon">
</a>
</div>
<div class="info">64x64px - Compact vertical version</div>
<span class="variant-type">animated</span>
</div>
<!-- Static Vertical -->
<div class="preview">
<h3>Static Version</h3>
<div class="preview-wrapper">
<a href="./vapora_v_static.svg" target="_blank">
<img src="./vapora_v_static.svg" alt="Vapora Logo Vertical - Static">
</a>
</div>
<div class="info">No animations - Vertical version for documents</div>
<span class="variant-type">static</span>
</div>
</div>
<!-- SPECIFICATIONS -->
<h2>🎯 Brand Specifications</h2>
<div class="specs-container">
<div class="spec-card">
<h3>Typography</h3>
<div class="spec-content">
<p><strong>Main Logo:</strong></p>
<ul>
<li>Font: JetBrains Mono / Fira Code</li>
<li>Style: Monospace</li>
<li>Weight: 800 (Bold)</li>
<li>Letter Spacing: 2-3px</li>
</ul>
<p style="margin-top: 15px;"><strong>Tagline:</strong></p>
<ul>
<li>Font: Inter</li>
<li>Style: Sans-serif</li>
<li>Size: 8px</li>
<li>Letter Spacing: 0.1em</li>
<li>Text: "Evaporate complexity"</li>
</ul>
</div>
</div>
<div class="spec-card">
<h3>Color Palette</h3>
<div class="spec-content">
<div class="color-item">
<div class="color-box" style="background: #22d3ee;"></div>
<div class="color-info">
<strong>Cyan</strong>
<div class="color-values">
<div class="color-format"><span>HTML:</span> <span class="color-code">#22d3ee</span> <button class="copy-btn" onclick="copyToClipboard('#22d3ee', this)">📋</button></div>
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(34, 211, 238)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(34, 211, 238)', this)">📋</button></div>
<div class="color-format"><span>CMYK:</span> <span class="color-code">86%, 11%, 0%, 7%</span> <button class="copy-btn" onclick="copyToClipboard('86%, 11%, 0%, 7%', this)">📋</button></div>
</div>
</div>
</div>
<div class="color-item">
<div class="color-box" style="background: #a855f7;"></div>
<div class="color-info">
<strong>Purple</strong>
<div class="color-values">
<div class="color-format"><span>HTML:</span> <span class="color-code">#a855f7</span> <button class="copy-btn" onclick="copyToClipboard('#a855f7', this)">📋</button></div>
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(168, 85, 247)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(168, 85, 247)', this)">📋</button></div>
<div class="color-format"><span>CMYK:</span> <span class="color-code">32%, 66%, 0%, 3%</span> <button class="copy-btn" onclick="copyToClipboard('32%, 66%, 0%, 3%', this)">📋</button></div>
</div>
</div>
</div>
<div class="color-item">
<div class="color-box" style="background: #ec4899;"></div>
<div class="color-info">
<strong>Pink</strong>
<div class="color-values">
<div class="color-format"><span>HTML:</span> <span class="color-code">#ec4899</span> <button class="copy-btn" onclick="copyToClipboard('#ec4899', this)">📋</button></div>
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(236, 72, 153)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(236, 72, 153)', this)">📋</button></div>
<div class="color-format"><span>CMYK:</span> <span class="color-code">0%, 70%, 35%, 8%</span> <button class="copy-btn" onclick="copyToClipboard('0%, 70%, 35%, 8%', this)">📋</button></div>
</div>
</div>
</div>
<div class="color-item">
<div class="color-box" style="background: #000000; border: 1px solid #333;"></div>
<div class="color-info">
<strong>Black Background</strong>
<div class="color-values">
<div class="color-format"><span>HTML:</span> <span class="color-code">#000000</span> <button class="copy-btn" onclick="copyToClipboard('#000000', this)">📋</button></div>
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(0, 0, 0)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(0, 0, 0)', this)">📋</button></div>
<div class="color-format"><span>CMYK:</span> <span class="color-code">0%, 0%, 0%, 100%</span> <button class="copy-btn" onclick="copyToClipboard('0%, 0%, 0%, 100%', this)">📋</button></div>
</div>
</div>
</div>
<div class="color-item">
<div class="color-box" style="background: #ffffff; border: 1px solid #ddd;"></div>
<div class="color-info">
<strong>White Background</strong>
<div class="color-values">
<div class="color-format"><span>HTML:</span> <span class="color-code">#ffffff</span> <button class="copy-btn" onclick="copyToClipboard('#ffffff', this)">📋</button></div>
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(255, 255, 255)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(255, 255, 255)', this)">📋</button></div>
<div class="color-format"><span>CMYK:</span> <span class="color-code">0%, 0%, 0%, 0%</span> <button class="copy-btn" onclick="copyToClipboard('0%, 0%, 0%, 0%', this)">📋</button></div>
</div>
</div>
</div>
<p style="margin-top: 15px; font-size: 11px; color: #888;"><strong>Gradient:</strong> Cyan → Purple → Pink (horizontal transition)</p>
</div>
</div>
</div>
<script>
function copyToClipboard(text, button) {
// Copy to clipboard
navigator.clipboard.writeText(text).then(() => {
// Add visual feedback
const originalText = button.textContent;
button.classList.add('copied');
button.textContent = '✓';
// Reset after 2 seconds
setTimeout(() => {
button.classList.remove('copied');
button.textContent = originalText;
}, 2000);
}).catch(() => {
// Fallback for older browsers
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
// Add visual feedback
const originalText = button.textContent;
button.classList.add('copied');
button.textContent = '✓';
setTimeout(() => {
button.classList.remove('copied');
button.textContent = originalText;
}, 2000);
});
}
</script>
</body>
</html>