| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <title>🧠 LIAR Classifier + Scientific Validator</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| </head>
|
| <body class="bg-gray-100 text-gray-900">
|
|
|
| <div class="max-w-2xl mx-auto mt-10 bg-white p-8 rounded-xl shadow-lg border border-gray-200">
|
| <h1 class="text-3xl font-bold text-center text-blue-700 mb-6">🧠 Fake News Classifier + 🔬 Scientific Check</h1>
|
|
|
| <form id="liarForm" onsubmit="submitStatement(event)">
|
|
|
|
|
| <label class="block mb-4">
|
| <span class="font-semibold">News Statement</span>
|
| <textarea
|
| name="statement"
|
| required
|
| rows="4"
|
| class="w-full mt-1 p-2 border rounded"
|
| placeholder="e.g. The earth is flat and NASA faked the moon landing."
|
| ></textarea>
|
| <p class="text-sm text-gray-500 italic mt-1">💬 Enter a statement to classify and verify scientifically</p>
|
| </label>
|
|
|
|
|
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-lg">
|
| 🔍 Predict Truthfulness
|
| </button>
|
| </form>
|
|
|
|
|
| <div id="result" class="text-center mt-6 text-xl font-semibold text-green-700"></div>
|
| <div id="scienceResult" class="text-center mt-4 text-lg text-purple-700 font-medium"></div>
|
| </div>
|
|
|
| <script>
|
| async function submitStatement(event) {
|
| event.preventDefault();
|
|
|
| const form = document.getElementById("liarForm");
|
| const formData = new FormData(form);
|
| const body = {};
|
| formData.forEach((v, k) => body[k] = v);
|
|
|
| document.getElementById("result").innerText = "⏳ Predicting...";
|
| document.getElementById("scienceResult").innerText = "";
|
|
|
| try {
|
| const res = await fetch("/ref/liar/predictor", {
|
| method: "POST",
|
| headers: { "Content-Type": "application/json" },
|
| body: JSON.stringify(body)
|
| });
|
|
|
| const data = await res.json();
|
|
|
| if (data.success) {
|
| document.getElementById("result").innerText = `✅ Predicted Class: ${data.prediction}`;
|
| document.getElementById("scienceResult").innerText = `🔬 ${data.scientific_check}`;
|
| } else {
|
| document.getElementById("result").innerText = `❌ ${data.error || "Prediction failed"}`;
|
| }
|
| } catch (err) {
|
| document.getElementById("result").innerText = `❌ Error: ${err.message}`;
|
| }
|
| }
|
| </script>
|
| <div class="mt-6 text-center">
|
| <a href="/rfc" class="inline-block bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded shadow">
|
| ← Back to Visual Random Forest classification
|
| </a>
|
| </div>
|
| </body>
|
| </html>
|
|
|
