Update sentiments.html
Browse files- sentiments.html +11 -151
sentiments.html
CHANGED
@@ -1,155 +1,15 @@
|
|
1 |
-
<!DOCTYPE html>
|
2 |
-
<
|
3 |
-
|
4 |
-
<head>
|
5 |
-
<meta charset="UTF-8">
|
6 |
-
<title>Sentiment Analysis - Hugging Face Transformers.js</title>
|
7 |
-
|
8 |
-
<script type="module">
|
9 |
-
// To-Do: transfomers.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค pipeline ํจ์๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ import ๊ตฌ๋ฌธ์ ์์ฑํ์ญ์์ค.
|
10 |
-
// ํํธ: import {}
|
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 |
-
<
|
19 |
-
</
|
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 |
-
<!--
|
83 |
-
|
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 |
-
// pipeline ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์ฑ๋ถ์์ ์ฌ์ฉํ Xenova/distilbert-base-uncased-finetuned-sst-2-english ๋ชจ๋ธ ๊ฐ์ฒด๋ฅผ ์์ฑํ์ฌ sentimentAnalysis์ ์ ์ฅํ์ญ์์ค
|
117 |
-
// ํํธ: sentimentAnalysis = await pipeline
|
118 |
-
|
119 |
-
}
|
120 |
-
|
121 |
-
async function analyzeSentiment() {
|
122 |
-
const textFieldValue = document.getElementById("sentimentText").value.trim();
|
123 |
-
|
124 |
-
const result = await sentimentAnalysis(textFieldValue);
|
125 |
-
|
126 |
-
document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
|
127 |
-
}
|
128 |
-
|
129 |
-
async function analyzeSentimentMulti() {
|
130 |
-
const textFieldValue1 = document.getElementById("sentimentText1sentimentText").value.trim();
|
131 |
-
const textFieldValue2 = document.getElementById("sentimentText2").value.trim();
|
132 |
-
// ์์์ ์์ฑํ ๊ฐ์ฑ๋ถ์ ๋ชจ๋ธ ๊ฐ์ฒด์ sentimentText1๊ณผ sentimentText2๋ฅผ ์
๋ ฅํ์ฌ ๊ฐ์๋ถ์์ ์ํํ๊ณ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ result์ ์ ์ ํ์ญ์์ค.
|
133 |
-
// ํํธ : cont result =
|
134 |
-
|
135 |
-
|
136 |
-
document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
|
137 |
-
}
|
138 |
-
|
139 |
-
|
140 |
-
async function toxicReview() {
|
141 |
-
|
142 |
-
const textFieldValue = document.getElementById("toxicText").value.trim();
|
143 |
-
|
144 |
-
const result = await toxic_classifier(textFieldValue, { topk: null });
|
145 |
-
|
146 |
-
document.getElementById("toxicOutputArea").innerText = JSON.stringify(result, null, 2);
|
147 |
-
|
148 |
-
}
|
149 |
-
|
150 |
-
// Initialize the model after the DOM is completely loaded
|
151 |
-
window.addEventListener("DOMContentLoaded", initializeModel);
|
152 |
-
</script>
|
153 |
-
</body>
|
154 |
-
|
155 |
</html>
|
|
|
1 |
+
<!DOCTYPE html><html lang="en">
|
2 |
+
<head> <meta charset="UTF-8"> <title>Sentiment Analysis - Hugging Face Transformers.js</title>
|
3 |
+
<script type="module"> // Import the library import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4'; // Make it available globally window.pipeline = pipeline; </script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
4 |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
5 |
+
<link rel="stylesheet" href="css/styles.css"></head>
|
6 |
+
<body> <div class="container-main"> <!-- Back to Home button --> <div class="row mt-5"> <div class="col-md-12 text-center"> <a href="index.html" class="btn btn-outline-secondary" style="color: #3C650B; border-color: #3C650B;">Back to Main Page</a> </div> </div>
|
7 |
+
<!-- Content --> <div class="container mt-5"> <!-- Centered Titles --> <div class="text-center"> <h2>Natural Language Processing</h2> <h4>Sentiment Analysis (Text Classification)</h4> </div>
|
8 |
+
<!-- Actual Content of this page --> <div id="sentiment-analyzer-container" class="container mt-4"> <h5>Single Input:</h5> <div class="d-flex align-items-center"> <label for="sentimentText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to Analyze:</label> <input type="text" class="form-control flex-grow-1" id="sentimentText" value="I love transformers!" placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;"> <button id="analyzeButton" class="btn btn-primary" onclick="analyzeSentiment()">Analyze</button> </div> <div class="mt-4"> <h4>Output:</h4> <pre id="outputArea"></pre> </div> </div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
9 |
<hr> <!-- Line Separator -->
|
10 |
+
<div id="sentiment-analyzer-container2" class="container mt-4"> <h5>Multiple Inputs:</h5> <div class="d-flex align-items-center mb-2"> <label for="sentimentText1" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to Analyze 1:</label> <input type="text" class="form-control flex-grow-1" id="sentimentText1" value="I love transformers!" placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;"> </div> <div class="d-flex align-items-center"> <label for="sentimentText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to Analyze 2:</label> <input type="text" class="form-control flex-grow-1" id="sentimentText2" value="I hate transformers!" placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;"> <button id="analyzeButton" class="btn btn-primary ml-2" onclick="analyzeSentimentMulti()">Analyze</button> </div> <div class="mt-4"> <h4>Output:</h4> <pre id="outputArea2"></pre> </div> </div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
11 |
<hr> <!-- Line Separator -->
|
12 |
+
<!-- Toxic Comment Classification --> <div id="toxic-container" class="container mt-4"> <h5>Toxic Comment Classification (Return All Classes):</h5> <div class="d-flex align-items-center"> <label for="toxicText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Toxic Text:</label> <input type="text" class="form-control flex-grow-1" id="toxicText" value="I hate you!" placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;"> <button id="toxicButton" class="btn btn-primary" onclick="toxicReview()">Review</button> </div> <div class="mt-4"> <h4>Output:</h4> <pre id="toxicOutputArea"></pre> </div> </div>
|
13 |
+
<!-- Back to Home button --> <div class="row mt-5"> <div class="col-md-12 text-center"> <a href="index.html" class="btn btn-outline-secondary" style="color: #3C650B; border-color: #3C650B;">Back to Main Page</a> </div> </div> </div> </div>
|
14 |
+
<script> let sentimentAnalysis; let reviewer; let toxic_classifier; // Initialize the sentiment analysis model async function initializeModel() { sentimentAnalysis = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english'); toxic_classifier = await pipeline('text-classification', 'Xenova/toxic-bert'); } async function analyzeSentiment() { const textFieldValue = document.getElementById("sentimentText").value.trim(); const result = await sentimentAnalysis(textFieldValue); document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2); } async function analyzeSentimentMulti() { const textFieldValue1 = document.getElementById("sentimentText1").value.trim(); const textFieldValue2 = document.getElementById("sentimentText2").value.trim(); const result = await sentimentAnalysis([textFieldValue1, textFieldValue2]); document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2); } async function toxicReview() { const textFieldValue = document.getElementById("toxicText").value.trim(); const result = await toxic_classifier(textFieldValue, { topk: null }); document.getElementById("toxicOutputArea").innerText = JSON.stringify(result, null, 2); } // Initialize the model after the DOM is completely loaded window.addEventListener("DOMContentLoaded", initializeModel); </script></body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
15 |
</html>
|