Update index.html

index.html

@@ -19,7 +19,6 @@
 </html>
  -->
 
- <!DOCTYPE html>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -35,7 +34,7 @@
         
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background: #f0f2f5;
+            background: #f5f5f5;
             min-height: 100vh;
             display: flex;
             justify-content: center;
@@ -45,124 +44,161 @@
         
         .card {
             background: white;
-            border-radius: 12px;
-            padding: 40px;
-            max-width: 700px;
+            border-radius: 8px;
+            padding: 32px 40px;
+            max-width: 680px;
             width: 100%;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
-            border: 1px solid #e0e0e0;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+            border: 1px solid #e8e8e8;
         }
         
         h1 {
             color: #1a1a1a;
-            margin-bottom: 4px;
-            font-size: 1.8rem;
+            font-size: 1.6rem;
             font-weight: 600;
+            margin-bottom: 4px;
+            letter-spacing: -0.3px;
         }
         
         .subtitle {
             color: #666;
-            margin-bottom: 25px;
-            font-size: 0.95rem;
-            padding-bottom: 15px;
+            font-size: 0.9rem;
+            margin-bottom: 24px;
+            padding-bottom: 16px;
             border-bottom: 1px solid #eee;
+            font-weight: 400;
         }
         
         .model-status {
-            margin: 10px 0 20px 0;
-            padding: 10px 14px;
-            background: #f0f7ff;
-            border-radius: 6px;
-            font-size: 0.9rem;
-            color: #1a5a8c;
-            border: 1px solid #d0e3ff;
+            margin: -8px 0 20px 0;
+            padding: 8px 0;
+            font-size: 0.85rem;
+            color: #2d7a3a;
+            font-weight: 400;
         }
         
         .model-status.loading {
-            background: #fef3c7;
-            border-color: #fcd34d;
-            color: #92400e;
+            color: #b45309;
         }
         
-        .model-status.success {
-            background: #d1fae5;
-            border-color: #6ee7b7;
-            color: #065f46;
+        .model-status.error {
+            color: #b91c1c;
         }
         
-        .model-status.error {
-            background: #fee2e2;
-            border-color: #fca5a5;
-            color: #991b1b;
+        .input-group {
+            margin-bottom: 16px;
         }
         
-        label {
+        .input-group label {
             display: block;
-            font-weight: 600;
+            font-weight: 500;
             color: #333;
-            margin-bottom: 8px;
-            font-size: 0.95rem;
+            margin-bottom: 6px;
+            font-size: 0.9rem;
         }
         
         textarea {
             width: 100%;
-            padding: 12px 14px;
+            padding: 10px 12px;
             border: 1px solid #d0d0d0;
-            border-radius: 6px;
-            font-size: 15px;
+            border-radius: 4px;
+            font-size: 14px;
             font-family: inherit;
             resize: vertical;
             transition: border-color 0.2s;
-            min-height: 140px;
-            background: #fafafa;
+            min-height: 120px;
+            background: white;
+            color: #333;
+            line-height: 1.5;
         }
         
         textarea:focus {
             outline: none;
             border-color: #4a6cf7;
-            background: white;
         }
         
         textarea::placeholder {
             color: #999;
         }
         
+        .output-group {
+            margin-bottom: 16px;
+        }
+        
+        .output-group label {
+            display: block;
+            font-weight: 500;
+            color: #333;
+            margin-bottom: 6px;
+            font-size: 0.9rem;
+        }
+        
+        #outputText {
+            background: #fafafa;
+            padding: 10px 12px;
+            border-radius: 4px;
+            min-height: 80px;
+            border: 1px solid #e8e8e8;
+            color: #333;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        
+        #outputText .placeholder {
+            color: #999;
+        }
+        
+        #outputText.error {
+            color: #b91c1c;
+        }
+        
+        #outputText.loading {
+            color: #4a6cf7;
+        }
+        
         .button-group {
             display: flex;
             gap: 10px;
-            margin: 16px 0 20px 0;
+            margin-top: 4px;
         }
         
         button {
-            padding: 10px 28px;
-            border-radius: 6px;
-            font-size: 15px;
+            padding: 8px 24px;
+            border-radius: 4px;
+            font-size: 14px;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.2s;
             border: 1px solid transparent;
+            background: transparent;
         }
         
         .submit-btn {
             background: #4a6cf7;
             color: white;
-            flex: 1;
+            border-color: #4a6cf7;
+            order: 2;
+            margin-left: auto;
         }
         
         .submit-btn:hover:not(:disabled) {
             background: #3b5de7;
+            border-color: #3b5de7;
         }
         
         .submit-btn:disabled {
             background: #a0aec0;
+            border-color: #a0aec0;
             cursor: not-allowed;
         }
         
         .clear-btn {
-            background: white;
             color: #4a5568;
             border-color: #d0d0d0;
-            flex: 0.4;
+            background: white;
+            order: 1;
         }
         
         .clear-btn:hover:not(:disabled) {
@@ -175,42 +211,10 @@
             cursor: not-allowed;
         }
         
