Hugging Face's logo

Spaces:
oceankim
/
xformjs
Running

App Files Community
oceankim commited on
Commit
b4f37d3
·
verified ·
1 Parent(s): 9fdce57

Update sentiments.html

Browse files
Files changed (1) hide show
  1. sentiments.html +11 -151
sentiments.html CHANGED
@@ -1,155 +1,15 @@
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
- // 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/[email protected]/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
- // 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/[email protected]'; // Make it available globally window.pipeline = pipeline; </script>
 
 
 
 
 
 
 
 
 
 
 
 
4
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>