| | <!DOCTYPE html> |
| | <html> |
| |
|
| | <head> |
| | <title>ChatChain Visualizer</title> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> |
| | <style> |
| | body { |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | height: 100vh; |
| | } |
| | |
| | #visualization { |
| | display: flex; |
| | flex-wrap: nowrap; |
| | overflow-x: auto; |
| | max-width: 1800px; |
| | margin: 20px; |
| | } |
| | |
| | .card { |
| | margin-right: 10px; |
| | background-color: #f0f0f0; |
| | display: inline-block; |
| | min-width: 350px; |
| | vertical-align: top; |
| | } |
| | |
| | .card-content { |
| | padding: 10px; |
| | } |
| | </style> |
| | </head> |
| |
|
| | <body> |
| | <div class="container"> |
| | <h2>ChatChain Visualizer</h2> |
| | <p>Select your ChatChainConfig.json to visualize</p> |
| | <input type="file" id="fileInput"> |
| | <div id="visualization"></div> |
| | </div> |
| |
|
| | <script> |
| | document.getElementById('fileInput').addEventListener('change', handleFileSelect, false); |
| | |
| | function handleFileSelect(event) { |
| | const file = event.target.files[0]; |
| | if (!file) return; |
| | |
| | const reader = new FileReader(); |
| | reader.onload = function(event) { |
| | try { |
| | const jsonContent = JSON.parse(event.target.result); |
| | visualizeChain(jsonContent.chain); |
| | } catch (error) { |
| | alert('Error parsing JSON file.'); |
| | } |
| | }; |
| | reader.readAsText(file); |
| | } |
| | |
| | function createCard(element) { |
| | const card = document.createElement('div'); |
| | card.className = 'card'; |
| | |
| | const cardContent = document.createElement('div'); |
| | cardContent.className = 'card-content'; |
| | |
| | |
| | |
| | |
| | if (element.phaseType === "ComposedPhase") { |
| | delete element.Composition; |
| | } |
| | |
| | const phase = document.createElement('span'); |
| | phase.innerHTML = `<strong>PhaseName: </strong>${element.phase || 'No PhaseName'}`; |
| | |
| | |
| | const phaseType = document.createElement('p'); |
| | phaseType.innerHTML = `<strong>PhaseType: </strong>${element.phaseType || 'No phaseType'}`; |
| | |
| | |
| | delete element.phase; |
| | delete element.phaseType; |
| | const jsonContent = document.createElement('pre'); |
| | jsonContent.innerText = JSON.stringify(element, null, 2); |
| | |
| | cardContent.appendChild(phase); |
| | cardContent.appendChild(phaseType); |
| | cardContent.appendChild(jsonContent); |
| | |
| | card.appendChild(cardContent); |
| | |
| | return card; |
| | } |
| | |
| | function visualizeChain(chain) { |
| | const visualization = document.getElementById('visualization'); |
| | visualization.innerHTML = ''; |
| | |
| | chain.forEach(element => { |
| | if (element.phaseType === "ComposedPhase") { |
| | const composition = element.Composition || []; |
| | const card = createCard(element); |
| | |
| | const nestedCards = composition.map(composedElement => { |
| | return createCard(composedElement); |
| | }); |
| | |
| | const nestedCardWrapper = document.createElement('div'); |
| | nestedCardWrapper.style.marginTop = '10px'; |
| | |
| | nestedCards.forEach(nestedCard => { |
| | nestedCardWrapper.appendChild(nestedCard); |
| | }); |
| | |
| | card.appendChild(nestedCardWrapper); |
| | visualization.appendChild(card); |
| | } else { |
| | const card = createCard(element); |
| | visualization.appendChild(card); |
| | } |
| | }); |
| | } |
| | </script> |
| | </body> |
| |
|
| | </html> |
