import gradio as gr
import torch
import librosa
import numpy as np
from inference import inference

def detect_ai_audio(audio_file):
    """
    Detect whether the uploaded audio file was generated by AI
    """
    result = inference(audio_file)
    print(result)
    
    # Format result with better styling
    if "AI" in str(result).upper() or "artificial" in str(result).lower():
        status = "AI Generated"
        color = "#ff6b6b"
    else:
        status = "Human Generated"
        color = "#51cf66"
    
    formatted_result = f"""
    <div style="text-align: center; padding: 20px; border-radius: 10px; background: linear-gradient(135deg, {color}22, {color}11);">
        <div style="font-size: 24px; font-weight: bold; color: {color}; margin-bottom: 8px;">{status}</div>
        <div style="font-size: 16px; color: #666;">Analysis Result: {result}</div>
    </div>
    """
    
    return formatted_result

# 커스텀 CSS
custom_css = """
/* 전체 배경 그라디언트 */
.gradio-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    min-height: 100vh;
}

/* 메인 컨테이너 스타일링 */
.main-container {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    margin: 20px !important;
    padding: 30px !important;
}

/* 제목 스타일링 */
h1 {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-align: center !important;
    font-size: 3em !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;
}

/* 설명 텍스트 */
.gradio-markdown p {
    text-align: center !important;
    font-size: 1.2em !important;
    color: #555 !important;
    margin-bottom: 30px !important;
}

/* 오디오 업로드 컴포넌트 */
.upload-container {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3) !important;
    transition: all 0.3s ease !important;
}

.upload-container:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(240, 147, 251, 0.4) !important;
}

/* 결과 출력 영역 */
.output-container {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(168, 237, 234, 0.3) !important;
    min-height: 150px !important;
}

/* 예시 파일 섹션 */
.examples-container {
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin-top: 30px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

/* 버튼 스타일링 */
.gr-button {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    color: white !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.3s ease !important;
}

.gr-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
}

/* 애니메이션 추가 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradio-container > div {
    animation: fadeInUp 0.8s ease-out !important;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    h1 {
        font-size: 2em !important;
    }
    
    .main-container {
        margin: 10px !important;
        padding: 20px !important;
    }
}
"""

# Gradio 인터페이스 생성
demo = gr.Interface(
    fn=detect_ai_audio,
    inputs=gr.Audio(
        type="filepath", 
        label="Upload Audio File",
        elem_classes=["upload-container"]
    ),
    outputs=gr.HTML(
        label="Detection Result",
        elem_classes=["output-container"]
    ),
    title="AI Audio Detector",
    description="""
    <div style="text-align: center; font-size: 1.2em; color: #555; margin: 20px 0;">
        <p><strong>Advanced AI technology</strong> to accurately detect whether uploaded audio was generated by AI!</p>
        <p>Supported formats: MP3, WAV, M4A, FLAC and various audio formats</p>
        <p>Fast and accurate real-time analysis</p>
    </div>
    """,
    examples=[
        ["example-ncs-light it up(human).mp3"], 
        ["example-Strumming Heartbeats(suno v4).mp3"]
    ],
    css=custom_css,
    theme=gr.themes.Soft(
        primary_hue="blue",
        secondary_hue="purple",
        neutral_hue="gray",
        font=[gr.themes.GoogleFont("Inter"), "Arial", "sans-serif"]
    ),
    elem_classes=["main-container"]
)

if __name__ == "__main__":
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=True,
        show_api=False,
        show_error=True
    )