토큰 태깅 서비스 (NER 태깅)

실행 방법

https://token-annotation-service.netlify.app/

개요

이 서비스는 자연어 처리(NLP)를 위한 Named Entity Recognition(NER) 태깅 도구입니다. Hugging Face의 Transformers.js를 사용하여 브라우저에서 직접 토큰화를 수행하고, 각 토큰에 엔티티 태그를 할당할 수 있습니다.

주요 기능

1. 토큰 태깅

• 지원 엔티티: 직무(JOB), 경력(CAR), 학력(EDU), 지역(LOC), 기타(O)
• BIO 태깅 방식: B(Begin), I(Inside) 태그 자동 적용
• 키보드 단축키: 1-5 숫자키로 빠른 태깅, Backspace로 되돌리기, Enter로 다음 문장

2. 로컬스토리지 저장/불러오기 ✨ NEW

• 작업 저장: 태깅 완료 후 로컬스토리지에 저장 (사용자 지정 이름)
• 작업 불러오기: 저장된 작업을 불러와서 이어서 작업 가능
• 여러 작업 관리: 여러 개의 작업을 저장하고 관리
• 자동 복원: 브라우저를 닫았다가 다시 열어도 저장된 작업 유지

3. 토크나이저 설정

• 모델 선택: Hugging Face의 다양한 토크나이저 모델 사용 가능
• 기본 모델: klue/bert-base
• 설정 변경: ⚙️ 버튼을 클릭하여 모델 ID 변경

4. 실시간 미리보기

• 현재 태깅 상태: 실시간으로 태깅 결과 확인
• JSON 출력: 태깅 완료 후 JSON 형식으로 결과 확인
• 클립보드 복사: JSON 결과를 클립보드에 복사

사용 방법

기본 워크플로우

1. 문장 입력: 태깅할 문장들을 한 줄에 하나씩 입력
2. 작업 시작: "작업 시작 / 재시작" 버튼 클릭
3. 토큰 태깅: 각 토큰에 대해 1-5 키를 눌러 태그 할당
4. 다음 문장: 한 문장이 완료되면 "다음 문장으로" 버튼 클릭 또는 Enter
5. 결과 확인: 모든 문장 완료 후 최종 JSON 결과 확인

저장/불러오기 워크플로우

1. 작업 저장:

   • 태깅 완료 후 "💾 로컬스토리지에 저장" 버튼 클릭
   • 작업 이름 입력 (예: "프론트엔드채용공고데이터")
   • 저장 완료

2. 작업 불러오기:

   • 페이지 하단의 "저장된 작업 목록" 섹션에서 원하는 작업 선택
   • "불러오기" 버튼 클릭
   • 불러온 데이터 확인

3. 이어서 작업:

   • 불러온 상태에서 새로운 문장 입력
   • "작업 시작" 버튼 클릭
   • 새로운 태깅 결과가 기존 데이터에 추가됨
   • 같은 이름으로 다시 저장하면 업데이트됨

4. 작업 삭제:

   • 저장된 작업 카드에서 "삭제" 버튼 클릭
   • 확인 후 삭제

키보드 단축키

키	기능
1	직무(JOB) 태그 할당
2	경력(CAR) 태그 할당
3	학력(EDU) 태그 할당
4	지역(LOC) 태그 할당
5	기타(O) 태그 할당
Backspace	이전 토큰으로 되돌리기
Enter	다음 문장으로 이동 (문장 완료 시)

기술 스택

• 프론트엔드: HTML, CSS (Tailwind CSS), JavaScript (ES6+)
• 토크나이저: Hugging Face Transformers.js
• 저장소: 브라우저 로컬스토리지

데이터 형식

출력 JSON 형식

[
  {
    "input": "신입 고졸 프론트엔드 개발자 서울 공고 알려줘.",
    "label": ["B-CAR", "B-EDU", "B-JOB", "I-JOB", "B-LOC", "O", "O"]
  }
]

로컬스토리지 데이터 형식

{
  "id": "1234567890",
  "name": "프론트엔드_채용공고_데이터",
  "timestamp": "2025-09-30T15:30:00.000Z",
  "modelId": "klue/bert-base",
  "results": [...]
}

주의사항

• 로컬스토리지는 브라우저별로 독립적입니다 (Chrome과 Safari는 별도)
• 로컬스토리지 용량 제한이 있습니다 (일반적으로 5-10MB)
• 브라우저 데이터를 삭제하면 저장된 작업도 함께 삭제됩니다
• 중요한 데이터는 JSON 복사 기능을 사용하여 별도로 백업하세요

문의 및 지원

문제가 발생하거나 개선 사항이 있으면 이슈를 등록해주세요.