w3cj/how-llms-work

해결하는 문제

대부분의 사람들은 LLM을 블랙박스로 사용합니다. 이 프로젝트는 그 상자를 엽니다: 언어 모델이 실제로 어떻게 작동하는지 주요 단계를, 단순한 패턴 매칭 챗봇부터 처음부터 훈련된 완전한 트랜스포머까지 안내합니다. 이론을 읽는 대신, 로컬에서 실행하고 실시간으로 결과를 볼 수 있는 작동하는 코드를 얻을 수 있습니다.

작동 방식

이 앱은 일련의 인터랙티브 데모로 구성되며, 각각은 동일한 3부분 아키텍처를 따릅니다: 입력을 처리하고 SSE를 통해 이벤트를 스트리밍하는 Hono 서버 라우트, 상태를 관리하고 스트림에 연결하는 클라이언트 훅, 그리고 무슨 일이 일어나고 있는지 시각화하는 결과 컴포넌트. 다섯 개의 섹션은 다음과 같습니다:

1. if 문을 사용하는 간단한 챗봇(ELIZA 스타일)으로 스트리밍 효과에 지능이 필요하지 않음을 보여줍니다.
2. 역전파를 통해 실시간으로 훈련되는 XOR 신경망으로, 여러 레이어가 필요한 이유를 증명합니다.
3. 처음부터 구현된 Byte Pair Encoding(BPE) 토크나이저로, 자신의 텍스트에서 병합 단계를 애니메이션으로 보여줍니다.
4. 단어 벡터를 학습하고 단어가 의미별로 클러스터링되는 것을 보여주는 Word2Vec skip-gram 임베딩 트레이너.
5. 처음부터 훈련된 디코더 전용 트랜스포머(GPT 스타일) — ML 라이브러리 없음 — 멀티헤드 인과적 자기 주의, 레이어 정규화, 피드포워드 레이어, 역전파, Adam 최적화를 갖추고 있으며 멀티스레드 병렬 처리를 사용합니다.

모든 것은 Vite를 통해 브라우저에서 실행되며, 코드는 서버 라우트, 훅, 컴포넌트로 분할되어 쉽게 검사할 수 있습니다.

대상 독자

개발자, 학생, 또는 LLM이 내부에서 실제로 어떻게 작동하는지 궁금한 모든 사람. 고수준 프레임워크에 의존하지 않고 수학과 구현 세부 사항을 보고 싶다면 특히 유용합니다. JavaScript와 신경망 개념에 대한 기본적인 친숙함이 도움이 되지만, 데모가 아이디어를 구체적으로 만듭니다.

하이라이트

• 다섯 가지 LLM 단계 모두를 실행 가능한 로컬 코드로 다룹니다.
• 완전히 처음부터 구축된 트랜스포머(ML 라이브러리 없음)
• 라이브 시각화: 애니메이션 BPE 병합, 임베딩 클러스터링, 훈련 손실
• 실제 ChatGPT 파이프라인과 동일한 SSE 스트리밍 아키텍처
• 원본 논문 참조(ELIZA, 역전파, BPE, Word2Vec, Attention Is All You Need, GPT-1 등)
• Node.js 20+ 및 pnpm만 필요