Update app.py

app.py

@@ -4,7 +4,7 @@ from transformers import AutoTokenizer, AutoModelForSequenceClassification
 import re
 from tokenizers import normalizers # For isinstance check
 from tokenizers.normalizers import Sequence, Replace, Strip
-from tokenizers import Regex # For the Regex class
+from tokenizers import Regex
 import os
 
 
@@ -56,32 +56,27 @@ def clean_text(text: str) -> str:
     return text
 
 if tokenizer:
-    # Define the new normalizers to add
     custom_normalizers_to_add = [
-        Replace(Regex(r'(\w+)[--]\s*\n\s*(\w+)'), r"\1\2"), # join_hyphen_break
-        Replace(Regex(r'\s*\n\s*'), " "), # newline_to_space
+        Replace(Regex(r'(\w+)[--]\s*\n\s*(\w+)'), r"\1\2"),
+        Replace(Regex(r'\s*\n\s*'), " "),
         Strip()
     ]
-
-    # Get the current normalizer from the backend tokenizer
     current_backend_normalizer = tokenizer.backend_tokenizer.normalizer
 
     if current_backend_normalizer is None:
-        # If no existing normalizer, just use the new ones in a Sequence
         tokenizer.backend_tokenizer.normalizer = Sequence(custom_normalizers_to_add)
     elif isinstance(current_backend_normalizer, normalizers.Sequence):
-        # If existing is a Sequence, extend its list of normalizers
-        # The .normalizers attribute of a Sequence is a list, so we can extend it
+        # Extend the existing list of normalizers within the Sequence object
         current_backend_normalizer.normalizers.extend(custom_normalizers_to_add)
-        # Re-assign to ensure change is registered if Sequence behaves immutably (though it likely modifies in place)
-        tokenizer.backend_tokenizer.normalizer = Sequence(current_backend_normalizer.normalizers)
-    else:
-        # If existing is a single normalizer (not None and not a Sequence), create a new Sequence
+        # Re-assign if `extend` doesn't modify in place or if Sequence needs explicit update
+        # For `tokenizers.normalizers.Sequence`, `normalizers` is a list and `extend` modifies it in place.
+        # No explicit re-assignment of tokenizer.backend_tokenizer.normalizer needed here unless Sequence is immutable.
+        # To be safe, one might re-create:
+        # tokenizer.backend_tokenizer.normalizer = Sequence(current_backend_normalizer.normalizers)
+    else: # It's a single normalizer object, not a Sequence
         tokenizer.backend_tokenizer.normalizer = Sequence([current_backend_normalizer] + custom_normalizers_to_add)
-
 # --- End Model & Tokenizer Configuration ---
 
