UI - theme

app.py

@@ -49,26 +49,23 @@ def classify_text(text):
         
     return result_message
 
-title = "Detect AI Generated Texts!"
-description = """
-
----
+title = "AI Text Detector"
 
-Detect AI-generated texts with precision using the new **ModernBERT** model, fine-tuned for machine-generated text detection which is capable of identifying 40 different models.
+description = """
 
-- 🤖 - **Identify AI Models:** Reveals which LLM generated the text if detected as AI.  
-- ✅ - **Human Verification:** Marks human-written text with a green checkmark.  
 
-**Note:** The longer the text, the better the detection accuracy.
+This tool uses the **ModernBERT** model to identify whether a given text was written by a human or generated by AI.
 
----
+- 🔍 **Model Detection:** Can identify content from over 40 AI models.  
+- ✅ **Human Verification:** Human-written content is clearly marked.  
+- 📈 **Accuracy:** Works best with longer texts for improved precision.  
 
+Paste your text below to analyze its origin.
 """
 
-bottom_text = "**AI detection tool by SzegedAI**"
+bottom_text = "**Developed by SzegedAI**"
 
 iface = gr.Blocks(css="""
-
     @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
 
     #text_input_box {
@@ -94,10 +91,10 @@ iface = gr.Blocks(css="""
         margin: auto;
     }
 
-    .form.svelte-633qhp {
-        background: none;
-        border: none;
-        box-shadow: none;
+    @media (max-width: 768px) {
+        #result_output_box {
+            width: 80%;
+        }
     }
 
     body {
@@ -107,8 +104,9 @@ iface = gr.Blocks(css="""
         justify-content: center;
         align-items: center;
         height: 100vh;
-	overflow-y: auto;
+        overflow-y: auto;
     }
+
     .gradio-container {
         border: 1px solid #4CAF50;
         border-radius: 15px;
@@ -116,18 +114,15 @@ iface = gr.Blocks(css="""
         box-shadow: 0px 0px 10px rgba(0,255,0,0.6);
         max-width: 600px;
         margin: auto;
-	overflow-y: auto;
     }
+
     h1 {
         text-align: center;
-        font-size: 28px;
+        font-size: 32px;
         font-weight: bold;
-	margin-bottom: 30px;
-    }
-    h2 {
-        text-align: left;
-        font-size: 28px;
+        margin-bottom: 30px;
     }
+
     .highlight-human {
         color: #4CAF50;
         font-weight: bold;
@@ -135,6 +130,7 @@ iface = gr.Blocks(css="""
         padding: 5px;
         border-radius: 8px;
     }
+
     .highlight-ai {
         color: #FF5733;
         font-weight: bold;
@@ -142,15 +138,6 @@ iface = gr.Blocks(css="""
         padding: 5px;
         border-radius: 8px;
     }
-    #bottom_text {
-        text-align: center;
-        margin-top: 50px;
-        font-weight: bold;
-        font-size: 20px;
-    }
-    .block.svelte-11xb1hd{
-	background: none !important;
-    }
 """)
 
 with iface: