Spaces:
Sleeping
Sleeping
File size: 3,573 Bytes
acba296 |
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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultra News Tokenizer</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container">
<h1>Ultra News Tokenizer</h1>
<form id="urlForm" method="POST">
<div class="site-card-container">
<label class="section-title">Select News Sites</label>
<div class="site-cards">
<input type="checkbox" name="sites" id="indianexpress" value="https://indianexpress.com/">
<label for="indianexpress" class="site-card holo-card">
<div class="icon">📰</div>
<div class="site-name">Indian Express</div>
</label>
<input type="checkbox" name="sites" id="ndtv" value="https://www.ndtv.com/">
<label for="ndtv" class="site-card holo-card">
<div class="icon">🔵</div>
<div class="site-name">NDTV</div>
</label>
<input type="checkbox" name="sites" id="toi" value="https://timesofindia.indiatimes.com/">
<label for="toi" class="site-card holo-card">
<div class="icon">🟣</div>
<div class="site-name">Times of India</div>
</label>
<input type="checkbox" id="selectall">
<label for="selectall" class="site-card holo-card special">
<div class="icon">⭐</div>
<div class="site-name">Select All</div>
</label>
</div>
</div>
<label>Select Mode:</label>
<select name="mode">
<option value="tokenize">Tokenize Text</option>
<option value="raw_text">Raw Text</option>
</select>
<button type="submit">Submit</button>
</form>
<div id="output" class="result-container"></div>
</div>
<script>
document.getElementById("selectall").addEventListener("change", function() {
const checked = this.checked;
document.querySelectorAll('.site-cards input[type="checkbox"]').forEach(cb => {
if(cb.id !== "selectall") cb.checked = checked;
});
});
const form = document.getElementById("urlForm");
form.addEventListener("submit", async function(e) {
e.preventDefault();
const formData = new FormData(form);
const response = await fetch("/process_urls", {
method: "POST",
body: formData
});
const data = await response.json();
let html = "";
html += "<h2>Article Summaries</h2>";
for (const url in data.summaries) {
html += `<div class="result-card">
<h3>${url}</h3>
<p>${data.summaries[url]}</p>
</div>`;
}
html += "<h2>Comparisons (Changed Sentences)</h2>";
data.comparisons.forEach(c => {
html += `<div class="result-card">
<h3>${c.site1} VS ${c.site2}</h3>
<ul>`;
c.diff_sentences_site1.forEach(s => {
html += `<li>${s}</li>`;
});
html += `</ul></div>`;
});
html += "<h2>Clusters</h2>";
for (const label in data.clusters) {
html += `<div class="result-card"><strong>Cluster ${label}:</strong> ${data.clusters[label].join(", ")}</div>`;
}
document.getElementById("output").innerHTML = html;
});
</script>
</body>
</html>
|