Hugging Face's logo

Spaces:
philipobiorah
/
bert-sentiment-analysis
Running

App Files Community
philipobiorah commited on
Commit
dd1d4f3
·
verified ·
1 Parent(s): 237c9fa

Create template/upload.html

Browse files
Files changed (1) hide show
  1. templates/upload.html +172 -0
templates/upload.html ADDED
@@ -0,0 +1,172 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Upload Reviews or Enter Text</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ text-align: center;
9
+ margin: 0;
10
+ padding: 0;
11
+ background-color: #f4f4f4;
12
+ color: #333;
13
+ }
14
+
15
+ h1, h2 {
16
+ color: #000000;
17
+ }
18
+
19
+ form {
20
+ margin: 20px auto;
21
+ width: 80%;
22
+ max-width: 500px;
23
+ background: #fff;
24
+ padding: 20px;
25
+ border: 1px solid #ddd;
26
+ border-radius: 8px;
27
+ box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ input[type="file"], textarea {
31
+ width: 100%;
32
+ margin-bottom: 10px;
33
+ }
34
+
35
+ input[type="submit"] {
36
+ background: #000000;
37
+ color: #fff;
38
+ border: none;
39
+ padding: 10px 20px;
40
+ border-radius: 5px;
41
+ cursor: pointer;
42
+ font-size: 16px;
43
+ }
44
+
45
+ input[type="submit"]:hover {
46
+ background: #000000;
47
+ }
48
+
49
+ p, div {
50
+ margin: 20px;
51
+ }
52
+
53
+ .footer {
54
+ font-size: 14px;
55
+ color: #666;
56
+ margin-top: 40px;
57
+ }
58
+
59
+ .error-message {
60
+ color: red;
61
+ margin-top: 10px;
62
+ }
63
+
64
+ .positive {
65
+ color: green;
66
+ }
67
+ .negative {
68
+ color: blue;
69
+ }
70
+
71
+ .file-upload-specifications {
72
+ background-color: #f8f8f8;
73
+ border: 1px solid #ddd;
74
+ border-radius: 8px;
75
+ padding: 15px;
76
+ margin-top: 20px;
77
+ margin-bottom: 20px;
78
+ box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
79
+ }
80
+
81
+ .file-upload-specifications h3 {
82
+ color: #000000;
83
+ }
84
+ .file-upload-specifications p {
85
+ text-align: justify;
86
+ }
87
+ .file-upload-specifications ul {
88
+ text-align: justify;
89
+ }
90
+
91
+ </style>
92
+ <script>
93
+ function validateFileInput() {
94
+ var fileInput = document.forms["fileUploadForm"]["file"].value;
95
+ var errorDiv = document.getElementById("fileError");
96
+ if (fileInput === "") {
97
+ errorDiv.innerHTML = "Please select a file to upload.";
98
+ return false;
99
+ }
100
+ errorDiv.innerHTML = ""; // Clear error message
101
+ return true;
102
+ }
103
+
104
+ function validateTextInput() {
105
+ var textInput = document.forms["textInputForm"]["text"].value.trim();
106
+ var errorDiv = document.getElementById("textError");
107
+ if (textInput === "") {
108
+ errorDiv.innerHTML = "Please enter some text for sentiment analysis.";
109
+ return false;
110
+ }
111
+ errorDiv.innerHTML = ""; // Clear error message
112
+ return true;
113
+ }
114
+ </script>
115
+ </head>
116
+ <body>
117
+ <h1>UoB BERT-Based Sentiment Analyzer 1.0</h1>
118
+
119
+ <h2>-Upload File-</h2>
120
+ <form name="fileUploadForm" action="/uploader" method="post" enctype="multipart/form-data" onsubmit="return validateFileInput()">
121
+ <input type="file" name="file">
122
+ <input type="submit" value="Upload and Analyze">
123
+ <div id="fileError" class="error-message"></div>
124
+ </form>
125
+
126
+ <h2>Or Enter Text for Sentiment Analysis</h2>
127
+ <form name="textInputForm" action="/analyze_text" method="post" onsubmit="return validateTextInput()">
128
+ <textarea name="text" rows="4" cols="50"></textarea><br>
129
+ <input type="submit" value="Predict Sentiment">
130
+ <div id="textError" class="error-message"></div>
131
+ </form>
132
+
133
+ <h2>Sentiment:</h2>
134
+ <p id="sentiment" class="{{ sentiment|lower }}">{{ sentiment }}</p>
135
+
136
+ <script>
137
+ window.onload = function() {
138
+ var sentimentElement = document.getElementById('sentiment');
139
+ if (sentimentElement) {
140
+ var sentiment = sentimentElement.textContent.trim().toLowerCase();
141
+ if (sentiment === 'positive') {
142
+ sentimentElement.className = 'positive';
143
+ } else if (sentiment === 'negative') {
144
+ sentimentElement.className = 'negative';
145
+ }
146
+ }
147
+ };
148
+ </script>
149
+ <div class="file-upload-specifications">
150
+ <h3>File Upload Specifications:</h3>
151
+ <p>Please ensure your file adheres to the following specifications for successful analysis:</p>
152
+ <ul>
153
+ <li><strong>File Format:</strong> CSV (Comma-Separated Values)</li>
154
+ <li><strong>Required Columns:</strong> The file must contain at least one column named 'review'.</li>
155
+ <li><strong>'review' Column:</strong> This column should contain the text of the reviews or sentiments to be analyzed.</li>
156
+ <li><strong>Maximum File Size:</strong> [Specify the maximum file size, e.g., 5MB]</li>
157
+ <li><strong>Encoding:</strong> UTF-8 encoding is recommended for compatibility.</li>
158
+ <li><strong>Example:</strong> The first column should be named 'review' and contain the review text. Additional columns are optional and will be ignored.</li>
159
+ </ul>
160
+ <p>If your file does not meet these specifications, the analysis may not be performed correctly.</p>
161
+ </div>
162
+ <a href="/">Back to Home</a>
163
+
164
+ <div class="footer">
165
+ Project by Philip Obiorah & Supervised by: Prof. Hongbo Du<br>
166
+ Submitted to the University of Buckingham, in partial fulfilment of the requirements for the degree of Master of Science in Applied Data Science.<br>
167
+ © 2023 University of Buckingham. All rights reserved.<br>
168
+ <small>Last updated: <time datetime="2023-12-15">December 15, 2023</time>.</small>
169
+ </div>
170
+ </body>
171
+ </html>
172
+ </html>