Skip to content

Commit 78b9c46

Browse files
khushi-purwarkhushi-purwar
committed
added classifiers
1 parent 4da1292 commit 78b9c46

File tree

7 files changed

+423
-0
lines changed

7 files changed

+423
-0
lines changed

‎Classifier-Using-JS/Classifiers/classifier.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Montserrat', sans-serif;
7+
background-color: #0b032d;
8+
}
9+
10+
body {
11+
width: 100%;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
flex-direction: column;
16+
}
17+
18+
h1{
19+
margin: 30px;
20+
color: #f23557;
21+
22+
}
23+
24+
.inputbox {
25+
display: flex;
26+
width: 80%;
27+
flex-direction: column;
28+
}
29+
30+
.input {
31+
padding: 0.8rem;
32+
font-size: 1.1rem;
33+
border: 1px solid white;
34+
outline: none;
35+
border-radius: 0;
36+
color: white;
37+
}
38+
39+
.input:focus, .input:active {
40+
outline: none;
41+
}
42+
43+
.btn {
44+
margin-top: 1rem;
45+
border: none;
46+
outline: none;
47+
width: 10rem;
48+
padding: 0.8rem 0;
49+
font-size: 1rem;
50+
background-color: #f23557;
51+
color: #fff;
52+
cursor: pointer;
53+
border-radius: 0;
54+
}
55+
56+
p span{
57+
color: yellow;
58+
font-size: 20px;
59+
}
60+
61+
p{
62+
color: white;
63+
font-size: 20px;
64+
width: 80%;
65+
margin-bottom: 30px;
66+
line-height: 2rem;
67+
}
68+
69+
70+
71+
.textcontainer h3 {
72+
text-align: center;
73+
font-size: 20px;
74+
color: #FFF;
75+
font-family: 'Times New Roman', Times, serif;
76+
margin: 20px auto;
77+
}
78+
79+
.textcontainer h3 span {
80+
color: #f23557;
81+
}
82+
83+
.textarea{
84+
color: white;
85+
padding: 10px;
86+
}
87+
88+
89+
/* news analyzer styles */
90+
91+
.newscontainer h3 {
92+
text-align: center;
93+
font-size: 20px;
94+
color: #FFF;
95+
font-family: 'Times New Roman', Times, serif;
96+
margin: 20px auto;
97+
}
98+
99+
.newscontainer h3 span {
100+
color: #f23557;
101+
}
102+
103+
104+
/* language analyzer styles */
105+
.input2 {
106+
padding: 0.8rem;
107+
font-size: 1.1rem;
108+
border: 1px solid white;
109+
outline: none;
110+
border-radius: 0;
111+
color: white;
112+
}
113+
114+
.input2:focus, .input2:active {
115+
outline: none;
116+
/* border: none; */
117+
}
118+
119+
.langcontainer h3 {
120+
/* width: 90%; */
121+
text-align: center;
122+
font-size: 20px;
123+
color: #FFF;
124+
font-family: 'Times New Roman', Times, serif;
125+
margin: 20px auto;
126+
}
127+
128+
.langcontainer h3 span {
129+
color: #f23557;
130+
}
131+

‎Classifier-Using-JS/Classifiers/languageAnalysis.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<link rel="stylesheet" href="./classifier.css">
9+
<title>Language Analysis</title>
10+
</head>
11+
<body>
12+
13+
<h1>Language Classifier</h1>
14+
15+
<p><span>About the Classifier: </span>Detect language in text. I will detect langauge from 49 different languages arranged in language families.</p>
16+
<p>It detects the language from almost 49 categories, for example: <span>"English"</span>, &nbsp; <span>"Chinese"</span>, &nbsp; <span>"Hindi"</span>, &nbsp; <span>"French"</span> , and many more!</p>
17+
<div class="inputbox">
18+
<input type="text" class="input2" placeholder="Enter sentence in any language...">
19+
<button type="submit" class="btn">Analyze</button>
20+
</div>
21+
22+
<div class="langcontainer">
23+
24+
</div>
25+
26+
27+
28+
<script src="./script.js"></script>
29+
30+
</body>
31+
</html>

‎Classifier-Using-JS/Classifiers/newsAnalysis.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<link rel="stylesheet" href="./classifier.css">
9+
<title>News Analysis</title>
10+
</head>
11+
<body>
12+
13+
<h1>News Analysis</h1>
14+
15+
<p><span>About the Classifier: </span>Classify News articles by the topic such as Politics, Sports and many more.</p>
16+
<p>It classifies the news into six categories: <span>"SPORTS"</span>, &nbsp; <span>"BUSINESS"</span>, &nbsp;<span>"WORLD"</span>, &nbsp; <span>"SCIENCE & TECHNOLOGY"</span>, &nbsp; <span>"ARTS & CULTURE"</span>&nbsp; and <span>"HEALTH & LIVING"</span></p>
17+
18+
<div class="inputbox">
19+
20+
<textarea name="" id="" cols="30" rows="8" class="textarea" placeholder="">Enter Your News Here...</textarea>
21+
<button type="submit" class="btn">Analyze</button>
22+
</div>
23+
24+
<div class="newscontainer">
25+
26+
</div>
27+
28+
29+
30+
<script src="script.js"></script>
31+
32+
</body>
33+
</html>

