File size: 3,372 Bytes
eef8a21
cdcf600
 
b23f51c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2e9dd8e
 
 
 
 
b23f51c
 
 
 
 
 
cdcf600
b23f51c
2e9dd8e
 
 
 
 
 
 
 
 
 
cdcf600
b23f51c
2e9dd8e
 
 
 
 
 
cdcf600
b23f51c
2e9dd8e
 
 
 
 
 
cdcf600
 
2e9dd8e
 
 
 
 
 
 
 
 
 
 
 
 
b23f51c
2e9dd8e
b23f51c
 
 
 
 
2e9dd8e
b23f51c
cdcf600
b23f51c
 
 
cdcf600
 
 
 
 
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
const brainImg = "https://raw.githubusercontent.com/Komalpreet2809/Soma-Assets/master/Brain_nobg.png";
import './CognitiveBrainScene.css';

/**
 * PHASE TO REGION MAPPING
 */
const REGION_MAP = {
  perception: 'sensory',
  sensory: 'sensory',
  attention: 'thalamus',
  routing: 'thalamus',
  prediction: 'prefrontal',
  working_memory: 'prefrontal',
  recall: 'hippocampus',
  association: 'hippocampus',
  memory: 'hippocampus',
  emotion: 'amygdala',
  reasoning: 'prefrontal',
  reflection: 'prefrontal',
  language: 'prefrontal',
  inhibition: 'hippocampus', // Moved to Temporal for smoother memory filtering flow
  graph: 'hippocampus',
  listening: 'sensory',
  responding: 'prefrontal'
};

function CognitiveBrainImageScene({ state = 'idle' }) {
  const activeRegion = REGION_MAP[state] || null;
  const isState = (s) => state === s;

  return (
    <div className={`brain-viewport state-${state}`}>
      {/* Layer 1: Brain Core */}
      <div className="brain-core">
        {/* Layer 2: Cognitive Signals (Floating Ambient Labels) */}
        <div className="neural-signals">
          <div className={`signal-node prefrontal ${activeRegion === 'prefrontal' ? 'active' : ''} ${isState('reasoning') ? 'hot' : ''}`}>
            <div className="signal-dot"></div>
            <div className="signal-copy">
              <strong>Prefrontal</strong>
              <span>Reasoning & Reflection</span>
            </div>
          </div>

          <div className={`signal-node parietal ${activeRegion === 'sensory' ? 'active' : ''}`}>
            <div className="signal-dot"></div>
            <div className="signal-copy">
              <strong>Parietal</strong>
              <span>Perception & Sensory</span>
            </div>
          </div>

          <div className={`signal-node temporal ${activeRegion === 'hippocampus' ? 'active' : ''}`}>
            <div className="signal-dot"></div>
            <div className="signal-copy">
              <strong>Temporal</strong>
              <span>Memory & Association</span>
            </div>
          </div>

          <div className={`signal-node thalamus-label ${activeRegion === 'thalamus' || activeRegion === 'amygdala' ? 'active' : ''}`}>
            <div className="signal-dot"></div>
            <div className="signal-copy">
              <strong>Subcortical</strong>
              <span>Attention & Routing</span>
            </div>
          </div>
        </div>
        <img 
          src={brainImg} 
          className="brain-layer base active" 
          alt="Soma Brain" 
        />

        {/* State Glow Hubs (Subtle Ambient Backglow) */}
        <div className={`glow-hub prefrontal-glow ${activeRegion === 'prefrontal' ? 'visible' : ''}`} />
        <div className={`glow-hub parietal-glow ${activeRegion === 'sensory' ? 'visible' : ''}`} />
        <div className={`glow-hub temporal-glow ${activeRegion === 'hippocampus' ? 'visible' : ''}`} />
        <div className={`glow-hub thalamus-glow ${activeRegion === 'thalamus' || activeRegion === 'amygdala' ? 'visible' : ''}`} />
        
        {/* Interaction Particles */}
        <div className="ambient-breath" />
      </div>

      {/* Interaction Feedback (Particles) */}
      {(isState('listening') || isState('responding')) && <div className="listening-particles" />}
    </div>
  );
}

export default CognitiveBrainImageScene;