implemented detection

wm_interactive/static/styles.css

@@ -1,89 +1,216 @@
 body {
-    background-color: #f0f0f0;
-    color: #333;
-    font-family: helvetica, sans-serif;
+    background-color: #f7f7f8;
+    color: #1a1a1a;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     line-height: 1.5;
-    padding: 20px;
+    padding: 0;
+    margin: 0;
 }
 
 .container {
-    background-color: #fff;
-    border-radius: 5px;
+    background-color: transparent;
+    box-shadow: none;
+    max-width: 1000px;
     padding: 20px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    max-width: 1200px;
     margin: 0 auto;
 }
 
 h1 {
+    color: #1a1a1a;
     font-size: 24px;
-    margin-bottom: 20px;
-    margin-right: 15px;
+    font-weight: 600;
+    margin-bottom: 30px;
+}
+
+.input-section {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin-bottom: 30px;
 }
 
 .input-section textarea {
     width: 100%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    padding: 16px;
+    background-color: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 12px;
     resize: none;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 1.5;
-    margin-bottom: 10px;
+    color: #1a1a1a;
+    transition: border-color 0.2s;
+}
+
+.input-section textarea:focus {
+    outline: none;
+    border-color: #10a37f;
+    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.2);
 }
 
 .input-section #prompt_text {
-    height: 100px;
+    height: 80px;
+    padding-right: 52px;
 }
 
 .input-section #user_text {
