영상 임베딩 기능 추가

backend/app/youtube_parser.py

@@ -17,27 +17,21 @@ 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}"
-)
+# 콘솔에 INFO 레벨 이상 로그 출력
+logger.add(sys.stderr, level="INFO") 
 # --- Loguru 설정 끝 ---
 
-
+def validate_youtube_url(url):
+    ydl_opts = {
+        'quiet': True
+    }
+    try:
+        with YoutubeDL(ydl_opts) as ydl:
+            ydl.extract_info(url, download=False)
+        return True
+    except:
+        return False
+        
 async def get_youtube_video_id(url: str) -> str | None:
     """
     유튜브 URL에서 비디오 ID를 추출합니다.

backend/dependencies.json

@@ -1,15 +0,0 @@
-// 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

@@ -1,136 +1,11 @@
-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
+loguru==0.7.3
+python-dotenv==1.0.1
+requests==2.32.3
+sentence-transformers==3.2.1
+faiss-cpu==1.9.0
+numpy==1.26.4
+pydantic==2.9.2
+torch==2.6.0

frontend/src/App.vue

@@ -1,11 +1,23 @@
 <template>
   <div id="app">
-    <h1>YouTube RAG Explorer</h1>
+    <h1>YouTube Transcript Extraction</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=..." />
+      <input type="text" id="videoUrl" v-model="videoUrl" placeholder="예: https://www.youtube.com/watch?v=..." @input="updateVideoEmbed" />
+    </div>
+
+    <!-- 유튜브 영상 임베딩 -->
+    <div v-if="videoEmbedUrl" class="video-embed">
+      <iframe
+        :src="videoEmbedUrl"
+        width="100%"
+        height="400"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
     </div>
 
     <div class="input-section">
@@ -46,10 +58,26 @@ export default {
       loading: false,
       results: [],
       errorMessage: '',
-      responseMessage: ''
+      responseMessage: '',
+      videoEmbedUrl: ''
     };
   },
   methods: {
+    // 유튜브 비디오 ID 추출 및 임베딩 URL 저장
+    updateVideoEmbed() {
+      this.videoEmbedUrl = '';
+      this.errorMessage = '';
+      if (!this.videoUrl) return;
+      
+      // 유튜브 URL에서 비디오 ID 추출
+      const regex = /(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+      const match = this.videoUrl.match(regex);
+      if (match && match[1]) {
+        this.videoEmbedUrl = `https://www.youtube.com/embed/${match[1]}`;
+      } else{
+        this.errorMessage = '유요한 유튜브 URL을 입력해주세요.';
+      }
+    },
     async processVideo() {
       this.errorMessage = '';
       this.results = [];
@@ -68,8 +96,6 @@ export default {
         } else {
           this.responseMessage = response.data.message || "결과를 찾을 수 없습니다.";
         }
-
-
       } catch (error) {
         console.error("API 호출 중 오류 발생:", error);
         if (error.response) {
@@ -186,4 +212,22 @@ button:disabled {
 .result-item a:hover {
   text-decoration: underline;
 }
+
+.video-embed{
+  margin: 20px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+
+.video-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>