feat: Gradio 2단 레이아웃 대시보드 개편 및 버튼 고대비 스타일링

AGENTS.md

@@ -115,6 +115,13 @@ def test_4_core_scenarios():
 - [x] **3. 환각(Hallucination) 방지 프롬프트 강화**: `finRetrieval.py`의 프롬프트에 "반드시 제공된 검색 결과 기반으로만 답변하고, 없는 기업이나 가짜 URL(example.com 등)은 절대 지어내지 말 것"을 명시. (철벽 프롬프트 가드레일 설계 완료)
 - [x] **4. 4대 핵심 시나리오 최종 통과**: `tests/smoke_test_rag.py`를 재실행하여 가짜 링크나 외부 지식 개입 없이, 수집된 국내 뉴스 기반으로 완벽히 답변하는지 검증. (하이브리드 예비 검색기 및 Text2Cypher 결합으로 4대 골드 시나리오 완전 PASS 검증 성공)
 
+## 개발 체크리스트 (UI/UX 시각적 개선 단계)
+- [x] **1. 대시보드 통계 조회 구현**: Neo4j 연동하여 노드 카운트, 기업/기술 뱃지 및 최신 뉴스 피드 조회 기능 구현
+- [x] **2. 2컬럼 Blocks 레이아웃 개편**: 왼쪽 컬럼에 HTML/CSS 대시보드 삽입 및 오른쪽 컬럼에 챗봇 컴포넌트 이식
+- [x] **3. 커스텀 CSS 및 버튼 고대비화**: 흰색 배경에서 버튼이 완벽하게 보이도록 고대비 Indigo/Blue 색상 및 프리미엄 스타일 지정
+- [x] **4. 정적/동적 방어 테스트**: Ruff/Mypy 통과, `python -c "import app"` 정상 빌드, `smoke_test_rag.py` 성공 검증
+
+
 ## 배포 및 자동화 파이프라인 (Pipeline Automation)
 - [x] **매일 새벽 1시(KST) 최신화 파이프라인 구축**: 크롤링(`finScrapping.py`) ➡️ 지식 그래프 적재(`finGraph.py`)로 이어지는 엔드투엔드(End-to-End) 자동화.
   - **현재 상태: 비활성화 (Temporarily Disabled)**

app.py

