LLM추가 및 템플릿 개선, (프록시는 미구현)

Dockerfile

@@ -1,50 +1,74 @@
 # --- Stage 1: Frontend Build ---
-FROM node:20-slim as frontend-builder
+    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"]
+    WORKDIR /app/frontend
+    
+    # package.json 및 package-lock.json 복사
+    COPY frontend/package*.json ./
+    
+    # 의존성 설치
+    RUN npm install
+    
+    # 나머지 프론트엔드 코드 복사
+    COPY frontend/ .
+    
+    # 프론트엔드 빌드 (Vue CLI 프로젝트의 경우 'npm run build'가 적합)
+    RUN npm run build
+    
+    
+    # --- Stage 2: Backend and Combined Serving via FastAPI (Uvicorn) ---
+    FROM python:3.11-slim-bookworm
+    
+    WORKDIR /app
+    
+    # 시스템 패키지 업데이트 및 build-essential (Python 패키지 빌드용), curl, git 설치
+    # Ollama 설치 스크립트가 필요 없으므로 bash는 제거 가능하지만, 다른 용도로 필요할 수 있어 유지합니다.
+    RUN apt-get update && apt-get install -y --no-install-recommends \
+        build-essential \
+        curl \
+        git \
+        bash \
+        && 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 캐시 디렉토리 설정 (모델이 직접 다운로드되지 않으므로 필요 없을 수 있지만, 안전을 위해 유지)
+    ENV TRANSFORMERS_CACHE="/tmp/hf_cache"
+    ENV HF_HOME="/tmp/hf_cache" 
+    
+    # ✨ Ollama 설치 및 모델 다운로드 단계 제거 ✨
+    # 이 부분은 Hugging Face Spaces 환경에서 관리됩니다.
+    # RUN curl -fsSL https://ollama.com/install.sh | sh
+    # RUN sh -c "ollama serve & \
+    #     ATTEMPTS=0; \
+    #     while ! curl -s http://localhost:11434 > /dev/null && ATTEMPTS < 30; do \
+    #         ATTEMPTS=$((ATTEMPTS+1)); \
+    #         echo 'Waiting for Ollama server to start... (Attempt '$ATTEMPTS'/30)'; \
+    #         sleep 2; \
+    #     done; \
+    #     if [ $ATTEMPTS -eq 30 ]; then \
+    #         echo 'Ollama server did not start in time. Exiting.'; \
+    #         exit 1; \
+    #     fi; \
+    #     echo 'Ollama server started. Pulling model...'; \
+    #     ollama pull hf.co/DevQuasar/naver-hyperclovax.HyperCLOVAX-SEED-Text-Instruct-0.5B-GGUF:F16"
+    
+    # 프론트엔드 빌드 결과물을 백엔드 앱이 접근할 수 있는 경로로 복사합니다.
+    # /app/static 폴더를 만들고 그 안에 Vue.js 빌드 결과물을 넣습니다.
+    RUN mkdir -p /app/static
+    COPY --from=frontend-builder /app/frontend/dist /app/static
+    
+    # 최종 실행 명령어
+    # 애플리케이션 포트 설정 (허깅페이스 스페이스는 7860번 포트를 사용)
+    EXPOSE 7860
+    
+    # CMD를 수정하여 Uvicorn만 실행합니다.
+    # Ollama 서버는 Hugging Face Spaces 환경에서 별도로 관리됩니다.
+    # 백엔드 main.py의 `OLLAMA_API_BASE_URL` 환경 변수가 `http://127.0.0.1:11434`로 설정되어 있는지 확인하세요.
+    # (Hugging Face Spaces에서 Ollama SDK를 사용하면 보통 이 주소로 접근 가능합니다.)
+    CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "${PORT:-7860}", "--app-dir", "backend/app"]

backend/app/main.py

@@ -1,10 +1,11 @@
-# backend/app/main.py
+# ./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
+import httpx
 
 from youtube_parser import process_youtube_video_data
 from rag_core import perform_rag_query
