app.py

import gradio as gr

title = "AI Text Detector"
description = """
<div class="app-logo-title">
  <img src="https://raw.githubusercontent.com/google/material-design-icons/master/src/action/insights/materialiconsoutlined/24px.svg" alt="SzegedAI Logo" style="height:36px;vertical-align:middle;margin-right:10px;">
  <span>AI Text Detector</span>
</div>
<div class="app-desc">
This tool uses the <b>ModernBERT</b> model to identify whether a given text was written by a human or generated by artificial intelligence (AI). It works with a soft voting ensemble using <b>three</b> models, combining their outputs to improve the accuracy.<br>
✅ <b>Human Verification:</b> Human-written content is clearly marked.<br>
🔍 <b>Model Detection:</b> Can identify content from over 40 AI models.<br>
📈 <b>Accuracy:</b> Works best with longer texts.<br>
📄 <b>Read more:</b> Our method is detailed in our paper: 
<a href="https://aclanthology.org/2025.genaidetect-1.15/" target="_blank" style="color: #0be6c1; text-decoration: underline;"><b>LINK</b></a>.
</div>
<br>
Paste your text below to analyze its origin.
"""
bottom_text = "**Developed by SzegedAI**"

AI_texts = [
    "Camels are remarkable desert animals...",
]
Human_texts = [
    "To make BERT handle a variety of down-stream tasks...",
]

iface = gr.Blocks(css="""
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Inter:wght@400;600;800&display=swap');

body, .gradio-container {
    font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
    background: linear-gradient(120deg, #0e223f 0%, #1e2957 100%) fixed;
    color: #1c2025;
    min-height: 100vh;
}

.gradio-container {
    display: flex; flex-direction: column; align-items: center;
    padding: 0;
    border: none;
    min-height: 100vh;
}

#main_card {
    background: rgba(255,255,255,0.17);
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.25);
    border-radius: 24px;
    padding: 42px 36px 30px 36px;
    margin: 60px auto 0 auto;
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255,255,255,0.25);
    max-width: 620px;
    width: 100%;
}

.app-logo-title {
    display: flex; align-items: center; font-weight: 800; font-size: 2.2rem;
    color: #111b31; letter-spacing: -.02em; margin-bottom: 12px;
}

.app-desc {
    color: #283352; font-size: 1.1rem; margin-bottom: 22px; line-height: 1.75;
}

#text_input_box {
    border-radius: 16px;
    border: 2.2px solid #0be6c1;
    font-size: 18px;
    padding: 18px;
    margin-bottom: 24px;
    background: rgba(255,255,255,0.7);
    font-family: 'Inter', monospace;
    box-shadow: 0 1px 6px 0 rgba(11,230,193,0.08);
    transition: border-color .25s;
    width: 100%;
}

#text_input_box:focus {
    outline: none;
    border-color: #ff6f61;
    background: rgba(255,255,255,0.94);
}

.gr-button, button {
    border: none;
    background: linear-gradient(90deg, #0be6c1 20%, #2196f3 100%);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 12px;
    padding: 14px 0;
    box-shadow: 0 2px 10px 0 rgba(11,230,193,0.13);
    margin: 8px 0 18px 0;
    width: 100%;
    cursor: pointer;
    transition: background .18s, box-shadow .18s;
}

.gr-button:active, button:active {
    background: linear-gradient(90deg, #26a69a 20%, #0be6c1 100%);
    box-shadow: 0 2px 10px 0 rgba(11,230,193,0.18);
}

#result_output_box {
    border-radius: 14px;
    border: 2px solid #fff;
    font-size: 20px;
    padding: 18px;
    margin-top: 24px;
    width: 100%;
    min-height: 56px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 1px 10px 0 rgba(34,86,122,0.05);
    text-align: center;
    transition: box-shadow .22s;
    font-weight: 600;
}

.highlight-human {
    color: #2196f3;
    font-weight: bold;
    background: rgba(33,150,243,0.08);
    border-radius: 8px;
    padding: 6px 14px;
    display: inline-block;
}

.highlight-ai {
    color: #ff6f61;
    font-weight: bold;
    background: rgba(255,111,97,0.08);
    border-radius: 8px;
    padding: 6px 14px;
    display: inline-block;
}

.tab {
    margin-top: 22px;
}

.gr-examples {
    border: none !important;
    background: rgba(255,255,255,0.22) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.04) !important;
}

#bottom_text {
    text-align: center;
    margin-top: 44px;
    font-weight: 700;
    font-size: 1.11rem;
    color: #111b31;
    opacity: .9;
}

@media (max-width: 768px) {
    #main_card { padding: 18px 7vw; margin: 14px 0 0 0; }
    #result_output_box { font-size: 1rem; min-height: 44px; }
    .app-logo-title { font-size: 1.4rem; }
}
""")

def classify_text(text):
    # Your model logic here (placeholder)
    import random
    is_ai = random.choice([True, False])
    if is_ai:
        return '<span class="highlight-ai" role="alert" aria-live="polite">Detected as: AI-generated</span>'
    else:
        return '<span class="highlight-human" role="alert" aria-live="polite">Detected as: Human-written</span>'

with iface:
    with gr.Column(elem_id="main_card"):
        gr.Markdown(description)
        text_input = gr.Textbox(
            label="",
            placeholder="Type or paste your content here...",
            elem_id="text_input_box",
            lines=5,
            show_label=False
        )
        result_output = gr.Markdown("", elem_id="result_output_box")
        # Add clear feedback/animation on result
        text_input.change(classify_text, inputs=text_input, outputs=result_output)

        with gr.Tab("AI text examples", elem_classes=["tab"]):
            gr.Examples(AI_texts, inputs=text_input)
        with gr.Tab("Human text examples", elem_classes=["tab"]):
            gr.Examples(Human_texts, inputs=text_input)

        gr.Markdown(bottom_text, elem_id="bottom_text")

iface.launch(share=True)