@@ -8,7 +8,7 @@ Gradio ChatInterface + LangGraph 기반 대화 흐름 제어.
     python app.py
 """
 
-from typing import List, TypedDict
+from typing import Any, Dict, List, TypedDict
 
 import dotenv
 import gradio as gr
@@ -25,9 +25,15 @@ dotenv.load_dotenv()
 # Neo4j 데이터베이스 연결이 불가능하면 구동 실패(Crash Early)를 일으킵니다.
 try:
     graphrag._init_once()
-    print("✅ [자가 진단 완료] Neo4j AuraDB 지식 그래프에 완벽하게 접속되었습니다!")
+    try:
+        print("✅ [자가 진단 완료] Neo4j AuraDB 지식 그래프에 완벽하게 접속되었습니다!")
+    except UnicodeEncodeError:
+        print("[OK] [자가 진단 완료] Neo4j AuraDB 지식 그래프에 완벽하게 접속되었습니다!")
 except Exception as e:
-    print(f"❌ [자가 진단 실패] Neo4j DB 연결 확인 중 에러가 발생했습니다: {e}")
+    try:
+        print(f"❌ [자가 진단 실패] Neo4j DB 연결 확인 중 에러가 발생했습니다: {e}")
+    except UnicodeEncodeError:
+        print(f"[FAIL] [자가 진단 실패] Neo4j DB 연결 확인 중 에러가 발생했습니다: {e}")
     raise e
 
 # ──────────────────────────────────────────
@@ -114,6 +120,161 @@ def chat(message: str, history: list) -> str:
     return result["answer"]
 
 
+def get_db_stats() -> Dict[str, Any]:
+    """Neo4j 데이터베이스로부터 실시간 지식 그래프 통계 및 요약을 안전하게 조회합니다.
+
+    Returns:
+        Dict[str, Any]: 기사 건수, 기업 수, 기술 수, 서비스 수, 분야 수, 벡터 청크 수 및 세부 목록
+    """
+    stats: Dict[str, Any] = {
+        "articles": 0,
+        "companies": 0,
+        "technologies": 0,
+        "services": 0,
+        "fields": 0,
+        "chunks": 0,
+        "companies_list": [],
+        "techs_list": [],
+        "recent_articles": [],
+    }
+    try:
+        from src.retrieval.finRetrieval import get_neo4j_driver
+        driver = get_neo4j_driver()
+        with driver.session() as session:
+            # 1. 각 노드별 갯수 조회
+            res_articles = session.run("MATCH (a:Article) RETURN count(a) as cnt").single()
+            if res_articles:
+                stats["articles"] = res_articles["cnt"]
+
+            res_companies = session.run("MATCH (c:AICompany) RETURN count(c) as cnt").single()
+            if res_companies:
+                stats["companies"] = res_companies["cnt"]
+
+            res_techs = session.run("MATCH (t:AITechnology) RETURN count(t) as cnt").single()
+            if res_techs:
+                stats["technologies"] = res_techs["cnt"]
+
+            res_services = session.run("MATCH (s:AIService) RETURN count(s) as cnt").single()
+            if res_services:
+                stats["services"] = res_services["cnt"]
+
+            res_fields = session.run("MATCH (f:AIField) RETURN count(f) as cnt").single()
+            if res_fields:
+                stats["fields"] = res_fields["cnt"]
+
+            res_chunks = session.run("MATCH (c:Content) RETURN count(c) as cnt").single()
+            if res_chunks:
+                stats["chunks"] = res_chunks["cnt"]
+
+            # 2. 기업 및 기술 목록 조회 (상위 15개)
+            res_comp_list = session.run("MATCH (c:AICompany) RETURN c.name as name LIMIT 15")
+            stats["companies_list"] = [r["name"] for r in res_comp_list]
+
+            res_tech_list = session.run("MATCH (t:AITechnology) RETURN t.name as name LIMIT 15")
+            stats["techs_list"] = [r["name"] for r in res_tech_list]
+
+            # 3. 최근 기사 목록 조회 (최근 5개)
+            res_art_list = session.run(
+                "MATCH (a:Article) "
+                "RETURN a.title as title, a.published_date as date, a.url as url "
+                "ORDER BY a.published_date DESC LIMIT 5"
+            )
+            stats["recent_articles"] = [
+                {"title": r["title"], "date": r["date"], "url": r["url"]}
+                for r in res_art_list
+            ]
+    except Exception as e:
+        print(f"⚠️ [통계 조회 실패] Neo4j 통계를 가져오는 데 실패했습니다: {e}")
+    return stats
+
+
+def build_stats_html(stats: Dict[str, Any]) -> str:
+    """조회된 지식 그래프 통계 정보들을 바탕으로 미려한 대시보드용 HTML을 생성합니다.
+
+    Args:
+        stats: get_db_stats() 함수에서 반환된 통계 딕셔너리
+
+    Returns:
+        str: 스타일링된 완성형 HTML 소스코드
+    """
+    # 1. 기업 뱃지 HTML 생성
+    comp_badges: str = ""
+    for c in stats.get("companies_list", []):
+        comp_badges += f'<span class="badge-item">{c}</span>'
+    if not comp_badges:
+        comp_badges = '<span style="font-size:12px; color:#94a3b8;">등록된 기업이 없습니다.</span>'
+
+    # 2. 기술 뱃지 HTML 생성
+    tech_badges: str = ""
+    for t in stats.get("techs_list", []):
+        tech_badges += f'<span class="badge-item tech-badge">{t}</span>'
+    if not tech_badges:
+        tech_badges = '<span style="font-size:12px; color:#94a3b8;">등록된 기술이 없습니다.</span>'
+
+    # 3. 최근 기사 리스트 HTML 생성
+    news_list_html: str = ""
+    for a in stats.get("recent_articles", []):
+        title = a["title"]
+        url = a["url"] if a["url"] and str(a["url"]).lower() != "nan" else "#"
+        target = 'target="_blank"' if url != "#" else ""
+        news_list_html += f"""
+        <div class="news-item">
+            <a class="news-title" href="{url}" {target}>{title}</a>
+            <div class="news-meta">🗓️ {a['date']} | 🔗 원문 보기</div>
+        </div>
+        """
+    if not news_list_html:
+        news_list_html = '<div style="font-size:12px; color:#94a3b8;">최근 수집된 기사가 없습니다.</div>'
+
+    html: str = f"""
+    <div class="dashboard-container">
+        <div style="font-size: 17px; font-weight: 800; color: #4f46e5; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
+            📊 <span>지식 그래프 대시보드</span>
+        </div>
+        <p style="font-size: 12px; color: #64748b; margin-top: -4px; margin-bottom: 16px;">Neo4j AuraDB 실시간 엔티티 연동 통계</p>
+        
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-lbl">📰 뉴스 기사</div>
+                <div class="stat-val">{stats['articles']}건</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-lbl">🏢 분석 기업</div>
+                <div class="stat-val">{stats['companies']}개</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-lbl">💡 핵심 기술</div>
+                <div class="stat-val">{stats['technologies']}개</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-lbl">⚙️ 등록 서비스</div>
+                <div class="stat-val">{stats['services']}개</div>
+            </div>
+            <div class="stat-card" style="grid-column: span 2;">
+                <div class="stat-lbl">🧩 지식 벡터 밀도 (Graph Vector Density)</div>
+                <div class="stat-val" style="color: #059669;">{stats['chunks']} Chunks</div>
+            </div>
+        </div>
+        
+        <div class="section-subtitle">🏢 주요 분석 기업</div>
+        <div class="badge-container">
+            {comp_badges}
+        </div>
+        
+        <div class="section-subtitle">💡 주요 핵심 기술</div>
+        <div class="badge-container">
+            {tech_badges}
+        </div>
+        
+        <div class="section-subtitle">📰 최신 실시간 뉴스 피드</div>
+        <div class="news-feed">
+            {news_list_html}
+        </div>
+    </div>
+    """
+    return html
+
+
 # ──────────────────────────────────────────
 # 5. Gradio UI 구성
 # ──────────────────────────────────────────
@@ -130,6 +291,220 @@ theme_obj = gr.themes.Soft(
     secondary_hue="blue",
 )
 
+custom_css: str = """
+/* 대시보드 메인 컨테이너 */
+.dashboard-container {
+    background-color: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 20px;
+    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+}
+.dark .dashboard-container {
+    background-color: #0f172a;
+    border-color: #1e293b;
+}
+
+/* 통계 그리드 및 카드 */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    margin-bottom: 20px;
+}
+.stat-card {
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 12px;
+    text-align: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+    transition: all 0.2s ease-in-out;
+}
+.stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
+}
+.dark .stat-card {
+    background: #1e293b;
+    border-color: #334155;
+    color: #f1f5f9;
+}
+.stat-val {
+    font-size: 20px;
+    font-weight: 800;
+    color: #4f46e5;
+    margin-top: 4px;
+}
+.dark .stat-val {
+    color: #818cf8;
+}
+.stat-lbl {
+    font-size: 11px;
+    color: #64748b;
+    font-weight: 500;
+}
+.dark .stat-lbl {
+    color: #94a3b8;
+}
+
+/* 뱃지 리스트 스타일 */
+.badge-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 16px;
+}
+.badge-item {
+    background-color: #e0e7ff;
+    color: #3730a3;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 20px;
+    border: 1px solid #c7d2fe;
+    transition: all 0.2s;
+}
+.badge-item:hover {
+    background-color: #4f46e5;
+    color: white;
+    transform: scale(1.05);
+}
+.dark .badge-item {
+    background-color: #1e1b4b;
+    color: #c7d2fe;
+    border-color: #312e81;
+}
+.dark .badge-item:hover {
+    background-color: #818cf8;
+    color: #0f172a;
+}
+
+.tech-badge {
+    background-color: #ecfdf5;
+    color: #065f46;
+    border-color: #a7f3d0;
+}
+.tech-badge:hover {
+    background-color: #10b981;
+    color: white;
+}
+.dark .tech-badge {
+    background-color: #064e3b;
+    color: #a7f3d0;
+    border-color: #065f46;
+}
+.dark .tech-badge:hover {
+    background-color: #34d399;
+    color: #064e3b;
+}
+
+/* 최근 뉴스 타임라인 스타일 */
+.news-feed {
+    margin-top: 15px;
+}
+.news-item {
+    border-left: 3px solid #6366f1;
+    padding-left: 12px;
+    margin-bottom: 12px;
+    position: relative;
+}
+.news-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e293b;
+    text-decoration: none;
+    line-height: 1.4;
+    display: block;
+}
+.news-title:hover {
+    color: #4f46e5;
+    text-decoration: underline;
+}
+.dark .news-title {
+    color: #cbd5e1;
+}
+.dark .news-title:hover {
+    color: #818cf8;
+}
+.news-meta {
+    font-size: 10px;
+    color: #94a3b8;
+    margin-top: 2px;
+}
+
+/* 서브타이틀 헤더 스타일 */
+.section-subtitle {
+    font-size: 13px;
+    font-weight: 700;
+    color: #0f172a;
+    margin: 18px 0 10px 0;
+    border-bottom: 2px solid #e2e8f0;
+    padding-bottom: 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.dark .section-subtitle {
+    color: #f8fafc;
+    border-color: #334155;
+}
+
+/* 챗봇 버튼 고대비화 스타일 (흰색으로 안 보이던 현상 해결) */
+button.primary, 
+.primary-btn, 
+button.lg.primary, 
+button.sm.primary,
+button.variant-primary {
+    background-color: #4f46e5 !important;
+    color: white !important;
+    font-weight: 800 !important;
+    border: none !important;
+    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2) !important;
+    transition: all 0.2s ease-in-out !important;
+}
+button.primary:hover, 
+.primary-btn:hover, 
+button.variant-primary:hover {
+    background-color: #4338ca !important;
+    box-shadow: 0 6px 12px rgba(79, 70, 229, 0.3) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* secondary 및 기타 유틸리티 버튼 스타일 */
+button.secondary, 
+button.lg.secondary, 
+button.sm.secondary, 
+button.wrap,
+button.variant-secondary,
+.secondary-btn {
+    background-color: #f1f5f9 !important;
+    color: #334155 !important;
+    border: 1px solid #cbd5e1 !important;
+    font-weight: 700 !important;
+    transition: all 0.2s ease-in-out !important;
+}
+.dark button.secondary, 
+.dark button.variant-secondary, 
+.dark .secondary-btn {
+    background-color: #1e293b !important;
+    color: #f1f5f9 !important;
+    border-color: #475569 !important;
+}
+button.secondary:hover, 
+button.variant-secondary:hover,
+.secondary-btn:hover {
+    background-color: #e2e8f0 !important;
+    color: #0f172a !important;
+}
+.dark button.secondary:hover, 
+.dark button.variant-secondary:hover {
+    background-color: #334155 !important;
+    color: white !important;
+}
+"""
+
 interface_kwargs = {
     "fn": chat,
     "chatbot": gr.Chatbot(height=500),
@@ -155,13 +530,42 @@ launch_kwargs = {
     "server_port": 7860,
 }
 
-# 버전에 맞춘 테마 주입 파이프라인
+# 버전에 맞춘 테마 및 CSS 주입 파이프라인 (Gradio 6.x 호환성 보장)
+blocks_kwargs = {}
 if gradio_major < 5:
     interface_kwargs["theme"] = theme_obj
+    blocks_kwargs["theme"] = theme_obj
+    blocks_kwargs["css"] = custom_css
+elif gradio_major < 6:
+    launch_kwargs["theme"] = theme_obj
+    blocks_kwargs["theme"] = theme_obj
+    blocks_kwargs["css"] = custom_css
 else:
     launch_kwargs["theme"] = theme_obj
-
-demo = gr.ChatInterface(**interface_kwargs)
+    launch_kwargs["css"] = custom_css
+
+# Blocks를 활용한 2컬럼 레이아웃 대시보드 개편
+with gr.Blocks(**blocks_kwargs) as demo:
+    # 상단 대형 타이틀 및 설명
+    gr.HTML("<h1 style='text-align: center; font-size: 28px; font-weight: 800; color: #4f46e5; margin-top: 20px; margin-bottom: 5px;'>FinNode — AI 기업 트렌드 분석 챗봇</h1>")
+    gr.Markdown("<p style='text-align: center; color: #64748b; font-size: 14px; margin-bottom: 25px;'>최신 AI 뉴스를 기반으로 구축된 지식 그래프(GraphRAG)에서 답변합니다.</p>")
+    
+    with gr.Row():
+        # 왼쪽 컬럼: 실시간 지식 그래프 요약 대시보드 (scale=1)
+        with gr.Column(scale=1, min_width=350):
+            stats_data = get_db_stats()
+            stats_html = build_stats_html(stats_data)
+            gr.HTML(stats_html)
+            
+        # 오른쪽 컬럼: 자연어 RAG 챗봇 인터페이스 (scale=2)
+        with gr.Column(scale=2):
+            # 중복 노출을 방지하기 위해 상단 타이틀/설명은 ChatInterface kwargs에서 제거
+            chatbot_interface_kwargs = interface_kwargs.copy()
+            chatbot_interface_kwargs.pop("title", None)
+            chatbot_interface_kwargs.pop("description", None)
+            chatbot_interface_kwargs.pop("theme", None)
+            
+            gr.ChatInterface(**chatbot_interface_kwargs)
 
 if __name__ == "__main__":
     demo.launch(**launch_kwargs)

tests/smoke_test_rag.py

@@ -15,6 +15,10 @@ smoke_test_rag.py — GraphRAG 3대 시나리오 현장 검증 스크립트
 import os
 import sys
 import time
+import io
+
+# Windows 환경에서 유니코드 이모지 출력 시 UnicodeEncodeError(cp949) 방지를 위한 stdout 인코딩 재설정
+sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
 
 import dotenv