Skip to content

Commit 6fb82f3

Browse files
harshita2216harshita2216
authored
Merge pull request #308 from khushi-purwar/dev-khushiP
Added Classifiers using JS
2 parents e905fa4 + 75c2a9d commit 6fb82f3

File tree

10 files changed

+464
-0
lines changed

10 files changed

+464
-0
lines changed

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
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+
.inputbox {
24+
display: flex;
25+
width: 80%;
26+
flex-direction: column;
27+
}
28+
29+
.input {
30+
padding: 0.8rem;
31+
font-size: 1.1rem;
32+
border: 1px solid white;
33+
outline: none;
34+
border-radius: 0;
35+
color: white;
36+
}
37+
38+
.input:focus,
39+
.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+
.textcontainer h3 {
70+
text-align: center;
71+
font-size: 20px;
72+
color: #fff;
73+
font-family: "Times New Roman", Times, serif;
74+
margin: 20px auto;
75+
}
76+
77+
.textcontainer h3 span {
78+
color: #f23557;
79+
}
80+
81+
.textarea {
82+
color: white;
83+
padding: 10px;
84+
}
85+
86+
/* news analyzer styles */
87+
88+
.newscontainer h3 {
89+
text-align: center;
90+
font-size: 20px;
91+
color: #fff;
92+
font-family: "Times New Roman", Times, serif;
93+
margin: 20px auto;
94+
}
95+
96+
.newscontainer h3 span {
97+
color: #f23557;
98+
}
99+
100+
/* language analyzer styles */
101+
.input2 {
102+
padding: 0.8rem;
103+
font-size: 1.1rem;
104+
border: 1px solid white;
105+
outline: none;
106+
border-radius: 0;
107+
color: white;
108+
}
109+
110+
.input2:focus,
111+
.input2:active {
112+
outline: none;
113+
/* border: none; */
114+
}
115+
116+
.langcontainer h3 {
117+
/* width: 90%; */
118+
text-align: center;
119+
font-size: 20px;
120+
color: #fff;
121+
font-family: "Times New Roman", Times, serif;
122+
margin: 20px auto;
123+
}
124+
125+
.langcontainer h3 span {
126+
color: #f23557;
127+
}
128+

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

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

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

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

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

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

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="./classifier.css">
9+
<title>Sentiment Analysis</title>
10+
</head>
11+
12+
<body>
13+
<h1>Text Sentiment Analysis</h1>
14+
<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>
15+
<p>It classifies the text into three categories: <span>"POSITIVE"</span>, <span>"NEGATIVE"</span> and <span>"NEUTRAL"</span></p>
16+
<div class="inputbox">
17+
<input type="text" class="input" placeholder="Enter sentence here.">
18+
<button type="submit" class="btn">Analyze</button>
19+
</div>
20+
<div class="textcontainer"> </div>
21+
<script src="./script.js"></script>
22+
</body>
23+
24+
</html>
25+

‎Classifier-Using-JS/README.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Classifiers using JS
2+
3+
## About The Project
4+
Building three different classifiers with the help of API.
5+
6+
1. Text Analyzer
7+
8+
Detect Sentiments in the text. This is a generic sentiment analysis classifier for texts in English. It will classify into 3 different categories: Positive, Negative & Neutral.
9+
10+
2. News Analyzer
11+
12+
Classify News articles by the topic such as Politics, Sports and many more.
13+
14+
3. Language Analyzer
15+
16+
Detect language in text. I will detect langauge from 49 different languages arranged in language families.
17+
18+
## Tech Stacks Used
19+
20+
21+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
22+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
23+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
24+
25+
## API Used
26+
27+
Visit Website: https://app.monkeylearn.com/
28+
29+
`For Text Analyzer` : https://api.monkeylearn.com/v3/classifiers/cl_pi3C7JiL/classify/
30+
31+
`For News Analyzer` : https://api.monkeylearn.com/v3/classifiers/cl_WDyr2Q4F/classify/
32+
33+
`For Language Analyzer` : https://api.monkeylearn.com/v3/classifiers/cl_Vay9jh28/classify/
34+
35+
36+
## How to use Project
37+
38+
39+
- Download or clone the repository
40+
41+
```
42+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
43+
```
44+
45+
- Go to the directory
46+
- Run the index.html file
47+
- Navigate to different classifers
48+
49+
## Screenshots
50+
51+
![image](https://user-images.githubusercontent.com/52875298/127028100-5dbf0b20-19ee-4a1f-9c8c-038c10d9e805.png)
52+
53+
After clicking on Text Analyzer button, the UI looks like:
54+
55+
![image](https://user-images.githubusercontent.com/52875298/127028238-59450963-7afa-4765-b90f-7aca79831bca.png)
56+
57+
After clicking on News Analyzer button, the UI looks like:
58+
59+
![image](https://user-images.githubusercontent.com/52875298/127028901-52e8a8ac-9e24-48d8-b1ae-1b57980c7bf4.png)
60+
61+
After clicking on Language Analyzer button, the UI looks like:
62+
63+
![image](https://user-images.githubusercontent.com/52875298/127029532-f7ba842d-f646-4c06-b3bf-da156c812f5b.png)
64+
65+
## Live Demo
66+
67+
<img src="./demo.gif" />

‎Classifier-Using-JS/demo.gif

997 KB
Loading

0 commit comments

Comments
 (0)