Spaces:

Gagan0141
/

Webscraping

Sleeping

App Files Files Community

Gagan0141 commited on Nov 6, 2025

Commit

505a450

verified ·

1 Parent(s): 7a2fabe

Delete templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +0 -230

templates/index.html DELETED Viewed

@@ -1,230 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Web Scraper + Tokenizer (Flask)</title>
-    <link rel="stylesheet" href="/static/styles.css">
-</head>
-<body>
-<div class="topbar">
-    <h1>Web Tokenizer & News Comparator</h1>
-    <button id="darkToggle" class="toggle">Dark Mode</button>
-</div>
-<div class="main">
-    <div class="controls card">
-        <label><strong>Select website to add (preset):</strong></label>
-        <div class="row">
-            <select id="siteList">
-                <option value="">-- Choose a website --</option>
-                {% for name, link in sites.items() %}
-                <option value="{{ link }}">{{ name }}</option>
-                {% endfor %}
-            </select>
-            <button onclick="addSite()">Add</button>
-        </div>
-        <label style="margin-top:12px;"><strong>Enter multiple URLs (one per line):</strong></label>
-        <textarea id="urls" placeholder="https://example.com/page1&#10;https://example.com/page2"></textarea>
-        <label style="margin-top:12px;"><strong>Select Mode:</strong></label>
-        <select id="mode">
-            <option value="tokenize">Tokenize Page Text</option>
-            <option value="H1">Tokenize H1</option>
-            <option value="H2">Tokenize H2</option>
-            <option value="H3">Tokenize H3</option>
-            <option value="H4">Tokenize H4</option>
-            <option value="H5">Tokenize H5</option>
-            <option value="H6">Tokenize H6</option>
-            <option value="raw_text">Fetch Raw Text Only</option>
-        </select>
-        <button id="submitBtn" onclick="process()">Submit</button>
-    </div>
-    <div id="outputArea" class="card output">
-        <div id="output-container"></div>
-    </div>
-</div>
-<!-- Comparison panel -->
-<div id="compare-section" class="card" style="display:none; margin-top:18px;">
-    <h2>Side-by-Side Comparison (changed sentences)</h2>
-    <div style="display:flex; gap:12px;">
-        <div style="flex:1;">
-            <h3 id="compare-left-title"></h3>
-            <div id="compare-left" class="compare-box"></div>
-        </div>
-        <div style="flex:1;">
-            <h3 id="compare-right-title"></h3>
-            <div id="compare-right" class="compare-box"></div>
-        </div>
-    </div>
-</div>
-<script>
-let articlesGlobal = [];
-let selectedForCompare = [];
-// Add site dropdown -> textarea
-function addSite() {
-    const site = document.getElementById("siteList").value;
-    if (!site) return;
-    const ta = document.getElementById("urls");
-    ta.value = ta.value ? ta.value.trim() + "\n" + site : site;
-}
-// Submit and call backend
-async function process() {
-    document.getElementById("output-container").innerHTML = "<p>Processing...</p>";
-    document.getElementById("compare-section").style.display = "none";
-    selectedForCompare = [];
-    const urlLines = document.getElementById("urls").value.split("\n").map(s => s.trim()).filter(Boolean);
-    const mode = document.getElementById("mode").value;
-    if (urlLines.length === 0) {
-        document.getElementById("output-container").innerHTML = "<p class='notice'>Please enter at least one URL.</p>";
-        return;
-    }
-    const res = await fetch("/process_urls", {
-        method: "POST",
-        headers: {"Content-Type": "application/json"},
-        body: JSON.stringify({ urls: urlLines, mode })
-    });
-    const data = await res.json();
-    articlesGlobal = data.articles || [];
-    renderCards(data);
-}
-// Render cards, clusters, duplicates
-function renderCards(data) {
-    const container = document.getElementById("output-container");
-    container.innerHTML = "";
-    // Group by cluster
-    const clusters = {};
-    (data.articles || []).forEach(a => {
-        const c = a.cluster || 0;
-        if (!clusters[c]) clusters[c] = [];
-        clusters[c].push(a);
-    });
-    // Render clusters
-    Object.keys(clusters).forEach(clusterId => {
-        const hdr = document.createElement("h2");
-        hdr.innerText = "Topic Cluster " + clusterId;
-        hdr.className = "cluster-title";
-        container.appendChild(hdr);
-        clusters[clusterId].forEach(article => {
-            container.appendChild(makeArticleCard(article));
-        });
-    });
-    // Duplicate groups
-    if (data.duplicate_groups && data.duplicate_groups.length) {
-        const dupTitle = document.createElement("h2");
-        dupTitle.innerText = "Duplicate Groups";
-        dupTitle.className = "dup-title";
-        container.appendChild(dupTitle);
-        data.duplicate_groups.forEach((grp, idx) => {
-            const gcard = document.createElement("div");
-            gcard.className = "dup-card";
-            gcard.innerHTML = `<strong>Group ${idx+1}:</strong><br>` + grp.map(u => `<div><a href="${u}" target="_blank">${u}</a></div>`).join("");
-            container.appendChild(gcard);
-        });
-    }
-    if ((data.articles || []).length === 0) {
-        container.innerHTML = "<p class='notice'>No articles found / all failed to fetch.</p>";
-    }
-}
-function makeArticleCard(article) {
-    const card = document.createElement("div");
-    card.className = "article-card";
-    const title = document.createElement("div");
-    title.className = "article-title";
-    title.innerText = article.host || article.url;
-    card.appendChild(title);
-    const urlLine = document.createElement("div");
-    urlLine.className = "article-url";
-    urlLine.innerHTML = `<a href="${article.url}" target="_blank">${article.url}</a>`;
-    card.appendChild(urlLine);
-    const summary = document.createElement("div");
-    summary.className = "article-summary";
-    summary.innerHTML = `<strong>Summary:</strong><div>${escapeHtml(article.summary || "")}</div>`;
-    card.appendChild(summary);
-    const textBox = document.createElement("div");
-    textBox.className = "article-text";
-    textBox.innerText = article.text || "— No text extracted —";
-    card.appendChild(textBox);
-    const stats = document.createElement("div");
-    stats.className = "article-stats";
-    stats.innerText = `Words: ${article.words?.length || 0} • Sentences: ${article.sentences?.length || 0}`;
-    card.appendChild(stats);
-    // compare button
-    const cmpBtn = document.createElement("button");
-    cmpBtn.innerText = "Select for Comparison";
-    cmpBtn.onclick = () => selectForCompare(article);
-    cmpBtn.className = "small-btn";
-    card.appendChild(cmpBtn);
-    return card;
-}
-function selectForCompare(article) {
-    selectedForCompare.push(article);
-    // allow only two selection then show comparison
-    if (selectedForCompare.length > 2) selectedForCompare.shift();
-    if (selectedForCompare.length === 2) {
-        showComparison(selectedForCompare[0], selectedForCompare[1]);
-    } else {
-        alert("Select one more article to compare (2 total).");
-    }
-}
-async function showComparison(a1, a2) {
-    // request highlighted changed sentences
-    const resp = await fetch("/compare_texts", {
-        method: "POST",
-        headers: {"Content-Type": "application/json"},
-        body: JSON.stringify({ text1: a1.text || "", text2: a2.text || "" })
-    });
-    const data = await resp.json();
-    document.getElementById("compare-left-title").innerText = a1.host || a1.url;
-    document.getElementById("compare-right-title").innerText = a2.host || a2.url;
-    document.getElementById("compare-left").innerHTML = data.left || "<em>No changed sentences</em>";
-    document.getElementById("compare-right").innerHTML = data.right || "<em>No changed sentences</em>";
-    document.getElementById("compare-section").style.display = "block";
-    // scroll to compare
-    document.getElementById("compare-section").scrollIntoView({behavior: "smooth"});
-}
-// small escape
-function escapeHtml(str) {
-    if (!str) return "";
-    return str.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
-}
-// dark mode toggle
-const darkBtn = document.getElementById("darkToggle");
-darkBtn.addEventListener("click", () => {
-    document.body.classList.toggle("dark");
-    darkBtn.innerText = document.body.classList.contains("dark") ? "Light Mode" : "Dark Mode";
-});
-</script>
-</body>
-</html>