|
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<title>Upload Reviews or Enter Text</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
text-align: center; |
|
margin: 0; |
|
padding: 0; |
|
background-color: #f4f4f4; |
|
color: #333; |
|
} |
|
|
|
h1, h2 { |
|
color: #000000; |
|
} |
|
|
|
form { |
|
margin: 20px auto; |
|
width: 80%; |
|
max-width: 500px; |
|
background: #fff; |
|
padding: 20px; |
|
border: 1px solid #ddd; |
|
border-radius: 8px; |
|
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
input[type="file"], textarea { |
|
width: 100%; |
|
margin-bottom: 10px; |
|
} |
|
|
|
input[type="submit"] { |
|
background: #000000; |
|
color: #fff; |
|
border: none; |
|
padding: 10px 20px; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
font-size: 16px; |
|
} |
|
|
|
input[type="submit"]:hover { |
|
background: #000000; |
|
} |
|
|
|
p, div { |
|
margin: 20px; |
|
} |
|
|
|
.footer { |
|
font-size: 14px; |
|
color: #666; |
|
margin-top: 40px; |
|
} |
|
|
|
.error-message { |
|
color: red; |
|
margin-top: 10px; |
|
} |
|
|
|
.positive { |
|
color: green; |
|
} |
|
.negative { |
|
color: blue; |
|
} |
|
|
|
.file-upload-specifications { |
|
background-color: #f8f8f8; |
|
border: 1px solid #ddd; |
|
border-radius: 8px; |
|
padding: 15px; |
|
margin-top: 20px; |
|
margin-bottom: 20px; |
|
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.file-upload-specifications h3 { |
|
color: #000000; |
|
} |
|
.file-upload-specifications p { |
|
text-align: justify; |
|
} |
|
.file-upload-specifications ul { |
|
text-align: justify; |
|
} |
|
|
|
</style> |
|
<script> |
|
function validateFileInput() { |
|
var fileInput = document.forms["fileUploadForm"]["file"].value; |
|
var errorDiv = document.getElementById("fileError"); |
|
if (fileInput === "") { |
|
errorDiv.innerHTML = "Please select a file to upload."; |
|
return false; |
|
} |
|
errorDiv.innerHTML = ""; |
|
return true; |
|
} |
|
|
|
function validateTextInput() { |
|
var textInput = document.forms["textInputForm"]["text"].value.trim(); |
|
var errorDiv = document.getElementById("textError"); |
|
if (textInput === "") { |
|
errorDiv.innerHTML = "Please enter some text for sentiment analysis."; |
|
return false; |
|
} |
|
errorDiv.innerHTML = ""; |
|
return true; |
|
} |
|
</script> |
|
</head> |
|
<body> |
|
<h1>UoB BERT-Based Sentiment Analyzer 1.0</h1> |
|
|
|
<h2>-Upload File-</h2> |
|
<form name="fileUploadForm" action="/uploader" method="post" enctype="multipart/form-data" onsubmit="return validateFileInput()"> |
|
<input type="file" name="file"> |
|
<input type="submit" value="Upload and Analyze"> |
|
<div id="fileError" class="error-message"></div> |
|
</form> |
|
|
|
<h2>Or Enter Text for Sentiment Analysis</h2> |
|
<form name="textInputForm" action="/analyze_text" method="post" onsubmit="return validateTextInput()"> |
|
<textarea name="text" rows="4" cols="50"></textarea><br> |
|
<input type="submit" value="Predict Sentiment"> |
|
<div id="textError" class="error-message"></div> |
|
</form> |
|
|
|
<h2>Sentiment:</h2> |
|
<p id="sentiment" class="{{ sentiment|lower }}">{{ sentiment }}</p> |
|
|
|
<script> |
|
window.onload = function() { |
|
var sentimentElement = document.getElementById('sentiment'); |
|
if (sentimentElement) { |
|
var sentiment = sentimentElement.textContent.trim().toLowerCase(); |
|
if (sentiment === 'positive') { |
|
sentimentElement.className = 'positive'; |
|
} else if (sentiment === 'negative') { |
|
sentimentElement.className = 'negative'; |
|
} |
|
} |
|
}; |
|
</script> |
|
<div class="file-upload-specifications"> |
|
<h3>File Upload Specifications:</h3> |
|
<p>Please ensure your file adheres to the following specifications for successful analysis:</p> |
|
<ul> |
|
<li><strong>File Format:</strong> CSV (Comma-Separated Values)</li> |
|
<li><strong>Required Columns:</strong> The file must contain at least one column named 'review'.</li> |
|
<li><strong>'review' Column:</strong> This column should contain the text of the reviews or sentiments to be analyzed.</li> |
|
<li><strong>Maximum File Size:</strong> [Specify the maximum file size, e.g., 5MB]</li> |
|
<li><strong>Encoding:</strong> UTF-8 encoding is recommended for compatibility.</li> |
|
<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> |
|
</ul> |
|
<p>If your file does not meet these specifications, the analysis may not be performed correctly.</p> |
|
</div> |
|
<a href="/">Back to Home</a> |
|
|
|
<div class="footer"> |
|
Project by Philip Obiorah & Supervised by: Prof. Hongbo Du<br> |
|
Submitted to the University of Buckingham, in partial fulfilment of the requirements for the degree of Master of Science in Applied Data Science.<br> |
|
© 2023 University of Buckingham. All rights reserved.<br> |
|
<small>Last updated: <time datetime="2023-12-15">December 15, 2023</time>.</small> |
|
</div> |
|
</body> |
|
</html> |
|
</html> |
|
|