HN 공개: yt-dlp 기반 개인 YouTube 프론트엔드

my-yt> MYGA - 유튜브를 다시 멋지게

광고 없이 깔끔하고 최소한의 유튜브 프론트엔드를 제공함. yt-dlp와 로컬 AI 모델을 통해 지역적이고 집중적이며 간결한 유튜브 경험을 제공함.

기능

• 채널 관리 및 구독
• yt-dlp를 사용하여 유튜브에서 비디오 다운로드
• 로컬 AI 모델을 사용하여 비디오 콘텐츠 요약
• 보고 싶지 않은 비디오 무시
• 백그라운드에서 비디오 재생
• 오프라인 미디어 재생
• <track> 요소와 WebVTT API를 사용한 자막
• nano-spawn을 제외하고 의존성 없음
• HTML/CSS만 사용, 클라이언트/서버 측에 JS 프레임워크 없음
• 홈 네트워크에서 호스팅하여 모든 기기에서 비디오 재생 가능

왜?

• "알고리듬적으로 큐레이션된" 피드 대신 순차적인 피드를 되찾고 싶음
• 방해 요소 없음
• 클릭베이트 썸네일 없음
• 댓글 없음
• 관련 비디오나 알고리듬적으로 추천된 비디오 없음
• 광고 없음
• 깔끔한 UI와 비디오만 있음
• 개인 프로젝트에 AI 통합 시도
• yt-dlp 사용 시도
• HTML5 <track> 요소와 WebVTT API 실험
• 단순히 만들고 싶었음
• 유튜브 프리미엄을 구독 중이지만, 주의력 통제와 향상된 오프라인 경험을 위해 필요함

향후 기능 (TODO)

• 다운로드한 비디오 삭제 기능 추가
• 작은 미리보기와 전체 화면 사이의 적절한 크기로 비디오 보기 기능 추가
• 채널 구독 없이 단일 비디오 다운로드 기능 추가
• 요약을 위한 사용할 모델 선택 및 LLM 서버 엔드포인트 지정

프로젝트

server.js

• 기본 HTTP 서버
• 클라이언트 업데이트를 위한 SSE 처리
• 비디오 재생을 위한 HTTP 범위 요청 구현

llm.js

• LMStudio의 채팅 완성 API를 사용하여 요청 처리

sse.js

• 서버 전송 이벤트를 위한 유틸리티 함수

subtitles-summary.js

• LMStudio API를 사용하여 비디오 대본 요약

youtube.js

• yt-dlp 래퍼로 비디오 다운로드, 채널 비디오 및 비디오 정보와 대본 가져오기

repository.js

• 비디오 정보의 지속성 처리 (다운로드된 비디오 설정, 요약, 무시, 비디오 업서트 등)

client

• 의존성 없는 기본 HTML5, CSS3 및 JS로 기본 프론트엔드
• SSE 업데이트 처리, API와 상호작용

일반 정보

• LLM 측면에서 현재:
  • 기본 채팅 완성 API 지원 (현재 LMStudio)
  • http://localhost:1234에서 lms server 실행 기대
  • meta-llama-3.1-8b-instruct 모델과 작동
  • 충분한 관심이 있을 경우 커스터마이징 가능 (이슈나 풀 리퀘스트로 알려주세요)