Update index.html

index.html

@@ -21,6 +21,7 @@
 
  <!DOCTYPE html>
 
+<!DOCTYPE html>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -28,7 +29,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AI Text Summarization</title>
     <style>
-        /* All styles in one file for simplicity */
         * {
             margin: 0;
             padding: 0;
@@ -68,6 +68,16 @@
             padding-bottom: 10px;
         }
         
+        .model-status {
+            margin: 10px 0 20px 0;
+            padding: 12px;
+            background: #f0f7ff;
+            border-radius: 8px;
+            font-size: 0.95rem;
+            color: #4a5568;
+            border-left: 4px solid #667eea;
+        }
+        
         label {
             display: block;
             font-weight: 600;
@@ -84,6 +94,7 @@
             font-family: inherit;
             resize: vertical;
             transition: border-color 0.3s;
+            min-height: 150px;
         }
         
         textarea:focus {
@@ -160,6 +171,10 @@
             color: #e53e3e;
         }
         
+        .success {
+            color: #065f46;
+        }
+        
         .token-info {
             margin-top: 10px;
             font-size: 0.9rem;
@@ -169,15 +184,6 @@
             border-radius: 8px;
         }
         
-        .model-status {
-            margin: 10px 0;
-            padding: 10px;
-            background: #f0f7ff;
-            border-radius: 8px;
-            font-size: 0.9rem;
-            color: #4a5568;
-        }
-        
         @media (max-width: 600px) {
             .card {
                 padding: 20px;
@@ -200,10 +206,10 @@
 <body>
     <div class="card">
         <h1>📝 AI Text Summarization</h1>
-        <div class="subtitle">Powered by T5 model (running in your browser)</div>
+        <div class="subtitle">Powered by FalconsAI T5 Sequence-to-Sequence model</div>
         
         <div id="modelStatus" class="model-status">
-            ⏳ Loading model... Please wait.
+            ⏳ Loading model... Please wait (this may take 10-30 seconds)
         </div>
         
         <div>
@@ -253,41 +259,40 @@
         
         async function initModel() {
             try {
-                modelStatus.innerHTML = '⏳ Loading T5 summarization model... This may take 10-30 seconds.';
+                modelStatus.innerHTML = '⏳ Downloading FalconsAI T5 model... This may take 10-30 seconds.';
                 modelStatus.style.background = '#fef3c7';
-                modelStatus.style.color = '#92400e';
+                modelStatus.style.borderLeftColor = '#f59e0b';
                 summarizeBtn.disabled = true;
                 
-                // Load the model - using a known working model
+                // Load the ONNX version of Falconsai/text_summarization
                 summarizer = await pipeline(
                     'summarization', 
-                    'Xenova/t5-small',  // This is the model that works
+                    'onnx-community/Falconsai-text_summarization-ONNX',
                     { 
-                        // Optional: Use quantized version for faster loading
-                        quantized: true 
+                        quantized: true  // Use quantized version for faster loading
                     }
                 );
                 
                 isModelReady = true;
                 modelStatus.innerHTML = '✅ Model loaded successfully! Ready to summarize.';
                 modelStatus.style.background = '#d1fae5';
-                modelStatus.style.color = '#065f46';
+                modelStatus.style.borderLeftColor = '#10b981';
                 summarizeBtn.disabled = false;
                 
-                console.log('✅ Model loaded successfully!');
+                console.log('✅ FalconsAI summarization model loaded successfully!');
                 
             } catch (error) {
                 console.error('Failed to load model:', error);
                 modelStatus.innerHTML = '❌ Failed to load model. Please refresh the page or try again later.';
                 modelStatus.style.background = '#fee2e2';
-                modelStatus.style.color = '#991b1b';
+                modelStatus.style.borderLeftColor = '#ef4444';
                 summarizeBtn.disabled = true;
                 outputText.textContent = 'Failed to load the summarization model. Please refresh the page.';
                 outputText.className = 'error';
             }
         }
         
-        // Main summarize function
+        // Main summarize function (mirrors your Python app.py logic)
         async function summarize() {
             if (!isModelReady || !summarizer) {
                 outputText.textContent = 'Model is still loading. Please wait...';
@@ -297,7 +302,7 @@
             
             const text = inputText.value.trim();
             
-            // Validate input
+            // Check if input is empty or only whitespace
             if (!text) {
                 outputText.textContent = 'Please enter document text to summarize.';
                 outputText.className = 'error';
@@ -305,11 +310,12 @@
                 return;
             }
             
-            // Simple token count (split by whitespace)
+            // Approximate token count using words
             const inputTokens = text.split(/\s+/).length;
             
+            // Check if word count is less than 5
             if (inputTokens < 5) {
-                outputText.textContent = 'Insufficient text to summarize. Please enter at least 5 words.';
+                outputText.textContent = 'Insufficient text to summarize.';
                 outputText.className = 'error';
                 tokenInfo.textContent = `📊 Input tokens: ${inputTokens}`;
                 return;
@@ -322,26 +328,25 @@
             tokenInfo.textContent = '';
             
             try {
-                // Run summarization
+                // Proceed with summarization
                 const result = await summarizer(text, { 
-                    truncation: true,
-                    max_length: 150,
-                    min_length: 30
+                    truncation: true
                 });
                 
-                // Extract the summary
-                const summary = result[0].summary_text;
+                // Get summary text
+                const summaryText = result[0].summary_text;
                 
-                // Count output tokens
-                const outputTokens = summary.split(/\s+/).length;
+                // Calculate output tokens (approximate using word count)
+                const outputTokens = summaryText.split(/\s+/).length;
+                
+                // Debug print statement (visible in browser console)
+                console.log(`Input tokens: ${inputTokens}, Output tokens: ${outputTokens}`);
                 
                 // Update UI
-                outputText.textContent = summary;
-                outputText.className = '';
+                outputText.textContent = summaryText;
+                outputText.className = 'success';
                 tokenInfo.textContent = `📊 Input tokens: ${inputTokens} | Output tokens: ${outputTokens}`;
                 
-                console.log(`✅ Input tokens: ${inputTokens}, Output tokens: ${outputTokens}`);
-                
             } catch (error) {
                 console.error('Summarization error:', error);
                 outputText.textContent = `An error occurred: ${error.message || 'Unknown error'}`;
@@ -363,7 +368,7 @@
         summarizeBtn.addEventListener('click', summarize);
         clearBtn.addEventListener('click', clearAll);
         
-        // Optional: Allow Ctrl+Enter to summarize
+        // Allow Ctrl+Enter to summarize (same as your Python version)
         inputText.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
                 e.preventDefault();
@@ -372,7 +377,7 @@
         });
         
         // Initialize the model when the page loads
-        console.log('🚀 Loading summarization model...');
+        console.log('🚀 Loading FalconsAI summarization model...');
         initModel();
     </script>
 </body>