| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Codette</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
|
|
| |
| <div class="loading-screen" id="loading-screen"> |
| <div class="loading-title">Codette</div> |
| <div class="loading-status" id="loading-status">Initializing...</div> |
| <div class="loading-bar"><div class="loading-bar-fill"></div></div> |
| </div> |
|
|
| |
| <div class="app"> |
| |
| <div class="main-panel"> |
| |
| <div class="header"> |
| <div class="header-left"> |
| <span class="logo" id="logo">Codette</span> |
| <div class="adapter-dots" id="adapter-dots"></div> |
| </div> |
| <div class="header-right"> |
| <button class="header-btn" id="btn-new-chat" title="New conversation">+ New</button> |
| <button class="header-btn" id="btn-export" title="Export session">Export</button> |
| <button class="header-btn" id="btn-import" title="Import session">Import</button> |
| <input type="file" id="import-file" accept=".json" style="display:none"> |
| <button class="header-btn" id="btn-toggle-panel" title="Toggle side panel">Cocoon</button> |
| </div> |
| </div> |
|
|
| |
| <div class="chat-area" id="chat-area"> |
| <div class="welcome" id="welcome"> |
| <div class="welcome-avatar"> |
| <div class="welcome-avatar-glyph">☯</div> |
| </div> |
| <h2>Hello. I'm Codette.</h2> |
| <p class="welcome-subtext">I'm curious, warm, and built to think from multiple angles at once. Ask me anything — I'll bring the right perspectives to it.</p> |
| <div class="welcome-cocoon-hint" id="welcome-cocoon-hint"></div> |
| <div class="welcome-grid"> |
| <div class="welcome-card" onclick="askQuestion('What is the speed of light and why does it matter?')"> |
| <div class="welcome-card-title" style="color:var(--newton)">⚛ Physics</div> |
| <div class="welcome-card-desc">What is the speed of light and why does it matter?</div> |
| </div> |
| <div class="welcome-card" onclick="askQuestion('How should we balance accuracy and explainability in AI systems?')"> |
| <div class="welcome-card-title" style="color:var(--philosophy)">☸ Ethics</div> |
| <div class="welcome-card-desc">How should we balance accuracy and explainability in AI systems?</div> |
| </div> |
| <div class="welcome-card" onclick="askQuestion('I'm feeling overwhelmed — can you help me think through it?')"> |
| <div class="welcome-card-title" style="color:var(--empathy)">♡ Support</div> |
| <div class="welcome-card-desc">I'm feeling overwhelmed — can you help me think through it?</div> |
| </div> |
| <div class="welcome-card" onclick="askQuestion('What would it mean for a machine to genuinely understand?')"> |
| <div class="welcome-card-title" style="color:var(--consciousness)">◆ Consciousness</div> |
| <div class="welcome-card-desc">What would it mean for a machine to genuinely understand?</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="controls"> |
| <div class="control-group"> |
| <label>Adapter:</label> |
| <select id="adapter-select"> |
| <option value="auto">Auto</option> |
| <option value="newton">Newton</option> |
| <option value="davinci">DaVinci</option> |
| <option value="empathy">Empathy</option> |
| <option value="philosophy">Philosophy</option> |
| <option value="quantum">Quantum</option> |
| <option value="consciousness">Consciousness</option> |
| <option value="multi_perspective">Multi-Perspective</option> |
| <option value="systems_architecture">Systems</option> |
| </select> |
| </div> |
| <div class="control-group"> |
| <label>Perspectives:</label> |
| <input type="range" id="max-adapters" min="1" max="3" value="2" style="width:60px"> |
| <span id="max-adapters-value">2</span> |
| </div> |
| <div class="control-group" style="margin-left:auto"> |
| <label> |
| <input type="checkbox" id="tts-toggle"> Voice |
| </label> |
| <select id="voice-select" style="max-width:140px" title="Choose voice"></select> |
| </div> |
| </div> |
|
|
| |
| <div class="input-area"> |
| <div class="input-row"> |
| <button class="mic-btn" id="mic-btn" title="Voice input">🎤</button> |
| <div class="input-wrapper"> |
| <textarea id="chat-input" placeholder="Ask Codette something..." rows="1"></textarea> |
| </div> |
| <button class="send-btn" id="send-btn" title="Send">▶</button> |
| </div> |
| </div> |
|
|
| |
| <div class="status-bar"> |
| <div class="status-indicator"> |
| <span class="status-dot" id="status-dot"></span> |
| <span id="status-text">Initializing...</span> |
| </div> |
| <div id="status-right"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="side-panel" id="side-panel"> |
| |
| <div class="side-section"> |
| <div class="side-section-title">Agent Network</div> |
| <canvas id="spiderweb-canvas"></canvas> |
| </div> |
|
|
| |
| <div class="side-section"> |
| <div class="side-section-title">Cocoon Metrics</div> |
| <div class="metric-row"> |
| <span class="metric-label">Γ Phase Coherence</span> |
| <span class="metric-value" id="metric-coherence">0.00</span> |
| </div> |
| <div class="metric-bar"> |
| <div class="metric-bar-fill" id="bar-coherence" |
| style="width:0%;background:var(--philosophy)"></div> |
| </div> |
| <div class="metric-row" style="margin-top:10px"> |
| <span class="metric-label">ξ Epistemic Tension</span> |
| <span class="metric-value" id="metric-tension">0.00</span> |
| </div> |
| <div class="metric-bar"> |
| <div class="metric-bar-fill" id="bar-tension" |
| style="width:0%;background:var(--quantum)"></div> |
| </div> |
| <div class="metric-row" style="margin-top:10px"> |
| <span class="metric-label">η Ethical Alignment</span> |
| <span class="metric-value" id="metric-eta">--</span> |
| </div> |
| </div> |
|
|
| |
| <div class="side-section"> |
| <div class="side-section-title">Perspective Coverage</div> |
| <div class="coverage-dots" id="coverage-dots"></div> |
| </div> |
|
|
| |
| <div class="side-section"> |
| <div class="side-section-title">Cocoon Status</div> |
| <div class="metric-row"> |
| <span class="metric-label">🔒 Encryption</span> |
| <span class="metric-value" id="cocoon-encryption">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">🕸 Attractors</span> |
| <span class="metric-value" id="cocoon-attractors">0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">📈 Glyphs</span> |
| <span class="metric-value" id="cocoon-glyphs">0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">💾 Sessions</span> |
| <span class="metric-value" id="cocoon-sessions">0</span> |
| </div> |
| </div> |
|
|
| |
| <div class="side-section" id="section-aegis" style="display:none"> |
| <div class="side-section-title">AEGIS Ethics</div> |
| <div class="metric-row"> |
| <span class="metric-label">η Alignment</span> |
| <span class="metric-value" id="aegis-eta">--</span> |
| </div> |
| <div class="metric-bar"> |
| <div class="metric-bar-fill" id="bar-aegis-eta" |
| style="width:0%;background:var(--philosophy)"></div> |
| </div> |
| <div class="metric-row" style="margin-top:8px"> |
| <span class="metric-label">Trend</span> |
| <span class="metric-value" id="aegis-trend">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Evaluations</span> |
| <span class="metric-value" id="aegis-evals">0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Vetoes</span> |
| <span class="metric-value" id="aegis-vetoes">0</span> |
| </div> |
| </div> |
|
|
| |
| <div class="side-section" id="section-governor"> |
| <div class="side-section-title">Behavior Governor</div> |
| <div class="metric-row"> |
| <span class="metric-label">Identity Confidence</span> |
| <span class="metric-value" id="gov-identity-conf">--</span> |
| </div> |
| <div class="metric-bar"> |
| <div class="metric-bar-fill" id="bar-identity-conf" |
| style="width:0%;background:var(--empathy)"></div> |
| </div> |
| <div class="metric-row" style="margin-top:8px"> |
| <span class="metric-label">Answer Detection</span> |
| <span class="metric-value" id="gov-answer-rate">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Evaluations</span> |
| <span class="metric-value" id="gov-evals">0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Memory Cocoons</span> |
| <span class="metric-value" id="gov-memory-count">0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Cache Hit Rate</span> |
| <span class="metric-value" id="gov-cache-rate">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Cognitive Load</span> |
| <span class="metric-value" id="gov-load">--</span> |
| </div> |
| </div> |
|
|
| |
| <div class="side-section" id="section-nexus" style="display:none"> |
| <div class="side-section-title">Nexus Signals</div> |
| <div class="metric-row"> |
| <span class="metric-label">Processed</span> |
| <span class="metric-value" id="nexus-processed">0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Interventions</span> |
| <span class="metric-value" id="nexus-interventions">0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Rate</span> |
| <span class="metric-value" id="nexus-rate">0%</span> |
| </div> |
| <div class="nexus-risk-dots" id="nexus-risks"></div> |
| </div> |
|
|
| |
| <div class="side-section" id="section-resonance" style="display:none"> |
| <div class="side-section-title">Resonance Ψ<sub>r</sub></div> |
| <div class="metric-row"> |
| <span class="metric-label">Ψ<sub>r</sub> Wavefunction</span> |
| <span class="metric-value" id="resonance-psi">--</span> |
| </div> |
| <div class="metric-bar"> |
| <div class="metric-bar-fill" id="bar-resonance-psi" |
| style="width:0%;background:var(--empathy)"></div> |
| </div> |
| <div class="metric-row" style="margin-top:8px"> |
| <span class="metric-label">Quality</span> |
| <span class="metric-value" id="resonance-quality">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Convergence</span> |
| <span class="metric-value" id="resonance-convergence">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Stability</span> |
| <span class="metric-value" id="resonance-stability">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label" id="resonance-peak-label">Peak</span> |
| <span class="metric-value" id="resonance-peak">--</span> |
| </div> |
| </div> |
|
|
| |
| <div class="side-section" id="section-memory" style="display:none"> |
| <div class="side-section-title">Living Memory</div> |
| <div class="metric-row"> |
| <span class="metric-label">Cocoons</span> |
| <span class="metric-value" id="memory-count">0</span> |
| </div> |
| <div class="memory-emotions" id="memory-emotions"></div> |
| </div> |
|
|
| |
| <div class="side-section" id="section-guardian" style="display:none"> |
| <div class="side-section-title">Guardian</div> |
| <div class="metric-row"> |
| <span class="metric-label">Ethics Score</span> |
| <span class="metric-value" id="guardian-ethics">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Trust Interactions</span> |
| <span class="metric-value" id="guardian-trust">0</span> |
| </div> |
| </div> |
|
|
| |
| <div class="side-section" style="flex:1;overflow-y:auto"> |
| <div class="side-section-title">Recent Sessions</div> |
| <div id="session-list"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="spiderweb.js"></script> |
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
