Spaces:
Sleeping
Sleeping
| <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> | |