@@ -31,15 +32,48 @@ 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"}
+# OLLAMA_API_BASE_URL 환경 변수 설정
+OLLAMA_API_BASE_URL = os.getenv("OLLAMA_API_BASE_URL", "http://127.0.0.1:11434")
+
+async def generate_answer_with_ollama(model_name: str, prompt: str) -> str:
+    """
+    Ollama 서버에 질의하여 답변을 생성합니다.
+    """
+    url = f"{OLLAMA_API_BASE_URL}/api/generate"
+    headers = {"Content-Type": "application/json"}
+    data = {
+        "model": model_name,
+        "prompt": prompt,
+        "stream": False # 스트리밍을 사용하지 않고 한 번에 답변을 받습니다.
+    }
+    print(f"INFO: Ollama API 호출 시작. 모델: {model_name}")
+    print(f"INFO: 프롬프트 미리보기: {prompt[:200]}...")
+
+    try:
+        async with httpx.AsyncClient(timeout=600.0) as client:
+            response = await client.post(url, headers=headers, json=data)
+            response.raise_for_status()
+            
+            response_data = response.json()
+            full_response = response_data.get("response", "").strip()
+            return full_response
+    except httpx.HTTPStatusError as e:
+        print(f"ERROR: Ollama API 호출 실패: {e}")
+        raise HTTPException(status_code=500, detail="Ollama API 호출 실패")
+    except httpx.RequestError as e:
+        print(f"ERROR: 네트워크 오류: {e}")
+        raise HTTPException(status_code=500, detail="네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.")
+    except Exception as e:
+        print(f"ERROR: 알 수 없는 오류: {e}")
+        raise HTTPException(status_code=500, detail="알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해주세요.")
 
 class VideoProcessRequest(BaseModel):
     video_url: str
     query: str
+    # 사용자가 사용할 Ollama 모델 이름을 지정할 수 있도록 추가
+    ollama_model_name: str = "hf.co/DevQuasar/naver-hyperclovax.HyperCLOVAX-SEED-Text-Instruct-0.5B-GGUF:F16"
 
+# ✅ 유튜브 영상 처리 API
 @app.post("/api/process_youtube_video")
 async def process_youtube_video(request: VideoProcessRequest):
     try:
@@ -48,10 +82,30 @@ async def process_youtube_video(request: VideoProcessRequest):
         if not processed_chunks_with_timestamps:
             return {"message": "자막 또는 내용을 추출할 수 없습니다.", "results": []}
 
+        # 1. RAG 검색 수행
         rag_results = await perform_rag_query(
             chunks_with_timestamps=processed_chunks_with_timestamps,
             query=request.query,
-            top_k=5
+            top_k=50
+        )
+
+        if not rag_results:
+            return {
+                "status": "error",
+                "message": "검색 결과가 없습니다.",
+                "video_url": request.video_url,
+                "query": request.query,
+                "results": []
+            }
+
+        # 2. 검색 결과를 프롬프트에 추가
+        context = "\\n\\n".join([chunk["text"] for chunk in rag_results])
+        prompt = f"다음 정보와 대화 내용을 참고하여 사용자의 질문에 답변하세요. 제공된 정보에서 답을 찾을 수 없다면 '정보 부족'이라고 명시하세요.\\n\\n참고 정보:\\n{context}\\n\\n사용자 질문: {request.query}\\n\\n답변:"
+
+        # 3. Ollama 모델에 질의하여 답변 생성
+        generated_answer = await generate_answer_with_ollama(
+            model_name=request.ollama_model_name,
+            prompt=prompt
         )
 
         return {
@@ -59,9 +113,10 @@ async def process_youtube_video(request: VideoProcessRequest):
             "message": "성공적으로 영상을 처리하고 RAG 검색을 수행했습니다.",
             "video_url": request.video_url,
             "query": request.query,
-            "results": rag_results
+            "ollama_model_used": request.ollama_model_name,
+            "retrieved_chunks": rag_results,
+            "generated_answer": generated_answer
         }
-
     except Exception as e:
         print(f"ERROR: 서버 처리 중 오류 발생: {str(e)}")
         raise HTTPException(status_code=500, detail="서버 처리 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.")

backend/app/proxy_manager.py

@@ -1,4 +1,4 @@
-# backend/app/proxy_manager.py
+# ./backend/app/proxy_manager.py
 
 import os
 import requests # requests는 FreeProxy 테스트나 ScrapingBee API 직접 호출 시 유용

backend/app/rag_core.py

@@ -1,4 +1,4 @@
-# backend/app/rag_core.py
+# ./backend/app/rag_core.py
 
 from sentence_transformers import SentenceTransformer
 import faiss