‎Classifier-Using-JS/Classifiers/script.js

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// text analysis-------------------------------------
2+
const inputBox = document.querySelector(".input");
3+
const btn1 = document.querySelector(".btn");
4+
const textcontainer = document.querySelector(".textcontainer");
5+
const URL1 = "https://api.monkeylearn.com/v3/classifiers/cl_pi3C7JiL/classify/";
6+
7+
btn1.addEventListener("click", async() => {
8+
9+
textcontainer.innerHTML = "";
10+
const value = inputBox.value;
11+
const data = {"data": [value]}
12+
13+
try {
14+
const res = await fetch(URL1, {
15+
method: "POST",
16+
mode: "cors",
17+
headers: {
18+
"Authorization": "Token 33c90d17d7c0daf299e0bdec6b5fa02db4443da4",
19+
"Content-Type": "application/json",
20+
},
21+
body: JSON.stringify(data)
22+
});
23+
24+
const resJson = await res.json();
25+
// console.log(resJson[0]);
26+
const finalResult = resJson[0];
27+
textcontainer.innerHTML = `<h3> ${value} is :<span> ${finalResult.classifications[0].tag_name} </span> </h3>`;
28+
29+
inputBox.value = "";
30+
31+
}
32+
catch(err) {
33+
console.log(err);
34+
}
35+
36+
})
37+
38+
// news analysis-------------------------------
39+
40+
const textBox = document.querySelector(".textarea");
41+
const btn2 = document.querySelector(".btn");
42+
const newscontainer = document.querySelector(".newscontainer");
43+
const URL2 = "https://api.monkeylearn.com/v3/classifiers/cl_WDyr2Q4F/classify/";
44+
45+
btn2.addEventListener("click", async() => {
46+
47+
newscontainer.innerHTML = "";
48+
const value = textBox.value;
49+
const data = {"data": [value]}
50+
51+
try {
52+
const res = await fetch(URL2, {
53+
method: "POST",
54+
mode: "cors",
55+
headers: {
56+
"Authorization": "Token 33c90d17d7c0daf299e0bdec6b5fa02db4443da4",
57+
"Content-Type": "application/json",
58+
},
59+
body: JSON.stringify(data)
60+
});
61+
62+
const resJson = await res.json();
63+
console.log(resJson[0]);
64+
const finalResult = resJson[0];
65+
newscontainer.innerHTML = `<h3> ${value} belongs to :<span> ${finalResult.classifications[0].tag_name} </span>category </h3>`;
66+
67+
textBox.value = "";
68+
69+
}
70+
catch(err) {
71+
console.log(err);
72+
}
73+
74+
})
75+
76+
// language classifier--------------------------------------------
77+
78+
const inputBox1 = document.querySelector(".input2");
79+
const btn3 = document.querySelector(".btn");
80+
const langcontainer = document.querySelector(".langcontainer");
81+
const URL3 = "https://api.monkeylearn.com/v3/classifiers/cl_Vay9jh28/classify/";
82+
83+
btn3.addEventListener("click", async() => {
84+
85+
langcontainer.innerHTML = "";
86+
const value = inputBox1.value;
87+
const data = {"data": [value]}
88+
89+
try {
90+
const res = await fetch(URL3, {
91+
method: "POST",
92+
mode: "cors",
93+
headers: {
94+
"Authorization": "Token 33c90d17d7c0daf299e0bdec6b5fa02db4443da4",
95+
"Content-Type": "application/json",
96+
},
97+
body: JSON.stringify(data)
98+
});
99+
100+
const resJson = await res.json();
101+
console.log(resJson[0]);
102+
const finalResult = resJson[0];
103+
langcontainer.innerHTML = `<h3> ${value} belongs to :<span> ${finalResult.classifications[0].tag_name} </span>language </h3>`;
104+
105+
inputBox1.value = "";
106+
107+
}
108+
catch(err) {
109+
console.log(err);
110+
}
111+
112+
})

‎Classifier-Using-JS/Classifiers/textAnalysis.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<link rel="stylesheet" href="./classifier.css">
9+
<title>Sentiment Analysis</title>
10+
</head>
11+
<body>
12+
13+
<h1>Text Sentiment Analysis</h1>
14+
15+
<p><span>About the Classifier: </span>Detect Sentiments in the text. This is a generic sentiment analysis classifier for texts in English. It works great in any kind of texts.</p>
16+
<p>It classifies the text into three categories: <span>"POSITIVE"</span>, <span>"NEGATIVE"</span> and <span>"NEUTRAL"</span></p>
17+
<div class="inputbox">
18+
<input type="text" class="input" placeholder="Enter sentence here.">
19+
<button type="submit" class="btn">Analyze</button>
20+
</div>
21+
22+
<div class="textcontainer">
23+
24+
</div>
25+
26+
27+
28+
<script src="./script.js"></script>
29+
30+
</body>
31+
</html>

‎Classifier-Using-JS/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Classifiers</title>
9+
</head>
10+
<body>
11+
12+
<h1 class="header">Classifiers</h1>
13+
<div class="cont">
14+
15+
<div class="classifier">
16+
Text Analyzer
17+
18+
<button><a href="./Classifiers/textAnalysis.html">Check Here</a></button>
19+
</div>
20+
<div class="classifier">News Analyzer
21+
<button><a href="./Classifiers/newsAnalysis.html">Check Here</a></button>
22+
</div>
23+
<div class="classifier">Language Analyzer
24+
<button><a href="./Classifiers/languageAnalysis.html">Check Here</a></button>
25+
</div>
26+
27+
</div>
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)