Update index.html

index.html

@@ -19,7 +19,7 @@
 </html>
  -->
 
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
@@ -419,5 +419,398 @@
         console.log('🚀 Loading FalconsAI summarization model...');
         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>