Hugging Face's logo

Spaces:
aaryan24
/
Hate-Speech-Detector
Running

App Files Community
aaryan24 commited on
Commit
4f6ed1c
·
verified ·
1 Parent(s): d39833b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +194 -194
index.html CHANGED
@@ -1,194 +1,194 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Hate Speech Detection</title>
6
- <style>
7
- body {
8
- font-family: Arial, sans-serif;
9
- background: #f9f9f9;
10
- color: #000;
11
- margin: 0;
12
- padding: 20px;
13
- display: flex;
14
- flex-direction: column;
15
- align-items: center;
16
- }
17
-
18
- body.dark-mode {
19
- background: #272626;
20
- color: #fff;
21
- }
22
-
23
- h1 {
24
- font-size: 40px;
25
- margin-bottom: 10px;
26
- }
27
-
28
- .subtext {
29
- font-size: 16px;
30
- margin-bottom: 40px;
31
- text-align: center;
32
- max-width: 800px;
33
- }
34
-
35
- .container {
36
- display: flex;
37
- justify-content: center;
38
- gap: 40px;
39
- width: 100%;
40
- max-width: 1000px;
41
- }
42
-
43
- .left-panel, .right-panel {
44
- flex: 1;
45
- display: flex;
46
- flex-direction: column;
47
- }
48
-
49
- textarea {
50
- width: 100%;
51
- height: 140px;
52
- padding: 10px;
53
- font-size: 16px;
54
- }
55
-
56
- .buttons {
57
- display: flex;
58
- justify-content: space-between;
59
- width: 100%;
60
- margin-top: 10px;
61
- }
62
-
63
- .buttons button {
64
- width: 49.5%;
65
- padding: 12px;
66
- font-size: 16px;
67
- border: none;
68
- border-radius: 4px;
69
- cursor: pointer;
70
- }
71
-
72
- .submit-btn {
73
- background: #4CAF50;
74
- color: white;
75
- }
76
-
77
- .clear-btn {
78
- background: #45a049;
79
- color: white;
80
- }
81
-
82
- .share-btn {
83
- width: 100%;
84
- padding: 14px;
85
- font-size: 16px;
86
- background: #007BFF;
87
- color: white;
88
- border: none;
89
- border-radius: 4px;
90
- margin-top: auto;
91
- }
92
-
93
- .output {
94
- background: white;
95
- padding: 15px;
96
- border-radius: 8px;
97
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
98
- font-size: 16px;
99
- min-height: 120px;
100
- margin-bottom: 20px;
101
- }
102
-
103
- .dark-mode .output {
104
- background: #1e1e1e;
105
- color: #fff;
106
- }
107
-
108
- .mode-toggle {
109
- margin-top: 60px;
110
- font-size: 14px;
111
- }
112
- </style>
113
- </head>
114
- <body>
115
- <h1 id="page-title">Hate Speech Detection</h1>
116
- <p class="subtext">
117
- This tool uses 3 models (GloVe-based Deep Learning (GRU), RoBERTa (Transformer), ToxiGen-HateBERT (Transformer))
118
- to classify hate speech using an ensemble method.
119
- </p>
120
-
121
- <div class="container">
122
- <div class="left-panel">
123
- <form id="hs-form">
124
- <textarea id="text-input" placeholder="Enter text here..."></textarea>
125
- <div class="buttons">
126
- <button type="button" class="clear-btn" onclick="clearText()">Clear Text</button>
127
- <button type="submit" class="submit-btn">Submit</button>
128
- </div>
129
- </form>
130
- </div>
131
-
132
- <div class="right-panel">
133
- <div class="output" id="output" style="display: none;"></div>
134
- <button class="share-btn" onclick="shareText()">Share via Link</button>
135
- </div>
136
- </div>
137
-
138
- <div class="mode-toggle">
139
- <label><input type="checkbox" id="mode-toggle"> Dark Mode</label>
140
- </div>
141
-
142
- <script>
143
- const outputDiv = document.getElementById("output");
144
- const pageTitle = document.getElementById("page-title");
145
-
146
- document.getElementById("hs-form").addEventListener("submit", async function (e) {
147
- e.preventDefault();
148
- const text = document.getElementById("text-input").value;
149
-
150
- const response = await fetch("/predict", {
151
- method: "POST",
152
- headers: { "Content-Type": "application/json" },
153
- body: JSON.stringify({ text: text }),
154
- });
155
-
156
- const result = await response.json();
157
- outputDiv.style.display = "block";
158
- outputDiv.innerHTML = `
159
- <strong>Model 1:</strong> ${result.gru_prob}<br>
160
- <strong>Model 2:</strong> ${result.roberta_prob}<br>
161
- <strong>Model 3:</strong> ${result.toxigen_prob}<br>
162
- <strong>Prediction:</strong> ${result.prediction}
163
- `;
164
- });
165
-
166
- function clearText() {
167
- document.getElementById("text-input").value = "";
168
- outputDiv.style.display = "none";
169
- outputDiv.innerHTML = "";
170
- }
171
-
172
- function shareText() {
173
- const text = document.getElementById("text-input").value;
174
- const shareUrl = `${window.location.href}?text=${encodeURIComponent(text)}`;
175
- navigator.clipboard.writeText(shareUrl);
176
- alert("Sharable link copied to clipboard!");
177
- }
178
-
179
- document.getElementById("mode-toggle").addEventListener("change", function () {
180
- document.body.classList.toggle("dark-mode", this.checked);
181
- pageTitle.style.color = this.checked ? "white" : "black";
182
- });
183
-
184
- // On load: apply shared text if present
185
- window.onload = function () {
186
- const urlParams = new URLSearchParams(window.location.search);
187
- const sharedText = urlParams.get("text");
188
- if (sharedText) {
189
- document.getElementById("text-input").value = decodeURIComponent(sharedText);
190
- }
191
- };
192
- </script>
193
- </body>
194
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Hate Speech Detection</title>
6
+ <style>
7
+ body {
8
+ font-family: Arial, sans-serif;
9
+ background: #f9f9f9;
10
+ color: #000;
11
+ margin: 0;
12
+ padding: 20px;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ }
17
+
18
+ body.dark-mode {
19
+ background: #272626;
20
+ color: #fff;
21
+ }
22
+
23
+ h1 {
24
+ font-size: 40px;
25
+ margin-bottom: 10px;
26
+ }
27
+
28
+ .subtext {
29
+ font-size: 16px;
30
+ margin-bottom: 40px;
31
+ text-align: center;
32
+ max-width: 800px;
33
+ }
34
+
35
+ .container {
36
+ display: flex;
37
+ justify-content: center;
38
+ gap: 40px;
39
+ width: 100%;
40
+ max-width: 1000px;
41
+ }
42
+
43
+ .left-panel, .right-panel {
44
+ flex: 1;
45
+ display: flex;
46
+ flex-direction: column;
47
+ }
48
+
49
+ textarea {
50
+ width: 100%;
51
+ height: 140px;
52
+ padding: 10px;
53
+ font-size: 16px;
54
+ }
55
+
56
+ .buttons {
57
+ display: flex;
58
+ justify-content: space-between;
59
+ width: 100%;
60
+ margin-top: 10px;
61
+ }
62
+
63
+ .buttons button {
64
+ width: 49.5%;
65
+ padding: 12px;
66
+ font-size: 16px;
67
+ border: none;
68
+ border-radius: 4px;
69
+ cursor: pointer;
70
+ }
71
+
72
+ .submit-btn {
73
+ background: #4CAF50;
74
+ color: white;
75
+ }
76
+
77
+ .clear-btn {
78
+ background: #45a049;
79
+ color: white;
80
+ }
81
+
82
+ .share-btn {
83
+ width: 100%;
84
+ padding: 14px;
85
+ font-size: 16px;
86
+ background: #007BFF;
87
+ color: white;
88
+ border: none;
89
+ border-radius: 4px;
90
+ margin-top: auto;
91
+ }
92
+
93
+ .output {
94
+ background: white;
95
+ padding: 15px;
96
+ border-radius: 8px;
97
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
98
+ font-size: 16px;
99
+ min-height: 120px;
100
+ margin-bottom: 20px;
101
+ }
102
+
103
+ .dark-mode .output {
104
+ background: #1e1e1e;
105
+ color: #fff;
106
+ }
107
+
108
+ .mode-toggle {
109
+ margin-top: 60px;
110
+ font-size: 14px;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body>
115
+ <h1 id="page-title">Hate Speech Detection</h1>
116
+ <p class="subtext">
117
+ This tool uses 3 models (GloVe-based GRU, facebook/RoBERTa-dynabench-r4 (Transformer), ToxiGen-roberta (Transformer))
118
+ to classify hate speech using an ensemble method.
119
+ </p>
120
+
121
+ <div class="container">
122
+ <div class="left-panel">
123
+ <form id="hs-form">
124
+ <textarea id="text-input" placeholder="Enter text here..."></textarea>
125
+ <div class="buttons">
126
+ <button type="button" class="clear-btn" onclick="clearText()">Clear Text</button>
127
+ <button type="submit" class="submit-btn">Submit</button>
128
+ </div>
129
+ </form>
130
+ </div>
131
+
132
+ <div class="right-panel">
133
+ <div class="output" id="output" style="display: none;"></div>
134
+ <button class="share-btn" onclick="shareText()">Share via Link</button>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="mode-toggle">
139
+ <label><input type="checkbox" id="mode-toggle"> Dark Mode</label>
140
+ </div>
141
+
142
+ <script>
143
+ const outputDiv = document.getElementById("output");
144
+ const pageTitle = document.getElementById("page-title");
145
+
146
+ document.getElementById("hs-form").addEventListener("submit", async function (e) {
147
+ e.preventDefault();
148
+ const text = document.getElementById("text-input").value;
149
+
150
+ const response = await fetch("/predict", {
151
+ method: "POST",
152
+ headers: { "Content-Type": "application/json" },
153
+ body: JSON.stringify({ text: text }),
154
+ });
155
+
156
+ const result = await response.json();
157
+ outputDiv.style.display = "block";
158
+ outputDiv.innerHTML = `
159
+ <strong>Model 1:</strong> ${result.gru_prob}<br>
160
+ <strong>Model 2:</strong> ${result.roberta_prob}<br>
161
+ <strong>Model 3:</strong> ${result.toxigen_prob}<br>
162
+ <strong>Prediction:</strong> ${result.prediction}
163
+ `;
164
+ });
165
+
166
+ function clearText() {
167
+ document.getElementById("text-input").value = "";
168
+ outputDiv.style.display = "none";
169
+ outputDiv.innerHTML = "";
170
+ }
171
+
172
+ function shareText() {
173
+ const text = document.getElementById("text-input").value;
174
+ const shareUrl = `${window.location.href}?text=${encodeURIComponent(text)}`;
175
+ navigator.clipboard.writeText(shareUrl);
176
+ alert("Sharable link copied to clipboard!");
177
+ }
178
+
179
+ document.getElementById("mode-toggle").addEventListener("change", function () {
180
+ document.body.classList.toggle("dark-mode", this.checked);
181
+ pageTitle.style.color = this.checked ? "white" : "black";
182
+ });
183
+
184
+ // On load: apply shared text if present
185
+ window.onload = function () {
186
+ const urlParams = new URLSearchParams(window.location.search);
187
+ const sharedText = urlParams.get("text");
188
+ if (sharedText) {
189
+ document.getElementById("text-input").value = decodeURIComponent(sharedText);
190
+ }
191
+ };
192
+ </script>
193
+ </body>
194
+ </html>