Added file sending to all personalities

This commit is contained in:
Saifeddine ALOUI 2023-08-21 01:31:05 +02:00
parent 83120321ea
commit 00bc1e3520
5 changed files with 89 additions and 33 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -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-8de594d6.js"></script>
<link rel="stylesheet" href="/assets/index-90cbdba9.css">
<script type="module" crossorigin src="/assets/index-dcf8c5e9.js"></script>
<link rel="stylesheet" href="/assets/index-c838fd47.css">
</head>
<body>
<div id="app"></div>

View File

@ -27,7 +27,7 @@
</button>
<button v-if="fileList.length > 0"
class="mx-1 w-full text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
:title="showFileList ? 'Hide file list' : 'Show file list'" type="button"
:title="showFileList ? 'Send files' : 'Show file list'" type="button"
@click.stop="send_files">
<i data-feather="send"></i>
@ -223,6 +223,8 @@ import MountedPersonalitiesList from '@/components/MountedPersonalitiesList.vue'
import PersonalitiesCommands from '@/components/PersonalitiesCommands.vue';
import { useStore } from 'vuex'; // Import the useStore function
import { inject } from 'vue';
import socket from '@/services/websocket.js'
export default {
name: 'ChatBox',
emits: ["messageSentEvent", "stopGenerating"],
@ -279,6 +281,41 @@ export default {
}
},
methods: {
send_file(file){
const formData = new FormData();
formData.append('file', file);
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: file.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(file);
},
// vue.js method. The list of files are in this.fileList
// This function will call this.send_file on each file from this.fileList
send_files(){
for(let i = 0; i < this.fileList.length; i++){
let file = this.fileList[i];
this.send_file(file);
}
this.fileList = [];
},
startSpeechRecognition() {
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

View File

@ -24,7 +24,9 @@
<div class="m-0">
<button v-show="!generating" id="generate-button" @click="generate" class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-2">Generate Text</button>
<button v-show="generating" id="stop-button" @click="stopGeneration" class="bg-red-500 hover:bg-red-600 active:bg-red-700 text-white font-bold py-2 px-4 rounded ml-2 ">Stop Generation</button>
<button v-show="!generating" id="export-button" @click="exportText" class="bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-bold py-2 px-4 rounded ml-2">Export Text</button>
<button v-show="!generating" id="export-button" @click="exportText" class="bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-bold py-2 px-4 rounded ml-2"><i data-feather="upload"></i></button>
<button v-show="!generating" id="import-button" @click="importText" class="bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-bold py-2 px-4 rounded ml-2"><i data-feather="download"></i></button>
<input type="file" id="import-input" class="hidden">
</div>
</div>
<div class="flex-grow m-2 p-2 border border-blue-300 rounded-md border-2 border-blue-300 m-2 p-4">
@ -223,6 +225,22 @@ export default {
element.click();
document.body.removeChild(element);
},
importText() {
const inputFile = document.getElementById("import-input");
if (!inputFile) return; // If the element doesn't exist, do nothing
inputFile.addEventListener("change", event => {
if (event.target.files && event.target.files[0]) {
const reader = new FileReader();
reader.onload = () => {
this.text = reader.result;
};
reader.readAsText(event.target.files[0]);
} else {
alert("Please select a file.");
}
});
inputFile.click();
},
setPreset() {
this.text = this.presets[this.selectedPreset];
},