Spaces:

sayanAIAI
/

AIprojects

Runtime error

App Files Files Community

sayanAIAI commited on Aug 12

Commit

2884a69

verified ·

1 Parent(s): 72c1e04

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +349 -165

templates/index.html CHANGED Viewed

@@ -1,181 +1,365 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <title>AI Text Summarizer</title>
   <style>
-    body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      margin: 40px auto;
-      max-width: 600px;
-      padding: 0 20px;
-      background: #f5f5f5;
-      color: #222;
     }
-    textarea {
-      width: 100%;
-      height: 150px;
-      padding: 12px;
-      border-radius: 6px;
-      border: 1px solid #ccc;
-      font-size: 1rem;
-      resize: vertical;
-      box-sizing: border-box;
-    }
-    button {
-      margin-top: 15px;
-      padding: 12px 24px;
-      font-size: 1.1rem;
-      border-radius: 6px;
-      border: none;
-      background-color: #0078d7;
-      color: white;
-      cursor: pointer;
-      transition: background-color 0.3s ease;
-    }
-    button:hover {
-      background-color: #005ea3;
-    }
-    .summary-container {
-      margin-top: 30px;
-      background: white;
-      border-radius: 8px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
-      padding: 20px;
-      font-size: 1.1rem;
-      line-height: 1.5;
-      white-space: pre-wrap;
-      position: relative;
-    }
-    /* Loader style */
-    #loader {
-      display: none;
-      margin: 20px auto;
-      border: 5px solid #f3f3f3;
-      border-top: 5px solid #0078d7;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      0% { transform: rotate(0deg);}
-      100% { transform: rotate(360deg);}
-    }
-    /* Copy button */
-    #copy-btn {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background: #0078d7;
-      color: white;
-      border: none;
-      padding: 6px 12px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 0.9rem;
-      transition: background-color 0.3s ease;
-    }
-    #copy-btn:hover {
-      background-color: #005ea3;
     }
-    #copy-btn:active {
-      background-color: #004077;
     }
   </style>
 </head>
 <body>
-  <h1>AI Text Summarizer</h1>
-  <form id="summary-form">
-    <textarea name="text" id="text-input" placeholder="Paste your text here..." required></textarea>
-    <div id="word-count">Words: 0</div>
-    <div id="warning" style="color:red; display:none;"></div>
-    <br />
-    <button type="submit" id="summarize-btn">Summarize</button>
-  </form>
-  <!-- Loader Spinner -->
-  <div id="loader"></div>
-  <!-- Error Message -->
-  <div id="error-box" style="display:none; background:#ffe0e0; color:#a00; padding:10px; border-radius:5px; margin-top:10px;"></div>
-  <!-- Summary Output -->
-  <div id="summary" class="summary-container" style="display:none;">
-    <button id="copy-btn">Copy</button>
-    <h2>Summary:</h2>
-    <p id="summary-text"></p>
   </div>
-  <script>
-    const form = document.getElementById('summary-form');
-    const loader = document.getElementById('loader');
-    const summaryContainer = document.getElementById('summary');
-    const summaryText = document.getElementById('summary-text');
-    const copyBtn = document.getElementById('copy-btn');
-    const textInput = document.getElementById('text-input');
-    const wordCount = document.getElementById('word-count');
-    const warning = document.getElementById('warning');
-    const errorBox = document.getElementById('error-box');
-    const summarizeBtn = document.getElementById('summarize-btn');
-    // Live word count
-    textInput.addEventListener('input', () => {
-      const words = textInput.value.trim().split(/\s+/).filter(Boolean).length;
-      wordCount.textContent = `Words: ${words}`;
-      if (words < 10) {
-        warning.textContent = "Please enter at least 10 words.";
-        warning.style.display = 'block';
-      } else {
-        warning.style.display = 'none';
-      }
-    });
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const text = textInput.value.trim();
-      const words = text.split(/\s+/).filter(Boolean).length;
-      // Check minimum words
-      if (words < 10) {
-        warning.style.display = 'block';
-        return;
-      }
-      loader.style.display = 'block';
-      summaryContainer.style.display = 'none';
-      errorBox.style.display = 'none';
-      summarizeBtn.disabled = true;
-      try {
-        const response = await fetch('/summarize', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ text }),
-        });
-        if (!response.ok) {
-          throw new Error('Failed to summarize text. Please try again.');
-        }
-        const data = await response.json();
-        summaryText.textContent = data.summary;
-        summaryContainer.style.display = 'block';
-      } catch (err) {
-        errorBox.textContent = err.message;
-        errorBox.style.display = 'block';
-      } finally {
-        loader.style.display = 'none';
-        summarizeBtn.disabled = false;
-      }
     });
