app.py

# app.py - Hugging Face Spaces 전용 (수정된 버전)
import gradio as gr
import sqlite3
import json
import uuid
from datetime import datetime
import pandas as pd
import os
import threading
from collections import deque

# 메모리 기반 저장소 (SQLite 대신 사용)
tracking_data = deque(maxlen=10000)  # 최대 10,000개 저장
visitors = {}
stats = {
    "total_events": 0,
    "unique_devices": set(),
    "event_types": {},
    "last_update": None
}

# API 처리를 위한 간단한 함수
def process_tracking_data(data_json):
    """추적 데이터 처리"""
    try:
        data = json.loads(data_json) if isinstance(data_json, str) else data_json
        
        # 디바이스 정보 업데이트
        device_id = data.get('deviceId', 'unknown')
        if device_id not in visitors:
            visitors[device_id] = {
                'first_seen': datetime.now().isoformat(),
                'last_seen': datetime.now().isoformat(),
                'info': data
            }
        else:
            visitors[device_id]['last_seen'] = datetime.now().isoformat()
        
        # 추적 데이터 저장
        data['serverTimestamp'] = datetime.now().isoformat()
        tracking_data.append(data)
        
        # 통계 업데이트
        stats["total_events"] += 1
        stats["unique_devices"].add(device_id)
        event_type = data.get("eventType", "pageview")
        stats["event_types"][event_type] = stats["event_types"].get(event_type, 0) + 1
        stats["last_update"] = datetime.now().isoformat()
        
        return {
            "status": "success",
            "message": "Data tracked successfully",
            "trackingId": stats["total_events"]
        }
    except Exception as e:
        return {"status": "error", "message": str(e)}

# 추적 스크립트 생성
def generate_tracking_script(site_id, server_url):
    """외부 사이트에 삽입할 추적 스크립트 생성"""
    script = f"""
<!-- Visitor Tracking Script -->
<script>
(function() {{
    // 추적 서버 URL
    const TRACKING_SERVER = '{server_url}';
    const SITE_ID = '{site_id}';
    
    // 디바이스 ID 생성/조회
    function getDeviceId() {{
        let deviceId = localStorage.getItem('_tracker_device_id');
        if (!deviceId) {{
            // 하드웨어 기반 ID 생성
            const components = [
                screen.width + 'x' + screen.height,
                navigator.hardwareConcurrency || 0,
                navigator.deviceMemory || 0,
                navigator.platform,
                navigator.language,
                new Date().getTimezoneOffset()
            ];
            
            // 간단한 해시 함수
            let hash = 0;
            const str = components.join('|');
            for (let i = 0; i < str.length; i++) {{
                const char = str.charCodeAt(i);
                hash = ((hash << 5) - hash) + char;
                hash = hash & hash;
            }}
            
            deviceId = 'DEV_' + Math.abs(hash).toString(36);
            localStorage.setItem('_tracker_device_id', deviceId);
        }}
        return deviceId;
    }}
    
    // WebGL 정보 수집
    function getWebGLInfo() {{
        try {{
            const canvas = document.createElement('canvas');
            const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
            if (!gl) return 'Not supported';
            
            const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
            if (debugInfo) {{
                return gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
            }}
            return 'Unknown';
        }} catch(e) {{
            return 'Error';
        }}
    }}
    
    // Gradio 엔드포인트로 데이터 전송 (수정됨)
    async function collectAndSend(eventType = 'pageview', eventData = {{}}) {{
        const data = {{
            siteId: SITE_ID,
            deviceId: getDeviceId(),
            eventType: eventType,
            eventData: eventData,
            pageUrl: window.location.href,
            pageTitle: document.title,
            referrer: document.referrer,
            userAgent: navigator.userAgent,
            screenResolution: screen.width + 'x' + screen.height,
            platform: navigator.platform,
            language: navigator.language,
            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            cpuCores: navigator.hardwareConcurrency || 0,
            deviceMemory: navigator.deviceMemory || 0,
            gpuInfo: getWebGLInfo(),
            timestamp: new Date().toISOString()
        }};
        
        try {{
            // Gradio API 엔드포인트 사용
            const response = await fetch(TRACKING_SERVER + '/run/predict', {{
                method: 'POST',
                headers: {{
                    'Content-Type': 'application/json',
                }},
                body: JSON.stringify({{
                    data: [JSON.stringify(data)],
                    fn_index: 0  // process_tracking API 함수의 인덱스
                }})
            }});
            
            if (response.ok) {{
                console.log('[Tracker] Event tracked:', eventType);
            }} else {{
                console.error('[Tracker] Server error:', response.status);
            }}
        }} catch(e) {{
            console.error('[Tracker] Network error:', e);
        }}
    }}
    
    // 전역 추적 함수
    window._tracker = {{
        trackEvent: function(eventName, eventData) {{
            collectAndSend('custom', {{ name: eventName, data: eventData }});
        }}
    }};
    
    // 페이지 로드시 추적
    if (document.readyState === 'loading') {{
        document.addEventListener('DOMContentLoaded', () => collectAndSend());
    }} else {{
        collectAndSend();
    }}
    
    // SPA 지원 - URL 변경 감지
    let lastUrl = location.href;
    new MutationObserver(() => {{
        const url = location.href;
        if (url !== lastUrl) {{
            lastUrl = url;
            collectAndSend('navigation', {{ from: lastUrl, to: url }});
        }}
    }}).observe(document, {{subtree: true, childList: true}});
}})();
</script>
<!-- End Visitor Tracking Script -->
"""
    return script.strip()

