|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Avi Agent for Marketing</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
.node-animation { |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.node-success { |
|
|
background-color: #10B981; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.7; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
|
|
<header class="py-4 px-6 bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center"> |
|
|
<a href="index.html" class="text-xl font-bold text-[#059BD2]">OrchestrateAI Workflow</h1> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="max-w-6xl mx-auto px-4 py-8"> |
|
|
<div class="bg-white rounded-3xl shadow-2xl p-8"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-8">n8n Node Processing Pipeline</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> |
|
|
<div class="bg-[#059BD2] p-6 rounded-2xl text-white node-animation">1. User Input Node</div> |
|
|
<div class="text-center text-gray-600 mb-4">Accepts natural language request and initiates workflow</div> |
|
|
|
|
|
<div class="flex items-center justify-center"> |
|
|
<div class="w-4 h-4 bg-[#ff6600] rounded-full"></div> |
|
|
<span>Input validation & preprocessing</span> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow-lg node-animation">2. Data Chunking Node</div> |
|
|
<div class="text-center text-gray-600">Text segmentation with semantic boundaries</div> |
|
|
|
|
|
<div class="bg-[#04749D] p-6 rounded-2xl text-white node-animation">3. ALFA RAG Retriever</div> |
|
|
|
|
|
<div class="bg-[#059BD2] p-6 rounded-2xl text-white node-animation">4. Semantic Reranking</div> |
|
|
|
|
|
<div class="bg-[#ff6600] p-6 rounded-2xl text-white node-animation">5. Context Fusion</div> |
|
|
<div class="bg-[#059BD2] p-6 rounded-2xl text-white node-animation">6. MCP Agent Dispatch</div> |
|
|
|
|
|
<div class="bg-[#ff6600] p-6 rounded-2xl text-white node-animation">7. Multi-agent Coordination</div> |
|
|
|
|
|
<div class="bg-[#04749D] p-6 rounded-2xl text-white node-animation">8. Response Generation</div> |
|
|
|
|
|
<div class="bg-[#059BD2] p-6 rounded-2xl text-white node-animation">9. HITL Approval Interface</div> |
|
|
|
|
|
<div class="bg-[#ffecdc] p-6 rounded-2xl node-animation">10. Revision Cycle Management</div> |
|
|
|
|
|
<div class="bg-[#059BD2] p-6 rounded-2xl text-white node-animation">11. Output Formatting</div> |
|
|
|
|
|
<div class="bg-[#059BD2] p-6 rounded-2xl text-white node-animation">12. Quality Assurance Check</div> |
|
|
|
|
|
<div class="bg-[#ff6600] p-6 rounded-2xl text-white node-animation">13. Final Packaging</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-gradient-to-r from-[#ffecdc] to-[#c5effe] p-6 rounded-2xl text-gray-800 node-animation">Deliverable Generation</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4">Live Processing Status</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between p-4 border-2 border-[#059BD2] rounded-xl"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-3 h-3 bg-green-500 rounded-full"></div> |
|
|
<span>Processing complete - All nodes executed successfully</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const nodes = document.querySelectorAll('.node-animation'); |
|
|
nodes.forEach((node, index) => { |
|
|
setTimeout(() => { |
|
|
node.classList.add('node-success'); |
|
|
}, |
|
|
</body> |
|
|
</html> |
