Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Fake News Detection using AugTagalog-BERT</title> | |
| <link rel="icon" type="image/png" href="{{ url_for('static', filename='bert.png') }}" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> | |
| </head> | |
| <body class="min-h-screen flex flex-col justify-between font-sans bg-gray-100"> | |
| <header class="bg-gray-800 w-full py-2 flex items-center justify-start"> | |
| <div class="flex items-center space-x-4 ml-4"> | |
| <img src="{{ url_for('static', filename='bert.png') }}" alt="BERT Logo" class="w-8 h-8" /> | |
| <h1 class="text-white text-md font-bold">Fake News Detection using AugTagalog-BERT</h1> | |
| </div> | |
| </header> | |
| <div class="flex-grow flex items-center justify-center px-10 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 w-full gap-12 max-w-6xl"> | |
| <div class="flex flex-col p-12 space-y-8 bg-white rounded-lg shadow-lg"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Tagalog Fake News Classifier</h2> | |
| <div> | |
| <label for="models" class="block text-lg font-medium text-gray-600 mb-2">Choose a model:</label> | |
| <div class="relative"> | |
| <select id="models" name="models" class="w-full bg-white text-gray-900 text-lg rounded-md border border-gray-300 focus:border-gray-500 focus:ring focus:ring-gray-200 py-3 pl-4 pr-10 appearance-none transition duration-200"> | |
| <option value="nonaug-bert">Non-Augmented BERT Model</option> | |
| <option value="aug-bert">Augmented BERT Model</option> | |
| <option value="nonaug-tagbert">Non-Augmented Tagalog-RoBERTa Model</option> | |
| <option value="aug-tagbert" selected>Augmented Tagalog-RoBERTa Model</option> | |
| <option value="nonaug-electra">Non-Augmented ELECTRA</option> | |
| <option value="aug-electra">Augmented ELECTRA</option> | |
| </select> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none"> | |
| <i class="fas fa-chevron-down text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative w-full"> | |
| <label for="newsInput" class="block text-lg font-medium text-gray-600 mb-2">Input News:</label> | |
| <textarea | |
| id="newsInput" | |
| class="h-40 w-full border-2 border-gray-300 rounded-lg pl-4 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 transition duration-200" | |
| placeholder="Paste your text here..." | |
| rows="6" | |
| ></textarea> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button | |
| id="detectBtn" | |
| class="bg-gray-800 text-white font-semibold py-3 px-8 rounded-lg hover:bg-gray-600 transition duration-300" | |
| > | |
| Detect | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex flex-col justify-center p-12 bg-white rounded-lg shadow-lg"> | |
| <div id="resultContainer" class="opacity-0 transition-opacity duration-500 h-full flex flex-col justify-center"> | |
| <div class="p-8 bg-gradient-to-b from-blue-50 to-white rounded-lg shadow-md"> | |
| <h2 class="text-3xl font-semibold mb-6 text-center text-gray-700">Result</h2> | |
| <p id="result" class="text-center text-lg font-semibold p-4 rounded-lg border text-gray-800"></p> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-bold text-center text-gray-700 mb-4">Confidence Levels</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-4 bg-red-100 rounded-lg shadow-sm text-center"> | |
| <h4 class="font-semibold text-red-600">Fake</h4> | |
| <p id="fake" class="text-lg font-bold text-red-700">0%</p> | |
| </div> | |
| <div class="p-4 bg-green-100 rounded-lg shadow-sm text-center"> | |
| <h4 class="font-semibold text-green-600">Real</h4> | |
| <p id="real" class="text-lg font-bold text-green-700">0%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="loadingSpinner" class="hidden flex justify-center items-center h-full"> | |
| <div class="flex flex-col items-center"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-b-4 border-gray-600"></div> | |
| <p class="mt-4 text-gray-600 font-semibold">Detecting...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="text-center py-4 bg-gray-800 w-full shadow-inner"> | |
| <p class="text-white text-sm"> | |
| © 2024 | <span class="font-semibold">J. Embolode, A. Kuan, A. Linaza</span> | |
| </p> | |
| </footer> | |
| <script> | |
| document.getElementById("detectBtn").addEventListener("click", function () { | |
| const newsInput = document.getElementById("newsInput").value; | |
| const model = document.getElementById("models").value; | |
| const loadingSpinner = document.getElementById("loadingSpinner"); | |
| const resultContainer = document.getElementById("resultContainer"); | |
| const resultText = document.getElementById("result"); | |
| const confidenceFake = document.getElementById("fake"); | |
| const confidenceReal = document.getElementById("real"); | |
| if (newsInput.trim() === "") { | |
| alert("Please enter text."); | |
| return; | |
| } | |
| loadingSpinner.classList.remove("hidden"); | |
| resultContainer.style.opacity = 0; | |
| fetch("/detect", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| }, | |
| body: JSON.stringify({ text: newsInput, model: model }), | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| loadingSpinner.classList.add("hidden"); | |
| resultContainer.style.opacity = 1; | |
| if (data.status === "error") { | |
| resultText.textContent = data.message; | |
| resultText.classList.add("text-red-500"); | |
| resultText.classList.remove("text-green-500"); | |
| } else { | |
| resultText.innerHTML = data.prediction; | |
| if (data.prediction === "News Needs Further Validation") { | |
| resultText.classList.add("text-red-500"); | |
| resultText.classList.remove("text-green-500"); | |
| } else { | |
| resultText.classList.add("text-green-500"); | |
| resultText.classList.remove("text-red-500"); | |
| } | |
| confidenceFake.textContent = (data.confidence.fake * 100).toFixed(2) + "%"; | |
| confidenceReal.textContent = (data.confidence.real * 100).toFixed(2) + "%"; | |
| } | |
| }) | |
| .catch((error) => { | |
| loadingSpinner.classList.add("hidden"); | |
| console.error("Error:", error); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |