Spaces:

mihalykiss
/

test

Running

App Files Files Community

mihalykiss commited on 18 days ago

Commit

ffaf2b4

verified ·

1 Parent(s): 57d366e

Update app.py

Browse files

Files changed (1) hide show

app.py +193 -179

app.py CHANGED Viewed

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

 import gradio as gr
 title = "AI Text Detector"
 description = """
+<div class="hero">
+    <h1>🔎 AI Text Detector</h1>
+    <p>
+        Built on the <b>ModernBERT</b> ensemble (3 variants, soft-voting).<br>
+        <span class="point">✅ Human verification</span> &nbsp;|&nbsp;
+        <span class="point">🔍 Detects 40+ AI models</span> &nbsp;|&nbsp;
+        <span class="point">📈 Best on longer passages</span>
+    </p>
+    <p class="paper">
+        Read the full paper&nbsp;→&nbsp;
+        <a href="https://aclanthology.org/2025.genaidetect-1.15/" target="_blank">LINK</a>
+    </p>
 </div>
 """
 bottom_text = "**Developed by SzegedAI**"
+# ----------  UI  ----------
+iface = gr.Blocks(
+    theme=gr.themes.Default(),   # keep defaults; we'll override in CSS
+    css="""
+/* ---------- Global tokens ---------- */
+:root{
+  --primary:#203A6B;             /* midnight-indigo */
+  --accent :#14B8A6;             /* teal-mint      */
+  --bg     :#F8FAFC;             /* light-gray     */
+  --bg-card:rgba(255,255,255,0.55);
+  --radius :16px;
+  --shadow :0 6px 24px rgba(0,0,0,.08);
+  --transition:180ms cubic-bezier(.4,0,.2,1);
+  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
+}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+html,body{
+  font-family:var(--font);
+  background: var(--bg);
+  color:var(--primary);
+  height:100%;
+  margin:0;
+}
+/* ---------- Main container ---------- */
+.gradio-container{
+  display:grid;
+  place-items:center;
+  padding:5vmin;
+  min-height:100dvh;
+  animation:fade-slide-in .6s ease-out both;
+}
+.container{
+  background:var(--bg-card);
+  backdrop-filter:blur(12px) saturate(120%);
+  border:1px solid rgba(255,255,255,.35);
+  border-radius:var(--radius);
+  box-shadow:var(--shadow);
+  padding:clamp(1.5rem,4vw,3rem);
+  width:min(680px,90vw);
+  display:grid;
+  gap:2rem;
+}
+/* ---------- Hero / heading ---------- */
+.hero{
+  text-align:center;
+  line-height:1.6;
+}
+.hero h1{
+  margin:0 0 .5rem;
+  font-size:clamp(1.8rem,4vw,2.4rem);
+  font-weight:700;
+}
+.point{
+  font-weight:600;
+}
+.paper a{
+  color:var(--accent);
+  text-decoration:none;
+  font-weight:600;
+}
+/* ---------- Inputs & button ---------- */
+#text_input_box{
+  border:2px solid rgba(32,58,107,.25);
+  border-radius:var(--radius);
+  padding:1rem 1.25rem;
+  font-size:1rem;
+  width:100%;
+  transition:border-color var(--transition), box-shadow var(--transition);
+}
+#text_input_box:focus{
+  outline:none;
+  border-color:var(--accent);
+  box-shadow:0 0 0 4px rgba(20,184,166,.18);
+}
+.analyze-btn{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:.5rem;
+  font-weight:600;
+  font-size:1rem;
+  padding:.9rem 1.6rem;
+  background:var(--primary);
+  color:#fff;
+  border:none;
+  border-radius:var(--radius);
+  cursor:pointer;
+  transition:transform var(--transition), box-shadow var(--transition);
+}
+.analyze-btn:hover{
+  transform:translateY(-2px);
+  box-shadow:0 8px 24px rgba(0,0,0,.12);
+}
+.analyze-btn:active{
+  transform:translateY(1px) scale(.98);
+}
+/* spinner placeholder */
+.spinner{
+  width:1rem;height:1rem;
+  border:3px solid rgba(255,255,255,.4);
+  border-top-color:#fff;
+  border-radius:50%;
+  animation:spin 1s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg);}}
+/* ---------- Output box ---------- */
+#result_output_box{
+  text-align:center;
+  font-size:1.15rem;
+  padding:1rem 1.5rem;
+  border-radius:var(--radius);
+  border:2px solid transparent;
+  min-height:3.5rem;
+  word-wrap:break-word;
+}
+.highlight-human{color:var(--accent);}
+.highlight-ai{color:#EF4444;}    /* red-500 */
+/* ---------- Tabs ---------- */
+.gradio-container .tabs{
+  margin-top:1rem!important;
+}
+.gradio-container .tab{
+  border:none!important;
+}
+.gradio-container .tabitem{
+  padding:.35rem .75rem!important;
+  border-radius:var(--radius) var(--radius) 0 0!important;
+}
+/* ---------- Utilities & media ---------- */
+@media(max-width:768px){
+  .container{padding:1.25rem;}
+}
+@keyframes fade-slide-in{
+  from{opacity:0;transform:translateY(12px);}
+  to{opacity:1;transform:none;}
+}
+"""
+)
 with iface:
+    with gr.Column(elem_classes="container"):
+        # Hero section
         gr.Markdown(description)
+        # Input
         text_input = gr.Textbox(
+            label="Paste or type your text...",
+            placeholder="Start writing here…",
             elem_id="text_input_box",
+            lines=6
         )
+        # Analyze button (triggers classify_text)
+        analyze_btn = gr.Button("Analyze", elem_classes="analyze-btn")
+        # Output
         result_output = gr.Markdown("", elem_id="result_output_box")
+        # Example tabs
+        with gr.Tab("AI examples"):
+            gr.Examples(examples=AI_texts, inputs=text_input)
+        with gr.Tab("Human examples"):
+            gr.Examples(examples=Human_texts, inputs=text_input)
+        gr.Markdown(bottom_text, elem_id="bottom_text", elem_classes="footer")
+    # Wire the interaction
+    analyze_btn.click(
+        fn=classify_text,
+        inputs=text_input,
+        outputs=result_output,
+        show_progress="minimal"   # toggles spinner internally
+    )
 iface.launch(share=True)