Update index.html

index.html

@@ -20,6 +20,8 @@
  -->
 
  <!DOCTYPE html>
+
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
@@ -167,6 +169,15 @@
             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;
@@ -189,7 +200,11 @@
 <body>
     <div class="card">
         <h1>📝 AI Text Summarization</h1>
-        <div class="subtitle">Powered by FalconsAI T5 Sequence-to-Sequence model</div>
+        <div class="subtitle">Powered by T5 model (running in your browser)</div>
+        
+        <div id="modelStatus" class="model-status">
+            ⏳ Loading model... Please wait.
+        </div>
         
         <div>
             <label for="inputText">Input text to summarize:</label>
@@ -201,7 +216,7 @@
         </div>
         
         <div class="button-group">
-            <button id="summarizeButton">✨ Summarize</button>
+            <button id="summarizeButton" disabled>✨ Summarize</button>
             <button id="clearButton" class="clear-btn">🗑️ Clear</button>
         </div>
         
@@ -230,39 +245,56 @@
         const tokenInfo = document.getElementById('tokenInfo');
         const summarizeBtn = document.getElementById('summarizeButton');
         const clearBtn = document.getElementById('clearButton');
+        const modelStatus = document.getElementById('modelStatus');
         
-        // Initialize the summarization pipeline lazily (only when needed)
+        // Initialize the summarization pipeline
         let summarizer = null;
+        let isModelReady = false;
         
-        async function getSummarizer() {
-            if (!summarizer) {
-                try {
-                    outputText.textContent = 'Loading model... This may take a moment.';
-                    outputText.className = 'loading';
-                    summarizeBtn.disabled = true;
-                    
-                    // Load the ONNX version of the model
-                    summarizer = await pipeline(
-                        'summarization', 
-                        'onnx-community/Falconsai-text_summarization-ONNX'
-                    );
-                    
-                    outputText.textContent = 'Ready! Enter text and click Summarize.';
-                    outputText.className = '';
-                    summarizeBtn.disabled = false;
-                } catch (error) {
-                    console.error('Failed to load model:', error);
-                    outputText.textContent = 'Failed to load the summarization model. Please refresh the page.';
-                    outputText.className = 'error';
-                    summarizeBtn.disabled = false;
-                    return null;
-                }
+        async function initModel() {
+            try {
+                modelStatus.innerHTML = '⏳ Loading T5 summarization model... This may take 10-30 seconds.';
+                modelStatus.style.background = '#fef3c7';
+                modelStatus.style.color = '#92400e';
+                summarizeBtn.disabled = true;
+                
+                // Load the model - using a known working model
+                summarizer = await pipeline(
+                    'summarization', 
+                    'Xenova/t5-small',  // This is the model that works
+                    { 
+                        // Optional: Use quantized version for faster loading
+                        quantized: true 
+                    }
+                );
+                
+                isModelReady = true;
+                modelStatus.innerHTML = '✅ Model loaded successfully! Ready to summarize.';
+                modelStatus.style.background = '#d1fae5';
+                modelStatus.style.color = '#065f46';
+                summarizeBtn.disabled = false;
+                
+                console.log('✅ 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';
+                summarizeBtn.disabled = true;
+                outputText.textContent = 'Failed to load the summarization model. Please refresh the page.';
+                outputText.className = 'error';
             }
-            return summarizer;
         }
         
         // Main summarize function
         async function summarize() {
+            if (!isModelReady || !summarizer) {
+                outputText.textContent = 'Model is still loading. Please wait...';
+                outputText.className = 'error';
+                return;
+            }
+            
             const text = inputText.value.trim();
             
             // Validate input
@@ -279,7 +311,7 @@
             if (inputTokens < 5) {
                 outputText.textContent = 'Insufficient text to summarize. Please enter at least 5 words.';
                 outputText.className = 'error';
-                tokenInfo.textContent = `Input tokens: ${inputTokens}`;
+                tokenInfo.textContent = `📊 Input tokens: ${inputTokens}`;
                 return;
             }
             
@@ -290,18 +322,11 @@
             tokenInfo.textContent = '';
             
             try {
-                // Get the summarizer
-                const summarizerInstance = await getSummarizer();
-                if (!summarizerInstance) {
-                    summarizeBtn.disabled = false;
-                    return;
-                }
-                
                 // Run summarization
-                const result = await summarizerInstance(text, { 
+                const result = await summarizer(text, { 
                     truncation: true,
-                    max_length: 150,  // Adjust as needed
-                    min_length: 30     // Adjust as needed
+                    max_length: 150,
+                    min_length: 30
                 });
                 
                 // Extract the summary
@@ -315,7 +340,7 @@
                 outputText.className = '';
                 tokenInfo.textContent = `📊 Input tokens: ${inputTokens} | Output tokens: ${outputTokens}`;
                 
-                console.log(`Input tokens: ${inputTokens}, Output tokens: ${outputTokens}`); // Debug
+                console.log(`✅ Input tokens: ${inputTokens}, Output tokens: ${outputTokens}`);
                 
             } catch (error) {
                 console.error('Summarization error:', error);
@@ -346,11 +371,9 @@
             }
         });
         
-        // Preload the model on page load (optional)
-        // Uncomment the line below if you want to preload the model immediately
-        // getSummarizer();
-        
-        console.log('✨ AI Text Summarization app loaded!');
+        // Initialize the model when the page loads
+        console.log('🚀 Loading summarization model...');
+        initModel();
     </script>
 </body>
 </html>