-    height: 200px;
+    height: 160px;
 }
 
 .button-container {
     display: flex;
-    gap: 10px;
-    margin-bottom: 10px;
+    gap: 12px;
+    justify-content: center;
+}
+
+.btn {
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 6px;
+    transition: all 0.2s;
+}
+
+.btn-primary {
+    background-color: #10a37f;
+    border-color: #10a37f;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background-color: #0e8d6e;
+    border-color: #0e8d6e;
+}
+
+.btn-secondary {
+    background-color: #40414f;
+    border-color: #565869;
+    color: #ececf1;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background-color: #4a4b5a;
+    border-color: #6b6c7b;
 }
 
 .token-display {
-    margin: 20px 0;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    background: #f8f9fa;
+    margin: 24px 0;
+    padding: 16px;
+    background-color: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 12px;
     min-height: 100px;
+    font-size: 15px;
+    line-height: 1.6;
+}
+
+.stats-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-top: 30px;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 12px;
+    border: 1px solid #e5e5e5;
+}
+
+.stats-container > div {
+    text-align: center;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: #f7f7f8;
+}
+
+.stat-value {
+    font-size: 28px;
+    font-weight: 600;
+    color: #1a1a1a;
+    margin-bottom: 8px;
+}
+
+.stat-label {
+    position: relative;
+    color: #6e6e80;
     font-size: 14px;
-    line-height: 1.5;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+.help-icon {
+    color: #6e6e80;
+    font-size: 12px;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+    cursor: help;
+}
+
+.help-tooltip {
+    visibility: hidden;
+    position: absolute;
+    z-index: 1000;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #1a1a1a;
+    color: #ffffff;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    width: max-content;
+    max-width: 200px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.help-tooltip::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #1a1a1a transparent transparent transparent;
+}
+
+.help-icon:hover + .help-tooltip {
+    visibility: visible;
+    opacity: 1;
 }
 
 .token {
-    display: inline-block;
     padding: 2px 4px;
-    margin: 2px;
-    border-radius: 3px;
-    font-family: monospace;
+    margin: 1px;
+    border-radius: 4px;
+    font-family: 'SF Mono', 'Menlo', 'Monaco', Courier, monospace;
+    transition: background-color 0.2s;
     position: relative;
     cursor: pointer;
 }
 
+.token:hover {
+    filter: brightness(1.1);
+}
+
 .token-tooltip {
     visibility: hidden;
     position: absolute;
-    z-index: 1;
+    z-index: 1000;
     bottom: 125%;
     left: 50%;
     transform: translateX(-50%);
-    padding: 6px 10px;
-    background-color: rgba(0, 0, 0, 0.9);
-    color: white;
-    border-radius: 4px;
+    background-color: #1a1a1a;
+    color: #ffffff;
+    padding: 8px 12px;
+    border-radius: 6px;
     font-size: 12px;
-    line-height: 1.4;
     white-space: nowrap;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     pointer-events: none;
-    font-family: monospace;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
 .token-tooltip::after {
@@ -94,96 +221,137 @@ h1 {
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
+    border-color: #1a1a1a transparent transparent transparent;
 }
 
 .token:hover .token-tooltip {
     visibility: visible;
 }
 
-.stats-container {
-    margin-top: 20px;
-    display: flex;
-    gap: 30px;
-    flex-wrap: wrap;
+/* Modal styling */
+.modal-content {
+    background-color: #ffffff;
+    color: #1a1a1a;
+    border: 1px solid #e5e5e5;
 }
 
-.stat-value {
-    font-size: 32px;
-    font-weight: 500;
-    color: #333;
+.modal-header {
+    border-bottom-color: #e5e5e5;
 }
 
-.stat-label {
-    color: #666;
-    font-size: 20px;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
+.modal-footer {
+    border-top-color: #e5e5e5;
 }
 
-.help-icon {
-    cursor: help;
-    color: #6c757d;
-    font-size: 0.875rem;
+.form-control, .form-select {
+    background-color: #f7f7f8;
+    border-color: #e5e5e5;
+    color: #1a1a1a;
 }
 
-.help-tooltip {
-    visibility: hidden;
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #333;
-    color: white;
-    padding: 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    width: max-content;
-    max-width: 200px;
-    z-index: 1000;
-    opacity: 0;
-    transition: opacity 0.2s;
+.form-control:focus, .form-select:focus {
+    background-color: #f7f7f8;
+    border-color: #10a37f;
+    color: #1a1a1a;
+    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.2);
 }
 
-.help-icon:hover + .help-tooltip {
-    visibility: visible;
-    opacity: 1;
+.form-text {
+    color: #6e6e80;
+}
+
+.btn-close {
+    filter: none;
 }
 
 /* Mobile-specific styles */
 @media (max-width: 768px) {
-    body {
-        padding: 10px;
-    }
-
     .container {
         padding: 15px;
     }
 
-    h1 {
-        font-size: 20px;
-        margin-right: 10px;
-    }
-
     .stats-container {
-        gap: 15px;
-        justify-content: space-between;
-    }
-
-    .stats-container > div {
-        flex: 0 0 calc(50% - 10px);
-        text-align: center;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+        padding: 12px;
     }
 
     .stat-value {
         font-size: 24px;
-        word-wrap: break-word;
-        overflow-wrap: break-word;
     }
 
     .stat-label {
-        font-size: 16px;
+        font-size: 12px;
     }
+
+    .help-tooltip {
+        max-width: 160px;
+    }
+}
+
+/* Light scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f7f7f8;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #d1d1d1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+
+.prompt-container {
+    position: relative;
+    width: 100%;
+}
+
+.floating-btn {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    width: 36px;
+    height: 36px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background-color: #10a37f;
+    color: #ffffff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.floating-btn:hover {
+    background-color: #0e8d6e;
+}
+
+.floating-btn:disabled {
+    background-color: #565869;
+    cursor: not-allowed;
+}
+
+.floating-btn i {
+    font-size: 16px;
+}
+
+.floating-btn .stop-icon {
+    display: none;
+}
+
+.floating-btn.generating .send-icon {
+    display: none;
+}
+
+.floating-btn.generating .stop-icon {
+    display: block;
 }

wm_interactive/templates/index.html

@@ -66,11 +66,13 @@
 
         <!-- Input Form -->
         <div class="input-section">
-            <textarea id="prompt_text" 
-                placeholder="Enter your prompt here to generate text with the model..."></textarea>
-            <div class="button-container">
-                <button class="btn btn-primary" id="generateBtn">Generate</button>
-                <button class="btn btn-secondary" id="stopBtn" disabled>Stop</button>
+            <div class="prompt-container">
+                <textarea id="prompt_text" 
+                    placeholder="Enter your prompt here to generate text with the model..."></textarea>
+                <button class="floating-btn" id="generateBtn">
+                    <i class="bi bi-send-fill send-icon"></i>
+                    <i class="bi bi-stop-fill stop-icon"></i>
+                </button>
             </div>
             <textarea id="user_text" 
                 placeholder="Generated text will appear here. Replace or edit this text to see how watermark detection works."></textarea>
@@ -119,11 +121,10 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let debounceTimeout = null;
-        let abortController = null;  // Add this line at the top with other variables
+        let abortController = null;
         const textarea = document.getElementById('user_text');
         const promptArea = document.getElementById('prompt_text');
         const generateBtn = document.getElementById('generateBtn');
-        const stopBtn = document.getElementById('stopBtn');
         const tokenDisplay = document.getElementById('tokenDisplay');
         const tokenCount = document.getElementById('tokenCount');
         const scoredTokens = document.getElementById('scoredTokens');
@@ -143,8 +144,7 @@
                 return;
             }
 
-            generateBtn.disabled = true;
-            stopBtn.disabled = false;
+            generateBtn.classList.add('generating');
             textarea.value = '';
 
             // Create new AbortController for this request
@@ -247,8 +247,7 @@
                 }
             })
             .finally(() => {
-                generateBtn.disabled = false;
-                stopBtn.disabled = true;
+                generateBtn.classList.remove('generating');
                 abortController = null;
             });
         }
@@ -258,15 +257,19 @@
                 abortController.abort();
                 abortController = null;
             }
-            generateBtn.disabled = false;
-            stopBtn.disabled = true;
+            generateBtn.classList.remove('generating');
         }
 
-        // Add event listeners for generation buttons
-        generateBtn.addEventListener('click', startGeneration);
-        stopBtn.addEventListener('click', stopGeneration);
+        // Remove BOTH old event listeners and add just one new one
+        generateBtn.addEventListener('click', function(e) {
+            e.preventDefault(); // Prevent any double triggers
+            if (generateBtn.classList.contains('generating')) {
+                stopGeneration();
+            } else {
+                startGeneration();
+            }
+        });
 
-        // Rest of the existing JavaScript code...
         async function updateTokenization() {
             const text = textarea.value;
             try {
@@ -406,7 +409,11 @@
             if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
                 e.preventDefault();
                 if (document.activeElement === promptArea) {
-                    generateBtn.click();
+                    if (generateBtn.classList.contains('generating')) {
+                        stopGeneration();
+                    } else {
+                        startGeneration();
+                    }
                 } else {
                     applyParamsBtn.click();
                 }