-
Notifications
You must be signed in to change notification settings - Fork 3
/
documentation.html
232 lines (224 loc) · 10.7 KB
/
documentation.html
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>I-SPY</title>
<link rel="icon" href="assests/botfavi.ico" />
<!-- BOOTSRAP CDN -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- FONT_AWESOME -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Arvo&family=Open+Sans:wght@700&display=swap"
rel="stylesheet"
/>
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- HEADER -->
<div class="navigation main">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<img class="iconic" src="assests/fficon.svg" alt="" />
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"
>Home</a
>
</li>
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="#invite-section"
>Invite Me</a
>
</li>
</ul>
</div>
<ul class="nav justify-content-end">
<li class="nav-item increase-count">
<a
class="nav-link active"
aria-current="page"
style="color: aliceblue"
href="#demo-video"
>Demo 📽️
</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- MID_SECTION -->
<!-- ANIMATION__AREA -->
<div class="animation-area">
<div class="container1 container">
<h1>DOCUMENTATION</h1>
<p class="text-doc">
Interested in knowing how
<strong style="color: greenyellow">I-SPY</strong> works? Sit tight!
<br />
You're in right place. Scroll down to get through it.
</p>
</div>
<div class="box-area">
<img class="move-icon" src="bg-icon1.svg" alt="" />
<img class="move-icon" src="bg-icon1.svg" alt="" />
<img class="move-icon" src="bg-icon1.svg" alt="" />
<img class="move-icon" src="bg-icon1.svg" alt="" />
<img class="move-icon" src="bg-icon1.svg" alt="" />
<img class="move-icon" src="bg-icon1.svg" alt="" />
<img class="move-icon" src="bg-icon1.svg" alt="" />
<img class="move-icon" src="bg-icon1.svg" alt="" />
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
</div>
</div>
<div class="documentation">
<div class="container container2">
<h1>ML Model</h1>
<p>
We used a publicly available
<a
href="https://www.kaggle.com/vkrahul/twitter-hate-speech?select=train_E6oV3lV.csv"
>Kaggle dataset</a
>
for developing an NLP hate speech detection model. The data set was
perfect for our use case since it was already clean and it had a clear
distinction concerning the choice of words between hate speech and
non-hate speech. <br />
The data cleaning for most parts only included removing symbols and
characters like ‘/’,’*’,’%’,’@’ etc. We also used the stopwords
library available in Python to remove all stop words like “to”, ”and”,
”is” etc. <br />
Since the ratio of tweets labeled as hate speech was very low, as
compared to its counterpart, we decided to undersample the data sample
to achieve better classification results. We also used the wordcloud
module in Python to get a better understanding of the type of dataset
we were dealing with. <br />
Later on, we applied Tf-Idf vectorization to convert text data into
vectorizable forms which could be easily understood by our model.
<br />
We wanted to keep our ML model very simple and hence we decided to go
with Logistic Regression since it is easy to implement and will also
help us avoid overfitting since our model has to face real-world data
input. <br />
We achieved an accuracy of about 85% on the test data.
</p>
<h1>Discord Bot</h1>
<p>
We used the javascript library, ‘discord.js’ provided by Discord to
program our bot. Functions like ‘client.on’ and ‘msg.author.bot’ were
executed through this library. Apart from this, we used the node-fetch
module to make API calls which enable our bot to pass data through our
backend and retrieve the respective outcome provided by the ML model.
Our bot checks the user’s text message for hate speech and flags it
according to the boolean value fetched in the previous section and
thereafter drops a warning message if it is found to be hate speech.
Apart from that it also checks for NSFW links and URLs and drops
warning messages accordingly.
</p>
<h1>Twitter Bot</h1>
<p>
We used Javascript Module Puppeteer for Automation of our Twitter Bot,
Where we will provide other users with a Hashtag [
<strong>#Ispy_Saveme</strong> ] that will be used to trigger our bot.
Our bot will keep a check on those Twitter Accounts. If someone else
posts a Tweet using this hashtag, our bot will check whether it's hate
speech and warn the offender. Currently we are maintaining an Array of
all the users using our hashtag internally and in future we will
maintain a database for the same. Since Twitter maintains stringent
measures to alot API’s to users, we were not able to get one. So we
used Puppeteer as an alternative for the same.
</p>
<h1 id="demo-video">Demo Video</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/fFoR-8KfIy8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
</div>
<!-- INVITE -->
<div class="invite-section main" id="invite-section">
<div class="invite-img">
<img class="invite" src="assests/invite.svg" alt="" />
</div>
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
<div class="invite-text">
<h3>Liked Our Bot?</h3>
<p>Show us your love and support ❤️ by upvoting!</p>
</div>
<div class="invite-button">
<button type="button" class="btn btn-outline-light btn-lg">
<a href="https://twitter.com/ISpyBot_1">Link To Twitter Bot</a>
</button>
<button type="button" class="btn btn-outline-light btn-lg">
<a
href="https://discord.com/api/oauth2/authorize?client_id=929325394342080563&permissions=8&scope=bot"
>Invite to Discord</a
>
</button>
</div>
</div>
<!-- FOOTER -->
<footer>
<p>
©2022 - Discord Bots <br />
Built with
<svg
fill="currentColor"
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<!---->
<path
d="M12,1.85C11.73,1.85 11.45,1.92 11.22,2.05L3.78,6.35C3.3,6.63 3,7.15 3,7.71V16.29C3,16.85 3.3,17.37 3.78,17.65L5.73,18.77C6.68,19.23 7,19.24 7.44,19.24C8.84,19.24 9.65,18.39 9.65,16.91V8.44C9.65,8.32 9.55,8.22 9.43,8.22H8.5C8.37,8.22 8.27,8.32 8.27,8.44V16.91C8.27,17.57 7.59,18.22 6.5,17.67L4.45,16.5C4.38,16.45 4.34,16.37 4.34,16.29V7.71C4.34,7.62 4.38,7.54 4.45,7.5L11.89,3.21C11.95,3.17 12.05,3.17 12.11,3.21L19.55,7.5C19.62,7.54 19.66,7.62 19.66,7.71V16.29C19.66,16.37 19.62,16.45 19.55,16.5L12.11,20.79C12.05,20.83 11.95,20.83 11.88,20.79L10,19.65C9.92,19.62 9.84,19.61 9.79,19.64C9.26,19.94 9.16,20 8.67,20.15C8.55,20.19 8.36,20.26 8.74,20.47L11.22,21.94C11.46,22.08 11.72,22.15 12,22.15C12.28,22.15 12.54,22.08 12.78,21.94L20.22,17.65C20.7,17.37 21,16.85 21,16.29V7.71C21,7.15 20.7,6.63 20.22,6.35L12.78,2.05C12.55,1.92 12.28,1.85 12,1.85M14,8C11.88,8 10.61,8.89 10.61,10.39C10.61,12 11.87,12.47 13.91,12.67C16.34,12.91 16.53,13.27 16.53,13.75C16.53,14.58 15.86,14.93 14.3,14.93C12.32,14.93 11.9,14.44 11.75,13.46C11.73,13.36 11.64,13.28 11.53,13.28H10.57C10.45,13.28 10.36,13.37 10.36,13.5C10.36,14.74 11.04,16.24 14.3,16.24C16.65,16.24 18,15.31 18,13.69C18,12.08 16.92,11.66 14.63,11.35C12.32,11.05 12.09,10.89 12.09,10.35C12.09,9.9 12.29,9.3 14,9.3C15.5,9.3 16.09,9.63 16.32,10.66C16.34,10.76 16.43,10.83 16.53,10.83H17.5C17.55,10.83 17.61,10.81 17.65,10.76C17.69,10.72 17.72,10.66 17.7,10.6C17.56,8.82 16.38,8 14,8Z"
></path>
</svg>
and 🤍.
<br />
Meet our team : <span>aakashgarg19#6805</span> ||
<span>Aisha#6043</span> || <span>Tia#7064</span> ||
<span>topguns837#3358</span>
</p>
</footer>
<!-- BOOTSTRAP_JS -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
</body>
</html>