changed buttons

app/api/endpoints.py

@@ -26,6 +26,9 @@ class DetectorResult(BaseModel):
 class DetectionResponse(BaseModel):
     results: List[DetectorResult]
 
+
+    
+
 @router.post("/humanize")
 async def humanize_text_endpoint(input_data: HumanizeInput):
     try:
@@ -40,41 +43,6 @@ async def humanize_text_endpoint(input_data: HumanizeInput):
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
-# @router.post("/detect")
-# async def detect_ai_endpoint(input_data: DetectInput) -> DetectionResponse:
-#     try:
-#         # Call the AI detection function
-#         detection_results = detectors.detect_ai(input_data.text)
-        
-#         # Ensure the results are in the expected format
-#         # If detect_ai returns a different format, adjust accordingly
-#         formatted_results = []
-        
-#         # Assuming detect_ai returns a list of dictionaries with detector info
-#         # You may need to adjust this based on your actual detect_ai function output
-#         if isinstance(detection_results, list):
-#             for result in detection_results:
-#                 formatted_results.append(DetectorResult(
-#                     detector_name=result.get('name', 'Unknown Detector'),
-#                     ai_probability=result.get('probability', 0.0)
-#                 ))
-#         elif isinstance(detection_results, dict):
-#             # If it returns a single result or dict format
-#             for detector_name, probability in detection_results.items():
-#                 formatted_results.append(DetectorResult(
-#                     detector_name=detector_name,
-#                     ai_probability=probability
-#                 ))
-#         else:
-#             # If it's a different format, you'll need to adjust this
-#             raise ValueError("Unexpected detection results format")
-        
-#         return DetectionResponse(results=formatted_results)
-        
-#     except Exception as e:
-#         raise HTTPException(status_code=500, detail=f"Detection failed: {str(e)}")
-
-
 
 @router.post("/detect")
 async def detect_ai_endpoint(input_data: DetectInput) -> DetectionResponse:
@@ -144,12 +112,50 @@ async def detect_ai_endpoint(input_data: DetectInput) -> DetectionResponse:
         print(f"Detection error: {str(e)}")  # Debug log
         raise HTTPException(status_code=500, detail=f"Detection failed: {str(e)}")
 
-# Test endpoint to verify the detection endpoint is working
-@router.get("/detect/test")
-async def test_detect_endpoint():
-    """Test endpoint to verify detection functionality"""
-    return DetectionResponse(results=[
-        DetectorResult(detector_name="Test Detector 1", ai_probability=0.85),
-        DetectorResult(detector_name="Test Detector 2", ai_probability=0.42),
-        DetectorResult(detector_name="Test Detector 3", ai_probability=0.91)
-    ])
+# # Test endpoint to verify the detection endpoint is working
+# @router.get("/detect/test")
+# async def test_detect_endpoint():
+#     """Test endpoint to verify detection functionality"""
+#     return DetectionResponse(results=[
+#         DetectorResult(detector_name="Test Detector 1", ai_probability=0.85),
+#         DetectorResult(detector_name="Test Detector 2", ai_probability=0.42),
+#         DetectorResult(detector_name="Test Detector 3", ai_probability=0.91)
+#     ])
+    
+
+
+
+# @router.post("/detect")
+# async def detect_ai_endpoint(input_data: DetectInput) -> DetectionResponse:
+#     try:
+#         # Call the AI detection function
+#         detection_results = detectors.detect_ai(input_data.text)
+        
+#         # Ensure the results are in the expected format
+#         # If detect_ai returns a different format, adjust accordingly
+#         formatted_results = []
+        
+#         # Assuming detect_ai returns a list of dictionaries with detector info
+#         # You may need to adjust this based on your actual detect_ai function output
+#         if isinstance(detection_results, list):
+#             for result in detection_results:
+#                 formatted_results.append(DetectorResult(
+#                     detector_name=result.get('name', 'Unknown Detector'),
+#                     ai_probability=result.get('probability', 0.0)
+#                 ))
+#         elif isinstance(detection_results, dict):
+#             # If it returns a single result or dict format
+#             for detector_name, probability in detection_results.items():
+#                 formatted_results.append(DetectorResult(
+#                     detector_name=detector_name,
+#                     ai_probability=probability
+#                 ))
+#         else:
+#             # If it's a different format, you'll need to adjust this
+#             raise ValueError("Unexpected detection results format")
+        
+#         return DetectionResponse(results=formatted_results)
+        
+#     except Exception as e:
+#         raise HTTPException(status_code=500, detail=f"Detection failed: {str(e)}")
+

