fix: delete temporary css fix files and consolidate to ui_templates

fix_css.py

@@ -1,185 +0,0 @@
-with open('app.py', 'r', encoding='utf-8') as f:
-    content = f.read()
-
-start_marker = 'FINAL_CSS = CUSTOM_CSS + """'
-end_marker = '"""\n\nlaunch_kwargs = {'
-
-start_idx = content.find(start_marker)
-end_idx = content.find(end_marker)
-
-if start_idx != -1 and end_idx != -1:
-    before = content[:start_idx + len(start_marker)]
-    after = content[end_idx:]
-    
-    new_css = '''
-/* ── 전체 화면 너비 대폭 확대 ── */
-.gradio-container {
-    max-width: 1400px !important;
-    width: 95% !important;
-    margin: 0 auto !important;
-}
-
-/* ── 챗봇 컨테이너 짤림 원천 봉쇄 ── */
-div[data-testid="chatbot"], .chatbot-container, .chatbot {
-    border: none !important;
-    overflow: visible !important; 
-}
-
-/* ── 챗봇 내부 Placeholder(소개글 영역) 위쪽 짤림 영구 방어 ── */
-.placeholder, [class*="placeholder"] {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    justify-content: flex-start !important; /* 위쪽 짤림 방지 */
-    padding-top: 5% !important; /* 위에서 살짝 내림 */
-    height: 50% !important; 
-    flex-grow: 0 !important; 
-    overflow: visible !important; 
-    margin: 0 auto !important;
-}
-
-/* ── 소개글(Prose) 쿨톤 회색 웰컴 카드 ── */
-.placeholder .prose {
-    background: #f8fafc !important; /* 대시보드 카드와 동일한 색상 */
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    padding: 16px 24px !important; /* 높이 세이브 */
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
-    max-width: 700px !important;
-    margin: 0 auto 12px auto !important;
-    display: block !important;
-    height: auto !important;
-}
-.placeholder h3, [class*="placeholder"] h3 {
-    color: #334155 !important; 
-    font-weight: 800 !important;
-    margin-top: 0 !important;
-    margin-bottom: 12px !important;
-}
-.placeholder .prose ul {
-    list-style-type: none !important;
-    padding-left: 0 !important;
-    margin-bottom: 12px !important;
-}
-.placeholder .prose li {
-    margin-bottom: 4px !important; 
-    color: #475569 !important;
-    font-size: 14px !important;
-    line-height: 1.5 !important;
-}
-.placeholder .prose p:last-child {
-    font-weight: 700 !important;
-    color: #4c1d95 !important; 
-    background: #f3e8ff !important; 
-    padding: 8px 16px !important;
-    border-radius: 8px !important;
-    display: inline-block !important;
-    margin-bottom: 0 !important;
-}
-
-/* ── 예시 질문 컨테이너 (그리드 배치) ── */
-[class*="examples"], .gr-samples-wrapper, .examples-container {
-    display: grid !important;
-    grid-template-columns: repeat(2, 1fr) !important;
-    gap: 12px !important;
-    width: 100% !important;
-    max-width: 900px !important; /* 잘림 방지 */
-    margin: 0 auto 40px auto !important;
-    background: transparent !important;
-    border: none !important;
-}
-
-/* 개별 버튼 디자인 (연보라색 테마 & 강력한 중앙 정렬) */
-.examples-container button, div[data-testid="chatbot"] button.example, button.example, .example-btn {
-    border-radius: 8px !important;
-    padding: 16px !important;
-    text-align: center !important; /* 텍스트 가운데 정렬 */
-    font-size: 14px !important;
-    font-weight: 600 !important;
-    color: #4c1d95 !important; 
-    background: #f5f3ff !important; /* 진짜 연보라색 배경 */
-    background-color: #f5f3ff !important; /* 덮어쓰기 철벽 방어 */
-    border: 1px solid #e9d5ff !important; 
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
-    transition: all 0.2s ease-in-out !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important; /* 완벽 중앙 배치 */
-    min-height: 80px !important; 
-    width: 100% !important;
-    white-space: normal !important; /* 두줄 허용하되 900px 덕분에 보통 한 줄로 나옴 */
-}
-
-.examples-container button:hover, div[data-testid="chatbot"] button.example:hover, button.example:hover, .example-btn:hover {
-    border-color: #a855f7 !important; 
-    background: #f3e8ff !important; 
-    background-color: #f3e8ff !important; 
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
-    color: #7c3aed !important;
-}
-
-/* ── 메시지 말풍선 정리 ── */
-.message.user, [data-testid="user"] .message {
-    background-color: #111827 !important;
-    border-radius: 12px 12px 0 12px !important;
-    padding: 7px 13px !important; 
-    margin: 2px 0 !important; 
-    border: none !important;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
-    min-height: unset !important; 
-}
-[data-testid="user"] > div, .bubble-wrap [data-testid="user"], .message-wrap.user > div, .message-row.user {
-    background: transparent !important;
-    background-color: transparent !important;
-    border: none !important;
-}
-[data-testid="user"] .message *, .message.user * {
-    color: #ffffff !important;
-    line-height: 1.4 !important; 
-    margin: 0 !important; 
-}
-[data-testid="bot"] .message, [data-testid="bot"] > div, .message-wrap.bot > div, .message.bot, .message-row.bot .message {
-    background-color: #ffffff !important;
-    color: #1f2937 !important;
-    border: 1px solid #e5e7eb !important;
-    border-radius: 12px 12px 12px 0 !important;
-    padding: 16px 20px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
-}
-
-/* ── 피드백 및 전송 버튼 ── */
-.message-buttons, button[aria-label="Good response"], button[aria-label="Bad response"], .like-dislike-area { display: none !important; }
-button[class*="submit-btn"], #submit-btn, button[id*="submit"], button.submit-button {
-    background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%) !important;
-    color: white !important;
-    border-radius: 8px !important;
-    font-weight: bold !important;
-    border: none !important;
-    display: block !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-}
-
-/* ── 메인 레이아웃 사이드바 균형 최적화 ── */
-.sidebar-container {
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    padding: 24px 20px !important;
-    background: #ffffff !important;
-    height: 700px !important; 
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
-    display: flex !important;
-    flex-direction: column !important;
-}
-.news-feed-container {
-    flex-grow: 1 !important;
-    max-height: 250px !important;
-    overflow-y: auto !important;
-}
-'''
-    with open('app.py', 'w', encoding='utf-8') as f:
-        f.write(before + '\n' + new_css + '\n' + after)
-    print('CSS Update Success')
-else:
-    print('Markers not found')

