NETWORK BOUNDARY HTML GET raw_html token kwargs Target Server requests.Session BeautifulSoup Output struct
System State
Initializing pipeline...
\n` }, { path: 'path-raw', title: '3. Parsing HTML', code: `soup = BeautifulSoup(\n response.text, \n "html.parser"\n)` }, { path: 'path-csrf', title: '4. Extracting State', code: `# Store token for subsequent POST requests\ncsrf_token = soup.find(\n 'input', \n {'name': 'csrf'}\n)['value']\n\n# session headers updated` }, { path: 'path-data', title: '5. Formatting Output', code: `price_str = soup.find('div', class_='data').text\nprice = float(price_str.split('$')[1])\n\nresult = Output(\n price=price,\n csrf_token=csrf_token\n)` } ]; let currentStage = 0; let isPaused = false; let animationFrameId; let dotProgress = 0; let lastTime = 0; let state = 'waiting'; // waiting, moving, paused function updatePanel(stageIndex) { const stage = stages[stageIndex]; panelTitle.innerText = stage.title; panelCode.innerText = stage.code; } function animate(time) { if (isPaused) { lastTime = time; animationFrameId = requestAnimationFrame(animate); return; } if (!lastTime) lastTime = time; const delta = time - lastTime; lastTime = time; if (state === 'waiting') { // Start next stage const stage = stages[currentStage]; const path = document.getElementById(stage.path); path.classList.add('highlight'); flowDot.style.opacity = 1; dotProgress = 0; state = 'moving'; updatePanel(currentStage); } else if (state === 'moving') { const stage = stages[currentStage]; const path = document.getElementById(stage.path); const pathLen = path.getTotalLength(); // Speed: complete path in 1.5 seconds dotProgress += delta / 1500; if (dotProgress >= 1) { dotProgress = 1; state = 'pausing'; path.classList.remove('highlight'); flowDot.style.opacity = 0; setTimeout(() => { if (!isPaused) { currentStage = (currentStage + 1) % stages.length; state = 'waiting'; } }, 1000); // Pause at node for 1 second } const pt = path.getPointAtLength(dotProgress * pathLen); flowDot.setAttribute('cx', pt.x); flowDot.setAttribute('cy', pt.y); } animationFrameId = requestAnimationFrame(animate); } // Start animation after initial fade-in (1.5s total) setTimeout(() => { animationFrameId = requestAnimationFrame(animate); }, 1500); // Controls btnPause.addEventListener('click', () => { isPaused = !isPaused; btnPause.innerText = isPaused ? 'Resume' : 'Pause'; }); btnReset.addEventListener('click', () => { currentStage = 0; dotProgress = 0; state = 'waiting'; isPaused = false; btnPause.innerText = 'Pause'; edges.forEach(e => e.classList.remove('highlight')); flowDot.style.opacity = 0; panelTitle.innerText = 'System State'; panelCode.innerText = 'Initializing pipeline...'; }); // Post height for iframe embedding function postHeight() { parent.postMessage({ type: 'diagram-height', height: document.documentElement.scrollHeight }, '*'); } window.addEventListener('load', postHeight); window.addEventListener('resize', postHeight); setTimeout(postHeight, 2000); // Extra check after animations start });