Article-Summary/index.html at main · brantleygusler/Article-Summary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!-- templates/index.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Article Summarizer</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <style>
    body { font-family: system-ui, -apple-system, Arial; max-width: 900px; margin: 32px auto; padding: 0 16px; color:#111; }
    input[type=text]{ width:70%; padding:8px; font-size:16px; }
    button{ padding:8px 12px; font-size:16px; margin-left:8px; }
    .box{ border:1px solid #e2e8f0; padding:12px; border-radius:8px; margin-top:16px; background:#fbfdff;}
    pre{ white-space:pre-wrap; word-break:break-word; }
    label{ display:inline-flex; align-items:center; gap:8px; margin-left:12px; font-size:14px; color:#555; }
  </style>
</head>
<body>
  <h1>Article Summarizer</h1>
  <p>Paste an article URL and get a clean extracted article + summary. If you installed a small Hugging Face model locally, the app will use it; otherwise a fast TextRank fallback will be used.</p>

  <div>
    <input id="url" type="text" placeholder="https://example.com/article..." />
    <button id="go">Summarize</button>
    <label><input id="prefer_hf" type="checkbox" checked/> Prefer local ML model</label>
  </div>

  <div id="status" class="box" style="display:none"></div>

  <div id="articleBox" class="box" style="display:none">
    <h3>Extracted article</h3>
    <pre id="article"></pre>
  </div>

  <div id="summaryBox" class="box" style="display:none">
    <h3>Summary</h3>
    <pre id="summary"></pre>
  </div>

  <script>
    const go = document.getElementById('go');
    const status = document.getElementById('status');
    const articleBox = document.getElementById('articleBox');
    const summaryBox = document.getElementById('summaryBox');
    const articleEl = document.getElementById('article');
    const summaryEl = document.getElementById('summary');
    const urlIn = document.getElementById('url');
    const preferHf = document.getElementById('prefer_hf');

    function showStatus(msg, isError=false) {
      status.style.display = 'block';
      status.style.color = isError ? 'crimson' : '#111';
      status.textContent = msg;
    }

    go.onclick = async () => {
      const url = urlIn.value.trim();
      if (!url) { showStatus('Please paste a URL.', true); return; }
      showStatus('Fetching & summarizing...');

      try {
        const res = await fetch('/api/summarize', {
          method: 'POST',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({url, prefer_hf: preferHf.checked})
        });
        const data = await res.json();
        if (!res.ok) {
          showStatus('Error: ' + (data.error || res.statusText), true);
          return;
        }
        showStatus('Done. used_hf: ' + !!data.used_hf + ' (if model available).');
        articleEl.textContent = data.article || '';
        summaryEl.textContent = data.summary || '';
        articleBox.style.display = 'block';
        summaryBox.style.display = 'block';
      } catch (err) {
        showStatus('Network or server error: ' + err.message, true);
      }
    };
  </script>
</body>
</html>