UI - theme

app.py

@@ -35,10 +35,10 @@ def classify_text(text):
         confidence = probabilities[predicted_class].item() * 100
 
         if predicted_class == 24:
-            prediction_label = f"✅ - The text is **{confidence:.2f}%** likely **Human written**."
+            prediction_label = f"✅ - The text is <span class='highlight-human'>**{confidence:.2f}%** likely <b>Human written</b>.</span>"
             model_info = ""  
         else:
-            prediction_label = f"🤖 - The text is **{confidence:.2f}%** likely **AI generated**."
+            prediction_label = f"🤖 - The text is <span class='highlight-ai'>**{confidence:.2f}%** likely <b>AI generated</b>.</span>"
             model_info = f"**Identified AI Model:** {label_mapping[predicted_class]}"
 
     result_message = f"**Result:**\n\n{prediction_label}"
@@ -49,17 +49,17 @@ def classify_text(text):
 
 title = "AI Text Detector"
 description = """
-**AI detection tool by SzegedAI**
 
 Detect AI-generated texts with precision using the new **ModernBERT** model, fine-tuned for machine-generated text detection, and capable of identifying 40 different models.
 
-- **🤖 Identify AI Models**: Reveals which LLM generated the text if detected as AI.
-- **✅ Human Verification**: Marks confidently human-written text with a green checkmark.
+-   **🤖 - 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.
-
 """
 
+bottom_text = "**AI detection tool by SzegedAI**"
+
 iface = gr.Interface(
     fn=classify_text,
     inputs=gr.Textbox(
@@ -79,10 +79,9 @@ iface = gr.Interface(
         border: 2px solid #4CAF50;
         font-size: 18px;
         padding: 15px;
-        text-align: center;
-        margin: 0 auto;
-        display: block;
-        width: 80%;
+        margin-bottom: 20px;
+        width: 100%;
+        box-sizing: border-box;
     }
     #result_output_box {
         border-radius: 10px;
@@ -90,35 +89,60 @@ iface = gr.Interface(
         font-size: 18px;
         padding: 15px;
         background-color: #2E2E3F;
-        margin: 20px auto;
-        width: 80%;
-        text-align: center;
+        margin-top: 10px;
+        width: 100%;
+        box-sizing: border-box;
     }
     body {
         background: #1E1E2F;
         color: #E1E1E6;
         font-family: 'Aptos', sans-serif;
         padding: 20px;
-        text-align: center;
     }
     .gradio-container {
         border: 2px solid #4CAF50;
         border-radius: 15px;
         padding: 30px;
         box-shadow: 0px 0px 20px rgba(0,255,0,0.6);
-        margin-top: 40px;
-        max-width: 600px;
-        margin-left: auto;
-        margin-right: auto;
+        max-width: 700px;
+        margin: auto;
     }
-    h1, h2 {
+    h1 {
         text-align: center;
-        font-size: 32px;
+        font-size: 36px;
         font-weight: bold;
-        margin-bottom: 20px;
+    }
+    h2 {
+        text-align: left;
+        font-size: 28px;
+    }
+    .highlight-human {
+        color: #4CAF50;
+        font-weight: bold;
+        background: rgba(76, 175, 80, 0.2);
+        padding: 5px;
+        border-radius: 8px;
+    }
+    .highlight-ai {
+        color: #FF5733;
+        font-weight: bold;
+        background: rgba(255, 87, 51, 0.2);
+        padding: 5px;
+        border-radius: 8px;
+    }
+    #bottom_text {
+        text-align: center;
+        margin-top: 50px;
+        font-weight: bold;
+        font-size: 20px;
+        color: #E1E1E6;
     }
     """
 )
 
-if __name__ == "__main__":
+def launch_app():
     iface.launch(share=True)
+    print(bottom_text)
+
+if __name__ == "__main__":
+    launch_app()