| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Sphero Γ Neuraxon 2.0 β Bio-Inspired Neural Control</title> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); |
| | |
| | :root { |
| | --bg-abyss: #030709; |
| | --bg-deep: #060d14; |
| | --bg-card: #0a1520; |
| | --bg-raised: #0e1a28; |
| | --bg-glass: rgba(10,21,32,0.75); |
| | --border-faint: rgba(34,211,238,0.08); |
| | --border-glow: rgba(34,211,238,0.2); |
| | --border-active: rgba(34,211,238,0.5); |
| | --txt-primary: #e0f2fe; |
| | --txt-secondary: #7aa3c0; |
| | --txt-dim: #3a5f7a; |
| | --cyan: #22d3ee; |
| | --cyan-bright: #67e8f9; |
| | --green: #34d399; |
| | --green-dim: rgba(52,211,153,0.15); |
| | --red: #fb7185; |
| | --red-dim: rgba(251,113,133,0.15); |
| | --amber: #fbbf24; |
| | --purple: #a78bfa; |
| | --pink: #f472b6; |
| | --blue: #60a5fa; |
| | --excite: #22d3ee; |
| | --neutral: #475569; |
| | --inhibit: #f472b6; |
| | --da-color: #fbbf24; |
| | --sht-color: #a78bfa; |
| | --ach-color: #34d399; |
| | --na-color: #fb7185; |
| | --mono: 'JetBrains Mono', monospace; |
| | --sans: 'Outfit', system-ui, sans-serif; |
| | } |
| | |
| | * { box-sizing: border-box; margin: 0; padding: 0; } |
| | html { height: 100%; } |
| | body { |
| | min-height: 100%; background: var(--bg-abyss); color: var(--txt-primary); |
| | font-family: var(--sans); overflow-x: hidden; |
| | background-image: |
| | radial-gradient(ellipse 80% 50% at 20% 80%, rgba(34,211,238,0.03) 0%, transparent 60%), |
| | radial-gradient(ellipse 60% 40% at 80% 20%, rgba(164,139,250,0.03) 0%, transparent 60%); |
| | } |
| | |
| | |
| | header { |
| | position: sticky; top: 0; z-index: 100; |
| | display: flex; justify-content: space-between; align-items: center; |
| | padding: 12px 24px; |
| | background: rgba(3,7,9,0.9); backdrop-filter: blur(20px) saturate(1.5); |
| | border-bottom: 1px solid var(--border-faint); |
| | } |
| | .logo-area { display: flex; align-items: center; gap: 12px; } |
| | .logo-area h1 { |
| | font-size: 17px; font-weight: 700; letter-spacing: -0.02em; |
| | background: linear-gradient(135deg, var(--cyan), var(--purple)); |
| | -webkit-background-clip: text; -webkit-text-fill-color: transparent; |
| | } |
| | .logo-area .subtitle { font-size: 10px; color: var(--txt-dim); font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } |
| | .header-right { display: flex; align-items: center; gap: 14px; } |
| | .status-badge { |
| | font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; |
| | padding: 5px 14px; border-radius: 20px; border: 1px solid; |
| | display: flex; align-items: center; gap: 6px; |
| | } |
| | .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } |
| | .status-badge.on { color: var(--green); border-color: rgba(52,211,153,0.3); } |
| | .status-badge.on::before { background: var(--green); box-shadow: 0 0 8px var(--green); } |
| | .status-badge.off { color: var(--red); border-color: rgba(251,113,133,0.2); } |
| | .status-badge.off::before { background: var(--red); } |
| | .mode-indicator { |
| | font-family: var(--mono); font-size: 10px; font-weight: 500; |
| | padding: 5px 12px; border-radius: 6px; letter-spacing: 0.05em; |
| | background: rgba(34,211,238,0.08); color: var(--cyan); border: 1px solid rgba(34,211,238,0.15); |
| | } |
| | |
| | |
| | .app-grid { |
| | display: grid; |
| | grid-template-columns: 280px 1fr 260px; |
| | grid-template-rows: auto 1fr auto; |
| | gap: 0; |
| | height: calc(100vh - 49px); |
| | max-height: calc(100vh - 49px); |
| | } |
| | @media (max-width: 1024px) { |
| | .app-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; } |
| | .panel-left, .panel-right { border: none !important; } |
| | } |
| | |
| | |
| | .panel-left { |
| | grid-row: 1 / -1; |
| | border-right: 1px solid var(--border-faint); |
| | background: var(--bg-deep); |
| | overflow-y: auto; padding: 16px; |
| | display: flex; flex-direction: column; gap: 14px; |
| | } |
| | .panel-center { |
| | grid-row: 1 / -1; |
| | display: flex; flex-direction: column; |
| | position: relative; overflow: hidden; |
| | cursor: grab; |
| | } |
| | .panel-center:active { cursor: grabbing; } |
| | .panel-right { |
| | grid-row: 1 / -1; |
| | border-left: 1px solid var(--border-faint); |
| | background: var(--bg-deep); |
| | overflow-y: auto; padding: 16px; |
| | display: flex; flex-direction: column; gap: 14px; |
| | } |
| | |
| | |
| | .card { |
| | background: var(--bg-card); border: 1px solid var(--border-faint); |
| | border-radius: 10px; padding: 14px; position: relative; |
| | } |
| | .card-title { |
| | font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; |
| | color: var(--txt-dim); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; |
| | } |
| | .card-title .dot { width: 5px; height: 5px; border-radius: 50%; } |
| | |
| | |
| | .connect-row { display: flex; gap: 8px; } |
| | .btn { |
| | flex: 1; padding: 10px 16px; border: none; border-radius: 8px; |
| | font-family: var(--sans); font-size: 12px; font-weight: 600; |
| | cursor: pointer; transition: all 0.2s; |
| | } |
| | .btn:disabled { opacity: 0.35; cursor: not-allowed; } |
| | .btn-primary { |
| | background: linear-gradient(135deg, var(--cyan), #3b82f6); |
| | color: #fff; box-shadow: 0 2px 12px rgba(34,211,238,0.2); |
| | } |
| | .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(34,211,238,0.3); } |
| | .btn-secondary { background: var(--bg-raised); color: var(--txt-secondary); border: 1px solid var(--border-faint); } |
| | .btn-secondary:hover:not(:disabled) { border-color: var(--border-glow); } |
| | |
| | |
| | .mode-group { display: flex; gap: 4px; background: var(--bg-abyss); border-radius: 8px; padding: 3px; } |
| | .mode-btn { |
| | flex: 1; padding: 8px 6px; border: none; border-radius: 6px; cursor: pointer; |
| | font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.03em; |
| | background: transparent; color: var(--txt-dim); transition: all 0.2s; |
| | } |
| | .mode-btn.active { background: var(--bg-raised); color: var(--cyan); box-shadow: 0 0 12px rgba(34,211,238,0.1); } |
| | .mode-btn:hover:not(.active) { color: var(--txt-secondary); } |
| | |
| | |
| | .neuromod-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } |
| | .neuromod-label { font-family: var(--mono); font-size: 10px; font-weight: 600; width: 28px; text-align: right; } |
| | .neuromod-slider { |
| | flex: 1; -webkit-appearance: none; appearance: none; |
| | height: 4px; border-radius: 2px; outline: none; background: var(--bg-abyss); |
| | } |
| | .neuromod-slider::-webkit-slider-thumb { |
| | -webkit-appearance: none; width: 14px; height: 14px; |
| | border-radius: 50%; cursor: pointer; border: 2px solid; |
| | } |
| | .neuromod-val { font-family: var(--mono); font-size: 10px; width: 32px; color: var(--txt-dim); } |
| | .nm-da .neuromod-label { color: var(--da-color); } |
| | .nm-da .neuromod-slider::-webkit-slider-thumb { background: var(--da-color); border-color: var(--da-color); } |
| | .nm-sht .neuromod-label { color: var(--sht-color); } |
| | .nm-sht .neuromod-slider::-webkit-slider-thumb { background: var(--sht-color); border-color: var(--sht-color); } |
| | .nm-ach .neuromod-label { color: var(--ach-color); } |
| | .nm-ach .neuromod-slider::-webkit-slider-thumb { background: var(--ach-color); border-color: var(--ach-color); } |
| | .nm-na .neuromod-label { color: var(--na-color); } |
| | .nm-na .neuromod-slider::-webkit-slider-thumb { background: var(--na-color); border-color: var(--na-color); } |
| | |
| | |
| | .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } |
| | .metric-box { |
| | background: var(--bg-abyss); border-radius: 6px; padding: 8px 10px; |
| | border: 1px solid var(--border-faint); |
| | } |
| | .metric-label { font-size: 9px; color: var(--txt-dim); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; } |
| | .metric-value { font-size: 16px; font-weight: 700; margin-top: 2px; } |
| | .metric-value.exc { color: var(--excite); } |
| | .metric-value.inh { color: var(--inhibit); } |
| | .metric-value.neu { color: var(--txt-dim); } |
| | |
| | |
| | .dpad-container { display: flex; justify-content: center; } |
| | .dpad-grid { |
| | display: grid; grid-template-columns: 54px 54px 54px; grid-template-rows: 54px 54px 54px; |
| | gap: 5px; |
| | } |
| | .dpad-btn { |
| | width: 54px; height: 54px; border-radius: 10px; border: 1.5px solid var(--border-glow); |
| | background: var(--bg-raised); color: var(--txt-dim); font-size: 18px; font-weight: 700; |
| | display: grid; place-items: center; cursor: pointer; transition: all 0.1s; |
| | user-select: none; -webkit-user-select: none; font-family: var(--sans); |
| | } |
| | .dpad-btn:active, .dpad-btn.active { |
| | background: rgba(34,211,238,0.15); border-color: var(--cyan); color: var(--cyan); |
| | box-shadow: 0 0 14px rgba(34,211,238,0.25); transform: scale(0.94); |
| | } |
| | .dpad-btn.stop-btn { font-size: 9px; font-family: var(--mono); border-color: rgba(251,113,133,0.3); color: var(--red); font-weight: 600; } |
| | .dpad-btn.stop-btn:active, .dpad-btn.stop-btn.active { background: rgba(251,113,133,0.15); box-shadow: 0 0 14px rgba(251,113,133,0.2); } |
| | .dpad-hidden { visibility: hidden; } |
| | .dpad-hint { text-align: center; font-size: 9px; color: var(--txt-dim); font-family: var(--mono); margin-top: 8px; } |
| | |
| | |
| | #neuralCanvas { |
| | width: 100%; height: 100%; display: block; |
| | background: transparent; |
| | } |
| | .canvas-overlay { |
| | position: absolute; bottom: 12px; left: 12px; right: 12px; |
| | display: flex; justify-content: space-between; align-items: flex-end; |
| | pointer-events: none; |
| | } |
| | .overlay-chip { |
| | font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; |
| | padding: 4px 10px; border-radius: 4px; |
| | background: rgba(3,7,9,0.8); color: var(--txt-dim); |
| | border: 1px solid var(--border-faint); backdrop-filter: blur(8px); |
| | } |
| | .overlay-chip span { color: var(--cyan); } |
| | |
| | |
| | .focus-hud { |
| | position: absolute; top: 14px; left: 50%; transform: translateX(-50%); |
| | pointer-events: none; z-index: 10; |
| | background: rgba(3,7,9,0.88); backdrop-filter: blur(16px) saturate(1.4); |
| | border: 1px solid rgba(251,191,36,0.3); border-radius: 10px; |
| | padding: 10px 18px; min-width: 220px; |
| | font-family: var(--mono); font-size: 10px; |
| | display: flex; gap: 14px; align-items: center; |
| | opacity: 0; transition: opacity 0.25s ease; |
| | box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 20px rgba(251,191,36,0.05); |
| | } |
| | .focus-hud.visible { opacity: 1; } |
| | .focus-hud .node-id { font-size: 16px; font-weight: 800; min-width: 30px; text-align: center; } |
| | .focus-hud .node-meta { display: flex; flex-direction: column; gap: 2px; } |
| | .focus-hud .meta-row { display: flex; gap: 8px; } |
| | .focus-hud .meta-label { color: var(--txt-dim); font-size: 9px; width: 50px; } |
| | .focus-hud .meta-val { font-weight: 600; font-size: 10px; } |
| | |
| | |
| | .pan-hint { |
| | position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); |
| | pointer-events: none; z-index: 5; |
| | font-family: var(--mono); font-size: 11px; color: rgba(224,242,254,0.25); |
| | letter-spacing: 0.05em; text-align: center; |
| | transition: opacity 1.2s ease; |
| | } |
| | .pan-hint.hidden { opacity: 0; } |
| | |
| | |
| | .legend-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } |
| | .legend-item { display: flex; align-items: center; gap: 5px; font-size: 9px; font-family: var(--mono); color: var(--txt-dim); } |
| | .legend-dot { width: 8px; height: 8px; border-radius: 50%; } |
| | .legend-dot.exc { background: var(--excite); box-shadow: 0 0 6px var(--excite); } |
| | .legend-dot.inh { background: var(--inhibit); box-shadow: 0 0 6px var(--inhibit); } |
| | .legend-dot.neu { background: var(--neutral); } |
| | |
| | |
| | .log-panel { |
| | font-family: var(--mono); font-size: 10px; line-height: 1.6; |
| | overflow-y: auto; padding: 10px; max-height: 160px; |
| | background: rgba(0,0,0,0.4); border: 1px solid var(--border-faint); |
| | border-radius: 8px; color: var(--txt-dim); white-space: pre-wrap; |
| | } |
| | .log-panel::-webkit-scrollbar { width: 4px; } |
| | .log-panel::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 2px; } |
| | |
| | |
| | .motor-display { display: flex; gap: 10px; align-items: center; justify-content: center; } |
| | .motor-dial { |
| | width: 80px; height: 80px; border-radius: 50%; |
| | border: 2px solid var(--border-glow); background: var(--bg-abyss); |
| | position: relative; display: flex; align-items: center; justify-content: center; |
| | } |
| | .motor-dial .needle { |
| | width: 2px; height: 30px; background: var(--cyan); |
| | position: absolute; bottom: 50%; left: calc(50% - 1px); |
| | transform-origin: bottom center; transition: transform 0.15s; |
| | border-radius: 1px; box-shadow: 0 0 6px var(--cyan); |
| | } |
| | .motor-dial .center-dot { |
| | width: 8px; height: 8px; border-radius: 50%; |
| | background: var(--cyan); position: absolute; |
| | box-shadow: 0 0 10px var(--cyan); |
| | } |
| | .motor-label { font-family: var(--mono); font-size: 9px; color: var(--txt-dim); text-align: center; margin-top: 4px; } |
| | .motor-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--cyan); text-align: center; } |
| | |
| | |
| | .activity-bar { |
| | height: 40px; background: var(--bg-abyss); border-radius: 6px; |
| | border: 1px solid var(--border-faint); overflow: hidden; |
| | display: flex; position: relative; |
| | } |
| | .activity-bar canvas { width: 100%; height: 100%; } |
| | |
| | |
| | .panel-left::-webkit-scrollbar, .panel-right::-webkit-scrollbar { width: 4px; } |
| | .panel-left::-webkit-scrollbar-thumb, .panel-right::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 2px; } |
| | |
| | .controls-disabled { opacity: 0.3; pointer-events: none; } |
| | |
| | |
| | .progress-track { |
| | width: 100%; height: 18px; background: var(--bg-abyss); |
| | border-radius: 9px; border: 1px solid var(--border-faint); |
| | overflow: hidden; position: relative; |
| | } |
| | .progress-fill { |
| | height: 100%; border-radius: 9px; transition: width 0.4s ease; |
| | background: linear-gradient(90deg, rgba(251,191,36,0.4), rgba(52,211,153,0.8)); |
| | position: relative; |
| | } |
| | .progress-fill.learned { |
| | background: linear-gradient(90deg, rgba(52,211,153,0.6), rgba(34,211,238,0.9)); |
| | } |
| | .progress-text { |
| | position: absolute; top: 0; left: 0; right: 0; bottom: 0; |
| | display: flex; align-items: center; justify-content: center; |
| | font-family: var(--mono); font-size: 9px; font-weight: 600; |
| | color: var(--txt-primary); text-shadow: 0 1px 3px rgba(0,0,0,0.6); |
| | pointer-events: none; z-index: 1; |
| | } |
| | .nxon-source-tag { |
| | font-family: var(--mono); font-size: 9px; font-weight: 600; |
| | padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em; |
| | } |
| | .nxon-source-tag.human { background: rgba(52,211,153,0.15); color: var(--green); } |
| | .nxon-source-tag.nxon { background: rgba(164,139,250,0.15); color: var(--purple); } |
| | .nxon-source-tag.learning { background: rgba(251,191,36,0.15); color: var(--amber); } |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <header> |
| | <div class="logo-area"> |
| | <div> |
| | <h1> <a href="https://github.com/DavidVivancos/Neuraxon"> Neuraxon 2.0</a> <a href="https://sphero.com/collections/mini"> Sphero Mini<a> Control</h1> |
| | <div class="subtitle">Bio-Inspired Neural Control By <a href="https://www.vivancos.com/">David Vivancos</a> & <a href="https://josesanchezgarcia.com/">Jose Sanchez</a> for <a href="https://qubic.org/">Qubic</a> Open Science </div> |
| | </div> |
| | </div> |
| | <div class="header-right"> |
| | <div class="mode-indicator" id="modeLabel">MANUAL</div> |
| | <div class="status-badge off" id="connStatus">OFFLINE</div> |
| | </div> |
| | </header> |
| |
|
| | <div class="app-grid"> |
| |
|
| | |
| | <div class="panel-left"> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--cyan)"></div> SPHERO CONNECTION</div> |
| | <div class="connect-row"> |
| | <button class="btn btn-primary" id="btnConnect">Connect</button> |
| | <button class="btn btn-secondary" id="btnDisconnect" disabled>Disconnect</button> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--purple)"></div> CONTROL MODE</div> |
| | <div class="mode-group"> |
| | <button class="mode-btn active" data-mode="manual" onclick="setMode('manual')">Manual</button> |
| | <button class="mode-btn" data-mode="hybrid" onclick="setMode('hybrid')">Hybrid</button> |
| | </div> |
| | </div> |
| |
|
| | <div class="card" id="driveCard"> |
| | <div class="card-title"><div class="dot" style="background:var(--green)"></div> HUMAN DRIVE</div> |
| | <div class="dpad-container"> |
| | <div class="dpad-grid"> |
| | <div class="dpad-hidden"></div> |
| | <div class="dpad-btn" id="btnUp">W</div> |
| | <div class="dpad-hidden"></div> |
| | <div class="dpad-btn" id="btnLeft">A</div> |
| | <div class="dpad-btn stop-btn" id="btnBrake">STOP</div> |
| | <div class="dpad-btn" id="btnRight">D</div> |
| | <div class="dpad-hidden"></div> |
| | <div class="dpad-btn" id="btnDown">S</div> |
| | <div class="dpad-hidden"></div> |
| | </div> |
| | </div> |
| | <div class="dpad-hint">WASD / Arrows / Space</div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--amber)"></div> MOTOR OUTPUT</div> |
| | <div class="motor-display"> |
| | <div> |
| | <div class="motor-dial" id="headingDial"> |
| | <div class="needle" id="headingNeedle"></div> |
| | <div class="center-dot"></div> |
| | </div> |
| | <div class="motor-label">HEADING</div> |
| | <div class="motor-val" id="headingVal">0Β°</div> |
| | </div> |
| | <div style="text-align:center;"> |
| | <div class="metric-box" style="width:80px;padding:12px;"> |
| | <div class="metric-label">SPEED</div> |
| | <div class="metric-value exc" id="speedVal" style="font-size:22px;">0</div> |
| | </div> |
| | <div style="margin-top:6px;"> |
| | <div class="metric-label" style="font-size:8px;">BLEND</div> |
| | <div class="motor-val" id="blendVal" style="font-size:11px;color:var(--purple);">H:100% N:0%</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="card" style="flex:1;min-height:100px;display:flex;flex-direction:column;"> |
| | <div class="card-title"><div class="dot" style="background:var(--txt-dim)"></div> SYSTEM LOG</div> |
| | <div class="log-panel" id="logPanel" style="flex:1;max-height:none;"></div> |
| | </div> |
| |
|
| | </div> |
| |
|
| | |
| | <div class="panel-center" id="panelCenter"> |
| | <canvas id="neuralCanvas"></canvas> |
| |
|
| | |
| | <div class="focus-hud" id="focusHud"> |
| | <div class="node-id" id="focusNodeId">β</div> |
| | <div class="node-meta"> |
| | <div class="meta-row"><span class="meta-label">TYPE</span><span class="meta-val" id="focusType">β</span></div> |
| | <div class="meta-row"><span class="meta-label">STATE</span><span class="meta-val" id="focusState">β</span></div> |
| | <div class="meta-row"><span class="meta-label">s(t)</span><span class="meta-val" id="focusS">β</span></div> |
| | <div class="meta-row"><span class="meta-label">ADAPT</span><span class="meta-val" id="focusAdapt">β</span></div> |
| | <div class="meta-row"><span class="meta-label">HEALTH</span><span class="meta-val" id="focusHealth">β</span></div> |
| | <div class="meta-row"><span class="meta-label">SYNAPSES</span><span class="meta-val" id="focusSyn">β</span></div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="pan-hint" id="panHint">β CLICK & DRAG TO EXPLORE THE NEURAL GRAPH β<br><span style="font-size:9px;opacity:0.5;">scroll to zoom Β· nearest node auto-focuses</span></div> |
| |
|
| | <div class="canvas-overlay"> |
| | <div class="overlay-chip">STEP <span id="stepCount">0</span></div> |
| | <div class="legend-row"> |
| | <div class="legend-item"><div class="legend-dot exc"></div>Excite (+1)</div> |
| | <div class="legend-item"><div class="legend-dot neu"></div>Neutral (0)</div> |
| | <div class="legend-item"><div class="legend-dot inh"></div>Inhibit (-1)</div> |
| | <div class="legend-item" style="opacity:0.6;">β Input</div> |
| | <div class="legend-item" style="opacity:0.6;">β Hidden</div> |
| | <div class="legend-item" style="opacity:0.6;">β‘ Output</div> |
| | </div> |
| | <div class="overlay-chip">ENERGY <span id="energyVal">0.00</span></div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="panel-right"> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--da-color)"></div> NEUROMODULATORS</div> |
| | <div class="neuromod-row nm-da"> |
| | <span class="neuromod-label">DA</span> |
| | <input type="range" class="neuromod-slider" id="sliderDA" min="0" max="100" value="50"> |
| | <span class="neuromod-val" id="valDA">0.50</span> |
| | </div> |
| | <div class="neuromod-row nm-sht"> |
| | <span class="neuromod-label">5HT</span> |
| | <input type="range" class="neuromod-slider" id="slider5HT" min="0" max="100" value="50"> |
| | <span class="neuromod-val" id="val5HT">0.50</span> |
| | </div> |
| | <div class="neuromod-row nm-ach"> |
| | <span class="neuromod-label">ACh</span> |
| | <input type="range" class="neuromod-slider" id="sliderACh" min="0" max="100" value="50"> |
| | <span class="neuromod-val" id="valACh">0.50</span> |
| | </div> |
| | <div class="neuromod-row nm-na"> |
| | <span class="neuromod-label">NA</span> |
| | <input type="range" class="neuromod-slider" id="sliderNA" min="0" max="100" value="50"> |
| | <span class="neuromod-val" id="valNA">0.50</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--cyan)"></div> NETWORK STATS</div> |
| | <div class="metrics-grid"> |
| | <div class="metric-box"> |
| | <div class="metric-label">Excitatory</div> |
| | <div class="metric-value exc" id="statExc">0</div> |
| | </div> |
| | <div class="metric-box"> |
| | <div class="metric-label">Inhibitory</div> |
| | <div class="metric-value inh" id="statInh">0</div> |
| | </div> |
| | <div class="metric-box"> |
| | <div class="metric-label">Neutral</div> |
| | <div class="metric-value neu" id="statNeu">0</div> |
| | </div> |
| | <div class="metric-box"> |
| | <div class="metric-label">Synapses</div> |
| | <div class="metric-value" style="color:var(--blue)" id="statSyn">0</div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--sht-color)"></div> OSCILLATOR BANK</div> |
| | <canvas id="oscCanvas" width="228" height="90" style="width:100%;height:90px;border-radius:6px;background:var(--bg-abyss);"></canvas> |
| | </div> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--green)"></div> ACTIVITY TRACE</div> |
| | <div class="activity-bar"> |
| | <canvas id="activityCanvas" width="228" height="40" style="width:100%;height:40px;"></canvas> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--pink)"></div> RECEPTOR ACTIVATIONS</div> |
| | <div id="receptorBars" style="display:flex;flex-direction:column;gap:4px;"></div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--amber)"></div> LEARNING PROGRESS</div> |
| | <div style="margin-bottom:8px;"> |
| | <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;"> |
| | <span style="font-family:var(--mono);font-size:9px;color:var(--txt-dim);">ACCURACY</span> |
| | <span style="font-family:var(--mono);font-size:11px;font-weight:700;color:var(--green);" id="learnPct">0%</span> |
| | </div> |
| | <div class="progress-track"> |
| | <div class="progress-fill" id="learnBar" style="width:0%;"></div> |
| | <div class="progress-text" id="learnBarText">Drive in MANUAL to teach</div> |
| | </div> |
| | </div> |
| | <div class="metrics-grid"> |
| | <div class="metric-box"> |
| | <div class="metric-label">Teach Steps</div> |
| | <div class="metric-value" style="color:var(--da-color);font-size:13px;" id="statLearn">0</div> |
| | </div> |
| | <div class="metric-box"> |
| | <div class="metric-label">Mean |Ξw|</div> |
| | <div class="metric-value" style="color:var(--amber);font-size:13px;" id="statDw">0.000</div> |
| | </div> |
| | <div class="metric-box"> |
| | <div class="metric-label">Status</div> |
| | <div class="metric-value" style="color:var(--green);font-size:11px;" id="statStruct">stable</div> |
| | </div> |
| | <div class="metric-box"> |
| | <div class="metric-label">Out Accum</div> |
| | <div class="metric-value" style="color:var(--cyan);font-size:10px;font-family:var(--mono);" id="statAccum">0 0 0 0</div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <div class="card-title"><div class="dot" style="background:var(--purple)"></div> MOTOR SOURCE</div> |
| | <div style="display:flex;gap:6px;justify-content:center;flex-wrap:wrap;" id="sourceTagArea"> |
| | <span class="nxon-source-tag human" id="tagHuman">HUMAN</span> |
| | <span class="nxon-source-tag nxon" id="tagNxon" style="opacity:0.3;">NEURAXON</span> |
| | <span class="nxon-source-tag learning" id="tagLearn" style="opacity:0.3;">LEARNING</span> |
| | </div> |
| | <div style="margin-top:8px;text-align:center;"> |
| | <span style="font-family:var(--mono);font-size:10px;color:var(--txt-dim);" id="sourceDetail">Manual control active</span> |
| | </div> |
| | </div> |
| |
|
| | </div> |
| | </div> |
| |
|
| | <script> |
| | |
| | |
| | |
| | |
| | const UUID_SPHERO_SERVICE = '00010001-574f-4f20-5370-6865726f2121'; |
| | const UUID_SPHERO_SERVICE_INIT = '00020001-574f-4f20-5370-6865726f2121'; |
| | const UUID_CHAR_HANDLE = '00010002-574f-4f20-5370-6865726f2121'; |
| | const UUID_CHAR_USETHEFORCE = '00020005-574f-4f20-5370-6865726f2121'; |
| | const UseTheForceBytes = new Uint8Array([0x75,0x73,0x65,0x74,0x68,0x65,0x66,0x6f,0x72,0x63,0x65,0x2e,0x2e,0x2e,0x62,0x61,0x6e,0x64]); |
| | const API = { ESC: 0xAB, SOP: 0x8D, EOP: 0xD8, ESC_MASK: 0x88 }; |
| | const DeviceId = { powerInfo: 0x13, driving: 0x16, userIO: 0x1A }; |
| | const PowerCmd = { wake: 0x0D, sleep: 0x01 }; |
| | const DrivingCmd = { resetYaw: 0x06, driveWithHeading: 0x07 }; |
| | const UserIOCmd = { allLEDs: 0x0E }; |
| | const Flags = { requestsResponse: 2, requestsOnlyErrorResponse: 4, resetsInactivityTimeout: 8 }; |
| | |
| | class SpheroMiniBLE { |
| | constructor() { |
| | this.device = null; this.server = null; this.ch = new Map(); this.seq = 0; |
| | this._chain = Promise.resolve(); this._qDepth = 0; this._closed = false; |
| | this.onDisconnect = null; |
| | } |
| | _pushEscaped(out, b) { |
| | if (b === API.SOP || b === API.EOP || b === API.ESC) { out.push(API.ESC); out.push(b & (~API.ESC_MASK)); } |
| | else out.push(b); |
| | } |
| | _buildPacket(did, cid, dataBytes, cmdFlags) { |
| | this.seq = (this.seq + 1) & 0xFF; let sum = 0; const out = []; |
| | out.push(API.SOP); out.push(cmdFlags); sum += cmdFlags; |
| | this._pushEscaped(out, did); sum += did; |
| | this._pushEscaped(out, cid); sum += cid; |
| | this._pushEscaped(out, this.seq); sum += this.seq; |
| | for (const b of dataBytes) { this._pushEscaped(out, b); sum += b; } |
| | const chk = (~sum) & 0xFF; this._pushEscaped(out, chk); out.push(API.EOP); |
| | return new Uint8Array(out); |
| | } |
| | _enqueueWrite(fn) { |
| | if (this._closed) return Promise.reject(new Error('BLE closed')); |
| | this._qDepth++; |
| | const run = async () => { try { return await fn(); } finally { this._qDepth = Math.max(0, this._qDepth - 1); } }; |
| | this._chain = this._chain.then(run, run); return this._chain; |
| | } |
| | async connect() { |
| | sysLog('Requesting Bluetooth device...'); |
| | this.device = await navigator.bluetooth.requestDevice({ |
| | filters: [{ services: [UUID_SPHERO_SERVICE] }], |
| | optionalServices: [UUID_SPHERO_SERVICE_INIT] |
| | }); |
| | this.device.addEventListener('gattserverdisconnected', () => { |
| | sysLog('BLE disconnected'); |
| | if (this.onDisconnect) this.onDisconnect(); |
| | }); |
| | sysLog(`Connecting to: ${this.device.name || 'Sphero Mini'}`); |
| | this.server = await this.device.gatt.connect(); |
| | const svcCmd = await this.server.getPrimaryService(UUID_SPHERO_SERVICE); |
| | const svcInit = await this.server.getPrimaryService(UUID_SPHERO_SERVICE_INIT); |
| | const chHandle = await svcCmd.getCharacteristic(UUID_CHAR_HANDLE); |
| | const chForce = await svcInit.getCharacteristic(UUID_CHAR_USETHEFORCE); |
| | this.ch.set('handle', chHandle); |
| | sysLog('Waking Sphero...'); |
| | await this._enqueueWrite(() => chForce.writeValue(UseTheForceBytes)); |
| | await this.send(DeviceId.powerInfo, PowerCmd.wake, [], { response: 'full' }); |
| | await sleep(200); |
| | await this.send(DeviceId.powerInfo, PowerCmd.wake, [], { response: 'full' }); |
| | } |
| | async disconnect() { |
| | this._closed = true; |
| | if (this.device && this.device.gatt.connected) this.device.gatt.disconnect(); |
| | } |
| | async send(did, cid, data, opts = { response: 'errorOnly' }) { |
| | const chHandle = this.ch.get('handle'); if (!chHandle) throw new Error('Handle missing'); |
| | let cmdFlags = Flags.resetsInactivityTimeout; |
| | if (opts.response === 'full') cmdFlags |= Flags.requestsResponse; |
| | else if (opts.response === 'errorOnly') cmdFlags |= Flags.requestsOnlyErrorResponse; |
| | const pkt = this._buildPacket(did, cid, data, cmdFlags); |
| | return this._enqueueWrite(async () => { |
| | if (chHandle.writeValueWithoutResponse && opts.response !== 'full') await chHandle.writeValueWithoutResponse(pkt); |
| | else await chHandle.writeValue(pkt); |
| | return this.seq; |
| | }); |
| | } |
| | async setMainLED(r, g, b) { return this.send(DeviceId.userIO, UserIOCmd.allLEDs, [0x00, 0x70, r & 255, g & 255, b & 255], { response: 'none' }); } |
| | async roll(speed, headingDeg) { |
| | const head = ((headingDeg % 360) + 360) % 360; |
| | return this.send(DeviceId.driving, DrivingCmd.driveWithHeading, [speed & 255, (head >> 8) & 0xFF, head & 0xFF, 0x01], { response: 'none' }); |
| | } |
| | async resetYaw() { return this.send(DeviceId.driving, DrivingCmd.resetYaw, [], { response: 'full' }); } |
| | async stop() { return this.roll(0, 0); } |
| | } |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | class ReceptorSubtype { |
| | constructor(name, threshold, gain, isTonic) { |
| | this.name = name; this.threshold = threshold; |
| | this.gain = gain; this.isTonic = isTonic; this.activation = 0; |
| | } |
| | computeActivation(concentration) { |
| | const k = this.isTonic ? 20 : 10; |
| | this.activation = this.gain / (1 + Math.exp(-k * (concentration - this.threshold))); |
| | return this.activation; |
| | } |
| | } |
| | |
| | class OscillatorBank { |
| | constructor() { |
| | this.bands = [ |
| | { name: 'infraslow', freq: 0.05, phase: Math.random() * Math.PI * 2, amplitude: 0.15 }, |
| | { name: 'slow', freq: 0.5, phase: Math.random() * Math.PI * 2, amplitude: 0.2 }, |
| | { name: 'theta', freq: 6, phase: Math.random() * Math.PI * 2, amplitude: 0.3 }, |
| | { name: 'alpha', freq: 10, phase: Math.random() * Math.PI * 2, amplitude: 0.15 }, |
| | { name: 'gamma', freq: 40, phase: Math.random() * Math.PI * 2, amplitude: 0.25 }, |
| | ]; |
| | this.coupling = 0.3; |
| | } |
| | update(dt) { |
| | for (const b of this.bands) { |
| | b.phase += 2 * Math.PI * b.freq * dt / 1000; |
| | b.phase %= (2 * Math.PI); |
| | } |
| | } |
| | getDrive(neuronId, N) { |
| | const phi = 2 * Math.PI * neuronId / N; |
| | const theta = this.bands[2]; |
| | const gamma = this.bands[4]; |
| | const slow = this.bands[1]; |
| | const infra = this.bands[0]; |
| | const gateTheta = Math.max(0, Math.cos(theta.phase + phi)); |
| | const gammaSig = gamma.amplitude * gateTheta * Math.sin(gamma.phase + 2 * phi); |
| | const slowSig = slow.amplitude * Math.sin(slow.phase + 0.3 * phi); |
| | const infraSig = infra.amplitude * Math.sin(infra.phase); |
| | return this.coupling * (gammaSig + 0.5 * slowSig + 0.3 * infraSig); |
| | } |
| | } |
| | |
| | class NeuromodulatorSystem { |
| | constructor() { |
| | this.modulators = { |
| | DA: { tonic: 0.5, phasic: 0, tauTonic: 5000, tauPhasic: 200, releaseRate: 0.3 }, |
| | SHT: { tonic: 0.5, phasic: 0, tauTonic: 8000, tauPhasic: 500, releaseRate: 0.2 }, |
| | ACh: { tonic: 0.5, phasic: 0, tauTonic: 4000, tauPhasic: 150, releaseRate: 0.25 }, |
| | NA: { tonic: 0.5, phasic: 0, tauTonic: 6000, tauPhasic: 300, releaseRate: 0.2 }, |
| | }; |
| | this.receptors = { |
| | D1: new ReceptorSubtype('D1', 0.4, 1.0, false), |
| | D2: new ReceptorSubtype('D2', 0.6, 0.8, true), |
| | SHT1A: new ReceptorSubtype('5HT1A', 0.3, 1.0, true), |
| | SHT2A: new ReceptorSubtype('5HT2A', 0.5, 0.9, false), |
| | SHT4: new ReceptorSubtype('5HT4', 0.4, 0.7, false), |
| | M1: new ReceptorSubtype('M1', 0.35, 1.0, false), |
| | M2: new ReceptorSubtype('M2', 0.5, 0.6, true), |
| | B1: new ReceptorSubtype('Ξ²1', 0.4, 0.9, false), |
| | A2: new ReceptorSubtype('Ξ±2', 0.3, 0.7, true), |
| | }; |
| | this.externalOverrides = { DA: null, SHT: null, ACh: null, NA: null }; |
| | } |
| | update(activity, dt) { |
| | const { excFrac, meanAct, changeRate } = activity; |
| | for (const [key, m] of Object.entries(this.modulators)) { |
| | m.tonic += (0.5 - m.tonic) * dt / m.tauTonic; |
| | m.phasic *= Math.exp(-dt / m.tauPhasic); |
| | } |
| | this.modulators.DA.phasic += this.modulators.DA.releaseRate * changeRate * dt / 1000; |
| | this.modulators.SHT.tonic += this.modulators.SHT.releaseRate * meanAct * dt / 5000; |
| | this.modulators.ACh.phasic += this.modulators.ACh.releaseRate * excFrac * dt / 1000; |
| | this.modulators.NA.phasic += this.modulators.NA.releaseRate * changeRate * dt / 1000; |
| | this.modulators.ACh.phasic *= (1 - 0.1 * this.modulators.DA.phasic); |
| | this.modulators.SHT.tonic += 0.02 * (this.modulators.NA.tonic + this.modulators.NA.phasic) * dt / 1000; |
| | for (const m of Object.values(this.modulators)) { |
| | m.tonic = clamp(m.tonic, 0, 1); |
| | m.phasic = clamp(m.phasic, 0, 1); |
| | } |
| | for (const [key, val] of Object.entries(this.externalOverrides)) { |
| | if (val !== null) this.modulators[key].tonic = val; |
| | } |
| | } |
| | computeReceptorActivations() { |
| | const R = {}; |
| | const getConc = (modKey, isTonic) => { |
| | const m = this.modulators[modKey]; |
| | return isTonic ? m.tonic : m.tonic + m.phasic; |
| | }; |
| | R.D1 = this.receptors.D1.computeActivation(getConc('DA', false)); |
| | R.D2 = this.receptors.D2.computeActivation(getConc('DA', true)); |
| | R.SHT1A = this.receptors.SHT1A.computeActivation(getConc('SHT', true)); |
| | R.SHT2A = this.receptors.SHT2A.computeActivation(getConc('SHT', false)); |
| | R.SHT4 = this.receptors.SHT4.computeActivation(getConc('SHT', false)); |
| | R.M1 = this.receptors.M1.computeActivation(getConc('ACh', false)); |
| | R.M2 = this.receptors.M2.computeActivation(getConc('ACh', true)); |
| | R.B1 = this.receptors.B1.computeActivation(getConc('NA', false)); |
| | R.A2 = this.receptors.A2.computeActivation(getConc('NA', true)); |
| | return R; |
| | } |
| | } |
| | |
| | class NeuraxonSynapse { |
| | constructor(preId, postId, branchId) { |
| | this.preId = preId; this.postId = postId; this.branchId = branchId; |
| | this.wFast = (Math.random() - 0.5) * 0.6; |
| | this.wSlow = (Math.random() - 0.5) * 0.3; |
| | this.wMeta = (Math.random() - 0.5) * 0.1; |
| | this.tauFast = 50; this.tauSlow = 500; this.tauMeta = 5000; |
| | this.preTrace = 0; this.postTrace = 0; |
| | this.recentDw = 0; this.integrity = 1.0; |
| | this.silent = Math.random() < 0.05; |
| | } |
| | computeInput(preState) { |
| | if (this.silent) return 0; |
| | return (this.wFast + this.wSlow) * preState; |
| | } |
| | getModulatoryEffect() { return this.wMeta; } |
| | update(preState, postState, R, neighborDws, dt) { |
| | const tauSTDP = 150; |
| | this.preTrace += (-this.preTrace / tauSTDP + (preState === 1 ? 1 : 0)) * dt / 1000; |
| | this.postTrace += (-this.postTrace / tauSTDP + (postState === 1 ? 1 : 0)) * dt / 1000; |
| | const Aplus = this.preTrace * (postState === 1 ? 1 : 0); |
| | const Aminus = this.postTrace * (preState === 1 ? 1 : 0); |
| | |
| | const isTurnTarget = (this.postId === 32 || this.postId === 33); |
| | const eta = isTurnTarget ? 0.06 : 0.05; |
| | const d1 = R.D1 || 0.5; |
| | const d2 = R.D2 || 0.5; |
| | let dw = eta * Aplus * d1 - eta * 0.6 * Aminus * d2; |
| | if (preState === 1 && postState === 1) dw += eta * 0.3 * d1; |
| | if (preState === 1 && postState === -1) dw -= eta * 0.2 * d2; |
| | if (postState === 0) dw *= 0.1; |
| | if (neighborDws.length > 0) { |
| | let assoc = 0; |
| | for (const nd of neighborDws) assoc += nd / (1 + Math.random()); |
| | dw += 0.01 * assoc; |
| | } |
| | this.recentDw = dw; |
| | this.wFast += (dt / this.tauFast) * (-this.wFast * 0.0005 + 0.5 * dw); |
| | const slowRate = isTurnTarget ? 0.18 : 0.15; |
| | this.wSlow += (dt / this.tauSlow) * (-this.wSlow * 0.0005 + slowRate * dw); |
| | this.wFast = clamp(this.wFast, -1, 1); |
| | this.wSlow = clamp(this.wSlow, -1, 1); |
| | const shtFactor = 0.5 * (R.SHT2A || 0.5) + 0.1 * (1 - (R.SHT1A || 0.5)); |
| | this.wMeta += (dt / this.tauMeta) * (-this.wMeta * 0.0005 + 0.05 * dw * shtFactor); |
| | this.wMeta = clamp(this.wMeta, -0.5, 0.5); |
| | const activityBonus = (Math.abs(preState) + Math.abs(postState)) * 0.00005; |
| | this.integrity += (-0.00001 + activityBonus) * dt; |
| | this.integrity = clamp(this.integrity, 0, 1); |
| | if (this.silent && Math.abs(preState) === 1 && Math.abs(postState) === 1 && Math.random() < 0.02) { |
| | this.silent = false; |
| | } |
| | } |
| | } |
| | |
| | class Neuraxon { |
| | constructor(id, type) { |
| | this.id = id; this.type = type; |
| | this.s = 0; this.state = 0; |
| | this.theta1 = 0.5; this.theta2 = -0.5; |
| | this.adaptation = 0; this.autoReceptor = 0; |
| | this.rBar = 0; this.targetRate = 0.3; |
| | this.health = 1.0; this.baseRate = 0.05; |
| | this.tau = 80 + Math.random() * 60; |
| | this.branches = 3; |
| | this.x = 0; this.y = 0; |
| | this.prevState = 0; |
| | } |
| | update(branchInputs, modInputs, Iext, oscDrive, R, dt) { |
| | const alpha = 0.001; |
| | this.rBar += alpha * (Math.abs(this.state) - this.rBar) * dt / 1000; |
| | const thetaDend = 0.8; |
| | let D = 0; |
| | for (let b = 0; b < this.branches; b++) { |
| | const inputs = branchInputs[b] || []; |
| | let sigma = 0; |
| | for (const inp of inputs) sigma += inp; |
| | if (Math.abs(sigma) > thetaDend) { |
| | D += Math.sign(sigma) * Math.pow(Math.abs(sigma), 1.3); |
| | } else { |
| | D += sigma; |
| | } |
| | } |
| | const gNA = 1 + 0.5 * (R.B1 || 0.5) + 0.2 * (R.A2 || 0.5); |
| | const spont = (this.baseRate + 0.3 * (R.A2 || 0.3)) * (Math.random() - 0.4); |
| | this.s += (dt / this.tau) * (-this.s + gNA * D + Iext + oscDrive - this.adaptation + spont); |
| | let rawMod = 0; |
| | for (const m of (modInputs || [])) rawMod += m; |
| | rawMod += 0.3 * (R.M1 || 0.5) - 0.2 * (R.M2 || 0.3); |
| | const dThetaMeta = 0.3 * Math.tanh(rawMod); |
| | const etaH = 0.01; |
| | const dThetaHomeo = etaH * (this.rBar - this.targetRate); |
| | const theta1Eff = this.theta1 - dThetaMeta + dThetaHomeo - 0.1 * this.autoReceptor; |
| | const theta2Eff = this.theta2 - dThetaMeta + dThetaHomeo + 0.1 * this.autoReceptor; |
| | this.prevState = this.state; |
| | if (this.s > theta1Eff) this.state = 1; |
| | else if (this.s < theta2Eff) this.state = -1; |
| | else this.state = 0; |
| | const tauA = 300, tauR = 1000; |
| | this.adaptation += (dt / tauA) * (-this.adaptation + 0.1 * Math.abs(this.state)); |
| | this.autoReceptor += (dt / tauR) * (-this.autoReceptor + 0.2 * this.state); |
| | this.health -= 0.00001 * (1 - Math.abs(this.state)) * dt / 1000; |
| | this.health = clamp(this.health, 0.1, 1); |
| | } |
| | } |
| | |
| | class NeuraxonNetwork { |
| | constructor(nInput, nHidden, nOutput) { |
| | this.neurons = []; |
| | this.synapses = []; |
| | this.neuromod = new NeuromodulatorSystem(); |
| | this.oscillators = new OscillatorBank(); |
| | this.energy = 0; |
| | this.step = 0; |
| | this.meanDw = 0; |
| | this.structEvent = ''; |
| | for (let i = 0; i < nInput; i++) this.neurons.push(new Neuraxon(i, 'input')); |
| | for (let i = 0; i < nHidden; i++) this.neurons.push(new Neuraxon(nInput + i, 'hidden')); |
| | for (let i = 0; i < nOutput; i++) this.neurons.push(new Neuraxon(nInput + nHidden + i, 'output')); |
| | this.N = this.neurons.length; |
| | this.nInput = nInput; this.nHidden = nHidden; this.nOutput = nOutput; |
| | this._buildSmallWorld(6, 0.2); |
| | this._addMotorPathways(); |
| | this._layoutNeurons(); |
| | } |
| | _addMotorPathways() { |
| | const outStart = this.nInput + this.nHidden; |
| | |
| | const directMap = [[0, 0], [1, 2], [2, 3], [3, 1]]; |
| | const turnOutputs = new Set([2, 3]); |
| | for (const [inp, out] of directMap) { |
| | const syn = new NeuraxonSynapse(inp, outStart + out, 0); |
| | const isTurn = turnOutputs.has(out); |
| | syn.wFast = isTurn ? 0.7 + Math.random() * 0.15 : 0.6 + Math.random() * 0.2; |
| | syn.wSlow = isTurn ? 0.35 + Math.random() * 0.1 : 0.3 + Math.random() * 0.1; |
| | syn.integrity = 1.0; |
| | syn.silent = false; |
| | this.synapses.push(syn); |
| | } |
| | for (let h = this.nInput; h < outStart; h++) { |
| | for (let o = outStart; o < this.N; o++) { |
| | const isTurnOut = (o === outStart + 2 || o === outStart + 3); |
| | const connProb = isTurnOut ? 0.45 : 0.4; |
| | if (Math.random() < connProb) { |
| | const syn = new NeuraxonSynapse(h, o, Math.floor(Math.random() * 3)); |
| | syn.wFast = (Math.random() - 0.5) * 0.4; |
| | syn.wSlow = (Math.random() - 0.5) * 0.2; |
| | this.synapses.push(syn); |
| | } |
| | } |
| | } |
| | for (let i = 0; i < this.nInput; i++) { |
| | for (let h = this.nInput; h < outStart; h++) { |
| | if (Math.random() < 0.35) { |
| | const syn = new NeuraxonSynapse(i, h, Math.floor(Math.random() * 3)); |
| | syn.wFast = (Math.random() - 0.5) * 0.5; |
| | syn.wSlow = (Math.random() - 0.5) * 0.2; |
| | this.synapses.push(syn); |
| | } |
| | } |
| | } |
| | for (let i = 4; i <= 5; i++) { |
| | for (let h = this.nInput; h < outStart; h++) { |
| | if (Math.random() < 0.5) { |
| | const syn = new NeuraxonSynapse(i, h, Math.floor(Math.random() * 3)); |
| | syn.wFast = (Math.random() - 0.3) * 0.3; |
| | this.synapses.push(syn); |
| | } |
| | } |
| | } |
| | } |
| | _buildSmallWorld(k, beta) { |
| | const N = this.N; |
| | const halfK = Math.floor(k / 2); |
| | const edges = new Set(); |
| | for (let i = 0; i < N; i++) { |
| | for (let j = 1; j <= halfK; j++) { |
| | const target = (i + j) % N; |
| | const key = Math.min(i, target) + '-' + Math.max(i, target); |
| | if (!edges.has(key)) { |
| | edges.add(key); |
| | const branchId = Math.floor(Math.random() * 3); |
| | this.synapses.push(new NeuraxonSynapse(i, target, branchId)); |
| | } |
| | } |
| | } |
| | const synCopy = [...this.synapses]; |
| | for (const syn of synCopy) { |
| | if (Math.random() < beta) { |
| | let newTarget; |
| | do { newTarget = Math.floor(Math.random() * N); } while (newTarget === syn.preId); |
| | syn.postId = newTarget; |
| | syn.branchId = Math.floor(Math.random() * 3); |
| | } |
| | } |
| | } |
| | _layoutNeurons() { |
| | |
| | |
| | const cx = 0, cy = 0; |
| | |
| | |
| | for (let i = 0; i < this.nInput; i++) { |
| | const angle = (2 * Math.PI * i / this.nInput) - Math.PI / 2; |
| | const r = 80 + (i % 2) * 12; |
| | this.neurons[i].x = cx + r * Math.cos(angle); |
| | this.neurons[i].y = cy + r * Math.sin(angle); |
| | } |
| | |
| | const hidStart = this.nInput; |
| | for (let i = 0; i < this.nHidden; i++) { |
| | const angle = (2 * Math.PI * i / this.nHidden) - Math.PI / 2; |
| | const band = (i % 3 === 0) ? 190 : (i % 3 === 1) ? 230 : 260; |
| | const jitter = (Math.sin(i * 2.7) * 15); |
| | this.neurons[hidStart + i].x = cx + (band + jitter) * Math.cos(angle); |
| | this.neurons[hidStart + i].y = cy + (band + jitter) * Math.sin(angle); |
| | } |
| | |
| | const outStart = this.nInput + this.nHidden; |
| | for (let i = 0; i < this.nOutput; i++) { |
| | const angle = (2 * Math.PI * i / this.nOutput) - Math.PI / 2; |
| | const r = 350; |
| | this.neurons[outStart + i].x = cx + r * Math.cos(angle); |
| | this.neurons[outStart + i].y = cy + r * Math.sin(angle); |
| | } |
| | } |
| | setInputs(values) { |
| | for (let i = 0; i < Math.min(values.length, this.nInput); i++) { |
| | const n = this.neurons[i]; |
| | n.s = values[i] * 2.0; |
| | n.state = values[i] > 0.2 ? 1 : values[i] < -0.2 ? -1 : 0; |
| | n.adaptation = 0; |
| | n.autoReceptor = 0; |
| | } |
| | } |
| | getOutputStates() { |
| | const start = this.nInput + this.nHidden; |
| | return this.neurons.slice(start).map(n => n.state); |
| | } |
| | getOutputValues() { |
| | const start = this.nInput + this.nHidden; |
| | return this.neurons.slice(start).map(n => n.s); |
| | } |
| | simulateStep(dt) { |
| | this.step++; |
| | let excCount = 0, inhCount = 0, neuCount = 0, totalAbs = 0, changes = 0; |
| | for (const n of this.neurons) { |
| | if (n.state === 1) excCount++; |
| | else if (n.state === -1) inhCount++; |
| | else neuCount++; |
| | totalAbs += Math.abs(n.state); |
| | if (n.state !== n.prevState) changes++; |
| | } |
| | const activity = { |
| | excFrac: excCount / this.N, |
| | meanAct: totalAbs / this.N, |
| | changeRate: changes / this.N, |
| | }; |
| | this.neuromod.update(activity, dt); |
| | this.oscillators.update(dt); |
| | const R = this.neuromod.computeReceptorActivations(); |
| | const branchInputs = new Array(this.N); |
| | const modInputs = new Array(this.N); |
| | for (let i = 0; i < this.N; i++) { |
| | branchInputs[i] = [[], [], []]; |
| | modInputs[i] = []; |
| | } |
| | for (const syn of this.synapses) { |
| | const preState = this.neurons[syn.preId].state; |
| | const input = syn.computeInput(preState); |
| | if (branchInputs[syn.postId] && branchInputs[syn.postId][syn.branchId]) { |
| | branchInputs[syn.postId][syn.branchId].push(input); |
| | } |
| | if (modInputs[syn.postId]) { |
| | modInputs[syn.postId].push(syn.getModulatoryEffect()); |
| | } |
| | } |
| | for (const n of this.neurons) { |
| | if (n.type === 'input') continue; |
| | const osc = this.oscillators.getDrive(n.id, this.N); |
| | n.update(branchInputs[n.id], modInputs[n.id], 0, osc, R, dt); |
| | } |
| | let totalDw = 0; |
| | for (const syn of this.synapses) { |
| | const pre = this.neurons[syn.preId]; |
| | const post = this.neurons[syn.postId]; |
| | const neighbors = this.synapses |
| | .filter(s => s.postId === syn.postId && s !== syn && s.branchId === syn.branchId) |
| | .slice(0, 3) |
| | .map(s => s.recentDw); |
| | syn.update(pre.state, post.state, R, neighbors, dt); |
| | totalDw += Math.abs(syn.recentDw); |
| | } |
| | this.meanDw = this.synapses.length > 0 ? totalDw / this.synapses.length : 0; |
| | this.structEvent = ''; |
| | const toRemove = []; |
| | for (let i = this.synapses.length - 1; i >= 0; i--) { |
| | if (this.synapses[i].integrity < 0.1) { toRemove.push(i); } |
| | } |
| | for (const idx of toRemove) { this.synapses.splice(idx, 1); this.structEvent = 'pruned'; } |
| | if (Math.random() < 0.002 && this.synapses.length < this.N * 8) { |
| | const a = Math.floor(Math.random() * this.N); |
| | const b = Math.floor(Math.random() * this.N); |
| | if (a !== b) { |
| | this.synapses.push(new NeuraxonSynapse(a, b, Math.floor(Math.random() * 3))); |
| | this.structEvent = 'formed'; |
| | } |
| | } |
| | this.energy += 0.01 * excCount * dt / 1000; |
| | return { excCount, inhCount, neuCount, R, activity }; |
| | } |
| | } |
| | |
| | |
| | |
| | |
| | |
| | |
| | const $ = id => document.getElementById(id); |
| | const sleep = ms => new Promise(r => setTimeout(r, ms)); |
| | const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); |
| | |
| | function sysLog(msg) { |
| | const el = $('logPanel'); |
| | const ts = new Date().toLocaleTimeString('en-US', { hour12: false }); |
| | el.textContent += `[${ts}] ${msg}\n`; |
| | el.scrollTop = el.scrollHeight; |
| | } |
| | |
| | let sphero = null; |
| | let isConnected = false; |
| | let controlMode = 'manual'; |
| | let heading = 0; |
| | const BASE_SPEED = 90; |
| | const TURN_DEG = 8; |
| | const activeKeys = new Set(); |
| | let simRunning = true; |
| | |
| | const outputAccum = [0, 0, 0, 0]; |
| | const OUTPUT_DECAY = 0.92; |
| | const OUTPUT_GAIN = 0.5; |
| | |
| | let teachingActive = false; |
| | let teachingTarget = [0, 0, 0, 0]; |
| | let learnCount = 0; |
| | let lastLearnLog = 0; |
| | |
| | |
| | let idleTicks = 0; |
| | const IDLE_TEACH_DELAY = 25; |
| | |
| | |
| | const replayBuffer = []; |
| | const REPLAY_MAX = 200; |
| | let replayIdx = 0; |
| | let isReplaying = false; |
| | |
| | let learnHits = 0; |
| | let learnTrials = 0; |
| | let learnAccuracy = 0; |
| | const LEARN_WINDOW = 300; |
| | const learnHistory = []; |
| | let nxonContributing = false; |
| | |
| | let explorePhase = 0; |
| | let exploreBehavior = 0; |
| | let exploreTimer = 0; |
| | const EXPLORE_DURATION = 160; |
| | |
| | const network = new NeuraxonNetwork(6, 24, 4); |
| | |
| | const activityHistory = []; |
| | const MAX_HIST = 200; |
| | |
| | |
| | function buildReceptorUI() { |
| | const container = $('receptorBars'); |
| | const receptorNames = ['D1','D2','5HT1A','5HT2A','5HT4','M1','M2','Ξ²1','Ξ±2']; |
| | const colors = { |
| | D1: 'var(--da-color)', D2: 'var(--da-color)', |
| | '5HT1A': 'var(--sht-color)', '5HT2A': 'var(--sht-color)', '5HT4': 'var(--sht-color)', |
| | M1: 'var(--ach-color)', M2: 'var(--ach-color)', |
| | 'Ξ²1': 'var(--na-color)', 'Ξ±2': 'var(--na-color)', |
| | }; |
| | container.innerHTML = ''; |
| | for (const name of receptorNames) { |
| | const row = document.createElement('div'); |
| | row.style.cssText = 'display:flex;align-items:center;gap:6px;'; |
| | row.innerHTML = ` |
| | <span style="font-family:var(--mono);font-size:9px;width:38px;text-align:right;color:${colors[name]};font-weight:600;">${name}</span> |
| | <div style="flex:1;height:4px;background:var(--bg-abyss);border-radius:2px;overflow:hidden;"> |
| | <div id="rbar_${name.replace(/[^a-zA-Z0-9]/g,'')}" style="height:100%;width:0%;background:${colors[name]};border-radius:2px;transition:width 0.15s;"></div> |
| | </div> |
| | `; |
| | container.appendChild(row); |
| | } |
| | } |
| | buildReceptorUI(); |
| | |
| | ['DA','5HT','ACh','NA'].forEach(key => { |
| | const sliderId = key === '5HT' ? 'slider5HT' : `slider${key}`; |
| | const valId = key === '5HT' ? 'val5HT' : `val${key}`; |
| | const modKey = key === '5HT' ? 'SHT' : key; |
| | $(sliderId).addEventListener('input', e => { |
| | const v = e.target.value / 100; |
| | $(valId).textContent = v.toFixed(2); |
| | network.neuromod.externalOverrides[modKey] = v; |
| | }); |
| | }); |
| | |
| | function setMode(mode) { |
| | controlMode = mode; |
| | document.querySelectorAll('.mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === mode)); |
| | $('modeLabel').textContent = mode.toUpperCase(); |
| | const driveCard = $('driveCard'); |
| | if (mode === 'neuraxon') { |
| | driveCard.classList.add('controls-disabled'); |
| | } else { |
| | driveCard.classList.remove('controls-disabled'); |
| | } |
| | sysLog(`Mode: ${mode.toUpperCase()}`); |
| | } |
| | |
| | function getHumanAction() { |
| | let speed = 0, turn = 0; |
| | if (activeKeys.has('up')) speed = BASE_SPEED; |
| | if (activeKeys.has('down')) speed = -BASE_SPEED; |
| | if (activeKeys.has('left')) turn = -TURN_DEG; |
| | if (activeKeys.has('right')) turn = TURN_DEG; |
| | if (activeKeys.has('up') && activeKeys.has('left')) { speed = BASE_SPEED * 0.7; turn = -TURN_DEG; } |
| | if (activeKeys.has('up') && activeKeys.has('right')) { speed = BASE_SPEED * 0.7; turn = TURN_DEG; } |
| | return { speed, turn }; |
| | } |
| | |
| | function applyTeachingSignal() { |
| | const outStart = network.nInput + network.nHidden; |
| | teachingTarget = [0, 0, 0, 0]; |
| | teachingActive = false; |
| | |
| | if (activeKeys.has('up')) { teachingTarget[0] = 1; teachingActive = true; } |
| | if (activeKeys.has('down')) { teachingTarget[1] = 1; teachingActive = true; } |
| | if (activeKeys.has('left')) { teachingTarget[2] = 1; teachingActive = true; } |
| | if (activeKeys.has('right')) { teachingTarget[3] = 1; teachingActive = true; } |
| | |
| | |
| | if (!teachingActive && (controlMode === 'manual' || controlMode === 'hybrid')) { |
| | idleTicks++; |
| | |
| | if (idleTicks > IDLE_TEACH_DELAY && idleTicks < IDLE_TEACH_DELAY + 60) { |
| | teachingActive = true; |
| | |
| | for (let i = 0; i < 4; i++) { |
| | const n = network.neurons[outStart + i]; |
| | n.s = -0.3; |
| | n.state = 0; |
| | } |
| | |
| | network.neuromod.modulators.DA.phasic = clamp( |
| | network.neuromod.modulators.DA.phasic + 0.08, 0, 1 |
| | ); |
| | learnCount++; |
| | return; |
| | } |
| | } else { |
| | idleTicks = 0; |
| | } |
| | |
| | if (teachingActive && (controlMode === 'manual' || controlMode === 'hybrid')) { |
| | const isTurnTeach = (teachingTarget[2] === 1 || teachingTarget[3] === 1); |
| | |
| | |
| | const currentInputs = computeSensoryInputs(); |
| | replayBuffer.push({ inputs: [...currentInputs], target: [...teachingTarget] }); |
| | if (replayBuffer.length > REPLAY_MAX) replayBuffer.shift(); |
| | |
| | |
| | let hits = 0, evaluated = 0; |
| | for (let i = 0; i < 4; i++) { |
| | const n = network.neurons[outStart + i]; |
| | const naturalState = n.state; |
| | const desired = teachingTarget[i]; |
| | if (desired === 1) { |
| | evaluated++; |
| | if (naturalState === 1) hits++; |
| | } else { |
| | evaluated++; |
| | if (naturalState <= 0) hits++; |
| | } |
| | } |
| | const hitRatio = evaluated > 0 ? hits / evaluated : 0; |
| | learnHistory.push(hitRatio); |
| | if (learnHistory.length > LEARN_WINDOW) learnHistory.shift(); |
| | if (learnHistory.length > 10) { |
| | const sum = learnHistory.reduce((a, b) => a + b, 0); |
| | learnAccuracy = Math.round((sum / learnHistory.length) * 100); |
| | } |
| | |
| | |
| | for (let i = 0; i < 4; i++) { |
| | const n = network.neurons[outStart + i]; |
| | if (teachingTarget[i] > 0) { |
| | n.s = n.theta1 + 0.8; |
| | n.state = 1; |
| | } else { |
| | n.s = -0.2; |
| | n.state = 0; |
| | } |
| | } |
| | |
| | |
| | const daBoost = isTurnTeach ? 0.25 : 0.2; |
| | network.neuromod.modulators.DA.phasic = clamp( |
| | network.neuromod.modulators.DA.phasic + daBoost, 0, 1 |
| | ); |
| | const achBase = 0.12 * (1 - learnAccuracy / 150); |
| | const achBoost = isTurnTeach ? Math.max(0.05, achBase) : Math.max(0.03, achBase); |
| | network.neuromod.modulators.ACh.phasic = clamp( |
| | network.neuromod.modulators.ACh.phasic + achBoost, 0, 1 |
| | ); |
| | network.neuromod.modulators.NA.phasic = clamp( |
| | network.neuromod.modulators.NA.phasic + 0.05, 0, 1 |
| | ); |
| | |
| | learnCount++; |
| | if (learnCount - lastLearnLog >= 200) { |
| | sysLog(`Learn: ${learnCount} steps | acc: ${learnAccuracy}% | ${isTurnTeach ? 'β» turn' : 'β fwd'}`); |
| | lastLearnLog = learnCount; |
| | } |
| | } |
| | } |
| | |
| | function getNeuraxonAction() { |
| | const outStart = network.nInput + network.nHidden; |
| | for (let i = 0; i < 4; i++) { |
| | const state = network.neurons[outStart + i].state; |
| | outputAccum[i] = outputAccum[i] * OUTPUT_DECAY + state * OUTPUT_GAIN; |
| | outputAccum[i] = clamp(outputAccum[i], -2.0, 2.0); |
| | } |
| | const fwd = Math.max(0, outputAccum[0]); |
| | const back = Math.max(0, outputAccum[1]); |
| | const left = Math.max(0, outputAccum[2]); |
| | const right = Math.max(0, outputAccum[3]); |
| | const rawSpeed = fwd - back * 0.5; |
| | const speed = clamp(Math.round(rawSpeed * BASE_SPEED * 0.9), 0, 180); |
| | const turnRaw = (right - left); |
| | const turn = turnRaw * TURN_DEG * 2.8; |
| | nxonContributing = (speed > 12 || Math.abs(turn) > 2); |
| | return { speed, turn }; |
| | } |
| | |
| | function computeSensoryInputs() { |
| | const inputs = new Array(6).fill(0); |
| | if (controlMode === 'manual' || controlMode === 'hybrid') { |
| | if (activeKeys.has('up')) inputs[0] = 1.0; |
| | if (activeKeys.has('left')) inputs[1] = 1.0; |
| | if (activeKeys.has('right')) inputs[2] = 1.0; |
| | if (activeKeys.has('down')) inputs[3] = 1.0; |
| | inputs[4] = Math.sin(Date.now() / 4000) * 0.2; |
| | inputs[5] = Math.cos(Date.now() / 5000) * 0.15; |
| | } |
| | if (controlMode === 'hybrid') { |
| | inputs[4] += Math.sin(Date.now() / 2000) * 0.25; |
| | inputs[5] += Math.cos(Date.now() / 2500) * 0.2; |
| | if (nxonContributing) { |
| | inputs[4] += outputAccum[0] * 0.15; |
| | inputs[5] += (outputAccum[3] - outputAccum[2]) * 0.1; |
| | } |
| | } |
| | if (controlMode === 'neuraxon') { |
| | |
| | |
| | if (replayBuffer.length > 20 && Math.random() < 0.6) { |
| | |
| | isReplaying = true; |
| | const frame = replayBuffer[replayIdx % replayBuffer.length]; |
| | replayIdx++; |
| | |
| | for (let i = 0; i < 4; i++) { |
| | inputs[i] = frame.inputs[i] * 0.8; |
| | } |
| | } else { |
| | |
| | isReplaying = false; |
| | exploreTimer++; |
| | if (exploreTimer >= EXPLORE_DURATION) { |
| | exploreTimer = 0; |
| | exploreBehavior = (exploreBehavior + 1) % 8; |
| | } |
| | const t = exploreTimer / EXPLORE_DURATION; |
| | const ramp = t < 0.15 ? t / 0.15 : t > 0.85 ? (1 - t) / 0.15 : 1.0; |
| | const intensity = (0.85 + 0.15 * Math.sin(Date.now() / 800)) * ramp; |
| | switch (exploreBehavior) { |
| | case 0: inputs[0] = intensity; break; |
| | case 1: inputs[1] = intensity; break; |
| | case 2: inputs[2] = intensity; break; |
| | case 3: inputs[0] = intensity; inputs[2] = intensity * 0.6; break; |
| | case 4: inputs[0] = intensity; inputs[1] = intensity * 0.6; break; |
| | case 5: inputs[3] = intensity * 0.5; break; |
| | case 6: break; |
| | case 7: break; |
| | } |
| | } |
| | |
| | |
| | const selfGain = 0.25; |
| | inputs[0] += clamp(outputAccum[0] * selfGain, 0, 0.3); |
| | inputs[1] += clamp(outputAccum[2] * selfGain, 0, 0.3); |
| | inputs[2] += clamp(outputAccum[3] * selfGain, 0, 0.3); |
| | inputs[3] += clamp(outputAccum[1] * selfGain, 0, 0.3); |
| | |
| | |
| | inputs[4] = Math.sin(Date.now() / 1000) * 0.5 + Math.sin(Date.now() / 3300) * 0.2; |
| | inputs[5] = Math.cos(Date.now() / 1400) * 0.4 + Math.cos(Date.now() / 4500) * 0.2; |
| | } |
| | for (let i = 0; i < 6; i++) inputs[i] = clamp(inputs[i], -1.5, 1.5); |
| | return inputs; |
| | } |
| | |
| | |
| | let driveInterval = null; |
| | function startDriveLoop() { |
| | if (driveInterval) clearInterval(driveInterval); |
| | driveInterval = setInterval(() => { |
| | if (!isConnected || !sphero) return; |
| | const human = getHumanAction(); |
| | const ai = getNeuraxonAction(); |
| | let finalSpeed, finalTurn; |
| | if (controlMode === 'manual') { |
| | finalSpeed = Math.abs(human.speed); |
| | finalTurn = human.turn; |
| | if (human.speed < 0) finalTurn = 180; |
| | } else if (controlMode === 'hybrid') { |
| | const hSpd = Math.abs(human.speed); |
| | finalSpeed = Math.round(hSpd * 0.75 + ai.speed * 0.25); |
| | finalTurn = human.turn * 0.75 + ai.turn * 0.25; |
| | } else { |
| | finalSpeed = ai.speed; |
| | finalTurn = ai.turn; |
| | } |
| | heading = (heading + finalTurn + 360) % 360; |
| | sphero.roll(clamp(Math.round(finalSpeed), 0, 255), Math.round(heading)).catch(() => {}); |
| | |
| | if (controlMode === 'manual') { |
| | if (teachingActive && idleTicks > IDLE_TEACH_DELAY) { |
| | |
| | sphero.setMainLED(200, 80, 50).catch(() => {}); |
| | } else if (teachingActive) { |
| | sphero.setMainLED(250, 180, 30).catch(() => {}); |
| | } else { |
| | sphero.setMainLED(40, 200, 140).catch(() => {}); |
| | } |
| | } else if (controlMode === 'hybrid') { |
| | if (teachingActive && nxonContributing) sphero.setMainLED(220, 180, 255).catch(() => {}); |
| | else if (teachingActive) sphero.setMainLED(250, 180, 30).catch(() => {}); |
| | else if (nxonContributing) sphero.setMainLED(160, 100, 255).catch(() => {}); |
| | else sphero.setMainLED(40, 140, 160).catch(() => {}); |
| | } else { |
| | if (nxonContributing) sphero.setMainLED(140, 80, 255).catch(() => {}); |
| | else sphero.setMainLED(30, 180, 220).catch(() => {}); |
| | } |
| | |
| | $('speedVal').textContent = Math.round(finalSpeed); |
| | $('headingVal').textContent = Math.round(heading) + 'Β°'; |
| | $('headingNeedle').style.transform = `rotate(${heading}deg)`; |
| | }, 60); |
| | } |
| | |
| | function stopDriveLoop() { |
| | if (driveInterval) { clearInterval(driveInterval); driveInterval = null; } |
| | if (sphero && isConnected) sphero.stop().catch(() => {}); |
| | } |
| | |
| | $('btnConnect').onclick = async () => { |
| | try { |
| | $('btnConnect').disabled = true; |
| | sphero = new SpheroMiniBLE(); |
| | sphero.onDisconnect = () => { |
| | sysLog('Disconnected from Sphero.'); |
| | stopDriveLoop(); |
| | updateConnectionUI(false); |
| | sphero = null; |
| | }; |
| | await sphero.connect(); |
| | sysLog('Setting up...'); |
| | await sphero.setMainLED(34, 211, 238); |
| | await sphero.resetYaw(); |
| | heading = 0; |
| | updateConnectionUI(true); |
| | startDriveLoop(); |
| | sysLog('Connected! Neuraxon brain online.'); |
| | } catch (e) { |
| | sysLog(`Connection failed: ${e.message}`); |
| | updateConnectionUI(false); |
| | } |
| | }; |
| | |
| | $('btnDisconnect').onclick = async () => { |
| | sysLog('Disconnecting...'); |
| | stopDriveLoop(); |
| | if (sphero) { |
| | try { await sphero.setMainLED(0, 0, 0); } catch (e) {} |
| | await sphero.disconnect(); |
| | } |
| | }; |
| | |
| | function updateConnectionUI(connected) { |
| | isConnected = connected; |
| | const s = $('connStatus'); |
| | s.textContent = connected ? 'CONNECTED' : 'OFFLINE'; |
| | s.className = 'status-badge ' + (connected ? 'on' : 'off'); |
| | $('btnConnect').disabled = connected; |
| | $('btnDisconnect').disabled = !connected; |
| | } |
| | |
| | |
| | function bindControls() { |
| | const dirs = { Up: 'up', Down: 'down', Left: 'left', Right: 'right' }; |
| | for (const [btnSuffix, dir] of Object.entries(dirs)) { |
| | const btn = $('btn' + btnSuffix); |
| | const down = () => { activeKeys.add(dir); btn.classList.add('active'); }; |
| | const up = () => { activeKeys.delete(dir); btn.classList.remove('active'); }; |
| | btn.addEventListener('mousedown', down); |
| | btn.addEventListener('mouseup', up); |
| | btn.addEventListener('mouseleave', up); |
| | btn.addEventListener('touchstart', e => { e.preventDefault(); down(); }); |
| | btn.addEventListener('touchend', e => { e.preventDefault(); up(); }); |
| | } |
| | $('btnBrake').addEventListener('mousedown', () => activeKeys.clear()); |
| | $('btnBrake').addEventListener('touchstart', e => { e.preventDefault(); activeKeys.clear(); }); |
| | |
| | document.addEventListener('keydown', e => { |
| | if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' ','w','a','s','d','W','A','S','D'].includes(e.key)) e.preventDefault(); |
| | let dir = null; |
| | if (e.key === 'ArrowUp' || e.key.toLowerCase() === 'w') dir = 'up'; |
| | else if (e.key === 'ArrowDown' || e.key.toLowerCase() === 's') dir = 'down'; |
| | else if (e.key === 'ArrowLeft' || e.key.toLowerCase() === 'a') dir = 'left'; |
| | else if (e.key === 'ArrowRight' || e.key.toLowerCase() === 'd') dir = 'right'; |
| | else if (e.key === ' ') { activeKeys.clear(); return; } |
| | if (dir && !activeKeys.has(dir)) { |
| | activeKeys.add(dir); |
| | const btn = $('btn' + dir.charAt(0).toUpperCase() + dir.slice(1)); |
| | if (btn) btn.classList.add('active'); |
| | } |
| | }); |
| | document.addEventListener('keyup', e => { |
| | let dir = null; |
| | if (e.key === 'ArrowUp' || e.key.toLowerCase() === 'w') dir = 'up'; |
| | else if (e.key === 'ArrowDown' || e.key.toLowerCase() === 's') dir = 'down'; |
| | else if (e.key === 'ArrowLeft' || e.key.toLowerCase() === 'a') dir = 'left'; |
| | else if (e.key === 'ArrowRight' || e.key.toLowerCase() === 'd') dir = 'right'; |
| | if (dir) { |
| | activeKeys.delete(dir); |
| | const btn = $('btn' + dir.charAt(0).toUpperCase() + dir.slice(1)); |
| | if (btn) btn.classList.remove('active'); |
| | } |
| | }); |
| | } |
| | bindControls(); |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | const canvas = $('neuralCanvas'); |
| | const ctx = canvas.getContext('2d'); |
| | const oscCanvas = $('oscCanvas'); |
| | const oscCtx = oscCanvas.getContext('2d'); |
| | const actCanvas = $('activityCanvas'); |
| | const actCtx = actCanvas.getContext('2d'); |
| | |
| | |
| | let camX = 0, camY = 0; |
| | let camZoom = 1.0; |
| | let isDragging = false; |
| | let dragStartX = 0, dragStartY = 0; |
| | let dragStartCamX = 0, dragStartCamY = 0; |
| | let hasDragged = false; |
| | |
| | |
| | let focusedNodeId = -1; |
| | let focusAnimT = 0; |
| | |
| | |
| | const pulseParticles = []; |
| | const MAX_PARTICLES = 80; |
| | |
| | function resizeCanvas() { |
| | const rect = canvas.parentElement.getBoundingClientRect(); |
| | canvas.width = rect.width * window.devicePixelRatio; |
| | canvas.height = rect.height * window.devicePixelRatio; |
| | ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0); |
| | } |
| | window.addEventListener('resize', resizeCanvas); |
| | resizeCanvas(); |
| | |
| | |
| | const panelCenter = $('panelCenter'); |
| | |
| | panelCenter.addEventListener('mousedown', e => { |
| | if (e.target !== canvas) return; |
| | isDragging = true; |
| | dragStartX = e.clientX; |
| | dragStartY = e.clientY; |
| | dragStartCamX = camX; |
| | dragStartCamY = camY; |
| | }); |
| | |
| | window.addEventListener('mousemove', e => { |
| | if (!isDragging) return; |
| | const dx = e.clientX - dragStartX; |
| | const dy = e.clientY - dragStartY; |
| | camX = dragStartCamX + dx / camZoom; |
| | camY = dragStartCamY + dy / camZoom; |
| | if (!hasDragged && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) { |
| | hasDragged = true; |
| | $('panHint').classList.add('hidden'); |
| | } |
| | }); |
| | |
| | window.addEventListener('mouseup', () => { isDragging = false; }); |
| | |
| | |
| | panelCenter.addEventListener('wheel', e => { |
| | e.preventDefault(); |
| | const delta = e.deltaY > 0 ? 0.92 : 1.08; |
| | camZoom = clamp(camZoom * delta, 0.3, 4.0); |
| | if (!hasDragged) { hasDragged = true; $('panHint').classList.add('hidden'); } |
| | }, { passive: false }); |
| | |
| | |
| | let touchStartX = 0, touchStartY = 0, touchStartCamX = 0, touchStartCamY = 0; |
| | panelCenter.addEventListener('touchstart', e => { |
| | if (e.touches.length === 1) { |
| | isDragging = true; |
| | touchStartX = e.touches[0].clientX; |
| | touchStartY = e.touches[0].clientY; |
| | touchStartCamX = camX; |
| | touchStartCamY = camY; |
| | } |
| | }, { passive: true }); |
| | panelCenter.addEventListener('touchmove', e => { |
| | if (!isDragging || e.touches.length !== 1) return; |
| | const dx = e.touches[0].clientX - touchStartX; |
| | const dy = e.touches[0].clientY - touchStartY; |
| | camX = touchStartCamX + dx / camZoom; |
| | camY = touchStartCamY + dy / camZoom; |
| | if (!hasDragged) { hasDragged = true; $('panHint').classList.add('hidden'); } |
| | }, { passive: true }); |
| | panelCenter.addEventListener('touchend', () => { isDragging = false; }); |
| | |
| | |
| | |
| | function worldToScreen(wx, wy) { |
| | const w = canvas.width / window.devicePixelRatio; |
| | const h = canvas.height / window.devicePixelRatio; |
| | return { |
| | x: w / 2 + (wx + camX) * camZoom, |
| | y: h / 2 + (wy + camY) * camZoom, |
| | }; |
| | } |
| | |
| | function screenToWorld(sx, sy) { |
| | const w = canvas.width / window.devicePixelRatio; |
| | const h = canvas.height / window.devicePixelRatio; |
| | return { |
| | x: (sx - w / 2) / camZoom - camX, |
| | y: (sy - h / 2) / camZoom - camY, |
| | }; |
| | } |
| | |
| | |
| | function findFocalNode() { |
| | const w = canvas.width / window.devicePixelRatio; |
| | const h = canvas.height / window.devicePixelRatio; |
| | |
| | const focal = screenToWorld(w / 2, h / 2); |
| | let minDist = Infinity; |
| | let nearestId = -1; |
| | for (const n of network.neurons) { |
| | const dx = n.x - focal.x; |
| | const dy = n.y - focal.y; |
| | const d = dx * dx + dy * dy; |
| | if (d < minDist) { minDist = d; nearestId = n.id; } |
| | } |
| | return nearestId; |
| | } |
| | |
| | |
| | function updateFocusHUD(nodeId) { |
| | const hud = $('focusHud'); |
| | if (nodeId < 0) { hud.classList.remove('visible'); return; } |
| | hud.classList.add('visible'); |
| | const n = network.neurons[nodeId]; |
| | $('focusNodeId').textContent = '#' + n.id; |
| | $('focusNodeId').style.color = n.state === 1 ? '#22d3ee' : n.state === -1 ? '#f472b6' : '#475569'; |
| | $('focusType').textContent = n.type.toUpperCase(); |
| | $('focusType').style.color = n.type === 'input' ? '#fbbf24' : n.type === 'output' ? '#34d399' : '#7aa3c0'; |
| | const stateLabel = n.state === 1 ? '+1 EXCITE' : n.state === -1 ? '-1 INHIBIT' : ' 0 NEUTRAL'; |
| | $('focusState').textContent = stateLabel; |
| | $('focusState').style.color = n.state === 1 ? '#22d3ee' : n.state === -1 ? '#f472b6' : '#475569'; |
| | $('focusS').textContent = n.s.toFixed(3); |
| | $('focusAdapt').textContent = n.adaptation.toFixed(4); |
| | $('focusHealth').textContent = (n.health * 100).toFixed(1) + '%'; |
| | |
| | let synIn = 0, synOut = 0; |
| | for (const syn of network.synapses) { |
| | if (syn.postId === nodeId) synIn++; |
| | if (syn.preId === nodeId) synOut++; |
| | } |
| | $('focusSyn').textContent = `in:${synIn} out:${synOut}`; |
| | } |
| | |
| | |
| | |
| | |
| | |
| | |
| | const INPUT_LABELS = ['FWD', 'LEFT', 'RIGHT', 'BACK', 'EXPLORE', 'RHYTHM']; |
| | const OUTPUT_LABELS = ['SPD+', 'SPD-', 'TRNβ', 'TRNβ']; |
| | |
| | function drawNetwork(stats) { |
| | const w = canvas.width / window.devicePixelRatio; |
| | const h = canvas.height / window.devicePixelRatio; |
| | ctx.clearRect(0, 0, w, h); |
| | |
| | const time = Date.now() / 1000; |
| | |
| | |
| | ctx.save(); |
| | const center = worldToScreen(0, 0); |
| | const ringRadii = [80, 190, 230, 260, 350]; |
| | for (const r of ringRadii) { |
| | const sr = r * camZoom; |
| | ctx.beginPath(); |
| | ctx.arc(center.x, center.y, sr, 0, Math.PI * 2); |
| | ctx.strokeStyle = 'rgba(34,211,238,0.04)'; |
| | ctx.lineWidth = 1; |
| | ctx.stroke(); |
| | } |
| | |
| | for (let i = 0; i < 12; i++) { |
| | const angle = (Math.PI * 2 * i) / 12; |
| | const outer = 400 * camZoom; |
| | ctx.beginPath(); |
| | ctx.moveTo(center.x, center.y); |
| | ctx.lineTo(center.x + outer * Math.cos(angle), center.y + outer * Math.sin(angle)); |
| | ctx.strokeStyle = 'rgba(34,211,238,0.02)'; |
| | ctx.lineWidth = 0.5; |
| | ctx.stroke(); |
| | } |
| | ctx.restore(); |
| | |
| | |
| | const newFocusId = findFocalNode(); |
| | if (newFocusId !== focusedNodeId) { |
| | focusedNodeId = newFocusId; |
| | focusAnimT = 0; |
| | } |
| | focusAnimT = Math.min(1, focusAnimT + 0.08); |
| | updateFocusHUD(focusedNodeId); |
| | |
| | |
| | if (pulseParticles.length < MAX_PARTICLES && Math.random() < 0.3) { |
| | for (const syn of network.synapses) { |
| | if (syn.silent) continue; |
| | const pre = network.neurons[syn.preId]; |
| | if (pre.state !== 0 && Math.random() < 0.008) { |
| | pulseParticles.push({ |
| | preId: syn.preId, postId: syn.postId, |
| | t: 0, speed: 0.015 + Math.random() * 0.02, |
| | color: pre.state === 1 ? [34,211,238] : [244,114,182], |
| | }); |
| | if (pulseParticles.length >= MAX_PARTICLES) break; |
| | } |
| | } |
| | } |
| | |
| | |
| | ctx.lineWidth = 0.5; |
| | for (const syn of network.synapses) { |
| | if (syn.silent) continue; |
| | const pre = network.neurons[syn.preId]; |
| | const post = network.neurons[syn.postId]; |
| | const p1 = worldToScreen(pre.x, pre.y); |
| | const p2 = worldToScreen(post.x, post.y); |
| | const strength = Math.abs(syn.wFast + syn.wSlow); |
| | |
| | |
| | const isFocusConn = (syn.preId === focusedNodeId || syn.postId === focusedNodeId); |
| | const alpha = isFocusConn ? 0.15 + strength * 0.4 : 0.02 + strength * 0.08; |
| | const lw = isFocusConn ? 1.2 : 0.5; |
| | |
| | if (syn.wFast + syn.wSlow > 0) { |
| | ctx.strokeStyle = `rgba(34,211,238,${alpha})`; |
| | } else { |
| | ctx.strokeStyle = `rgba(244,114,182,${alpha})`; |
| | } |
| | ctx.lineWidth = lw; |
| | |
| | const mx = (p1.x + p2.x) / 2 + (p2.y - p1.y) * 0.12; |
| | const my = (p1.y + p2.y) / 2 - (p2.x - p1.x) * 0.12; |
| | ctx.beginPath(); |
| | ctx.moveTo(p1.x, p1.y); |
| | ctx.quadraticCurveTo(mx, my, p2.x, p2.y); |
| | ctx.stroke(); |
| | } |
| | |
| | |
| | for (let i = pulseParticles.length - 1; i >= 0; i--) { |
| | const p = pulseParticles[i]; |
| | p.t += p.speed; |
| | if (p.t >= 1) { pulseParticles.splice(i, 1); continue; } |
| | const pre = network.neurons[p.preId]; |
| | const post = network.neurons[p.postId]; |
| | const p1 = worldToScreen(pre.x, pre.y); |
| | const p2 = worldToScreen(post.x, post.y); |
| | const mx = (p1.x + p2.x) / 2 + (p2.y - p1.y) * 0.12; |
| | const my = (p1.y + p2.y) / 2 - (p2.x - p1.x) * 0.12; |
| | |
| | const t = p.t; |
| | const u = 1 - t; |
| | const px = u * u * p1.x + 2 * u * t * mx + t * t * p2.x; |
| | const py = u * u * p1.y + 2 * u * t * my + t * t * p2.y; |
| | const [cr, cg, cb] = p.color; |
| | const pAlpha = Math.sin(t * Math.PI) * 0.8; |
| | ctx.beginPath(); |
| | ctx.arc(px, py, 2 * camZoom, 0, Math.PI * 2); |
| | ctx.fillStyle = `rgba(${cr},${cg},${cb},${pAlpha})`; |
| | ctx.fill(); |
| | } |
| | |
| | |
| | for (const n of network.neurons) { |
| | const pos = worldToScreen(n.x, n.y); |
| | const isFocused = (n.id === focusedNodeId); |
| | const easeT = isFocused ? focusAnimT : 0; |
| | |
| | |
| | let color, glowColor; |
| | if (n.state === 1) { |
| | color = '#22d3ee'; glowColor = 'rgba(34,211,238,0.5)'; |
| | } else if (n.state === -1) { |
| | color = '#f472b6'; glowColor = 'rgba(244,114,182,0.5)'; |
| | } else { |
| | color = '#475569'; glowColor = 'rgba(71,85,105,0.15)'; |
| | } |
| | |
| | |
| | let baseR = n.type === 'input' ? 6 : n.type === 'output' ? 8 : 4.5; |
| | if (n.state !== 0) baseR += 1.5; |
| | const focusR = baseR * 2.5; |
| | const radius = (baseR + (focusR - baseR) * easeT) * camZoom; |
| | |
| | |
| | if (n.state !== 0 || isFocused) { |
| | const glowR = radius * (isFocused ? 5 : 3.5); |
| | ctx.beginPath(); |
| | const grad = ctx.createRadialGradient(pos.x, pos.y, 0, pos.x, pos.y, glowR); |
| | grad.addColorStop(0, isFocused ? 'rgba(251,191,36,0.2)' : glowColor); |
| | grad.addColorStop(1, 'transparent'); |
| | ctx.fillStyle = grad; |
| | ctx.arc(pos.x, pos.y, glowR, 0, Math.PI * 2); |
| | ctx.fill(); |
| | } |
| | |
| | |
| | if (n.state !== 0) { |
| | const pulseR = radius + Math.sin(time * 4 + n.id) * 2 * camZoom; |
| | ctx.beginPath(); |
| | ctx.arc(pos.x, pos.y, pulseR + 3 * camZoom, 0, Math.PI * 2); |
| | ctx.strokeStyle = n.state === 1 ? 'rgba(34,211,238,0.15)' : 'rgba(244,114,182,0.15)'; |
| | ctx.lineWidth = 1; |
| | ctx.stroke(); |
| | } |
| | |
| | |
| | ctx.beginPath(); |
| | ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2); |
| | ctx.fillStyle = color; |
| | ctx.fill(); |
| | |
| | |
| | if (isFocused) { |
| | ctx.save(); |
| | ctx.beginPath(); |
| | ctx.arc(pos.x, pos.y, radius + 4 * camZoom, 0, Math.PI * 2); |
| | ctx.setLineDash([4, 4]); |
| | ctx.strokeStyle = `rgba(251,191,36,${0.6 + 0.3 * Math.sin(time * 3)})`; |
| | ctx.lineWidth = 2; |
| | ctx.stroke(); |
| | ctx.setLineDash([]); |
| | ctx.restore(); |
| | |
| | |
| | ctx.save(); |
| | ctx.font = `bold ${11 * camZoom}px 'JetBrains Mono'`; |
| | ctx.textAlign = 'center'; |
| | ctx.fillStyle = 'rgba(251,191,36,0.9)'; |
| | let label = `#${n.id}`; |
| | if (n.type === 'input' && n.id < INPUT_LABELS.length) label = INPUT_LABELS[n.id]; |
| | else if (n.type === 'output') label = OUTPUT_LABELS[n.id - network.nInput - network.nHidden] || `OUT${n.id}`; |
| | ctx.fillText(label, pos.x, pos.y - radius - 8 * camZoom); |
| | |
| | ctx.font = `${9 * camZoom}px 'JetBrains Mono'`; |
| | ctx.fillStyle = color; |
| | const stateStr = n.state === 1 ? '+1' : n.state === -1 ? '-1' : '0'; |
| | ctx.fillText(`s=${n.s.toFixed(2)} [${stateStr}]`, pos.x, pos.y + radius + 14 * camZoom); |
| | ctx.restore(); |
| | } else { |
| | |
| | |
| | if (n.type === 'input') { |
| | ctx.beginPath(); |
| | ctx.arc(pos.x, pos.y, radius + 2.5 * camZoom, 0, Math.PI * 2); |
| | ctx.strokeStyle = 'rgba(251,191,36,0.4)'; |
| | ctx.lineWidth = 1; |
| | ctx.stroke(); |
| | } else if (n.type === 'output') { |
| | ctx.beginPath(); |
| | ctx.arc(pos.x, pos.y, radius + 2.5 * camZoom, 0, Math.PI * 2); |
| | ctx.strokeStyle = 'rgba(52,211,153,0.4)'; |
| | ctx.lineWidth = 1.5; |
| | ctx.stroke(); |
| | } |
| | |
| | |
| | if (camZoom > 0.7) { |
| | ctx.font = `${Math.max(7, 8 * camZoom)}px 'JetBrains Mono'`; |
| | ctx.textAlign = 'center'; |
| | ctx.textBaseline = 'middle'; |
| | ctx.fillStyle = 'rgba(224,242,254,0.35)'; |
| | ctx.fillText(n.id, pos.x, pos.y); |
| | } |
| | } |
| | } |
| | |
| | |
| | ctx.save(); |
| | ctx.font = `${9 * camZoom}px 'JetBrains Mono'`; |
| | ctx.textAlign = 'center'; |
| | ctx.fillStyle = 'rgba(251,191,36,0.35)'; |
| | const lbl1 = worldToScreen(0, -55); |
| | ctx.fillText('INPUT', lbl1.x, lbl1.y); |
| | ctx.fillStyle = 'rgba(148,163,184,0.2)'; |
| | const lbl2 = worldToScreen(0, -165); |
| | ctx.fillText('HIDDEN', lbl2.x, lbl2.y); |
| | ctx.fillStyle = 'rgba(52,211,153,0.3)'; |
| | const lbl3 = worldToScreen(0, -380); |
| | ctx.fillText('OUTPUT', lbl3.x, lbl3.y); |
| | ctx.restore(); |
| | |
| | |
| | const cx = w / 2, cy = h / 2; |
| | ctx.save(); |
| | ctx.strokeStyle = `rgba(251,191,36,${0.25 + 0.1 * Math.sin(time * 2)})`; |
| | ctx.lineWidth = 1; |
| | const crossLen = 12; |
| | const gap = 6; |
| | |
| | ctx.beginPath(); |
| | ctx.moveTo(cx - crossLen - gap, cy); ctx.lineTo(cx - gap, cy); |
| | ctx.moveTo(cx + gap, cy); ctx.lineTo(cx + crossLen + gap, cy); |
| | ctx.moveTo(cx, cy - crossLen - gap); ctx.lineTo(cx, cy - gap); |
| | ctx.moveTo(cx, cy + gap); ctx.lineTo(cx, cy + crossLen + gap); |
| | ctx.stroke(); |
| | |
| | ctx.translate(cx, cy); |
| | ctx.rotate(time * 0.5); |
| | ctx.strokeStyle = `rgba(251,191,36,${0.15 + 0.08 * Math.sin(time * 3)})`; |
| | ctx.beginPath(); |
| | const d = 20; |
| | ctx.moveTo(0, -d); ctx.lineTo(d, 0); ctx.lineTo(0, d); ctx.lineTo(-d, 0); ctx.closePath(); |
| | ctx.stroke(); |
| | ctx.restore(); |
| | } |
| | |
| | |
| | |
| | |
| | |
| | |
| | function drawOscillators() { |
| | const w = oscCanvas.width, h = oscCanvas.height; |
| | oscCtx.clearRect(0, 0, w, h); |
| | const bands = network.oscillators.bands; |
| | const colors = ['#3a5f7a', '#60a5fa', '#a78bfa', '#22d3ee', '#fbbf24']; |
| | const bandH = h / bands.length; |
| | for (let i = 0; i < bands.length; i++) { |
| | const b = bands[i]; |
| | const y0 = i * bandH + bandH / 2; |
| | oscCtx.beginPath(); |
| | oscCtx.strokeStyle = colors[i]; |
| | oscCtx.lineWidth = 1.5; |
| | for (let x = 0; x < w; x++) { |
| | const t = x / w * Math.PI * 4; |
| | const val = Math.sin(b.phase + t) * b.amplitude * (bandH * 0.35); |
| | if (x === 0) oscCtx.moveTo(x, y0 + val); |
| | else oscCtx.lineTo(x, y0 + val); |
| | } |
| | oscCtx.stroke(); |
| | oscCtx.font = '8px JetBrains Mono'; |
| | oscCtx.fillStyle = colors[i]; |
| | oscCtx.textAlign = 'left'; |
| | oscCtx.fillText(b.name, 3, i * bandH + 10); |
| | } |
| | } |
| | |
| | function drawActivityTrace() { |
| | const w = actCanvas.width, h = actCanvas.height; |
| | actCtx.clearRect(0, 0, w, h); |
| | if (activityHistory.length < 2) return; |
| | const step = w / MAX_HIST; |
| | actCtx.beginPath(); |
| | actCtx.strokeStyle = 'rgba(34,211,238,0.7)'; |
| | actCtx.lineWidth = 1; |
| | for (let i = 0; i < activityHistory.length; i++) { |
| | const x = i * step; |
| | const y = h - activityHistory[i].excFrac * h; |
| | if (i === 0) actCtx.moveTo(x, y); else actCtx.lineTo(x, y); |
| | } |
| | actCtx.stroke(); |
| | actCtx.beginPath(); |
| | actCtx.strokeStyle = 'rgba(244,114,182,0.7)'; |
| | for (let i = 0; i < activityHistory.length; i++) { |
| | const x = i * step; |
| | const y = h - activityHistory[i].inhFrac * h; |
| | if (i === 0) actCtx.moveTo(x, y); else actCtx.lineTo(x, y); |
| | } |
| | actCtx.stroke(); |
| | } |
| | |
| | function updateReceptorBars(R) { |
| | const mapping = { |
| | D1: 'D1', D2: 'D2', SHT1A: '5HT1A', SHT2A: '5HT2A', SHT4: '5HT4', |
| | M1: 'M1', M2: 'M2', B1: '1', A2: '2', |
| | }; |
| | for (const [key, name] of Object.entries(mapping)) { |
| | const val = R[key] || 0; |
| | const barId = 'rbar_' + name.replace(/[^a-zA-Z0-9]/g, ''); |
| | const el = document.getElementById(barId); |
| | if (el) el.style.width = (val * 100) + '%'; |
| | } |
| | } |
| | |
| | |
| | |
| | |
| | |
| | |
| | const SIM_DT = 16; |
| | |
| | function simulationTick() { |
| | if (!simRunning) { requestAnimationFrame(simulationTick); return; } |
| | |
| | const inputs = computeSensoryInputs(); |
| | network.setInputs(inputs); |
| | const stats = network.simulateStep(SIM_DT); |
| | applyTeachingSignal(); |
| | |
| | activityHistory.push({ |
| | excFrac: stats.excCount / network.N, |
| | inhFrac: stats.inhCount / network.N, |
| | }); |
| | if (activityHistory.length > MAX_HIST) activityHistory.shift(); |
| | |
| | |
| | $('statExc').textContent = stats.excCount; |
| | $('statInh').textContent = stats.inhCount; |
| | $('statNeu').textContent = stats.neuCount; |
| | $('statSyn').textContent = network.synapses.length; |
| | $('stepCount').textContent = network.step; |
| | $('energyVal').textContent = network.energy.toFixed(2); |
| | $('statDw').textContent = network.meanDw.toFixed(4); |
| | $('statStruct').textContent = network.structEvent || (teachingActive ? (idleTicks > IDLE_TEACH_DELAY ? 'STOP-LEARN' : 'LEARNING') : 'stable'); |
| | $('statStruct').style.color = teachingActive ? (idleTicks > IDLE_TEACH_DELAY ? 'var(--red)' : 'var(--da-color)') : 'var(--green)'; |
| | $('statLearn').textContent = learnCount; |
| | $('statAccum').textContent = outputAccum.map(v => v.toFixed(1)).join(' '); |
| | |
| | const pct = clamp(learnAccuracy, 0, 100); |
| | $('learnPct').textContent = pct + '%'; |
| | $('learnBar').style.width = pct + '%'; |
| | $('learnBar').className = 'progress-fill' + (pct > 60 ? ' learned' : ''); |
| | if (learnCount === 0) { |
| | $('learnBarText').textContent = 'Drive in MANUAL to teach'; |
| | } else if (pct < 30) { |
| | $('learnBarText').textContent = 'Learning... drive, turn & stop!'; |
| | } else if (pct < 60) { |
| | $('learnBarText').textContent = 'Getting better β try HYBRID'; |
| | } else { |
| | $('learnBarText').textContent = 'Well trained! Neuraxon ready'; |
| | } |
| | |
| | |
| | const tagH = $('tagHuman'); |
| | const tagN = $('tagNxon'); |
| | const tagL = $('tagLearn'); |
| | const srcDetail = $('sourceDetail'); |
| | |
| | if (controlMode === 'manual') { |
| | tagH.style.opacity = activeKeys.size > 0 ? '1' : '0.5'; |
| | tagN.style.opacity = '0.2'; |
| | tagL.style.opacity = teachingActive ? '1' : '0.2'; |
| | srcDetail.textContent = teachingActive ? 'Teaching network from your input' : 'Manual control β press keys to teach'; |
| | $('blendVal').textContent = 'H:100% N:0%'; |
| | } else if (controlMode === 'hybrid') { |
| | tagH.style.opacity = activeKeys.size > 0 ? '1' : '0.4'; |
| | tagN.style.opacity = nxonContributing ? '1' : '0.3'; |
| | tagL.style.opacity = teachingActive ? '1' : '0.2'; |
| | srcDetail.textContent = nxonContributing |
| | ? (teachingActive ? 'Both active β learning + Neuraxon assisting' : 'Neuraxon gently assisting (25%)') |
| | : (teachingActive ? 'Teaching from your input' : 'Hybrid idle β you lead, Neuraxon assists'); |
| | $('blendVal').textContent = 'H:75% N:25%'; |
| | } |
| | |
| | |
| | const ai = getNeuraxonAction(); |
| | const human = getHumanAction(); |
| | let dispSpeed, dispTurn; |
| | if (controlMode === 'manual') { |
| | dispSpeed = Math.abs(human.speed); |
| | dispTurn = human.turn; |
| | } else if (controlMode === 'hybrid') { |
| | dispSpeed = Math.round(Math.abs(human.speed) * 0.75 + ai.speed * 0.25); |
| | dispTurn = human.turn * 0.75 + ai.turn * 0.25; |
| | } else { |
| | dispSpeed = ai.speed; |
| | dispTurn = ai.turn; |
| | } |
| | if (!isConnected) { |
| | heading = (heading + dispTurn + 360) % 360; |
| | } |
| | $('speedVal').textContent = Math.round(dispSpeed); |
| | $('headingVal').textContent = Math.round(heading) + 'Β°'; |
| | $('headingNeedle').style.transform = `rotate(${heading}deg)`; |
| | |
| | |
| | drawNetwork(stats); |
| | drawOscillators(); |
| | drawActivityTrace(); |
| | updateReceptorBars(stats.R); |
| | |
| | requestAnimationFrame(simulationTick); |
| | } |
| | |
| | |
| | sysLog('Neuraxon 2.0 brain initialized.'); |
| | sysLog('6 input β 24 hidden β 4 output neurons'); |
| | sysLog(`${network.synapses.length} synapses (small-world + motor pathways)`); |
| | sysLog('DA-gated STDP learning with 9 receptor subtypes'); |
| | sysLog('Learns: forward, turns, AND stopping'); |
| | sysLog('Replay buffer: Neuraxon replays your moves'); |
| | sysLog('βββββββββββββββββββββββββββββββββββββββ'); |
| | sysLog('HOW TO USE:'); |
| | sysLog('1. MANUAL mode β drive with WASD/arrows'); |
| | sysLog(' β Network learns from every keypress'); |
| | sysLog(' β Watch accuracy % rise in LEARNING panel'); |
| | sysLog(' β Gold LED = learning in progress'); |
| | sysLog('2. HYBRID mode β 75% you + 25% Neuraxon'); |
| | sysLog(' β Neuraxon gently assists, you lead'); |
| | sysLog(' β Still learns when you press keys'); |
| | sysLog('TIP: Drive fwd, turn, AND STOP to teach'); |
| | sysLog(' the full repertoire of behaviors'); |
| | sysLog('βββββββββββββββββββββββββββββββββββββββ'); |
| | sysLog('NEURAL GRAPH: Drag to pan, scroll to zoom'); |
| | sysLog('Nearest node auto-focuses with metadata'); |
| | sysLog('βββββββββββββββββββββββββββββββββββββββ'); |
| | requestAnimationFrame(simulationTick); |
| | |
| | </script> |
| | </body> |
| | </html> |
