스페이스 이동

.gitignore

@@ -0,0 +1,29 @@
+# Vue.js
+frontend/node_modules
+frontend/dist
+
+# Python
+backend/app/__pycache__
+backend/.pytest_cache
+backend/.venv
+backend/venv
+backend/embeddings/ # RAG에서 생성된 임베딩 파일 저장 시
+backend/.env
+backend/app/temp_captions
+backend/app/debug_yt_dlp.log
+
+# html
+static
+
+# Docker
+.dockerignore
+
+# OS
+.DS_Store
+Thumbs.db
+.env
+
+# proxy rotation files
+[internal]
+=
+transferring

Dockerfile

@@ -0,0 +1,50 @@
+# --- Stage 1: Frontend Build ---
+FROM node:20-slim as frontend-builder
+
+WORKDIR /app/frontend
+
+COPY frontend/package*.json ./
+
+RUN npm install
+
+COPY frontend/ .
+
+RUN npm run build
+
+
+# --- Stage 2: Backend and Combined Serving via FastAPI (Uvicorn) ---
+FROM python:3.11-slim-bookworm
+
+WORKDIR /app
+
+# 시스템 패키지 업데이트 및 build-essential (Python 패키지 빌드용) 설치
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    curl \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Python 종속성 설치
+COPY backend/requirements.txt ./backend/requirements.txt
+RUN pip install --no-cache-dir -r backend/requirements.txt
+
+# 백엔드 소스 코드 복사
+COPY backend/ ./backend/
+
+# Hugging Face 캐시 디렉토리 설정: /tmp는 일반적으로 쓰기 가능
+ENV TRANSFORMERS_CACHE="/tmp/hf_cache"
+ENV HF_HOME="/tmp/hf_cache" 
+
+# 프론트엔드 빌드 결과물을 백엔드 앱이 접근할 수 있는 경로로 복사합니다.
+# /app/static 폴더를 만들고 그 안에 Vue.js 빌드 결과물을 넣습니다.
+RUN mkdir -p /app/static
+COPY --from=frontend-builder /app/frontend/dist /app/static
+
+# 최종 실행 명령어
+# 애플리케이션 포트 설정 (허깅페이스 스페이스는 7860번 포트를 사용)
+EXPOSE 7860
+
+# Uvicorn을 사용하여 FastAPI 앱을 실행합니다.
+# main:app은 backend/app/main.py 파일의 app 객체를 의미합니다.
+# --host 0.0.0.0 은 모든 네트워크 인터페이스에서 접근 가능하게 합니다.
+CMD ["sh", "-c", "uvicorn main:app --host 0.0.0.0 --port ${PORT:-7860} --app-dir backend/app"]

README.md

@@ -1,11 +1,10 @@
 ---
-title: YouTube Transcript Extraction
-emoji: 🐢
-colorFrom: blue
-colorTo: pink
+title: Po
+emoji: 🚀
+colorFrom: indigo
+colorTo: red
 sdk: docker
 pinned: false
-short_description: 'Enabling Keyword Search within Youtube Video Transcripts:'
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

backend/app/main.py

