Spaces:
Running
Running
Create _se.html
Browse files
_se.html
ADDED
@@ -0,0 +1,153 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
|
4 |
+
<head>
|
5 |
+
<meta charset="UTF-8">
|
6 |
+
<title>Sentiment Analysis - Hugging Face Transformers.js</title>
|
7 |
+
|
8 |
+
<script type="module">
|
9 |
+
// Import the library
|
10 |
+
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
|
11 |
+
|
12 |
+
// Make it available globally
|
13 |
+
window.pipeline = pipeline;
|
14 |
+
</script>
|
15 |
+
|
16 |
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
17 |
+
|
18 |
+
<link rel="stylesheet" href="css/styles.css">
|
19 |
+
</head>
|
20 |
+
|
21 |
+
<body>
|
22 |
+
<div class="container-main">
|
23 |
+
|
24 |
+
<!-- Back to Home button -->
|
25 |
+
<div class="row mt-5">
|
26 |
+
<div class="col-md-12 text-center">
|
27 |
+
<a href="index.html" class="btn btn-outline-secondary"
|
28 |
+
style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
|
29 |
+
</div>
|
30 |
+
</div>
|
31 |
+
|
32 |
+
<!-- Content -->
|
33 |
+
<div class="container mt-5">
|
34 |
+
<!-- Centered Titles -->
|
35 |
+
<div class="text-center">
|
36 |
+
<h2>Natural Language Processing</h2>
|
37 |
+
<h4>Sentiment Analysis (Text Classification)</h4>
|
38 |
+
</div>
|
39 |
+
|
40 |
+
<!-- Actual Content of this page -->
|
41 |
+
<div id="sentiment-analyzer-container" class="container mt-4">
|
42 |
+
<h5>Single Input:</h5>
|
43 |
+
<div class="d-flex align-items-center">
|
44 |
+
<label for="sentimentText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
|
45 |
+
Analyze:</label>
|
46 |
+
<input type="text" class="form-control flex-grow-1" id="sentimentText" value="I love transformers!"
|
47 |
+
placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
|
48 |
+
<button id="analyzeButton" class="btn btn-primary" onclick="analyzeSentiment()">Analyze</button>
|
49 |
+
</div>
|
50 |
+
<div class="mt-4">
|
51 |
+
<h4>Output:</h4>
|
52 |
+
<pre id="outputArea"></pre>
|
53 |
+
</div>
|
54 |
+
</div>
|
55 |
+
|
56 |
+
<hr> <!-- Line Separator -->
|
57 |
+
|
58 |
+
<div id="sentiment-analyzer-container2" class="container mt-4">
|
59 |
+
<h5>Multiple Inputs:</h5>
|
60 |
+
<div class="d-flex align-items-center mb-2">
|
61 |
+
<label for="sentimentText1" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
|
62 |
+
Analyze 1:</label>
|
63 |
+
<input type="text" class="form-control flex-grow-1" id="sentimentText1" value="I love transformers!"
|
64 |
+
placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
|
65 |
+
</div>
|
66 |
+
<div class="d-flex align-items-center">
|
67 |
+
<label for="sentimentText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
|
68 |
+
Analyze 2:</label>
|
69 |
+
<input type="text" class="form-control flex-grow-1" id="sentimentText2" value="I hate transformers!"
|
70 |
+
placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
|
71 |
+
<button id="analyzeButton" class="btn btn-primary ml-2"
|
72 |
+
onclick="analyzeSentimentMulti()">Analyze</button>
|
73 |
+
</div>
|
74 |
+
<div class="mt-4">
|
75 |
+
<h4>Output:</h4>
|
76 |
+
<pre id="outputArea2"></pre>
|
77 |
+
</div>
|
78 |
+
</div>
|
79 |
+
|
80 |
+
<hr> <!-- Line Separator -->
|
81 |
+
|
82 |
+
<!-- Toxic Comment Classification -->
|
83 |
+
<div id="toxic-container" class="container mt-4">
|
84 |
+
<h5>Toxic Comment Classification (Return All Classes):</h5>
|
85 |
+
<div class="d-flex align-items-center">
|
86 |
+
<label for="toxicText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Toxic
|
87 |
+
Text:</label>
|
88 |
+
<input type="text" class="form-control flex-grow-1" id="toxicText" value="I hate you!"
|
89 |
+
placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
|
90 |
+
<button id="toxicButton" class="btn btn-primary" onclick="toxicReview()">Review</button>
|
91 |
+
</div>
|
92 |
+
<div class="mt-4">
|
93 |
+
<h4>Output:</h4>
|
94 |
+
<pre id="toxicOutputArea"></pre>
|
95 |
+
</div>
|
96 |
+
</div>
|
97 |
+
|
98 |
+
<!-- Back to Home button -->
|
99 |
+
<div class="row mt-5">
|
100 |
+
<div class="col-md-12 text-center">
|
101 |
+
<a href="index.html" class="btn btn-outline-secondary"
|
102 |
+
style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
|
103 |
+
</div>
|
104 |
+
</div>
|
105 |
+
</div>
|
106 |
+
</div>
|
107 |
+
|
108 |
+
<script>
|
109 |
+
|
110 |
+
let sentimentAnalysis;
|
111 |
+
let reviewer;
|
112 |
+
let toxic_classifier;
|
113 |
+
|
114 |
+
// Initialize the sentiment analysis model
|
115 |
+
async function initializeModel() {
|
116 |
+
sentimentAnalysis = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english');
|
117 |
+
toxic_classifier = await pipeline('text-classification', 'Xenova/toxic-bert');
|
118 |
+
}
|
119 |
+
|
120 |
+
async function analyzeSentiment() {
|
121 |
+
const textFieldValue = document.getElementById("sentimentText").value.trim();
|
122 |
+
|
123 |
+
const result = await sentimentAnalysis(textFieldValue);
|
124 |
+
|
125 |
+
document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
|
126 |
+
}
|
127 |
+
|
128 |
+
async function analyzeSentimentMulti() {
|
129 |
+
const textFieldValue1 = document.getElementById("sentimentText1").value.trim();
|
130 |
+
const textFieldValue2 = document.getElementById("sentimentText2").value.trim();
|
131 |
+
|
132 |
+
const result = await sentimentAnalysis([textFieldValue1, textFieldValue2]);
|
133 |
+
|
134 |
+
document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
|
135 |
+
}
|
136 |
+
|
137 |
+
|
138 |
+
async function toxicReview() {
|
139 |
+
|
140 |
+
const textFieldValue = document.getElementById("toxicText").value.trim();
|
141 |
+
|
142 |
+
const result = await toxic_classifier(textFieldValue, { topk: null });
|
143 |
+
|
144 |
+
document.getElementById("toxicOutputArea").innerText = JSON.stringify(result, null, 2);
|
145 |
+
|
146 |
+
}
|
147 |
+
|
148 |
+
// Initialize the model after the DOM is completely loaded
|
149 |
+
window.addEventListener("DOMContentLoaded", initializeModel);
|
150 |
+
</script>
|
151 |
+
</body>
|
152 |
+
|
153 |
+
</html>
|