| import {brainCircuitActivity} from './brain-circuit.js?v=brain-circuit-47'; |
| import {brainActivities} from './brain-activities.js?v=brain-circuit-47'; |
| import {flappy,crossy} from './arcade-rl.js?v=brain-inputs-41'; |
| import {mario} from './mario.js?v=mario-progression-43';import {attention} from './attention.js?v=brain-hub-37'; |
| import{$,api,state,escape,toast}from'./common.js';import{initBrain}from'./brain.js?v=brain-hub-37';import{pictionary}from'./drawing.js?v=shared-key-49';import{arcade}from'./games.js?v=brain-polish-39';import{racer}from'./racer.js?v=brain-hub-37';import{cinema}from'./cinema-simple.js?v=preloaded-tribe-49';import{mindsEye}from'./mindeye.js?v=brain-hub-37';import{explorer}from'./brain-scene.js?v=brain-circuit-47';import{drugs}from'./drug-simulator.js?v=brain-polish-39';import{garden,plasticity}from'./neural-exhibits.js?v=brain-hub-37'; |
| import {categories,categoryFor,homeCards,recommendedCards,activityCards} from './hub.js?v=brain-recommended-50'; |
| import {jewishExperiments,jewishOverview} from './jewish-learning.js?v=study-reader-44'; |
| import {pageInstructions,mountStudyGuide} from './page-instructions.js?v=brain-circuit-47'; |
| import {mountActivityTutorial} from './interactive-tutorial.js?v=brain-tutorial-51'; |
| const experiments=[{id:'cinema',icon:'◈',name:'Neural Cinema',tag:'VISION + SOUND',title:'Watch a little film.<br><em>See an AI brain respond.</em>',description:'Start with your selected cat video, then explore the other clips beside their saved brain predictions. Press Watch to hear the original soundtrack.',run:cinema},{id:'mindeye',icon:'◌',name:'Mind’s Eye',tag:'BRAIN PATTERNS + VISION',title:'A picture from<br><em>a brain pattern.</em>',description:'Explore published MindEye2 reconstructions. Guess what a volunteer saw, then reveal the original and compare how much participant training the model received.',run:mindsEye},{id:'racer',icon:'↻',name:'RL Race Lab',tag:'EXPERIENCE + LEARNING',title:'Draw a race track.<br><em>Watch a driver learn.</em>',description:'100 cars launch from your starting line. They explore independently and share a learning neural policy. Watch the fleet improve, then test one driver.',run:racer},{id:'mario',icon:'▣',name:'Mario RL Lab',tag:'REWARD + EXPLORATION',title:'Level 1 to Bowser.<br><em>A policy to learn.</em>',description:'Play 15 fixed Mario levels in order, then face Bowser in the final castle. Choose a game speed and class size, watch Q-learning, or take the controls yourself.',run:mario},{id:'flappy',icon:'⌁',name:'Flappy Bird RL',tag:'TIMING + REWARD',title:'A little flap.<br><em>A learned decision.</em>',description:'Launch a flock with explicit pipe-position inputs, choose endless or fixed pipes, and watch it learn. Test new layouts or take the controls yourself.',run:flappy},{id:'crossy',icon:'▥',name:'Crossy Road RL',tag:'TRAFFIC + ACTION SELECTION',title:'Read the road.<br><em>Learn when to hop.</em>',description:'Independent chickens learn to cross moving traffic in a 3D classroom course. Choose an endless road or your own row count, train a flock, compare tests, or play with arrows and touch controls.',run:crossy},{id:'attention',icon:'◷',name:'Attention & Memory',tag:'FOCUS + WORKING MEMORY',title:'Ignore the word.<br><em>Remember the pattern.</em>',description:'Try color clashes and growing memory sequences. Make a prediction, measure your responses, and compare what changes.',run:attention},{id:'garden',icon:'❋',name:'Synapse Garden',tag:'SIGNALS + LEARNING',title:'Plant a pattern.<br><em>Watch connections grow.</em>',description:'Teach a tiny neural network what your patterns mean. Watch its real connection weights and activations change as it learns.',run:garden},{id:'pictionary',icon:'✎',name:'Neural Pictionary',tag:'PERCEPTION + LANGUAGE',title:'Draw a thought.<br><em>Watch a brain respond.</em>',description:'Qwen 3.7 Flash proposes names freely, and Decider explores which ones fit your strokes. Add a spoken hint and see how language changes its best guess.',run:pictionary},{id:'arcade',icon:'⌁',name:'Spiking Brain Arcade',tag:'SPIKES + MOVEMENT',title:'Play against neurons.<br><em>See every signal.</em>',description:'A trained spiking network predicts where the paddle should aim. Start with optimal defaults, then change the firing threshold and see what happens.',run:arcade},{id:'plasticity',icon:'⌘',name:'Plasticity Puzzle',tag:'PATHWAYS + ADAPTATION',title:'Cut a connection.<br><em>Find another way.</em>',description:'Disable neurons or wires in a trained network. Test what breaks, then retrain the surviving paths and measure what recovers.',run:plasticity},{id:'brain',icon:'◉',name:'3D Brain Explorer',tag:'ANATOMY + DISCOVERY',title:'Turn it. Open it.<br><em>Explore the brain.</em>',description:'Drag to rotate, click a part, and open the brain to see its inner structures. All 27 required labels are here.',run:explorer},{id:'drugs',icon:'⚗',name:'Drug Simulator',tag:'MOLECULES + SIGNALS',title:'Tiny molecules.<br><em>Different messages.</em>',description:'Choose a substance and watch a simplified example of how it changes communication between brain cells.',run:drugs}]; |
|
|
| experiments.push(...jewishExperiments,...brainActivities,brainCircuitActivity); |
|
|
| const aliases={creature:'racer',dream:'garden',telephone:'plasticity'}; |
| const moduleActivities=new Set(['pictionary','arcade','racer','garden','plasticity']); |
| let cleanup=()=>{},current='',renderToken=0; |
|
|
| function replaceExperiment(){ |
| const previous=$('#experiment'),root=document.createElement('section'); |
| root.id='experiment';root.setAttribute('aria-live','polite');previous.replaceWith(root);return root; |
| } |
| function breadcrumb(category,activity){ |
| const nav=$('#page-breadcrumb'),back=$('#page-back'); |
| const destination=activity?category?.id:category?'home':null; |
| if(destination){back.href='#'+destination;back.removeAttribute('aria-disabled');back.removeAttribute('tabindex');back.setAttribute('aria-label','Back to '+(activity?category.name:'home'));back.title='Back to '+(activity?category.name:'home')} |
| else{back.removeAttribute('href');back.setAttribute('aria-disabled','true');back.setAttribute('tabindex','-1');back.setAttribute('aria-label','Back — you are at home');back.title='You are at the home screen'} |
| nav.hidden=false; |
| if(!category){nav.innerHTML='<span aria-current="page">Home</span>';return} |
| nav.innerHTML=`<a href="#home">Home</a><span class="breadcrumb-divider" aria-hidden="true">/</span>${activity?`<a href="#${category.id}">${escape(category.name)}</a><span class="breadcrumb-divider" aria-hidden="true">/</span><span aria-current="page">${escape(activity)}</span>`:`<span aria-current="page">${escape(category.name)}</span>`}`; |
| } |
| function headline(eyebrow,title,description){$('#eyebrow').textContent=eyebrow;$('#title').innerHTML=title;$('#description').textContent=description} |
| function routeHash(id){if(location.hash!=='#'+id)history.replaceState(null,'','#'+id)} |
|
|
| async function navigate(requested){ |
| let id=aliases[requested]||requested||'home'; |
| const category=categories.find(c=>c.id===id),activity=experiments.find(e=>e.id===id); |
| if(id!=='home'&&!category&&!activity&&id!=='anatomy')id='home'; |
| const token=++renderToken;cleanup();cleanup=()=>{};current=id; |
| const root=replaceExperiment();document.body.dataset.labView=id; |
| document.body.dataset.pageKind=id==='home'?'home':category?'category':'activity'; |
| if(id==='home'||category)document.body.classList.remove('presenting'); |
| $('#present').hidden=id==='home'||Boolean(category); |
| $('#brain-controls').hidden=true;$('#brain-controls').open=false; |
| const recommendations=$('#home-recommendations'); |
| recommendations.hidden=id!=='home'; |
| if(id==='home')recommendedCards(recommendations);else recommendations.replaceChildren(); |
| pageInstructions($('#page-instructions'),id,category||categoryFor(id),activity?.name||(id==='anatomy'?'The Anatomy Checklist':undefined)); |
| window.scrollTo({top:0,behavior:'instant'});routeHash(id); |
| if(id==='home'){ |
| breadcrumb(null);headline('THE INTERACTIVE BRAIN LAB','Curiosity starts here.','Play, build, and explore what makes a mind work.');homeCards(root);return; |
| } |
| if(id==='jewish'){ |
| breadcrumb(category);headline(category.kicker,escape(category.name),category.intro);cleanup=jewishOverview(root);pageInstructions($('#page-instructions'),'jewish-memory',category,'Learning & Memory');mountStudyGuide(root);return; |
| } |
| if(category){ |
| breadcrumb(category);headline(category.kicker,escape(category.name),category.intro);activityCards(root,category,experiments);return; |
| } |
| const parent=categoryFor(id); |
| breadcrumb(parent,id==='anatomy'?'The Anatomy Checklist':activity.name); |
| if(id==='anatomy')headline('BRAIN EXPLANATIONS / 27 PARTS','Many parts.<br><em>One remarkable brain.</em>','Find a structure, learn its role, and connect it with the 3D explorer.'); |
| else headline(parent.name.toUpperCase()+' / '+activity.tag,activity.title,activity.description); |
| root.innerHTML='<div class="card loading">Getting the activity ready…</div>'; |
| try{ |
| if(!activity?.local)await boot; |
| if(token!==renderToken||!root.isConnected)return; |
| $('#brain-controls').hidden=!moduleActivities.has(id); |
| if(id==='anatomy'){anatomy();return} |
| const dispose=await activity.run(root); |
| if(token!==renderToken||!root.isConnected){dispose?.();return} |
| mountStudyGuide(root); |
| const stopTutorial=mountActivityTutorial(root,id); |
| cleanup=()=>{stopTutorial();dispose?.()}; |
| }catch(error){ |
| if(token!==renderToken||!root.isConnected)return; |
| root.innerHTML=`<div class="card"><p>${escape(error.message)}</p><button class="secondary" id="retry">Try again</button></div>`; |
| $('#retry').onclick=()=>navigate(id); |
| } |
| } |
| window.addEventListener('hashchange',()=>navigate(location.hash.slice(1)||'home')); |
|
|
| function setPresentation(enabled){document.body.classList.toggle('presenting',enabled);if(enabled)toast('Presentation mode. Use Exit presentation or press Escape to restore navigation.')} |
| $('#present').onclick=()=>setPresentation(!document.body.classList.contains('presenting')); |
| $('#exit-present').onclick=()=>setPresentation(false); |
| document.addEventListener('keydown',e=>{if(e.key==='Escape')setPresentation(false)}); |
| function anatomy(){const rows=state.anatomy.map(p=>`<article class="anatomy-card" data-label="${escape(p.name.toLowerCase())}"><div class="place">${p.view==='outer'?'Exterior / lateral view':'Cutaway / schematic internal view'}</div><h3><span>${p.number}</span>${escape(p.name)}</h3><p><b>Biology:</b> ${escape(p.biology)}</p><p><b>Robot analogy:</b> ${escape(p.analogy)}</p></article>`).join('');$('#experiment').innerHTML=`<div class="card"><div class="card-title"><h2>The complete anatomy checklist</h2><span class="badge">27 / 27</span></div><div class="button-row"><input id="anatomy-search" type="text" placeholder="Find a brain region…" aria-label="Find a brain region" style="flex:1"><button id="print-anatomy" class="secondary">Print labels</button></div><p class="note">The illustrations are schematic teaching guides. Some labels denote broad systems that contain other labeled regions. Language and memory depend on distributed networks.</p><div class="anatomy-grid" style="margin-top:18px">${rows}</div><p class="note">Biological descriptions follow the supplied assignment ideas and these introductory references:</p><div class="source-links">${state.sources.map(s=>`<a href="${s.url}" target="_blank" rel="noreferrer">${escape(s.title)} ↗</a>`).join('')}</div></div>`;$('#anatomy-search').oninput=e=>document.querySelectorAll('.anatomy-card').forEach(c=>c.hidden=!c.dataset.label.includes(e.target.value.toLowerCase()));$('#print-anatomy').onclick=()=>{ $('#anatomy-search').value='';document.querySelectorAll('.anatomy-card').forEach(c=>c.hidden=false);window.print()}} |
| $('#model-info').onclick=()=>{$('#dialog-content').innerHTML=`<div class="eyebrow">BRAIN LAB ONLINE · CPU EDITION</div><h2>A mind you can play with.</h2><p>The games, small learning networks, spiking Pong model, brain explorer, explanations, and Jewish learning run on this hosted app. Neural Cinema has 24 preloaded audiovisual TRIBE predictions. Mind’s Eye replays the authors’ published comparisons.</p><p>New video predictions and fresh fMRI decoding are not enabled on this CPU Space. No recorded NSD arrays are published here. Saved brain maps are predictions for an average subject, not measurements of a visitor’s feelings.</p><p>Pictionary uses the requested Qwen and Decider APIs, with the classroom key kept privately on the server. Visitors do not need to enter a key. A shared allowance limits use of the classroom API credits. Drawings are sent to the models; the private game prompt stays in the browser. Spoken hints are transcribed by the hosted Whisper model.</p><p>Your learning session is separate from other visitors. Inactive sessions expire after 30 minutes. A Space restart clears saved learning and session keys.</p>`;$('#info-dialog').showModal()};$('.dialog-close').onclick=()=>$('#info-dialog').close(); |
|
|
| const boot=(async()=>{ |
| try{ |
| const [lab,status]=await Promise.all([api('state'),api('status')]);Object.assign(state,lab);initBrain(); |
| const ready=status.pong; |
| $('#status-dot').style.background=ready?'#518665':'#d9a145'; |
| $('#status-label').textContent=ready?'Online · CPU edition':'Some activities need setup'; |
| $('.header-status').title='Hugging Face CPU Space · saved brain predictions · visitor sessions'; |
| }catch(error){ |
| $('#status-dot').style.background='#b37b61';$('#status-label').textContent='Lab disconnected'; |
| throw new Error('The local lab is unavailable. Launch Brain Lab and refresh this page.'); |
| } |
| })(); |
| boot.catch(()=>{}); |
| await navigate(location.hash.slice(1)||'home'); |
|
|
