|
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<title>Upload Reviews or Enter Text</title> |
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
<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: #333; |
|
} |
|
|
|
.progress-container { |
|
width: 100%; |
|
background-color: #f3f3f3; |
|
border-radius: 5px; |
|
margin-top: 10px; |
|
display: none; |
|
} |
|
|
|
.progress-bar { |
|
width: 0%; |
|
height: 20px; |
|
background-color: #4caf50; |
|
text-align: center; |
|
line-height: 20px; |
|
color: white; |
|
border-radius: 5px; |
|
} |
|
|
|
.loading { |
|
display: none; |
|
font-weight: bold; |
|
color: #007BFF; |
|
} |
|
|
|
.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); |
|
text-align: left; |
|
width: 80%; |
|
max-width: 600px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
|
|
.file-upload-specifications h3 { |
|
color: #000000; |
|
text-align: center; |
|
} |
|
|
|
.file-upload-specifications ul { |
|
text-align: left; |
|
list-style: disc; |
|
margin-left: 20px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>BERT-Based Sentiment Analyzer 1.0</h1> |
|
|
|
<h2>-Upload File-</h2> |
|
<form id="upload-form" enctype="multipart/form-data"> |
|
<input type="file" id="file" name="file" accept=".csv" required> |
|
<input type="submit" value="Upload and Analyze"> |
|
|
|
<div class="progress-container"> |
|
<div class="progress-bar" id="upload-progress-bar">0%</div> |
|
</div> |
|
|
|
<p class="loading">Processing... Please wait.</p> |
|
<div id="fileError" class="error-message"></div> |
|
</form> |
|
|
|
<h2>Or Enter Text for Sentiment Analysis</h2> |
|
<form id="text-form"> |
|
<textarea id="text" name="text" rows="4" cols="50"></textarea><br> |
|
<input type="submit" value="Predict Sentiment"> |
|
|
|
<div class="progress-container"> |
|
<div class="progress-bar" id="text-progress-bar">0%</div> |
|
</div> |
|
|
|
<p class="loading">Processing... Please wait.</p> |
|
<div id="textError" class="error-message"></div> |
|
</form> |
|
|
|
<h2>Sentiment:</h2> |
|
<p id="sentiment" class="hidden"></p> |
|
<p id="confidence" class="hidden"></p> |
|
|
|
<script> |
|
$(document).ready(function() { |
|
|
|
$("#text-form").submit(function(event) { |
|
event.preventDefault(); |
|
|
|
|
|
$("#sentiment").text("").hide(); |
|
$("#confidence").text("").hide(); |
|
$("#textError").text(""); |
|
|
|
|
|
$("#text-progress-bar").parent().show(); |
|
$("#text-progress-bar").css("width", "50%").text("Processing..."); |
|
$(".loading").show(); |
|
|
|
$.ajax({ |
|
url: "/analyze_text", |
|
type: "POST", |
|
data: { text: $("#text").val() }, |
|
success: function(response) { |
|
$("#text-progress-bar").css("width", "100%").text("Done!"); |
|
$(".loading").hide(); |
|
$("#sentiment").text("Sentiment: " + response.sentiment).attr("class", response.sentiment.toLowerCase()).show(); |
|
$("#confidence").text("Confidence: " + response.confidence + "%").show(); |
|
}, |
|
error: function(xhr) { |
|
$("#textError").text("Error: " + xhr.responseJSON.error); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
$("#upload-form").submit(function(event) { |
|
event.preventDefault(); |
|
let formData = new FormData(this); |
|
|
|
$("#upload-progress-bar").parent().show(); |
|
$("#upload-progress-bar").css("width", "50%").text("Uploading..."); |
|
$(".loading").show(); |
|
|
|
$.ajax({ |
|
url: "/uploader", |
|
type: "POST", |
|
data: formData, |
|
processData: false, |
|
contentType: false, |
|
success: function(response) { |
|
$("#upload-progress-bar").css("width", "100%").text("Done!"); |
|
$(".loading").hide(); |
|
document.open(); |
|
document.write(response); |
|
document.close(); |
|
}, |
|
error: function() { |
|
$("#fileError").text("Error: Could not upload file."); |
|
} |
|
}); |
|
}); |
|
}); |
|
</script> |
|
|
|
|
|
<div class="file-upload-specifications"> |
|
<a href="/download-sample"> |
|
<h3>📥 Download and use sample data </h3> |
|
</a> |
|
|
|
<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 Column:</strong> The file must contain a column named <code>'review'</code>.</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> 5MB</li> |
|
<li><strong>Encoding:</strong> UTF-8 encoding is recommended for compatibility.</li> |
|
<li><strong>Example:</strong> The first column should be named <code>'review'</code> 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> |
|
|
|
<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">February 10, 2025</time>.</small> |
|
</div> |
|
</body> |
|
</html> |
|
|
