Refactor : chat shape display

static/css/style2.css

@@ -7513,6 +7513,92 @@ textarea.form-control-lg {
   top: 100% !important;
 }
 
+.top-sm-0 {
+  top: 0 !important;
+}
+
+.top-sm-10 {
+  top: 10% !important;
+}
+
+.top-sm-30 {
+  top : 30% !important;
+}
+.top-sm-50 {
+  top: 50% !important;
+}
+
+.top-sm-100 {
+  top: 100% !important;
+}
+
+.top-md-0 {
+  top: 0 !important;
+}
+
+.top-md-10 {
+  top: 10% !important;
+}
+
+.top-md-30 {
+  top : 30% !important;
+}
+.top-md-50 {
+  top: 50% !important;
+}
+
+.top-md-100 {
+  top: 100% !important;
+}
+@media (min-width: 992px ) {
+  @media(min-height : 600px) {
+    .top-lg-0 {
+      top: 0 !important;
+    }
+  }
+  @media (min-height : 900px) {
+    
+    .top-lg-10 {
+      top: 10% !important;
+    }
+    
+    .top-lg-30 {
+      top : 30% !important;
+    }
+    .top-lg-50 {
+      top: 50% !important;
+    }
+    
+    .top-lg-100 {
+      top: 100% !important;
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  
+  @media(min-height : 600px) {
+    .top-lg-0 {
+      top: 0% !important;
+    }
+  }
+  @media(min-height : 600px) {
+    .top-lg-0 {
+      top: 30% !important;
+    }
+  }
+  @media (min-height : 800px) {
+    .top-xl-45 {
+      top : 45% !important;
+    }
+  }
+}
+
+@media(min-height : 992px) {
+  .h-lg-100 {
+    height: 100% !important;
+  }
+}
 
 .bottom-0 {
   bottom: 0 !important;

static/js/sentence.js

@@ -4,7 +4,20 @@ function generateUniqueId() {
 }
 
 function submitForm() {
+    event.preventDefault(); // Prevent the default form submission
+
     var form = document.getElementById('sentenceForm');
+    var textarea = document.getElementById("ocr-result");
+
+    // Check if the textarea is empty
+    if (textarea.value.trim() === "") {
+        textarea.setCustomValidity("Input is required."); // Set custom validation message
+        textarea.reportValidity(); // Display the validation message
+        return; // Do not proceed with form submission
+    } else {
+        textarea.setCustomValidity(""); // Clear any previous validation message
+    }
+$
     var formData = new FormData(form);
 
     // Hide the presentation div

static/uploads/pdfs.txt

@@ -1 +0,0 @@
-2304.00746v4.VGTS__Visually_Guided_Text_Spotting_for_Novel_Categories_in_Historical_Manuscripts.pdf

templates/sentence.html

@@ -72,7 +72,7 @@
                                             style="overflow-y: scroll;">
                                             <div class="os-content" style="padding: 0px; height: 100%; width: 100%;">
                                                 <!-- Chat message right -->
-                                                <div class="d-inline mb-1 align-content-between position-relative top-30" id = "presentation">
+                                                <div class="d-inline mb-1 align-content-between position-relative top-xl-45 top-lg-0 top-lg-30" id = "presentation">
                                                     <div class="flex-grow-1 row">
                                                         <div class="w-100 col-1 text-center">
                                                             <div class="d-flex flex-column">
@@ -169,14 +169,14 @@
                     </div>
 
                     <div class="card-footer" style="background-color: #242525;">
-                        <form class="d-flex align-items-center" action="/sentence" method="post" id="sentenceForm">
+                        <form class="d-flex align-items-center" action="/sentence" method="post" id="sentenceForm" onsubmit="submitForm(event)">
                             <textarea class="form-control mb-sm-0 mb-3" id="ocr-result" name="text" data-autoresize=""
                                 placeholder="Type your text" rows="1" style="height: 50px;box-sizing: border-box;
-                                    resize: none; max-height: 120px;" onclick="addAutoResize()" onkeydown="handleEnter(event)" required></textarea>
-                            <button class="btn btn-sm btn-sentence ms-2"><img class="avatar avatar-xs"
+                                resize: none; max-height: 120px;" onclick="addAutoResize()" onkeydown="handleEnter(event)" required></textarea>
+                            <button class="btn btn-sm btn-sentence ms-2" type="submit"><img class="avatar avatar-xs"
                                     src="../static/icons/avignon_universite_blanc_RVB-1.png"></button>
                         </form>
-                    </div>                    
+                    </div>                     
                 </div>
                 <!-- Chat conversation END -->
             </div> <!-- Row END -->