Streamlit RAG 챗봇과 자동화 툴 n8n으로 완성한 인공지능 학습 파이프라인 #2

서비스 개요

이 프로젝트는 정보 수집부터 학습까지 자동화된 개인 학습 파이프라인입니다. Omnivore를 통해 웹 콘텐츠를 저장하면 웹훅으로 n8n에 자동 전달됩니다. n8n은 AI를 활용해 콘텐츠를 요약하고 주제와 키워드를 추출한 뒤, 플래시카드 형태로 변환하여 구글시트에 저장합니다. 매일 아침 텔레그램으로 전날 수집된 내용의 요약본이 전송되며, FlashCard Deluxe로 카드 학습을 하거나 Streamlit RAG 챗봇으로 심화 학습을 할 수 있습니다. 이를 통해 수동 작업 없이 정보 수집부터 학습까지 모든 과정이 자동화되어 일관된 학습 루틴을 제공합니다.
자세한 내용은 Streamlit RAG 챗봇과 자동화 툴로 완성한 인공지능 학습 파이프라인 #1에서 확인하실 수 있습니다.

문제점

• Community Node를 통해 구현 중인 유튜브 자막 기능 사용 불가
• ReadItLater 서비스인 Omnivore 서비스 종료
  • Omnivore의 이벤트 발생 시 Webhook 호출하는 기능이 가장 중요

유튜브 자막 가져는 기능 구현

• n8n-nodes-youtube-transcript – npm 노드 업데이트로 인해 Docker에 추가 설정이 필요한 상태
• Puppeteer를 사용하지 않는 이전 버전을 찾아 버전을 지정해서 다시 설치
  Community Node 설치 시 버전을 지정해서 설치할 수 있음

n8n-nodes-youtube-transcript@0.5.0

Omnivore 기능 대체

필요한 기능

• 이벤트(항목 추가) 시 Webhook을 호출하는 기능: 가장 중요한 기능 필수
• ReadItLater의 기본기능: 차후 대안을 찾거나 필수 요소는 아님

이벤트(항목 추가) 시 Webhook을 호출하는 기능

개발은 AI 기반 코드 에디터 WindSurf 사용

Windsurf는 Codeium이 개발한 AI 기반 IDE로, Cursor와 유사하게 개발자와 AI의 협업을 통해 코딩 효율을 높입니다.

주요 특징

1. 실시간 협업 Flow
   AI Copilot과 Agent가 결합해 실시간으로 코드 작성과 문제 해결을 지원해 개발자와의 유기적인 협력을 강화합니다.
2. Cascade AI 어시스턴트
   코드베이스를 깊이 이해하고 실시간 컨텍스트 인식을 통해 문제 해결을 효율적으로 돕습니다.
3. 고급 코드 편집 기능
   • 인라인 명령: Cmd + I로 자연어를 사용해 코드 생성 및 리팩토링.
   • 코드 렌즈: 원클릭으로 코드 이해와 리팩토링 지원.
   • 슈퍼컴플리트: 다음 행동을 예측해 제안.
4. 멀티파일 편집 기능
   여러 파일을 동시에 관리하여 대규모 프로젝트에서도 효율적인 편집을 지원합니다.
5. 오프라인 모드 지원
   오프라인에서도 네트워크 없이 생산성을 유지할 수 있습니다.

데스크탑 (웹브라우저)

• 크롬 확장 프로그램으로 개발
• 클로드와의 대화를 통해 기능 명세 작성

다음과 같은 기능을 하는 크롬익스텐션을 개발해줘.


# 크롬 익스텐션 기능 명세

## 1. 기본 동작
- 브라우저 상단의 익스텐션 아이콘 클릭으로 실행
- 클릭 시 현재 페이지의 정보를 추출하여 두 가지 기능 동시 실행
  1. 콘텐츠 요약
  2. Read-it-later 서비스에 저장

## 2. 페이지 정보 추출
- **추출 대상**
  - 페이지 제목 (메인 콘텐츠의 제목)
  - 현재 URL
- **페이지 유형별 제목 추출 처리**
  - 일반 웹페이지: HTML 구조 기반 추출
  - 동적 로딩 페이지(YouTube 등): MutationObserver 활용
  - 추출 실패 시: document.title 사용

## 3. 웹훅 기능
### 웹훅 1: 콘텐츠 요약
- **입력**: 페이지 제목, URL
- **출력**: 요약된 콘텐츠
- **동작**: 요약 결과를 화면에 표시

### 웹훅 2: Read-it-later 저장
- **입력**: 페이지 제목, URL
- **출력**: 성공/실패 여부
- **동작**: 백그라운드에서 처리

## 4. UI 구현
### 요약 결과 표시 (오버레이)
- 위치: 화면 우측 상단 고정
- 크기: 300px × 400px (고정)
- 특징:
  - 스크롤 가능한 콘텐츠 영역
  - 닫기 버튼
  - 항상 최상위 레이어

### 저장 결과 알림
- 위치: 화면 우측 하단
- 형태: 작은 알림 메시지
- 표시 내용: 성공/실패 상태
- 특징: 자동으로 사라짐

## 5. 에러 처리
- 제목 추출 실패 시 document.title 사용
- 웹훅 호출 실패 시 에러 메시지 표시
- 네트워크 오류 등 기타 예외 상황에 대한 알림 표시

## 6. 보안 및 권한
- activeTab 권한: 현재 탭의 정보 접근
- host permissions: 웹훅 호출을 위한 외부 URL 접근
- storage 권한: 웹훅 URL 등 설정 저장

• WindSurf를 사용해서 코드 자동 생성

• 개발 완료

모바일 (안드로이드, iOS)

• 크롬익스텐션과 동일한 기능을 하는 웹앱(웹페이지)를 개발

• DriveToWeb 서비스를 활용
  – DriveToWeb은 클라우드 드라이브를 이용한 서버리스 웹 호스팅 서비스입니다. 이 서비스는 HTML, CSS, JavaScript, 미디어 파일을 포함한 전체 웹사이트를 호스팅할 수 있으며, 별도의 서버 관리가 필요 없습니다. 주로 교육자, 개발자, 학생, 비영리 단체를 위한 무료 서비스이며, 기부를 통해 운영됩니다.

ReadItLater 기본 기능

• 차후 Synology Nas에 설치해서 적용할 예정 → 아직 선택하지 못 함

n8n 수정

• 유튜부 단축url 처리
• Respond to Webhook 노드를 사용 요약된 내용을 반환 → 요약내용된 내용을 출력하는데 사용
• 기타 나머지 기능은 기존과 동일 (요약, FlashCard 생성 등)

남은 작업

• Omnivore를 대체하는 ReadItLater 서비스 찾아서 self-hosting 및 프로젝트 적용
• 모바일에서 공유기능을 사용 바로 n8n에 전송할 수 있도록 모바일앱 개발
• 영어공부로 전환하기

본 글은 GPTers에 게시되고 있습니다.
Streamlit RAG 챗봇과 자동화 툴로 완성한 인공지능 학습 파이프라인 – 진행상황