@@ -0,0 +1,78 @@
+# backend/app/main.py
+
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles # StaticFiles 임포트
+import os
+from pydantic import BaseModel
+
+from youtube_parser import process_youtube_video_data
+from rag_core import perform_rag_query
+
+app = FastAPI()
+
+# CORS 설정: 프론트엔드와 백엔드가 다른 포트에서 실행될 때 필요
+origins = [
+    "http://localhost:8080", # Vue 개발 서버 기본 포트
+    "http://localhost:5173", # Vue Vite 개발 서버 기본 포트
+    "https://sodagraph-po.hf.space", # 여러분의 Hugging Face Space URL
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 경로 설정
+current_file_dir = os.path.dirname(os.path.abspath(__file__))
+project_root_dir = os.path.join(current_file_dir, "..", "..")
+static_files_dir = os.path.join(project_root_dir, "static")
+
+# ✅ API 라우터 먼저 정의
+@app.get("/api/health")
+async def api_health_check():
+    return {"status": "ok", "message": "Backend API is running"}
+
+class VideoProcessRequest(BaseModel):
+    video_url: str
+    query: str
+
+@app.post("/api/process_youtube_video")
+async def process_youtube_video(request: VideoProcessRequest):
+    try:
+        processed_chunks_with_timestamps = await process_youtube_video_data(request.video_url)
+
+        if not processed_chunks_with_timestamps:
+            return {"message": "자막 또는 내용을 추출할 수 없습니다.", "results": []}
+
+        rag_results = await perform_rag_query(
+            chunks_with_timestamps=processed_chunks_with_timestamps,
+            query=request.query,
+            top_k=5
+        )
+
+        return {
+            "status": "success",
+            "message": "성공적으로 영상을 처리하고 RAG 검색을 수행했습니다.",
+            "video_url": request.video_url,
+            "query": request.query,
+            "results": rag_results
+        }
+
+    except Exception as e:
+        print(f"ERROR: 서버 처리 중 오류 발생: {str(e)}")
+        raise HTTPException(status_code=500, detail="서버 처리 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.")
+
+# ✅ 정적 파일은 마지막에 mount
+app.mount("/", StaticFiles(directory=static_files_dir, html=True), name="static")
+
+# 서버 실행을 위한 메인 진입점 (Docker에서는 Uvicorn이 직접 호출하므로 필수는 아님)
+if __name__ == "__main__":
+    import uvicorn
+    import os
+
+    port = int(os.environ.get("PORT", 7860))  # Hugging Face가 전달하는 포트를 우선 사용
+    uvicorn.run(app, host="0.0.0.0", port=port)

backend/app/proxy_manager.py

@@ -0,0 +1,54 @@
+# backend/app/proxy_manager.py
+
+import os
+import requests # requests는 FreeProxy 테스트나 ScrapingBee API 직접 호출 시 유용
+from loguru import logger
+from dotenv import load_dotenv
+
+# .env 파일에서 환경 변수 로드
+load_dotenv()
+
+# ScrapingBee API 키 (Proxy Mode를 사용한다면 필요 없을 수 있음)
+SCRAPINGBEE_API_KEY = os.getenv("SCRAPINGBEE_API_KEY")
+
+# ScrapingBee Proxy Mode 주소 (대시보드에서 확인한 실제 프록시 서버 주소)
+SCRAPINGBEE_PROXY_ADDRESS = os.getenv("SCRAPINGBEE_PROXY_ADDRESS")
+
+# FreeProxy 라이브러리 (필요하다면 주석 해제)
+# from fp.fp import FreeProxy
+# import asyncio # FreeProxy가 비동기로 동작한다면 필요
+
+async def get_proxy_url() -> str | None:
+    """
+    현재 설정된 프록시 제공자로부터 프록시 URL을 가져옵니다.
+    나중에 다른 프록시 제공자로 변경 시 이 함수 내부만 수정하면 됩니다.
+    """
+    # ----------------------------------------------------
+    # ScrapingBee Proxy Mode 사용 예시 (추천)
+    # ScrapingBee 대시보드에서 얻은 프록시 주소를 사용합니다.
+    # .env 파일에 SCRAPINGBEE_PROXY_ADDRESS="us.scrapingbee.com:8880" 형태로 설정
+    if SCRAPINGBEE_PROXY_ADDRESS:
+        logger.info(f"ScrapingBee Proxy Mode 프록시 사용 시도: {SCRAPINGBEE_PROXY_ADDRESS}")
+        return SCRAPINGBEE_PROXY_ADDRESS
+    # ----------------------------------------------------
+
+    # ----------------------------------------------------
+    # FreeProxy 사용 예시 (폴백 또는 다른 선택지)
+    # 위에서 ScrapingBee 프록시를 찾지 못했거나 사용하지 않으려는 경우
+    # 주석을 해제하고 FreeProxy를 사용하도록 설정할 수 있습니다.
+    # try:
+    #     logger.info("FreeProxy를 사용하여 무료 프록시 가져오기 시도...")
+    #     # Hugging Face Spaces 허용 포트 (80, 443, 8080)만 필터링
+    #     proxy_address = FreeProxy(timeout=1, port=[80, 443, 8080], https=True, rand=True).get()
+    #     if proxy_address:
+    #         logger.info(f"FreeProxy 사용: {proxy_address}")
+    #         return proxy_address
+    #     else:
+    #         logger.warning("사용 가능한 FreeProxy를 찾을 수 없습니다.")
+    # except Exception as e:
+    #     logger.warning(f"FreeProxy 가져오기 실패: {e}")
+    # ----------------------------------------------------
+
+    # 어떤 프록시도 설정되지 않았거나 가져오지 못한 경우
+    logger.warning("어떤 유효한 프록시도 구성되거나 가져올 수 없습니다. 프록시 없이 진행합니다.")
+    return None

backend/app/rag_core.py

@@ -0,0 +1,115 @@
+# backend/app/rag_core.py
+
+from sentence_transformers import SentenceTransformer
+import faiss
+import numpy as np
+from typing import List, Dict, Tuple
+
+# 전역 변수로 모델 로드 (앱 시작 시 한 번만 로드되도록)
+# 네이버 클로바의 한국어 SentenceBERT 모델을 로드합니다.
+try:
+    # 네이버 클로바 HyperCLOVAX-SEED-Text-Instruct-0.5B 모델 로드
+    model = SentenceTransformer('jhgan/ko-sroberta-multitask')
+    print("INFO: 임베딩 모델 'jhgan/ko-sroberta-multitask' 로드 완료.")
+except Exception as e:
+    print(f"ERROR: 임베딩 모델 'jhgan/ko-sroberta-multitask' 로드 실패: {e}. 다국어 모델로 시도합니다.")
+    # 대체 모델 로직 (필요하다면 유지하거나 제거할 수 있습니다)
+    try:
+        model = SentenceTransformer('sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2')
+        print("INFO: 임베딩 모델 'sentence-transformers/paraphrase-multilingual-L12-v2' 로드 완료.")
+    except Exception as e:
+        print(f"ERROR: 대체 임베딩 모델 로드 실패: {e}. RAG 기능을 사용할 수 없습니다.")
+        raise
+
+async def perform_rag_query(chunks_with_timestamps: List[Dict], query: str, top_k: int = 5) -> List[Dict]:
+    """
+    제공된 텍스트 청크들과 쿼리를 사용하여 RAG(Retrieval-Augmented Generation) 검색을 수행합니다.
+    현재는 임베딩 기반 유사도 검색만 수행하며, LLM 호출은 추후 추가됩니다.
+
+    Args:
+        chunks_with_timestamps: [{"text": "...", "timestamp": "...", "start_seconds": ...}] 형태의 리스트.
+        query: 사용자 쿼리 문자열.
+        top_k: 쿼리와 가장 유사한 상위 N개의 청크를 반환.
+
+    Returns:
+        쿼리와 가장 관련성 높은 상위 N개의 청크 (Dict) 리스트.
+    """
+    if not chunks_with_timestamps:
+        print("WARNING: RAG 검색을 위한 텍스트 청크가 없습니다.")
+        return []
+
+    # 1. 텍스트 임베딩 생성
+    # 모든 청크의 텍스트만 추출
+    texts = [chunk["text"] for chunk in chunks_with_timestamps]
+    print(f"INFO: 총 {len(texts)}개의 텍스트 청크 임베딩 시작.")
+    
+    # 모델의 encode 메서드는 비동기가 아니므로, 직접 호출.
+    # 만약 시간이 오래 걸린다면 FastAPI의 `run_in_threadpool` 등을 고려.
+    try:
+        chunk_embeddings = model.encode(texts, convert_to_numpy=True)
+        print("INFO: 텍스트 청크 임베딩 완료.")
+    except Exception as e:
+        print(f"ERROR: 텍스트 청크 임베딩 중 오류 발생: {e}")
+        return []
+
+    # 2. FAISS 인덱스 생성 및 청크 임베딩 추가
+    dimension = chunk_embeddings.shape[1] # 임베딩 벡터의 차원
+    index = faiss.IndexFlatL2(dimension) # L2 유클리드 거리를 사용하는 간단한 인덱스
+    index.add(chunk_embeddings)
+    print("INFO: FAISS 인덱스 생성 및 임베딩 추가 완료.")
+
+    # 3. 쿼리 임베딩
+    query_embedding = model.encode([query], convert_to_numpy=True)
+    print("INFO: 쿼리 임베딩 완료.")
+
+    # 4. 유사도 검색 (FAISS)
+    # D: 거리 (Distance), I: 인덱스 (Index)
+    distances, indices = index.search(query_embedding, top_k)
+    print(f"INFO: FAISS 유사도 검색 완료. 상위 {top_k}개 결과.")
+
+    retrieved_chunks = []
+    for i, idx in enumerate(indices[0]):
+        if idx >= 0: # 유효한 인덱스만 (FAISS가 -1을 반환할 수 있음)
+            original_chunk = chunks_with_timestamps[idx]
+            retrieved_chunks.append({
+                "text": original_chunk["text"],
+                "timestamp": original_chunk["timestamp"],
+                "score": float(distances[0][i]) # 유사도 점수 (거리가 작을수록 유사)
+            })
+    
+    # 거리가 작은 순서(유사도가 높은 순서)로 정렬하여 반환
+    retrieved_chunks.sort(key=lambda x: x['score'])
+
+    print(f"DEBUG: 최종 검색된 청크 수: {len(retrieved_chunks)}")
+    return retrieved_chunks
+
+# ... (나머지 perform_rag_query 함수 코드는 동일합니다) ...
+
+# 테스트용 코드 (직접 실행 시)
+if __name__ == "__main__":
+    import asyncio
+
+    sample_chunks = [
+        {"text": "안녕하세요, 오늘 우리는 AI와 머신러닝의 미래에 대해 이야기할 것입니다.", "timestamp": "00:00:05", "start_seconds": 5},
+        {"text": "특히 딥러닝과 신경망이 어떻게 혁신을 이끄는지 살펴보겠습니다.", "timestamp": "00:00:15", "start_seconds": 15},
+        {"text": "이번 영상에서는 유튜브 영상 데이트 서비스 개발 과정을 보여드립니다.", "timestamp": "00:00:25", "start_seconds": 25},
+        {"text": "파이썬과 FastAPI를 사용하여 백엔드를 구축하고 있습니다.", "timestamp": "00:00:35", "start_seconds": 35},
+        {"text": "데이트 앱 개발은 쉬운 일이 아니지만, 재미있습니다.", "timestamp": "00:00:45", "start_seconds": 45},
+        {"text": "이 모델은 자���어 처리(NLP) 작업에 매우 유용합니다.", "timestamp": "00:00:55", "start_seconds": 55},
+        {"text": "다음주에는 새로운 데이트 장소를 탐험할 계획입니다.", "timestamp": "01:00:05", "start_seconds": 65},
+    ]
+
+    async def main():
+        print("\n[테스트 1] 쿼리: 데이트 앱")
+        query1 = "데이트 앱"
+        results1 = await perform_rag_query(sample_chunks, query1, top_k=3)
+        for r in results1:
+            print(f"  [{r['score']:.4f}] {r['timestamp']}: {r['text']}")
+
+        print("\n[테스트 2] 쿼리: 인공지능")
+        query2 = "인공지능"
+        results2 = await perform_rag_query(sample_chunks, query2, top_k=2)
+        for r in results2:
+            print(f"  [{r['score']:.4f}] {r['timestamp']}: {r['text']}")
+
+    asyncio.run(main())

backend/app/youtube_parser.py

@@ -0,0 +1,346 @@
+import os
+import contextlib
+import asyncio
+import json # json 모듈 추가
+import shutil
+import sys # sys 모듈 추가
+from urllib.parse import urlparse, parse_qs
+
+from loguru import logger
+from yt_dlp import YoutubeDL
+from proxy_manager import get_proxy_url
+from dotenv import load_dotenv
+
+# 환경 변수 로드 (코드의 가장 위에 위치)
+load_dotenv()
+
+# --- Loguru 설정 시작 ---
+# 기본 핸들러(콘솔 출력) 제거
+logger.remove()
+
+# 콘솔 출력 핸들러: INFO 레벨 이상만 출력, 색상 적용, 간결한 포맷
+logger.add(
+    sys.stderr, # 표준 에러 스트림 (콘솔)
+    level="INFO",
+    colorize=True,
+    format="<green>{time:HH:mm:ss.SSS}</green> | <level>{level: <8}</level> | <cyan>{name}</cyan>:<cyan>{function}</cyan>:<cyan>{line}</cyan> - <level>{message}</level>"
+)
+
+# 파일 출력 핸들러: DEBUG 레벨 이상 모든 로그를 파일로 저장, 10MB마다 새 파일 생성
+logger.add(
+    "debug_yt_dlp.log", # 로그 파일 이름
+    level="DEBUG",
+    rotation="10 MB", # 파일 크기가 10MB가 되면 새 파일 생성
+    compression="zip", # 압축하여 저장 (선택 사항)
+    enqueue=True, # 비동기 로깅 (성능 향상)
+    format="{time:YYYY-MM-DD HH:mm:ss.SSS} | {level: <8} | {name}:{function}:{line} - {message}"
+)
+# --- Loguru 설정 끝 ---
+
+
+async def get_youtube_video_id(url: str) -> str | None:
+    """
+    유튜브 URL에서 비디오 ID를 추출합니다.
+    표준 유튜브 URL (youtube.com/watch?v=..., youtu.be/...)을 처리합니다.
+    """
+    parsed_url = urlparse(url)
+    
+    # 표준 YouTube Watch 페이지 도메인 확인
+    # www.youtube.com, m.youtube.com, youtube.com 등을 포함합니다.
+    # 'www.youtube.com', 'm.youtube.com', 'youtube.com'은 실제 YouTube 도메인을 의미합니다.
+    if parsed_url.hostname and any(domain in parsed_url.hostname for domain in ['www.youtube.com', 'm.youtube.com', 'youtube.com']):
+        query_params = parse_qs(parsed_url.query)
+        if 'v' in query_params:
+            return query_params['v'][0]
+    
+    # 짧은 YouTube URL (youtu.be/VIDEO_ID)
+    elif parsed_url.hostname == 'youtu.be':
+        # path가 /VIDEO_ID 형태이므로 맨 앞의 '/'를 제거
+        video_id = parsed_url.path.strip('/')
+        # 유튜브 비디오 ID는 보통 11자리이므로, 유효성 검사
+        if len(video_id) == 11:
+            return video_id
+        
+    logger.warning(f"알 수 없는 형식의 YouTube URL: {url}")
+    return None
+    
+async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
+    logger.info(f"비디오 ID '{video_id}'에 대한 자막 가져오기 시도.")
+
+    processed_chunks = []
+    proxy_address = await get_proxy_url()
+
+    # yt-dlp 옵션 설정
+    ydl_opts = {
+        'writesubtitles': True,          # 사용자가 업로드한 수동 자막 파일 쓰기 활성화
+        'writeautomaticsub': True,       # YouTube에서 자동으로 생성된 자막 파일 쓰기 활성화
+        'subtitleslangs': ['ko', 'en'],  # 다운로드할 자막 언어 목록 (한국어 우선, 없으면 영어)
+        'skip_download': True,           # 동영상 자체는 다운로드하지 않고 자막만 다운로드
+        'outtmpl': '%(id)s.%(language)s.%(ext)s', # 다운로드될 파일 이름 템플릿 (temp_dir 안에서 상대 경로로 저장됨)
+        'quiet': False,                  # 콘솔 출력 활성화 (디버깅용)
+        'no_warnings': False,            # 경고 메시지 활성화 (디버깅용)
+        'extractor_args': {              # 특정 extractor (예: 유튜브)에 대한 추가 인자
+            'youtube': {'skip': ['dash']} # dash manifest 관련 오류 회피 시도 (유튜브 관련)
+        }
+        # 프록시가 필요한 경우, 'proxy': 'http://your.proxy.com:port' 형태로 여기에 추가됩니다.
+    }
+
+    if proxy_address:
+        ydl_opts['proxy'] = proxy_address
+        logger.info(f"yt-dlp에 프록시 적용: {proxy_address}")
+    else:
+        logger.info("yt-dlp에 프록시가 적용되지 않았습니다.")
+
+    temp_dir = "./temp_captions"
+    os.makedirs(temp_dir, exist_ok=True)
+    original_cwd = os.getcwd()
+
+    try:
+        with contextlib.chdir(temp_dir): # 임시 디렉토리로 작업 디렉토리 변경
+            # outtmpl은 현재 chdir된 디렉토리 내의 상대 경로로 지정
+            # yt-dlp가 파일을 temp_dir 안에 바로 생성하도록 함
+            ydl_opts['outtmpl'] = '%(id)s.%(ext)s' 
+            
+            logger.debug(f"yt-dlp 실행 전 현재 작업 디렉토리: {os.getcwd()}")
+            logger.debug(f"yt-dlp 옵션: {ydl_opts}")
+            
+            with YoutubeDL(ydl_opts) as ydl:
+                # download=True 설정으로 자막 다운로드 시도
+                # 비디오 ID만 전달해도 yt-dlp가 알아서 처리합니다.
+                info_dict = await asyncio.to_thread(ydl.extract_info, video_id, download=True)
+                
+            logger.debug(f"yt-dlp extract_info 결과 (자세한 정보는 debug_yt_dlp.log 파일 확인): {json.dumps(info_dict.get('requested_subtitles', 'No subtitles requested'), indent=2, ensure_ascii=False)}") 
+            
+            caption_file_path = None
+            
+            # 1. info_dict에서 직접 자막 파일 경로를 찾으려는 시도 (가장 정확)
+            # yt-dlp 0.0.12 버전 이상에서는 _download_lock이 반환됨. info_dict에서 직접 파일을 찾아야 함
+            if 'requested_subtitles' in info_dict and info_dict['requested_subtitles']:
+                for lang_code in ydl_opts['subtitleslangs']:
+                    if lang_code in info_dict['requested_subtitles']:
+                        sub_info = info_dict['requested_subtitles'][lang_code]
+                        # 'filepath' 키가 없거나 None일 수 있으므로 확인
+                        if 'filepath' in sub_info and sub_info['filepath']:
+                            # filepath는 이미 현재 작업 디렉토리(temp_dir) 기준으로 되어 있을 것
+                            caption_file_path = sub_info['filepath']
+                            logger.info(f"yt-dlp가 '{lang_code}' 자막 파일을 info_dict에서 찾았습니다: {caption_file_path}")
+                            break # 찾았으면 루프 종료
+            
+            # 2. info_dict에서 찾지 못했을 경우, 폴백으로 임시 디렉토리를 탐색
+            if not caption_file_path:
+                logger.debug(f"info_dict에서 자막 파일 경로를 찾지 못했습니다. 임시 디렉토리 스캔 시작.")
+                downloaded_files = [f for f in os.listdir('.') if f.startswith(video_id) and ('sub' in f or 'vtt' in f or 'json' in f or 'srt' in f)]
+                logger.debug(f"임시 디렉토리의 파일 목록: {downloaded_files}")
+                
+                # 한국어 자막 우선 검색 (vtt, srt, json 순)
+                for ext in ['vtt', 'srt', 'json']:
+                    ko_file = next((f for f in downloaded_files if f.endswith(f'.ko.{ext}')), None)
+                    if ko_file:
+                        caption_file_path = os.path.join(os.getcwd(), ko_file) # 현재 작업 디렉토리 기준으로 경로 조합
+                        logger.info(f"폴백: yt-dlp로 한국어 {ext.upper()} 자막 파일 '{ko_file}'을 다운로드했습니다.")
+                        break
+                
+                if not caption_file_path:
+                    # 한국어 없으면 첫 번째 사용 가능한 자막 찾기
+                    for ext in ['vtt', 'srt', 'json']:
+                        any_file = next((f for f in downloaded_files if f.endswith(f'.{ext}')), None)
+                        if any_file:
+                            caption_file_path = os.path.join(os.getcwd(), any_file) # 현재 작업 디렉토리 기준으로 경로 조합
+                            logger.warning(f"폴백: 한국어 자막이 없어 첫 번째 {ext.upper()} 자막 파일 '{any_file}'을 사용합니다.")
+                            break
+
+            # 3. 자막 파일이 찾아졌으면 파싱 시작
+            if caption_file_path and os.path.exists(caption_file_path):
+                # VTT, SRT, JSON 등 다양한 자막 파일 형식에 대한 파싱 로직 분기
+                if caption_file_path.endswith('.vtt'):
+                    with open(caption_file_path, 'r', encoding='utf-8') as f:
+                        vtt_content = f.read()
+                    
+                    # WEBVTT 파싱
+                    segments = vtt_content.split('\n\n')
+                    for segment in segments:
+                        if '-->' in segment: # 시간 정보 포함 세그먼트
+                            lines = segment.split('\n')
+                            time_str = lines[0].strip()
+                            text_content = ' '.join(lines[1:]).strip()
+                            
+                            try:
+                                # VTT 시간은 HH:MM:SS.ms 형태로 제공되므로, 밀리초를 float로 처리 후 정수로 변환
+                                start_time_parts = time_str.split(' --> ')[0].split(':')
+                                if len(start_time_parts) == 3: # HH:MM:SS.ms
+                                    hours = int(start_time_parts[0])
+                                    minutes = int(start_time_parts[1])
+                                    seconds = int(float(start_time_parts[2].split('.')[0]))
+                                elif len(start_time_parts) == 2: # MM:SS.ms
+                                    hours = 0
+                                    minutes = int(start_time_parts[0])
+                                    seconds = int(float(start_time_parts[1].split('.')[0]))
+                                else:
+                                    raise ValueError("Unsupported time format")
+
+                                # HH:MM:SS 포맷으로 맞춤
+                                if hours > 0:
+                                    timestamp_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
+                                else:
+                                    timestamp_str = f"{minutes:02d}:{seconds:02d}"
+                                    
+                                processed_chunks.append({
+                                    "text": text_content,
+                                    "timestamp": timestamp_str
+                                })
+                            except Exception as e:
+                                logger.warning(f"VTT 시간 파싱 오류: {time_str} - {e}")
+                    
+                    logger.info(f"yt-dlp로 VTT 자막 {len(processed_chunks)}개 청크 처리 완료.")
+                
+                elif caption_file_path.endswith('.json'):
+                    # JSON 자막 파싱 (yt-dlp가 가끔 JSON 포맷으로도 다운로드함)
+                    with open(caption_file_path, 'r', encoding='utf-8') as f:
+                        json_content = json.load(f)
+                    
+                    # yt-dlp의 JSON 자막 형식에 맞춰 파싱 (예시, 실제 구조는 info_dict를 통해 확인 필요)
+                    for entry in json_content:
+                        if 'start' in entry and 'text' in entry:
+                            total_seconds = int(entry['start'])
+                            hours = total_seconds // 3600
+                            minutes = (total_seconds % 3600) // 60
+                            seconds = total_seconds % 60
+
+                            if hours > 0:
+                                timestamp_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
+                            else:
+                                timestamp_str = f"{minutes:02d}:{seconds:02d}"
+                                
+                            processed_chunks.append({
+                                "text": entry['text'],
+                                "timestamp": timestamp_str
+                            })
+                    logger.info(f"yt-dlp로 JSON 자막 {len(processed_chunks)}개 청크 처리 완료.")
+
+                elif caption_file_path.endswith('.srt'):
+                    # SRT 자막 파싱 (간단한 예시, 실제로는 정규식 등으로 파싱)
+                    with open(caption_file_path, 'r', encoding='utf-8') as f:
+                        srt_content = f.read()
+
+                    # SRT 파싱 로직 (매우 간단한 예시, 실제론 srt 라이브러리 사용 권장)
+                    blocks = srt_content.strip().split('\n\n')
+                    for block in blocks:
+                        lines = block.split('\n')
+                        # 최소한 순번, 시간, 텍스트가 있어야 함
+                        if len(lines) >= 3 and '-->' in lines[1]:
+                            time_str = lines[1].strip()
+                            text_content = ' '.join(lines[2:]).strip()
+
+                            try:
+                                # SRT 시간은 HH:MM:SS,ms 형태로 제공
+                                start_time_parts = time_str.split(' --> ')[0].split(':')
+                                seconds_ms = float(start_time_parts[-1].replace(',', '.')) # 밀리초 처리
+                                seconds = int(seconds_ms)
+                                minutes = int(start_time_parts[-2])
+                                hours = int(start_time_parts[0]) if len(start_time_parts) == 3 else 0
+
+                                if hours > 0:
+                                    timestamp_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
+                                else:
+                                    timestamp_str = f"{minutes:02d}:{seconds:02d}"
+                                    
+                                processed_chunks.append({
+                                    "text": text_content,
+                                    "timestamp": timestamp_str
+                                })
+                            except Exception as e:
+                                logger.warning(f"SRT 시간 파싱 오류: {time_str} - {e}")
+                    logger.info(f"yt-dlp로 SRT 자막 {len(processed_chunks)}개 청크 처리 완료.")
+
+                else:
+                    logger.warning(f"지원하지 않는 자막 파일 형식입니다: {caption_file_path}")
+
+            else:
+                logger.warning(f"비디오 ID '{video_id}'에 대한 yt-dlp 자막 파일을 찾을 수 없습니다. 최종 시도 경로: {caption_file_path}")
+
+    except Exception as e:
+        logger.error(f"yt-dlp 자막 추출 중 예기치 않은 오류 발생 for video ID '{video_id}': {type(e).__name__}: {e}")
+        return []
+    finally:
+        if os.path.exists(temp_dir):
+            for file_name in os.listdir(temp_dir):
+                file_path = os.path.join(temp_dir, file_name)
+                try:
+                    if os.path.isfile(file_path):
+                        os.remove(file_path)
+                except Exception as e:
+                    logger.error(f"임시 파일 삭제 실패 {file_path}: {e}")
+            os.rmdir(temp_dir)
+            logger.info(f"임시 자막 디렉토리 '{temp_dir}' 정리 완료.")
+        os.chdir(original_cwd) # 원래 작업 디렉토리로 돌아옴
+        
+    return processed_chunks
+
+def parse_srt_content(srt_content: str) -> list[dict]:
+    chunks = []
+    # 간단한 SRT 파싱 로직 (yt-dlp의 SRT 출력은 더 간단할 수 있음)
+    # 실제 프로덕션에서는 더 견고한 SRT 파서 라이브러리를 사용하는 것이 좋습니다.
+    import re
+    # SRT 패턴: 1\n00:00:01,000 --> 00:00:03,000\nHello World\n\n
+    blocks = re.split(r'\n\s*\n', srt_content.strip())
+    for block in blocks:
+        lines = block.split('\n')
+        if len(lines) >= 3:
+            # 첫 번째 라인은 순번, 두 번째 라인은 시간, 나머지는 텍스트
+            time_str = lines[1]
+            text = " ".join(lines[2:]).strip()
+            
+            # 시간 형식: 00:00:01,000 --> 00:00:03,000
+            time_parts = time_str.split(' --> ')
+            if len(time_parts) == 2:
+                start_time = time_parts[0].replace(',', '.') # yt-dlp의 VTT 파서와 일관성을 위해 쉼표를 점으로 변경
+                chunks.append({"text": text, "timestamp": start_time})
+    return chunks
+
+
+def parse_vtt_content(vtt_content: str) -> list[dict]:
+    chunks = []
+    lines = vtt_content.split('\n')
+    i = 0
+    while i < len(lines):
+        line = lines[i].strip()
+        if '-->' in line:
+            # 시간 정보 라인
+            time_str = line.split(' ')[0] # 예: 00:00:01.000
+            # 다음 라인부터 텍스트 시작
+            text_lines = []
+            j = i + 1
+            while j < len(lines) and lines[j].strip() != '':
+                text_lines.append(lines[j].strip())
+                j += 1
+            text = ' '.join(text_lines)
+            if text:
+                chunks.append({"text": text, "timestamp": time_str})
+            i = j # 다음 자막 블록으로 이동
+        i += 1
+    return chunks
+
+def parse_json_content(json_content: dict) -> list[dict]:
+    chunks = []
+    for entry in json_content.get('events', []):
+        if 'segs' in entry:
+            text = "".join([seg.get('utf8', '') for seg in entry['segs']])
+            # JSON3 형식은 밀리초까지 표현된 시작 시간이 't' 키에 있을 수 있음
+            # yt-dlp가 생성하는 json3 파일 구조에 따라 유연하게 처리 필요
+            start_ms = entry.get('t', 0)
+            # 밀리초를 HH:MM:SS.mmm 형식으로 변환 (yt-dlp의 VTT timestamp와 유사하게)
+            total_seconds = start_ms / 1000
+            hours = int(total_seconds // 3600)
+            minutes = int((total_seconds % 3600) // 60)
+            seconds = total_seconds % 60
+            timestamp = f"{hours:02d}:{minutes:02d}:{seconds:06.3f}"
+            chunks.append({"text": text, "timestamp": timestamp})
+    return chunks
+
+async def process_youtube_video_data(video_url: str) -> list[dict] | None:
+    video_id = await get_youtube_video_id(video_url)
+    if not video_id:
+        logger.error(f"유효하지 않은 YouTube URL: {video_url}")
+        return None
+    
+    return await get_transcript_with_timestamps(video_id)

backend/dependencies.json

@@ -0,0 +1,15 @@
+// backend/dependencies.json
+{
+  "fastapi": "FastAPI (웹 프레임워크)",
+  "uvicorn": "Uvicorn (FastAPI 서버)",
+  "python-dotenv": "환경 변수 관리",
+  "youtube-transcript-api": "유튜브 자막 추출",
+  "langchain": "RAG 프레임워크 (LangChain)",
+  "langchain-community": "LangChain 커뮤니티 모듈 (문서 로더, 벡터스토어 등)",
+  "sentence-transformers": "임베딩 모델",
+  "chromadb": "벡터 데이터베이스 (경량)",
+  "transformers": "LLM 로드 (Hugging Face Transformers)",
+  "accelerate": "LLM 메모리 최적화",
+  "torch": "PyTorch (트랜스포머 라이브러리 의존성)",
+  "faiss-cpu": "FAISS (벡터 검색 라이브러리 - CPU 버전)"
+}

backend/requirements.txt

@@ -0,0 +1,136 @@
+accelerate==0.30.1
+aiohappyeyeballs==2.6.1
+aiohttp==3.12.13
+aiosignal==1.3.2
+annotated-types==0.7.0
+anyio==4.9.0
+asgiref==3.8.1
+attrs==25.3.0
+backoff==2.2.1
+bcrypt==4.3.0
+build==1.2.2.post1
+cachetools==5.5.2
+certifi==2025.6.15
+charset-normalizer==3.4.2
+chroma-hnswlib==0.7.3
+chromadb==0.5.3
+click==8.2.1
+coloredlogs==15.0.1
+dataclasses-json==0.6.7
+defusedxml==0.7.1
+distro==1.9.0
+dnspython==2.7.0
+durationpy==0.10
+email_validator==2.2.0
+faiss-cpu==1.11.0
+fastapi==0.111.0
+fastapi-cli==0.0.7
+filelock==3.18.0
+frozenlist==1.7.0
+fsspec==2025.5.1
+# Google API Client (YouTube Data API v3 사용을 위해 필요)
+google-api-python-client==2.138.0  # 현재 최신 안정 버전 (확인 필요)
+google-auth==2.40.3
+googleapis-common-protos==1.70.0
+grpcio==1.73.0
+greenlet==3.2.3
+h11==0.16.0
+hf-xet==1.1.3
+httpcore==1.0.9
+httptools==0.6.4
+httpx==0.28.1
+huggingface-hub==0.33.0
+humanfriendly==10.0
+idna==3.10
+importlib_metadata==8.7.0
+importlib_resources==6.5.2
+Jinja2==3.1.6
+joblib==1.5.1
+jsonpatch==1.33
+jsonpointer==3.0.0
+kubernetes==33.1.0
+langchain==0.2.5
+langchain-community==0.2.5
+langchain-core==0.2.43
+langchain-text-splitters==0.2.4
+langsmith==0.1.147
+loguru==0.7.3
+markdown-it-py==3.0.0
+MarkupSafe==3.0.2
+marshmallow==3.26.1
+mdurl==0.1.2
+mmh3==5.1.0
+mpmath==1.3.0
+multidict==6.4.4
+mypy_extensions==1.1.0
+networkx==3.5
+numpy==1.26.4
+oauthlib==3.2.2
+onnxruntime==1.22.0
+opentelemetry-api==1.34.1
+opentelemetry-exporter-otlp-proto-common==1.34.1
+opentelemetry-exporter-otlp-proto-grpc==1.34.1
+opentelemetry-instrumentation==0.55b1
+opentelemetry-instrumentation-asgi==0.55b1
+opentelemetry-instrumentation-fastapi==0.55b1
+opentelemetry-proto==1.34.1
+opentelemetry-sdk==1.34.1
+opentelemetry-semantic-conventions==0.55b1
+opentelemetry-util-http==0.55b1
+orjson==3.10.18
+overrides==7.7.0
+packaging==24.2
+pillow==11.2.1
+posthog==5.0.0
+propcache==0.3.2
+protobuf==5.29.5
+psutil==7.0.0
+pyasn1==0.6.1
+pyasn1_modules==0.4.2
+pydantic==2.11.7
+pydantic_core==2.33.2
+Pygments==2.19.1
+PyPika==0.48.9
+pyproject_hooks==1.2.0
+python-dateutil==2.9.0.post0
+python-dotenv==1.0.1
+python-multipart==0.0.20
+PyYAML==6.0.2
+regex==2024.11.6
+requests==2.32.4
+requests-oauthlib==2.0.0
+requests-toolbelt==1.0.0
+rich==14.0.0
+rich-toolkit==0.14.7
+rsa==4.9.1
+safetensors==0.5.3
+scikit-learn==1.7.0
+scipy==1.15.3
+sentence-transformers==2.7.0
+shellingham==1.5.4
+six==1.17.0
+sniffio==1.3.1
+SQLAlchemy==2.0.41
+starlette==0.37.2
+sympy==1.14.0
+tenacity==8.5.0
+threadpoolctl==3.6.0
+tokenizers==0.19.1
+torch==2.3.1
+tqdm==4.67.1
+transformers==4.41.2
+typer==0.16.0
+typing-inspect==0.9.0
+typing-inspection==0.4.1
+typing_extensions==4.14.0
+ujson==5.10.0
+urllib3==2.4.0
+uvicorn==0.30.1
+uvloop==0.21.0
+watchfiles==1.1.0
+websocket-client==1.8.0
+websockets==15.0.1
+wrapt==1.17.2
+yarl==1.20.1
+yt-dlp==2025.6.9
+zipp==3.23.0

frontend/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,24 @@
+# frontend
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

frontend/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

frontend/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.10.0",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

frontend/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

frontend/src/App.vue

@@ -0,0 +1,189 @@
+<template>
+  <div id="app">
+    <h1>YouTube RAG Explorer</h1>
+    <p>영상 URL과 찾고 싶은 내용을 입력해주세요.</p>
+
+    <div class="input-section">
+      <label for="videoUrl">YouTube 영상 URL:</label>
+      <input type="text" id="videoUrl" v-model="videoUrl" placeholder="예: https://www.youtube.com/watch?v=..." />
+    </div>
+
+    <div class="input-section">
+      <label for="query">찾을 내용 (쿼리):</label>
+      <input type="text" id="query" v-model="query" placeholder="예: RAG 기술의 장점은?" />
+    </div>
+
+    <button @click="processVideo" :disabled="loading">
+      {{ loading ? '처리 중...' : '영상 탐색 시작' }}
+    </button>
+
+    <div v-if="errorMessage" class="error-message">
+      {{ errorMessage }}
+    </div>
+
+    <div v-if="results.length > 0 && !loading" class="results-section">
+      <h2>검색 결과:</h2>
+      <div v-for="(result, index) in results" :key="index" class="result-item">
+        <p><strong>시간:</strong> <a :href="videoUrl + '&t=' + result.timestamp.replace(/:/g, 'm') + 's'" target="_blank">{{ result.timestamp }}</a></p>
+        <p><strong>내용:</strong> {{ result.text }}</p>
+      </div>
+    </div>
+    <div v-else-if="!loading && responseMessage" class="info-message">
+      {{ responseMessage }}
+    </div>
+  </div>
+</template>
+
+<script>
+import apiClient from './api'; // axios 인스턴스 import
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      videoUrl: '',
+      query: '',
+      loading: false,
+      results: [],
+      errorMessage: '',
+      responseMessage: ''
+    };
+  },
+  methods: {
+    async processVideo() {
+      this.errorMessage = '';
+      this.results = [];
+      this.responseMessage = '';
+      this.loading = true;
+
+      try {
+          const response = await apiClient.post(`/process_youtube_video`, {
+            video_url: this.videoUrl,
+            query: this.query
+        });
+
+        this.responseMessage = response.data.message;
+        if (response.data.results && response.data.results.length > 0) {
+          this.results = response.data.results;
+        } else {
+          this.responseMessage = response.data.message || "결과를 찾을 수 없습니다.";
+        }
+
+
+      } catch (error) {
+        console.error("API 호출 중 오류 발생:", error);
+        if (error.response) {
+          this.errorMessage = `오류: ${error.response.data.detail || error.response.statusText}`;
+        } else if (error.request) {
+          this.errorMessage = '서버 응답이 없습니다. 백엔드가 실행 중인지 확인하세요.';
+        } else {
+          this.errorMessage = '요청 설정 중 오류가 발생했습니다.';
+        }
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.input-section {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+input[type="text"] {
+  width: calc(100% - 20px);
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+button {
+  background-color: #42b983;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+button:hover:not(:disabled) {
+  background-color: #368a68;
+}
+
+button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.error-message {
+  color: red;
+  margin-top: 20px;
+  font-weight: bold;
+}
+
+.info-message {
+  color: #3498db;
+  margin-top: 20px;
+  font-style: italic;
+}
+
+.results-section {
+  margin-top: 30px;
+  text-align: left;
+  border-top: 1px solid #eee;
+  padding-top: 20px;
+}
+
+.results-section h2 {
+  text-align: center;
+  color: #333;
+}
+
+.result-item {
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.result-item p {
+  margin: 5px 0;
+}
+
+.result-item a {
+  color: #42b983;
+  text-decoration: none;
+}
+
+.result-item a:hover {
+  text-decoration: underline;
+}
+</style>

frontend/src/api.js

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+  baseURL: process.env.VUE_APP_API_BASE_URL || '/api',
+  headers: {
+    'Content-Type': 'application/json',
+  }
+});
+
+export default apiClient;

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

frontend/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import api from './api'
+
+const app = createApp(App)
+app.config.globalProperties.$api = api
+app.mount('#app')

frontend/vue.config.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true,
+  publicPath: '/'
+})

get-docker.sh

@@ -0,0 +1,694 @@
+#!/bin/sh
+set -e
+# Docker Engine for Linux installation script.
+#
+# This script is intended as a convenient way to configure docker's package
+# repositories and to install Docker Engine, This script is not recommended
+# for production environments. Before running this script, make yourself familiar
+# with potential risks and limitations, and refer to the installation manual
+# at https://docs.docker.com/engine/install/ for alternative installation methods.
+#
+# The script:
+#
+# - Requires `root` or `sudo` privileges to run.
+# - Attempts to detect your Linux distribution and version and configure your
+#   package management system for you.
+# - Doesn't allow you to customize most installation parameters.
+# - Installs dependencies and recommendations without asking for confirmation.
+# - Installs the latest stable release (by default) of Docker CLI, Docker Engine,
+#   Docker Buildx, Docker Compose, containerd, and runc. When using this script
+#   to provision a machine, this may result in unexpected major version upgrades
+#   of these packages. Always test upgrades in a test environment before
+#   deploying to your production systems.
+# - Isn't designed to upgrade an existing Docker installation. When using the
+#   script to update an existing installation, dependencies may not be updated
+#   to the expected version, resulting in outdated versions.
+#
+# Source code is available at https://github.com/docker/docker-install/
+#
+# Usage
+# ==============================================================================
+#
+# To install the latest stable versions of Docker CLI, Docker Engine, and their
+# dependencies:
+#
+# 1. download the script
+#
+#   $ curl -fsSL https://get.docker.com -o install-docker.sh
+#
+# 2. verify the script's content
+#
+#   $ cat install-docker.sh
+#
+# 3. run the script with --dry-run to verify the steps it executes
+#
+#   $ sh install-docker.sh --dry-run
+#
+# 4. run the script either as root, or using sudo to perform the installation.
+#
+#   $ sudo sh install-docker.sh
+#
+# Command-line options
+# ==============================================================================
+#
+# --version <VERSION>
+# Use the --version option to install a specific version, for example:
+#
+#   $ sudo sh install-docker.sh --version 23.0
+#
+# --channel <stable|test>
+#
+# Use the --channel option to install from an alternative installation channel.
+# The following example installs the latest versions from the "test" channel,
+# which includes pre-releases (alpha, beta, rc):
+#
+#   $ sudo sh install-docker.sh --channel test
+#
+# Alternatively, use the script at https://test.docker.com, which uses the test
+# channel as default.
+#
+# --mirror <Aliyun|AzureChinaCloud>
+#
+# Use the --mirror option to install from a mirror supported by this script.
+# Available mirrors are "Aliyun" (https://mirrors.aliyun.com/docker-ce), and
+# "AzureChinaCloud" (https://mirror.azure.cn/docker-ce), for example:
+#
+#   $ sudo sh install-docker.sh --mirror AzureChinaCloud
+#
+# ==============================================================================
+
+
+# Git commit from https://github.com/docker/docker-install when
+# the script was uploaded (Should only be modified by upload job):
+SCRIPT_COMMIT_SHA="53a22f61c0628e58e1d6680b49e82993d304b449"
+
+# strip "v" prefix if present
+VERSION="${VERSION#v}"
+
+# The channel to install from:
+#   * stable
+#   * test
+DEFAULT_CHANNEL_VALUE="stable"
+if [ -z "$CHANNEL" ]; then
+	CHANNEL=$DEFAULT_CHANNEL_VALUE
+fi
+
+DEFAULT_DOWNLOAD_URL="https://download.docker.com"
+if [ -z "$DOWNLOAD_URL" ]; then
+	DOWNLOAD_URL=$DEFAULT_DOWNLOAD_URL
+fi
+
+DEFAULT_REPO_FILE="docker-ce.repo"
+if [ -z "$REPO_FILE" ]; then
+	REPO_FILE="$DEFAULT_REPO_FILE"
+	# Automatically default to a staging repo fora
+	# a staging download url (download-stage.docker.com)
+	case "$DOWNLOAD_URL" in
+		*-stage*) REPO_FILE="docker-ce-staging.repo";;
+	esac
+fi
+
+mirror=''
+DRY_RUN=${DRY_RUN:-}
+while [ $# -gt 0 ]; do
+	case "$1" in
+		--channel)
+			CHANNEL="$2"
+			shift
+			;;
+		--dry-run)
+			DRY_RUN=1
+			;;
+		--mirror)
+			mirror="$2"
+			shift
+			;;
+		--version)
+			VERSION="${2#v}"
+			shift
+			;;
+		--*)
+			echo "Illegal option $1"
+			;;
+	esac
+	shift $(( $# > 0 ? 1 : 0 ))
+done
+
+case "$mirror" in
+	Aliyun)
+		DOWNLOAD_URL="https://mirrors.aliyun.com/docker-ce"
+		;;
+	AzureChinaCloud)
+		DOWNLOAD_URL="https://mirror.azure.cn/docker-ce"
+		;;
+	"")
+		;;
+	*)
+		>&2 echo "unknown mirror '$mirror': use either 'Aliyun', or 'AzureChinaCloud'."
+		exit 1
+		;;
+esac
+
+case "$CHANNEL" in
+	stable|test)
+		;;
+	*)
+		>&2 echo "unknown CHANNEL '$CHANNEL': use either stable or test."
+		exit 1
+		;;
+esac
+
+command_exists() {
+	command -v "$@" > /dev/null 2>&1
+}
+
+# version_gte checks if the version specified in $VERSION is at least the given
+# SemVer (Maj.Minor[.Patch]), or CalVer (YY.MM) version.It returns 0 (success)
+# if $VERSION is either unset (=latest) or newer or equal than the specified
+# version, or returns 1 (fail) otherwise.
+#
+# examples:
+#
+# VERSION=23.0
+# version_gte 23.0  // 0 (success)
+# version_gte 20.10 // 0 (success)
+# version_gte 19.03 // 0 (success)
+# version_gte 26.1  // 1 (fail)
+version_gte() {
+	if [ -z "$VERSION" ]; then
+			return 0
+	fi
+	version_compare "$VERSION" "$1"
+}
+
+# version_compare compares two version strings (either SemVer (Major.Minor.Path),
+# or CalVer (YY.MM) version strings. It returns 0 (success) if version A is newer
+# or equal than version B, or 1 (fail) otherwise. Patch releases and pre-release
+# (-alpha/-beta) are not taken into account
+#
+# examples:
+#
+# version_compare 23.0.0 20.10 // 0 (success)
+# version_compare 23.0 20.10   // 0 (success)
+# version_compare 20.10 19.03  // 0 (success)
+# version_compare 20.10 20.10  // 0 (success)
+# version_compare 19.03 20.10  // 1 (fail)
+version_compare() (
+	set +x
+
+	yy_a="$(echo "$1" | cut -d'.' -f1)"
+	yy_b="$(echo "$2" | cut -d'.' -f1)"
+	if [ "$yy_a" -lt "$yy_b" ]; then
+		return 1
+	fi
+	if [ "$yy_a" -gt "$yy_b" ]; then
+		return 0
+	fi
+	mm_a="$(echo "$1" | cut -d'.' -f2)"
+	mm_b="$(echo "$2" | cut -d'.' -f2)"
+
+	# trim leading zeros to accommodate CalVer
+	mm_a="${mm_a#0}"
+	mm_b="${mm_b#0}"
+
+	if [ "${mm_a:-0}" -lt "${mm_b:-0}" ]; then
+		return 1
+	fi
+
+	return 0
+)
+
+is_dry_run() {
+	if [ -z "$DRY_RUN" ]; then
+		return 1
+	else
+		return 0
+	fi
+}
+
+is_wsl() {
+	case "$(uname -r)" in
+	*microsoft* ) true ;; # WSL 2
+	*Microsoft* ) true ;; # WSL 1
+	* ) false;;
+	esac
+}
+
+is_darwin() {
+	case "$(uname -s)" in
+	*darwin* ) true ;;
+	*Darwin* ) true ;;
+	* ) false;;
+	esac
+}
+
+deprecation_notice() {
+	distro=$1
+	distro_version=$2
+	echo
+	printf "\033[91;1mDEPRECATION WARNING\033[0m\n"
+	printf "    This Linux distribution (\033[1m%s %s\033[0m) reached end-of-life and is no longer supported by this script.\n" "$distro" "$distro_version"
+	echo   "    No updates or security fixes will be released for this distribution, and users are recommended"
+	echo   "    to upgrade to a currently maintained version of $distro."
+	echo
+	printf   "Press \033[1mCtrl+C\033[0m now to abort this script, or wait for the installation to continue."
+	echo
+	sleep 10
+}
+
+get_distribution() {
+	lsb_dist=""
+	# Every system that we officially support has /etc/os-release
+	if [ -r /etc/os-release ]; then
+		lsb_dist="$(. /etc/os-release && echo "$ID")"
+	fi
+	# Returning an empty string here should be alright since the
+	# case statements don't act unless you provide an actual value
+	echo "$lsb_dist"
+}
+
+echo_docker_as_nonroot() {
+	if is_dry_run; then
+		return
+	fi
+	if command_exists docker && [ -e /var/run/docker.sock ]; then
+		(
+			set -x
+			$sh_c 'docker version'
+		) || true
+	fi
+
+	# intentionally mixed spaces and tabs here -- tabs are stripped by "<<-EOF", spaces are kept in the output
+	echo
+	echo "================================================================================"
+	echo
+	if version_gte "20.10"; then
+		echo "To run Docker as a non-privileged user, consider setting up the"
+		echo "Docker daemon in rootless mode for your user:"
+		echo
+		echo "    dockerd-rootless-setuptool.sh install"
+		echo
+		echo "Visit https://docs.docker.com/go/rootless/ to learn about rootless mode."
+		echo
+	fi
+	echo
+	echo "To run the Docker daemon as a fully privileged service, but granting non-root"
+	echo "users access, refer to https://docs.docker.com/go/daemon-access/"
+	echo
+	echo "WARNING: Access to the remote API on a privileged Docker daemon is equivalent"
+	echo "         to root access on the host. Refer to the 'Docker daemon attack surface'"
+	echo "         documentation for details: https://docs.docker.com/go/attack-surface/"
+	echo
+	echo "================================================================================"
+	echo
+}
+
+# Check if this is a forked Linux distro
+check_forked() {
+
+	# Check for lsb_release command existence, it usually exists in forked distros
+	if command_exists lsb_release; then
+		# Check if the `-u` option is supported
+		set +e
+		lsb_release -a -u > /dev/null 2>&1
+		lsb_release_exit_code=$?
+		set -e
+
+		# Check if the command has exited successfully, it means we're in a forked distro
+		if [ "$lsb_release_exit_code" = "0" ]; then
+			# Print info about current distro
+			cat <<-EOF
+			You're using '$lsb_dist' version '$dist_version'.
+			EOF
+
+			# Get the upstream release info
+			lsb_dist=$(lsb_release -a -u 2>&1 | tr '[:upper:]' '[:lower:]' | grep -E 'id' | cut -d ':' -f 2 | tr -d '[:space:]')
+			dist_version=$(lsb_release -a -u 2>&1 | tr '[:upper:]' '[:lower:]' | grep -E 'codename' | cut -d ':' -f 2 | tr -d '[:space:]')
+
+			# Print info about upstream distro
+			cat <<-EOF
+			Upstream release is '$lsb_dist' version '$dist_version'.
+			EOF
+		else
+			if [ -r /etc/debian_version ] && [ "$lsb_dist" != "ubuntu" ] && [ "$lsb_dist" != "raspbian" ]; then
+				if [ "$lsb_dist" = "osmc" ]; then
+					# OSMC runs Raspbian
+					lsb_dist=raspbian
+				else
+					# We're Debian and don't even know it!
+					lsb_dist=debian
+				fi
+				dist_version="$(sed 's/\/.*//' /etc/debian_version | sed 's/\..*//')"
+				case "$dist_version" in
+					13)
+						dist_version="trixie"
+					;;
+					12)
+						dist_version="bookworm"
+					;;
+					11)
+						dist_version="bullseye"
+					;;
+					10)
+						dist_version="buster"
+					;;
+					9)
+						dist_version="stretch"
+					;;
+					8)
+						dist_version="jessie"
+					;;
+				esac
+			fi
+		fi
+	fi
+}
+
+do_install() {
+	echo "# Executing docker install script, commit: $SCRIPT_COMMIT_SHA"
+
+	if command_exists docker; then
+		cat >&2 <<-'EOF'
+			Warning: the "docker" command appears to already exist on this system.
+
+			If you already have Docker installed, this script can cause trouble, which is
+			why we're displaying this warning and provide the opportunity to cancel the
+			installation.
+
+			If you installed the current Docker package using this script and are using it
+			again to update Docker, you can ignore this message, but be aware that the
+			script resets any custom changes in the deb and rpm repo configuration
+			files to match the parameters passed to the script.
+
+			You may press Ctrl+C now to abort this script.
+		EOF
+		( set -x; sleep 20 )
+	fi
+
+	user="$(id -un 2>/dev/null || true)"
+
+	sh_c='sh -c'
+	if [ "$user" != 'root' ]; then
+		if command_exists sudo; then
+			sh_c='sudo -E sh -c'
+		elif command_exists su; then
+			sh_c='su -c'
+		else
+			cat >&2 <<-'EOF'
+			Error: this installer needs the ability to run commands as root.
+			We are unable to find either "sudo" or "su" available to make this happen.
+			EOF
+			exit 1
+		fi
+	fi
+
+	if is_dry_run; then
+		sh_c="echo"
+	fi
+
+	# perform some very rudimentary platform detection
+	lsb_dist=$( get_distribution )
+	lsb_dist="$(echo "$lsb_dist" | tr '[:upper:]' '[:lower:]')"
+
+	if is_wsl; then
+		echo
+		echo "WSL DETECTED: We recommend using Docker Desktop for Windows."
+		echo "Please get Docker Desktop from https://www.docker.com/products/docker-desktop/"
+		echo
+		cat >&2 <<-'EOF'
+
+			You may press Ctrl+C now to abort this script.
+		EOF
+		( set -x; sleep 20 )
+	fi
+
+	case "$lsb_dist" in
+
+		ubuntu)
+			if command_exists lsb_release; then
+				dist_version="$(lsb_release --codename | cut -f2)"
+			fi
+			if [ -z "$dist_version" ] && [ -r /etc/lsb-release ]; then
+				dist_version="$(. /etc/lsb-release && echo "$DISTRIB_CODENAME")"
+			fi
+		;;
+
+		debian|raspbian)
+			dist_version="$(sed 's/\/.*//' /etc/debian_version | sed 's/\..*//')"
+			case "$dist_version" in
+				13)
+					dist_version="trixie"
+				;;
+				12)
+					dist_version="bookworm"
+				;;
+				11)
+					dist_version="bullseye"
+				;;
+				10)
+					dist_version="buster"
+				;;
+				9)
+					dist_version="stretch"
+				;;
+				8)
+					dist_version="jessie"
+				;;
+			esac
+		;;
+
+		centos|rhel)
+			if [ -z "$dist_version" ] && [ -r /etc/os-release ]; then
+				dist_version="$(. /etc/os-release && echo "$VERSION_ID")"
+			fi
+		;;
+
+		*)
+			if command_exists lsb_release; then
+				dist_version="$(lsb_release --release | cut -f2)"
+			fi
+			if [ -z "$dist_version" ] && [ -r /etc/os-release ]; then
+				dist_version="$(. /etc/os-release && echo "$VERSION_ID")"
+			fi
+		;;
+
+	esac
+
+	# Check if this is a forked Linux distro
+	check_forked
+
+	# Print deprecation warnings for distro versions that recently reached EOL,
+	# but may still be commonly used (especially LTS versions).
+	case "$lsb_dist.$dist_version" in
+		centos.8|centos.7|rhel.7)
+			deprecation_notice "$lsb_dist" "$dist_version"
+			;;
+		debian.buster|debian.stretch|debian.jessie)
+			deprecation_notice "$lsb_dist" "$dist_version"
+			;;
+		raspbian.buster|raspbian.stretch|raspbian.jessie)
+			deprecation_notice "$lsb_dist" "$dist_version"
+			;;
+		ubuntu.bionic|ubuntu.xenial|ubuntu.trusty)
+			deprecation_notice "$lsb_dist" "$dist_version"
+			;;
+		ubuntu.mantic|ubuntu.lunar|ubuntu.kinetic|ubuntu.impish|ubuntu.hirsute|ubuntu.groovy|ubuntu.eoan|ubuntu.disco|ubuntu.cosmic)
+			deprecation_notice "$lsb_dist" "$dist_version"
+			;;
+		fedora.*)
+			if [ "$dist_version" -lt 40 ]; then
+				deprecation_notice "$lsb_dist" "$dist_version"
+			fi
+			;;
+	esac
+
+	# Run setup for each distro accordingly
+	case "$lsb_dist" in
+		ubuntu|debian|raspbian)
+			pre_reqs="ca-certificates curl"
+			apt_repo="deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] $DOWNLOAD_URL/linux/$lsb_dist $dist_version $CHANNEL"
+			(
+				if ! is_dry_run; then
+					set -x
+				fi
+				$sh_c 'apt-get -qq update >/dev/null'
+				$sh_c "DEBIAN_FRONTEND=noninteractive apt-get -y -qq install $pre_reqs >/dev/null"
+				$sh_c 'install -m 0755 -d /etc/apt/keyrings'
+				$sh_c "curl -fsSL \"$DOWNLOAD_URL/linux/$lsb_dist/gpg\" -o /etc/apt/keyrings/docker.asc"
+				$sh_c "chmod a+r /etc/apt/keyrings/docker.asc"
+				$sh_c "echo \"$apt_repo\" > /etc/apt/sources.list.d/docker.list"
+				$sh_c 'apt-get -qq update >/dev/null'
+			)
+			pkg_version=""
+			if [ -n "$VERSION" ]; then
+				if is_dry_run; then
+					echo "# WARNING: VERSION pinning is not supported in DRY_RUN"
+				else
+					# Will work for incomplete versions IE (17.12), but may not actually grab the "latest" if in the test channel
+					pkg_pattern="$(echo "$VERSION" | sed 's/-ce-/~ce~.*/g' | sed 's/-/.*/g')"
+					search_command="apt-cache madison docker-ce | grep '$pkg_pattern' | head -1 | awk '{\$1=\$1};1' | cut -d' ' -f 3"
+					pkg_version="$($sh_c "$search_command")"
+					echo "INFO: Searching repository for VERSION '$VERSION'"
+					echo "INFO: $search_command"
+					if [ -z "$pkg_version" ]; then
+						echo
+						echo "ERROR: '$VERSION' not found amongst apt-cache madison results"
+						echo
+						exit 1
+					fi
+					if version_gte "18.09"; then
+							search_command="apt-cache madison docker-ce-cli | grep '$pkg_pattern' | head -1 | awk '{\$1=\$1};1' | cut -d' ' -f 3"
+							echo "INFO: $search_command"
+							cli_pkg_version="=$($sh_c "$search_command")"
+					fi
+					pkg_version="=$pkg_version"
+				fi
+			fi
+			(
+				pkgs="docker-ce${pkg_version%=}"
+				if version_gte "18.09"; then
+						# older versions didn't ship the cli and containerd as separate packages
+						pkgs="$pkgs docker-ce-cli${cli_pkg_version%=} containerd.io"
+				fi
+				if version_gte "20.10"; then
+						pkgs="$pkgs docker-compose-plugin docker-ce-rootless-extras$pkg_version"
+				fi
+				if version_gte "23.0"; then
+						pkgs="$pkgs docker-buildx-plugin"
+				fi
+				if ! is_dry_run; then
+					set -x
+				fi
+				$sh_c "DEBIAN_FRONTEND=noninteractive apt-get -y -qq install $pkgs >/dev/null"
+			)
+			echo_docker_as_nonroot
+			exit 0
+			;;
+		centos|fedora|rhel)
+			if [ "$(uname -m)" = "s390x" ]; then
+				echo "Effective v27.5, please consult RHEL distro statement for s390x support."
+				exit 1
+			fi
+			repo_file_url="$DOWNLOAD_URL/linux/$lsb_dist/$REPO_FILE"
+			(
+				if ! is_dry_run; then
+					set -x
+				fi
+				if command_exists dnf5; then
+					$sh_c "dnf -y -q --setopt=install_weak_deps=False install dnf-plugins-core"
+					$sh_c "dnf5 config-manager addrepo --overwrite --save-filename=docker-ce.repo --from-repofile='$repo_file_url'"
+
+					if [ "$CHANNEL" != "stable" ]; then
+						$sh_c "dnf5 config-manager setopt \"docker-ce-*.enabled=0\""
+						$sh_c "dnf5 config-manager setopt \"docker-ce-$CHANNEL.enabled=1\""
+					fi
+					$sh_c "dnf makecache"
+				elif command_exists dnf; then
+					$sh_c "dnf -y -q --setopt=install_weak_deps=False install dnf-plugins-core"
+					$sh_c "rm -f /etc/yum.repos.d/docker-ce.repo  /etc/yum.repos.d/docker-ce-staging.repo"
+					$sh_c "dnf config-manager --add-repo $repo_file_url"
+
+					if [ "$CHANNEL" != "stable" ]; then
+						$sh_c "dnf config-manager --set-disabled \"docker-ce-*\""
+						$sh_c "dnf config-manager --set-enabled \"docker-ce-$CHANNEL\""
+					fi
+					$sh_c "dnf makecache"
+				else
+					$sh_c "yum -y -q install yum-utils"
+					$sh_c "rm -f /etc/yum.repos.d/docker-ce.repo  /etc/yum.repos.d/docker-ce-staging.repo"
+					$sh_c "yum-config-manager --add-repo $repo_file_url"
+
+					if [ "$CHANNEL" != "stable" ]; then
+						$sh_c "yum-config-manager --disable \"docker-ce-*\""
+						$sh_c "yum-config-manager --enable \"docker-ce-$CHANNEL\""
+					fi
+					$sh_c "yum makecache"
+				fi
+			)
+			pkg_version=""
+			if command_exists dnf; then
+				pkg_manager="dnf"
+				pkg_manager_flags="-y -q --best"
+			else
+				pkg_manager="yum"
+				pkg_manager_flags="-y -q"
+			fi
+			if [ -n "$VERSION" ]; then
+				if is_dry_run; then
+					echo "# WARNING: VERSION pinning is not supported in DRY_RUN"
+				else
+					if [ "$lsb_dist" = "fedora" ]; then
+						pkg_suffix="fc$dist_version"
+					else
+						pkg_suffix="el"
+					fi
+					pkg_pattern="$(echo "$VERSION" | sed 's/-ce-/\\\\.ce.*/g' | sed 's/-/.*/g').*$pkg_suffix"
+					search_command="$pkg_manager list --showduplicates docker-ce | grep '$pkg_pattern' | tail -1 | awk '{print \$2}'"
+					pkg_version="$($sh_c "$search_command")"
+					echo "INFO: Searching repository for VERSION '$VERSION'"
+					echo "INFO: $search_command"
+					if [ -z "$pkg_version" ]; then
+						echo
+						echo "ERROR: '$VERSION' not found amongst $pkg_manager list results"
+						echo
+						exit 1
+					fi
+					if version_gte "18.09"; then
+						# older versions don't support a cli package
+						search_command="$pkg_manager list --showduplicates docker-ce-cli | grep '$pkg_pattern' | tail -1 | awk '{print \$2}'"
+						cli_pkg_version="$($sh_c "$search_command" | cut -d':' -f 2)"
+					fi
+					# Cut out the epoch and prefix with a '-'
+					pkg_version="-$(echo "$pkg_version" | cut -d':' -f 2)"
+				fi
+			fi
+			(
+				pkgs="docker-ce$pkg_version"
+				if version_gte "18.09"; then
+					# older versions didn't ship the cli and containerd as separate packages
+					if [ -n "$cli_pkg_version" ]; then
+						pkgs="$pkgs docker-ce-cli-$cli_pkg_version containerd.io"
+					else
+						pkgs="$pkgs docker-ce-cli containerd.io"
+					fi
+				fi
+				if version_gte "20.10"; then
+					pkgs="$pkgs docker-compose-plugin docker-ce-rootless-extras$pkg_version"
+				fi
+				if version_gte "23.0"; then
+						pkgs="$pkgs docker-buildx-plugin"
+				fi
+				if ! is_dry_run; then
+					set -x
+				fi
+				$sh_c "$pkg_manager $pkg_manager_flags install $pkgs"
+			)
+			echo_docker_as_nonroot
+			exit 0
+			;;
+		sles)
+			echo "Effective v27.5, please consult SLES distro statement for s390x support."
+			exit 1
+			;;
+		*)
+			if [ -z "$lsb_dist" ]; then
+				if is_darwin; then
+					echo
+					echo "ERROR: Unsupported operating system 'macOS'"
+					echo "Please get Docker Desktop from https://www.docker.com/products/docker-desktop"
+					echo
+					exit 1
+				fi
+			fi
+			echo
+			echo "ERROR: Unsupported distribution '$lsb_dist'"
+			echo
+			exit 1
+			;;
+	esac
+	exit 1
+}
+
+# wrapped up in a function so that we have some protection against only getting
+# half the file during "curl | sh"
+do_install