@@ -9,13 +9,13 @@ from typing import List, Dict, Tuple
 # 네이버 클로바의 한국어 SentenceBERT 모델을 로드합니다.
 try:
     # 네이버 클로바 HyperCLOVAX-SEED-Text-Instruct-0.5B 모델 로드
-    model = SentenceTransformer('jhgan/ko-sroberta-multitask')
+    model = SentenceTransformer('jhgan/ko-sroberta-multitask', device='cpu')
     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')
+        model = SentenceTransformer('sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2', device='cpu')
         print("INFO: 임베딩 모델 'sentence-transformers/paraphrase-multilingual-L12-v2' 로드 완료.")
     except Exception as e:
         print(f"ERROR: 대체 임베딩 모델 로드 실패: {e}. RAG 기능을 사용할 수 없습니다.")
@@ -68,48 +68,32 @@ async def perform_rag_query(chunks_with_timestamps: List[Dict], query: str, top_
     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]
+
+    # ✨✨✨ 유사도 임계값 설정 및 필터링 추가 ✨✨✨
+    # 이 값은 실험을 통해 최적의 값을 찾아야 합니다.
+    # 거리가 낮을수록 유사하므로, 이 값보다 '거리(score)'가 낮아야만 결과를 포함합니다.
+    # 예를 들어, 0.5는 '거리가 0.5 미만인 경우에만 결과에 포함하라'는 의미입니다.
+    # 거리가 0이면 완벽히 일치합니다.
+    MIN_DISTANCE_THRESHOLD = 150 # 예시 값: 이 값보다 거리가 작아야 합니다 (더 유사해야 함)
+
+    for i in range(len(indices[0])):
+        idx = indices[0][i]
+        original_chunk = chunks_with_timestamps[idx]
+        score = float(distances[0][i]) # FAISS에서 반환된 거리 값 (낮을수록 유사)
+
+        # 설정된 임계값보다 거리가 작을 때만 (즉, 유사도가 높을 때만) 결과에 포함
+        if score < MIN_DISTANCE_THRESHOLD:
             retrieved_chunks.append({
                 "text": original_chunk["text"],
                 "timestamp": original_chunk["timestamp"],
-                "score": float(distances[0][i]) # 유사도 점수 (거리가 작을수록 유사)
+                "score": score
             })
+        else:
+            # 디버깅용: 임계값 때문에 제외된 청크를 로그로 확인
+            print(f"DEBUG: 유사도 임계값({MIN_DISTANCE_THRESHOLD:.4f}) 초과로 제외된 청크 (거리: {score:.4f}): {original_chunk['text'][:50]}...")
     
     # 거리가 작은 순서(유사도가 높은 순서)로 정렬하여 반환
-    retrieved_chunks.sort(key=lambda x: x['score'])
+    retrieved_chunks.sort(key=lambda x: x['timestamp'])
 
     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())
+    return retrieved_chunks

backend/app/youtube_parser.py

@@ -1,4 +1,6 @@
+# ./backend/app/youtube_parser.py
 import os
+import re
 import contextlib
 import asyncio
 import json # json 모듈 추가
@@ -58,6 +60,13 @@ async def get_youtube_video_id(url: str) -> str | None:
     logger.warning(f"알 수 없는 형식의 YouTube URL: {url}")
     return None
     
+def clean_caption_text(text: str) -> str:
+    # <00:00:00.000><c>...</c> 또는 </c> 같은 태그 제거
+    cleaned_text = re.sub(r'<[^>]+>', '', text)
+    # 여러 공백을 하나의 공백으로 줄이고 양쪽 끝 공백 제거
+    cleaned_text = re.sub(r'\s+', ' ', cleaned_text).strip()
+    return cleaned_text
+
 async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
     logger.info(f"비디오 ID '{video_id}'에 대한 자막 가져오기 시도.")
 
@@ -145,7 +154,6 @@ async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
 
             # 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()
@@ -153,10 +161,11 @@ async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
                     # WEBVTT 파싱
                     segments = vtt_content.split('\n\n')
                     for segment in segments:
-                        if '-->' in segment: # 시간 정보 포함 세그먼트
+                        if '-->' in segment:
                             lines = segment.split('\n')
                             time_str = lines[0].strip()
                             text_content = ' '.join(lines[1:]).strip()
+                            text_content = clean_caption_text(text_content)
                             
                             try:
                                 # VTT 시간은 HH:MM:SS.ms 형태로 제공되므로, 밀리초를 float로 처리 후 정수로 변환
