| import {escape} from './common.js'; |
|
|
| export const categories=[ |
| {id:'games',name:'Games',kicker:'PLAY & LEARN',count:'6 ways to play',description:'Train an AI player, draw a racetrack, or challenge your own attention.',intro:'A little play. A lot of learning.',items:['flappy','crossy','mario','racer','arcade','attention']}, |
| {id:'networks',name:'Neural Networks',kicker:'BUILD & EXPERIMENT',count:'3 hands-on experiments',description:'Draw a pattern, grow connections, and watch a network learn.',intro:'Make a connection. See what changes.',items:['pictionary','garden','plasticity']}, |
| {id:'explanations',name:'Brain Explanations',kicker:'LOOK INSIDE',count:'7 activities · 27 brain labels',description:'Explore brain structures, fire a model neuron, investigate perception, and learn from surprise.',intro:'Meet the parts. Understand the connections.',items:['brain','neuron-signals','brain-circuit','blind-spot','prediction-learning','drugs','anatomy']}, |
| {id:'research',name:'Brain & AI Research',kicker:'EXPLORE THE POSSIBILITIES',count:'2 research experiences',description:'Turn films into brain predictions and brain patterns into pictures.',intro:'What can AI tell us about the brain?',items:['cinema','mindeye']}, |
| {id:'jewish',name:'Jewish Learning & the Mind',kicker:'GEMARA & COMMENTARY',count:'4 guided explorations',description:'Explore Gemara, Rashi, Rambam, and Tanya on learning, memory, questions, and the inner life.',intro:'Open a source. Ask a question. Make a connection.',items:['jewish-memory','jewish-chavruta','jewish-choice','jewish-understanding']} |
| ]; |
|
|
| const descriptions={ |
| flappy:'Launch a flock and teach it when to flap. Compare your learner with new pipe courses.', |
| crossy:'Help a flock learn to read moving traffic in a colorful 3D world.', |
| mario:'Choose a course and train a whole class of Mario agents. Or take the controls yourself.', |
| racer:'Draw your own circuit, launch a fleet, and watch a driver learn from experience.', |
| arcade:'Play Pong against a spiking network and see the signals behind its moves.', |
| attention:'Ignore distracting words, repeat growing patterns, and explore your own responses.', |
| pictionary:'Draw something and watch an AI work through its guesses. Add a hint to change the evidence.', |
| garden:'Teach a tiny network your pixel patterns and inspect its changing connections.', |
| plasticity:'Remove a pathway, test what changes, and retrain the connections that remain.', |
| brain:'Turn, open, and explore a 3D brain. Follow illustrated routes and try a location challenge.', |
| drugs:'Compare chemical messages and explore how different substances change a model synapse.', |
| anatomy:'Find all 27 required structures, read their roles, and print your anatomy labels.', |
| cinema:'Watch a film alongside an AI’s predicted brain response. Compare pictures with sound.', |
| mindeye:'Match images reconstructed from brain recordings, or make a new coarse reconstruction.' |
| }; |
|
|
| export function categoryFor(id){return categories.find(c=>c.items.includes(id))} |
|
|
| export function categoryArt(id){ |
| const head='<svg viewBox="0 0 210 160" aria-hidden="true" focusable="false" fill="none">'; |
| const art={ |
| jewish:`<circle cx="109" cy="80" r="68" fill="#e7d9af"/><path d="M103 45C76 31 50 34 25 47v83c24-12 51-14 78 0 27-14 54-12 79 0V47c-25-13-52-16-79-2Z" fill="#fffaf0" stroke="#9d8753" stroke-width="2.5" stroke-linejoin="round"/><path d="M103 45v85M39 61c17-6 34-7 50 0m-50 15c17-6 34-7 50 0m-50 15c17-6 34-7 50 0m28-30c17-7 34-6 50 0m-50 15c17-7 34-6 50 0m-50 15c17-7 34-6 50 0" stroke="#c9b685" stroke-width="2.5" stroke-linecap="round"/><path d="M147 40v49l9-6 9 9V43" fill="#b49255"/><path d="m48 22 3-8m124 15 7-6" stroke="#b09a62" stroke-width="2.5" stroke-linecap="round"/>`, |
| games:`<circle cx="111" cy="78" r="68" fill="#d2dfc5"/><path d="M56 48C40 48 29 60 25 80l-7 31c-4 20 15 29 29 14l19-20h80l19 20c14 15 33 6 29-14l-7-31c-4-20-15-32-31-32H56Z" fill="#426d54"/><path d="M55 70v30M40 85h30" stroke="#edf3d9" stroke-width="9" stroke-linecap="round"/><circle cx="145" cy="75" r="8" fill="#e5bd70"/><circle cx="163" cy="94" r="8" fill="#b8d09a"/><rect x="92" y="78" width="15" height="5" rx="2.5" fill="#b1c8a4"/><rect x="113" y="78" width="15" height="5" rx="2.5" fill="#b1c8a4"/><path d="m40 28 4-9m130 8 7-7m12 37 10-2" stroke="#608262" stroke-width="3" stroke-linecap="round"/>`, |
| networks:`<circle cx="108" cy="80" r="68" fill="#dfd3e8"/><g stroke="#a78eb7" stroke-width="1.8">${[36,80,124].flatMap(y=>[48,111].map(z=>`<path d="M41 ${y}C76 ${y} 76 ${z} 108 ${z}"/>`)).join('')}${[48,111].flatMap(y=>[58,100].map(z=>`<path d="M108 ${y}C146 ${y} 146 ${z} 176 ${z}"/>`)).join('')}</g><g fill="#fffaf2" stroke="#977aaa" stroke-width="2.5">${[36,80,124].map(y=>`<circle cx="41" cy="${y}" r="10"/>`).join('')}<circle cx="108" cy="48" r="13"/><circle cx="108" cy="111" r="13"/><circle cx="176" cy="58" r="10"/><circle cx="176" cy="100" r="10"/></g><circle cx="108" cy="48" r="6" fill="#ac86ba"/><circle cx="176" cy="58" r="4" fill="#c9ae7a"/><circle cx="41" cy="80" r="4" fill="#b09abe"/>`, |
| explanations:`<circle cx="110" cy="80" r="68" fill="#e9d4bf"/><path d="M115 31c16-10 30 1 31 14 20-1 31 15 24 30 15 12 10 32-5 37-2 20-20 27-35 19-12 11-30 3-30-12V50c0-9 6-16 15-19Z" fill="#f9eee0" stroke="#ad8467" stroke-width="2"/><path d="M87 31C71 21 57 32 56 45c-20-1-31 15-24 30-15 12-10 32 5 37 2 20 20 27 35 19 12 11 28 3 28-12V50c0-9-4-16-13-19Z" fill="#e6bb9d" stroke="#ad8467" stroke-width="2"/><path d="M66 49c17 0 5 25 19 25M47 75c17-11 8 21 28 17m-25 18c13-13 25 12 34-6m46-57c-17 0-5 25-19 25m44 1c-17-11-8 21-28 17m20 18c-13-13-25 12-34-6M100 126v21" stroke="#b78e70" stroke-width="2.5" stroke-linecap="round"/>`, |
| research:`<circle cx="109" cy="80" r="68" fill="#d0e2e5"/><rect x="25" y="33" width="124" height="94" rx="12" fill="#f6faf2" stroke="#71999e" stroke-width="2"/><path d="M25 56h124" stroke="#b2ccd0" stroke-width="2"/><circle cx="39" cy="45" r="3" fill="#99b6b8"/><circle cx="50" cy="45" r="3" fill="#bfcfc2"/><circle cx="61" cy="45" r="3" fill="#d8bf8f"/><path d="m38 103 19-19 15 10 20-27 18 17 24-9" stroke="#739e92" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle cx="150" cy="104" r="28" fill="#d4e4dc" stroke="#668d94" stroke-width="5"/><path d="m170 124 22 22" stroke="#668d94" stroke-width="9" stroke-linecap="round"/><path d="M135 105c8-15 22-15 30 0-8 15-22 15-30 0Z" fill="#f7f8e9"/><circle cx="150" cy="105" r="6" fill="#92ada4"/>` |
| }; |
| return head+(art[id]||art.networks)+'</svg>'; |
| } |
|
|
| export function homeCards(root){ |
| root.innerHTML=`<div class="hub-section-label"><span>FIVE WAYS TO EXPLORE</span><span>Choose what sparks your curiosity</span></div><div class="category-grid" aria-label="Activity categories">${categories.map((c,i)=>`<a class="category-card category-${c.id}" href="#${c.id}" aria-labelledby="category-title-${c.id}" aria-describedby="category-description-${c.id}"><div class="category-card-top"><span class="category-number">0${i+1}</span><span>${c.kicker}</span></div><div class="category-art">${categoryArt(c.id)}</div><h2 id="category-title-${c.id}">${c.name}</h2><p id="category-description-${c.id}">${c.description}</p><div class="category-card-bottom"><span>${c.count}</span><span class="category-arrow" aria-hidden="true">↗</span></div></a>`).join('')}</div>`; |
| } |
|
|
| export function recommendedCards(root){ |
| const picks=[ |
| {id:'crossy',category:'games',name:'Crossy Road RL',tag:'TRAIN AN AI',description:'Help an AI learn when to hop through moving traffic, then try crossing the road yourself.'}, |
| {id:'pictionary',category:'networks',name:'Neural Pictionary',tag:'DRAW & DISCOVER',description:'Draw anything and watch AI make its guesses. Add a hint and see how its answer changes.'}, |
| {id:'brain',category:'explanations',name:'3D Brain Explorer',tag:'LOOK INSIDE',description:'Rotate and open a 3D brain. Select a part to discover where it is and what it does.'}, |
| {id:'cinema',category:'research',name:'Neural Cinema',tag:'WATCH & EXPLORE',description:'Watch short clips with sound alongside saved AI predictions of how a brain might respond.'} |
| ]; |
| root.innerHTML=`<div class="recommended-heading"><h2 id="recommended-title">Recommended</h2><p>Start with one of these four favorites.</p></div><div class="recommended-grid">${picks.map(p=>`<a class="recommended-card category-${p.category}" href="#${p.id}" aria-labelledby="recommended-${p.id}" aria-describedby="recommended-description-${p.id}"><div class="recommended-card-top"><span>${p.tag}</span><div class="recommended-art">${categoryArt(p.category)}</div></div><h3 id="recommended-${p.id}">${p.name}</h3><p id="recommended-description-${p.id}">${p.description}</p><span class="recommended-open">Open activity <span aria-hidden="true">↗</span></span></a>`).join('')}</div>`; |
| } |
|
|
| export function activityCards(root,category,experiments){ |
| const extra={id:'anatomy',icon:'◉',name:'The Anatomy Checklist',tag:'27 PARTS · EXPLAINED'}; |
| root.innerHTML=`<div class="hub-section-label"><span>${category.name.toUpperCase()}</span><span>${category.items.length} things to explore</span></div><div class="activity-grid" aria-label="${category.name} activities">${category.items.map(id=>{const e=experiments.find(e=>e.id===id)||extra;return `<a class="activity-card category-${category.id}" href="#${id}" data-view="${id}" aria-labelledby="activity-title-${id}"><div class="activity-card-icon" aria-hidden="true">${e.icon}</div><span class="activity-card-tag">${escape(e.tag)}</span><h2 id="activity-title-${id}">${escape(e.name)}</h2><p>${escape(descriptions[id]||e.description)}</p><span class="activity-card-open">${id==='anatomy'?'Explore the labels':'Open activity'} <span aria-hidden="true">↗</span></span></a>`}).join('')}</div>`; |
| } |
|
|