# Gradio 인터페이스 함수들
def create_site_id(server_url):
    """새로운 추적 사이트 ID 생성"""
    if not server_url:
        server_url = "https://your-space-name.hf.space"
    site_id = str(uuid.uuid4())[:8]
    return site_id, generate_tracking_script(site_id, server_url)

def view_statistics():
    """통계 데이터 조회"""
    unique_devices = len(stats["unique_devices"])
    total_events = stats["total_events"]
    
    # 오늘 방문자 계산
    today = datetime.now().date()
    today_devices = set()
    for data in tracking_data:
        try:
            timestamp = datetime.fromisoformat(data.get('timestamp', '').replace('Z', '+00:00'))
            if timestamp.date() == today:
                today_devices.add(data.get('deviceId'))
        except:
            pass
    
    summary = f"""
### 📊 방문자 통계
- **총 방문자**: {unique_devices}명
- **오늘 방문자**: {len(today_devices)}명
- **총 이벤트**: {total_events}회
- **마지막 업데이트**: {stats.get('last_update', 'N/A')}

### 📈 이벤트 타입별 통계
"""
    for event_type, count in stats["event_types"].items():
        summary += f"\n- **{event_type}**: {count}회"
    
    summary += "\n\n### 📍 최근 이벤트 (최대 10개)"
    recent_events = list(tracking_data)[-10:]
    for event in reversed(recent_events):
        summary += f"\n- {event.get('timestamp', 'N/A')} | {event.get('eventType', 'N/A')} | {event.get('deviceId', 'N/A')} | {event.get('pageUrl', 'N/A')[:50]}..."
    
    return summary

def get_recent_data():
    """최근 데이터를 DataFrame으로 반환"""
    if not tracking_data:
        return pd.DataFrame()
    
    recent = list(tracking_data)[-100:]  # 최근 100개
    df_data = []
    for event in recent:
        df_data.append({
            'Timestamp': event.get('timestamp', ''),
            'Device ID': event.get('deviceId', ''),
            'Event Type': event.get('eventType', ''),
            'Page URL': event.get('pageUrl', ''),
            'Platform': event.get('platform', ''),
            'Language': event.get('language', '')
        })
    
    return pd.DataFrame(df_data)

def test_tracking():
    """로컬 추적 테스트"""
    test_data = {
        "siteId": "test",
        "deviceId": f"TEST_{str(uuid.uuid4())[:8]}",
        "eventType": "test",
        "pageUrl": "https://test.example.com",
        "timestamp": datetime.now().isoformat()
    }
    
    result = process_tracking_data(test_data)
    return f"테스트 결과:\n{json.dumps(result, indent=2)}\n\n테스트 데이터:\n{json.dumps(test_data, indent=2)}"

# CSS 스타일
custom_css = """
.gradio-container {
    font-family: 'Arial', sans-serif;
}
.tracking-script {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
}
"""