fix_css2.py

@@ -1,245 +0,0 @@
-import sys
-
-with open('app.py', 'r', encoding='utf-8') as f:
-    lines = f.readlines()
-
-# 157번째 라인부터 문제가 생김 (res_comp = session.run(...))
-# 156번째 라인은 '# 상위 5개 회사 키워드 리스트업 추가' 임
-cut_idx = -1
-for i, line in enumerate(lines):
-    if '# 상위 5개 회사 키워드 리스트업 추가' in line:
-        cut_idx = i
-        break
-
-if cut_idx == -1:
-    print("Cannot find cut index!")
-    sys.exit(1)
-
-# 그 아래로 launch_kwargs = { 가 있는 라인을 찾음
-end_idx = -1
-for i in range(cut_idx, len(lines)):
-    if 'launch_kwargs = {' in line or 'launch_kwargs =' in lines[i]:
-        end_idx = i
-        break
-
-if end_idx == -1:
-    print("Cannot find end index!")
-    sys.exit(1)
-
-before_lines = lines[:cut_idx + 1]
-after_lines = lines[end_idx:]
-
-correct_middle = '''            res_comp = session.run(
-                "MATCH (c:AICompany) "
-                "OPTIONAL MATCH (a:Article)-[:MENTIONS]->(c) "
-                "RETURN c.name as name, count(a) as cnt "
-                "ORDER BY cnt DESC LIMIT 5"
-            )
-            stats["companies_list"] = [{"name": row["name"]} for row in res_comp]
-
-            res_art = 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 4"
-            )
-            stats["recent_articles"] = [
-                {"title": r["title"], "date": r["date"], "url": r["url"]}
-                for r in res_art
-            ]
-    except Exception as e:
-        print(f"⚠️ [통계 조회 실패] {e}")
-    return stats
-
-
-# ──────────────────────────────────────────
-# 5. Gradio UI 구성
-# ──────────────────────────────────────────
-
-theme_obj = gr.themes.Soft(primary_hue="indigo", secondary_hue="slate")
-
-CHATBOT_DESCRIPTION = """
-### 🌌 국내 AI 뉴스 기사를 기반으로 구축된 지식 그래프(GraphRAG)에 질문하세요.
-
-- 📰 **기업별 AI 트렌드** — 삼성, 카카오, 네이버 등 주요 기업의 최신 AI 동향
-- 🔬 **기술 키워드 분석** — LLM, 생성형 AI, 파운데이션 모델 등 핵심 기술 정리
-- 🔗 **실제 뉴스 출처 제공** — 답변마다 근거 기사 링크 포함
-
-👇 **아래 예시 질문 버튼을 클릭하거나 직접 입력해 보세요.**
-"""
-
-FINAL_CSS = CUSTOM_CSS + """
-/* ── 전체 화면 너비 대폭 확대 ── */
-.gradio-container {
-    max-width: 1400px !important;
-    width: 95% !important;
-    margin: 0 auto !important;
-}
-
-/* ── 챗봇 컨테이너 테두리 및 짤림(Overflow) 방지 ── */
-div[data-testid="chatbot"], .chatbot-container, .chatbot {
-    border: none !important;
-    overflow: visible !important; 
-}
-
-/* ── 챗봇 내부 Placeholder(소개글 영역) 위쪽 짤림 영구 방어 ── */
-.placeholder, [class*="placeholder"] {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    justify-content: flex-start !important; /* 위쪽 짤림 방지 */
-    padding-top: 5% !important; /* 위에서 살짝 내림 */
-    height: 50% !important; 
-    flex-grow: 0 !important; 
-    overflow: visible !important; 
-    margin: 0 auto !important;
-}
-
-/* ── 소개글(Prose) 아이보리/쿨톤 회색 웰컴 카드 ── */
-.placeholder .prose {
-    background: #f8fafc !important; /* 대시보드 카드와 동일한 색상 */
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    padding: 16px 24px !important; /* 높이 세이브 */
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
-    max-width: 700px !important;
-    margin: 0 auto 12px auto !important;
-    display: block !important;
-    height: auto !important;
-}
-.placeholder h3, [class*="placeholder"] h3 {
-    color: #334155 !important; 
-    font-weight: 800 !important;
-    margin-top: 0 !important;
-    margin-bottom: 12px !important;
-}
-.placeholder .prose ul {
-    list-style-type: none !important;
-    padding-left: 0 !important;
-    margin-bottom: 12px !important;
-}
-.placeholder .prose li {
-    margin-bottom: 4px !important; 
-    color: #475569 !important;
-    font-size: 14px !important;
-    line-height: 1.5 !important;
-}
-.placeholder .prose p:last-child {
-    font-weight: 700 !important;
-    color: #4c1d95 !important; 
-    background: #f3e8ff !important; 
-    padding: 8px 16px !important;
-    border-radius: 8px !important;
-    display: inline-block !important;
-    margin-bottom: 0 !important;
-}
-
-/* ── 예시 질문 컨테이너 (그리드 배치) ── */
-[class*="examples"], .gr-samples-wrapper, .examples-container {
-    display: grid !important;
-    grid-template-columns: repeat(2, 1fr) !important;
-    gap: 12px !important;
-    width: 100% !important;
-    max-width: 900px !important; /* 잘림 방지 */
-    margin: 0 auto 40px auto !important;
-    background: transparent !important;
-    border: none !important;
-}
-
-/* 개별 버튼 디자인 (연보라색 테마 & 강력한 중앙 정렬) */
-.examples-container button, div[data-testid="chatbot"] button.example, button.example, .example-btn {
-    border-radius: 8px !important;
-    padding: 16px !important;
-    text-align: center !important; /* 텍스트 가운데 정렬 */
-    font-size: 14px !important;
-    font-weight: 600 !important;
-    color: #4c1d95 !important; 
-    background: #f5f3ff !important; /* 진짜 연보라색 배경 */
-    background-color: #f5f3ff !important; /* 덮어쓰기 철벽 방어 */
-    border: 1px solid #e9d5ff !important; 
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
-    transition: all 0.2s ease-in-out !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important; /* 완벽 중앙 배치 */
-    min-height: 80px !important; 
-    width: 100% !important;
-    white-space: normal !important; /* 두줄 허용하되 900px 덕분에 보통 한 줄로 나옴 */
-}
-
-.examples-container button:hover, div[data-testid="chatbot"] button.example:hover, button.example:hover, .example-btn:hover {
-    border-color: #a855f7 !important; 
-    background: #f3e8ff !important; 
-    background-color: #f3e8ff !important; 
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
-    color: #7c3aed !important;
-}
-
-/* ── 메시지 말풍선 정리 ── */
-.message.user, [data-testid="user"] .message {
-    background-color: #111827 !important;
-    border-radius: 12px 12px 0 12px !important;
-    padding: 7px 13px !important; 
-    margin: 2px 0 !important; 
-    border: none !important;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
-    min-height: unset !important; 
-}
-[data-testid="user"] > div, .bubble-wrap [data-testid="user"], .message-wrap.user > div, .message-row.user {
-    background: transparent !important;
-    background-color: transparent !important;
-    border: none !important;
-}
-[data-testid="user"] .message *, .message.user * {
-    color: #ffffff !important;
-    line-height: 1.4 !important; 
-    margin: 0 !important; 
-}
-[data-testid="bot"] .message, [data-testid="bot"] > div, .message-wrap.bot > div, .message.bot, .message-row.bot .message {
-    background-color: #ffffff !important;
-    color: #1f2937 !important;
-    border: 1px solid #e5e7eb !important;
-    border-radius: 12px 12px 12px 0 !important;
-    padding: 16px 20px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
-}
-
-/* ── 피드백 및 전송 버튼 ── */
-.message-buttons, button[aria-label="Good response"], button[aria-label="Bad response"], .like-dislike-area { display: none !important; }
-button[class*="submit-btn"], #submit-btn, button[id*="submit"], button.submit-button {
-    background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%) !important;
-    color: white !important;
-    border-radius: 8px !important;
-    font-weight: bold !important;
-    border: none !important;
-    display: block !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-}
-
-/* ── 메인 레이아웃 사이드바 균형 최적화 ── */
-.sidebar-container {
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    padding: 24px 20px !important;
-    background: #ffffff !important;
-    height: 700px !important; 
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
-    display: flex !important;
-    flex-direction: column !important;
-}
-.news-feed-container {
-    flex-grow: 1 !important;
-    max-height: 250px !important;
-    overflow-y: auto !important;
-}
-"""
-
-'''
-
-final_content = "".join(before_lines) + "\n" + correct_middle + "\n" + "".join(after_lines)
-
-with open('app.py', 'w', encoding='utf-8') as f:
-    f.write(final_content)
-
-print("APP.PY PERFECTLY RECOVERED AND UPDATED!")

