ui update

templates/index.html

@@ -4,32 +4,32 @@
     <title>BERT Predictions</title>
     <style>
         body {
-            background-color: #f0f0f0; /* Light grey background */
+            background-color: #f0f0f0;
             font-family: Arial, sans-serif;
-            margin: 0; /* Remove default margin */
+            margin: 0;
             display: flex;
             flex-direction: column;
-            min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
-            position: relative; /* Ensure relative positioning for absolute elements */
+            min-height: 100vh;
+            position: relative;
         }
         h2 {
             color: #333;
         }
         .content-wrapper {
-            flex: 1; /* Allow content to expand within the flex container */
+            flex: 1;
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: center; /* Center content vertically and horizontally */
+            justify-content: center;
         }
         .input-container {
             max-width: 600px;
-            width: 100%; /* Take up full width within the flex container */
+            width: 100%;
             background-color: #fff;
             padding: 20px;
             border-radius: 8px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            text-align: left; /* Adjust text alignment as needed */
+            text-align: left;
         }
         textarea {
             width: 100%;
@@ -40,27 +40,27 @@
         input[type="submit"] {
             padding: 10px 20px;
             font-size: 16px;
-            background-color: #4CAF50; /* Green submit button */
+            background-color: #4CAF50;
             color: white;
             border: none;
             cursor: pointer;
-            display: block; /* Ensure block display for centering */
-            margin: 0 auto; /* Center align button */
-            transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+            display: block;
+            margin: 0 auto;
+            transition: background-color 0.3s ease;
         }
         input[type="submit"]:hover {
-            background-color: #d62728; /* Red on hover */
+            background-color: #d62728;
         }
         .predictions {
-            text-align: center; /* Center align predictions */
+            text-align: center;
             margin-top: 20px;
         }
         .prediction-item {
             margin-bottom: 10px;
             padding-left: 20px;
             font-size: 18px;
-            display: inline-block; /* Ensure items stay inline */
-            text-align: left; /* Align text left within each item */
+            display: inline-block;
+            text-align: left;
         }
         .icon {
             font-size: 20px;
@@ -68,42 +68,40 @@
             vertical-align: middle;
         }
         .category-price {
-            color: #1f77b4; /* Blue */
+            color: #1f77b4;
         }
         .category-packaging {
-            color: #ff7f0e; /* Orange */
+            color: #ff7f0e;
         }
         .category-product {
-            color: #2ca02c; /* Green */
+            color: #2ca02c;
         }
         .category-rider {
-            color: #d62728; /* Red */
+            color: #d62728;
         }
         .category-delivery {
-            color: #9467bd; /* Purple */
+            color: #9467bd;
         }
         .category-shelf {
-            color: #8c564b; /* Brown */
+            color: #8c564b;
         }
         .category-service {
-            color: #e377c2; /* Pink */
+            color: #e377c2;
         }
         .category-seller {
-            color: #7f7f7f; /* Grey */
+            color: #7f7f7f;
         }
-        /* Logo style */
         .logo {
             position: absolute;
             top: 20px;
             right: 20px;
-            width: 150px; /* Increased width of the logo */
-            height: 80px; /* Increased height of the logo */
+            width: 150px;
+            height: 80px;
         }
-        /* Footer style */
         footer {
             width: 100%;
-            background-color: #ccc; /* Light grey background */
-            padding: 10px 0; /* Padding for content within footer */
+            background-color: #ccc;
+            padding: 10px 0;
             text-align: center;
             color: #666;
             position: relative;
@@ -118,11 +116,10 @@
             }
             return true;
         }
-
         function clearPredictions() {
             var predictionsDiv = document.querySelector('.predictions');
             if (predictionsDiv) {
-                predictionsDiv.innerHTML = ''; // Clear previous predictions
+                predictionsDiv.innerHTML = '';
             }
         }
     </script>
@@ -133,7 +130,7 @@
         <div class="input-container">
             <h2>Enter Text to Predict Multi-Label Classification</h2>
             <form name="predictForm" method="post" onsubmit="clearPredictions(); return validateForm()">
-                <textarea name="text" rows="4" cols="50"></textarea><br><br>
+                <textarea name="text" rows="4" cols="50">{{ text }}</textarea><br><br>
                 <input type="submit" value="Predict">
             </form>
         </div>
@@ -155,3 +152,4 @@
     </footer>
 </body>
 </html>
+