Activedev toolsTypeScriptMIT

Wigvu

YouTube subtitle extraction and translation

4 stars37 viewsAdded 1mo ago

AI-Agent Assisted

Tier 2
Claude Code
Signals: README-built-with-claude-code

README

WIGVU (윅뷰)

WIGTN View - YouTube subtitle extraction, translation, and real-time synchronization service.

English | 한국어

CI CD License: MIT


Built with Claude Code Skills

This project was rapidly developed using wigtn-plugins, a Claude Code Skills plugin suite for fast, efficient development.

The entire microservices architecture (Web, API, AI) was designed and implemented through an AI-assisted development workflow, demonstrating the power of Claude Code Skills for building production-ready applications.


Features

  • Subtitle Extraction - Extract subtitles from YouTube captions or via WhisperX STT
  • Auto Translation - Translate English to Korean using OpenAI GPT-4o-mini
  • AI Analysis - Generate summaries, watch scores, keywords, and highlights
  • Real-time Sync - Synchronized script panel with video playback
  • Floating Memo - Take notes while watching videos

Architecture

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Nginx     │────▶│    Web      │     │   OpenAI    │
│  (SSL/TLS)  │     │  (Next.js)  │     │   GPT-4o    │
└──────┬──────┘     └──────┬──────┘     └─────────────┘
       │                   │                   ▲
       │            ┌──────▼──────┐     ┌──────┴──────┐
       └───────────▶│    API      │────▶│     AI      │
                    │  (NestJS)   │     │  (FastAPI)  │
                    │  Port 4000  │     │  Port 5000  │
                    └─────────────┘     └──────┬──────┘
                                               │
                                        ┌──────▼──────┐
                                        │  WhisperX   │
                                        │  (STT API)  │
                                        └─────────────┘
ServiceTech StackPortRole
WebNext.js 16, React 193000Frontend UI
APINestJS 10, TypeScript4000API Gateway
AIFastAPI, Python 3.115000LLM Analysis, STT

Project Structure

wigvu/
├── apps/
│   ├── web/              # Frontend (Next.js 16)
│   ├── api/              # Backend API Gateway (NestJS 10)
│   └── ai/               # AI Backend (FastAPI)
├── docs/
│   ├── prd/              # Product Requirements Documents
│   └── deployment/       # Deployment Guides
├── nginx/                # Nginx Configuration
├── scripts/              # GCP Deployment Scripts
├── .github/workflows/    # CI/CD Pipelines
├── docker-compose.yml    # Local Development
├── docker-compose.hub.yml # Production Deployment
└── .env.example          # Environment Variables Template

Tech Stack

Frontend

  • Next.js 16, React 19, TypeScript 5
  • Tailwind CSS 4, TanStack Query, Radix UI

Backend API

  • NestJS 10, Express, TypeScript
  • ytdl-core, Circuit Breaker Pattern

AI Service

  • FastAPI, Python 3.11
  • OpenAI API, WhisperX, yt-dlp

Infrastructure

  • Docker, Nginx, Let's Encrypt
  • GitHub Actions, GCP Compute Engine

Quick Start

Using Docker Compose (Recommended)

# Clone repository
git clone https://github.com/wigtn/wigvu.git
cd wigvu

# Configure environment
cp .env.example .env
# Edit .env with your API keys

# Run all services
docker-compose up -d

# Access
# Web: http://localhost:3000
# API: http://localhost:4000/api/v1/health
# AI:  http://localhost:5000/health

Running Services Individually

# Web (Terminal 1)
cd apps/web
npm install
npm run dev

# API (Terminal 2)
cd apps/api
npm install
npm run start:dev

# AI (Terminal 3)
cd apps/ai
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
uvicorn main:app --reload --port 5000

Environment Variables

VariableDescriptionRequired
OPENAI_API_KEYOpenAI API KeyYes
INTERNAL_API_KEYInter-service Authentication KeyYes
YOUTUBE_API_KEYYouTube Data API v3 KeyOptional
STT_API_URLWhisperX STT Server URLOptional
OPENAI_MODELOpenAI Model (default: gpt-4o-mini)No
MAX_VIDEO_DURATION_MINUTESMax video length for analysisNo

See .env.example for all available options.


API Endpoints

API Gateway (Port 4000)

MethodEndpointDescription
GET/api/v1/healthHealth Check
GET/api/v1/youtube/metadata/:videoIdGet Video Metadata
GET/api/v1/transcript/:videoIdGet Transcript
POST/api/v1/analysisFull Video Analysis

AI Service (Port 5000)

MethodEndpointDescription
GET/healthHealth Check
POST/api/v1/analyzeLLM Analysis
POST/api/v1/translateTranslation
POST/stt/video/:videoIdSpeech-to-Text

Deployment

Docker Hub Images

Pre-built images are available on Docker Hub:

docker-compose -f docker-compose.hub.yml up -d
  • morirokim/wigvu-web:latest
  • morirokim/wigvu-api:latest
  • morirokim/wigvu-ai:latest

GCP Deployment


Documentation


License

MIT License

Copyright (c) 2026 WIGTN Crew

Tags

built-with-claude-codetypescript

Similar Tools