-
 title_md = """
 <h1 style="text-align: center; margin-bottom: 5px;">AI Text Detector</h1>
 <p style="text-align: center; font-size: 0.9em; color: var(--text-secondary); margin-top: 0; margin-bottom: 20px;">Developed by SzegedAI</p>
@@ -168,86 +163,134 @@ def classify_text_interface(text):
 modern_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-/* Light Theme (Default) */
+/* Define values for light and dark themes */
 :root {
-    --primary-bg: #F4F7FC; /* Lighter body background */
-    --app-bg: #FFFFFF;
-    --text-primary: #2C3E50;
-    --text-secondary: #7F8C8D;
-    --accent-color: #1ABC9C;
-    --accent-color-darker: #16A085;
-    --border-color: #E0E6ED; /* Slightly softer border */
-    --input-bg: #FFFFFF;
-    --input-focus-border: var(--accent-color);
-    --human-color: #2ECC71;
-    --human-bg: rgba(46, 204, 113, 0.1);
-    --ai-color: #E74C3C;
-    --ai-bg: rgba(231, 76, 60, 0.1);
-    --shadow-color: rgba(44, 62, 80, 0.1);
+    --primary-bg-light: #F4F7FC;
+    --app-bg-light: #FFFFFF;
+    --text-primary-light: #2C3E50;
+    --text-secondary-light: #7F8C8D;
+    --accent-color-light: #1ABC9C;
+    --accent-color-darker-light: #16A085;
+    --border-color-light: #E0E6ED;
+    --input-bg-light: #FFFFFF;
+    --human-color-light: #2ECC71;
+    --human-bg-light: rgba(46, 204, 113, 0.1);
+    --ai-color-light: #E74C3C;
+    --ai-bg-light: rgba(231, 76, 60, 0.1);
+    --shadow-color-light: rgba(44, 62, 80, 0.1);
+    --examples-bg-light: #F8F9FA;
+    --placeholder-color-light: #B0BEC5;
+    --accordion-label-color-light: var(--text-primary-light);
+    --accordion-bg-light: var(--app-bg-light);
+    --accordion-border-light: var(--border-color-light);
+    --sample-textbox-bg-light: var(--input-bg-light);
+
+    --primary-bg-dark: #121828; /* Even darker body for more contrast */
+    --app-bg-dark: #1B2134; /* Darker app container */
+    --text-primary-dark: #E0E7FF; /* Lighter text for dark mode */
+    --text-secondary-dark: #98A0B3; /* Softer secondary text */
+    --accent-color-dark: #2CE1C7; /* Brighter accent */
+    --accent-color-darker-dark: #15B8A5;
+    --border-color-dark: #2F364D; /* Subtle borders */
+    --input-bg-dark: #22283E; /* Dark input fields */
+    --human-color-dark: #50FA7B; /* Brighter lime green */
+    --human-bg-dark: rgba(80, 250, 123, 0.15);
+    --ai-color-dark: #FF79C6; /* Bright pink/magenta for AI */
+    --ai-bg-dark: rgba(255, 121, 198, 0.15);
+    --shadow-color-dark: rgba(0, 0, 0, 0.3); /* Shadow for dark mode */
+    --examples-bg-dark: #22283E; /* Examples bg same as input */
+    --placeholder-color-dark: #687083;
+    --accordion-label-color-dark: var(--text-primary-dark);
+    --accordion-bg-dark: var(--app-bg-dark);
+    --accordion-border-dark: var(--border-color-dark);
+    --sample-textbox-bg-dark: var(--input-bg-dark);
+
+    /* Default to light theme variables */
+    --primary-bg: var(--primary-bg-light);
+    --app-bg: var(--app-bg-light);
+    --text-primary: var(--text-primary-light);
+    --text-secondary: var(--text-secondary-light);
+    --accent-color: var(--accent-color-light);
+    --accent-color-darker: var(--accent-color-darker-light);
+    --border-color: var(--border-color-light);
+    --input-bg: var(--input-bg-light);
+    --input-focus-border: var(--accent-color-light); /* Default focus for light */
+    --human-color: var(--human-color-light);
+    --human-bg: var(--human-bg-light);
+    --ai-color: var(--ai-color-light);
+    --ai-bg: var(--ai-bg-light);
+    --shadow-color: var(--shadow-color-light);
+    --examples-bg: var(--examples-bg-light);
+    --placeholder-color: var(--placeholder-color-light);
+    --accordion-label-color: var(--accordion-label-color-light);
+    --accordion-bg: var(--accordion-bg-light);
+    --accordion-border: var(--accordion-border-light);
+    --sample-textbox-bg: var(--sample-textbox-bg-light);
+
     --container-max-width: 800px;
     --border-radius-md: 8px;
     --border-radius-lg: 12px;
-    --examples-bg: #F8F9FA; /* Light background for examples area */
-    --placeholder-color: #B0BEC5;
-    --accordion-label-color: var(--text-primary);
-    --accordion-bg: var(--app-bg); /* Accordion bg same as app-bg for seamless look */
-    --accordion-border: var(--border-color);
-    --sample-textbox-bg: var(--input-bg);
 }
 
-/* Dark Theme Overrides */
+/* Apply Dark Theme when html.dark class is present (Hugging Face Spaces) */
+html.dark {
+    --primary-bg: var(--primary-bg-dark);
+    --app-bg: var(--app-bg-dark);
+    --text-primary: var(--text-primary-dark);
+    --text-secondary: var(--text-secondary-dark);
+    --accent-color: var(--accent-color-dark);
+    --accent-color-darker: var(--accent-color-darker-dark);
+    --border-color: var(--border-color-dark);
+    --input-bg: var(--input-bg-dark);
+    --input-focus-border: var(--accent-color-dark); /* Focus for dark */
+    --human-color: var(--human-color-dark);
+    --human-bg: var(--human-bg-dark);
+    --ai-color: var(--ai-color-dark);
+    --ai-bg: var(--ai-bg-dark);
+    --shadow-color: var(--shadow-color-dark);
+    --examples-bg: var(--examples-bg-dark);
+    --placeholder-color: var(--placeholder-color-dark);
+    --accordion-label-color: var(--accordion-label-color-dark);
+    --accordion-bg: var(--accordion-bg-dark);
+    --accordion-border: var(--accordion-border-dark);
+    --sample-textbox-bg: var(--sample-textbox-bg-dark);
+}
+
+/* Fallback for system preference if html.dark is not set */
 @media (prefers-color-scheme: dark) {
-    :root {
-        --primary-bg: #1A1D2E; /* Dark Blue/Charcoal for body */
-        --app-bg: #252936; /* Slightly lighter dark for main container */
-        --text-primary: #EAEAF1; /* Off-white for primary text */
-        --text-secondary: #A0A3AF; /* Lighter gray for secondary text */
-        --accent-color: #1DE9B6; /* Brighter Teal for dark mode */
-        --accent-color-darker: #00BFA5;
-        --border-color: #3A3E4F; /* Darker, less prominent border */
-        --input-bg: #2C3040; /* Darker input background */
-        /* --input-focus-border: var(--accent-color); /* Can remain the same or use a brighter version */
-        --human-color: #69F0AE; /* Brighter Green */
-        --human-bg: rgba(105, 240, 174, 0.15); /* Slightly more opaque for dark bg */
-        --ai-color: #FF8A80; /* Brighter Red */
-        --ai-bg: rgba(255, 138, 128, 0.15); /* Slightly more opaque for dark bg */
-        --shadow-color: rgba(0, 0, 0, 0.25); /* Shadow on dark bg */
-        --examples-bg: #2A2E3B; /* Dark background for examples area */
-        --placeholder-color: #7A7D8A;
-        --accordion-label-color: var(--text-primary);
-        --accordion-bg: var(--app-bg); /* Keep accordion bg consistent with app */
-        --accordion-border: var(--border-color);
-        --sample-textbox-bg: var(--input-bg);
-    }
-
-    body { /* Ensure body background changes for dark mode */
-        background: var(--primary-bg);
-    }
-
-    /* Specific component adjustments for dark mode if needed */
-    #text_input_box textarea::placeholder {
-        color: var(--placeholder-color);
-    }
-    .gr-accordion > .label-wrap button {
-        color: var(--accordion-label-color) !important; /* Ensure it uses the dark mode text color */
-    }
-     .learn-more-link, .learn-more-link b { /* Ensure link color adapts */
-        color: var(--accent-color) !important;
-    }
-    .learn-more-link:hover, .learn-more-link:hover b {
-        color: var(--accent-color-darker) !important;
+    html:not(.dark) :root { /* Apply only if HF class is not already active */
+        --primary-bg: var(--primary-bg-dark);
+        --app-bg: var(--app-bg-dark);
+        --text-primary: var(--text-primary-dark);
+        --text-secondary: var(--text-secondary-dark);
+        --accent-color: var(--accent-color-dark);
+        --accent-color-darker: var(--accent-color-darker-dark);
+        --border-color: var(--border-color-dark);
+        --input-bg: var(--input-bg-dark);
+        --input-focus-border: var(--accent-color-dark);
+        --human-color: var(--human-color-dark);
+        --human-bg: var(--human-bg-dark);
+        --ai-color: var(--ai-color-dark);
+        --ai-bg: var(--ai-bg-dark);
+        --shadow-color: var(--shadow-color-dark);
+        --examples-bg: var(--examples-bg-dark);
+        --placeholder-color: var(--placeholder-color-dark);
+        --accordion-label-color: var(--accordion-label-color-dark);
+        --accordion-bg: var(--accordion-bg-dark);
+        --accordion-border: var(--accordion-border-dark);
+        --sample-textbox-bg: var(--sample-textbox-bg-dark);
     }
 }
 
 .features-list strong::after {
   content: " ";
   display: inline-block;
-  width: 0.2em; /* Adds a small space after the bolded part like "Verification: " */
+  width: 0.2em;
 }
 
 body {
     font-family: 'Inter', sans-serif;
-    background: var(--primary-bg); /* Use CSS variable */
+    background: var(--primary-bg);
     color: var(--text-primary);
     margin: 0;
     padding: 20px;
@@ -257,7 +300,7 @@ body {
     min-height: 100vh;
     box-sizing: border-box;
     overflow-y: auto;
-    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transition */
+    transition: background-color 0.2s ease-out, color 0.2s ease-out;
 }
 
 .gradio-container {
@@ -268,53 +311,56 @@ body {
     max-width: var(--container-max-width);
     width: 100%;
     margin: 20px auto;
-    border: none; /* Gradio might add its own border, ensure it's controlled or removed */
-    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid var(--border-color); /* Add subtle border consistent with theme */
+    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
 }
 
-.form.svelte-633qhp, .block.svelte-11xb1hd, .gradio-html .block {
+/* Reset Gradio default styles that might interfere */
+.form.svelte-633qhp, .block.svelte-11xb1hd, .gradio-html .block, .gradio-markdown > *:first-child {
     background: none !important;
     border: none !important;
     box-shadow: none !important;
-    padding: 0 !important;
+    padding: 0 !important; /* Reset padding if it causes issues */
+    margin: 0 !important; /* Reset margin for Markdown wrapper */
 }
-
-/* Title and subtitle are handled by title_md */
-h1 { /* Fallback or for other h1s if any */
-    color: var(--text-primary);
-    font-size: clamp(24px, 5vw, 30px);
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 20px;
-    letter-spacing: -0.5px;
+/* Ensure Markdown text color inherits correctly */
+.gradio-markdown p, .gradio-markdown ul, .gradio-markdown li, .gradio-markdown h1, .gradio-markdown h2 {
+    color: inherit !important;
+}
+.gradio-markdown a {
+    color: var(--accent-color) !important;
 }
+.gradio-markdown a:hover {
+    color: var(--accent-color-darker) !important;
+}
+
 
 .app-description p {
     color: var(--text-secondary);
     font-size: clamp(14px, 2.5vw, 16px);
     line-height: 1.7;
-    margin-bottom: 15px;
+    margin-bottom: 15px !important; /* Override Gradio's specific p margin */
 }
 
 .app-description .instruction-text {
     font-weight: 500;
     color: var(--text-primary);
-    margin-top: 20px;
+    margin-top: 20px !important;
     text-align: center;
 }
 
 .features-list {
     list-style: none;
     padding-left: 0;
-    margin: 20px 0;
+    margin: 20px 0 !important;
 }
 
 .features-list li {
     display: flex;
-    align-items: center; /* Align icon with the first line of text */
+    align-items: center;
     font-size: clamp(14px, 2.5vw, 16px);
     color: var(--text-secondary);
-    margin-bottom: 12px;
+    margin-bottom: 12px !important;
     line-height: 1.6;
 }
 
@@ -322,17 +368,7 @@ h1 { /* Fallback or for other h1s if any */
     margin-right: 12px;
     font-size: 1.2em;
     color: var(--accent-color);
-    flex-shrink: 0; /* Prevent icon from shrinking */
-}
-
-.learn-more-link, .learn-more-link b {
-    color: var(--accent-color) !important;
-    text-decoration: none;
-    font-weight: 600;
-}
-.learn-more-link:hover, .learn-more-link:hover b {
-    color: var(--accent-color-darker) !important;
-    text-decoration: underline;
+    flex-shrink: 0;
 }
 
 #text_input_box textarea {
@@ -344,19 +380,19 @@ h1 { /* Fallback or for other h1s if any */
     width: 100%;
     box-sizing: border-box;
     color: var(--text-primary);
-    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
+    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out, color 0.2s ease-out;
     min-height: 120px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow for light mode */
+    box-shadow: 0 1px 3px rgba(0,0,0,0.03); /* Softer shadow */
 }
 
 #text_input_box textarea::placeholder {
     color: var(--placeholder-color);
-    transition: color 0.3s ease;
+    transition: color 0.2s ease-out;
 }
 
 #text_input_box textarea:focus {
     border-color: var(--input-focus-border);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus-border) 25%, transparent); /* Use color-mix for focus shadow */
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus-border) 20%, transparent);
     outline: none;
 }
 
@@ -365,131 +401,88 @@ h1 { /* Fallback or for other h1s if any */
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-md);
     padding: 20px;
-    margin-top: 25px;
+    margin-top: 25px !important; /* Override Gradio */
     width: 100%;
     box-sizing: border-box;
     text-align: center;
     font-size: clamp(16px, 3vw, 17px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow for light mode */
+    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
     min-height: 80px;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
 }
 #result_output_box p {
-    margin-bottom: 8px;
+    margin-bottom: 8px !important;
     line-height: 1.6;
-    color: var(--text-primary); /* Ensure text inside result box also adapts */
+    color: var(--text-primary) !important;
 }
 #result_output_box p:last-child {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
 }
-#result_output_box strong { /* Ensure bold text also adapts color */
-    color: var(--text-primary);
+#result_output_box strong {
+    color: var(--text-primary) !important;
 }
 
-
-.highlight-human, .highlight-ai { /* These are spans, color is set by their own var */
+.highlight-human, .highlight-ai {
     font-weight: 600;
     padding: 5px 10px;
     border-radius: var(--border-radius-md);
     display: inline-block;
     font-size: 1.05em;
-    transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-.highlight-human {
-    color: var(--human-color);
-    background-color: var(--human-bg);
-}
-
-.highlight-ai {
-    color: var(--ai-color);
-    background-color: var(--ai-bg);
-}
-
-/* Gradio specific Tab styling (if you were to use Tabs) */
-.tabs > div:first-child button {
-    background-color: transparent !important;
-    color: var(--text-secondary) !important;
-    border: none !important;
-    border-bottom: 2px solid transparent !important;
-    border-radius: 0 !important;
-    padding: 10px 15px !important;
-    font-weight: 500 !important;
-    transition: color 0.3s ease, border-bottom-color 0.3s ease !important;
-}
-
-.tabs > div:first-child button.selected {
-    color: var(--accent-color) !important;
-    border-bottom-color: var(--accent-color) !important;
-    font-weight: 600 !important;
+    transition: background-color 0.2s ease-out, color 0.2s ease-out;
 }
+.highlight-human { color: var(--human-color); background-color: var(--human-bg); }
+.highlight-ai { color: var(--ai-color); background-color: var(--ai-bg); }
 
-/* Accordion and Examples Styling */
 .gr-accordion {
     border: 1px solid var(--accordion-border) !important;
     border-radius: var(--border-radius-lg) !important;
     box-shadow: none !important;
     padding: 0 15px 15px 15px !important;
-    margin-bottom: 20px !important; /* Increased space below each accordion */
-    background-color: var(--accordion-bg) !important; /* Use variable for accordion background */
-    transition: background-color 0.3s ease, border-color 0.3s ease;
+    margin-bottom: 20px !important;
+    background-color: var(--accordion-bg) !important;
+    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
 }
-
 .gr-accordion > .label-wrap button {
     font-weight: 600 !important;
     color: var(--accordion-label-color) !important;
-    padding: 15px 0px !important; /* More padding for label */
+    padding: 15px 0px !important;
     font-size: 1.05em !important;
-    transition: color 0.3s ease;
+    transition: color 0.2s ease-out;
 }
-.gr-accordion > .label-wrap { /* Remove default Gradio accordion label border */
-    border-bottom: none !important;
-}
-
+.gr-accordion > .label-wrap { border-bottom: none !important; }
 
-.gr-examples { /* Wrapper for the examples content */
-    padding: 15px 0px 0px 0px !important; /* Adjust padding, top padding handled by accordion */
-    border: none !important; /* Border is on accordion now */
-    border-radius: 0 !important; /* Rounded corners on accordion */
-    background-color: transparent !important; /* Examples area transparent, accordion has bg */
-    margin-top: 0px !important; /* No extra margin, accordion handles it */
+.gr-examples {
+    padding: 15px 0px 0px 0px !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background-color: transparent !important;
+    margin-top: 0px !important;
 }
-.gr-sample-textbox { /* Individual example textboxes */
+.gr-sample-textbox {
     border: 1px solid var(--border-color) !important;
     border-radius: var(--border-radius-md) !important;
     font-size: 14px !important;
     background-color: var(--sample-textbox-bg) !important;
-    color: var(--text-primary) !important; /* Text color for example text */
-    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+    color: var(--text-primary) !important;
+    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
 }
-.gr-sample-textbox:hover {
-    border-color: var(--accent-color) !important; /* Highlight on hover */
-}
-
+.gr-sample-textbox:hover { border-color: var(--accent-color) !important; }
 
 .footer-text, #bottom_text {
     text-align: center;
-    margin-top: 40px; /* Keep space above footer */
+    margin-top: 40px !important;
     font-size: clamp(13px, 2vw, 14px);
     color: var(--text-secondary);
 }
-#bottom_text p {
-    margin: 0;
-}
+#bottom_text p { margin: 0 !important; }
 
 @media (max-width: 768px) {
-    body {
-        padding: 10px;
-        align-items: flex-start;
-    }
-    .gradio-container {
-        padding: 20px;
-        margin: 10px;
-    }
-    h1 { font-size: 22px; }
+    body { padding: 10px; align-items: flex-start; }
+    .gradio-container { padding: 20px; margin: 10px; }
+    /* h1 { font-size: 22px; }  Handled by Markdown inline style which uses clamp */
     .app-description p, .features-list li { font-size: 14px; }
     #text_input_box textarea { font-size: 15px; min-height: 100px; }
     #result_output_box { font-size: 15px; padding: 15px; }