Update application/static/js/components/uiManager.js

application/static/js/components/uiManager.js

@@ -1,3 +1,4 @@
+// application/static/js/uiManager.js
 import Initialize from "./initialize.js";
 import Chat from "./chat.js";
 import RenderSymbols from "./renderSymbols.js";
@@ -10,7 +11,7 @@ class UIManager{
         this.hamburger = document.getElementById('hamburger');
         this.messagesDiv = document.getElementById('messages');
         this.container = document.getElementById('container')
-        this.prevChatsCont = document.getElementById('prevChatsCont'); 
+        this.prevChatsCont = document.getElementById('prevChatsCont');
         this.textBox = document.getElementById('textBox');
         this.sendBtn = document.getElementById('sendBtn');
         this.newChat = document.getElementById('newChat');
@@ -24,6 +25,32 @@ class UIManager{
         this.userP;
         this.imageMode = false;
         this.dialog = null;
+
+        // Add the image input element (hidden)
+        this.imageInput = document.createElement('input');
+        this.imageInput.type = 'file';
+        this.imageInput.id = 'imageInput';
+        this.imageInput.accept = 'image/*';
+        this.imageInput.style.display = 'none';
+        document.body.appendChild(this.imageInput);  // Append to body
+
+        // Add the paperclip icon (label for the input)
+        this.imageUploadLabel = document.createElement('label');
+        this.imageUploadLabel.htmlFor = 'imageInput'; // Connect label to input
+        this.imageUploadLabel.className = 'image-upload-label';
+        this.imageUploadLabel.innerHTML = '<i class="fas fa-paperclip"></i>'; // FontAwesome icon
+        this.textBox.parentNode.insertBefore(this.imageUploadLabel, this.textBox);
+
+        // Event listener for the paperclip icon (image upload)
+        this.imageUploadLabel.addEventListener('click', () => {
+            this.imageInput.click(); // Trigger the file input
+        });
+
+        this.imageInput.addEventListener('change', () => {
+          this.handleImageUpload();
+        });
+
+
     }
     async run(){
         await this.initializer.initialize();
@@ -35,11 +62,10 @@ class UIManager{
             this.send();
         })
         window.addEventListener('keydown',(e)=>{
-            if (e.key === '/' && document.activeElement === this.textBox) {
+             if (e.key === '/' && document.activeElement === this.textBox) {
                 e.preventDefault();
                 this.showDialog();
             }
-
             if(e.key=='Enter' && !this.sendBtn.disabled){
                 this.send();
             }
@@ -54,14 +80,14 @@ class UIManager{
                 this.webSearchBtn.style.color = 'rgba(30,30,250,0.8)';
             }
             this.webSearch = !this.webSearch;
-            
+
         })
         document.getElementById('closeAlert').onclick = ()=>{
             document.getElementById('alert').style.display = 'none'
         }
     }
 
-    showDialog() {
+      showDialog() {
         if (this.dialog) {
             this.dialog.remove();
             this.dialog = null;
@@ -98,29 +124,22 @@ class UIManager{
         });
     }
 
-
-
     async send(){
-        let promptText = this.textBox.value;
-        let imageBase64 = null;
-
-        if (this.imageMode) {
+      let promptText = this.textBox.value;
+      let imageBase64 = null;
+      if (this.imageMode) {
             const file = await this.getImageFile();
             if (file) {
                 imageBase64 = await this.getBase64(file);
             }
             promptText = promptText.replace(/^\/image\s*/, '');
-            this.imageMode = false;
+            this.imageMode = false; // Reset image mode after processing
         }
-
-        this.appendUserMsg(promptText, imageBase64);
+        this.appendUserMsg(promptText, imageBase64); // Pass image data
         this.appendAiMsg();
-
-
         await this.chat.chat();
     }
 
-
     async getImageFile() {
         return new Promise(resolve => {
             const input = document.createElement('input');
@@ -133,8 +152,7 @@ class UIManager{
             input.click();
         });
     }
-
-    async getBase64(file) {
+     async getBase64(file) {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
             reader.readAsDataURL(file);
@@ -142,6 +160,44 @@ class UIManager{
             reader.onerror = error => reject(error);
         });
     }
+    async handleImageUpload() {
+        const file = this.imageInput.files[0];
+        if (!file) return;
+
+        this.imageMode = true; // Set image mode
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            // Display image preview
+            if (this.userDiv) {
+                const imgPreview = document.createElement('img');
+                imgPreview.src = e.target.result;
+                imgPreview.className = 'uploaded-image-preview';
+                this.userDiv.appendChild(imgPreview);  // Add to current userDiv
+            }
+
+              // Generate and display caption
+            this.generateAndDisplayCaption(e.target.result);
+
+
+        }
+        reader.readAsDataURL(file);
+        this.imageInput.value = ''; // Clear the input
+    }
+
+      async generateAndDisplayCaption(imageData) {
+        try {
+            const caption = await this.initializer.image_captioning.generate_caption(imageData);
+            if (this.userDiv) { // Check if userDiv exists.
+                const captionElement = document.createElement('div');
+                captionElement.className = 'image-caption';
+                captionElement.textContent = `Caption: ${caption}`;
+                this.userDiv.appendChild(captionElement);
+            }
+        } catch (error) {
+            console.error("Error generating caption:", error);
+        }
+    }
 
 
     appendUserMsg(msg=false, imageBase64 = null){
@@ -198,5 +254,57 @@ class UIManager{
             this.initializer.reInitialize(prevChat.id);
         })
     }
+
+    addReadAloudButton(parentDiv) {
+        const btn = document.createElement('button');
+        btn.className = 'read-aloud-btn';
+        btn.innerHTML = '<i class="fas fa-volume-up"></i>'; // FontAwesome icon
+        btn.addEventListener('click', () => {
+            this.speakText(parentDiv.querySelector('p').innerText);
+        });
+        parentDiv.appendChild(btn);
+    }
+
+
+    async speakText(text) {
+        try {
+            const response = await fetch(`/tts?text=${encodeURIComponent(text)}`);
+            if (!response.ok) {
+                console.error("TTS request failed:", response.status, response.statusText);
+                return;
+            }
+            const audioBlob = await response.blob();
+            const audioUrl = URL.createObjectURL(audioBlob);
+            const audio = new Audio(audioUrl);
+            audio.play();
+        } catch (error) {
+            console.error("Error during TTS:", error);
+        }
+    }
+
+    displayMemory(memoryText) {
+        let memoryDisplay = document.querySelector('.memory-display');
+        if (!memoryDisplay) {
+            memoryDisplay = document.createElement('div');
+            memoryDisplay.className = 'memory-display';
+            this.messagesDiv.parentNode.insertBefore(memoryDisplay, this.messagesDiv); //show above messages
+        }
+        memoryDisplay.textContent = `Memory: ${memoryText}`;
+    }
+    showReasoning() {
+        const reasoningDisplay = document.createElement('div');
+        reasoningDisplay.className = 'reasoning-display';
+        reasoningDisplay.textContent = 'Reasoning...';
+        reasoningDisplay.dataset.startTime = Date.now(); // Store start time
+        this.messagesDiv.appendChild(reasoningDisplay); // Add to messages
+        return reasoningDisplay;
+    }
+
+    updateReasoningTime(reasoningDisplay) {
+        const endTime = Date.now();
+        const startTime = parseInt(reasoningDisplay.dataset.startTime, 10);
+        const duration = (endTime - startTime) / 1000; // in seconds
+        reasoningDisplay.textContent = `Reasoning... (${duration.toFixed(2)}s)`;
+    }
 }
 export default UIManager