|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Liquidity Terraforming</title> |
|
|
<style> |
|
|
body { font-family: sans-serif; padding: 2rem; background: #f5f5f5; } |
|
|
.card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); max-width: 600px; margin: auto; } |
|
|
label, select, input { display: block; width: 100%; margin-top: 1rem; } |
|
|
button { margin-top: 1.5rem; padding: 0.8rem; background: #2b5797; color: white; border: none; border-radius: 4px; cursor: pointer; } |
|
|
.result { margin-top: 1rem; padding: 1rem; background: #e7f4ea; border-left: 4px solid #4caf50; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="card"> |
|
|
<h1>Liquidity Terraforming</h1> |
|
|
|
|
|
<label for="asset">Asset Pool</label> |
|
|
<select id="asset"> |
|
|
<option value="ETH-USDC">ETH-USDC</option> |
|
|
<option value="WBTC-DAI">WBTC-DAI</option> |
|
|
<option value="SOL-USDT">SOL-USDT</option> |
|
|
</select> |
|
|
|
|
|
<label for="capital">Capital ($)</label> |
|
|
<input type="number" id="capital" value="1000000"> |
|
|
|
|
|
<label for="risk">Risk Level</label> |
|
|
<input type="range" id="risk" min="1" max="5" value="3"> |
|
|
|
|
|
<button onclick="simulateTerraform()">Simulate Terraform</button> |
|
|
|
|
|
<div id="result" class="result" style="display:none;"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
async function simulateTerraform() { |
|
|
const asset = document.getElementById('asset').value; |
|
|
const capital = document.getElementById('capital').value; |
|
|
const risk = document.getElementById('risk').value; |
|
|
|
|
|
const response = await fetch('/simulate', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ asset, capital, risk }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
const resultDiv = document.getElementById('result'); |
|
|
resultDiv.style.display = 'block'; |
|
|
resultDiv.textContent = `Projected Yield: $${data.projected_yield}`; |
|
|
} |
|
|
</script> |
|
|
|
|
|
<h2 style="margin-top:2rem;">Agent Network</h2> |
|
|
<div id="cy" style="width: 100%; height: 500px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 5px #ccc;"></div> |
|
|
|
|
|
|
|
|
<h2 style="margin-top:2rem;">Agent Network</h2> |
|
|
<div style="margin-bottom:1rem;"> |
|
|
<label for="layout">Layout:</label> |
|
|
<select id="layout" onchange="renderAgentGraph(this.value)"> |
|
|
<option value="grid">Grid</option> |
|
|
<option value="circle">Circle</option> |
|
|
<option value="breadthfirst">Breadthfirst</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="cy" style="width: 100%; height: 500px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 5px #ccc;"></div> |
|
|
|
|
|
<script src="https://unpkg.com/cytoscape@3.20.0/dist/cytoscape.min.js"></script> |
|
|
<script> |
|
|
let cyInstance; |
|
|
|
|
|
|
|
|
<script> |
|
|
let cyInstance; |
|
|
|
|
|
async function renderAgentGraph(layout = 'grid') { |
|
|
const response = await fetch('/agent_status'); |
|
|
const data = await response.json(); |
|
|
const agents = data.agents; |
|
|
|
|
|
const elements = agents.map(agent => ({ |
|
|
data: { |
|
|
id: agent.id, |
|
|
label: agent.name, |
|
|
risk: agent.risk, |
|
|
traits: agent.traits, |
|
|
memory_kb: agent.memory_kb, |
|
|
endpoints: agent.endpoints |
|
|
} |
|
|
})); |
|
|
|
|
|
const serviceNodes = ["Google", "Notion", "Shodan"].map(service => ({ |
|
|
data: { id: service.toLowerCase(), label: service, service: true } |
|
|
})); |
|
|
|
|
|
const serviceEdges = []; |
|
|
for (const agent of agents) { |
|
|
for (const ep of agent.endpoints) { |
|
|
serviceEdges.push({ data: { source: agent.id, target: ep.toLowerCase() } }); |
|
|
} |
|
|
} |
|
|
|
|
|
const allElements = [...elements, ...serviceNodes, ...serviceEdges]; |
|
|
|
|
|
if (cyInstance) cyInstance.destroy(); |
|
|
|
|
|
cyInstance = cytoscape({ |
|
|
container: document.getElementById('cy'), |
|
|
elements: allElements, |
|
|
style: [ |
|
|
{ |
|
|
selector: 'node', |
|
|
style: { |
|
|
'label': 'data(label)', |
|
|
'shape': ele => ele.data('service') ? 'hexagon' : 'ellipse', |
|
|
'background-color': ele => { |
|
|
if (ele.data('service')) return '#00acc1'; |
|
|
const risk = parseInt(ele.data('risk')); |
|
|
return risk >= 4 ? '#e53935' : risk >= 3 ? '#fbc02d' : '#4caf50'; |
|
|
}, |
|
|
'color': '#fff', |
|
|
'text-valign': 'center', |
|
|
'text-halign': 'center' |
|
|
} |
|
|
}, |
|
|
{ |
|
|
selector: 'edge', |
|
|
style: { |
|
|
'width': 2, |
|
|
'line-color': '#ccc', |
|
|
'target-arrow-color': '#ccc', |
|
|
'target-arrow-shape': 'triangle' |
|
|
} |
|
|
} |
|
|
], |
|
|
layout: { name: layout } |
|
|
}); |
|
|
|
|
|
cyInstance.nodes().on('tap', evt => { |
|
|
const d = evt.target.data(); |
|
|
if (d.service) { |
|
|
window.open(`https://${d.label.toLowerCase()}.com`, '_blank'); |
|
|
} else { |
|
|
alert(`Name: ${d.label}\nRisk: ${d.risk}\nMemory: ${d.memory_kb} KB\nTraits: ${d.traits}\nEndpoints: ${d.endpoints.join(', ')}`); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
renderAgentGraph(); |
|
|
</script> |
|
|
</body></html> |