fix_css3.py

@@ -1,203 +0,0 @@
-import sys
-
-with open('app.py', 'r', encoding='utf-8') as f:
-    lines = f.readlines()
-
-start_idx = -1
-for i, line in enumerate(lines):
-    if 'FINAL_CSS = CUSTOM_CSS + """' in line:
-        start_idx = i
-        break
-
-if start_idx == -1:
-    print('Cannot find FINAL_CSS')
-    sys.exit(1)
-
-clean_css = '''FINAL_CSS = CUSTOM_CSS + """
-/* ── 전체 화면 너비 확대 ── */
-.gradio-container {
-    max-width: 1400px !important;
-    width: 95% !important;
-    margin: 0 auto !important;
-}
-
-/* ── 챗봇 컨테이너 테두리 제거 ── */
-div[data-testid="chatbot"], .chatbot-container, .chatbot {
-    border: none !important;
-    overflow: visible !important; 
-}
-
-/* ── 챗봇 내부 Placeholder(소개글 영역) 상단 짤림 영구 차단 ── */
-.placeholder, [class*="placeholder"] {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    justify-content: flex-start !important; /* 항상 위에서부터 뿌림 */
-    padding-top: 40px !important; /* 상단 여백 넉넉히 주어 짤림 절대 불가 */
-    height: 100% !important; /* 전체 높이 사용 */
-    min-height: 400px !important;
-    flex-grow: 1 !important; 
-    overflow: visible !important; 
-    margin: 0 auto !important;
-}
-
-/* ── 소개글(Prose) 웰컴 보드 (위쪽 절반) ── */
-.placeholder .prose {
-    background: #f8fafc !important; /* 쿨톤 회색 */
-    border: 1px solid #e2e8f0 !important;
-    border-bottom: none !important; /* 아래쪽 경계선 제거로 결합 준비 */
-    border-radius: 12px 12px 0 0 !important; /* 아래쪽 모서리 직각으로 펴서 결합 준비 */
-    padding: 24px 24px 10px 24px !important; 
-    max-width: 800px !important; /* 800px 고정너비 */
-    width: 100% !important;
-    margin: 0 auto !important; 
-    display: block !important;
-    position: relative !important;
-    z-index: 2 !important; /* 아래쪽 컨테이너 위로 살짝 덮게 함 */
-}
-.placeholder h3, [class*="placeholder"] h3 {
-    color: #334155 !important; 
-    font-weight: 800 !important;
-    margin-top: 0 !important;
-    margin-bottom: 12px !important;
-}
-.placeholder .prose ul {
-    list-style-type: none !important;
-    padding-left: 0 !important;
-    margin-bottom: 12px !important;
-}
-.placeholder .prose li {
-    margin-bottom: 4px !important; 
-    color: #475569 !important;
-    font-size: 14px !important;
-    line-height: 1.5 !important;
-}
-.placeholder .prose p:last-child {
-    font-weight: 700 !important;
-    color: #4c1d95 !important; 
-    background: #f3e8ff !important; 
-    padding: 8px 16px !important;
-    border-radius: 8px !important;
-    display: inline-block !important;
-    margin-bottom: 0 !important;
-}
-
-/* ── 예시 질문 컨테이너 (아래쪽 절반: 보드 병합 완료) ── */
-[class*="examples"], .gr-samples-wrapper, .examples-container {
-    display: grid !important;
-    grid-template-columns: repeat(2, 1fr) !important;
-    gap: 12px !important;
-    width: 100% !important;
-    max-width: 800px !important; /* 소개글과 800px 너비 일치 */
-    
-    /* 🌟 핵심: 위쪽 보드와 완벽 결합을 위한 마이너스 마진 🌟 */
-    margin: -32px auto 40px auto !important; /* 32px 갭 제거 (Gradio 기본 갭) */
-    
-    background: #f8fafc !important; /* 소개글과 동일한 회색 배경 */
-    border: 1px solid #e2e8f0 !important;
-    border-top: none !important; /* 위쪽 경계선 제거 */
-    border-radius: 0 0 12px 12px !important; /* 위쪽 모서리 직각으로 펴서 결합 완료 */
-    padding: 10px 24px 24px 24px !important; 
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; 
-    position: relative !important;
-    z-index: 1 !important; /* 위쪽 컨테이너 밑으로 겹치게 하여 흰줄 완전 소멸 */
-}
-
-/* 개별 버튼 디자인 (연보라색 테마 & 강력한 중앙 정렬) */
-.examples-container button, div[data-testid="chatbot"] button.example, button.example, .example-btn {
-    border-radius: 8px !important;
-    padding: 16px !important;
-    text-align: center !important; /* 텍스트 가운데 정렬 */
-    font-size: 14px !important;
-    font-weight: 600 !important;
-    color: #4c1d95 !important; 
-    background: #f5f3ff !important; /* 진짜 연보라색 배경 */
-    background-color: #f5f3ff !important; /* 덮어쓰기 철벽 방어 */
-    border: 1px solid #e9d5ff !important; 
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
-    transition: all 0.2s ease-in-out !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important; /* 완벽 중앙 배치 */
-    min-height: 80px !important; 
-    width: 100% !important;
-    white-space: normal !important; 
-}
-
-.examples-container button:hover, div[data-testid="chatbot"] button.example:hover, button.example:hover, .example-btn:hover {
-    border-color: #a855f7 !important; 
-    background: #f3e8ff !important; 
-    background-color: #f3e8ff !important; 
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
-    color: #7c3aed !important;
-}
-
-/* ── 메시지 말풍선 정리 ── */
-.message.user, [data-testid="user"] .message {
-    background-color: #111827 !important;
-    border-radius: 12px 12px 0 12px !important;
-    padding: 7px 13px !important; 
-    margin: 2px 0 !important; 
-    border: none !important;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
-    min-height: unset !important; 
-}
-[data-testid="user"] > div, .bubble-wrap [data-testid="user"], .message-wrap.user > div, .message-row.user {
-    background: transparent !important;
-    background-color: transparent !important;
-    border: none !important;
-}
-[data-testid="user"] .message *, .message.user * {
-    color: #ffffff !important;
-    line-height: 1.4 !important; 
-    margin: 0 !important; 
-}
-[data-testid="bot"] .message, [data-testid="bot"] > div, .message-wrap.bot > div, .message.bot, .message-row.bot .message {
-    background-color: #ffffff !important;
-    color: #1f2937 !important;
-    border: 1px solid #e5e7eb !important;
-    border-radius: 12px 12px 12px 0 !important;
-    padding: 16px 20px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
-}
-
-/* ── 피드백 및 전송 버튼 ── */
-.message-buttons, button[aria-label="Good response"], button[aria-label="Bad response"], .like-dislike-area { display: none !important; }
-button[class*="submit-btn"], #submit-btn, button[id*="submit"], button.submit-button {
-    background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%) !important;
-    color: white !important;
-    border-radius: 8px !important;
-    font-weight: bold !important;
-    border: none !important;
-    display: block !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-}
-
-/* ── 메인 레이아웃 사이드바 균형 최적화 ── */
-.sidebar-container {
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    padding: 24px 20px !important;
-    background: #ffffff !important;
-    height: 700px !important; 
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
-    display: flex !important;
-    flex-direction: column !important;
-}
-.news-feed-container {
-    flex-grow: 1 !important;
-    max-height: 250px !important;
-    overflow-y: auto !important;
-}
-"""
-'''
-
-before_lines = lines[:start_idx]
-final_content = ''.join(before_lines) + clean_css
-
-with open('app.py', 'w', encoding='utf-8') as f:
-    f.write(final_content)
-
-print('Clean CSS recovery done!')