app/chains/detectors.py

@@ -14,15 +14,15 @@ def detect_ai(text):
     return [
         {
             "name": "GPTZero",
-            "probability": 0.85  # 85% AI probability
+            "probability": 0.3  # 85% AI probability
         },
         {
             "name": "Another Detector",
-            "probability": 0.96  # 85% AI probability
+            "probability": 0.2  # 85% AI probability
         },
         {
             "name": "Another Detector ",
-            "probability": 0.3  # 85% AI probability
+            "probability": 0.9  # 85% AI probability
         }
     ]
 

app/static/index copy 2.html

@@ -0,0 +1,920 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>AI Text Humanizer</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html, body {
+      height: 100%;
+    }
+
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
+      color: #1f2937;
+      overflow-y: auto; /* Allow page scrolling */
+      min-height: 100vh;
+    }
+
+    .container {
+      min-height: 100vh;
+      max-width: 1400px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      padding: 16px;
+    }
+
+    /* ===== HEADER (Title + Subtitle) ===== */
+    .header {
+      text-align: center;
+      margin-bottom: 16px; /* Reduced bottom margin so header sits higher */
+    }
+
+    h1 {
+      font-size: 2.0em;   /* Slightly smaller */
+      font-weight: 800;
+      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin-bottom: 6px;
+      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    p.description {
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 1.2em;
+      font-weight: 300;
+    }
+
+    /* ===== MAIN GRID (Input + Output Panels) ===== */
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+      min-height: 70vh; /* Fixed height for the main panels */
+      margin-bottom: 24px;
+    }
+
+    @media (max-width: 1200px) {
+      .main-content {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+        gap: 20px;
+      }
+      h1 {
+        font-size: 1.8em;
+      }
+    }
+
+    @media (max-width: 768px) {
+      .container {
+        padding: 12px;
+      }
+      .panel {
+        padding: 16px;
+      }
+      h1 {
+        font-size: 1.6em;
+      }
+      p.description {
+        font-size: 1em;
+      }
+    }
+
+    /* ===== PANEL BASE STYLES ===== */
+    .panel {
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(20px);
+      border-radius: 20px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      padding: 24px;
+    }
+
+    .input-panel {
+      background: rgba(255, 255, 255, 0.98);
+    }
+
+    .output-panel {
+      background: rgba(248, 250, 252, 0.98);
+    }
+
+    /* ===== PANEL HEADER (Title + Subtitle inside each panel) ===== */
+    .panel-header {
+      margin-bottom: 16px;
+      padding-bottom: 12px;
+      border-bottom: 2px solid rgba(99, 102, 241, 0.1);
+    }
+
+    .panel-title {
+      font-size: 1.3em;
+      font-weight: 600;
+      color: #374151;
+      margin-bottom: 6px;
+    }
+
+    .panel-subtitle {
+      color: #6b7280;
+      font-size: 0.9em;
+    }
+
+    /* ===== INPUT PANEL CONTROLS ===== */
+    textarea {
+      flex: 1; /* Takes all available vertical space */
+      font-size: 15px;
+      padding: 16px;
+      border: 2px solid #e5e7eb;
+      border-radius: 12px;
+      resize: none;
+      transition: all 0.3s ease;
+      font-family: inherit;
+      line-height: 1.6;
+      background: #fafafa;
+      overflow-y: auto;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: #6366f1;
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+      background: white;
+    }
+
+    textarea::placeholder {
+      color: #9ca3af;
+    }
+
+    /* ===== BUTTON STYLES ===== */
+    button {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+      color: white;
+      padding: 8px 16px; /* Further reduced */
+      font-size: 13px; /* Further reduced */
+      font-weight: 600;
+      border: none;
+      border-radius: 8px; /* Smaller radius */
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+      max-width: 200px; /* Limit button width */
+    }
+
+    button:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+    }
+
+    button:active {
+      transform: translateY(0);
+    }
+
+    .copy-button {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+      margin-top: 0;
+      flex-shrink: 0;
+      width: 100%;
+      max-width: none; /* Allow full width for output buttons */
+    }
+
+    .copy-button:hover {
+      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+    }
+
+    .copy-button.copied {
+      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+    }
+
+    .detector-button {
+      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
+      margin-top: 8px;
+      flex-shrink: 0;
+      width: 100%;
+      max-width: none; /* Allow full width for output buttons */
+    }
+
+    .detector-button:hover {
+      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
+    }
+
+    /* ===== FILE UPLOAD STYLES ===== */
+    .file-upload-area {
+      margin-top: 12px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .buttons-row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .file-input-wrapper {
+      position: relative;
+    }
+
+    .file-input {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+
+    .file-input-label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px 16px;
+      background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
+      color: white;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-size: 13px;
+      font-weight: 600;
+      box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+      min-height: 32px;
+      max-width: 140px; /* Limit width */
+    }
+
+    .file-input-label:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+    }
+
+    .clear-button {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+      padding: 8px 16px;
+      max-width: 100px; /* Limit width */
+    }
+
+    .clear-button:hover {
+      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+    }
+
+    .file-info {
+      font-size: 12px;
+      color: #6b7280;
+      margin-top: 8px;
+      padding: 0 4px;
+      text-align: center;
+    }
+
+    /* ===== OUTPUT CONTENT CONTAINER ===== */
+    .output-container {
+      display: flex;
+      flex-direction: column;
+      height: 400px; /* Fixed height for the container */
+      overflow: hidden; /* Prevent container from expanding */
+    }
+
+    /* ===== OUTPUT CONTENT (scrollable) ===== */
+    .output-content {
+      flex: 1; /* Fill vertical space between header and bottom button */
+      padding: 16px;
+      background: #f8fafc;
+      border: 2px solid #e2e8f0;
+      border-radius: 12px;
+      font-size: 15px;
+      line-height: 1.7;
+      white-space: pre-wrap;
+      overflow-y: auto; /* Only this area scrolls */
+      color: #334155;
+      height: 400px; /* Fixed height instead of min-height */
+      max-height: 400px; /* Prevent expansion */
+    }
+
+    /* ===== BOTTOM BUTTON CONTAINER (flexible height) ===== */
+    .panel-bottom {
+      margin-top: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex-shrink: 0; /* Prevent buttons from shrinking */
+    }
+
+    /* ===== AI DETECTOR SECTION STYLES ===== */
+    .detector-section {
+      display: none; /* Hidden by default */
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(20px);
+      border-radius: 20px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      padding: 24px;
+      margin-bottom: 24px;
+      animation: slideIn 0.5s ease-out;
+    }
+
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .detector-results {
+      padding: 16px;
+      background: #ffffff;
+      border: 2px solid #e2e8f0;
+      border-radius: 12px;
+    }
+
+    .detector-table-title {
+      font-size: 1.1em;
+      font-weight: 600;
+      color: #374151;
+      margin-bottom: 12px;
+      text-align: center;
+    }
+
+    .detector-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 14px;
+    }
+
+    .detector-table th {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+      color: white;
+      padding: 12px 8px;
+      text-align: left;
+      font-weight: 600;
+      border-radius: 8px 8px 0 0;
+    }
+
+    .detector-table th:first-child {
+      border-radius: 8px 0 0 0;
+    }
+
+    .detector-table th:last-child {
+      border-radius: 0 8px 0 0;
+    }
+
+    .detector-table td {
+      padding: 10px 8px;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    .detector-table tr:nth-child(even) {
+      background-color: #f8fafc;
+    }
+
+    .detector-table tr:hover {
+      background-color: #f1f5f9;
+    }
+
+    .ai-percentage {
+      font-weight: 600;
+      color: #ef4444;
+    }
+
+    .ai-percentage.low {
+      color: #10b981;
+    }
+
+    .ai-percentage.medium {
+      color: #f59e0b;
+    }
+
+    .ai-percentage.high {
+      color: #ef4444;
+    }
+
+    /* ===== LOADING & ERROR STATES ===== */
+    .loading {
+      color: #64748b;
+      font-style: italic;
+      text-align: center;
+      padding: 40px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .loading::before {
+      content: "✨";
+      animation: pulse 1.5s infinite;
+    }
+
+    .detector-loading {
+      color: #64748b;
+      font-style: italic;
+      text-align: center;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .detector-loading::before {
+      content: "🔍";
+      animation: pulse 1.5s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    .error {
+      color: #ef4444;
+      font-weight: 500;
+      text-align: center;
+      padding: 24px 16px;
+      background: rgba(239, 68, 68, 0.05);
+      border-radius: 8px;
+    }
+
+    /* ===== CUSTOM SCROLLBAR for output ===== */
+    .output-content::-webkit-scrollbar {
+      width: 8px;
+    }
+    .output-content::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 4px;
+    }
+    .output-content::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+    }
+    .output-content::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+
+    /* ===== DEBUG STYLES (temporary - remove in production) ===== */
+    .debug-info {
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      background: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 10px;
+      border-radius: 5px;
+      font-size: 12px;
+      z-index: 1000;
+      display: none; /* Hidden by default */
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <!-- Debug info (remove in production) -->
+    <div id="debugInfo" class="debug-info"></div>
+
+    <!-- ===== HEADER ===== -->
+    <div class="header">
+      <h1>🌟 AI Text Humanizer</h1>
+      <p class="description">Transform AI text into natural, human-like language</p>
+    </div>
+
+    <!-- ===== MAIN PANELS ===== -->
+    <div class="main-content">
+      <!-- ==================== INPUT PANEL ==================== -->
+      <div class="panel input-panel">
+        <div class="panel-header">
+          <div class="panel-title">📝 Input Text</div>
+          <div class="panel-subtitle">Paste your AI-generated content here or upload a file</div>
+        </div>
+
+        <textarea
+          id="inputText"
+          placeholder="Paste your AI-generated text here and watch the magic happen..."
+        ></textarea>
+
+        <div class="panel-bottom">
+          <!-- All buttons in one row -->
+          <div class="buttons-row">
+            <button type="button" onclick="humanize()">🚀 Humanize Text</button>
+            
+            <div class="file-input-wrapper">
+              <input type="file" id="fileInput" class="file-input" accept=".txt,.doc,.docx,.pdf" onchange="handleFileUpload(event)">
+              <label for="fileInput" class="file-input-label">
+                📁 Choose File
+              </label>
+            </div>
+            
+            <button type="button" class="clear-button" onclick="clearText()">🗑️ Clear</button>
+          </div>
+          
+          <div id="fileInfo" class="file-info" style="display: none;"></div>
+        </div>
+      </div>
+
+      <!-- ==================== OUTPUT PANEL ==================== -->
+      <div class="panel output-panel">
+        <div class="panel-header">
+          <div class="panel-title">✨ Humanized Result</div>
+          <div class="panel-subtitle">Your transformed, natural text</div>
+        </div>
+
+        <div class="output-container">
+          <!-- #result holds loading / error / final text; scrollable -->
+          <div id="result" class="output-content">
+            <div class="loading">Your humanized text will appear here...</div>
+          </div>
+        </div>
+
+        <div class="panel-bottom">
+          <!-- Copy button hidden until text arrives -->
+          <button
+            id="copyBtn"
+            type="button"
+            class="copy-button"
+            style="display: none;"
+            onclick="copyText()"
+          >
+            📋 Copy Text
+          </button>
+          
+          <!-- AI Detector button hidden until text arrives -->
+          <button
+            id="detectorBtn"
+            type="button"
+            class="detector-button"
+            style="display: none;"
+            onclick="runDetector()"
+          >
+            🔍 AI Detector Results
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ===== AI DETECTOR SECTION (appears at bottom) ===== -->
+    <div id="detectorSection" class="detector-section">
+      <div class="panel-header">
+        <div class="panel-title">🔍 AI Detector Analysis</div>
+        <div class="panel-subtitle">Detailed analysis of your humanized text</div>
+      </div>
+      <div id="detectorResults"></div>
+    </div>
+  </div>
+
+  <!-- ===== JAVASCRIPT ===== -->
+  <script>
+    let currentHumanizedText = '';
+    let debugMode = false; // Set to true for debugging
+
+    // Debug function
+    function updateDebugInfo(message) {
+      if (!debugMode) return;
+      const debugEl = document.getElementById('debugInfo');
+      debugEl.textContent = message;
+      debugEl.style.display = 'block';
+      console.log('DEBUG:', message);
+    }
+
+    // Toggle debug mode with Ctrl+D
+    document.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.key === 'd') {
+        e.preventDefault();
+        debugMode = !debugMode;
+        const debugEl = document.getElementById('debugInfo');
+        debugEl.style.display = debugMode ? 'block' : 'none';
+        updateDebugInfo('Debug mode: ' + (debugMode ? 'ON' : 'OFF'));
+      }
+    });
+
+    // File upload handler
+    async function handleFileUpload(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+
+      updateDebugInfo('File selected: ' + file.name);
+
+      const fileInfo = document.getElementById('fileInfo');
+      const textArea = document.getElementById('inputText');
+      
+      // Show file info
+      fileInfo.textContent = `📄 ${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
+      fileInfo.style.display = 'block';
+
+      try {
+        let text = '';
+        
+        if (file.type === 'text/plain' || file.name.endsWith('.txt')) {
+          // Handle plain text files
+          text = await file.text();
+        } else if (file.name.endsWith('.docx')) {
+          // For DOCX files, show a message since mammoth requires external library
+          textArea.value = '⚠️ DOCX files are not yet supported. Please copy and paste the text manually or use a .txt file.';
+          fileInfo.textContent += ' - DOCX support coming soon!';
+          return;
+        } else if (file.name.endsWith('.pdf')) {
+          // For PDF files, show a message since PDF parsing is complex
+          textArea.value = '⚠️ PDF files are not yet supported. Please copy and paste the text manually or use a .txt file.';
+          fileInfo.textContent += ' - PDF support coming soon!';
+          return;
+        } else {
+          // Try to read as text for other formats
+          text = await file.text();
+        }
+
+        // Set the text in the textarea
+        textArea.value = text;
+        
+        // Trigger the auto-resize
+        textArea.style.height = 'auto';
+        textArea.style.height = textArea.scrollHeight + 'px';
+        
+        updateDebugInfo('File loaded successfully, text length: ' + text.length);
+        fileInfo.textContent += ' - ✅ Loaded successfully!';
+
+      } catch (error) {
+        updateDebugInfo('Error reading file: ' + error.message);
+        fileInfo.textContent = `❌ Error reading ${file.name}: ${error.message}`;
+        fileInfo.style.color = '#ef4444';
+        console.error('File reading error:', error);
+      }
+    }
+
+    // Clear text and file
+    function clearText() {
+      const textArea = document.getElementById('inputText');
+      const fileInput = document.getElementById('fileInput');
+      const fileInfo = document.getElementById('fileInfo');
+      const outputDiv = document.getElementById('result');
+      const copyBtn = document.getElementById('copyBtn');
+      const detectorBtn = document.getElementById('detectorBtn');
+      const detectorSection = document.getElementById('detectorSection');
+      
+      // Clear all inputs and outputs
+      textArea.value = '';
+      fileInput.value = '';
+      fileInfo.style.display = 'none';
+      fileInfo.style.color = '#6b7280'; // Reset color
+      
+      // Reset output area
+      outputDiv.innerHTML = '<div class="loading">Your humanized text will appear here...</div>';
+      copyBtn.style.display = 'none';
+      detectorBtn.style.display = 'none';
+      detectorSection.style.display = 'none';
+      
+      // Reset stored text
+      currentHumanizedText = '';
+      
+      // Reset textarea height
+      textArea.style.height = 'auto';
+      
+      updateDebugInfo('All content cleared');
+    }
+
+    async function humanize() {
+      const textArea = document.getElementById("inputText");
+      const outputDiv = document.getElementById("result");
+      const copyBtn = document.getElementById("copyBtn");
+      const detectorBtn = document.getElementById("detectorBtn");
+      const detectorSection = document.getElementById("detectorSection");
+
+      const text = textArea.value.trim();
+
+      if (!text) {
+        alert("Please enter some text first!");
+        return;
+      }
+
+      updateDebugInfo('Starting humanize process...');
+
+      // Hide detector section when starting new humanization
+      detectorSection.style.display = "none";
+
+      // Clear previous results completely
+      outputDiv.innerHTML = "";
+      
+      // Show loading spinner
+      const spinner = document.createElement("div");
+      spinner.className = "loading";
+      spinner.textContent = "Processing your text...";
+      outputDiv.appendChild(spinner);
+
+      // Hide buttons until we have a successful response
+      copyBtn.style.display = "none";
+      detectorBtn.style.display = "none";
+
+      try {
+        updateDebugInfo('Sending request to /humanize...');
+        
+        const response = await fetch("/humanize", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ text }),
+        });
+
+        updateDebugInfo(`Response status: ${response.status}`);
+
+        if (!response.ok) {
+          throw new Error(`Server responded with status ${response.status}`);
+        }
+
+        const data = await response.json();
+        updateDebugInfo('Received humanized text, length: ' + data.humanized.length);
+
+        // Store the humanized text for detector
+        currentHumanizedText = data.humanized;
+
+        // Replace spinner with the actual humanized text
+        outputDiv.innerHTML = "";
+        const textNode = document.createTextNode(data.humanized);
+        outputDiv.appendChild(textNode);
+        
+        // Show buttons
+        copyBtn.style.display = "block";
+        detectorBtn.style.display = "block";
+        
+        updateDebugInfo('Humanize completed successfully');
+      } catch (error) {
+        updateDebugInfo('Error in humanize: ' + error.message);
+        
+        outputDiv.innerHTML = "";
+        const errDiv = document.createElement("div");
+        errDiv.className = "error";
+        errDiv.textContent = `❌ Error: ${error.message}`;
+        outputDiv.appendChild(errDiv);
+        console.error("Error:", error);
+      }
+    }
+
+    async function runDetector() {
+      if (!currentHumanizedText) {
+        alert("No humanized text available for detection!");
+        return;
+      }
+
+      updateDebugInfo('Starting detector process...');
+
+      const detectorSection = document.getElementById("detectorSection");
+      const detectorResults = document.getElementById("detectorResults");
+      const detectorBtn = document.getElementById("detectorBtn");
+      
+      // Show the detector section and scroll to it
+      detectorSection.style.display = "block";
+      setTimeout(() => {
+        detectorSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 100);
+      
+      // Show loading state in the detector results area
+      detectorResults.innerHTML = "";
+      const spinner = document.createElement("div");
+      spinner.className = "detector-loading";
+      spinner.textContent = "Running AI detection...";
+      detectorResults.appendChild(spinner);
+
+      // Disable button during processing
+      detectorBtn.disabled = true;
+      detectorBtn.textContent = "🔍 Analyzing...";
+
+      try {
+        updateDebugInfo('Sending request to /detect...');
+        
+        const response = await fetch("/detect", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ text: currentHumanizedText }),
+        });
+
+        updateDebugInfo(`Detect response status: ${response.status}`);
+
+        if (!response.ok) {
+          throw new Error(`Server responded with status ${response.status}`);
+        }
+
+        const data = await response.json();
+        updateDebugInfo('Received detector results, count: ' + data.results.length);
+
+        // Create the detector results table
+        detectorResults.innerHTML = `
+          <div class="detector-results">
+            <div class="detector-table-title">🔍 AI Detector Tool Results</div>
+            <table class="detector-table">
+              <thead>
+                <tr>
+                  <th>AI Detector Tool</th>
+                  <th>AI Probability</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${data.results.map(result => {
+                  const percentage = Math.round(result.ai_probability * 100);
+                  let colorClass = 'high';
+                  if (percentage < 30) colorClass = 'low';
+                  else if (percentage < 70) colorClass = 'medium';
+                  
+                  return `
+                    <tr>
+                      <td>${result.detector_name}</td>
+                      <td class="ai-percentage ${colorClass}">${percentage}% AI written</td>
+                    </tr>
+                  `;
+                }).join('')}
+              </tbody>
+            </table>
+          </div>
+        `;
+        
+        updateDebugInfo('Detector results displayed successfully');
+
+      } catch (error) {
+        updateDebugInfo('Error in detector: ' + error.message);
+        
+        // Add error message
+        detectorResults.innerHTML = "";
+        const errDiv = document.createElement("div");
+        errDiv.className = "error";
+        errDiv.textContent = `❌ Detection Error: ${error.message}`;
+        detectorResults.appendChild(errDiv);
+        
+        console.error("Detection Error:", error);
+      } finally {
+        // Re-enable button
+        detectorBtn.disabled = false;
+        detectorBtn.textContent = "🔍 AI Detector Results";
+      }
+    }
+
+    async function copyText() {
+      const copyBtn = document.getElementById("copyBtn");
+      const textToCopy = currentHumanizedText;
+
+      if (!textToCopy) {
+        alert("No text to copy!");
+        return;
+      }
+
+      try {
+        await navigator.clipboard.writeText(textToCopy);
+
+        // Instant feedback on the button
+        const original = copyBtn.innerHTML;
+        copyBtn.innerHTML = "✅ Copied!";
+        copyBtn.classList.add("copied");
+        setTimeout(() => {
+          copyBtn.innerHTML = original;
+          copyBtn.classList.remove("copied");
+        }, 2000);
+      } catch {
+        // Fallback for older browsers
+        const tmp = document.createElement("textarea");
+        tmp.value = textToCopy;
+        document.body.appendChild(tmp);
+        tmp.select();
+        document.execCommand("copy");
+        document.body.removeChild(tmp);
+
+        copyBtn.innerHTML = "✅ Copied!";
+        setTimeout(() => {
+          copyBtn.innerHTML = "📋 Copy Text";
+        }, 2000);
+      }
+    }
+
+    // Ctrl+Enter = humanize
+    document.addEventListener("keydown", (e) => {
+      if (e.ctrlKey && e.key === "Enter") {
+        humanize();
+      }
+    });
+
+    // Auto-resize the input textarea as you type
+    document.getElementById("inputText").addEventListener("input", function () {
+      this.style.height = "auto";
+      this.style.height = this.scrollHeight + "px";
+    });
+  </script>
+</body>
+</html>

app/static/index.html

@@ -186,8 +186,7 @@
       box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
       margin-top: 0;
       flex-shrink: 0;
-      width: 100%;
-      max-width: none; /* Allow full width for output buttons */
+      max-width: 140px; /* Same as file input button */
     }
 
     .copy-button:hover {
@@ -201,10 +200,9 @@
     .detector-button {
       background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
       box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
-      margin-top: 8px;
+      margin-top: 0; /* Remove top margin */
       flex-shrink: 0;
-      width: 100%;
-      max-width: none; /* Allow full width for output buttons */
+      max-width: 180px; /* Slightly wider for longer text */
     }
 
     .detector-button:hover {
@@ -505,7 +503,7 @@
       <div class="panel input-panel">
         <div class="panel-header">
           <div class="panel-title">📝 Input Text</div>
-          <div class="panel-subtitle">Paste your AI-generated content here or upload a file</div>
+          <div class="panel-subtitle">Paste your AI-generated content  or upload a file</div>
         </div>
 
         <textarea
@@ -547,27 +545,28 @@
         </div>
 
         <div class="panel-bottom">
-          <!-- Copy button hidden until text arrives -->
-          <button
-            id="copyBtn"
-            type="button"
-            class="copy-button"
-            style="display: none;"
-            onclick="copyText()"
-          >
-            📋 Copy Text
-          </button>
-          
-          <!-- AI Detector button hidden until text arrives -->
-          <button
-            id="detectorBtn"
-            type="button"
-            class="detector-button"
-            style="display: none;"
-            onclick="runDetector()"
-          >
-            🔍 AI Detector Results
-          </button>
+          <!-- Copy and Detector buttons in one row -->
+          <div class="buttons-row">
+            <button
+              id="copyBtn"
+              type="button"
+              class="copy-button"
+              style="display: none;"
+              onclick="copyText()"
+            >
+              📋 Copy Text
+            </button>
+            
+            <button
+              id="detectorBtn"
+              type="button"
+              class="detector-button"
+              style="display: none;"
+              onclick="runDetector()"
+            >
+              🔍 AI Detector Results
+            </button>
+          </div>
         </div>
       </div>
     </div>

app/test/test_models.ipynb

@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 8,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -11,7 +11,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 9,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -26,14 +26,14 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 10,
    "metadata": {},
    "outputs": [
     {
      "name": "stdout",
      "output_type": "stream",
      "text": [
-      "Biology is all about exploring life and the living world, diving into areas that look at how things are built, how they work, how they grow, where they come from, and how they've changed over time. Molecular biology zooms in on the interactions between the tiny parts of cells like DNA, RNA, proteins, and other important molecules. Then there's cellular biology, which takes a closer look at cells themselves — the building blocks of life. Inside these cells are organelles like mitochondria for energy production, chloroplasts for photosynthesis, and the nucleus for managing genetic information. Processes such as mitosis and meiosis play crucial roles in helping organisms grow, reproduce, and pass on traits to their offspring. And thanks to cell signaling, cells in multicellular organisms can communicate and coordinate with each other effectively.\n"
+      "Biology is a science study about life and living things, which include many subfields that look at structure, function, growth, origin, and evolution. Molecular biology is about how parts of cells like DNA, RNA, proteins, and other biomolecules interact with each other. Cellular biology is more about the structure and function of cells because they are the basic units of life. Inside cells, there are organelles such as mitochondria, chloroplasts, and nucleus that show special roles for making energy, doing photosynthesis, and controlling genes. Processes like mitosis and meiosis are very important for growing, reproducing, and passing on traits to next generations. Also cell signaling helps in coordination between many cells in multicellular organisms.\n"
      ]
     }
    ],