-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpage5-von-neumann.html
More file actions
163 lines (155 loc) · 18.3 KB
/
Copy pathpage5-von-neumann.html
File metadata and controls
163 lines (155 loc) · 18.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 5: Von Neumann ↔ Brain | Neuro-to-Digital</title>
<style>
:root{--bg:#0a0a0f;--surface:#14141f;--border:#2a2a3a;--text:#c8c8d4;--text-dim:#7a7a8a;--accent:#4ec9b0;--accent-glow:rgba(78,201,176,0.3);--danger:#f4476b;--warn:#e5c07b;--blue:#61afef;--purple:#c678dd;--font:'SF Mono','Fira Code','Consolas',monospace;--radius:10px}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;display:flex;flex-direction:column;align-items:center}
.top-bar{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:16px 32px 0}
.top-bar nav{display:flex;gap:14px;align-items:center}
.top-bar nav a{color:var(--text-dim);text-decoration:none;font-size:11px;transition:color .2s}
.top-bar nav a:hover{color:var(--accent)}
.lang-toggle{display:flex;gap:2px;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.lang-toggle button{padding:4px 10px;font-size:11px;font-family:var(--font);border:none;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .2s}
.lang-toggle button.active{background:rgba(78,201,176,0.15);color:var(--accent)}
header{width:100%;max-width:1200px;padding:12px 32px 0;display:flex;align-items:baseline;gap:12px}
header .logo{font-size:13px;color:var(--accent);letter-spacing:2px;text-transform:uppercase}
header h1{font-size:20px;font-weight:600;color:#e8e8f0}
.intro-bar{width:100%;max-width:1200px;padding:12px 32px 0}
.intro-inner{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:6px;padding:14px 18px;font-size:12px;line-height:1.7;color:var(--text-dim)}
main{width:100%;max-width:1200px;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px 32px;flex:1}
@media(max-width:860px){main{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px}
.panel h2{font-size:14px;font-weight:600;color:#e0e0e8;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.panel h2 .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.arch-diagram{display:flex;flex-direction:column;align-items:center;gap:12px}
.arch-box{border:2px solid var(--border);border-radius:8px;padding:14px 16px;text-align:center;cursor:pointer;transition:all .3s;min-width:150px}
.arch-box:hover{border-color:var(--accent)}
.arch-box.highlight{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow);background:rgba(78,201,176,0.06)}
.arch-box .box-title{font-size:13px;font-weight:600;color:#ddd}
.arch-box .box-sub{font-size:9px;color:var(--text-dim)}
.arch-box .box-icon{font-size:18px}
.bus-line{display:flex;align-items:center;gap:8px;width:100%}
.bus-bar{flex:1;height:2px;background:var(--border);border-radius:1px}
.bus-label{font-size:9px;color:var(--text-dim)}
.brain-layout{position:relative;width:100%;height:390px}
.brain-region{position:absolute;border:2px solid var(--border);border-radius:8px;padding:9px 12px;cursor:pointer;transition:all .3s;font-size:10px;background:rgba(20,20,30,0.85)}
.brain-region:hover{border-color:var(--accent)}
.brain-region.highlight{border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow);background:rgba(78,201,176,0.08)}
.brain-region .rname{color:#ddd;font-weight:600;font-size:11px}
.brain-region .rrole{color:var(--text-dim);font-size:8px;margin-top:1px}
.mapping-table{width:100%;border-collapse:collapse;font-size:11px}
.mapping-table th,.mapping-table td{padding:9px 10px;text-align:left;border:1px solid var(--border)}
.mapping-table th{color:var(--text-dim);font-size:9px;text-transform:uppercase}
.mapping-table td:first-child{color:var(--accent)}
.bottom-sections{width:100%;max-width:1200px;padding:0 32px 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.bottom-sections{grid-template-columns:1fr}}
.bottom-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;font-size:12px;line-height:1.7;color:var(--text-dim)}
.bottom-box strong{color:var(--accent)}.bottom-box h3{font-size:13px;color:#ddd;margin-bottom:6px}
.bottom-box.breaks{border-left:3px solid var(--warn)}.bottom-box.breaks h3{color:var(--warn)}
footer{width:100%;max-width:1200px;padding:0 32px 16px;font-size:10px;color:var(--text-dim);display:flex;justify-content:space-between}
footer a{color:var(--text-dim);text-decoration:none;transition:color .2s}footer a:hover{color:var(--accent)}
</style>
</head>
<body>
<div class="top-bar"><nav><a href="index.html">← 首页</a><a href="knowledge-tree.html">🌳 知识树</a><a href="page6-pipeline.html">下一页 →</a></nav><div class="lang-toggle"><button id="btn-zh" class="active">中</button><button id="btn-en">EN</button></div></div>
<header><span class="logo">Neuro→Digital</span><span style="color:var(--text-dim);margin:0 8px;font-size:14px">/</span><h1 id="page-title">Page 5: Von Neumann ↔ Brain</h1></header>
<div class="intro-bar"><div class="intro-inner" id="intro-text"></div></div>
<main>
<section class="panel">
<h2><span class="dot"></span> <span id="left-title">Von Neumann Architecture</span></h2>
<div style="font-size:10px;color:var(--text-dim);text-align:center" id="click-hint">Click any component</div>
<div class="arch-diagram" id="arch-d">
<div class="arch-box" data-comp="memory"><div class="box-icon">🧠</div><div class="box-title">Memory</div><div class="box-sub">Instructions + Data</div></div>
<div class="bus-line"><div class="bus-bar"></div><span class="bus-label">System Bus</span><div class="bus-bar"></div></div>
<div style="display:flex;gap:14px;align-items:flex-start">
<div style="display:flex;flex-direction:column;gap:8px;align-items:center">
<div style="font-size:9px;color:var(--text-dim);text-transform:uppercase">CPU</div>
<div style="display:flex;gap:10px">
<div class="arch-box" data-comp="control" style="min-width:110px"><div class="box-icon">🎛️</div><div class="box-title">Control</div><div class="box-sub">Fetch · Decode</div></div>
<div class="arch-box" data-comp="alu" style="min-width:110px"><div class="box-icon">⚙️</div><div class="box-title">ALU</div><div class="box-sub">Arith · Logic</div></div>
</div>
<div class="arch-box" data-comp="registers" style="min-width:120px;border-style:dashed"><div class="box-title">Registers</div><div class="box-sub">PC · IR · GPRs</div></div>
</div>
<div class="arch-box" data-comp="io" style="min-width:96px"><div class="box-icon">🔌</div><div class="box-title">I/O</div><div class="box-sub">Input·Output</div></div>
</div>
</div>
</section>
<section class="panel">
<h2><span class="dot"></span> <span id="right-title">Brain Functional Specialization</span></h2>
<div class="brain-layout" id="brain-l">
<div class="brain-region" data-comp="pfc" style="left:18px;top:8px;width:155px"><div class="rname">Prefrontal Cortex</div><div class="rrole">Executive · Planning · Scheduling</div></div>
<div class="brain-region" data-comp="motor" style="left:18px;top:85px;width:135px"><div class="rname">Motor Cortex</div><div class="rrole">Output · Action Commands</div></div>
<div class="brain-region" data-comp="parietal" style="left:190px;top:8px;width:165px"><div class="rname">Parietal / Temporal</div><div class="rrole">Computation · Transform</div></div>
<div class="brain-region" data-comp="hippo" style="left:170px;top:105px;width:155px"><div class="rname">Hippocampus</div><div class="rrole">Memory Formation · Enc./Retrieval</div></div>
<div class="brain-region" data-comp="sensory" style="left:25px;top:170px;width:125px"><div class="rname">Sensory Cortex</div><div class="rrole">Input · Feature Detection</div></div>
<div class="brain-region" data-comp="thalamus" style="left:185px;top:185px;width:125px"><div class="rname">Thalamus</div><div class="rrole">Relay · Gating (I/O Bus)</div></div>
<div class="brain-region" data-comp="corpus" style="left:105px;top:260px;width:165px"><div class="rname">Corpus Callosum</div><div class="rrole">Inter-hemispheric Comm</div></div>
</div>
</section>
</main>
<div class="bottom-sections">
<div class="bottom-box"><h3 id="explain-title"></h3><div id="explain-text"></div></div>
<div class="bottom-box breaks"><h3 id="breaks-title"></h3><div id="breaks-text"></div></div>
</div>
<footer><span>Neuro-to-Digital · Summer 2026</span><span>Page 5/6 · <a href="page6-pipeline.html">Next →</a></span></footer>
<script>
const I18={
zh:{
pageTitle:'Page 5: 冯诺依曼架构 — 脑区功能分区',
intro:'💡 <strong>这是什么？</strong> 1945 年，冯诺依曼写了一篇 101 页的报告，画了一张图——至今你电脑里的 CPU 还是按这张图造的。五大组件：Memory 存指令+数据、Control Unit 取指译码、ALU 做计算、Registers 是超快便签条、I/O 是键盘屏幕。所有东西共享一根 System Bus——这就是著名的"冯诺依曼瓶颈"。',
leftTitle:'冯诺依曼架构',rightTitle:'脑区功能分区',clickHint:'点击任意组件查看对应的脑区',
explainTitle:'映射解释',
explain:{memory:'<strong>Memory ↔ 海马体。</strong>海马体绑定情景记忆，支持快速编码和提取——大脑的"主存"。就像 RAM 同时存储程序指令和工作数据，海马体存储"发生了什么"（数据）和"何时何地"（地址）。病人 H.M. 双侧海马切除后无法形成新记忆——就像一台能跑程序但不能写 RAM 的计算机。',control:'<strong>Control Unit ↔ 前额叶 (PFC)。</strong>控制单元取指令、译码、协调执行——正是 PFC 对行为的控制方式。PFC 维持任务目标（像 PC），选择恰当行动（像指令译码），抑制无关行为。Phineas Gage PFC 损伤后丧失计划和排序行为能力——像一个控制单元坏掉的 CPU：寄存器和 ALU 还在，但没人协调。',alu:'<strong>ALU ↔ 顶叶/颞叶皮层。</strong>ALU 执行所有计算：算术（加减）和逻辑（AND/OR/比较）。顶叶处理数值和空间变换——大脑的"数学协处理器"。颞叶做模式匹配和语义比较——类似 ALU 的逻辑操作。fMRI 显示顶内沟在计算时激活，如同 ALU 运作：输入到达，计算结果，传出结果。',registers:'<strong>Registers ↔ 工作记忆 (PFC)。</strong>CPU 寄存器是最快、最小的存储——存当前指令、下一条地址、中间结果。工作记忆（背外侧 PFC）对认知做同样的事：在即时意识中保持 4±1 个项目供操作。两者都<em>容量有限</em>（寄存器 ~16-32，工作记忆 ~4-7 chunks）且<em>极快</em>（寄存器 ~0.3ns，工作记忆 ~即时有意识访问）。',io:'<strong>I/O ↔ 感觉/运动皮层。</strong>I/O 设备在内外部世界之间翻译（键盘=输入，屏幕=输出）。感觉皮层做输入：光子/声波/触觉→神经信号。运动皮层做输出：神经指令→肌肉激活。两者都是<em>外围接口</em>——在系统内部表征和物理世界之间做翻译。'},
breaksTitle:'⚠️ 类比哪里会破裂——这是六页中破裂最严重的一页',
breaks:{default:'<strong>大脑没有中央总线。</strong>这是最根本的差异。冯诺依曼架构的所有组件共享一根总线——这也是瓶颈所在。大脑是一个大规模并行分布式网络，没有单一通信通道。丘脑有点像中继站，但信息同时在数百万条并行的轴突上流动。大脑既没有时钟信号（虽然有节律性振荡如 theta/gamma，但它们不是全局时钟），也不严格分离指令和数据（同一个突触可以同时传递"内容"和"如何处理的线索"）。大脑是<em>非冯诺依曼架构</em>——它更像一个大规模并行、事件驱动、可重构的神经形态处理器。映射有趣但非常粗糙，不应被当成大脑的实际工作机制。'},
},
en:{
pageTitle:'Page 5: Von Neumann Architecture — Brain Specialization',
intro:'💡 <strong>What is this?</strong> In 1945, John von Neumann wrote a 101-page report with a diagram — and your computer\'s CPU is still built to that blueprint. Five components: Memory stores instructions+data, Control Unit fetches and decodes, ALU does the math, Registers are ultra-fast sticky notes, I/O is keyboard/screen. Everything shares one System Bus — the famous "von Neumann bottleneck."',
leftTitle:'Von Neumann Architecture',rightTitle:'Brain Specialization',clickHint:'Click any component to see its brain analog',
explainTitle:'Mapping Explained',
explain:{memory:'<strong>Memory ↔ Hippocampus.</strong> The hippocampus binds episodic memories, supporting rapid encoding and retrieval — the brain\'s "main memory." Just as RAM stores both program instructions and working data, the hippocampus stores "what happened" (data) and "where/when" (address). Patient H.M. could not form new memories after bilateral hippocampal removal — like a computer that runs programs but cannot write to RAM.',control:'<strong>Control Unit ↔ Prefrontal Cortex.</strong> The control unit fetches instructions, decodes them, and coordinates execution — exactly what PFC does for behavior. PFC maintains task goals (like the PC), selects appropriate actions (like instruction decode), and inhibits irrelevant ones. Phineas Gage lost the ability to plan and sequence behavior after PFC damage — like a CPU with a broken control unit.',alu:'<strong>ALU ↔ Parietal/Temporal Cortex.</strong> The ALU performs all computation: arithmetic (add, subtract) and logic (AND, OR, compare). The parietal lobe handles numerical processing and spatial transformations — your brain\'s "math coprocessor." Temporal cortex performs pattern matching and semantic comparison — like the ALU\'s logic operations.',registers:'<strong>Registers ↔ Working Memory (PFC).</strong> CPU registers are the fastest, smallest storage — holding the current instruction, next address, intermediate results. Working memory (dorsolateral PFC) does the same for cognition: holding 4±1 items in immediate awareness for manipulation. Both are <em>capacity-limited</em> (registers ~16-32, working memory ~4-7 chunks) and <em>extremely fast</em>.',io:'<strong>I/O ↔ Sensory/Motor Cortex.</strong> I/O devices translate between internal and external worlds. Sensory cortex does input: photons/sound/touch → neural signals. Motor cortex does output: neural commands → muscle activation. Both are <em>peripheral interfaces</em>.'},
breaksTitle:'⚠️ Where the Analogy Breaks — This Is the Most Broken Analogy of All Six',
breaks:{default:'<strong>The brain has no central bus.</strong> This is the most fundamental difference. All von Neumann components share one bus — which is also the bottleneck. The brain is a massively parallel, distributed network with no single communication channel. The thalamus is somewhat like a relay station, but information flows simultaneously across millions of parallel axons. The brain has neither a clock signal (though rhythmic oscillations like theta/gamma exist, they\'re not global clocks), nor a clean separation of instructions and data (the same synapse can carry both "content" and "how to process this" cues). The brain is a <em>non-von-Neumann architecture</em> — more like a massively parallel, event-driven, reconfigurable neuromorphic processor. The mapping is fun but very rough, and should not be mistaken for how the brain actually works.'},
}
};
let lang=localStorage.getItem('ntd-lang')||'zh';
function t(p){const k=p.split('.');let v=I18[lang];for(const kk of k){if(v===undefined)return p;v=v[kk];}return v||p;}
let activeComp=null;
const mapping={memory:{brain:'hippo'},control:{brain:'pfc'},alu:{brain:'parietal'},registers:{brain:'pfc'},io:{brain:'sensory'}};
function toggleHighlight(comp){
if(activeComp===comp){activeComp=null;}else{activeComp=comp;}
renderHighlights();
}
function renderHighlights(){
document.querySelectorAll('#arch-d [data-comp]').forEach(b=>b.classList.remove('highlight'));
document.querySelectorAll('#brain-l [data-comp]').forEach(r=>r.classList.remove('highlight'));
if(activeComp&&mapping[activeComp]){
const m=mapping[activeComp];
const vnEl=document.querySelector(`#arch-d [data-comp="${activeComp}"]`);if(vnEl)vnEl.classList.add('highlight');
const brEl=document.querySelector(`#brain-l [data-comp="${m.brain}"]`);if(brEl)brEl.classList.add('highlight');
document.getElementById('explain-text').innerHTML=t(`explain.${activeComp}`);
}else{
document.getElementById('explain-text').innerHTML=lang==='zh'?'<strong>点击左侧冯诺依曼架构的任意组件</strong>查看对应的脑区映射。':'<strong>Click any component</strong> on the von Neumann diagram to see its brain analog.';
}
document.getElementById('page-title').textContent=t('pageTitle');document.getElementById('intro-text').innerHTML=t('intro');
document.getElementById('left-title').textContent=t('leftTitle');document.getElementById('right-title').textContent=t('rightTitle');
document.getElementById('click-hint').textContent=t('clickHint');
document.getElementById('explain-title').textContent=t('explainTitle');
document.getElementById('breaks-title').textContent=t('breaksTitle');document.getElementById('breaks-text').innerHTML=t('breaks.default');
document.getElementById('btn-zh').classList.toggle('active',lang==='zh');document.getElementById('btn-en').classList.toggle('active',lang==='en');
document.documentElement.lang=lang==='zh'?'zh':'en';
}
function setLang(l){lang=l;localStorage.setItem('ntd-lang',l);renderHighlights();}
document.getElementById('arch-d').addEventListener('click',e=>{const b=e.target.closest('[data-comp]');if(!b)return;toggleHighlight(b.dataset.comp);});
document.getElementById('brain-l').addEventListener('click',e=>{const r=e.target.closest('[data-comp]');if(!r)return;const found=Object.entries(mapping).find(([,v])=>v.brain===r.dataset.comp);if(found)toggleHighlight(found[0]);});
document.getElementById('btn-zh').addEventListener('click',()=>setLang('zh'));
document.getElementById('btn-en').addEventListener('click',()=>setLang('en'));
renderHighlights();
</script>
</body>
</html>