@@ -184,7 +193,6 @@ async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
                                 })
                             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'):
@@ -199,6 +207,8 @@ async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
                             hours = total_seconds // 3600
                             minutes = (total_seconds % 3600) // 60
                             seconds = total_seconds % 60
+                            text = entry['text']
+                            text = clean_caption_text(text)
 
                             if hours > 0:
                                 timestamp_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
@@ -206,7 +216,7 @@ async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
                                 timestamp_str = f"{minutes:02d}:{seconds:02d}"
                                 
                             processed_chunks.append({
-                                "text": entry['text'],
+                                "text": text,
                                 "timestamp": timestamp_str
                             })
                     logger.info(f"yt-dlp로 JSON 자막 {len(processed_chunks)}개 청크 처리 완료.")
@@ -224,6 +234,7 @@ async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
                         if len(lines) >= 3 and '-->' in lines[1]:
                             time_str = lines[1].strip()
                             text_content = ' '.join(lines[2:]).strip()
+                            text_content = clean_caption_text(text_content)
 
                             try:
                                 # SRT 시간은 HH:MM:SS,ms 형태로 제공
@@ -248,7 +259,6 @@ async def get_transcript_with_timestamps(video_id: str) -> list[dict] | None:
 
                 else:
                     logger.warning(f"지원하지 않는 자막 파일 형식입니다: {caption_file_path}")
-
             else:
                 logger.warning(f"비디오 ID '{video_id}'에 대한 yt-dlp 자막 파일을 찾을 수 없습니다. 최종 시도 경로: {caption_file_path}")
 

backend/requirements.txt

@@ -8,4 +8,5 @@ sentence-transformers==3.2.1
 faiss-cpu==1.9.0
 numpy==1.26.4
 pydantic==2.9.2
-torch==2.6.0
+torch==2.6.0
+httpx

frontend/.env.development

@@ -0,0 +1,2 @@
+# frontend/.env.development 파일
+VUE_APP_BACKEND_URL=http://localhost:7860

frontend/src/App.vue

@@ -1,54 +1,71 @@
 <template>
-  <div id="app">
-    <h1>YouTube Transcript Extraction</h1>
-    <p>영상 URL과 찾고 싶은 내용을 입력해주세요.</p>
+  <div id="app" class="main-container">
+    <div class="left-panel">
+      <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="updateVideoEmbed" />
-    </div>
+      <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=xxxxxxxxxxx" @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 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
+          id="youtube-iframe" ></iframe>
+      </div>
 
-    <div class="input-section">
-      <label for="query">찾을 내용 (쿼리):</label>
-      <input type="text" id="query" v-model="query" placeholder="예: RAG 기술의 장점은?" />
-    </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>
+      <button @click="processVideo" :disabled="loading" class="center-button">
+        {{ loading ? '처리 중...' : '영상 탐색 시작' }}
+      </button>
 
-    <div v-if="errorMessage" class="error-message">
-      {{ errorMessage }}
-    </div>
+      <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 v-if="generatedAnswer" class="generated-answer-section">
+        <h2>✨ 생성된 답변:</h2>
+        <p>{{ generatedAnswer }}</p>
+      </div>
+
+      <div v-if="responseMessage && !generatedAnswer && !errorMessage" class="info-message">
+        {{ responseMessage }}
       </div>
     </div>
