CGJI01_v0.2 / web /index.html
prashantmatlani's picture
audio i/o
2b544b6
<!DOCTYPE html>
<html>
<head>
<title>CGJI01 — Jungian Intelligence</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>CGJI01 — Multi-Agent Jungian Intelligence</h1>
<div class="main-container">
<div class="left-panel">
<div id="chat" class="chat-display"></div>
<!-- 🔹 SESSION CONTROL -->
<div style="margin-bottom:10px;">
<label>Session ID:</label>
<input id="session_display" type="text" readonly style="width:200px; margin-right:10px;">
<input id="session_input" type="text" placeholder="Enter session ID to resume" style="width:200px;">
<button onclick="loadSession()">Load</button>
</div>
<!-- 🔹 CLIENT/USER INPUT -->
<p id="input_label">Enter query:</p>
<textarea id="main_input" placeholder="Let's talk"></textarea>
<div class="controls">
<button id="fire_btn" onclick="fire()">Fire</button>
<button id="mic_btn" onclick="startVoiceInput()">🎤</button>
<button id="end_btn" onclick="endSession()" style="display:none;">End Session</button>
</div>
</div>
<div class="right-panel">
<h2 class="board-title">--- Broad-Board ---</h2>
<div class="broad-board-grid">
<div class="agent-box" onclick="toggleBlur(this)">
<h3>Agent Jung</h3>
<div class="agent-content"><pre id="jung"></pre></div>
</div>
<div class="agent-box" onclick="toggleBlur(this)">
<h3>Agent Dream</h3>
<div class="agent-content"><pre id="dream"></pre></div>
</div>
<div class="agent-box" onclick="toggleBlur(this)">
<h3>Agent Shadow</h3>
<div class="agent-content"><pre id="shadow"></pre></div>
</div>
<div class="agent-box" onclick="toggleBlur(this)">
<h3>Agent Myth</h3>
<div class="agent-content"><pre id="myth"></pre></div>
</div>
<div class="agent-box" onclick="toggleBlur(this)">
<h3>Agent Epistemic</h3>
<div class="agent-content"><pre id="epistemic"></pre></div>
</div>
<div class="agent-box" onclick="toggleBlur(this)">
<h3>Agent BPsy</h3>
<div class="agent-content"><pre id="bpsy"></pre></div>
</div>
<div class="agent-box" onclick="toggleBlur(this)">
<h3>Agent JRed</h3>
<div class="agent-content"><pre id="jred"></pre></div>
</div>
<div class="agent-box" onclick="toggleBlur(this)">
<h3>Synthesizer</h3>
<div class="agent-content"><pre id="synthesis"></pre></div>
</div>
</div>
</div>
</div>
<script src="/static/app.js"></script>
<script>
// Simple function to handle the blur reveal on click
function toggleBlur(element) {
const content = element.querySelector('.agent-content');
content.classList.toggle('revealed');
}
</script>
</body>
</html>