app.py

import gradio as gr
import os
from gradio_client import Client

# 환경변수에서 API 엔드포인트 로드 (로그에 출력하지 않음)
def get_api_endpoint():
    """환경변수에서 API 엔드포인트를 가져옵니다."""
    endpoint = os.getenv("API_ENDPOINT")
    if not endpoint:
        raise ValueError("API_ENDPOINT 환경변수가 설정되지 않았습니다.")
    return endpoint

# 클라이언트 초기화 (로그에 정보 노출하지 않음)
try:
    client = Client(get_api_endpoint())
except Exception as e:
    print("클라이언트 초기화 실패. 환경변수를 확인하세요.")
    client = None

def debug_log(message: str):
    """디버깅 로그 (엔드포인트 정보는 제외)"""
    print(f"[DEBUG] {message}")

# --- 네이버 블로그 스크래핑 함수 ---
def scrape_naver_blog(url: str) -> str:
    """네이버 블로그 스크래핑 - 클라이언트 API 호출"""
    debug_log("블로그 스크래핑 함수 시작")
    
    if not client:
        return "클라이언트가 초기화되지 않았습니다."
    
    try:
        result = client.predict(url, api_name="/fetch_blog_content")
        debug_log("블로그 스크래핑 완료")
        return result
    except Exception as e:
        debug_log(f"블로그 스크래핑 오류: {str(e)}")
        return f"스크래핑 중 오류가 발생했습니다: {str(e)}"

# --- 분석 핸들러 함수 ---
def analysis_handler(blog_text: str, remove_freq1: bool, include_title: bool, direct_keyword_input: str, direct_keyword_only: bool):
    """분석 핸들러 - 클라이언트 API 호출"""
    debug_log("분석 핸들러 함수 시작")
    
    if not client:
        return None, None
    
    try:
        result = client.predict(
            blog_text,
            remove_freq1,
            include_title,
            direct_keyword_input,
            direct_keyword_only,
            api_name="/analysis_handler"
        )
        debug_log("분석 처리 완료")
        return result
    except Exception as e:
        debug_log(f"분석 처리 오류: {str(e)}")
        return None, None

# --- 스크래핑 실행 함수 ---
def fetch_blog_content(url: str):
    """블로그 콘텐츠 가져오기"""
    debug_log("블로그 콘텐츠 가져오기 시작")
    content = scrape_naver_blog(url)
    debug_log("블로그 콘텐츠 가져오기 완료")
    return content

