import torch
import gradio as gr
from transformers import (
    AutoTokenizer,
    AutoModelForSequenceClassification
)

MODEL_NAME = "duclo90/results"
tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
model = AutoModelForSequenceClassification.from_pretrained(MODEL_NAME)
model.eval()

def classify_text(text):
    if not text.strip():
        return """
        <div style="text-align: center; padding: 40px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 20px; color: white;">
            <h2 style="margin: 0;">⚠️ Oops!</h2>
            <p style="margin-top: 10px; font-size: 18px;">Please enter some text to analyze</p>
        </div>
        """
    
    inputs = tokenizer(
        text,
        return_tensors="pt",
        truncation=True,
        max_length=512
    )
    with torch.no_grad():
        outputs = model(**inputs)
        probs = torch.softmax(outputs.logits, dim=-1)
        score, pred = torch.max(probs, dim=-1)
    
    label = model.config.id2label[pred.item()]
    
    # Create attractive HTML output
    if label.lower() == "human":
        result = """
        <div style="text-align: center; padding: 50px 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 25px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideIn 0.5s ease-out;">
            <div style="font-size: 80px; margin-bottom: 20px; animation: bounce 1s ease;">👤</div>
            <h1 style="color: white; font-size: 42px; margin: 0; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">Human-Written</h1>
            <p style="color: rgba(255,255,255,0.9); font-size: 20px; margin-top: 15px;">This text appears to be written by a human</p>
            <div style="margin-top: 30px; padding: 15px 30px; background: rgba(255,255,255,0.2); border-radius: 15px; display: inline-block;">
                <span style="color: white; font-size: 18px; font-weight: 600;">✨ Natural & Authentic</span>
            </div>
        </div>
        <style>
            @keyframes slideIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes bounce {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
            }
        </style>
        """
    else:
        result = """
        <div style="text-align: center; padding: 50px 30px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 25px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideIn 0.5s ease-out;">
            <div style="font-size: 80px; margin-bottom: 20px; animation: bounce 1s ease;">🤖</div>
            <h1 style="color: white; font-size: 42px; margin: 0; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">AI-Generated</h1>
            <p style="color: rgba(255,255,255,0.9); font-size: 20px; margin-top: 15px;">This text appears to be machine-generated</p>
            <div style="margin-top: 30px; padding: 15px 30px; background: rgba(255,255,255,0.2); border-radius: 15px; display: inline-block;">
                <span style="color: white; font-size: 18px; font-weight: 600;">⚡ AI-Powered Content</span>
            </div>
        </div>
        <style>
            @keyframes slideIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes bounce {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
            }
        </style>
        """
    
    return result

# Custom CSS for modern look
custom_css = """
#component-0 {
    max-width: 900px;
    margin: auto;
    padding: 20px;
}

.gradio-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    font-family: 'Inter', sans-serif;
}

#title {
    text-align: center;
    color: white;
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

#description {
    text-align: center;
    color: rgba(255,255,255,0.9);
    font-size: 1.1em;
    margin-bottom: 30px;
}

.input-textarea, .output-markdown {
    border-radius: 15px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.95) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
}

button {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    transition: transform 0.2s !important;
}

button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

.footer {
    display: none !important;
}
"""

# Create interface with modern theme
iface = gr.Interface(
    fn=classify_text,
    inputs=gr.Textbox(
        lines=8, 
        placeholder="✍️ Paste or type text here to analyze...",
        label="Enter Text",
        elem_id="input-text"
    ),
    outputs=gr.HTML(label="Analysis Result"),
    title="<div id='title'>🔍 AI Text Classifier</div>",
    description="<div id='description'>Detect whether text is human-written or AI-generated using advanced NLP<br><span style='font-size: 0.85em; opacity: 0.7; margin-top: 8px; display: inline-block;'>Model by Dergaoui Ayoub</span></div>",
    flagging_mode="never"
)

iface.launch(
    theme=gr.themes.Soft(
        primary_hue="purple",
        secondary_hue="pink",
        neutral_hue="slate",
        font=gr.themes.GoogleFont("Inter")
    ),
    css=custom_css,
    share=False
)