-    copyBtn.addEventListener('click', () => {
-      navigator.clipboard.writeText(summaryText.textContent).then(() => {
-        copyBtn.textContent = 'Copied!';
-        setTimeout(() => (copyBtn.textContent = 'Copy'), 1500);
-      });
     });
-  </script>
 </body>
 </html>

 <!doctype html>
 <html lang="en">
 <head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Summarizer — SummarizeAI</title>
+  <meta name="description" content="SummarizeAI — fast, private text summarizer." />
   <style>
+    :root{
+      --bg: #071018;
+      --card: rgba(255,255,255,0.02);
+      --muted: #9fb2c5;
+      --accent: #0ea5ff;
+      --glass: rgba(255,255,255,0.03);
+      --radius: 12px;
+      --maxw: 880px;
+      --ease: cubic-bezier(.2,.9,.3,1);
     }
+    *{box-sizing:border-box}
+    html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;color:#e6eef6;background:
+      radial-gradient(800px 400px at 10% 10%, rgba(14,165,255,0.03), transparent 6%),
+      linear-gradient(180deg,#061018 0%,var(--bg) 60%);}
+    .page{max-width:var(--maxw);margin:28px auto;padding:22px}
+    header{display:flex;align-items:center;justify-content:space-between;gap:12px}
+    .brand{display:flex;gap:12px;align-items:center}
+    .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#6ee7b7);display:flex;align-items:center;justify-content:center;color:#04293a;font-weight:700}
+    header h1{font-size:1.05rem;margin:0}
+    .sub{color:var(--muted);font-size:0.9rem;margin-top:6px}
+    /* main card */
+    .card{margin-top:18px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
+      border-radius:var(--radius);padding:18px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 18px 40px rgba(2,6,23,0.5)}
+    .controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
+    .left-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+    .select, .btn, .small-btn {
+      border-radius:10px;padding:10px 12px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:inherit;font-weight:600;
     }
+    .btn{background:linear-gradient(90deg,var(--accent), #60a5fa);color:#04293a;cursor:pointer;box-shadow:0 10px 30px rgba(14,165,255,0.08);border:0}
+    .btn:disabled{opacity:0.6;cursor:not-allowed}
+    .small-btn{font-size:0.9rem;padding:8px 10px;cursor:pointer}
+    .input-row{display:flex;gap:12px;margin-top:12px;align-items:flex-start}
+    textarea#text-input{flex:1;min-height:220px;resize:vertical;padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);
+      background:transparent;color:inherit;font-size:1rem;line-height:1.5}
+    .side-panel{width:260px;min-width:220px}
+    .meta{color:var(--muted);font-size:0.9rem;margin-top:8px}
+    .word-count{color:var(--muted);font-size:0.9rem;margin-top:8px}
+    /* loader & progress */
+    #loader{display:none;margin:16px auto;border-radius:50%;width:36px;height:36px;border:4px solid rgba(255,255,255,0.06);border-top-color:var(--accent);animation:spin 1s linear infinite}
+    @keyframes spin{to{transform:rotate(360deg)}}
+    .progress{height:8px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden;margin-top:10px}
+    .progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent), #60a5fa);transition:width .25s ease}
+    /* output */
+    .summary-box{margin-top:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
+    .summary-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
+    .summary-text{white-space:pre-wrap;font-size:1rem;color:#e6eef6}
+    /* history */
+    .history{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
+    .pill{background:rgba(255,255,255,0.02);padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.02);font-size:0.9rem;color:var(--muted);cursor:pointer}
+    /* warning / error */
+    .msg {margin-top:10px;padding:10px;border-radius:8px;font-weight:600}
+    .error{background:linear-gradient(180deg, rgba(255,40,60,0.06), rgba(255,40,60,0.02));color:#ffb5b5;border:1px solid rgba(255,40,60,0.06)}
+    .hint{color:var(--muted);font-size:0.9rem;margin-top:10px}
+    @media (max-width:860px){
+      .input-row{flex-direction:column}
+      .side-panel{width:100%}
     }
   </style>
 </head>
 <body>
+  <div class="page" role="main">
+    <header>
+      <div class="brand">
+        <div class="logo">SA</div>
+        <div>
+          <h1>SummarizeAI — Summarizer</h1>
+          <div class="sub">Fast, private summaries — paste text below or click "Send demo text" from the hub.</div>
+        </div>
+      </div>
+      <div>
+        <button id="themeToggle" class="small-btn" aria-pressed="false">Toggle Theme</button>
+      </div>
+    </header>
+    <div class="card" aria-live="polite">
+      <div class="controls">
+        <div class="left-controls">
+          <select id="length" class="select" aria-label="Summary length">
+            <option value="short">Short (1-2 lines)</option>
+            <option value="medium" selected>Medium</option>
+            <option value="long">Long (detailed)</option>
+          </select>
+          <select id="tone" class="select" aria-label="Tone">
+            <option value="neutral" selected>Neutral</option>
+            <option value="formal">Formal</option>
+            <option value="casual">Casual</option>
+            <option value="bullet">Bulleted</option>
+          </select>
+          <button id="exampleBtn" class="small-btn" title="Insert example">Example</button>
+          <button id="clearBtn" class="small-btn" title="Clear input">Clear</button>
+        </div>
+        <div style="display:flex;gap:8px;align-items:center">
+          <button id="summarize-btn" class="btn">Summarize</button>
+        </div>
+      </div>
+      <div class="input-row">
+        <textarea id="text-input" placeholder="Paste your article, meeting notes, or long text here..." aria-label="Text input"></textarea>
+        <aside class="side-panel" aria-hidden>
+          <div class="meta">Quick tips</div>
+          <div class="hint">• Aim for 50–1500 words for best results.<br>• Use the "Tone" for style tailoring.</div>
+          <div class="word-count" id="word-count">Words: 0</div>
+          <div style="margin-top:10px" id="wordWarning" class="msg" style="display:none"></div>
+          <div class="progress" aria-hidden><i id="prog"></i></div>
+          <div style="margin-top:14px;font-size:0.95rem;color:var(--muted)">Saved history</div>
+          <div class="history" id="history"></div>
+        </aside>
+      </div>
+      <div id="loader" role="status" aria-hidden="true"></div>
+      <div id="error-box" class="msg error" style="display:none"></div>
+      <div id="summary-area" style="display:none">
+        <div class="summary-box" role="region" aria-label="Summary result">
+          <div class="summary-text" id="summary-text"></div>
+          <div class="summary-actions">
+            <button id="copy-btn" class="small-btn">Copy</button>
+            <button id="download-btn" class="small-btn">Download .txt</button>
+            <button id="save-btn" class="small-btn">Save</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
+<script>
+/* ---------------------------
+  Config & helpers
+----------------------------*/
+const API_ENDPOINT = '/summarize'; // change if needed
+const textInput = document.getElementById('text-input');
+const summarizeBtn = document.getElementById('summarize-btn');
+const loader = document.getElementById('loader');
+const prog = document.getElementById('prog');
+const summaryArea = document.getElementById('summary-area');
+const summaryText = document.getElementById('summary-text');
+const copyBtn = document.getElementById('copy-btn');
+const downloadBtn = document.getElementById('download-btn');
+const saveBtn = document.getElementById('save-btn');
+const wordCountEl = document.getElementById('word-count');
+const wordWarning = document.getElementById('wordWarning');
+const errorBox = document.getElementById('error-box');
+const historyEl = document.getElementById('history');
+const lengthSelect = document.getElementById('length');
+const toneSelect = document.getElementById('tone');
+let currentSummary = '';
+let isDark = true;
+/* ---------------------------
+  Word count & validation
+----------------------------*/
+function updateWordCount(){
+  const words = textInput.value.trim().split(/\s+/).filter(Boolean).length;
+  wordCountEl.textContent = `Words: ${words}`;
+  if(words < 10){
+    wordWarning.textContent = 'Please enter at least 10 words to get a good summary.';
+    wordWarning.style.display = 'block';
+  } else {
+    wordWarning.style.display = 'none';
+  }
+}
+textInput.addEventListener('input', updateWordCount);
+updateWordCount();
+/* ---------------------------
+  Small UI utilities
+----------------------------*/
+function showLoader(on=true){
+  loader.style.display = on ? 'block' : 'none';
+  prog.style.width = on ? '36%' : '0%';
+}
+function setProgress(p){
+  prog.style.width = `${Math.max(0,Math.min(100,p))}%`;
+}
+function showError(msg){
+  errorBox.textContent = msg;
+  errorBox.style.display = 'block';
+}
+function clearError(){
+  errorBox.style.display = 'none';
+}
+/* ---------------------------
+  Fetch summary (POST)
+----------------------------*/
+async function fetchSummary(text, opts={}){
+  const body = {
+    text,
+    length: opts.length || lengthSelect.value,
+    tone: opts.tone || toneSelect.value
+  };
+  // Start UI
+  showError(''); clearError();
+  summaryArea.style.display = 'none';
+  showLoader(true);
+  summarizeBtn.disabled = true;
+  try{
+    // small progress simulation
+    setProgress(20);
+    const res = await fetch(API_ENDPOINT, {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify(body)
     });
+    setProgress(65);
+    if(!res.ok) throw new Error(`Server error: ${res.status}`);
+    const data = await res.json();
+    currentSummary = data.summary || data?.result || '';
+    summaryText.textContent = currentSummary;
+    summaryArea.style.display = 'block';
+    setProgress(100);
+  }catch(err){
+    showError(err.message || 'Failed to summarize. Try again later.');
+  }finally{
+    showLoader(false);
+    summarizeBtn.disabled = false;
+    setTimeout(()=> setProgress(0), 300);
+  }
+}
+/* ---------------------------
+  UI button handlers
+----------------------------*/
+document.getElementById('exampleBtn').addEventListener('click', ()=>{
+  textInput.value = "OpenAI launched a new model today that focuses on making text summarization far more accurate for long-form content. Engineers and researchers praised the model's efficiency in tests.";
+  updateWordCount();
+});
+document.getElementById('clearBtn').addEventListener('click', ()=>{
+  textInput.value = '';
+  updateWordCount();
+});
+summarizeBtn.addEventListener('click', (e)=>{
+  e.preventDefault();
+  const txt = textInput.value.trim();
+  if(!txt || txt.split(/\s+/).filter(Boolean).length < 10){
+    wordWarning.style.display = 'block';
+    return;
+  }
+  fetchSummary(txt);
+});
+copyBtn.addEventListener('click', ()=>{
+  if(!currentSummary) return;
+  navigator.clipboard.writeText(currentSummary).then(()=>{
+    copyBtn.textContent = 'Copied!';
+    setTimeout(()=> copyBtn.textContent = 'Copy',1400);
+  });
+});
+downloadBtn.addEventListener('click', ()=>{
+  if(!currentSummary) return;
+  const blob = new Blob([currentSummary], {type:'text/plain;charset=utf-8'});
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'summary.txt';
+  document.body.appendChild(a); a.click(); a.remove();
+  URL.revokeObjectURL(url);
+});
+saveBtn.addEventListener('click', ()=>{
+  if(!currentSummary) return;
+  const item = {text: textInput.value, summary: currentSummary, time: Date.now()};
+  const list = JSON.parse(localStorage.getItem('sa_history') || '[]');
+  list.unshift(item);
+  localStorage.setItem('sa_history', JSON.stringify(list.slice(0,20)));
+  renderHistory();
+});
+/* ---------------------------
+  History (localStorage)
+----------------------------*/
+function renderHistory(){
+  const list = JSON.parse(localStorage.getItem('sa_history') || '[]');
+  historyEl.innerHTML = '';
+  list.forEach((it, idx)=>{
+    const pill = document.createElement('button');
+    pill.className = 'pill';
+    pill.textContent = new Date(it.time).toLocaleString();
+    pill.title = (it.summary || '').slice(0,200);
+    pill.addEventListener('click', ()=> {
+      textInput.value = it.text;
+      updateWordCount();
+      summaryText.textContent = it.summary;
+      summaryArea.style.display = 'block';
     });
+    historyEl.appendChild(pill);
+  });
+}
+renderHistory();
+/* ---------------------------
+  PostMessage prefill (hub -> iframe)
+  listens for messages of form {type:'summarizer:prefill', text: '...'}
+----------------------------*/
+window.addEventListener('message', (ev)=>{
+  try{
+    const d = ev.data || {};
+    if(d && d.type === 'summarizer:prefill' && typeof d.text === 'string'){
+      textInput.value = d.text;
+      updateWordCount();
+      // optional: auto-open or auto-run
+      // fetchSummary(d.text);
+    }
+  }catch(e){ /* ignore */ }
+}, false);
+/* ---------------------------
+  Support ?text= URL param
+----------------------------*/
+(function prefillFromQuery(){
+  try{
+    const params = new URLSearchParams(location.search);
+    const t = params.get('text');
+    if(t){
+      textInput.value = t;
+      updateWordCount();
+    }
+  }catch(e){}
+})();
+/* ---------------------------
+  Theme toggle (light fallback)
+----------------------------*/
+document.getElementById('themeToggle').addEventListener('click', ()=>{
+  isDark = !isDark;
+  document.documentElement.style.setProperty('--bg', isDark? '#071018':'#f7fafc');
+  document.body.style.color = isDark? '#e6eef6':'#0b1220';
+  document.querySelectorAll('.card, .summary-box').forEach(el=> el.style.background = isDark? 'linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01))' : 'linear-gradient(180deg, rgba(2,6,23,0.02), rgba(2,6,23,0.01))');
+  document.getElementById('themeToggle').setAttribute('aria-pressed', String(isDark));
+});
+/* ---------------------------
+  Small accessibility / keyboard
+----------------------------*/
+textInput.addEventListener('keydown', (e)=> { if(e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); summarizeBtn.click(); } });
+</script>
 </body>
 </html>