nginx.conf

@@ -0,0 +1,66 @@
+# nginx.conf
+
+worker_processes auto;
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  65;
+
+    server {
+        listen 8000; # 컨테이너 내부에서 8000번 포트로 수신
+
+        # Vue.js 정적 파일 서빙
+        location / {
+            root   /usr/share/nginx/html; # Vue.js 빌드 결과물이 복사될 경로
+            index  index.html index.htm;
+            try_files $uri $uri/ /index.html; # Vue Router history mode 지원
+        }
+
+        # FastAPI 백엔드 API로 프록시 (FastAPI는 컨테이너 내부에서 8000번 포트로 실행됩니다)
+        # Nginx가 FastAPI 뒤에 있으므로, FastAPI가 8000번 포트로 들어오는 요청을 받습니다.
+        # Vue.js에서 /api/v1/process_youtube_video 로 요청하면, 백엔드로 전달됩니다.
+        # 주의: 여기서는 간단하게 /api 경로로 들어오는 모든 요청을 백엔드로 프록시합니다.
+        # 실제 앱에서는 FastAPI가 동일한 8000번 포트에서 Nginx 없이 직접 실행되거나,
+        # Nginx가 다른 포트로 들어오는 요청을 백엔드 포트(예: 8001)로 프록시하는 형태가 될 수 있습니다.
+        # 여기서는 Nginx가 Vue 정적 파일을 서빙하고, 백엔드는 Nginx를 통하지 않고
+        # 직접 8000번 포트에서 실행될 것이므로, 이 proxy_pass 부분은 현재 필요 없습니다.
+        # (Uvicorn이 직접 8000번 포트를 사용하고 Nginx는 다른 포트를 사용하는 경우의 예시)
+        # location /api/ {
+        #     proxy_pass http://localhost:8000; # FastAPI가 8000번 포트에서 실행 중이라고 가정
+        #     proxy_set_header Host $host;
+        #     proxy_set_header X-Real-IP $remote_addr;
+        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        #     proxy_set_header X-Forwarded-Proto $scheme;
+        # }
+
+        # 하지만, 허깅페이스 스페이스 Dockerfile 구성은 보통 Uvicorn이 직접 8000번 포트를 리슨합니다.
+        # Vue 앱은 빌드되어 /usr/share/nginx/html 에 있고, Nginx는 그 정적 파일만 서빙합니다.
+        # API 호출은 Vue 앱에서 직접 Uvicorn으로 이루어집니다 (동일 포트).
+        # 따라서 위 proxy_pass 설정은 이 경우 필요 없습니다.
+        # Dockerfile에서 Nginx를 사용하지 않고 Uvicorn이 Vue 앱의 정적 파일까지 서빙하는 경우가 더 흔합니다.
+
+        # --- 수정: 허깅페이스 스페이스 Docker 환경에 맞게 Nginx 역할 최소화 ---
+        # 허깅페이스 스페이스는 Docker 컨테이너의 8000번 포트를 외부로 노출합니다.
+        # 일반적으로 Uvicorn(FastAPI)이 이 8000번 포트를 직접 리슨하고,
+        # Vue.js 빌드 결과물은 Uvicorn의 Starlette StaticFiles 기능을 통해 서빙하거나,
+        # Nginx를 별도로 띄워 정적 파일만 서빙하고 API는 직접 Uvicorn으로 보내는 방식입니다.
+        # 여기서는 Uvicorn이 8000번 포트를 리슨하고, Nginx는 별도의 포트에서 정적 파일만 서빙하는
+        # 복잡한 구성을 피하고, Uvicorn이 모든 것을 처리하도록 구성하는 것이 더 간단합니다.
+
+        # 잠시 보류하고, 다음 start.sh 스크립트와 함께 설명하겠습니다.
+        # Nginx를 사용하지 않는 것이 더 일반적입니다.
+
+        # 임시로 이 부분은 주석 처리합니다.
+        # location /api/ {
+        #     proxy_pass http://127.0.0.1:8000;
+        #     proxy_set_header Host $host;
+        #     proxy_set_header X-Real-IP $remote_addr;
+        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        # }
+    }
+}