-        .output-section {
-            margin-top: 5px;
-        }
-        
-        .output-section label {
-            margin-bottom: 6px;
-        }
-        
-        #outputText {
-            background: #fafafa;
-            padding: 12px 14px;
-            border-radius: 6px;
-            min-height: 80px;
-            border: 1px solid #e0e0e0;
-            color: #333;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            font-size: 15px;
-        }
-        
-        #outputText .placeholder {
-            color: #999;
-        }
-        
-        #outputText.loading {
-            color: #4a6cf7;
-        }
-        
-        #outputText.error {
-            color: #e53e3e;
-        }
-        
         .token-info {
-            margin-top: 10px;
-            font-size: 0.85rem;
-            color: #888;
+            margin-top: 8px;
+            font-size: 0.8rem;
+            color: #999;
             text-align: right;
         }
         
@@ -220,16 +224,21 @@
             }
             
             h1 {
-                font-size: 1.4rem;
+                font-size: 1.3rem;
             }
             
             .button-group {
-                flex-direction: column;
+                flex-wrap: wrap;
             }
             
-            .clear-btn {
+            .submit-btn {
                 flex: 1;
             }
+            
+            .clear-btn {
+                flex: 0.4;
+                min-width: 80px;
+            }
         }
     </style>
 </head>
@@ -238,12 +247,10 @@
         <h1>AI Text summarization</h1>
         <div class="subtitle">Powered by FalconsAI T5 Sequence-to-Sequence model.</div>
         
-        <!-- Model status will be dynamically updated -->
-        <div id="modelStatus" class="model-status loading">
-            ⏳ Loading model... Please wait
-        </div>
+        <!-- Model status - styled to blend in, not stand out -->
+        <div id="modelStatus" class="model-status loading">⏳ Loading model...</div>
         
-        <div>
+        <div class="input-group">
             <label for="inputText">Input text to summarize:</label>
             <textarea 
                 id="inputText" 
@@ -252,16 +259,16 @@
             ></textarea>
         </div>
         
-        <div class="button-group">
-            <button id="summarizeButton" class="submit-btn" disabled>Submit</button>
-            <button id="clearButton" class="clear-btn" disabled>Clear</button>
-        </div>
-        
-        <div class="output-section">
+        <div class="output-group">
             <label for="outputText">Summarized text:</label>
             <div id="outputText"><span class="placeholder">Your summary will appear here...</span></div>
             <div id="tokenInfo" class="token-info"></div>
         </div>
+        
+        <div class="button-group">
+            <button id="clearButton" class="clear-btn" disabled>Clear</button>
+            <button id="summarizeButton" class="submit-btn" disabled>Submit</button>
+        </div>
     </div>
 
     <!-- Use the official @huggingface/transformers import map -->
@@ -290,7 +297,7 @@
         
         async function initModel() {
             try {
-                modelStatus.textContent = '⏳ Downloading model... This may take 10-30 seconds.';
+                modelStatus.textContent = '⏳ Loading model...';
                 modelStatus.className = 'model-status loading';
                 summarizeBtn.disabled = true;
                 clearBtn.disabled = true;
@@ -302,7 +309,7 @@
                 
                 isModelReady = true;
                 modelStatus.textContent = '✅ Model loaded successfully! Ready to summarize.';
-                modelStatus.className = 'model-status success';
+                modelStatus.className = 'model-status';
                 summarizeBtn.disabled = false;
                 clearBtn.disabled = false;
                 
@@ -329,7 +336,6 @@
             
             const text = inputText.value.trim();
             
-            // Check if input is empty
             if (!text) {
                 outputText.textContent = 'Please enter document text to summarize.';
                 outputText.className = 'error';
@@ -337,10 +343,8 @@
                 return;
             }
             
-            // 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.';
                 outputText.className = 'error';
@@ -348,18 +352,13 @@
                 return;
             }
             
-            // Show loading state
             outputText.textContent = 'Summarizing...';
             outputText.className = 'loading';
             summarizeBtn.disabled = true;
             tokenInfo.textContent = '';
             
             try {
-                // Proceed with summarization
-                const result = await summarizer(text, { 
-                    truncation: true
-                });
-                
+                const result = await summarizer(text, { truncation: true });
                 const summaryText = result[0].summary_text;
                 const outputTokens = summaryText.split(/\s+/).length;
                 
@@ -378,19 +377,16 @@
             }
         }
         
-        // Clear function
         function clearAll() {
             inputText.value = '';
-            outputText.textContent = 'Your summary will appear here...';
+            outputText.innerHTML = '<span class="placeholder">Your summary will appear here...</span>';
             outputText.className = '';
             tokenInfo.textContent = '';
         }
         
-        // Event listeners
         summarizeBtn.addEventListener('click', summarize);
         clearBtn.addEventListener('click', clearAll);
         
-        // Allow Ctrl+Enter to summarize
         inputText.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
                 e.preventDefault();
@@ -398,7 +394,6 @@
             }
         });
         
-        // Initialize the model when the page loads
         console.log('🚀 Loading FalconsAI summarization model...');
         initModel();
     </script>