Create app.py

app.py

@@ -0,0 +1,196 @@
+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)