{% extends 'layout.html' %} {% block content %} <div class="row mb-4"> <div class="col-12"> <div class="glass-card"> <div class="p-4"> <h1 class="display-5 quantum-glow"> <i class="fas fa-cogs me-2"></i> Automation Workflow </h1> <p class="lead">Visualize and manage the multi-dimensional quantum processing pipeline.</p> <div class="vision-progress"> <div class="vision-progress-bar"></div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="glass-card mb-4"> <div class="card-body p-4"> <h3 class="h4 mb-4 quantum-glow">Quantum Processing Pipeline</h3> <!-- Pyramid Workflow Visualization --> <div class="workflow-pyramid-container"> <div class="workflow-pyramid position-relative"> {% for step in workflow_steps %} <div class="workflow-step {% if step.status == 'completed' %}completed{% elif step.status == 'active' %}active{% else %}pending{% endif %}" data-step-id="{{ step.id }}" style="--step-color: {{ step.color }};"> <div class="step-indicator"> <div class="step-number">{{ step.id }}</div> <div class="step-line"></div> </div> <div class="step-content"> <h4 class="step-title">{{ step.name }}</h4> <p class="step-desc">{{ step.description }}</p> <span class="step-status badge {% if step.status == 'completed' %}bg-success{% elif step.status == 'active' %}bg-info{% else %}bg-secondary{% endif %} quantum-score"> {{ step.status | capitalize }} </span> </div> <!-- LED tracer lines connecting steps --> {% if not loop.last %} <div class="step-connector" style="--connector-color: {{ step.color }};"></div> {% endif %} </div> {% endfor %} <!-- 3D Tetrahedron visualization at the bottom --> <div class="tetrahedron-container"> <div class="tetrahedron"> <div class="tetra-face tetra-face-1"></div> <div class="tetra-face tetra-face-2"></div> <div class="tetra-face tetra-face-3"></div> <div class="tetra-face tetra-face-4"></div> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="glass-card mb-4"> <div class="card-body p-4"> <h3 class="h4 mb-4 quantum-glow">Workflow Status</h3> <div class="mb-4"> <div class="d-flex justify-content-between align-items-center mb-2"> <span>Overall Progress</span> <span class="badge bg-info quantum-score">60%</span> </div> <div class="progress" style="height: 8px;"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="workflow-stats"> <div class="stat-item mb-3"> <div class="d-flex justify-content-between"> <span>Completed Steps</span> <span class="fw-bold text-success">2</span> </div> </div> <div class="stat-item mb-3"> <div class="d-flex justify-content-between"> <span>Active Steps</span> <span class="fw-bold text-info">1</span> </div> </div> <div class="stat-item mb-3"> <div class="d-flex justify-content-between"> <span>Pending Steps</span> <span class="fw-bold text-secondary">2</span> </div> </div> <div class="stat-item mb-3"> <div class="d-flex justify-content-between"> <span>Total Execution Time</span> <span class="fw-bold">2.4s</span> </div> </div> </div> <div class="mt-4 d-grid"> <button class="btn btn-outline-light quantum-btn"> <i class="fas fa-play me-2"></i> Run Workflow </button> </div> </div> </div> <div class="glass-card"> <div class="card-body p-4"> <h3 class="h4 mb-4 quantum-glow">Current Activity</h3> <div class="activity-log" id="activity-log"> <div class="activity-item"> <div class="activity-timestamp">11:15:30</div> <div class="activity-content"> <span class="badge bg-success me-1">Step 2</span> NLP Processing completed </div> </div> <div class="activity-item"> <div class="activity-timestamp">11:15:28</div> <div class="activity-content"> <span class="badge bg-info me-1">Step 3</span> Starting Quantum Thinking algorithm </div> </div> <div class="activity-item"> <div class="activity-timestamp">11:15:25</div> <div class="activity-content"> <span class="badge bg-success me-1">Step 1</span> Text input received (128 chars) </div> </div> </div> </div> </div> </div> </div> <style> /* Workflow Pyramid Container */ .workflow-pyramid-container { padding: 20px 0; position: relative; } .workflow-pyramid { display: flex; flex-direction: column; gap: 30px; padding: 20px; position: relative; } /* Workflow Steps */ .workflow-step { --step-bg: rgba(30, 41, 59, 0.4); --step-border: var(--step-color); display: flex; background: var(--step-bg); border-radius: 12px; padding: 15px; position: relative; transition: all 0.3s ease; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); border-left: 3px solid var(--step-border); } .workflow-step:hover { transform: translateY(-5px); } .workflow-step.completed { --step-bg: rgba(40, 167, 69, 0.1); } .workflow-step.active { --step-bg: rgba(13, 202, 240, 0.1); animation: step-pulse 2s infinite alternate; } @keyframes step-pulse { 0% { box-shadow: 0 0 5px var(--step-color); } 100% { box-shadow: 0 0 15px var(--step-color); } } /* Step Connector - LED Tracer Lines */ .step-connector { position: absolute; left: 24px; top: 100%; height: 30px; width: 2px; background: linear-gradient(to bottom, var(--connector-color), transparent); z-index: 1; animation: pulse-connector 2s infinite alternate; } @keyframes pulse-connector { 0% { opacity: 0.5; } 100% { opacity: 1; } } /* Step Content */ .step-indicator { display: flex; flex-direction: column; align-items: center; margin-right: 15px; } .step-number { width: 32px; height: 32px; border-radius: 50%; background: var(--step-color); display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; box-shadow: 0 0 10px var(--step-color); } .step-line { width: 2px; height: 100%; background-color: var(--step-color); opacity: 0.5; } .step-content { flex: 1; } .step-title { font-size: 1.1rem; margin-bottom: 5px; color: var(--step-color); } .step-desc { font-size: 0.9rem; opacity: 0.8; margin-bottom: 10px; } /* 3D Tetrahedron */ .tetrahedron-container { margin-top: 30px; height: 150px; display: flex; justify-content: center; align-items: center; perspective: 1000px; } .tetrahedron { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; animation: tetra-rotate 15s linear infinite; } @keyframes tetra-rotate { 0% { transform: rotateX(0) rotateY(0); } 100% { transform: rotateX(360deg) rotateY(360deg); } } .tetra-face { position: absolute; width: 0; height: 0; border-style: solid; opacity: 0.7; backface-visibility: visible; } .tetra-face-1 { border-width: 0 50px 86.6px 50px; border-color: transparent transparent rgba(218, 75, 134, 0.5) transparent; transform: rotateX(30deg) translateY(-50px) translateZ(28.87px); } .tetra-face-2 { border-width: 0 50px 86.6px 50px; border-color: transparent transparent rgba(111, 66, 193, 0.5) transparent; transform: rotateX(30deg) rotateY(120deg) translateY(-50px) translateZ(28.87px); } .tetra-face-3 { border-width: 0 50px 86.6px 50px; border-color: transparent transparent rgba(13, 202, 240, 0.5) transparent; transform: rotateX(30deg) rotateY(240deg) translateY(-50px) translateZ(28.87px); } .tetra-face-4 { border-width: 0 50px 86.6px 50px; border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent; transform: rotateX(-30deg) rotateY(0deg) translateY(50px) translateZ(28.87px); } /* Activity Log */ .activity-log { display: flex; flex-direction: column; gap: 15px; height: 200px; overflow-y: auto; } .activity-item { display: flex; gap: 10px; font-size: 0.9rem; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .activity-timestamp { color: rgba(255, 255, 255, 0.6); white-space: nowrap; } .activity-content { flex: 1; } </style> <script> document.addEventListener('DOMContentLoaded', function() { // Animate the workflow steps on load const steps = document.querySelectorAll('.workflow-step'); steps.forEach((step, index) => { setTimeout(() => { step.classList.add('fade-in'); }, index * 200); }); // Simulate activity log updates const activityLog = document.getElementById('activity-log'); const activities = [ { time: '11:15:35', step: 3, message: 'Processing quantum dimension 1/3' }, { time: '11:15:42', step: 3, message: 'Processing quantum dimension 2/3' }, { time: '11:15:50', step: 3, message: 'Processing quantum dimension 3/3' } ]; let i = 0; const activityTimer = setInterval(() => { if (i >= activities.length) { clearInterval(activityTimer); return; } const activity = activities[i]; const activityItem = document.createElement('div'); activityItem.className = 'activity-item'; activityItem.innerHTML = ` <div class="activity-timestamp">${activity.time}</div> <div class="activity-content"> <span class="badge bg-info me-1">Step ${activity.step}</span> ${activity.message} </div> `; activityLog.insertBefore(activityItem, activityLog.firstChild); // Apply fade-in effect activityItem.style.opacity = '0'; setTimeout(() => { activityItem.style.transition = 'opacity 0.5s ease'; activityItem.style.opacity = '1'; }, 10); i++; }, 5000); // Add particle effects to the tetrahedron const tetrahedron = document.querySelector('.tetrahedron'); setInterval(() => { const rect = tetrahedron.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top + rect.height / 2; // Random position around the tetrahedron const angle = Math.random() * Math.PI * 2; const distance = 20 + Math.random() * 30; const particleX = x + Math.cos(angle) * distance; const particleY = y + Math.sin(angle) * distance; // Create particle createParticle(particleX, particleY); }, 300); function createParticle(x, y) { const colors = ['#da4b86', '#6f42c1', '#0dcaf0']; const color = colors[Math.floor(Math.random() * colors.length)]; const particle = document.createElement('div'); particle.className = 'quantum-particle'; particle.style.left = x + 'px'; particle.style.top = y + 'px'; particle.style.color = color; document.body.appendChild(particle); // Remove after animation setTimeout(() => { particle.remove(); }, 1000); } }); </script> {% endblock %}