Spaces:

philipobiorah
/

bert-sentiment-analysis

Running

App Files Files Community

philipobiorah commited on Feb 11

Commit

722f297

verified ·

1 Parent(s): c551a44

fix direct download link for sample data

Browse files

Files changed (1) hide show

templates/upload.html +157 -99

templates/upload.html CHANGED Viewed

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <title>Upload Reviews or Enter Text</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -43,17 +44,31 @@
         }
         input[type="submit"]:hover {
-            background: #000000;
         }
-        p, div {
-            margin: 20px;
         }
-        .footer {
-            font-size: 14px;
-            color: #666;
-            margin-top: 40px;
         }
         .error-message {
@@ -64,115 +79,158 @@
         .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 = "";  // Clear error message
-              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 = "";  // Clear error message
-              return true;
-          }
-      </script>
-  </head>
-  <body>
-      <h1>UoB BERT-Based Sentiment Analyzer 1.0</h1>
-      <h2>-Upload File-</h2>
-      <!-- <form action="/uploader" method="POST" enctype="multipart/form-data">
-         <input type="file" name="file" accept=".csv" required>
-         <button type="submit">Upload & Analyze</button>
-      </form> -->
-      <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">
-        <a href="https://huggingface.co/spaces/philipobiorah/bert-sentiment-analysis/resolve/main/Student_Feedback_Dataset__20_Rows_.csv"><h3>Download Sample Dataset:</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 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">February 10, 2025</time>.</small>
     </div>
-  </body>
-  </html>
 </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;
         }
         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 {
         .positive {
             color: green;
         }
         .negative {
             color: blue;
         }
+        /* File Upload Specification Styles */
         .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>UoB 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="{{ sentiment|lower }}">{{ sentiment }}</p>
+    <!-- File Upload Specifications -->
+    <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 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>
+        <a href="/download-sample">
+            <h3>📥 Download Sample Dataset</h3>
+        </a>
     </div>
+    <script>
+        $(document).ready(function() {
+            // Handle Text Analysis
+            $("#text-form").submit(function(event) {
+                event.preventDefault();
+                $("#text-progress-bar").parent().show();
+                $("#text-progress-bar").css("width", "50%").text("Processing...");
+                $(".loading").show();
+                $.post("/analyze_text", { text: $("#text").val() }, function(response) {
+                    $("#text-progress-bar").css("width", "100%").text("Done!");
+                    $(".loading").hide();
+                    $("#sentiment").text(response.sentiment).attr("class", response.sentiment.toLowerCase());
+                }).fail(function() {
+                    $("#textError").text("Error: Could not analyze text.");
+                });
+            });
+            // Handle File Upload
+            $("#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.");
+                    }
+                });
+            });
+        });
+        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="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>