# Gradio UI
with gr.Blocks(title="방문자 추적 관리 시스템", css=custom_css, theme=gr.themes.Soft()) as demo:
    gr.Markdown("""
    # 🔍 방문자 추적 관리 시스템
    
    ### 외부 웹사이트에 추적 스크립트를 삽입하여 방문자를 모니터링합니다.
    
    > ⚠️ **주의**: 이 버전은 메모리 기반 저장소를 사용합니다. 서버 재시작 시 데이터가 초기화됩니다.
    """)
    
    # API 처리를 위한 숨겨진 컴포넌트
    api_input = gr.Textbox(visible=False)
    api_output = gr.JSON(visible=False)
    
    # API 엔드포인트 (fn_index=0)
    api_input.change(
        fn=process_tracking_data,
        inputs=api_input,
        outputs=api_output,
        api_name="process_tracking"
    )
    
    with gr.Tab("🔧 추적 스크립트 생성"):
        gr.Markdown("### 새로운 추적 스크립트 생성")
        
        with gr.Row():
            with gr.Column():
                server_url_input = gr.Textbox(
                    label="추적 서버 URL",
                    placeholder="https://your-space-name.hf.space",
                    info="이 Hugging Face Space의 URL을 입력하세요"
                )
                
                gr.Markdown("""
                ℹ️ **서버 URL 찾기**:
                1. 이 Space의 URL을 확인하세요
                2. 형식: `https://username-spacename.hf.space`
                3. 예시: `https://seawolf2357-ev-cook2.hf.space`
                """)
        
        create_btn = gr.Button("🔧 새 추적 코드 생성", variant="primary")
        
        with gr.Row():
            site_id_output = gr.Textbox(label="사이트 ID", interactive=False)
        
        script_output = gr.Code(
            label="HTML에 삽입할 추적 스크립트", 
            language="html",
            interactive=True,
            elem_classes="tracking-script"
        )
        
        gr.Markdown("""
        ### 📌 사용 방법:
        1. 위에서 이 Space의 URL을 입력합니다
        2. '새 추적 코드 생성' 버튼을 클릭합니다
        3. 생성된 스크립트를 복사합니다
        4. 추적하려는 웹사이트의 `</body>` 태그 바로 앞에 붙여넣습니다
        
        ### 🧪 테스트 방법:
        ```javascript
        // 브라우저 콘솔(F12)에서 실행
        window._tracker.trackEvent('test', {data: 'test'});
        ```
        """)
        
        create_btn.click(
            fn=create_site_id,
            inputs=[server_url_input],
            outputs=[site_id_output, script_output]
        )
    
    with gr.Tab("📊 통계 대시보드"):
        gr.Markdown("### 📊 실시간 방문자 통계")
        
        with gr.Row():
            refresh_btn = gr.Button("🔄 통계 새로고침", variant="secondary")
            test_btn = gr.Button("🧪 테스트 데이터 생성", variant="secondary")
        
        stats_output = gr.Markdown()
        test_output = gr.Textbox(label="테스트 결과", visible=False)
        
        # 페이지 로드 시 통계 표시
        demo.load(fn=view_statistics, outputs=stats_output)
        refresh_btn.click(fn=view_statistics, outputs=stats_output)
        
        def test_and_refresh():
            test_result = test_tracking()
            stats = view_statistics()
            return stats, gr.update(visible=True, value=test_result)
        
        test_btn.click(
            fn=test_and_refresh,
            outputs=[stats_output, test_output]
        )
    
    with gr.Tab("📁 데이터 뷰어"):
        gr.Markdown("### 📁 최근 추적 데이터")
        
        data_refresh_btn = gr.Button("🔄 데이터 새로고침")
        data_output = gr.Dataframe(
            headers=["Timestamp", "Device ID", "Event Type", "Page URL", "Platform", "Language"],
            label="최근 이벤트 (최대 100개)"
        )
        
        demo.load(fn=get_recent_data, outputs=data_output)
        data_refresh_btn.click(fn=get_recent_data, outputs=data_output)
        
        gr.Markdown("""
        ### 📥 데이터 내보내기
        위의 표에서 데이터를 선택하고 복사하거나, CSV로 다운로드할 수 있습니다.
        """)
    
    with gr.Tab("❓ 도움말"):
        gr.Markdown("""
        ### 🚀 빠른 시작 가이드
        
        1. **이 Space의 URL 확인**
           - 브라우저 주소창에서 URL 복사
           - 예: `https://username-spacename.hf.space`
        
        2. **추적 스크립트 생성**
           - "추적 스크립트 생성" 탭으로 이동
           - URL 입력 후 스크립트 생성
        
        3. **웹사이트에 설치**
           ```html
           <!-- 여기에 생성된 스크립트 붙여넣기 -->
           </body>
           </html>
           ```
        
        4. **추적 확인**
           - "통계 대시보드" 탭에서 실시간 모니터링
        
        ### 🔧 문제 해결
        
        **Q: 추적이 작동하지 않아요**
        - A: 브라우저 콘솔(F12)에서 에러 확인
        - A: HTTPS 사이트인지 확인
        - A: 서버 URL이 정확한지 확인
        
        **Q: CORS 에러가 발생해요**
        - A: 이 Space의 정확한 URL 사용
        - A: HTTP가 아닌 HTTPS 사용
        
        ### 📞 지원
        문제가 지속되면 Space 토론 탭에 문의하세요.
        """)

# 앱 실행
if __name__ == "__main__":
    demo.launch()

# requirements.txt 내용:
"""
gradio==4.44.1
pandas==2.2.3
"""