New UI, upgraded code

api/__init__.py

@@ -20,6 +20,7 @@ from lollms.binding import LOLLMSConfig, BindingBuilder, LLMBinding, ModelBuilde
 from lollms.paths import LollmsPaths
 from lollms.helpers import ASCIIColors, trace_exception
 from lollms.app import LollmsApplication
+from lollms.utilities import Image64BitsManager
 import multiprocessing as mp
 import threading
 import time
@@ -422,6 +423,38 @@ class LoLLMsAPPI(LollmsApplication):
             ASCIIColors.error(f'Client {request.sid} canceled generation')
             self.cancel_gen = False
 
+        @socketio.on('send_file')
+        def send_file(data):
+            client_id = request.sid
+            self.connections[client_id]["generated_text"]       = ""
+            self.connections[client_id]["cancel_generation"]    = False
+            
+            try:
+                self.personality.setCallback(partial(self.process_chunk,client_id = client_id))
+                ASCIIColors.info("Recovering file from front end")
+                file = Image64BitsManager.b642img(data["fileData"])
+
+                path:Path = self.lollms_paths.personal_uploads_path / self.personality.personality_folder_name
+                path.mkdir(parents=True, exist_ok=True)
+                file_path = path / data["filename"]
+                file.save( file_path )
+                if self.personality.processor:
+                    self.personality.processor.add_file(file_path, self.process_chunk)
+                    
+                self.socketio.emit('file_received',
+                        {
+                            "status":True,
+                        }, room=client_id
+                )    
+            except Exception as ex:
+                ASCIIColors.error(ex)
+                trace_exception(ex)
+                self.socketio.emit('file_received',
+                        {
+                            "status":False,
+                            "error":"Couldn't receive file: "+str(ex)
+                        }, room=client_id
+                )    
         
         @socketio.on('generate_msg')
         def generate_msg(data):

app.py

@@ -213,7 +213,9 @@ class LoLLMsWebUI(LoLLMsAPPI):
 
         self.add_endpoint("/add_reference_to_local_model", "add_reference_to_local_model", self.add_reference_to_local_model, methods=["POST"])
         
-        self.add_endpoint("/send_file", "send_file", self.send_file, methods=["POST"])
+        
+        self.add_endpoint("/add_model_reference", "add_model_reference", self.add_model_reference, methods=["POST"])
+        
         self.add_endpoint("/upload_model", "upload_model", self.upload_model, methods=["POST"])
         self.add_endpoint("/upload_avatar", "upload_avatar", self.upload_avatar, methods=["POST"])
         
@@ -940,12 +942,12 @@ class LoLLMsWebUI(LoLLMsAPPI):
     
     def add_reference_to_local_model(self):     
         data = request.get_json()
-        path = data["path"]
+        path = Path(data["path"])
         if path.exists():
-            self.conversation.config.reference_model(path)
+            self.config.reference_model(path)
             return jsonify({"status": True})         
         else:        
-            return jsonify({"status": True})         
+            return jsonify({"status": True, "error":"Model not found"})         
 
     def list_mounted_personalities(self):
         ASCIIColors.yellow("- Listing mounted personalities")
@@ -1381,16 +1383,13 @@ class LoLLMsWebUI(LoLLMsAPPI):
             return jsonify({"status": False, "error":"Invalid ID"})         
                     
 
-    def send_file(self):
+    def add_model_reference(self):
         try:
-            ASCIIColors.info("Recovering file from front end")
+            ASCIIColors.info("Creating a model reference")
-            file = request.files['file']
+            path = Path(request.path)
-            path:Path = self.lollms_paths.personal_uploads_path / self.personality.personality_folder_name
+            ref_path=self.lollms_paths.personal_models_path/self.config.binding_name/(path.name+".reference")
-            path.mkdir(parents=True, exist_ok=True)
+            with open(ref_path,"w") as f:
-            file_path = path / file.filename
+                f.write(str(path))
-            file.save( file_path )
-            if self.personality.processor:
-                self.personality.processor.add_file(file_path, self.process_chunk)
 
             return jsonify({"status": True})   
         except Exception as ex:

web/dist/index.html

@@ -6,8 +6,8 @@
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LoLLMS WebUI - Welcome</title>
-    <script type="module" crossorigin src="/assets/index-4f571962.js"></script>
+    <script type="module" crossorigin src="/assets/index-1df73087.js"></script>
-    <link rel="stylesheet" href="/assets/index-46e7e2ac.css">
+    <link rel="stylesheet" href="/assets/index-b4fcbac4.css">
   </head>
   <body>
     <div id="app"></div>

