|
<!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> |