# --- Gradio 인터페이스 구성 ---
def create_interface():
    css = """
    /* ============================================
       다크모드 자동 변경 템플릿 CSS
       다른 프로젝트에 복사해서 사용 가능
       ============================================ */

    /* 1. CSS 변수 정의 (라이트모드 - 기본값) */
    :root {
        /* 메인 컬러 */
        --primary-color: #FB7F0D;
        --secondary-color: #ff9a8b;
        --accent-color: #FF6B6B;
        
        /* 배경 컬러 */
        --background-color: #FFFFFF;
        --card-bg: #ffffff;
        --input-bg: #ffffff;
        
        /* 텍스트 컬러 */
        --text-color: #334155;
        --text-secondary: #64748b;
        
        /* 보더 및 구분선 */
        --border-color: #dddddd;
        --border-light: #e5e5e5;
        
        /* 테이블 컬러 */
        --table-even-bg: #f3f3f3;
        --table-hover-bg: #f0f0f0;
        
        /* 그림자 */
        --shadow: 0 8px 30px rgba(251, 127, 13, 0.08);
        --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
        
        /* 기타 */
        --border-radius: 18px;
    }

    /* 2. 다크모드 색상 변수 (자동 감지) */
    @media (prefers-color-scheme: dark) {
        :root {
            /* 배경 컬러 */
            --background-color: #1a1a1a;
            --card-bg: #2d2d2d;
            --input-bg: #2d2d2d;
            
            /* 텍스트 컬러 */
            --text-color: #e5e5e5;
            --text-secondary: #a1a1aa;
            
            /* 보더 및 구분선 */
            --border-color: #404040;
            --border-light: #525252;
            
            /* 테이블 컬러 */
            --table-even-bg: #333333;
            --table-hover-bg: #404040;
            
            /* 그림자 */
            --shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
            --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
    }

    /* 3. 수동 다크모드 클래스 (Gradio 토글용) */
    [data-theme="dark"], 
    .dark,
    .gr-theme-dark {
        /* 배경 컬러 */
        --background-color: #1a1a1a;
        --card-bg: #2d2d2d;
        --input-bg: #2d2d2d;
        
        /* 텍스트 컬러 */
        --text-color: #e5e5e5;
        --text-secondary: #a1a1aa;
        
        /* 보더 및 구분선 */
        --border-color: #404040;
        --border-light: #525252;
        
        /* 테이블 컬러 */
        --table-even-bg: #333333;
        --table-hover-bg: #404040;
        
        /* 그림자 */
        --shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* 4. 기본 요소 다크모드 적용 */
    body {
        font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
        background-color: var(--background-color) !important;
        color: var(--text-color) !important;
        line-height: 1.6;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    footer {
        visibility: hidden;
    }

    /* 5. Gradio 컨테이너 강제 적용 */
    .gradio-container,
    .gradio-container *,
    .gr-app,
    .gr-app *,
    .gr-interface {
        background-color: var(--background-color) !important;
        color: var(--text-color) !important;
    }

    /* 6. 카드 및 패널 스타일 */
    .gr-form,
    .gr-box,
    .gr-panel,
    .custom-frame,
    [class*="frame"],
    [class*="card"],
    [class*="panel"] {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
        box-shadow: var(--shadow) !important;
    }

    /* 7. 입력 필드 스타일 */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    textarea,
    select,
    .gr-input,
    .gr-text-input,
    .gr-textarea,
    .gr-dropdown {
        background-color: var(--input-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    select:focus,
    .gr-input:focus,
    .gr-text-input:focus,
    .gr-textarea:focus,
    .gr-dropdown:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 2px rgba(251, 127, 13, 0.2) !important;
    }

    /* 8. 라벨 및 텍스트 요소 */
    label,
    .gr-label,
    .gr-checkbox label,
    .gr-radio label,
    p, span, div {
        color: var(--text-color) !important;
    }

    /* 폼 라벨 텍스트 크기 대폭 증가 */
    .gr-form label,
    .gr-textbox label,
    .gr-checkbox label,
    .gr-radio label {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: var(--text-color) !important;
    }

    /* 설명 텍스트 크기 대폭 증가 */
    .gr-form .gr-form-label,
    .gr-textbox .gr-form-label,
    .gr-checkbox .gr-form-label,
    .gr-radio .gr-form-label,
    .gr-info {
        font-size: 18px !important;
        color: var(--text-secondary) !important;
        line-height: 1.4 !important;
    }

    /* 9. 테이블 스타일 */
    table {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    table th {
        background-color: var(--primary-color) !important;
        color: white !important;
        border-color: var(--border-color) !important;
    }

    table td {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    table tbody tr:nth-child(even) {
        background-color: var(--table-even-bg) !important;
    }

    table tbody tr:hover {
        background-color: var(--table-hover-bg) !important;
    }

    /* 10. 체크박스 및 라디오 버튼 스타일 개선 */
    input[type="checkbox"],
    input[type="radio"] {
        accent-color: var(--primary-color) !important;
        width: 24px !important;
        height: 24px !important;
        cursor: pointer !important;
    }

    /* 체크박스 커스텀 스타일 - 더 강력한 선택자 사용 */
    .gradio-container input[type="checkbox"],
    .gr-checkbox input[type="checkbox"],
    input[type="checkbox"] {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 24px !important;
        height: 24px !important;
        border: 2px solid var(--border-color) !important;
        border-radius: 6px !important;
        background-color: var(--card-bg) !important;
        cursor: pointer !important;
        position: relative !important;
        transition: all 0.3s ease !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }

    .gradio-container input[type="checkbox"]:checked,
    .gr-checkbox input[type="checkbox"]:checked,
    input[type="checkbox"]:checked {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

    .gradio-container input[type="checkbox"]:checked::before,
    .gr-checkbox input[type="checkbox"]:checked::before,
    input[type="checkbox"]:checked::before {
        content: "✓" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: white !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 1 !important;
    }

    .gradio-container input[type="checkbox"]:hover,
    .gr-checkbox input[type="checkbox"]:hover,
    input[type="checkbox"]:hover {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 2px rgba(251, 127, 13, 0.2) !important;
    }

    /* 체크박스 라벨 텍스트 크기 대폭 증가 */
    .gradio-container .gr-checkbox label,
    .gr-checkbox label,
    label[for] {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: var(--text-color) !important;
        cursor: pointer !important;
        margin-left: 8px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 체크박스 컨테이너 정렬 */
    .gr-checkbox {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* 11. 스크롤바 스타일 */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--card-bg);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-color);
    }

    /* 12. 아코디언 및 드롭다운 */
    details {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    details summary {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    /* 13. 툴팁 및 팝업 */
    [data-tooltip]:hover::after,
    .tooltip,
    .popup {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
        box-shadow: var(--shadow-light) !important;
    }

    /* 14. 모달 및 오버레이 */
    .modal,
    .overlay,
    [class*="modal"],
    [class*="overlay"] {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    /* 15. 추가 Gradio 컴포넌트들 */
    .gr-block,
    .gr-group,
    .gr-row,
    .gr-column {
        background-color: var(--background-color) !important;
        color: var(--text-color) !important;
    }

    /* 16. 버튼은 기존 스타일 유지 (primary-color 사용) */
    button:not([class*="custom"]):not([class*="primary"]):not([class*="secondary"]) {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    /* 17. 코드 블록 및 pre 태그 */
    code,
    pre,
    .code-block {
        background-color: var(--table-even-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    /* 18. 알림 및 메시지 */
    .alert,
    .message,
    .notification,
    [class*="alert"],
    [class*="message"],
    [class*="notification"] {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    /* 19. 전환 애니메이션 */
    * {
        transition: background-color 0.3s ease, 
                    color 0.3s ease, 
                    border-color 0.3s ease !important;
    }

    /* 20. 기존 스타일 유지 */
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .header {
        background: linear-gradient(135deg, #FB7F0D, #FF9A5B);
        padding: 2rem;
        border-radius: 15px;
        margin-bottom: 20px;
        box-shadow: var(--shadow);
        text-align: center;
        color: white;
    }
    
    .header h1 {
        margin: 0;
        font-size: 2.5rem;
        font-weight: 700;
    }
    
    .header p {
        margin: 10px 0 0;
        font-size: 1.2rem;
        opacity: 0.9;
    }
    
    .card {
        background-color: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 20px;
        margin: 10px 0;
        box-shadow: var(--shadow);
        border: 1px solid var(--border-color);
    }
    
    .button-primary {
        border-radius: 30px !important;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
        color: white !important;
        font-size: 18px !important;
        padding: 10px 20px !important;
        border: none;
        box-shadow: 0 4px 8px rgba(251, 127, 13, 0.25);
        transition: transform 0.3s ease;
        text-align: center;
        font-weight: 600;
    }
    
    .button-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(251, 127, 13, 0.3);
    }
    
    .section-title {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-color);
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--primary-color);
    }
    
    .section-title i {
        margin-right: 10px;
        color: var(--primary-color);
    }
    
    .guide-container {
        background-color: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color);
    }
    
    .guide-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }
    
    .guide-title i {
        margin-right: 0.8rem;
        font-size: 1.3rem;
    }
    
    .guide-item {
        display: flex;
        margin-bottom: 0.8rem;
        align-items: flex-start;
    }
    
    .guide-number {
        background-color: var(--primary-color);
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 10px;
        flex-shrink: 0;
        font-size: 14px;
    }
    
    .guide-text {
        flex: 1;
        line-height: 1.6;
        color: var(--text-color);
    }
    
    /* 그라디오 요소 스타일 커스터마이징 */
    .gr-input, .gr-text-input, .gr-textarea {
        border-radius: var(--border-radius) !important;
        border: 1px solid var(--border-color) !important;
        padding: 12px !important;
        transition: all 0.3s ease !important;
    }
    
    .gr-input:focus, .gr-text-input:focus, .gr-textarea:focus {
        border-color: var(--primary-color) !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(251, 127, 13, 0.2) !important;
    }
    """
    
    # FontAwesome 아이콘 추가
    fontawesome = """
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    """
    
    with gr.Blocks(css=css, theme=gr.themes.Soft(
        primary_hue=gr.themes.Color(
            c50="#FFF7ED", 
            c100="#FFEDD5",
            c200="#FED7AA",
            c300="#FDBA74",
            c400="#FB923C",
            c500="#F97316", 
            c600="#EA580C",
            c700="#C2410C",
            c800="#9A3412",
            c900="#7C2D12", 
            c950="#431407",
        ),
        secondary_hue="zinc",
        neutral_hue="zinc",
        font=("Pretendard", "sans-serif")
    )) as demo:
        
        gr.HTML(fontawesome)
        
        # 메인 컨텐츠
        with gr.Row():
            # 왼쪽 입력 영역
            with gr.Column(scale=1, elem_classes="card"):
                # 블로그 링크 입력
                gr.HTML('<div class="section-title"><i class="fas fa-link"></i> 블로그 링크 입력</div>')
                blog_url_input = gr.Textbox(
                    label="",
                    placeholder="네이버 블로그 URL을 입력하세요...",
                    lines=1,
                )
                scrape_button = gr.Button("스크래핑 실행", elem_classes="button-primary")
                
                # 블로그 내용
                gr.HTML('<div class="section-title"><i class="fas fa-file-text"></i> 블로그 내용</div>')
                blog_content_box = gr.Textbox(
                    label="",
                    placeholder="스크래핑된 블로그 내용이 여기에 표시됩니다...",
                    lines=10,
                )
                
                # 분석 옵션
                gr.HTML('<div class="section-title"><i class="fas fa-cogs"></i> 분석 옵션</div>')
                with gr.Row():
                    remove_freq_checkbox = gr.Checkbox(
                        label="빈도수1 제거", 
                        value=True,
                        info="빈도수가 1인 단어들을 분석 결과에서 제외합니다"
                    )
                    include_title_checkbox = gr.Checkbox(
                        label="제목포함기능", 
                        value=True,
                        info="블로그 제목을 포함하여 분석을 수행합니다"
                    )
                with gr.Row():
                    direct_keyword_only_checkbox = gr.Checkbox(
                        label="직접 키워드 입력만 분석", 
                        value=False,
                        info="형태소 분석 없이 직접 입력한 키워드만 분석합니다"
                    )
                
                # 직접 키워드 입력
                direct_keyword_box = gr.Textbox(
                    label="직접 키워드 입력 (엔터 또는 ','로 구분)",
                    placeholder="키워드1, 키워드2, 키워드3...",
                    lines=2,
                )
                
                analyze_button = gr.Button("분석 실행", elem_classes="button-primary")
            
            # 오른쪽 출력 영역
            with gr.Column(scale=1, elem_classes="card"):
                # 분석 결과
                gr.HTML('<div class="section-title"><i class="fas fa-chart-bar"></i> 분석 결과</div>')
                result_df = gr.Dataframe(
                    label="",
                    interactive=True,
                )
                
                # 파일 다운로드
                gr.HTML('<div class="section-title"><i class="fas fa-download"></i> 결과 다운로드</div>')
                excel_file = gr.File(label="", file_types=[".xlsx"])
        
        # 이벤트 연결
        scrape_button.click(fn=fetch_blog_content, inputs=blog_url_input, outputs=blog_content_box)
        analyze_button.click(fn=analysis_handler, 
                             inputs=[blog_content_box, remove_freq_checkbox, include_title_checkbox, direct_keyword_box, direct_keyword_only_checkbox],
                             outputs=[result_df, excel_file])
    
    return demo

if __name__ == "__main__":
    debug_log("Gradio 앱 실행 시작")
    
    # 클라이언트 연결 상태 확인 (엔드포인트 정보는 로그에 출력하지 않음)
    if not client:
        print("경고: 클라이언트 연결에 실패했습니다. API_ENDPOINT 환경변수를 확인하세요.")
    else:
        debug_log("클라이언트 연결 성공")
    
    demo = create_interface()
    demo.queue()
    demo.launch()