| import streamlit as st
|
| import streamlit.components.v1 as components
|
| import numpy as np
|
| import json
|
| import math
|
| import random
|
|
|
| def get_color_by_state(state):
|
| """Get color for task state"""
|
| color_map = {
|
| 'PENDING': '#4299e1',
|
| 'IN_PROGRESS': '#f6ad55',
|
| 'COMPLETED': '#68d391',
|
| 'BLOCKED': '#fc8181'
|
| }
|
| return color_map.get(state, '#4299e1')
|
|
|
| def quantum_simulation_visualizer(simulation_data, height=700):
|
| """Create an advanced quantum simulation visualization with interactive animations"""
|
|
|
| if not simulation_data:
|
| return None
|
|
|
|
|
| steps = simulation_data.get('simulation_steps', [])
|
| tasks = simulation_data.get('tasks', [])
|
| entanglement_matrix = simulation_data.get('entanglement_matrix', [])
|
|
|
| if not steps or not tasks:
|
| return None
|
|
|
|
|
| task_data = {}
|
| for task in tasks:
|
| task_id = task.get('id')
|
| task_data[task_id] = {
|
| 'title': task.get('title', 'Unknown Task'),
|
| 'initial_state': task.get('state', 'PENDING'),
|
| 'color': get_color_by_state(task.get('state', 'PENDING')),
|
| 'priority': task.get('priority', 1)
|
| }
|
|
|
|
|
| vis_steps = []
|
| for i, step in enumerate(steps):
|
| step_data = {'step': i, 'tasks': {}}
|
| for task_id, task_step_data in step.items():
|
|
|
| if task_id not in task_data:
|
| continue
|
|
|
| entropy = task_step_data.get('entropy', 0.5)
|
| state = task_step_data.get('state', task_data[task_id]['initial_state'])
|
| prob_dist = task_step_data.get('probability_distribution', {})
|
|
|
|
|
| if not prob_dist:
|
| prob_dist = {'PENDING': 0.25, 'IN_PROGRESS': 0.25, 'COMPLETED': 0.25, 'BLOCKED': 0.25}
|
|
|
|
|
| quantum_state = task_step_data.get('quantum_state', {})
|
| vis_data = quantum_state.get('visualization_data', [0.25, 0.25, 0.25, 0.25])
|
|
|
|
|
| step_data['tasks'][task_id] = {
|
| 'title': task_data[task_id]['title'],
|
| 'state': state,
|
| 'entropy': entropy,
|
| 'color': get_color_by_state(state),
|
| 'probability_distribution': prob_dist,
|
| 'bloch_vector': vis_data[:3] if len(vis_data) >= 3 else [0, 0, 0]
|
| }
|
|
|
| vis_steps.append(step_data)
|
|
|
|
|
| steps_json = json.dumps(vis_steps)
|
| tasks_json = json.dumps(task_data)
|
| entanglement_json = json.dumps(entanglement_matrix)
|
|
|
|
|
| d3_src = "https://d3js.org/d3.v7.min.js"
|
| three_src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
|
|
|
|
|
| html_content = f"""
|
| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <meta charset="utf-8">
|
| <script src="{d3_src}"></script>
|
| <script src="{three_src}"></script>
|
| <style>
|
| body {{
|
| margin: 0;
|
| padding: 0;
|
| font-family: sans-serif;
|
| background: transparent;
|
| color: #f8fafc;
|
| }}
|
| #quantum-simulation {{
|
| width: 100%;
|
| height: {height}px;
|
| position: relative;
|
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
| border-radius: 8px;
|
| overflow: hidden;
|
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
| }}
|
| .control-panel {{
|
| position: absolute;
|
| top: 20px;
|
| left: 20px;
|
| width: 180px;
|
| background: rgba(15, 23, 42, 0.8);
|
| padding: 15px;
|
| border-radius: 8px;
|
| z-index: 100;
|
| backdrop-filter: blur(4px);
|
| border: 1px solid rgba(100, 116, 139, 0.2);
|
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| }}
|
| .panel-title {{
|
| margin: 0 0 15px 0;
|
| color: #e2e8f0;
|
| font-size: 16px;
|
| font-weight: 600;
|
| text-align: center;
|
| }}
|
| .progress-tracker {{
|
| width: 100%;
|
| height: 5px;
|
| background: rgba(100, 116, 139, 0.2);
|
| margin: 10px 0;
|
| border-radius: 3px;
|
| overflow: hidden;
|
| }}
|
| .progress-fill {{
|
| height: 100%;
|
| width: 0%;
|
| background: linear-gradient(90deg, #4338CA, #3B82F6);
|
| transition: width 0.3s ease;
|
| }}
|
| .control-button {{
|
| background: rgba(59, 130, 246, 0.2);
|
| border: 1px solid rgba(59, 130, 246, 0.5);
|
| color: #e2e8f0;
|
| width: 40px;
|
| height: 40px;
|
| border-radius: 50%;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| cursor: pointer;
|
| font-size: 18px;
|
| transition: all 0.2s ease;
|
| margin: 0 5px;
|
| }}
|
| .control-button:hover {{
|
| background: rgba(59, 130, 246, 0.4);
|
| }}
|
| .control-button:active {{
|
| transform: scale(0.95);
|
| }}
|
| .controls {{
|
| display: flex;
|
| justify-content: center;
|
| margin-top: 15px;
|
| }}
|
| .step-counter {{
|
| text-align: center;
|
| margin: 10px 0;
|
| color: #e2e8f0;
|
| font-size: 14px;
|
| }}
|
| .vizcontainer {{
|
| display: flex;
|
| position: absolute;
|
| top: 20px;
|
| left: 220px;
|
| right: 20px;
|
| bottom: 20px;
|
| }}
|
| .task-panel {{
|
| width: 300px;
|
| height: 100%;
|
| background: rgba(15, 23, 42, 0.7);
|
| border-radius: 8px;
|
| padding: 15px;
|
| overflow-y: auto;
|
| backdrop-filter: blur(4px);
|
| border: 1px solid rgba(100, 116, 139, 0.2);
|
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| margin-right: 15px;
|
| }}
|
| .vizspace {{
|
| flex: 1;
|
| position: relative;
|
| background: rgba(15, 23, 42, 0.5);
|
| border-radius: 8px;
|
| overflow: hidden;
|
| padding: 15px;
|
| backdrop-filter: blur(4px);
|
| border: 1px solid rgba(100, 116, 139, 0.2);
|
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| display: flex;
|
| flex-direction: column;
|
| }}
|
| .visualization-container {{
|
| flex: 1;
|
| position: relative;
|
| overflow: hidden;
|
| }}
|
| #bloch-sphere {{
|
| width: 100%;
|
| height: 50%;
|
| position: relative;
|
| }}
|
| #network-viz {{
|
| width: 100%;
|
| height: 50%;
|
| position: relative;
|
| }}
|
| .task-card {{
|
| background: rgba(30, 41, 59, 0.6);
|
| border-radius: 6px;
|
| margin-bottom: 10px;
|
| padding: 12px;
|
| border-left: 4px solid #3B82F6;
|
| transition: all 0.3s ease;
|
| position: relative;
|
| overflow: hidden;
|
| }}
|
| .task-card.active {{
|
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
|
| transform: translateX(5px);
|
| }}
|
| .task-card-title {{
|
| font-weight: 600;
|
| margin: 0 0 5px 0;
|
| font-size: 14px;
|
| color: #e2e8f0;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| }}
|
| .task-state {{
|
| padding: 3px 6px;
|
| border-radius: 4px;
|
| font-size: 11px;
|
| font-weight: 500;
|
| }}
|
| .task-entropy {{
|
| margin: 10px 0 5px 0;
|
| font-size: 12px;
|
| color: #cbd5e1;
|
| }}
|
| .entropy-bar {{
|
| height: 4px;
|
| background: rgba(100, 116, 139, 0.2);
|
| margin-top: 3px;
|
| border-radius: 2px;
|
| overflow: hidden;
|
| }}
|
| .entropy-fill {{
|
| height: 100%;
|
| background: linear-gradient(90deg, #4338CA, #3B82F6);
|
| width: 0%;
|
| transition: width 0.5s ease;
|
| }}
|
| .probabilities {{
|
| display: flex;
|
| margin-top: 8px;
|
| height: 20px;
|
| border-radius: 4px;
|
| overflow: hidden;
|
| }}
|
| .prob-segment {{
|
| height: 100%;
|
| transition: width 0.5s ease;
|
| position: relative;
|
| }}
|
| .prob-label {{
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| transform: translate(-50%, -50%);
|
| font-size: 10px;
|
| white-space: nowrap;
|
| color: rgba(255, 255, 255, 0.9);
|
| font-weight: 600;
|
| text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
|
| opacity: 0;
|
| transition: opacity 0.3s ease;
|
| }}
|
| .prob-segment:hover .prob-label {{
|
| opacity: 1;
|
| }}
|
| .quantum-pulse {{
|
| position: absolute;
|
| top: 0;
|
| right: 0;
|
| width: 8px;
|
| height: 8px;
|
| border-radius: 50%;
|
| background: #3B82F6;
|
| opacity: 0.8;
|
| }}
|
| @keyframes pulse {{
|
| 0% {{
|
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8);
|
| }}
|
| 70% {{
|
| box-shadow: 0 0 0 5px rgba(59, 130, 246, 0);
|
| }}
|
| 100% {{
|
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
|
| }}
|
| }}
|
| .quantum-particles {{
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| pointer-events: none;
|
| z-index: 0;
|
| }}
|
| .particle {{
|
| position: absolute;
|
| width: 2px;
|
| height: 2px;
|
| border-radius: 50%;
|
| background: rgba(59, 130, 246, 0.7);
|
| opacity: 0.5;
|
| animation: float 15s infinite linear;
|
| }}
|
| @keyframes float {{
|
| 0% {{ transform: translateY(0) translateX(0); opacity: 0; }}
|
| 10% {{ opacity: 0.5; }}
|
| 90% {{ opacity: 0.5; }}
|
| 100% {{ transform: translateY(-100px) translateX(50px); opacity: 0; }}
|
| }}
|
| /* Tabs styling */
|
| .viz-tabs {{
|
| display: flex;
|
| margin-bottom: 10px;
|
| }}
|
| .viz-tab {{
|
| padding: 8px 15px;
|
| cursor: pointer;
|
| border-radius: 6px 6px 0 0;
|
| background: rgba(30, 41, 59, 0.4);
|
| margin-right: 3px;
|
| font-size: 13px;
|
| transition: all 0.2s ease;
|
| }}
|
| .viz-tab.active {{
|
| background: rgba(59, 130, 246, 0.2);
|
| border-bottom: 2px solid #3B82F6;
|
| }}
|
| .viz-tab:hover:not(.active) {{
|
| background: rgba(30, 41, 59, 0.7);
|
| }}
|
| .viz-panel {{
|
| display: none;
|
| height: calc(100% - 40px);
|
| }}
|
| .viz-panel.active {{
|
| display: block;
|
| }}
|
| .matrix-viz {{
|
| width: 100%;
|
| padding: 15px;
|
| box-sizing: border-box;
|
| }}
|
| /* Tooltip */
|
| .tooltip {{
|
| position: absolute;
|
| background: rgba(15, 23, 42, 0.9);
|
| border: 1px solid #3B82F6;
|
| border-radius: 6px;
|
| padding: 10px;
|
| font-size: 12px;
|
| pointer-events: none;
|
| z-index: 1000;
|
| opacity: 0;
|
| transition: opacity 0.2s;
|
| max-width: 220px;
|
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
|
| }}
|
| #label-placeholder {{
|
| margin-top: 5px;
|
| font-size: 13px;
|
| text-align: center;
|
| color: #94a3b8;
|
| }}
|
| /* Animations */
|
| .animation-container {{
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| pointer-events: none;
|
| z-index: 50;
|
| opacity: 0;
|
| transition: opacity 0.3s;
|
| }}
|
| .show-animation {{
|
| opacity: 1;
|
| }}
|
| </style>
|
| </head>
|
| <body>
|
| <div id="quantum-simulation">
|
| <div class="quantum-particles" id="particles"></div>
|
|
|
| <!-- Control Panel -->
|
| <div class="control-panel">
|
| <h3 class="panel-title">Quantum Simulation</h3>
|
| <div class="progress-tracker">
|
| <div class="progress-fill" id="progress-bar"></div>
|
| </div>
|
| <div class="step-counter">
|
| Step <span id="step-counter">1</span> of <span id="step-total">5</span>
|
| </div>
|
| <div class="controls">
|
| <div class="control-button" id="prev-btn">⟨</div>
|
| <div class="control-button" id="play-btn">▶</div>
|
| <div class="control-button" id="next-btn">⟩</div>
|
| </div>
|
| </div>
|
|
|
| <!-- Visualization Space -->
|
| <div class="vizcontainer">
|
| <!-- Task Panel -->
|
| <div class="task-panel" id="task-panel">
|
| <!-- Task cards will be rendered here -->
|
| </div>
|
|
|
| <!-- Visualization Space -->
|
| <div class="vizspace">
|
| <!-- Tabs -->
|
| <div class="viz-tabs">
|
| <div class="viz-tab active" data-tab="bloch">Quantum States</div>
|
| <div class="viz-tab" data-tab="network">Entanglement Network</div>
|
| <div class="viz-tab" data-tab="matrix">Entanglement Matrix</div>
|
| </div>
|
|
|
| <!-- Visualization Panels -->
|
| <div class="visualization-container">
|
| <!-- Bloch Sphere Viz Panel -->
|
| <div class="viz-panel active" id="bloch-panel">
|
| <div id="bloch-sphere"></div>
|
| <div id="label-placeholder">Select a task to see its quantum state visualization</div>
|
| </div>
|
|
|
| <!-- Network Viz Panel -->
|
| <div class="viz-panel" id="network-panel">
|
| <div id="network-viz"></div>
|
| </div>
|
|
|
| <!-- Matrix Viz Panel -->
|
| <div class="viz-panel" id="matrix-panel">
|
| <div class="matrix-viz" id="matrix-viz"></div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <!-- Tooltip -->
|
| <div class="tooltip" id="tooltip"></div>
|
|
|
| <!-- Animation container for transitions -->
|
| <div class="animation-container" id="animation-container"></div>
|
| </div>
|
|
|
| <script>
|
| // Simulation data
|
| const simulationSteps = {steps_json};
|
| const tasksData = {tasks_json};
|
| const entanglementMatrix = {entanglement_json};
|
|
|
| // State
|
| let currentStep = 0;
|
| let isPlaying = false;
|
| let playInterval;
|
| let selectedTaskId = null;
|
| let blochSphere;
|
| let network;
|
|
|
| // Elements
|
| const prevBtn = document.getElementById('prev-btn');
|
| const playBtn = document.getElementById('play-btn');
|
| const nextBtn = document.getElementById('next-btn');
|
| const progressBar = document.getElementById('progress-bar');
|
| const stepCounter = document.getElementById('step-counter');
|
| const stepTotal = document.getElementById('step-total');
|
| const taskPanel = document.getElementById('task-panel');
|
| const tooltip = document.getElementById('tooltip');
|
| const blochPanel = document.getElementById('bloch-panel');
|
| const networkPanel = document.getElementById('network-panel');
|
| const matrixPanel = document.getElementById('matrix-panel');
|
| const labelPlaceholder = document.getElementById('label-placeholder');
|
| const animationContainer = document.getElementById('animation-container');
|
|
|
| // Initialize particles
|
| function createParticles() {{
|
| const particlesContainer = document.getElementById('particles');
|
| for (let i = 0; i < 50; i++) {{
|
| const particle = document.createElement('div');
|
| particle.className = 'particle';
|
| particle.style.left = Math.random() * 100 + '%';
|
| particle.style.top = Math.random() * 100 + '%';
|
| particle.style.animationDelay = (Math.random() * 10) + 's';
|
| particlesContainer.appendChild(particle);
|
| }}
|
| }}
|
|
|
| // Initialize tabs
|
| function initTabs() {{
|
| const tabs = document.querySelectorAll('.viz-tab');
|
| tabs.forEach(tab => {{
|
| tab.addEventListener('click', () => {{
|
| // Update active tab
|
| tabs.forEach(t => t.classList.remove('active'));
|
| tab.classList.add('active');
|
|
|
| // Update active panel
|
| const panels = document.querySelectorAll('.viz-panel');
|
| panels.forEach(p => p.classList.remove('active'));
|
| const panelId = tab.getAttribute('data-tab') + '-panel';
|
| document.getElementById(panelId).classList.add('active');
|
| }});
|
| }});
|
| }}
|
|
|
| // Update UI for current step
|
| function updateUI() {{
|
| // Update progress
|
| const progress = (currentStep / (simulationSteps.length - 1)) * 100;
|
| progressBar.style.width = `${{progress}}%`;
|
| stepCounter.textContent = currentStep + 1;
|
| stepTotal.textContent = simulationSteps.length;
|
|
|
| // Get current step data
|
| const stepData = simulationSteps[currentStep];
|
|
|
| // Update task cards
|
| updateTaskCards(stepData);
|
|
|
| // Update visualizations
|
| if (selectedTaskId) {{
|
| updateBlochSphere(selectedTaskId, stepData);
|
| }}
|
| updateNetworkVisualization(stepData);
|
| updateMatrixVisualization();
|
| }}
|
|
|
| // Initialize task cards
|
| function initTaskCards() {{
|
| taskPanel.innerHTML = '';
|
| const firstStep = simulationSteps[0];
|
|
|
| for (const [taskId, task] of Object.entries(firstStep.tasks)) {{
|
| // Create task card
|
| const card = document.createElement('div');
|
| card.className = 'task-card';
|
| card.id = `task-card-${{taskId}}`;
|
| card.style.borderLeftColor = task.color;
|
|
|
| // Pulse indicator
|
| const pulse = document.createElement('div');
|
| pulse.className = 'quantum-pulse';
|
| pulse.style.animation = 'pulse 2s infinite';
|
| card.appendChild(pulse);
|
|
|
| // Title
|
| const title = document.createElement('div');
|
| title.className = 'task-card-title';
|
| title.innerHTML = `
|
| <span>${{task.title}}</span>
|
| <span class="task-state" style="background: ${{task.color}}20; color: ${{task.color}}">
|
| ${{task.state}}
|
| </span>
|
| `;
|
| card.appendChild(title);
|
|
|
| // Entropy
|
| const entropy = document.createElement('div');
|
| entropy.className = 'task-entropy';
|
| entropy.innerHTML = `
|
| Entropy: <span id="entropy-value-${{taskId}}">${{task.entropy.toFixed(2)}}</span>
|
| <div class="entropy-bar">
|
| <div class="entropy-fill" id="entropy-fill-${{taskId}}" style="width: ${{task.entropy * 100}}%"></div>
|
| </div>
|
| `;
|
| card.appendChild(entropy);
|
|
|
| // Probability distribution
|
| const probs = document.createElement('div');
|
| probs.className = 'probabilities';
|
| probs.id = `probs-${{taskId}}`;
|
|
|
| // Add probability segments
|
| for (const [state, prob] of Object.entries(task.probability_distribution)) {{
|
| const segment = document.createElement('div');
|
| segment.className = 'prob-segment';
|
| segment.style.width = `${{prob * 100}}%`;
|
| segment.style.background = getColorByState(state);
|
|
|
| const label = document.createElement('div');
|
| label.className = 'prob-label';
|
| label.textContent = `${{state}}: ${{(prob * 100).toFixed(0)}}%`;
|
| segment.appendChild(label);
|
|
|
| probs.appendChild(segment);
|
| }}
|
|
|
| card.appendChild(probs);
|
|
|
| // Add click event
|
| card.addEventListener('click', () => {{
|
| selectTask(taskId);
|
| }});
|
|
|
| // Add hover event for tooltip
|
| card.addEventListener('mouseover', event => {{
|
| showTooltip(event, task, taskId);
|
| }});
|
|
|
| card.addEventListener('mousemove', event => {{
|
| positionTooltip(event);
|
| }});
|
|
|
| card.addEventListener('mouseout', () => {{
|
| hideTooltip();
|
| }});
|
|
|
| taskPanel.appendChild(card);
|
| }}
|
|
|
| // Select first task by default
|
| if (Object.keys(firstStep.tasks).length > 0) {{
|
| selectTask(Object.keys(firstStep.tasks)[0]);
|
| }}
|
| }}
|
|
|
| // Update task cards for current step
|
| function updateTaskCards(stepData) {{
|
| for (const [taskId, task] of Object.entries(stepData.tasks)) {{
|
| const card = document.getElementById(`task-card-${{taskId}}`);
|
| if (!card) continue;
|
|
|
| // Update state
|
| const stateEl = card.querySelector('.task-state');
|
| stateEl.textContent = task.state;
|
| stateEl.style.background = `${{task.color}}20`;
|
| stateEl.style.color = task.color;
|
|
|
| // Update card border
|
| card.style.borderLeftColor = task.color;
|
|
|
| // Update entropy with animation
|
| const entropyValue = card.querySelector(`#entropy-value-${{taskId}}`);
|
| const entropyFill = card.querySelector(`#entropy-fill-${{taskId}}`);
|
|
|
| // Animate entropy change
|
| animateValue(entropyValue, parseFloat(entropyValue.textContent), task.entropy, 500);
|
| entropyFill.style.width = `${{task.entropy * 100}}%`;
|
|
|
| // Update probability distribution
|
| const probs = card.querySelector(`#probs-${{taskId}}`);
|
| probs.innerHTML = '';
|
|
|
| // Add probability segments with animation
|
| for (const [state, prob] of Object.entries(task.probability_distribution)) {{
|
| const segment = document.createElement('div');
|
| segment.className = 'prob-segment';
|
| segment.style.width = `${{prob * 100}}%`;
|
| segment.style.background = getColorByState(state);
|
|
|
| const label = document.createElement('div');
|
| label.className = 'prob-label';
|
| label.textContent = `${{state}}: ${{(prob * 100).toFixed(0)}}%`;
|
| segment.appendChild(label);
|
|
|
| probs.appendChild(segment);
|
| }}
|
| }}
|
| }}
|
|
|
| // Select a task for detailed visualization
|
| function selectTask(taskId) {{
|
| // Update selection
|
| selectedTaskId = taskId;
|
|
|
| // Update UI to show selected task
|
| document.querySelectorAll('.task-card').forEach(card => {{
|
| card.classList.remove('active');
|
| }});
|
|
|
| const selectedCard = document.getElementById(`task-card-${{taskId}}`);
|
| if (selectedCard) {{
|
| selectedCard.classList.add('active');
|
| }}
|
|
|
| // Hide placeholder text
|
| labelPlaceholder.style.display = 'none';
|
|
|
| // Update visualizations
|
| const stepData = simulationSteps[currentStep];
|
| updateBlochSphere(taskId, stepData);
|
| }}
|
|
|
| // Show tooltip
|
| function showTooltip(event, task, taskId) {{
|
| const stateProbabilities = Object.entries(task.probability_distribution)
|
| .map(([state, prob]) => `<div style="display: flex; justify-content: space-between; margin: 3px 0;">
|
| <span style="color: ${{getColorByState(state)}}">${{state}}</span>
|
| <span>${{(prob * 100).toFixed(1)}}%</span>
|
| </div>`)
|
| .join('');
|
|
|
| tooltip.innerHTML = `
|
| <div style="font-weight: 600; margin-bottom: 5px; color: #e2e8f0;">${{task.title}}</div>
|
| <div style="margin-bottom: 5px;">
|
| <span style="font-weight: 500;">State:</span>
|
| <span style="color: ${{task.color}};">${{task.state}}</span>
|
| </div>
|
| <div style="margin-bottom: 5px;">
|
| <span style="font-weight: 500;">Entropy:</span> ${{task.entropy.toFixed(2)}}
|
| </div>
|
| <div style="font-weight: 500; margin-bottom: 2px;">Probabilities:</div>
|
| <div style="border-top: 1px solid rgba(100, 116, 139, 0.3); padding-top: 3px;">
|
| ${{stateProbabilities}}
|
| </div>
|
| `;
|
|
|
| tooltip.style.opacity = 1;
|
| positionTooltip(event);
|
| }}
|
|
|
| // Position tooltip
|
| function positionTooltip(event) {{
|
| tooltip.style.left = (event.pageX + 10) + 'px';
|
| tooltip.style.top = (event.pageY - 20) + 'px';
|
| }}
|
|
|
| // Hide tooltip
|
| function hideTooltip() {{
|
| tooltip.style.opacity = 0;
|
| }}
|
|
|
| // Get color for task state
|
| function getColorByState(state) {{
|
| const colorMap = {{
|
| 'PENDING': '#4299e1', // Blue
|
| 'IN_PROGRESS': '#f6ad55', // Orange
|
| 'COMPLETED': '#68d391', // Green
|
| 'BLOCKED': '#fc8181' // Red
|
| }};
|
| return colorMap[state] || '#4299e1';
|
| }}
|
|
|
| // Initialize Three.js Bloch sphere
|
| function initBlochSphere() {{
|
| const container = document.getElementById('bloch-sphere');
|
|
|
| // Scene
|
| const scene = new THREE.Scene();
|
|
|
| // Camera
|
| const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
|
| camera.position.z = 2.5;
|
|
|
| // Renderer
|
| const renderer = new THREE.WebGLRenderer({{ antialias: true, alpha: true }});
|
| renderer.setSize(container.clientWidth, container.clientHeight);
|
| renderer.setClearColor(0x000000, 0);
|
| container.appendChild(renderer.domElement);
|
|
|
| // Sphere (Bloch sphere)
|
| const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
|
| const sphereMaterial = new THREE.MeshBasicMaterial({{
|
| color: 0x3B82F6,
|
| wireframe: true,
|
| transparent: true,
|
| opacity: 0.3
|
| }});
|
| const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
|
| scene.add(sphere);
|
|
|
| // Axes
|
| const axisLength = 1.2;
|
|
|
| // X axis (red)
|
| const xAxisGeometry = new THREE.BufferGeometry().setFromPoints([
|
| new THREE.Vector3(-axisLength, 0, 0),
|
| new THREE.Vector3(axisLength, 0, 0)
|
| ]);
|
| const xAxisMaterial = new THREE.LineBasicMaterial({{ color: 0xff0000 }});
|
| const xAxis = new THREE.Line(xAxisGeometry, xAxisMaterial);
|
| scene.add(xAxis);
|
|
|
| // X axis label
|
| const xLabelDiv = document.createElement('div');
|
| xLabelDiv.textContent = 'X';
|
| xLabelDiv.style.position = 'absolute';
|
| xLabelDiv.style.color = '#ff0000';
|
| xLabelDiv.style.padding = '2px';
|
| xLabelDiv.style.fontWeight = '600';
|
| container.appendChild(xLabelDiv);
|
|
|
| // Y axis (green)
|
| const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([
|
| new THREE.Vector3(0, -axisLength, 0),
|
| new THREE.Vector3(0, axisLength, 0)
|
| ]);
|
| const yAxisMaterial = new THREE.LineBasicMaterial({{ color: 0x00ff00 }});
|
| const yAxis = new THREE.Line(yAxisGeometry, yAxisMaterial);
|
| scene.add(yAxis);
|
|
|
| // Y axis label
|
| const yLabelDiv = document.createElement('div');
|
| yLabelDiv.textContent = 'Y';
|
| yLabelDiv.style.position = 'absolute';
|
| yLabelDiv.style.color = '#00ff00';
|
| yLabelDiv.style.padding = '2px';
|
| yLabelDiv.style.fontWeight = '600';
|
| container.appendChild(yLabelDiv);
|
|
|
| // Z axis (blue)
|
| const zAxisGeometry = new THREE.BufferGeometry().setFromPoints([
|
| new THREE.Vector3(0, 0, -axisLength),
|
| new THREE.Vector3(0, 0, axisLength)
|
| ]);
|
| const zAxisMaterial = new THREE.LineBasicMaterial({{ color: 0x0000ff }});
|
| const zAxis = new THREE.Line(zAxisGeometry, zAxisMaterial);
|
| scene.add(zAxis);
|
|
|
| // Z axis label
|
| const zLabelDiv = document.createElement('div');
|
| zLabelDiv.textContent = 'Z';
|
| zLabelDiv.style.position = 'absolute';
|
| zLabelDiv.style.color = '#0000ff';
|
| zLabelDiv.style.padding = '2px';
|
| zLabelDiv.style.fontWeight = '600';
|
| container.appendChild(zLabelDiv);
|
|
|
| // State vector
|
| const vectorGeometry = new THREE.BufferGeometry().setFromPoints([
|
| new THREE.Vector3(0, 0, 0),
|
| new THREE.Vector3(0, 0, 1) // Will be updated dynamically
|
| ]);
|
| const vectorMaterial = new THREE.LineBasicMaterial({{ color: 0xffffff, linewidth: 3 }});
|
| const stateVector = new THREE.Line(vectorGeometry, vectorMaterial);
|
| scene.add(stateVector);
|
|
|
| // Vector endpoint
|
| const endpointGeometry = new THREE.SphereGeometry(0.05, 16, 16);
|
| const endpointMaterial = new THREE.MeshBasicMaterial({{ color: 0xffffff }});
|
| const endpoint = new THREE.Mesh(endpointGeometry, endpointMaterial);
|
| scene.add(endpoint);
|
|
|
| // Rotation animation
|
| let rotationSpeed = 0.005;
|
|
|
| // Handle window resize
|
| window.addEventListener('resize', () => {{
|
| const width = container.clientWidth;
|
| const height = container.clientHeight;
|
| camera.aspect = width / height;
|
| camera.updateProjectionMatrix();
|
| renderer.setSize(width, height);
|
| }});
|
|
|
| // Animation loop
|
| function animate() {{
|
| requestAnimationFrame(animate);
|
|
|
| // Rotate sphere
|
| sphere.rotation.y += rotationSpeed;
|
| sphere.rotation.z += rotationSpeed * 0.5;
|
|
|
| // Update axis labels positions
|
| const width = container.clientWidth;
|
| const height = container.clientHeight;
|
|
|
| // Project 3D points to 2D
|
| const vector = new THREE.Vector3();
|
|
|
| // X axis label
|
| vector.set(axisLength + 0.1, 0, 0);
|
| vector.project(camera);
|
| xLabelDiv.style.left = ((vector.x * 0.5 + 0.5) * width) + 'px';
|
| xLabelDiv.style.top = ((-vector.y * 0.5 + 0.5) * height) + 'px';
|
|
|
| // Y axis label
|
| vector.set(0, axisLength + 0.1, 0);
|
| vector.project(camera);
|
| yLabelDiv.style.left = ((vector.x * 0.5 + 0.5) * width) + 'px';
|
| yLabelDiv.style.top = ((-vector.y * 0.5 + 0.5) * height) + 'px';
|
|
|
| // Z axis label
|
| vector.set(0, 0, axisLength + 0.1);
|
| vector.project(camera);
|
| zLabelDiv.style.left = ((vector.x * 0.5 + 0.5) * width) + 'px';
|
| zLabelDiv.style.top = ((-vector.y * 0.5 + 0.5) * height) + 'px';
|
|
|
| renderer.render(scene, camera);
|
| }}
|
|
|
| // Start animation
|
| animate();
|
|
|
| // Define update method for the Bloch sphere
|
| const updateVector = (x, y, z, color) => {{
|
| // Normalize the vector
|
| const length = Math.sqrt(x*x + y*y + z*z);
|
| const nx = length > 0 ? x/length : 0;
|
| const ny = length > 0 ? y/length : 0;
|
| const nz = length > 0 ? z/length : 0;
|
|
|
| // Update vector line
|
| const points = stateVector.geometry.attributes.position.array;
|
| points[3] = nx;
|
| points[4] = ny;
|
| points[5] = nz;
|
| stateVector.geometry.attributes.position.needsUpdate = true;
|
|
|
| // Update endpoint position
|
| endpoint.position.set(nx, ny, nz);
|
|
|
| // Update colors
|
| vectorMaterial.color.set(color);
|
| endpointMaterial.color.set(color);
|
| }};
|
|
|
| return {{ updateVector }};
|
| }}
|
|
|
| // Update Bloch sphere visualization
|
| function updateBlochSphere(taskId, stepData) {{
|
| const task = stepData.tasks[taskId];
|
| if (!task) return;
|
|
|
| // Extract Bloch vector
|
| const blochVector = task.bloch_vector;
|
|
|
| // Calculate vector components
|
| let x = 0, y = 0, z = 0;
|
|
|
| if (blochVector && blochVector.length >= 3) {{
|
| [x, y, z] = blochVector;
|
| }}
|
|
|
| // Update Bloch sphere vector
|
| blochSphere.updateVector(x, y, z, task.color);
|
| }}
|
|
|
| // Initialize network visualization
|
| function initNetworkVisualization() {{
|
| const container = document.getElementById('network-viz');
|
|
|
| // Create SVG
|
| const width = container.clientWidth;
|
| const height = container.clientHeight;
|
|
|
| const svg = d3.select(container)
|
| .append('svg')
|
| .attr('width', width)
|
| .attr('height', height);
|
|
|
| // Define force simulation
|
| const simulation = d3.forceSimulation()
|
| .force('charge', d3.forceManyBody().strength(-300))
|
| .force('center', d3.forceCenter(width / 2, height / 2))
|
| .force('collision', d3.forceCollide().radius(d => d.size + 5))
|
| .force('link', d3.forceLink().id(d => d.id).distance(100));
|
|
|
| // Create groups for links and nodes
|
| const linkGroup = svg.append('g').attr('class', 'links');
|
| const nodeGroup = svg.append('g').attr('class', 'nodes');
|
| const labelGroup = svg.append('g').attr('class', 'labels');
|
|
|
| // First step data
|
| const firstStep = simulationSteps[0];
|
|
|
| // Create nodes and links data
|
| const nodes = [];
|
| const nodeIds = new Set();
|
|
|
| for (const [taskId, task] of Object.entries(firstStep.tasks)) {{
|
| nodes.push({{
|
| id: taskId,
|
| name: task.title,
|
| color: task.color,
|
| state: task.state,
|
| entropy: task.entropy,
|
| size: 10 + (task.entropy * 15)
|
| }});
|
| nodeIds.add(taskId);
|
| }}
|
|
|
| // Create links from entanglement matrix
|
| const links = [];
|
|
|
| if (entanglementMatrix && entanglementMatrix.length > 0) {{
|
| for (let i = 0; i < entanglementMatrix.length; i++) {{
|
| for (let j = i + 1; j < entanglementMatrix[i].length; j++) {{
|
| const strength = entanglementMatrix[i][j];
|
| if (strength > 0) {{
|
| // Get task IDs from node indices
|
| const source = Array.from(nodeIds)[i];
|
| const target = Array.from(nodeIds)[j];
|
|
|
| links.push({{
|
| source,
|
| target,
|
| strength
|
| }});
|
| }}
|
| }}
|
| }}
|
| }}
|
|
|
| // Draw links
|
| const link = linkGroup.selectAll('line')
|
| .data(links)
|
| .enter()
|
| .append('line')
|
| .attr('stroke', '#4299e1')
|
| .attr('stroke-opacity', 0.6)
|
| .attr('stroke-width', d => d.strength * 3);
|
|
|
| // Draw nodes
|
| const node = nodeGroup.selectAll('circle')
|
| .data(nodes)
|
| .enter()
|
| .append('circle')
|
| .attr('r', d => d.size)
|
| .attr('fill', d => d.color)
|
| .attr('stroke', '#ffffff')
|
| .attr('stroke-width', 1.5)
|
| .call(d3.drag()
|
| .on('start', dragStarted)
|
| .on('drag', dragging)
|
| .on('end', dragEnded));
|
|
|
| // Add labels
|
| const label = labelGroup.selectAll('text')
|
| .data(nodes)
|
| .enter()
|
| .append('text')
|
| .text(d => d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name)
|
| .attr('font-size', 10)
|
| .attr('fill', 'white')
|
| .attr('text-anchor', 'middle')
|
| .attr('dy', -15);
|
|
|
| // Handle simulation ticks
|
| simulation.nodes(nodes)
|
| .on('tick', () => {{
|
| link
|
| .attr('x1', d => d.source.x)
|
| .attr('y1', d => d.source.y)
|
| .attr('x2', d => d.target.x)
|
| .attr('y2', d => d.target.y);
|
|
|
| node
|
| .attr('cx', d => d.x)
|
| .attr('cy', d => d.y);
|
|
|
| label
|
| .attr('x', d => d.x)
|
| .attr('y', d => d.y);
|
| }});
|
|
|
| simulation.force('link').links(links);
|
|
|
| // Drag handlers
|
| function dragStarted(event, d) {{
|
| if (!event.active) simulation.alphaTarget(0.3).restart();
|
| d.fx = d.x;
|
| d.fy = d.y;
|
| }}
|
|
|
| function dragging(event, d) {{
|
| d.fx = event.x;
|
| d.fy = event.y;
|
| }}
|
|
|
| function dragEnded(event, d) {{
|
| if (!event.active) simulation.alphaTarget(0);
|
| d.fx = null;
|
| d.fy = null;
|
| }}
|
|
|
| // Update method for network
|
| const updateNetwork = (stepData) => {{
|
| // Update nodes
|
| for (const [taskId, task] of Object.entries(stepData.tasks)) {{
|
| const nodeIndex = nodes.findIndex(n => n.id === taskId);
|
| if (nodeIndex >= 0) {{
|
| nodes[nodeIndex].color = task.color;
|
| nodes[nodeIndex].state = task.state;
|
| nodes[nodeIndex].entropy = task.entropy;
|
| nodes[nodeIndex].size = 10 + (task.entropy * 15);
|
| }}
|
| }}
|
|
|
| // Update visual elements
|
| node.transition().duration(500)
|
| .attr('r', d => d.size)
|
| .attr('fill', d => d.color);
|
| }};
|
|
|
| return {{ updateNetwork }};
|
| }}
|
|
|
| // Update network visualization
|
| function updateNetworkVisualization(stepData) {{
|
| network.updateNetwork(stepData);
|
| }}
|
|
|
| // Initialize matrix visualization
|
| function initMatrixVisualization() {{
|
| const container = document.getElementById('matrix-viz');
|
|
|
| // Create matrix visualization
|
| const margin = {{top: 20, right: 20, bottom: 20, left: 20}};
|
| const width = container.clientWidth - margin.left - margin.right;
|
| const height = container.clientHeight - margin.top - margin.bottom;
|
|
|
| const svg = d3.select(container)
|
| .append('svg')
|
| .attr('width', width + margin.left + margin.right)
|
| .attr('height', height + margin.top + margin.bottom)
|
| .append('g')
|
| .attr('transform', `translate(${{margin.left}}, ${{margin.top}})`);
|
|
|
| // Get task names
|
| const taskIds = Object.keys(simulationSteps[0].tasks);
|
| const taskNames = taskIds.map(id => simulationSteps[0].tasks[id].title);
|
|
|
| // Create scales
|
| const x = d3.scaleBand()
|
| .range([0, width])
|
| .domain(taskNames)
|
| .padding(0.05);
|
|
|
| const y = d3.scaleBand()
|
| .range([0, height])
|
| .domain(taskNames)
|
| .padding(0.05);
|
|
|
| // Add X axis
|
| svg.append('g')
|
| .attr('class', 'x-axis')
|
| .attr('transform', `translate(0, ${{height}})`)
|
| .call(d3.axisBottom(x).tickSize(0))
|
| .selectAll('text')
|
| .attr('transform', 'translate(-10,0)rotate(-45)')
|
| .style('text-anchor', 'end')
|
| .style('font-size', '10px')
|
| .style('fill', '#cbd5e1');
|
|
|
| // Add Y axis
|
| svg.append('g')
|
| .attr('class', 'y-axis')
|
| .call(d3.axisLeft(y).tickSize(0))
|
| .selectAll('text')
|
| .style('font-size', '10px')
|
| .style('fill', '#cbd5e1');
|
|
|
| // Remove axis lines
|
| svg.selectAll('.domain').style('stroke', 'none');
|
|
|
| // Create color scale
|
| const color = d3.scaleLinear()
|
| .range(['#e2e8f0', '#3B82F6'])
|
| .domain([0, 1]);
|
|
|
| // Create matrix data
|
| const matrixData = [];
|
|
|
| for (let i = 0; i < taskIds.length; i++) {{
|
| for (let j = 0; j < taskIds.length; j++) {{
|
| const strength = i === j ? 1 :
|
| (entanglementMatrix && entanglementMatrix[i] &&
|
| entanglementMatrix[i][j]) || 0;
|
|
|
| matrixData.push({{
|
| x: taskNames[j],
|
| y: taskNames[i],
|
| strength: strength,
|
| xId: taskIds[j],
|
| yId: taskIds[i]
|
| }});
|
| }}
|
| }}
|
|
|
| // Add matrix cells
|
| svg.selectAll('rect')
|
| .data(matrixData)
|
| .enter()
|
| .append('rect')
|
| .attr('x', d => x(d.x))
|
| .attr('y', d => y(d.y))
|
| .attr('width', x.bandwidth())
|
| .attr('height', y.bandwidth())
|
| .style('fill', d => color(d.strength))
|
| .style('stroke', '#0f172a')
|
| .style('opacity', 0.8);
|
|
|
| // Add matrix labels
|
| svg.selectAll('.matrix-value')
|
| .data(matrixData.filter(d => d.strength > 0))
|
| .enter()
|
| .append('text')
|
| .attr('class', 'matrix-value')
|
| .attr('x', d => x(d.x) + x.bandwidth() / 2)
|
| .attr('y', d => y(d.y) + y.bandwidth() / 2)
|
| .attr('text-anchor', 'middle')
|
| .attr('dominant-baseline', 'middle')
|
| .text(d => d.strength.toFixed(1))
|
| .style('font-size', '10px')
|
| .style('fill', d => d.strength > 0.5 ? 'white' : '#334155');
|
| }}
|
|
|
| // Update matrix visualization
|
| function updateMatrixVisualization() {{
|
| // Matrix doesn't change during steps in this version
|
| // Could be enhanced in future versions with dynamic entanglement
|
| }}
|
|
|
| // Animate value changes
|
| function animateValue(element, start, end, duration) {{
|
| let startTimestamp = null;
|
| const step = timestamp => {{
|
| if (!startTimestamp) startTimestamp = timestamp;
|
| const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
| const value = start + progress * (end - start);
|
| element.textContent = value.toFixed(2);
|
| if (progress < 1) {{
|
| window.requestAnimationFrame(step);
|
| }}
|
| }};
|
| window.requestAnimationFrame(step);
|
| }}
|
|
|
| // Step control functions
|
| function goToNextStep() {{
|
| if (currentStep < simulationSteps.length - 1) {{
|
| currentStep++;
|
|
|
| // Show transition animation
|
| showStepAnimation();
|
|
|
| // Update UI
|
| updateUI();
|
| }} else if (isPlaying) {{
|
| // Stop playback when reaching the end
|
| stopPlayback();
|
| }}
|
| }}
|
|
|
| function goToPrevStep() {{
|
| if (currentStep > 0) {{
|
| currentStep--;
|
|
|
| // Show transition animation
|
| showStepAnimation();
|
|
|
| // Update UI
|
| updateUI();
|
| }}
|
| }}
|
|
|
| // Start playback
|
| function startPlayback() {{
|
| if (!isPlaying) {{
|
| isPlaying = true;
|
| playBtn.textContent = '⏸︎';
|
|
|
| // Set interval for automatic progression
|
| playInterval = setInterval(() => {{
|
| goToNextStep();
|
|
|
| // Stop at the end
|
| if (currentStep >= simulationSteps.length - 1) {{
|
| stopPlayback();
|
| }}
|
| }}, 2000);
|
| }}
|
| }}
|
|
|
| // Stop playback
|
| function stopPlayback() {{
|
| if (isPlaying) {{
|
| isPlaying = false;
|
| playBtn.textContent = '▶';
|
| clearInterval(playInterval);
|
| }}
|
| }}
|
|
|
| // Toggle playback
|
| function togglePlayback() {{
|
| if (isPlaying) {{
|
| stopPlayback();
|
| }} else {{
|
| startPlayback();
|
| }}
|
| }}
|
|
|
| // Step transition animation
|
| function showStepAnimation() {{
|
| animationContainer.innerHTML = '';
|
| animationContainer.classList.add('show-animation');
|
|
|
| // Create particles for animation
|
| for (let i = 0; i < 50; i++) {{
|
| const particle = document.createElement('div');
|
| particle.style.position = 'absolute';
|
| particle.style.width = '3px';
|
| particle.style.height = '3px';
|
| particle.style.background = '#3B82F6';
|
| particle.style.borderRadius = '50%';
|
| particle.style.left = `${{Math.random() * 100}}%`;
|
| particle.style.top = `${{Math.random() * 100}}%`;
|
| particle.style.boxShadow = '0 0 5px #3B82F6';
|
|
|
| // Random animation
|
| const duration = 300 + Math.random() * 500;
|
| const distance = 20 + Math.random() * 50;
|
| const angle = Math.random() * Math.PI * 2;
|
| const dx = Math.cos(angle) * distance;
|
| const dy = Math.sin(angle) * distance;
|
|
|
| particle.animate(
|
| [
|
| {{ opacity: 0, transform: 'scale(0)' }},
|
| {{ opacity: 1, transform: 'scale(1) translate(0, 0)' }},
|
| {{ opacity: 0, transform: `scale(0) translate(${{dx}}px, ${{dy}}px)` }}
|
| ],
|
| {{
|
| duration: duration,
|
| easing: 'ease-out'
|
| }}
|
| );
|
|
|
| animationContainer.appendChild(particle);
|
| }}
|
|
|
| // Remove animation after it completes
|
| setTimeout(() => {{
|
| animationContainer.classList.remove('show-animation');
|
| }}, 800);
|
| }}
|
|
|
| // Initialize visualization
|
| function init() {{
|
| // Create particles
|
| createParticles();
|
|
|
| // Initialize tabs
|
| initTabs();
|
|
|
| // Initialize task cards
|
| initTaskCards();
|
|
|
| // Initialize Bloch sphere
|
| blochSphere = initBlochSphere();
|
|
|
| // Initialize network visualization
|
| network = initNetworkVisualization();
|
|
|
| // Initialize matrix visualization
|
| initMatrixVisualization();
|
|
|
| // Set up UI
|
| stepTotal.textContent = simulationSteps.length;
|
|
|
| // Button event listeners
|
| prevBtn.addEventListener('click', () => {{
|
| stopPlayback();
|
| goToPrevStep();
|
| }});
|
|
|
| nextBtn.addEventListener('click', () => {{
|
| stopPlayback();
|
| goToNextStep();
|
| }});
|
|
|
| playBtn.addEventListener('click', togglePlayback);
|
|
|
| // Initial UI update
|
| updateUI();
|
| }}
|
|
|
| // Initialize when page loads
|
| window.addEventListener('load', init);
|
| </script>
|
| </body>
|
| </html>
|
| """
|
|
|
|
|
| components.html(html_content, height=height, scrolling=False)
|
|
|
| return None |
