Hugging Face's logo

Spaces:
abreel
/
thesis-deployment
Runtime error

App Files Community
thesis-deployment
File size: 7,017 Bytes 
0ad9aa8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
<!DOCTYPE html>
<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>