cell-coding/index.html at main · SHShinSK/cell-coding · GitHub

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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Cell Coding — A biological programming paradigm for Physical AI. Functional cells instead of narrow input-process-output pipelines.">
  <title>Cell Coding — Open Source</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Pretendard:wght@300;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0a0f0d;
      --green: #2dff8f;
      --text: #e8f5ee;
      --dim: rgba(232,245,238,0.62);
      --border: rgba(45,255,143,0.2);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: 'Pretendard', sans-serif;
      padding: 48px 24px 56px;
    }
    .wrap {
      max-width: 980px;
      margin: 0 auto;
    }
    .badge {
      width: fit-content;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--green);
      border: 1px solid var(--border);
      padding: 6px 12px;
      margin-bottom: 24px;
    }
    h1 {
      font-size: clamp(2rem, 6vw, 3.4rem);
      font-weight: 700;
      margin-bottom: 10px;
    }
    .lead {
      color: var(--dim);
      line-height: 1.8;
      margin-bottom: 4px;
    }
    .lang {
      margin-top: 18px;
      display: flex;
      gap: 10px;
      font-size: 13px;
      color: var(--dim);
      margin-bottom: 30px;
    }
    .lang a { color: var(--green); text-decoration: none; }
    .panel {
      border: 1px solid var(--border);
      padding: 20px;
      margin-bottom: 16px;
    }
    .panel h2 {
      font-size: 18px;
      margin-bottom: 8px;
      color: var(--green);
    }
    .panel p {
      line-height: 1.8;
      color: var(--dim);
      margin-bottom: 6px;
    }
    .scenario-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }
    .scenario-card {
      border: 1px solid var(--border);
      padding: 16px;
    }
    .scenario-card h3 {
      font-size: 15px;
      color: var(--green);
      margin-bottom: 8px;
    }
    .scenario-card p {
      font-size: 14px;
      line-height: 1.75;
      margin-bottom: 4px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 14px;
      margin-top: 18px;
      margin-bottom: 30px;
    }
    .card {
      border: 1px solid var(--border);
      padding: 20px;
      text-decoration: none;
      color: inherit;
      transition: border-color 0.2s, transform 0.2s;
    }
    .card:hover {
      border-color: var(--green);
      transform: translateY(-2px);
    }
    .card-title { font-weight: 600; margin-bottom: 8px; color: var(--green); }
    .card-desc { font-size: 14px; color: var(--dim); line-height: 1.65; }
    .card-desc .sub { display: block; margin-top: 6px; opacity: 0.85; }
    .cta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .btn {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      padding: 11px 16px;
      border: 1px solid var(--border);
      color: var(--text);
      text-decoration: none;
    }
    .btn-primary {
      border-color: var(--green);
      color: var(--green);
      background: rgba(45,255,143,0.1);
    }
    footer {
      margin-top: 34px;
      font-size: 12px;
      color: var(--dim);
      font-family: 'DM Mono', monospace;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="badge">OPEN SOURCE · v0.1</div>
    <h1>Cell Coding · 세포코딩</h1>
    <p class="lead">A biological programming paradigm for Physical AI, built on event-driven architecture.</p>
    <p class="lead">Physical AI를 위한 이벤트 기반 생물학적 프로그래밍 패러다임.</p>

    <div class="lang">
      <a href="README.en.md">English docs</a>
      <span>|</span>
      <a href="README.md">한국어</a>
    </div>

    <section class="panel">
      <h2>Why Cell Coding exists | 왜 Cell Coding이 필요한가</h2>
      <p>Classical computing centered around a narrow input-process-output frame, where interfaces and outputs were comparatively constrained.</p>
      <p>고전 컴퓨팅은 비교적 제약된 인터페이스와 출력을 가진 입력-처리-출력 프레임을 중심으로 발전했습니다.</p>
      <p>Inputs expanded from keyboard and mouse to camera, microphone, and location — but outputs often stayed screen- and printer-centric.</p>
      <p>입력은 키보드·마우스에서 카메라·마이크·위치정보로 확장됐지만, 출력은 여전히 화면·프린터 중심에 머무는 경우가 많았습니다.</p>
      <p>Physical AI introduces many sensing channels and many real-world action channels at the same time. Cell Coding reframes software as a network of functional cells instead of a single I/O pipeline.</p>
      <p>Physical AI는 다중 감각 채널과 다중 현실 행동 채널을 동시에 요구합니다. Cell Coding은 소프트웨어를 단일 I/O 파이프라인이 아닌 기능 세포 네트워크로 재정의합니다.</p>
    </section>

    <section class="panel">
      <h2>Physical AI scenarios | Physical AI 시나리오</h2>
      <p>Embodied systems are better modeled as cooperating functional cells than as a single I/O pipeline.</p>
      <p>구현체 시스템은 단일 I/O 파이프라인보다 협업하는 기능 세포 네트워크로 모델링하는 편이 더 적합합니다.</p>
      <div class="scenario-grid">
        <div class="scenario-card">
          <h3>Spider robot | 거미 로봇</h3>
          <p>A spider robot ingests vision, hearing, tactile, and chemical context, then produces locomotion, web generation, and chemical actions — cells adapt to terrain, not a fixed pipeline.</p>
          <p>거미 로봇은 시각·청각·촉각·화학 맥락을 받아 보행·거미줄·화학 작동을 만들며, 고정 파이프라인이 아니라 지형 적응형 세포로 표현합니다.</p>
        </div>
        <div class="scenario-card">
          <h3>Humanoid robot | 휴머노이드</h3>
          <p>A humanoid processes vision, proprioception, balance, hand tactile, and speech — bipedal locomotion, grasping, gestures, and expression map to balance, manipulation, and interaction organs.</p>
          <p>휴머노이드는 시각·고유수용감각·균형·손 촉각·음성을 처리하며, 보행·파지·제스처·표정은 균형·조작·상호작용 기관의 협업으로 표현합니다.</p>
        </div>
        <div class="scenario-card">
          <h3>PET robot | 반려(PET) 로봇</h3>
          <p>A companion PET robot reads owner presence, touch, voice tone, and home context — following, vocalization, and comfort behaviors map to affect and safety cells.</p>
          <p>반려(PET) 로봇은 주인 존재·터치·음성 톤·가정 맥락을 읽고, 따라가기·발성·위로 행동은 정서·안전 세포 네트워크로 모델링합니다.</p>
        </div>
      </div>
    </section>

    <div class="grid">
      <a class="card" href="concept-overview.html">
        <div class="card-title">Concept Overview · 개념 구조</div>
        <div class="card-desc">
          4-level process architecture: Sense → Decide → Act as functional cells.
          <span class="sub">4단계 프로세스 구조: 감각 → 판단 → 행동 기능 세포</span>
        </div>
      </a>
      <a class="card" href="cell-coding.html">
        <div class="card-title">Paradigm | 개념 소개</div>
        <div class="card-desc">
          Role · Membrane · Signal — the three laws of cells and layered model.
          <span class="sub">Role · Membrane · Signal — 세포의 3대 법칙과 계층 모델</span>
        </div>
      </a>
      <a class="card" href="language-specification.html">
        <div class="card-title">Spec v0.1 | 언어 명세</div>
        <div class="card-desc">
          Keywords, grammar, type system, and EBNF direction for the DSL.
          <span class="sub">키워드, 문법, 타입 시스템, EBNF</span>
        </div>
      </a>
      <a class="card" href="roadmap.html">
        <div class="card-title">Roadmap | 구현 로드맵</div>
        <div class="card-desc">
          Phase-based implementation checkpoints from compiler to ecosystem.
          <span class="sub">4단계 구현 가이드와 체크포인트</span>
        </div>
      </a>
      <a class="card" href="contributing.html">
        <div class="card-title">Contributing · 기여하기</div>
        <div class="card-desc">
          How to pick issues, open PRs, and join the community — EN/KR parallel.
          <span class="sub">이슈 선택, PR, 커뮤니티 참여 — 영/한 병렬</span>
        </div>
      </a>
      <a class="card" href="Cell%20Coding%20Blueprint.html">
        <div class="card-title">Physical AI Blueprint</div>
        <div class="card-desc">
          TypeScript + Python + React hybrid architecture for embodied runtime.
          <span class="sub">TypeScript + Python + React 하이브리드 아키텍처</span>
        </div>
      </a>
    </div>

    <div class="cta">
      <a class="btn btn-primary" href="https://github.com/SHShinSK/cell-coding">GitHub</a>
      <a class="btn" href="https://github.com/SHShinSK/cell-coding/issues">Issues</a>
      <a class="btn" href="https://github.com/SHShinSK/cell-coding/discussions">Discussions</a>
      <a class="btn" href="contributing.html">Contributing · 기여하기</a>
    </div>

    <footer>Apache-2.0 · SHShinSK/cell-coding</footer>
  </div>
</body>
</html>