TL;DR

  • 트랜스포머 기반 대형 언어 모델(LLM)의 생성 과정에서 각 토큰이 참조한 과거 토큰을 단순화된 어텐션(attention) 계산으로 시각화하는 도구임.
  • 생성된 토큰을 탭하거나 마우스로 가리키면 해당 토큰 생성에 영향을 준 과거 토큰이 불투명도로 표시됨.
  • 시각화 값은 값 벡터(value vector) 크기로 조정한 어텐션 가중치를 모든 어텐션 헤드와 레이어에 걸쳐 합산한 결과임.
  • 모델이 전체 시퀀스를 제한된 내부 상태에서만 예측하는 것이 아니라 모든 과거 토큰에서 직접 정보를 선택할 수 있어 복사 오류가 낮아지는 과정을 보여줌.
  • 6억 개 파라미터 규모의 작은 모델도 힌트를 제공하면 의도한 수정 외의 자바스크립트(JS) 함수 전체를 재현하며, 구현에는 Transformers.js, 웹어셈블리(Wasm), 계측된 .onnx 모델이 사용됨.

생성 토큰과 과거 토큰의 관계

  • 트랜스포머 기반 대형 언어 모델은 생성 단계에서 이전 토큰 중 어느 토큰에서든 정보를 가져올 수 있음.
  • 모든 토큰이 다음 토큰 생성에 동일하게 영향을 주면 효과적이지 않으므로, 각 토큰이 다음 토큰에 얼마나 영향을 미치는지 결정하는 메커니즘이 필요함.
  • 이 메커니즘을 시각화해 생성된 토큰을 탭하거나 마우스로 가리키면 생성에 영향을 준 과거 토큰을 확인할 수 있음.
  • 시각화에서 말하는 ‘영향을 줌’은 완전히 정확한 표현은 아님. 시각화가 고도로 단순화된 계산에 기반하기 때문임.
  • 과거 토큰별 어텐션 가중치를 값 벡터의 크기로 조정함.
  • 모든 어텐션 헤드에 걸쳐 값을 집계함.
  • 모든 레이어에 걸쳐 값을 합산함.
  • 그 결과를 과거 토큰의 불투명도(opacity)를 조절하는 데 사용함.
  • 가장 큰 값은 항상 불투명도 1을 가지며, 나머지 값은 그 사이 값으로 보간됨.
  • 과거 토큰 하나마다 숫자 하나만 남기기 위해 많은 정보가 제거되므로, 구현을 시작할 때는 결과가 이해하기 어려울 수 있다고 예상했지만 실제로는 흥미로운 패턴이 나타남.

복사와 정보 결합의 패턴

  • 기본 ‘Office Move Summary’ 프롬프트에서 주소와 날짜처럼 그대로 복사된 텍스트 위에 마우스를 올리면 원본 데이터가 두드러지게 나타남.
  • 생성된 토큰이 원본 데이터에서 많은 정보를 가져가기 때문에 복사된 내용과 원본 토큰 사이의 관계가 뚜렷하게 보임.
  • 이는 대형 언어 모델이 직관적으로 이해하기 어려운 한 가지 측면을 다룸.
  • 모델이 다음 토큰을 확률적으로 예측한다면, 무작위성 때문에 결국 복사 과정에서 실수를 하지 않을지에 대한 의문이 생김.
  • 그러나 모델은 제한된 내부 상태만으로 전체 시퀀스를 예측하는 것이 아니라 모든 과거 토큰에 접근함.
  • 복사할 때 어떤 과거 토큰에서 정보를 가져올지 직접 선택할 수 있으므로 오류 확률이 매우 낮아질 수 있음.
  • ‘Debugging an Average Function’ 예시에서는 6억 개 파라미터 규모의 작은 모델이 의도한 수정 부분을 제외한 전체 자바스크립트(JS) 함수를 쉽게 재현함.
  • 다만 모델이 스스로 문제를 찾아내는 능력은 없으므로 일부 힌트가 필요함.
  • ‘Office Move Summary’ 프롬프트의 “Existing access cards and phone numbers remain” 문장에서 remain에 마우스를 올리면 두 구절의 정보를 결합하는 패턴이 나타남.
  • “Existing employee access cards will work”의 work에서 정보를 가져옴.
  • “company phone numbers will stay the same”의 stay the same에서 정보를 가져옴.
  • 두 문구에 포함된 단어의 정보를 결합해 새 표현을 만드는 방식임.

구현

  • 시각화 자체는 텍스트 생성을 위해 Transformers.js를 사용하는 기본적인 React 앱임.
  • 시각화에 필요한 추가 데이터를 모델에서 추출해야 하므로 일반적인 생성 루프는 사용할 수 없음.
  • 시각화할 값을 추적할 수 있도록 앱의 생성 루프를 바이브 코딩 방식으로 구현함.
  • 더 작은 모델을 사용해도 모델 용량이 수백 메가바이트에 이르므로, 모델 다운로드가 끝날 때까지 아무것도 표시하지 않는 방식은 적합하지 않음.
  • 이에 따라 여러 프롬프트를 미리 생성해 두고 즉시 불러와 확인할 수 있도록 구성함.
  • 시각화에 포함된 일부 값은 실제로 읽도록 설계된 값이 아니므로 모델의 출력으로 정의되어 있지 않음.
  • 파이썬(Python) 머신러닝 라이브러리를 사용해 구현한다면 이런 값에 접근하기 쉬울 수 있지만, Transformers.js는 전체 계산 그래프를 포함한 .onnx 파일을 사용함.
  • 모델 로딩과 계산 로직은 웹어셈블리(Wasm)에 구현되어 있어, 미리 정의된 출력 외의 값에 접근하는 쉬운 방법은 없는 것으로 보임.
  • 내부 값을 노출하기 위해 작은 스크립트로 .onnx 파일을 필요한 만큼만 수정함.
  • 그 결과 일반적인 .onnx 모델을 그대로 사용할 수 없게 됨.
  • 브라우저 기반 생성 기능을 제공하려면 계측된 별도 모델을 자체 Hugging Face 저장소에 업로드하고 앱이 해당 모델을 가리키도록 해야 함.
  • 코드는 [GitHub 저장소]에서 확인 가능함.