mirror of
https://github.com/crewAIInc/crewAI.git
synced 2026-01-10 00:28:31 +00:00
153 lines
6.4 KiB
Django/Jinja
153 lines
6.4 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="EN">
|
|
<head>
|
|
<title>CrewAI Flow Visualization</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="'{{ css_path }}'" />
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
|
|
<script src="'{{ js_path }}'"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Drawer overlay -->
|
|
<div id="drawer-overlay"></div>
|
|
|
|
<!-- Highlight canvas for active nodes/edges above overlay -->
|
|
<canvas id="highlight-canvas"></canvas>
|
|
|
|
<!-- Side drawer -->
|
|
<div id="drawer" style="visibility: hidden;">
|
|
<div class="drawer-header">
|
|
<div class="drawer-title" id="drawer-node-name">Node Details</div>
|
|
<div style="display: flex; align-items: center;">
|
|
<button class="drawer-open-ide" id="drawer-open-ide" style="display: none;">
|
|
<i data-lucide="file-code" style="width: 16px; height: 16px;"></i>
|
|
Open in IDE
|
|
</button>
|
|
<button class="drawer-close" id="drawer-close">
|
|
<i data-lucide="x" style="width: 20px; height: 20px;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="drawer-content" id="drawer-content"></div>
|
|
</div>
|
|
|
|
<div id="info">
|
|
<div style="text-align: center;">
|
|
<img src="https://cdn.prod.website-files.com/68de1ee6d7c127849807d7a6/68de1ee6d7c127849807d7ef_Logo.svg"
|
|
alt="CrewAI Logo"
|
|
style="width: 144px; height: auto;">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Custom navigation controls -->
|
|
<div class="nav-controls">
|
|
<div class="nav-button" id="theme-toggle" title="Toggle Dark Mode">
|
|
<i data-lucide="moon" style="width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<div class="nav-button" id="zoom-in" title="Zoom In">
|
|
<i data-lucide="zoom-in" style="width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<div class="nav-button" id="zoom-out" title="Zoom Out">
|
|
<i data-lucide="zoom-out" style="width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<div class="nav-button" id="fit" title="Fit to Screen">
|
|
<i data-lucide="maximize-2" style="width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<div class="nav-button" id="export-png" title="Export to PNG">
|
|
<i data-lucide="image" style="width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<div class="nav-button" id="export-pdf" title="Export to PDF">
|
|
<i data-lucide="file-text" style="width: 18px; height: 18px;"></i>
|
|
</div>
|
|
<!-- <div class="nav-button" id="export-json" title="Export to JSON">
|
|
<i data-lucide="braces" style="width: 18px; height: 18px;"></i>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div id="network-container">
|
|
<div id="network"></div>
|
|
</div>
|
|
|
|
<!-- Info panel at bottom -->
|
|
<div id="legend-panel">
|
|
<!-- Stats Section -->
|
|
<div class="legend-section">
|
|
<div class="legend-stats-row">
|
|
<div class="legend-stat-item">
|
|
<span class="stat-value">'{{ dag_nodes_count }}'</span>
|
|
<span class="stat-label">Nodes</span>
|
|
</div>
|
|
<div class="legend-stat-item">
|
|
<span class="stat-value">'{{ dag_edges_count }}'</span>
|
|
<span class="stat-label">Edges</span>
|
|
</div>
|
|
<div class="legend-stat-item">
|
|
<span class="stat-value">'{{ execution_paths }}'</span>
|
|
<span class="stat-label">Paths</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Node Types Section -->
|
|
<div class="legend-section">
|
|
<div class="legend-group">
|
|
<div class="legend-item-compact">
|
|
<div class="legend-color-small" style="background: var(--node-bg-start);"></div>
|
|
<span>Start</span>
|
|
</div>
|
|
<div class="legend-item-compact">
|
|
<div class="legend-color-small" style="background: var(--node-bg-router); border: 2px solid var(--node-border-start);"></div>
|
|
<span>Router</span>
|
|
</div>
|
|
<div class="legend-item-compact">
|
|
<div class="legend-color-small" style="background: var(--node-bg-listen); border: 2px solid var(--node-border-listen);"></div>
|
|
<span>Listen</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edge Types Section -->
|
|
<div class="legend-section">
|
|
<div class="legend-group">
|
|
<div class="legend-item-compact">
|
|
<svg>
|
|
<line x1="0" y1="7" x2="29" y2="7" stroke="var(--edge-router-color)" stroke-width="2" stroke-dasharray="4,4"/>
|
|
</svg>
|
|
<span>Router</span>
|
|
</div>
|
|
<div class="legend-item-compact">
|
|
<svg class="legend-or-line">
|
|
<line x1="0" y1="7" x2="29" y2="7" stroke="var(--edge-or-color)" stroke-width="2"/>
|
|
</svg>
|
|
<span>OR</span>
|
|
</div>
|
|
<div class="legend-item-compact">
|
|
<svg>
|
|
<line x1="0" y1="7" x2="29" y2="7" stroke="var(--edge-router-color)" stroke-width="2"/>
|
|
</svg>
|
|
<span>AND</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IDE Selector Section -->
|
|
<div class="legend-section">
|
|
<div class="legend-ide-column">
|
|
<label class="legend-ide-label">IDE</label>
|
|
<select id="ide-selector" class="legend-ide-select">
|
|
<option value="auto">Auto-detect</option>
|
|
<option value="pycharm">PyCharm</option>
|
|
<option value="vscode">VS Code</option>
|
|
<option value="jetbrains">JetBrains</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|