-    <div v-else-if="!loading && responseMessage" class="info-message">
-      {{ responseMessage }}
+
+    <div class="right-sidebar">
+      <h2>검색 결과 (타임 라인):</h2>
+      <div v-if="loading && results.length === 0 && !errorMessage">
+        <p>검색 결과를 불러오는 중...</p>
+      </div>
+      <div v-else-if="results.length > 0">
+        <div v-for="(result, index) in results" :key="index" class="result-item">
+          <p>
+            <strong class="timestamp-link" @click="seekVideo(result.timestamp)">
+              시간: {{ result.timestamp }}
+            </strong>
+          </p>
+          <p><strong>내용:</strong> {{ result.text }}</p>
+        </div>
+      </div>
+      <div v-else>
+        <p>아직 검색 결과가 없습니다.</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import apiClient from './api'; // axios 인스턴스 import
-
 export default {
   name: 'App',
   data() {
@@ -59,23 +76,23 @@ export default {
       results: [],
       errorMessage: '',
       responseMessage: '',
-      videoEmbedUrl: ''
+      videoEmbedUrl: '',
+      generatedAnswer: ''
     };
   },
   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]) {
+        // 유튜브 임베드 URL 수정 (http -> https, googleusercontent.com 제거)
         this.videoEmbedUrl = `https://www.youtube.com/embed/${match[1]}`;
       } else{
-        this.errorMessage = '유요한 유튜브 URL을 입력해주세요.';
+        this.errorMessage = '유효한 유튜브 URL을 입력해주세요.';
       }
     },
     async processVideo() {
@@ -83,51 +100,136 @@ export default {
       this.results = [];
       this.responseMessage = '';
       this.loading = true;
+      this.generatedAnswer = '';
 
       try {
-          const response = await apiClient.post(`/process_youtube_video`, {
+        const backendUrl = process.env.VUE_APP_BACKEND_URL || 'http://localhost:7860';
+        const response = await fetch(`${backendUrl}/api/process_youtube_video`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
             video_url: this.videoUrl,
-            query: this.query
-        });
+            query: this.query,
+          }),
+        })
+
+        const data = await response.json();
+
+        if (response.ok) {
+          if (data.status === 'success') {
+            this.results = data.retrieved_chunks || [];
+            this.generatedAnswer = data.generated_answer || '답변을 생성하지 못했습니다.';
+            this.responseMessage = data.message;
 
-        this.responseMessage = response.data.message;
-        if (response.data.results && response.data.results.length > 0) {
-          this.results = response.data.results;
+            if (this.results.length === 0 && !this.generatedAnswer) {
+              this.errorMessage = '관련된 정보나 답변을 찾을 수 없습니다.';
+            } else if (this.results.length > 0 && !this.generatedAnswer) {
+              this.errorMessage = '검색된 정보를 바탕으로 답변을 생성하지 못했습니다. Ollama 서버를 확인해주세요.';
+            }
+          } else {
+            this.errorMessage = data.message || '영상을 처리하는 데 실패했습니다.';
+            this.results = [];
+            this.generatedAnswer = '';
+          }
         } else {
-          this.responseMessage = response.data.message || "결과를 찾을 수 없습니다.";
+          this.errorMessage = data.detail || '서버 오류가 발생했습니다.'
+          this.results = [];
+          this.generatedAnswer = '';
         }
       } 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 = '요청 설정 중 오류가 발생했습니다.';
-        }
+        console.error('Error processing video:', error);
+        this.errorMessage = '네트워크 오류 또는 서버에 연결할 수 없습니다.';
+        this.results = [];
+        this.generatedAnswer  = '';
       } finally {
         this.loading = false;
       }
+    },
+    // hh:mm:ss 형식을 초 단위로 변환하는 헬퍼 함수
+    timeToSeconds(timeString) {
+      const parts = timeString.split(':').map(Number);
+      if (parts.length === 3) { // HH:MM:SS
+        return parts[0] * 3600 + parts[1] * 60 + parts[2];
+      } else if (parts.length === 2) { // MM:SS (일부 자막은 이 형식일 수 있음)
+        return parts[0] * 60 + parts[1];
+      }
+      return 0; // 유효하지 않은 형식은 0으로 처리
+    },
+    // 비디오를 특정 시간으로 이동시키는 함수
+    seekVideo(timestamp) {
+      const seconds = this.timeToSeconds(timestamp);
+      const iframe = document.getElementById('youtube-iframe');
+      if (iframe && iframe.src) {
+        const currentSrc = iframe.src;
+        // 기존 쿼리 파라미터 유지하고 &start=xx 추가 또는 업데이트
+        let newSrc;
+        const urlObj = new URL(currentSrc);
+        urlObj.searchParams.set('start', seconds);
+        // autoplay도 추가하여 클릭 시 재생되도록 할 수 있음
+        urlObj.searchParams.set('autoplay', '1'); 
+        newSrc = urlObj.toString();
+
+        iframe.src = newSrc;
+      } else {
+        this.errorMessage = '비디오 플레이어를 찾을 수 없습니다. URL을 먼저 입력해주세요.';
+      }
     }
   }
 }
 </script>
 
 <style>
-#app {
+/* 기존 #app 스타일을 main-container에 적용 및 수정 */
+.main-container {
   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;
+  max-width: 1200px; /* 전체 컨테이너 너비 증가 */
   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);