src/graphBuilder/scrapping/finScrapping.py

@@ -14,7 +14,7 @@ categories = {
     "경제": "https://news.naver.com/section/101",
     "IT/과학": "https://news.naver.com/section/105",
 }
-NUM_ARTICLES_PER_CATEGORY = 300
+NUM_ARTICLES_PER_CATEGORY = 1500
 
 # AI 핀테크 키워드 (FinNode 프로젝트 전용)
 FINTECH_AI_KEYWORDS = [
@@ -43,7 +43,7 @@ def get_article_links(driver, category_url, num_articles):
     print(f"  [LINK] 로드 완료 (title: {driver.title})")
 
     print("  [LINK] 더 많은 기사를 불러오기 위해 스크롤 및 '기사 더보기' 버튼을 클릭합니다...")
-    for _ in range(15):  # 최대 15회 스크롤/클릭 시도
+    for _ in range(150):  # 최대 150회 스크롤/클릭 시도
         driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
         time.sleep(1.0)
         try:

src/utils/ui_templates.py

@@ -15,12 +15,17 @@ CUSTOM_CSS: str = """
 /* ── Google Fonts 로드 ── */
 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;600&display=swap');
 
-/* ── 전체 배경 / 기본 폰트 ── */
+/* ── 전체 배경 / 기본 폰트 / 화면 너비 확대 ── */
 body, .gradio-container {
     background-color: #F6F5FA !important;
     font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
     color: #1e3a5f !important;
 }
+.gradio-container {
+    max-width: 1400px !important;
+    width: 95% !important;
+    margin: 0 auto !important;
+}
 
 /* ── Ambient glow ── */
 .ambient-glow {
@@ -37,8 +42,12 @@ body, .gradio-container {
 .sidebar-container {
     border: 1px solid #e2e8f0 !important;
     border-radius: 12px !important;
-    padding: 20px 18px !important;
+    padding: 24px 20px !important;
     background: #ffffff !important;
+    height: 700px !important; 
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
+    display: flex !important;
+    flex-direction: column !important;
 }
 
 /* ── 구분선 ── */
@@ -128,13 +137,13 @@ body, .gradio-container {
 }
 .keyword-badge {
     display: inline-block;
-    background: transparent !important; /* 배경색 없음 */
-    border: 1px solid #ddd6fe !important; /* 아주 연한 보라 테두리 */
+    background: transparent !important;
+    border: 1px solid #ddd6fe !important;
     border-radius: 9999px !important;
     padding: 4px 12px !important;
     font-size: 11px !important;
     font-weight: 600 !important;
-    color: #8b5cf6 !important; /* 기업(진한 보라)보다 연하고 밝은 보라 텍스트 */
+    color: #8b5cf6 !important;
 }
 .keyword-badge-first {
     background: transparent !important;
@@ -151,13 +160,13 @@ body, .gradio-container {
 }
 .company-badge {
     display: inline-block;
-    background: transparent !important; /* 배경색 없음 */
-    border: 1px solid #ddd6fe !important; /* 아주 연한 보라 테두리 */
+    background: transparent !important;
+    border: 1px solid #ddd6fe !important;
     border-radius: 9999px !important;
     padding: 4px 12px !important;
     font-size: 11px !important;
     font-weight: 600 !important;
-    color: #8b5cf6 !important; /* 주요 기술 키워드와 동일한 색상 */
+    color: #8b5cf6 !important;
 }
 .company-badge-first {
     background: transparent !important;
@@ -167,8 +176,9 @@ body, .gradio-container {
 
 /* ── 최신 뉴스 피드 ── */
 .news-feed-container {
-    max-height: 260px;
-    overflow-y: auto;
+    flex-grow: 1 !important;
+    max-height: 250px !important;
+    overflow-y: auto !important;
 }
 .news-feed-container::-webkit-scrollbar { width: 3px; }
 .news-feed-container::-webkit-scrollbar-track { background: transparent; }
@@ -212,45 +222,117 @@ body, .gradio-container {
     margin-top: 4px;
 }
 
-/* ── 예시 질문 버튼 (2x2 그리드) ── */
+/* ── 챗봇 컨테이너 테두리 제거 ── */
+div[data-testid="chatbot"], .chatbot-container, .chatbot {
+    border: none !important;
+    overflow: visible !important; 
+}
+
+/* ── 챗봇 내부 Placeholder(소개글 영역) 상단 짤림 영구 차단 ── */
+.placeholder, [class*="placeholder"] {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    padding-top: 40px !important;
+    height: 100% !important;
+    min-height: 400px !important;
+    flex-grow: 1 !important; 
+    overflow: visible !important; 
+    margin: 0 auto !important;
+}
+
+/* ── 소개글(Prose) 웰컴 보드 (위쪽 절반) ── */
+.placeholder .prose {
+    background: #f8fafc !important;
+    border: 1px solid #e2e8f0 !important;
+    border-bottom: none !important;
+    border-radius: 12px 12px 0 0 !important;
+    padding: 24px 24px 10px 24px !important; 
+    max-width: 800px !important;
+    width: 100% !important;
+    margin: 0 auto !important; 
+    display: block !important;
+    position: relative !important;
+    z-index: 2 !important;
+}
+.placeholder h3, [class*="placeholder"] h3 {
+    color: #334155 !important; 
+    font-weight: 800 !important;
+    margin-top: 0 !important;
+    margin-bottom: 12px !important;
+}
+.placeholder .prose ul {
+    list-style-type: none !important;
+    padding-left: 0 !important;
+    margin-bottom: 12px !important;
+}
+.placeholder .prose li {
+    margin-bottom: 4px !important; 
+    color: #475569 !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+.placeholder .prose p:last-child {
+    font-weight: 700 !important;
+    color: #4c1d95 !important; 
+    background: #f3e8ff !important; 
+    padding: 8px 16px !important;
+    border-radius: 8px !important;
+    display: inline-block !important;
+    margin-bottom: 0 !important;
+}
+
+/* ── 예시 질문 컨테이너 (아래쪽 절반: 보드 병합 완료) ── */
 [class*="examples"], .gr-samples-wrapper, .examples-container {
     display: grid !important;
     grid-template-columns: repeat(2, 1fr) !important;
-    gap: 8px !important;
-    margin-top: 12px !important;
-    margin-bottom: 8px !important;
-    background: transparent !important;
-    border: none !important;
+    gap: 12px !important;
+    width: 100% !important;
+    max-width: 800px !important;
+    margin: -32px auto 40px auto !important;
+    background: #f8fafc !important;
+    border: 1px solid #e2e8f0 !important;
+    border-top: none !important;
+    border-radius: 0 0 12px 12px !important;
+    padding: 10px 24px 24px 24px !important; 
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; 
+    position: relative !important;
+    z-index: 1 !important;
 }
-[class*="examples"] button {
-    text-align: left !important;
-    padding: 11px 13px !important;
-    background: rgba(255,255,255,0.70) !important;
-    border: 1px solid rgba(124,58,237,0.09) !important;
-    border-radius: 9px !important;
-    font-size: 12px !important;
+
+/* 개별 버튼 디자인 (연보라색 테마 & 강력한 중앙 정렬) */
+.examples-container button, div[data-testid="chatbot"] button.example, button.example, .example-btn {
+    border-radius: 8px !important;
+    padding: 16px !important;
+    text-align: center !important;
+    font-size: 14px !important;
     font-weight: 600 !important;
-    color: #1e3a5f !important;
-    line-height: 1.4 !important;
-    box-shadow: none !important;
-    transition: all 0.16s ease !important;
-    white-space: normal !important;
-    height: auto !important;
-    min-height: 46px !important;
-    cursor: pointer !important;
+    color: #4c1d95 !important; 
+    background: #f5f3ff !important;
+    background-color: #f5f3ff !important;
+    border: 1px solid #e9d5ff !important; 
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.2s ease-in-out !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-height: 80px !important; 
+    width: 100% !important;
+    white-space: normal !important; 
 }
-[class*="examples"] button:hover {
-    background: rgba(255,255,255,0.97) !important;
-    border-color: rgba(124,58,237,0.20) !important;
-    color: #1e3a5f !important;
-    box-shadow: 0 2px 8px rgba(124,58,237,0.06) !important;
-    transform: translateY(-1px) !important;
+
+.examples-container button:hover, div[data-testid="chatbot"] button.example:hover, button.example:hover, .example-btn:hover {
+    border-color: #a855f7 !important; 
+    background: #f3e8ff !important; 
+    background-color: #f3e8ff !important; 
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
+    color: #7c3aed !important;
 }
 
 /* ── 전송 버튼: 너비 넓고 높이 입력창에 맞춤 ── */
-button[class*="submit-btn"],
-[data-testid="submit-button"],
-#submit-btn {
+button[class*="submit-btn"], #submit-btn, button[id*="submit"], button.submit-button {
     background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%) !important;
     color: white !important;
     font-weight: 700 !important;
@@ -268,6 +350,8 @@ button[class*="submit-btn"],
     align-items: center !important;
     justify-content: center !important;
     box-sizing: border-box !important;
+    opacity: 1 !important;
+    visibility: visible !important;
 }
 button[class*="submit-btn"]:hover,
 [data-testid="submit-button"]:hover {
@@ -307,13 +391,6 @@ div:has(> [data-testid="submit-button"]),
     align-items: center !important;
 }
 
-/* ── 챗봇 컨테이너 ── */
-div[data-testid="chatbot"] {
-    background: transparent !important;
-    border: 1px solid rgba(30,58,95,0.08) !important;
-    border-radius: 12px !important;
-}
-
 /* ── 챗봇 탭/라벨 숨김 ── */
 .chatbot > div:first-child, [class*="chatbot"] > div:first-child,
 .chatbot-label, div[class*="chatbot"] .label,
@@ -330,24 +407,36 @@ label.svelte-1ipelgc, span.svelte-1ipelgc {
     min-height: auto !important;
 }
 
-/* ── 사용자 버블 ── */
-.message.user {
-    background: rgba(30,58,95,0.06) !important;
-    border: 1px solid rgba(30,58,95,0.14) !important;
-    border-radius: 12px !important;
+/* ── 사용자 버블 (다크그레이 프리미엄 테마) ── */
+.message.user, [data-testid="user"] .message {
+    background-color: #111827 !important;
+    border-radius: 12px 12px 0 12px !important;
+    padding: 7px 13px !important; 
+    margin: 2px 0 !important; 
+    border: none !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
+    min-height: unset !important; 
 }
-.message.user p, .message.user span,
-.message.user li, .message.user div {
-    color: #1e3a5f !important;
-    font-weight: 600 !important;
+[data-testid="user"] > div, .bubble-wrap [data-testid="user"], .message-wrap.user > div, .message-row.user {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+}
+[data-testid="user"] .message *, .message.user * {
+    color: #ffffff !important;
+    line-height: 1.4 !important; 
+    margin: 0 !important; 
     background: transparent !important;
 }
 
-/* ── 봇 버블 ── */
-.message.bot {
-    background: rgba(255,255,255,0.65) !important;
-    border: 1px solid rgba(30,58,95,0.08) !important;
-    border-radius: 12px !important;
+/* ── 봇 버블 (화이트 & 그레이 경계선 테마) ── */
+.message.bot, [data-testid="bot"] .message, [data-testid="bot"] > div, .message-wrap.bot > div, .message.bot, .message-row.bot .message {
+    background-color: #ffffff !important;
+    color: #1f2937 !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 12px 12px 12px 0 !important;
+    padding: 16px 20px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
 }
 .message.bot p, .message.bot span,
 .message.bot li, .message.bot div {
@@ -407,7 +496,7 @@ button.secondary:hover, button.variant-secondary:hover {
     border-color: rgba(124,58,237,0.24) !important;
 }
 
-/* ── 메인 레이아웃 컬럼 높이 동기화 (챗봇 내부 깨짐 방지) ── */
+/* ── 메인 레이아웃 컬럼 높이 동기화 ── */
 #main-row { align-items: stretch !important; }
 #main-row > div[class*="column"] {
     display: flex !important;