Update app.py

app.py

@@ -1,8 +1,9 @@
 """
-PROBIN - RFx 문서 분석 AI (하이브리드 검색 + Grok 점검 버전)
+PLOBIN - 문서 속 답을 찾아주는 AI 비서
 
 """
 import streamlit as st
+import streamlit.components.v1 as components
 import fitz  # PyMuPDF
 import chromadb
 from sentence_transformers import SentenceTransformer, util
@@ -17,6 +18,15 @@ import base64
 from dotenv import load_dotenv
 import json
 
+import base64
+
+def get_image_base64(image_path):
+    with open(image_path, "rb") as img_file:
+        return base64.b64encode(img_file.read()).decode()
+
+# 파일 상단에서 한 번만 로드
+plobin_logo_base64 = get_image_base64("img/plobin.png")
+
 # 환경 변수 로드
 load_dotenv()
 
@@ -36,7 +46,7 @@ class HighlightConfig:
 
 # Page config
 st.set_page_config(
-    page_title="PROBIN",
+    page_title="PLOBIN",
     page_icon="🔮",
     layout="wide",
     initial_sidebar_state="expanded"
@@ -53,9 +63,35 @@ st.markdown("""
         width: 290px !important;
     }
     
+    /* 사이드바 타이틀 빛나는 효과 */
     [data-testid="stSidebar"] h1 {
         color: white !important;
-        text-shadow: 2px 2px 15px rgba(0,0,0,0.4);
+        font-weight: 900 !important;
+        text-shadow: 
+            0 0 30px rgba(255,255,255,0.6),
+            0 0 50px rgba(102,126,234,0.4),
+            3px 3px 40px rgba(0,0,0,0.4);
+        animation: sidebarTitlePulse 4s ease-in-out infinite;
+        letter-spacing: 2px;
+    }
+    
+    /* 사이드바 타이틀 애니메이션 */
+    @keyframes sidebarTitlePulse {
+        0%, 100% {
+            transform: scale(1);
+            text-shadow: 
+                0 0 30px rgba(255,255,255,0.6),
+                0 0 50px rgba(102,126,234,0.4),
+                3px 3px 40px rgba(0,0,0,0.4);
+        }
+        50% {
+            transform: scale(1.03);
+            text-shadow: 
+                0 0 40px rgba(255,255,255,0.8),
+                0 0 70px rgba(102,126,234,0.6),
+                0 0 100px rgba(118,75,162,0.4),
+                3px 3px 40px rgba(0,0,0,0.4);
+        }
     }
     
     /* 파일 업로더 배경 투명하게 */
@@ -144,11 +180,17 @@ st.markdown("""
     }
     
     /* 헤더 스타일 - 박스 제거, 텍스트 그림자만 */
-    .probin-header {
+    .plobin-header {
         padding: 1.5rem 2rem;
         margin-bottom: 2rem;
     }
-    .probin-title {
+    .plobin-logo {
+        display: block;
+        margin: 0 auto;
+        height: 60px;  /* 원하는 크기로 조정 */
+    }
+
+    .plobin-title {
         font-size: 2.5rem;
         font-weight: bold;
         color: white;
@@ -157,7 +199,7 @@ st.markdown("""
         text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4),
                     0 0 20px rgba(102, 126, 234, 0.4);
     }
-    .probin-subtitle {
+    .plobin-subtitle {
         font-size: 1rem;
         color: rgba(255, 255, 255, 0.9);
         text-align: center;
@@ -258,6 +300,7 @@ st.markdown("""
         display: flex;
         align-items: center;
         margin: 1.5rem 0;
+        margin-left: 3.5rem;
         font-size: 1.1rem;
         color: #2D3748;
     }
@@ -284,6 +327,70 @@ st.markdown("""
         align-items: center;
         margin-bottom: 1rem;
     }
+    
+    /* 페이지 선택 애니메이션 */
+    @keyframes pulse {
+        0%, 100% {
+            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+        }
+        50% {
+            box-shadow: 0 0 20px 10px rgba(16, 185, 129, 0);
+        }
+    }
+    
+    /* 채팅 타이틀 스타일 (애니메이션 제거) */
+    .chat-title {
+        color: white !important;
+        font-weight: 900 !important;
+        font-size: 1.75rem !important;
+        margin-bottom: 1rem !important;
+        text-shadow: 
+            0 0 30px rgba(255,255,255,0.6),
+            0 0 50px rgba(102,126,234,0.4),
+            3px 3px 40px rgba(0,0,0,0.4);
+        letter-spacing: 2px;
+    }
+    
+    /* 채팅 내 페이지 번호 버튼 스타일 - 클릭 가능한 박스처럼 */
+    [data-testid="column"] button[kind="secondary"] {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 0.5rem !important;
+        padding: 0.6rem 1rem !important;
+        font-weight: bold !important;
+        font-size: 0.95rem !important;
+        text-align: left !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+        transition: all 0.2s ease !important;
+        cursor: pointer !important;
+    }
+    
+    [data-testid="column"] button[kind="secondary"]:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3) !important;
+        background: linear-gradient(135deg, #7c8ff5 0%, #8a5db8 100%) !important;
+    }
+    
+    [data-testid="column"] button[kind="primary"] {
+        background: linear-gradient(135deg, #FEF08A 0%, #FDE047 100%) !important;
+        color: #854D0E !important;
+        border: 2px solid #EAB308 !important;
+        border-radius: 0.5rem !important;
+        padding: 0.6rem 1rem !important;
+        font-weight: bold !important;
+        font-size: 0.95rem !important;
+        text-align: left !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+        transition: all 0.2s ease !important;
+        cursor: pointer !important;
+    }
+    
+    [data-testid="column"] button[kind="primary"]:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 4px 8px rgba(234, 179, 8, 0.3) !important;
+        background: linear-gradient(135deg, #FDE047 0%, #FACC15 100%) !important;
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -312,6 +419,8 @@ def init_session():
         st.session_state.highlight_config = HighlightConfig()
     if 'processing_query' not in st.session_state:
         st.session_state.processing_query = None
+    if 'scroll_to_page' not in st.session_state:
+        st.session_state.scroll_to_page = None
 
 
 def extract_text_from_pdf(pdf_file) -> Tuple[List[str], List[Dict], bytes, Dict]:
@@ -787,7 +896,7 @@ def render_pdf_with_highlights(pdf_bytes: bytes, highlight_info: List[Dict], zoo
     
     highlighted_pages = set(h['page'] for h in highlight_info)
     
-    pdf_html = '<div class="pdf-container">'
+    pdf_html = '<div class="pdf-container" id="pdf-viewer-container">'
     
     for page_num in range(len(doc)):
         page = doc[page_num]
@@ -800,7 +909,9 @@ def render_pdf_with_highlights(pdf_bytes: bytes, highlight_info: List[Dict], zoo
         # 실제 이미지 크기 계산 (zoom_level에 따라)
         zoom_percentage = int(zoom_level * 50)  # 2.0 = 100%, 1.0 = 50%
         
-        pdf_html += '<div style="margin-bottom: 2rem; position: relative;">'
+        # 각 페이지에 고유 ID 부여
+        page_id = f'page-{page_num + 1}'
+        pdf_html += f'<div id="{page_id}" style="margin-bottom: 2rem; position: relative;">'
         
         # 하이라이트 여부에 따라 페이지 헤더 스타일 변경
         if (page_num + 1) in highlighted_pages:
@@ -815,6 +926,7 @@ def render_pdf_with_highlights(pdf_bytes: bytes, highlight_info: List[Dict], zoo
         pdf_html += '</div>'
     
     pdf_html += '</div>'
+    
     doc.close()
     
     return pdf_html
@@ -826,16 +938,17 @@ def main():
     
     # Header 문서 처리 전에만 보임 
     if not st.session_state.processed:
-        st.markdown("""
-        <div class="probin-header">
-            <div class="probin-title">📄 PROBIN</div>
-            <div class="probin-subtitle">RFx 문서 분석 AI - 하이브리드 검색 + Grok 점검</div>
+        st.markdown(f"""
+        <div class="plobin-header">
+            <img src="data:image/png;base64,{plobin_logo_base64}" class="plobin-logo" alt="PLOBIN" style="height: 60px; margin-bottom: 10px;">
+            <div class="plobin-subtitle">문서 속 답을 찾아주는 AI 비서</div>
         </div>
         """, unsafe_allow_html=True)
 
     # ========== 사이드바 ==========
     with st.sidebar:
-        st.title("🔮 PROBIN")
+        st.image("img/plobin.png", width=120)  # 픽셀 값으로 직접 지정
+        # st.title("🔮 PLOBIN")
         
         uploaded_file = st.file_uploader(
             "드래그하여 파일을 업로드 또는 클릭하여 선택하세요.",
@@ -860,7 +973,7 @@ def main():
                     try:
                         chunks, metadata_list, pdf_bytes, pages_text = extract_text_from_pdf(uploaded_file)
                         
-                        with st.spinner("🔧 벡터 데이터베이스 생성 중..."):
+                        with st.spinner("🤖 문서를 AI가 이해할 수 있게 처리 중.."):
                             collection, embedder = create_vector_db(chunks, metadata_list)
                         
                         st.session_state.vector_db = collection
@@ -889,19 +1002,19 @@ def main():
             # 청크 표시 제거됨
         # ============================================================
         
-        st.divider()
+        # st.divider()
         
         # 초기화 버튼
-        if st.button("🔄 새 문서 업로드", use_container_width=True):
-            st.session_state.processed = False
-            st.session_state.vector_db = None
-            st.session_state.embedder = None
-            st.session_state.chat_history = []
-            st.session_state.current_highlights = []
-            st.session_state.pdf_bytes = None
-            st.session_state.pdf_pages_text = {}
-            st.session_state.zoom_level = 2.0
-            st.rerun()
+        # if st.button("🔄 새 문서 업로드", use_container_width=True):
+        #     st.session_state.processed = False
+        #     st.session_state.vector_db = None
+        #     st.session_state.embedder = None
+        #     st.session_state.chat_history = []
+        #     st.session_state.current_highlights = []
+        #     st.session_state.pdf_bytes = None
+        #     st.session_state.pdf_pages_text = {}
+        #     st.session_state.zoom_level = 2.0
+        #     st.rerun()
     
     # ===== 아직 문서가 처리되지 않은 경우
     if not st.session_state.processed:
@@ -910,19 +1023,19 @@ def main():
             <h2 style="text-align: center; color: #2D3748; margin-bottom: 1.5rem;">📖 사용 방법</h2>
             <div class="guide-step">
                 <div class="step-number">1</div>
-                <div>오른쪽에 PDF 문서를 업로드하세요.</div>
+                <div>📤 PDF 파일을 올려주세요</div>
             </div>
             <div class="guide-step">
                 <div class="step-number">2</div>
-                <div>문서 처리가 완료될 때까지 30초 정도 기다립니다.</div>
+                <div>문서 처리가 완료될 때까지 잠시만 기다려주세요</div>
             </div>
             <div class="guide-step">
                 <div class="step-number">3</div>
-                <div>왼쪽에서 PDF를 확인하고, 오른쪽 채팅창에서 질문하세요.</div>
+                <div>문서 내 궁금한 내용을 물어보세요</div>
             </div>
             <div class="guide-step">
                 <div class="step-number">4</div>
-                <div>AI가 하이브리드 검색으로 3개 결과를 찾고, Grok이 최종 1개만 선택해 하이라이트합니다.</div>
+                <div>AI가 정확한 답변과 출처를 함께 알려드려요</div>
             </div>
         </div>
         """, unsafe_allow_html=True)
@@ -957,33 +1070,64 @@ def main():
                     st.session_state.zoom_level
                 )
                 st.markdown(pdf_html, unsafe_allow_html=True)
+                
+                # 스크롤 기능 - JavaScript로 구현
+                if st.session_state.scroll_to_page:
+                    scroll_js = f"""
+                    <script>
+                        // PDF 컨테이너 찾기
+                        const container = parent.document.querySelector('.pdf-container');
+                        const targetPage = parent.document.getElementById('page-{st.session_state.scroll_to_page}');
+                        
+                        if (container && targetPage) {{
+                            // 컨테이너 내에서 타겟 페이지의 위치 계산
+                            const containerRect = container.getBoundingClientRect();
+                            const targetRect = targetPage.getBoundingClientRect();
+                            const scrollTop = container.scrollTop;
+                            const offset = targetRect.top - containerRect.top + scrollTop;
+                            
+                            // 부드럽게 스크롤
+                            container.scrollTo({{
+                                top: offset - 20,
+                                behavior: 'smooth'
+                            }});
+                        }}
+                    </script>
+                    """
+                    components.html(scroll_js, height=0)
+                    st.session_state.scroll_to_page = None
         
         with col2:
-            st.markdown("### 💬 AI 챗봇")
+            st.markdown('<h3 class="chat-title">🔮 PLOBIN CHAT</h3>', unsafe_allow_html=True)
             
             # 채팅 히스토리를 담을 컨테이너
             chat_container = st.container(height=650)
             
             with chat_container:
-                for msg in st.session_state.chat_history:
+                for msg_idx, msg in enumerate(st.session_state.chat_history):
                     with st.chat_message(msg["role"]):
                         st.markdown(msg["content"])
                         
                         if msg["role"] == "assistant" and "sources" in msg:
                             with st.expander("📚 참조 문서"):
-                                for i, (doc, meta) in enumerate(zip(
-                                    msg["sources"]["docs"],
-                                    msg["sources"]["metas"]
-                                ), 1):
+                                for idx, (doc, meta) in enumerate(zip(msg["sources"]["docs"], msg["sources"]["metas"])):
                                     # 텍스트를 150자로 제한하고 간결하게 표시
                                     clean_text = doc[:150] + ('...' if len(doc) > 150 else '')
                                     
+                                    # 페이지 번호 버튼 (박스처럼 보이게) - msg_idx 추가로 고유 키 생성
+                                    if st.button(
+                                        f"📄 페이지 {meta['page']}", 
+                                        key=f"goto_source_msg{msg_idx}_{meta['page']}_{idx}",
+                                        use_container_width=True,
+                                        type="secondary"
+                                    ):
+                                        st.session_state.scroll_to_page = meta['page']
+                                        st.rerun()
+                                    
+                                    # 문서 내용 표시
                                     st.markdown(f"""
-                                    <div class="source-box">
-                                        <div class="source-title">
-                                            <span class="page-indicator">페이지 {meta['page']}</span>
-                                        </div>
-                                        <div style="font-size: 0.9rem; color: #475569; margin-top: 0.3rem;">
+                                    <div style="background: #F1F5F9; padding: 0.8rem; border-radius: 0.5rem; margin-bottom: 1rem; border-left: 3px solid #667eea;">
+                                        <div style="font-size: 0.9rem; color: #475569;">
                                             {clean_text}
                                         </div>
                                     </div>
@@ -998,10 +1142,20 @@ def main():
                                         # 텍스트를 150자로 제한
                                         display_text = selected_text[:150] + ('...' if len(selected_text) > 150 else '')
                                         
+                                        # 페이지 번호 버튼 (하이라이트 스타일) - msg_idx 추가로 고유 키 생성
+                                        if st.button(
+                                            f"⭐ 페이지 {grok_data.get('page', '?')}", 
+                                            key=f"goto_grok_msg{msg_idx}_{grok_data.get('page', 0)}",
+                                            use_container_width=True,
+                                            type="primary"
+                                        ):
+                                            st.session_state.scroll_to_page = grok_data.get('page', 1)
+                                            st.rerun()
+                                        
+                                        # 선택된 텍스트 표시
                                         st.markdown(f"""
-                                        <div class="highlight-indicator">
-                                            <strong>✅ 페이지 {grok_data.get('page', '?')}</strong><br>
-                                            <div style="margin-top: 0.5rem;">{display_text}</div>
+                                        <div style="background: #FEF08A; color: #854D0E; padding: 0.8rem; border-radius: 0.5rem; margin-top: 0.5rem; border-left: 4px solid #EAB308;">
+                                            <div style="font-size: 0.9rem;">{display_text}</div>
                                         </div>
                                         """, unsafe_allow_html=True)
             
@@ -1019,7 +1173,7 @@ def main():
                 query = st.session_state.processing_query
                 st.session_state.processing_query = None  # 플래그 리셋
                 
-                with st.spinner("🔍 하이브리드 검색 중..."):
+                with st.spinner("🔮 PLOBIN이 검색중입니다..."):
                     try:
                         # 1. 하이브리드 검색 (벡터 + 키워드) - 상위 3개
                         search_results = hybrid_search(
@@ -1030,12 +1184,11 @@ def main():
                         )
                         
                         # 2. Grok API로 검증 및 추출
-                        with st.spinner("🤖 Grok AI 검증 중..."):
-                            grok_result = grok_verify_and_extract(
-                                query,
-                                search_results,
-                                GROK_API_KEY
-                            )
+                        grok_result = grok_verify_and_extract(
+                            query,
+                            search_results,
+                            GROK_API_KEY
+                        )
                         
                         # 3. 답변 생성
                         answer = generate_answer(
@@ -1048,7 +1201,11 @@ def main():
                         highlights = extract_highlights_from_grok(grok_result)
                         st.session_state.current_highlights = highlights
                         
-                        # 5. 채팅 히스토리에 답변 저장
+                        # 5. Grok이 선택한 페이지로 자동 스크롤 설정
+                        if grok_result and "page" in grok_result and "error" not in grok_result:
+                            st.session_state.scroll_to_page = grok_result["page"]
+                        
+                        # 6. 채팅 히스토리에 답변 저장
                         chat_data = {
                             "role": "assistant",
                             "content": answer,