+
+  /* Flexbox 레이아웃 설정 */
+  display: flex;
+  flex-direction: row; /* 자식 요소들을 가로로 배치 */
+  gap: 30px; /* 왼쪽 패널과 사이드바 사이의 간격 */
+  align-items: flex-start; /* 상단 정렬 */
+}
+
+/* 왼쪽 패널 ��타일 */
+.left-panel {
+  flex: 2; /* 왼쪽 패널이 더 많은 공간 차지 (예: 66%) */
+  text-align: center; /* 왼쪽 패널 내 텍스트 왼쪽 정렬 */
+  padding-right: 15px; /* 사이드바와의 시각적 구분 */
+}
+
+/* 오른쪽 사이드바 스타일 */
+.right-sidebar {
+  flex: 1; /* 오른쪽 사이드바가 남은 공간 차지 (예: 33%) */
+  text-align: left; /* 사이드바 내 텍스트 왼쪽 정렬 */
+  padding-left: 15px; /* 왼쪽 패널과의 시각적 구분 */
+  border-left: 1px solid #eee; /* 구분선 */
+  max-height: 80vh; /* 화면 높이의 80%를 넘지 않도록 */
+  overflow-y: auto; /* 내용이 넘치면 세로 스크롤바 생성 */
+  padding-bottom: 20px; /* 스크롤 시 하단 여백 */
+}
+
+/* 기존 스타일 유지 (수정된 .main-container, .left-panel, .right-sidebar 제외) */
+h1 {
+  color: #42b983;
+  text-align: center; /* 제목 중앙 정렬 유지 */
+}
+
+p {
+  text-align: center; /* 설명 문구 중앙 정렬 유지 */
 }
 
 .input-section {
@@ -157,6 +259,7 @@ button {
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.3s ease;
+  margin-top: 10px; /* 버튼 위쪽 여백 추가 */
 }
 
 button:hover:not(:disabled) {
@@ -172,36 +275,78 @@ button:disabled {
   color: red;
   margin-top: 20px;
   font-weight: bold;
+  background-color: #ffebee;
+  border: 1px solid #ef9a9a;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.generated-answer-section {
+  margin-top: 30px;
+  padding: 20px;
+  background-color: #e8f5e9; /* 부드러운 녹색 배경 */
+  border-left: 5px solid #4CAF50; /* 왼쪽 테두리 */
+  border-radius: 5px;
+  text-align: left;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.generated-answer-section h2 {
+  color: #2e7d32; /* 진한 녹색 제목 */
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.5em;
+}
+
+.generated-answer-section p {
+  line-height: 1.6;
+  color: #333;
+  white-space: pre-wrap; /* 줄바꿈 및 공백 유지 */
 }
 
 .info-message {
   color: #3498db;
   margin-top: 20px;
   font-style: italic;
+  background-color: #e3f2fd;
+  border: 1px solid #90caf9;
+  padding: 10px;
+  border-radius: 4px;
 }
 
-.results-section {
-  margin-top: 30px;
-  text-align: left;
-  border-top: 1px solid #eee;
-  padding-top: 20px;
+.timestamp-link {
+  color: #007bff; /* 파란색 링크 스타일 */
+  cursor: pointer; /* 클릭 가능하다는 표시 */
+  text-decoration: none; /* 밑줄 */
 }
 
-.results-section h2 {
-  text-align: center;
-  color: #333;
+.timestamp-link:hover {
+  color: #0056b3; /* 호버 시 색상 변경 */
+}
+
+.results-section h2 { /* 이 스타일은 이제 .right-sidebar h2로 대체될 수 있음 */
+  color: #2c3e50;
+  margin-bottom: 15px;
+  font-size: 1.3em;
 }
 
 .result-item {
   background-color: #f9f9f9;
-  border: 1px solid #ddd;
-  border-radius: 6px;
+  border: 1px solid #eee;
+  border-radius: 4px;
   padding: 15px;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 
 .result-item p {
-  margin: 5px 0;
+  margin: 0 0 5px 0;
+  color: #555;
+  text-align: left;
+}
+
+.result-item p strong {
+  color: #000;
 }
 
 .result-item a {
@@ -213,11 +358,12 @@ button:disabled {
   text-decoration: underline;
 }
 
-.video-embed{
-  margin: 20px 0;
+.video-embed {
+  margin-top: 20px;
+  margin-bottom: 30px;
+  background-color: #000;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: relative;
   padding-bottom: 56.25%;
   height: 0;