web/src/components/ModelEntry.vue

@@ -4,11 +4,15 @@
     @click.stop="toggleSelected" :class="selected ? ' border-primary bg-primary' : 'border-transparent'" :title="title">
     <!-- CUSTOM MODEL VIEW -->
     <div class="flex flex-row" v-if="model.isCustomModel">
-      <div class="flex gap-3 items-center grow">
+      <div class="max-w-[300px] overflow-x-auto">
-        <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill">
+        <div class="flex gap-3 items-center grow">
-        <h3 class="font-bold font-large text-lg truncate ">
+          <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill">
-          {{ title }}
+          <div class="flex-1 overflow-hidden">
-        </h3>
+            <h3 class="font-bold font-large text-lg truncate">
+              {{ title }}
+            </h3>
+          </div>
+        </div>
       </div>
 
 

web/src/components/PersonalitiesCommands.vue

@@ -63,6 +63,7 @@
 import feather from 'feather-icons'
 import axios from "axios";
 import InteractiveMenu from "@/components/InteractiveMenu.vue"
+import socket from '@/services/websocket.js'
 
 export default {
   components:{
@@ -115,7 +116,27 @@ methods: {
       formData.append('file', this.selectedFile);
       console.log("Uploading file")
       this.loading=true;
-
+      // Read the file as a data URL and emit it to the server
+      const reader = new FileReader();
+      reader.onload = () => {
+        const data = {
+          filename: this.selectedFile.name,
+          fileData: reader.result,
+        };
+        socket.on('file_received',(resp)=>{
+          if(resp.status){
+            this.onShowToastMessage("File uploaded successfully",4,true)
+          }
+          else{
+            this.onShowToastMessage("Couldn't upload file\n"+resp.error,4,false)
+          }
+          this.loading = false;
+          socket.off('file_received')
+        }) 
+        socket.emit('send_file', data);
+      };
+      reader.readAsDataURL(this.selectedFile);
+      /*
       axios.post('/send_file', formData)
         .then(response => {
           this.loading = false;
@@ -127,6 +148,7 @@ methods: {
           // Handle any errors that occur during the upload
           console.error(error);
         });
+        */
     }, 
     async constructor() {
       nextTick(() => {

web/src/views/DiscussionsView.vue

@@ -419,9 +419,9 @@ export default {
                 });
 
         },        
-        showToastMessage(text){
+        showToastMessage(text, duration, isok){
             console.log("sending",text)
-            this.$refs.toast.showToast(text, 4, true)
+            this.$refs.toast.showToast(text, duration, isok)
         },        
         togglePanel() {
             this.panelCollapsed = !this.panelCollapsed;
@@ -906,6 +906,7 @@ export default {
                 console.log("Error: Could not get generation status", error);
             });
         },
+
         sendMsg(msg) {
             // Sends message to binding
             if (!msg) {

web/src/views/SettingsView.vue

@@ -1092,6 +1092,17 @@
                         </div> -->
 
                         <div class="p-2  ">
+                            <div>
+                                <div class="mb-3">
+                                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Create a reference from local file path:</label>
+                                    <input type="text" v-model="reference_path"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                        placeholder="Enter Path ..." required>
+                                </div>
+
+                                <button type="button" @click.stop="onCreateReference()"
+                                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add reference</button>
+                            </div>
 
                             <div v-if="!modelDownlaodInProgress">
                                 <div class="mb-3">
@@ -1639,6 +1650,8 @@ export default {
     data() {
 
         return {
+            // Local model reference path
+            reference_path:"",
             audioVoices:[],      
             // update
             has_updates:false,
@@ -2116,6 +2129,17 @@ export default {
             console.log(this.variant_choices)
             this.variantSelectionDialogVisible=true;
         },
+        onCreateReference() {
+            axios.post("/add_reference_to_local_model",{"path": this.reference_path}).then((resp)=>{
+                if(resp.status){
+                    this.$refs.toast.showToast("Reference created", 4, true)
+                    this.fetchModels();
+                }
+                else{
+                    this.$refs.toast.showToast("Couldn't create reference", 4, false)
+                }
+            }) 
+        },
         onInstallAddModel() {
 
 
@@ -2537,6 +2561,8 @@ export default {
             console.log("updating binding_name")
             this.update_setting('binding_name', value, (res) => {
                 console.log("updated binding_name")
+                this.$store.dispatch('refreshModels');
+
 
                 const index = this.bindingsArr.findIndex(item => item.folder == value)
                 const item = this.bindingsArr[index]