Update index.html

index.html

@@ -16,10 +16,10 @@
 			</p>
 		</div>
 	</body>
-</html>
- -->
+</html> -->
+
 
-<!-- <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
@@ -420,397 +420,4 @@
         initModel();
     </script>
 </body>
-</html> -->
-
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AI Text summarization · FalconsAI</title>
-  <!-- Font & clean reset -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap" rel="stylesheet">
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      background: #f6f8fc;
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      margin: 0;
-      padding: 1.5rem;
-    }
-
-    .card {
-      max-width: 780px;
-      width: 100%;
-      background: #ffffff;
-      border-radius: 28px;
-      box-shadow: 0 20px 40px -12px rgba(0, 20, 40, 0.15);
-      padding: 2rem 2.25rem 2.5rem;
-      transition: all 0.2s ease;
-    }
-
-    /* header */
-    .app-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 1.75rem;
-    }
-
-    .app-header h1 {
-      font-size: 1.6rem;
-      font-weight: 600;
-      letter-spacing: -0.02em;
-      color: #0b1a33;
-      background: linear-gradient(145deg, #0b1a33 0%, #1d3a6f 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-
-    .badge {
-      font-size: 0.75rem;
-      font-weight: 500;
-      background: #eef3fa;
-      color: #1f4977;
-      padding: 0.3rem 1rem;
-      border-radius: 40px;
-      letter-spacing: 0.01em;
-      white-space: nowrap;
-      border: 1px solid rgba(30, 80, 150, 0.08);
-    }
-
-    .badge i {
-      font-style: normal;
-      background: #d0def0;
-      padding: 0.1rem 0.5rem;
-      border-radius: 20px;
-      margin-left: 0.3rem;
-      color: #10345e;
-      font-weight: 600;
-    }
-
-    /* input / output sections */
-    .section {
-      margin-bottom: 1.5rem;
-    }
-
-    .section-label {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      margin-bottom: 0.4rem;
-    }
-
-    .section-label label {
-      font-weight: 500;
-      font-size: 0.9rem;
-      color: #1f3a5e;
-      letter-spacing: -0.01em;
-    }
-
-    .section-label .hint {
-      font-size: 0.7rem;
-      color: #6e7f96;
-    }
-
-    textarea {
-      width: 100%;
-      padding: 0.9rem 1.1rem;
-      font-family: 'Inter', monospace;
-      font-size: 0.95rem;
-      border: 1.5px solid #e2e9f2;
-      border-radius: 18px;
-      background: #fafcff;
-      resize: vertical;
-      transition: 0.15s ease;
-      color: #102133;
-      line-height: 1.5;
-    }
-
-    textarea:focus {
-      outline: none;
-      border-color: #3b7bc9;
-      box-shadow: 0 0 0 4px rgba(59, 123, 201, 0.12);
-      background: #ffffff;
-    }
-
-    textarea::placeholder {
-      color: #9aadc4;
-      font-weight: 400;
-      font-size: 0.9rem;
-    }
-
-    .output-box {
-      background: #fafcff;
-      border: 1.5px solid #e2e9f2;
-      border-radius: 18px;
-      padding: 0.9rem 1.1rem;
-      min-height: 5.5rem;
-      color: #102133;
-      font-size: 0.95rem;
-      line-height: 1.5;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-
-    .output-box:empty::before {
-      content: "Summarized text will appear here";
-      color: #9aadc4;
-      font-weight: 400;
-    }
-
-    /* action row */
-    .actions {
-      display: flex;
-      gap: 0.75rem;
-      justify-content: flex-end;
-      margin-top: 0.25rem;
-      flex-wrap: wrap;
-    }
-
-    .btn {
-      font-family: 'Inter', sans-serif;
-      font-weight: 500;
-      font-size: 0.9rem;
-      padding: 0.6rem 1.8rem;
-      border-radius: 60px;
-      border: none;
-      background: #eef3fa;
-      color: #1f3a5e;
-      cursor: pointer;
-      transition: 0.15s ease;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
-      letter-spacing: 0.01em;
-    }
-
-    .btn-primary {
-      background: #0b1a33;
-      color: white;
-      box-shadow: 0 4px 8px -2px rgba(11, 26, 51, 0.2);
-    }
-
-    .btn-primary:hover {
-      background: #132f55;
-      transform: scale(1.01);
-      box-shadow: 0 6px 14px -4px rgba(11, 26, 51, 0.25);
-    }
-
-    .btn-secondary:hover {
-      background: #dfe8f3;
-    }
-
-    .btn:active {
-      transform: scale(0.97);
-    }
-
-    hr {
-      border: none;
-      border-top: 1px solid #e9eff6;
-      margin: 1.2rem 0 0.8rem;
-    }
-
-    .footer-credit {
-      font-size: 0.7rem;
-      color: #768aa3;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: 0.5rem;
-    }
-
-    .footer-credit span:last-child {
-      background: #eef3fa;
-      padding: 0.2rem 0.8rem;
-      border-radius: 40px;
-      color: #1f4977;
-    }
-
-    /* mimic the image style: clean, airy */
-    .app-header h1::after {
-      content: "✨";
-      font-size: 1.2rem;
-      margin-left: 6px;
-      -webkit-text-fill-color: initial;
-      background: none;
-    }
-
-    /* small tweaks for mobile */
-    @media (max-width: 500px) {
-      .card { padding: 1.5rem; }
-      .app-header { flex-wrap: wrap; gap: 0.5rem; }
-      .badge { font-size: 0.65rem; padding: 0.2rem 0.8rem; }
-      .btn { padding: 0.5rem 1.2rem; font-size: 0.8rem; }
-    }
-  </style>
-</head>
-<body>
-<div class="card">
-
-  <!-- header exactly as in image -->
-  <div class="app-header">
-    <h1>AI Text summarization</h1>
-    <div class="badge">
-      ⚡ FalconsAI <i>T5</i>
-    </div>
-  </div>
-
-  <!-- input section -->
-  <div class="section">
-    <div class="section-label">
-      <label for="inputText">Input text to summarize</label>
-      <span class="hint">paste document text</span>
-    </div>
-    <textarea id="inputText" rows="6" placeholder="Paste document text here..."></textarea>
-  </div>
-
-  <!-- output section -->
-  <div class="section">
-    <div class="section-label">
-      <label for="outputText">Summarized text</label>
-      <span class="hint">result</span>
-    </div>
-    <div id="outputText" class="output-box" aria-label="Summarized text"></div>
-  </div>
-
-  <!-- action buttons: Clear + Submit (matching image) -->
-  <div class="actions">
-    <button class="btn btn-secondary" id="clearBtn">Clear</button>
-    <button class="btn btn-primary" id="submitBtn">Submit</button>
-  </div>
-
-  <!-- subtle footer (like image description) -->
-  <hr>
-  <div class="footer-credit">
-    <span>Powered by FalconsAI T5 Sequence-to-Sequence model.</span>
-    <span>⚡</span>
-  </div>
-</div>
-
-<script>
-  (function() {
-    // --- DOM refs ---
-    const inputEl = document.getElementById('inputText');
-    const outputEl = document.getElementById('outputText');
-    const clearBtn = document.getElementById('clearBtn');
-    const submitBtn = document.getElementById('submitBtn');
-
-    // --- helper: update output (with optional status) ---
-    function setOutput(text) {
-      outputEl.textContent = text;
-    }
-
-    // --- Clear ---
-    clearBtn.addEventListener('click', function() {
-      inputEl.value = '';
-      setOutput('');            // clear summarized text
-      // placeholder-like empty state is handled by CSS :empty
-    });
-
-    // --- Submit: call gradio endpoint via fetch ---
-    // The gradio backend runs at the same origin (spaces) and exposes /api/predict or /run/predict
-    // With gradio 3.x/4.x default is /run/predict? 
-    // We'll try both: first /run/predict (common) then fallback? 
-    // But most spaces with gradio use /run/predict for the interface.
-    // If you have a custom path, adjust. We'll assume default gradio route.
-    async function callSummarize(text) {
-      // trim and validate
-      const trimmed = text.trim();
-      if (!trimmed) {
-        setOutput('Please enter document text to summarize.');
-        return;
-      }
-
-      // client-side token check: approximate word count < 5 → insufficient
-      const wordCount = trimmed.split(/\s+/).length;
-      if (wordCount < 5) {
-        setOutput('Insufficient text to summarize.');
-        return;
-      }
-
-      // Prepare payload for Gradio v3/v4: 
-      // The endpoint is usually /run/predict or /api/predict
-      // We'll attempt /run/predict first.
-      const payload = {
-        data: [trimmed]   // the interface has one input
-      };
-
-      try {
-        // For Gradio Spaces, the default endpoint is "/run/predict" 
-        // (or "/api/predict" in newer versions). We'll try /run/predict.
-        const resp = await fetch('/run/predict', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(payload),
-        });
-
-        if (!resp.ok) {
-          // if 404, try /api/predict (gradio >= 4.0)
-          if (resp.status === 404) {
-            const resp2 = await fetch('/api/predict', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify(payload),
-            });
-            if (!resp2.ok) throw new Error(`API error: ${resp2.status}`);
-            const json = await resp2.json();
-            // data is usually in json.data array
-            if (json && json.data && Array.isArray(json.data) && json.data.length > 0) {
-              setOutput(json.data[0]);
-            } else {
-              setOutput('Unexpected response format from server.');
-            }
-            return;
-          }
-          throw new Error(`Server error: ${resp.status}`);
-        }
-
-        const json = await resp.json();
-        // response structure: { data: [summary] } for gradio
-        if (json && json.data && Array.isArray(json.data) && json.data.length > 0) {
-          setOutput(json.data[0]);
-        } else {
-          setOutput('Unexpected response format.');
-        }
-      } catch (err) {
-        console.error('Summarization error:', err);
-        setOutput('Error connecting to summarization service. Please try again.');
-      }
-    }
-
-    submitBtn.addEventListener('click', function() {
-      const inputText = inputEl.value;
-      callSummarize(inputText);
-    });
-
-    // optional: press Enter (Ctrl+Enter) to submit
-    inputEl.addEventListener('keydown', function(e) {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-        e.preventDefault();
-        submitBtn.click();
-      }
-    });
-
-    // on page load, maybe show a placeholder (empty) – but we want it empty.
-    // The CSS :empty pseudo-class will show placeholder text.
-    // ensure output is empty initially
-    setOutput('');
-  })();
-</script>
-
-</body>
-</html>
+</html>