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

8 hours ago 2

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 모델과 작동
    • 충분한 관심이 있을 경우 커스터마이징 가능 (이슈나 풀 리퀘스트로 알려주세요)

Read Entire Article